Refactoring: moving some template to separate files + classMap fix.

This commit is contained in:
John Livingston
2024-06-12 17:08:48 +02:00
parent 2c3739f633
commit 4976a4f282
7 changed files with 518 additions and 438 deletions

View File

@ -7,7 +7,7 @@ import { customElement, property } from 'lit/decorators.js'
import { LivechatElement } from './livechat'
@customElement('livechat-configuration-section-header')
export class ConfigurationRowElement extends LivechatElement {
export class ConfigurationSectionHeaderElement extends LivechatElement {
@property({ attribute: false })
public override title: string = 'title'

View File

@ -522,7 +522,12 @@ export class DynamicTableFormElement extends LivechatElement {
return html`<input
type=${propertySchema.inputType}
name=${inputName}
class="form-control ${classMap(this._getInputValidationClass(propertyName, originalIndex))}"
class=${classMap(
Object.assign(
{ 'form-control': true },
this._getInputValidationClass(propertyName, originalIndex)
)
)}
id=${inputId}
aria-describedby="${inputId}-feedback"
list=${(propertySchema.datalist) ? inputId + '-datalist' : nothing}
@ -550,7 +555,12 @@ export class DynamicTableFormElement extends LivechatElement {
return html`<livechat-tags-input
.type=${'text'}
.name=${inputName}
class="form-control ${classMap(this._getInputValidationClass(propertyName, originalIndex))}"
class=${classMap(
Object.assign(
{ 'form-control': true },
this._getInputValidationClass(propertyName, originalIndex)
)
)}
id=${inputId}
.inputPlaceholder=${ifDefined(propertySchema.label)}
aria-describedby="${inputId}-feedback"
@ -573,7 +583,12 @@ export class DynamicTableFormElement extends LivechatElement {
originalIndex: number): TemplateResult => {
return html`<textarea
name=${inputName}
class="form-control ${classMap(this._getInputValidationClass(propertyName, originalIndex))}"
class=${classMap(
Object.assign(
{ 'form-control': true },
this._getInputValidationClass(propertyName, originalIndex)
)
)}
id=${inputId}
aria-describedby="${inputId}-feedback"
min=${ifDefined(propertySchema.min)}
@ -594,7 +609,12 @@ export class DynamicTableFormElement extends LivechatElement {
return html`<input
type="checkbox"
name=${inputName}
class="form-check-input ${classMap(this._getInputValidationClass(propertyName, originalIndex))}"
class=${classMap(
Object.assign(
{ 'form-check-input': true },
this._getInputValidationClass(propertyName, originalIndex)
)
)}
id=${inputId}
aria-describedby="${inputId}-feedback"
@change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}
@ -610,7 +630,12 @@ export class DynamicTableFormElement extends LivechatElement {
propertyValue: string,
originalIndex: number): TemplateResult => {
return html`<select
class="form-select ${classMap(this._getInputValidationClass(propertyName, originalIndex))}"
class=${classMap(
Object.assign(
{ 'form-select': true },
this._getInputValidationClass(propertyName, originalIndex)
)
)}
id=${inputId}
aria-describedby="${inputId}-feedback"
aria-label=${inputName}
@ -634,7 +659,7 @@ export class DynamicTableFormElement extends LivechatElement {
): TemplateResult => {
return html`<livechat-image-file-input
.name=${inputName}
class="${classMap(this._getInputValidationClass(propertyName, originalIndex))}"
class=${classMap(this._getInputValidationClass(propertyName, originalIndex))}
id=${inputId}
aria-describedby="${inputId}-feedback"
@change=${(event: Event) => this._updatePropertyFromValue(event, propertyName, propertySchema, rowId)}