npm - @foxy.io/elements - Versions diffs - 1.40.0-beta.1 → 1.40.0-beta.3 - Mend

@foxy.io/elements 1.40.0-beta.1 → 1.40.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/dist/elements/internal/InternalSelectControl/InternalSelectControl.js CHANGED Viewed

@@ -75,65 +75,69 @@ export class InternalSelectControl extends InternalEditableControl {
     __renderSummaryItemLayout() {
         const selection = this.options.find(v => v.value === this._value);
         return html `
-      <div class="flex items-start leading-xs">
-        <div class="flex-1">
-          <label class="text-m text-body" for="select">${this.label}</label>
-          <p class="text-xs text-secondary">${this.helperText}</p>
-          <p
-            class="text-xs text-error"
-            ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
-          >
-            ${this._errorMessage}
-          </p>
-        </div>
-        <div
-          class=${classMap({
-            'relative rounded-s transition-colors transition-opacity': true,
+      <div class="leading-xs">
+        <div class="flex items-center gap-s">
+          <label class="text-m text-body flex-1 whitespace-nowrap" for="select">
+            ${this.label}
+          </label>
+          <div
+            class=${classMap({
+            'relative rounded-s transition-colors transition-opacity min-w-0': true,
             'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,
             'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,
             'text-secondary': this.readonly,
             'text-disabled': this.disabled,
             'font-medium': !this.readonly,
         })}
-        >
-          <div class="flex items-center gap-xs">
-            <div>
-              ${selection
+          >
+            <div class="flex items-center gap-xs min-w-0">
+              <div class="truncate min-w-0">
+                ${selection
             ? 'label' in selection
                 ? this.t(selection.label)
                 : selection.rawLabel
             : this.placeholder}
-            </div>
-            ${this.readonly
+              </div>
+              ${this.readonly
             ? ''
-            : svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25)"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
-          </div>
+            : svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0" style="width: 1em; height: 1em; transform: scale(1.25)"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
+            </div>
-          <select
-            class=${classMap({
+            <select
+              class=${classMap({
             'absolute inset-0 opacity-0': true,
             'cursor-pointer': !this.disabled && !this.readonly,
         })}
-            id="select"
-            ?disabled=${this.disabled}
-            ?hidden=${this.readonly}
-            @blur=${() => (this.__isErrorVisible = true)}
-            @change=${(evt) => {
+              id="select"
+              ?disabled=${this.disabled}
+              ?hidden=${this.readonly}
+              @blur=${() => (this.__isErrorVisible = true)}
+              @change=${(evt) => {
             evt.stopPropagation();
             this._value = evt.target.value;
         }}
+            >
+              <option value="" ?selected=${!selection} disabled hidden>${this.placeholder}</option>
+              ${this.options.map(option => html `
+                    <option
+                      value=${option.value}
+                      ?selected=${selection && option.value === this._value}
+                    >
+                      ${'label' in option ? this.t(option.label) : option.rawLabel}
+                    </option>
+                  `)}
+            </select>
+          </div>
+        </div>
+        <div style="max-width: 32rem">
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p
+            class="text-xs text-error"
+            ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
           >
-            <option value="" ?selected=${!selection} disabled hidden>${this.placeholder}</option>
-            ${this.options.map(option => html `
-                  <option
-                    value=${option.value}
-                    ?selected=${selection && option.value === this._value}
-                  >
-                    ${'label' in option ? this.t(option.label) : option.rawLabel}
-                  </option>
-                `)}
-          </select>
+            ${this._errorMessage}
+          </p>
         </div>
       </div>
     `;

package/dist/elements/internal/InternalSelectControl/InternalSelectControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalSelectControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSelectControl/InternalSelectControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QAWE,uCAAuC;QACvC,YAAO,GAAa,EAAE,CAAC;QAEvB,kGAAkG;QAClG,WAAM,GAAyC,IAAI,CAAC;QAEpD,oEAAoE;QACpE,UAAK,GAAkB,IAAI,CAAC;QAEpB,qBAAgB,GAAG,KAAK,CAAC;~~IAqHnC~~,CAAC;~~IAxIC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,gBAAgB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACvC,CAAC;IACJ,CAAC;IAaD,aAAa;;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAA;;;;wBAIS,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;sBAE/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;gBAEV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;;yBAER,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACnC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;YACjE,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC,CAAC;iBACM,IAAI,CAAC,MAAM;kBACV,CAAC,GAAgB,EAAE,EAAE;YAC7B,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAgC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACtB,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACnE,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,MAAgB,CAAC;IACzF,CAAC;IAEO,yBAAyB;QAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QAElE,OAAO,IAAI,CAAA~~;;;yDAG0C~~,IAAI,CAAC,KAAK~~;8CACrB,IAAI,CAAC,UAAU~~;;;~~sBAGvC~~,~~CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,~~QAAQ,~~IAAI,IAAI,~~CAAC~~,QAAQ;;cAEhE,IAAI,CAAC,aAAa;;;;;kBAKd,QAAQ,CAAC~~;YACf,~~yDAAyD~~,EAAE,IAAI;~~YAC/D~~,kDAAkD,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YACpF,2CAA2C,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC7E,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;;;;~~gBAII~~,SAAS;YACT,CAAC,CAAC,OAAO,IAAI,SAAS;gBACpB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;gBACzB,CAAC,CAAC,SAAS,CAAC,QAAQ;YACtB,CAAC,CAAC,IAAI,CAAC,WAAW;;~~cAEpB~~,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,GAAG,CAAA,~~gbAAgb~~;;;;~~oBAI/a~~,QAAQ,CAAC;YACf,4BAA4B,EAAE,IAAI;YAClC,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC;;~~wBAEU~~,IAAI,CAAC,QAAQ;~~sBACf~~,IAAI,CAAC,QAAQ;~~oBACf~~,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;~~sBAClC~~,CAAC,GAAU,EAAE,EAAE;YACvB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,MAA4B,CAAC,KAAK,CAAC;QACxD,CAAC;;~~yCAE4B~~,CAAC,SAAS,oBAAoB,IAAI,CAAC,WAAW;~~cACzE~~,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;~~4BAEQ~~,MAAM,CAAC,KAAK;~~gCACR~~,SAAS,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;;~~sBAEnD~~,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;;~~iBAE~~/D,CACJ;;;;~~KAIR~~,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { ComboBoxElement } from '@vaadin/vaadin-combo-box';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\n/*\n Internal control wrapper for select elements.\n \n @since 1.21.0\n * @element foxy-internal-select-control\n /\nexport class InternalSelectControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n options: { type: Array },\n layout: {},\n theme: { type: String },\n __isErrorVisible: { attribute: false },\n };\n }\n\n /* List of radio buttons to render. /\n options: Option[] = [];\n\n /* Standalone renders Vaadin Combo Box. Summary item renders a special UI for summary control. /\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n /* Same as the \"theme\" attribute/property of `vaadin-combo-box`. */\n theme: string \| null = null;\n\n private __isErrorVisible = false;\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-combo-box\n item-value-path=\"value\"\n item-label-path=\"label\"\n error-message=${ifDefined(this._errorMessage)}\n item-id-path=\"value\"\n helper-text=${this.helperText}\n placeholder=${this.placeholder}\n label=${this.label}\n class=\"w-full\"\n theme=${ifDefined(this.theme ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n clear-button-visible\n .checkValidity=${this._checkValidity}\n .items=${this.options.map(option => ({\n label: 'label' in option ? this.t(option.label) : option.rawLabel,\n value: option.value,\n }))}\n .value=${this._value}\n @change=${(evt: CustomEvent) => {\n evt.stopPropagation();\n const comboBox = evt.currentTarget as ComboBoxElement;\n this._value = comboBox.value;\n comboBox.validate();\n }}\n >\n </vaadin-combo-box>\n `;\n }\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n const comboBox = this.renderRoot.querySelector('vaadin-combo-box');\n if (comboBox && comboBox.value !== this._value) comboBox.value = this._value as string;\n }\n\n private __renderSummaryItemLayout() {\n const selection = this.options.find(v => v.value === this._value);\n\n return html`\n <div class=\"~~flex items-start~~ leading-xs\">\n <div class=\"flex-1\">\n <label class=\"text-m text-body\" ~~for=\"select\">${this.label}</label>\n <p class=\"text~~-xs ~~text~~-~~secondary~~\"~~>${this.helperText}</p>\n <p\n class~~=\"~~text-xs text-error~~\"~~\n ?hidden=${!this.__isErrorVisible \|\| this.disabled \|\| this.readonly}\n~~ >\n ${this.~~_errorMessage~~}\n </p>\n ~~</div>\n\n~~ <div\n class=${classMap({\n 'relative rounded-s transition-colors transition-opacity': true,\n 'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,\n 'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n >\n <div class=\"flex items-center gap-xs\">\n <div>\n ${selection\n ? 'label' in selection\n ? this.t(selection.label)\n : selection.rawLabel\n : this.placeholder}\n </div>\n ${this.readonly\n ? ''\n : svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25)\"><path fill-rule=\"evenodd\" d=\"M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n </div>\n\n <select\n class=${classMap({\n 'absolute inset-0 opacity-0': true,\n 'cursor-pointer': !this.disabled && !this.readonly,\n })}\n id=\"select\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly}\n @blur=${() => (this.__isErrorVisible = true)}\n @change=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLSelectElement).value;\n }}\n >\n <option value=\"\" ?selected=${!selection} disabled hidden>${this.placeholder}</option>\n ${this.options.map(\n option =>\n html`\n <option\n value=${option.value}\n ?selected=${selection && option.value === this._value}\n >\n ${'label' in option ? this.t(option.label) : option.rawLabel}\n </option>\n `\n )}\n </select>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalSelectControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSelectControl/InternalSelectControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QAWE,uCAAuC;QACvC,YAAO,GAAa,EAAE,CAAC;QAEvB,kGAAkG;QAClG,WAAM,GAAyC,IAAI,CAAC;QAEpD,oEAAoE;QACpE,UAAK,GAAkB,IAAI,CAAC;QAEpB,qBAAgB,GAAG,KAAK,CAAC;IAyHnC,CAAC;IA5IC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,gBAAgB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACvC,CAAC;IACJ,CAAC;IAaD,aAAa;;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAA;;;;wBAIS,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;;sBAE/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;gBAEV,SAAS,OAAC,IAAI,CAAC,KAAK,mCAAI,SAAS,CAAC;oBAC9B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;;yBAER,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACnC,KAAK,EAAE,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;YACjE,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC,CAAC;iBACM,IAAI,CAAC,MAAM;kBACV,CAAC,GAAgB,EAAE,EAAE;YAC7B,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAgC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACtB,CAAC;;;KAGJ,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAED,OAAO,CAAC,OAAiC;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACnE,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,MAAgB,CAAC;IACzF,CAAC;IAEO,yBAAyB;QAC/B,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC;QAElE,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,KAAK;;;oBAGJ,QAAQ,CAAC;YACf,iEAAiE,EAAE,IAAI;YACvE,kDAAkD,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YACpF,2CAA2C,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC7E,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;;;;kBAII,SAAS;YACT,CAAC,CAAC,OAAO,IAAI,SAAS;gBACpB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC;gBACzB,CAAC,CAAC,SAAS,CAAC,QAAQ;YACtB,CAAC,CAAC,IAAI,CAAC,WAAW;;gBAEpB,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,GAAG,CAAA,scAAsc;;;;sBAIrc,QAAQ,CAAC;YACf,4BAA4B,EAAE,IAAI;YAClC,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;SACnD,CAAC;;0BAEU,IAAI,CAAC,QAAQ;wBACf,IAAI,CAAC,QAAQ;sBACf,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;wBAClC,CAAC,GAAU,EAAE,EAAE;YACvB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,MAA4B,CAAC,KAAK,CAAC;QACxD,CAAC;;2CAE4B,CAAC,SAAS,oBAAoB,IAAI,CAAC,WAAW;gBACzE,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,EAAE,CACP,IAAI,CAAA;;8BAEQ,MAAM,CAAC,KAAK;kCACR,SAAS,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;;wBAEnD,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ;;mBAE/D,CACJ;;;;;;8CAM+B,IAAI,CAAC,UAAU;;;sBAGvC,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;;cAEhE,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { ComboBoxElement } from '@vaadin/vaadin-combo-box';\nimport type { Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\n\n/*\n Internal control wrapper for select elements.\n \n @since 1.21.0\n * @element foxy-internal-select-control\n /\nexport class InternalSelectControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n options: { type: Array },\n layout: {},\n theme: { type: String },\n __isErrorVisible: { attribute: false },\n };\n }\n\n /* List of radio buttons to render. /\n options: Option[] = [];\n\n /* Standalone renders Vaadin Combo Box. Summary item renders a special UI for summary control. /\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n /* Same as the \"theme\" attribute/property of `vaadin-combo-box`. */\n theme: string \| null = null;\n\n private __isErrorVisible = false;\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-combo-box\n item-value-path=\"value\"\n item-label-path=\"label\"\n error-message=${ifDefined(this._errorMessage)}\n item-id-path=\"value\"\n helper-text=${this.helperText}\n placeholder=${this.placeholder}\n label=${this.label}\n class=\"w-full\"\n theme=${ifDefined(this.theme ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n clear-button-visible\n .checkValidity=${this._checkValidity}\n .items=${this.options.map(option => ({\n label: 'label' in option ? this.t(option.label) : option.rawLabel,\n value: option.value,\n }))}\n .value=${this._value}\n @change=${(evt: CustomEvent) => {\n evt.stopPropagation();\n const comboBox = evt.currentTarget as ComboBoxElement;\n this._value = comboBox.value;\n comboBox.validate();\n }}\n >\n </vaadin-combo-box>\n `;\n }\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n const comboBox = this.renderRoot.querySelector('vaadin-combo-box');\n if (comboBox && comboBox.value !== this._value) comboBox.value = this._value as string;\n }\n\n private __renderSummaryItemLayout() {\n const selection = this.options.find(v => v.value === this._value);\n\n return html`\n <div class=\"leading-xs\">\n <div class=\"flex items-center gap-s\">\n <label class=\"text-m text-body flex-1 whitespace-nowrap\" for=\"select\">\n ${this.label}\n </label>\n <div\n class=${classMap({\n 'relative rounded-s transition-colors transition-opacity min-w-0': true,\n 'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,\n 'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n >\n <div class=\"flex items-center gap-xs min-w-0\">\n <div class=\"truncate min-w-0\">\n ${selection\n ? 'label' in selection\n ? this.t(selection.label)\n : selection.rawLabel\n : this.placeholder}\n </div>\n ${this.readonly\n ? ''\n : svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"flex-shrink-0\" style=\"width: 1em; height: 1em; transform: scale(1.25)\"><path fill-rule=\"evenodd\" d=\"M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n </div>\n\n <select\n class=${classMap({\n 'absolute inset-0 opacity-0': true,\n 'cursor-pointer': !this.disabled && !this.readonly,\n })}\n id=\"select\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly}\n @blur=${() => (this.__isErrorVisible = true)}\n @change=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLSelectElement).value;\n }}\n >\n <option value=\"\" ?selected=${!selection} disabled hidden>${this.placeholder}</option>\n ${this.options.map(\n option =>\n html`\n <option\n value=${option.value}\n ?selected=${selection && option.value === this._value}\n >\n ${'label' in option ? this.t(option.label) : option.rawLabel}\n </option>\n `\n )}\n </select>\n </div>\n </div>\n\n <div style=\"max-width: 32rem\">\n <p class=\"text-xs text-secondary\">${this.helperText}</p>\n <p\n class=\"text-xs text-error\"\n ?hidden=${!this.__isErrorVisible \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </p>\n </div>\n </div>\n `;\n }\n}\n"]}

package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
 export declare class InternalSummaryControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
+    unsafeHelperText: boolean;
     layout: null | 'section' | 'details';
     count: number | null;
     open: boolean;

package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js CHANGED Viewed

@@ -1,9 +1,11 @@
 import { svg } from 'lit-html';
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import { html, css } from 'lit-element';
 export class InternalSummaryControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.unsafeHelperText = false;
         this.layout = null;
         this.count = null;
         this.open = false;
@@ -11,6 +13,7 @@ export class InternalSummaryControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            unsafeHelperText: { type: Boolean, attribute: 'unsafe-helper-text' },
             layout: {},
             count: { type: Number },
             open: { type: Boolean },
@@ -35,6 +38,21 @@ details summary > div{
 details[open] summary > div{
   border-radius:var(--lumo-border-radius) var(--lumo-border-radius) 0 0;
 }
+.with-unsafe a{
+  text-decoration:underline;
+  transition:color 0.1s ease-in-out;
+}
+.with-unsafe a:hover{
+  color:var(--lumo-primary-text-color);
+}
+.with-unsafe a:focus{
+  outline:none;
+  box-shadow:0 0 0 2px var(--lumo-primary-color-50pct);
+  border-radius:var(--lumo-border-radius-s);
+}
       `,
         ];
     }
@@ -74,7 +92,9 @@ details[open] summary > div{
                   ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1.2em; height: 1.2em"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>`}
                 </span>
               </p>
-              <p class="text-s text-secondary" ?hidden=${!this.helperText}>${this.helperText}</p>
+              <p class="text-s text-secondary with-unsafe" ?hidden=${!this.helperText}>
+                ${this.unsafeHelperText ? unsafeHTML(this.helperText) : this.helperText}
+              </p>
             </div>
           </summary>
           <div class="overflow-hidden grid" style="gap: 1px">
@@ -86,7 +106,9 @@ details[open] summary > div{
         return html `
       <div class="leading-s mb-s" ?hidden=${!this.label && !this.helperText}>
         <p class="font-medium text-body text-l" ?hidden=${!this.label}>${this.label}</p>
-        <p class="text-s text-secondary" ?hidden=${!this.helperText}>${this.helperText}</p>
+        <p class="text-s text-secondary with-unsafe" ?hidden=${!this.helperText}>
+          ${this.unsafeHelperText ? unsafeHTML(this.helperText) : this.helperText}
+        </p>
       </div>
       <div class="rounded overflow-hidden grid" style="gap: 1px">
         <slot></slot>

package/dist/elements/internal/InternalSummaryControl/InternalSummaryControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAkB,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IAAnE;;~~QAkCE~~,WAAM,GAAiC,IAAI,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAE5B,SAAI,GAAG,KAAK,CAAC;~~IA0Df~~,CAAC;~~IA/FC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG~~;;;;;;;;;;;;;;;;OAiBF~~;SACF,CAAC;IACJ,CAAC;~~IAQD~~,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;YAC7B,OAAO,IAAI,CAAA;;;kBAGC,IAAI,CAAC,IAAI;oBACP,CAAC,GAAU,EAAE,EAAE;gBACvB,MAAM,OAAO,GAAG,GAAG,CAAC,aAAmC,CAAC;gBACxD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;gBACzB,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnF,CAAC;;;;;;wBAMa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;;;;0BAI7B,CAAC,IAAI,CAAC,KAAK;;;oBAGjB,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;oBAMrE,GAAG,CAAA,uTAAuT;;;~~yDAGrR~~,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU~~;;;;;;;OAOrF~~,CAAC;SACH;QAED,OAAO,IAAI,CAAA;4CAC6B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;0DACjB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK~~;mDAChC~~,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU~~;;;;;KAKjF~~,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport { svg, TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n count: { type: Number },\n open: { type: Boolean },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n ::slotted() {\n min-width: 100%;\n }\n\n :host(:not([layout='section'])) slot::slotted() {\n background-color: var(--lumo-contrast-5pct);\n padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n }\n\n details summary > div {\n border-radius: var(--lumo-border-radius);\n }\n\n details[open] summary > div {\n border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;\n }\n `,\n ];\n }\n\n layout: null \| 'section' \| 'details' = null;\n\n count: number \| null = null;\n\n open = false;\n\n renderLightDom(): void {\n return;\n }\n\n renderControl(): TemplateResult {\n if (this.layout === 'details') {\n return html`\n <details\n class=\"rounded overflow-hidden\"\n ?open=${this.open}\n @toggle=${(evt: Event) => {\n const details = evt.currentTarget as HTMLDetailsElement;\n this.open = details.open;\n if (!evt.composed && !evt.bubbles) this.dispatchEvent(new CustomEvent('toggle'));\n }}\n >\n <summary class=\"select-none cursor-pointer focus-outline-none group\">\n <div\n class=\"leading-s bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n ?hidden=${!this.label && !this.helperText}\n >\n <p\n class=\"font-medium uppercase text-s tracking-wider flex items-center justify-between gap-s\"\n ?hidden=${!this.label}\n >\n <span>\n ${this.label}${typeof this.count === 'number' ? ` (${this.count})` : ''}\n </span>\n <span\n class=\"flex items-center justify-center transition-colors text-tertiary group-hover-text-body\"\n style=\"transform: scale(1.35)\"\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.2em; height: 1.2em\"><path fill-rule=\"evenodd\" d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n </span>\n </p>\n <p class=\"text-s text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n </div>\n </summary>\n <div class=\"overflow-hidden grid\" style=\"gap: 1px\">\n <slot></slot>\n </div>\n </details>\n `;\n }\n\n return html`\n <div class=\"leading-s mb-s\" ?hidden=${!this.label && !this.helperText}>\n <p class=\"font-medium text-body text-l\" ?hidden=${!this.label}>${this.label}</p>\n <p class=\"text-s text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n </div>\n <div class=\"rounded overflow-hidden grid\" style=\"gap: 1px\">\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAkB,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IAAnE;;QAkDE,qBAAgB,GAAG,KAAK,CAAC;QAEzB,WAAM,GAAiC,IAAI,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAE5B,SAAI,GAAG,KAAK,CAAC;IA8Df,CAAC;IArHC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE;YACpE,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SACxB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCF;SACF,CAAC;IACJ,CAAC;IAUD,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;YAC7B,OAAO,IAAI,CAAA;;;kBAGC,IAAI,CAAC,IAAI;oBACP,CAAC,GAAU,EAAE,EAAE;gBACvB,MAAM,OAAO,GAAG,GAAG,CAAC,aAAmC,CAAC;gBACxD,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;gBACzB,IAAI,CAAC,GAAG,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,OAAO;oBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;YACnF,CAAC;;;;;;wBAMa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;;;;0BAI7B,CAAC,IAAI,CAAC,KAAK;;;oBAGjB,IAAI,CAAC,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;oBAMrE,GAAG,CAAA,uTAAuT;;;qEAGzQ,CAAC,IAAI,CAAC,UAAU;kBACnE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;;;;;;;;OAQhF,CAAC;SACH;QAED,OAAO,IAAI,CAAA;4CAC6B,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,UAAU;0DACjB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;+DACpB,CAAC,IAAI,CAAC,UAAU;YACnE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;;;;;;KAM5E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport { svg, TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n unsafeHelperText: { type: Boolean, attribute: 'unsafe-helper-text' },\n layout: {},\n count: { type: Number },\n open: { type: Boolean },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n ::slotted() {\n min-width: 100%;\n }\n\n :host(:not([layout='section'])) slot::slotted() {\n background-color: var(--lumo-contrast-5pct);\n padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n }\n\n details summary > div {\n border-radius: var(--lumo-border-radius);\n }\n\n details[open] summary > div {\n border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0;\n }\n\n .with-unsafe a {\n text-decoration: underline;\n transition: color 0.1s ease-in-out;\n }\n\n .with-unsafe a:hover {\n color: var(--lumo-primary-text-color);\n }\n\n .with-unsafe a:focus {\n outline: none;\n box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);\n border-radius: var(--lumo-border-radius-s);\n }\n `,\n ];\n }\n\n unsafeHelperText = false;\n\n layout: null \| 'section' \| 'details' = null;\n\n count: number \| null = null;\n\n open = false;\n\n renderLightDom(): void {\n return;\n }\n\n renderControl(): TemplateResult {\n if (this.layout === 'details') {\n return html`\n <details\n class=\"rounded overflow-hidden\"\n ?open=${this.open}\n @toggle=${(evt: Event) => {\n const details = evt.currentTarget as HTMLDetailsElement;\n this.open = details.open;\n if (!evt.composed && !evt.bubbles) this.dispatchEvent(new CustomEvent('toggle'));\n }}\n >\n <summary class=\"select-none cursor-pointer focus-outline-none group\">\n <div\n class=\"leading-s bg-contrast-5 group-focus-ring-2 group-focus-ring-inset group-focus-ring-primary-50\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n ?hidden=${!this.label && !this.helperText}\n >\n <p\n class=\"font-medium uppercase text-s tracking-wider flex items-center justify-between gap-s\"\n ?hidden=${!this.label}\n >\n <span>\n ${this.label}${typeof this.count === 'number' ? ` (${this.count})` : ''}\n </span>\n <span\n class=\"flex items-center justify-center transition-colors text-tertiary group-hover-text-body\"\n style=\"transform: scale(1.35)\"\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.2em; height: 1.2em\"><path fill-rule=\"evenodd\" d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" /></svg>`}\n </span>\n </p>\n <p class=\"text-s text-secondary with-unsafe\" ?hidden=${!this.helperText}>\n ${this.unsafeHelperText ? unsafeHTML(this.helperText) : this.helperText}\n </p>\n </div>\n </summary>\n <div class=\"overflow-hidden grid\" style=\"gap: 1px\">\n <slot></slot>\n </div>\n </details>\n `;\n }\n\n return html`\n <div class=\"leading-s mb-s\" ?hidden=${!this.label && !this.helperText}>\n <p class=\"font-medium text-body text-l\" ?hidden=${!this.label}>${this.label}</p>\n <p class=\"text-s text-secondary with-unsafe\" ?hidden=${!this.helperText}>\n ${this.unsafeHelperText ? unsafeHTML(this.helperText) : this.helperText}\n </p>\n </div>\n <div class=\"rounded overflow-hidden grid\" style=\"gap: 1px\">\n <slot></slot>\n </div>\n `;\n }\n}\n"]}

package/dist/elements/internal/InternalSwitchControl/InternalSwitchControl.js CHANGED Viewed

@@ -26,8 +26,14 @@ export class InternalSwitchControl extends InternalEditableControl {
           <label class="text-m text-body" for="input">${this.label}</label>
           ${this.helperTextAsToolip
             ? ''
-            : html `<p class="text-xs text-secondary">${this.helperText}</p>`}
-          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
+            : html `<p class="text-xs text-secondary" style="max-width: 32rem">
+                ${this.helperText}
+              </p>`}
+          <p
+            class="text-xs text-error"
+            style="max-width: 32rem"
+            ?hidden=${this.disabled || this.readonly}
+          >
             ${this._errorMessage}
           </p>
         </div>

package/dist/elements/internal/InternalSwitchControl/InternalSwitchControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalSwitchControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSwitchControl/InternalSwitchControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAwB,GAAG,EAAkB,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QAWE,uBAAkB,GAAG,KAAK,CAAC;QAE3B,eAAU,GAAkB,IAAI,CAAC;QAEjC,cAAS,GAAkB,IAAI,CAAC;QAEhC,WAAM,GAAG,KAAK,CAAC;~~IA8FjB~~,CAAC;~~IA9GC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,kBAAkB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE;YAC1E,UAAU,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;YACxC,SAAS,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE;YACtC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC1B,CAAC;IACJ,CAAC;IAUD,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3D,OAAO,IAAI,CAAA;;;wDAGyC,IAAI,CAAC,KAAK;YACtD,IAAI,CAAC,kBAAkB;YACvB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA,~~qCAAqC,~~IAAI,CAAC,UAAU~~,MAAM~~;~~kDAC1B~~,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ~~;cAClE~~,IAAI,CAAC,aAAa;;;;UAItB,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM;YAC1F,CAAC,CAAC,IAAI,CAAA;;;;0BAIU,QAAQ,CAAC;gBACf,iDAAiD,EAAE,IAAI;gBACvD,iCAAiC,EAAE,IAAI;gBACvC,YAAY,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,OAAO;gBACvC,qCAAqC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO;gBACjE,gBAAgB,EAAE,IAAI,CAAC,QAAQ;gBAC/B,kDAAkD,EAAE,IAAI;aACzD,CAAC;2BACO,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;;;;4BAIjC,QAAQ,CAAC;gBACf,6CAA6C,EAAE,IAAI;gBACnD,eAAe,EAAE,OAAO;gBACxB,eAAe,EAAE,CAAC,OAAO;gBACzB,SAAS,EAAE,IAAI,CAAC,QAAQ;gBACxB,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ;aAC1B,CAAC;;;;;;;;gCAQU,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,QAAQ;+BACd,OAAO;8BACR,CAAC,GAAU,EAAE,EAAE;gBACvB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAiC,CAAC;gBACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;YACnE,CAAC;;;;aAIR;UACH,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,UAAU;YAC1C,CAAC,CAAC,IAAI,CAAA;;;;;kBAKE,GAAG,CAAA,yfAAyf;;;;;;;;;4DASld,IAAI,CAAC,UAAU;;aAE9D;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;QAClB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;QACnC,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,KAAK,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC;QACpE,IAAI,IAAI,CAAC,UAAU,IAAI,aAAa,KAAK,IAAI,CAAC,UAAU;YAAE,OAAO,KAAK,CAAC;QACvE,OAAO,CAAC,CAAC,aAAa,CAAC;IACzB,CAAC;IAED,IAAc,MAAM,CAAC,KAAc;QACjC,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,KAAK,IAAI;YAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;aAC/D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,KAAK,KAAK;YAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;;YACvE,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IAC5B,CAAC;CACF","sourcesContent":["import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, PropertyDeclarations, svg, TemplateResult } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\nexport class InternalSwitchControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n helperTextAsToolip: { type: Boolean, attribute: 'helper-text-as-tooltip' },\n falseAlias: { attribute: 'false-alias' },\n trueAlias: { attribute: 'true-alias' },\n invert: { type: Boolean },\n };\n }\n\n helperTextAsToolip = false;\n\n falseAlias: string \| null = null;\n\n trueAlias: string \| null = null;\n\n invert = false;\n\n renderControl(): TemplateResult {\n const checked = this.invert ? !this._value : !!this._value;\n return html`\n <div class=\"flex items-start gap-s leading-xs text-m\">\n <div class=\"flex-1\">\n <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n ${this.helperTextAsToolip\n ? ''\n : html`<p class=\"text-xs text-secondary\">${this.helperText}</p>`}\n <p class=\"text-xs text-error\" ?hidden=${this.disabled \|\| this.readonly}>\n ${this._errorMessage}\n </p>\n </div>\n\n ${this.readonly\n ? html`<p class=\"text-secondary\">${checked ? this.t('checked') : this.t('unchecked')}</p>`\n : html`\n <div style=\"height: calc(1em * var(--lumo-line-height-xs))\" class=\"flex items-center\">\n <div\n style=\"border-radius: var(--lumo-size-xl); width: calc((1em * var(--lumo-line-height-xs)) - 3px + var(--lumo-space-m))\"\n class=${classMap({\n 'cursor-pointer group transition-colors relative': true,\n 'flex flex-shrink-0 items-center': true,\n 'bg-success': !this.disabled && checked,\n 'bg-contrast-20 hover-bg-contrast-30': !this.disabled && !checked,\n 'bg-contrast-10': this.disabled,\n 'focus-within-ring-2 focus-within-ring-primary-50': true,\n })}\n @click=${() => (this._value = !this._value)}\n >\n <div\n style=\"margin: 1.5px; width: calc((1em * var(--lumo-line-height-xs)) - 6px); height: calc((1em * var(--lumo-line-height-xs)) - 6px)\"\n class=${classMap({\n 'transition-all transform block rounded-full': true,\n 'translate-x-m': checked,\n 'translate-x-0': !checked,\n 'bg-base': this.disabled,\n 'bg-tint': !this.disabled,\n })}\n ></div>\n\n <input\n class=\"opacity-0 absolute inset-0 focus-outline-none\"\n type=\"checkbox\"\n id=\"input\"\n switch\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?checked=${checked}\n @change=${(evt: Event) => {\n const checkbox = evt.currentTarget as HTMLInputElement;\n this._value = this.invert ? !checkbox.checked : checkbox.checked;\n }}\n />\n </div>\n </div>\n `}\n ${this.helperTextAsToolip && this.helperText\n ? html`\n <div\n class=\"transition-colors text-tertiary flex-shrink-0 cursor-pointer hover-text-body\"\n id=\"trigger\"\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: calc(1em * var(--lumo-line-height-xs)); height: calc(1em * var(--lumo-line-height-xs)); margin-right: -0.12em\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z\" /></svg>`}\n </div>\n <vcf-tooltip\n for=\"trigger\"\n style=\"--lumo-base-color: black; max-width: 30rem\"\n class=\"mt-s\"\n theme=\"light\"\n position=\"bottom\"\n >\n <span class=\"text-s\" style=\"color: white\">${this.helperText}</span>\n </vcf-tooltip>\n `\n : ''}\n </div>\n `;\n }\n\n protected get _value(): boolean {\n const originalValue = super._value;\n if (this.trueAlias && originalValue === this.trueAlias) return true;\n if (this.falseAlias && originalValue === this.falseAlias) return false;\n return !!originalValue;\n }\n\n protected set _value(value: boolean) {\n if (this.trueAlias && value === true) super._value = this.trueAlias;\n else if (this.falseAlias && value === false) super._value = this.falseAlias;\n else super._value = value;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalSwitchControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSwitchControl/InternalSwitchControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAwB,GAAG,EAAkB,MAAM,aAAa,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QAWE,uBAAkB,GAAG,KAAK,CAAC;QAE3B,eAAU,GAAkB,IAAI,CAAC;QAEjC,cAAS,GAAkB,IAAI,CAAC;QAEhC,WAAM,GAAG,KAAK,CAAC;IAoGjB,CAAC;IApHC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,kBAAkB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE;YAC1E,UAAU,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;YACxC,SAAS,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE;YACtC,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC1B,CAAC;IACJ,CAAC;IAUD,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3D,OAAO,IAAI,CAAA;;;wDAGyC,IAAI,CAAC,KAAK;YACtD,IAAI,CAAC,kBAAkB;YACvB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,UAAU;mBACd;;;;sBAIG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;;cAEtC,IAAI,CAAC,aAAa;;;;UAItB,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM;YAC1F,CAAC,CAAC,IAAI,CAAA;;;;0BAIU,QAAQ,CAAC;gBACf,iDAAiD,EAAE,IAAI;gBACvD,iCAAiC,EAAE,IAAI;gBACvC,YAAY,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,OAAO;gBACvC,qCAAqC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO;gBACjE,gBAAgB,EAAE,IAAI,CAAC,QAAQ;gBAC/B,kDAAkD,EAAE,IAAI;aACzD,CAAC;2BACO,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;;;;4BAIjC,QAAQ,CAAC;gBACf,6CAA6C,EAAE,IAAI;gBACnD,eAAe,EAAE,OAAO;gBACxB,eAAe,EAAE,CAAC,OAAO;gBACzB,SAAS,EAAE,IAAI,CAAC,QAAQ;gBACxB,SAAS,EAAE,CAAC,IAAI,CAAC,QAAQ;aAC1B,CAAC;;;;;;;;gCAQU,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,QAAQ;+BACd,OAAO;8BACR,CAAC,GAAU,EAAE,EAAE;gBACvB,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAiC,CAAC;gBACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;YACnE,CAAC;;;;aAIR;UACH,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,UAAU;YAC1C,CAAC,CAAC,IAAI,CAAA;;;;;kBAKE,GAAG,CAAA,yfAAyf;;;;;;;;;4DASld,IAAI,CAAC,UAAU;;aAE9D;YACH,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;QAClB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;QACnC,IAAI,IAAI,CAAC,SAAS,IAAI,aAAa,KAAK,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAC;QACpE,IAAI,IAAI,CAAC,UAAU,IAAI,aAAa,KAAK,IAAI,CAAC,UAAU;YAAE,OAAO,KAAK,CAAC;QACvE,OAAO,CAAC,CAAC,aAAa,CAAC;IACzB,CAAC;IAED,IAAc,MAAM,CAAC,KAAc;QACjC,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,KAAK,IAAI;YAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC;aAC/D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,KAAK,KAAK;YAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;;YACvE,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;IAC5B,CAAC;CACF","sourcesContent":["import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, PropertyDeclarations, svg, TemplateResult } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\nexport class InternalSwitchControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n helperTextAsToolip: { type: Boolean, attribute: 'helper-text-as-tooltip' },\n falseAlias: { attribute: 'false-alias' },\n trueAlias: { attribute: 'true-alias' },\n invert: { type: Boolean },\n };\n }\n\n helperTextAsToolip = false;\n\n falseAlias: string \| null = null;\n\n trueAlias: string \| null = null;\n\n invert = false;\n\n renderControl(): TemplateResult {\n const checked = this.invert ? !this._value : !!this._value;\n return html`\n <div class=\"flex items-start gap-s leading-xs text-m\">\n <div class=\"flex-1\">\n <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n ${this.helperTextAsToolip\n ? ''\n : html`<p class=\"text-xs text-secondary\" style=\"max-width: 32rem\">\n ${this.helperText}\n </p>`}\n <p\n class=\"text-xs text-error\"\n style=\"max-width: 32rem\"\n ?hidden=${this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </p>\n </div>\n\n ${this.readonly\n ? html`<p class=\"text-secondary\">${checked ? this.t('checked') : this.t('unchecked')}</p>`\n : html`\n <div style=\"height: calc(1em * var(--lumo-line-height-xs))\" class=\"flex items-center\">\n <div\n style=\"border-radius: var(--lumo-size-xl); width: calc((1em * var(--lumo-line-height-xs)) - 3px + var(--lumo-space-m))\"\n class=${classMap({\n 'cursor-pointer group transition-colors relative': true,\n 'flex flex-shrink-0 items-center': true,\n 'bg-success': !this.disabled && checked,\n 'bg-contrast-20 hover-bg-contrast-30': !this.disabled && !checked,\n 'bg-contrast-10': this.disabled,\n 'focus-within-ring-2 focus-within-ring-primary-50': true,\n })}\n @click=${() => (this._value = !this._value)}\n >\n <div\n style=\"margin: 1.5px; width: calc((1em * var(--lumo-line-height-xs)) - 6px); height: calc((1em * var(--lumo-line-height-xs)) - 6px)\"\n class=${classMap({\n 'transition-all transform block rounded-full': true,\n 'translate-x-m': checked,\n 'translate-x-0': !checked,\n 'bg-base': this.disabled,\n 'bg-tint': !this.disabled,\n })}\n ></div>\n\n <input\n class=\"opacity-0 absolute inset-0 focus-outline-none\"\n type=\"checkbox\"\n id=\"input\"\n switch\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?checked=${checked}\n @change=${(evt: Event) => {\n const checkbox = evt.currentTarget as HTMLInputElement;\n this._value = this.invert ? !checkbox.checked : checkbox.checked;\n }}\n />\n </div>\n </div>\n `}\n ${this.helperTextAsToolip && this.helperText\n ? html`\n <div\n class=\"transition-colors text-tertiary flex-shrink-0 cursor-pointer hover-text-body\"\n id=\"trigger\"\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" style=\"width: calc(1em * var(--lumo-line-height-xs)); height: calc(1em * var(--lumo-line-height-xs)); margin-right: -0.12em\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z\" /></svg>`}\n </div>\n <vcf-tooltip\n for=\"trigger\"\n style=\"--lumo-base-color: black; max-width: 30rem\"\n class=\"mt-s\"\n theme=\"light\"\n position=\"bottom\"\n >\n <span class=\"text-s\" style=\"color: white\">${this.helperText}</span>\n </vcf-tooltip>\n `\n : ''}\n </div>\n `;\n }\n\n protected get _value(): boolean {\n const originalValue = super._value;\n if (this.trueAlias && originalValue === this.trueAlias) return true;\n if (this.falseAlias && originalValue === this.falseAlias) return false;\n return !!originalValue;\n }\n\n protected set _value(value: boolean) {\n if (this.trueAlias && value === true) super._value = this.trueAlias;\n else if (this.falseAlias && value === false) super._value = this.falseAlias;\n else super._value = value;\n }\n}\n"]}

package/dist/elements/internal/InternalTextControl/InternalTextControl.js CHANGED Viewed

@@ -78,19 +78,10 @@ export class InternalTextControl extends InternalEditableControl {
     }
     __renderSummaryItemLayout() {
         return html `
-      <div class="flex items-start gap-m leading-xs">
-        <div>
-          <label class="text-m text-body" for="input">${this.label}</label>
-          <p class="text-xs text-secondary">${this.helperText}</p>
-          <p
-            class="text-xs text-error"
-            ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
-          >
-            ${this._errorMessage}
-          </p>
-        </div>
+      <div class="leading-xs">
+        <div class="flex items-center gap-xs">
+          <label class="text-m text-body flex-1 whitespace-nowrap" for="input">${this.label}</label>
-        <div class="flex-1 flex items-center gap-xs" style="min-width: 30%">
           ${this.prefix ? html `<div>${this.prefix}</div>` : ''}
           <input
@@ -120,7 +111,7 @@ export class InternalTextControl extends InternalEditableControl {
           <button
             aria-label=${this.t('clear')}
             class=${classMap({
-            'rounded-full transition-colors': true,
+            'flex-shrink-0 rounded-full transition-colors': true,
             'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
             'cursor-pointer text-tertiary hover-text-body': !this.disabled,
             'cursor-default text-disabled': this.disabled,
@@ -136,6 +127,16 @@ export class InternalTextControl extends InternalEditableControl {
             ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
           </button>
         </div>
+        <div style="max-width: 32rem">
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p
+            class="text-xs text-error"
+            ?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
+          >
+            ${this._errorMessage}
+          </p>
+        </div>
       </div>
     `;
     }

package/dist/elements/internal/InternalTextControl/InternalTextControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalTextControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalTextControl/InternalTextControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,OAAO,mBAAoB,SAAQ,uBAAuB;IAAhE;;QA0BE,WAAM,GAAyC,IAAI,CAAC;QAEpD,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAErB,qBAAgB,GAAG,KAAK,CAAC;~~IAyGnC~~,CAAC;~~IAxIC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,gBAAgB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SACvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;OAQF;SACF,CAAC;IACJ,CAAC;IAUD,cAAc;QACZ,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;gCAEM,CAAC,IAAI,CAAC,MAAM;oBACxB,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;mBACT,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;iBACvE,CAAC,GAAgB,EAAE,EAAE;YAC5B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAiC,CAAC;YACpD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;QAC5B,CAAC;;UAEC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;UAChE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;KAE9F,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,aAAQ,KAAK,CAAC,MAA6B,mCAAI,EAAE,CAAC;IACpD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;IAEO,yBAAyB;QAC/B,OAAO,IAAI,CAAA;;;~~wDAGyC~~,IAAI,CAAC,KAAK~~;8CACpB,IAAI,CAAC,UAAU;;;sBAGvC,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ~~;;~~cAEhE~~,IAAI,CAAC,~~aAAa;;;;;YAKpB,IAAI,CAAC,~~MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,QAAQ,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;;0BAGpC,IAAI,CAAC,WAAW;oBACtB,QAAQ,CAAC;YACf,oEAAoE,EAAE,IAAI;YAC1E,qCAAqC,EAAE,IAAI;YAC3C,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;;;qBAGO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;wBACd,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;uBACd,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;oBACxE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;qBACnC,CAAC,GAAU,EAAE,EAAE;YACtB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;QACvD,CAAC;;;YAGD,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;;yBAGxE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;oBACpB,QAAQ,CAAC;YACf,~~gCAAgC~~,EAAE,IAAI;~~YACtC~~,uDAAuD,EAAE,IAAI;YAC7D,8CAA8C,EAAE,CAAC,IAAI,CAAC,QAAQ;YAC9D,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAC9C,CAAC;;wBAEU,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;qBAC9B,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/C,CAAC;;cAEC,GAAG,CAAA,sWAAsW;;;;~~KAIlX~~,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { TextFieldElement } from '@vaadin/vaadin-text-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { live } from 'lit-html/directives/live';\n\n/*\n Internal control displaying a basic text box.\n \n @since 1.17.0\n * @element foxy-internal-text-control\n */\nexport class InternalTextControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n __isErrorVisible: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n super.styles,\n css`\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n display: none !important;\n pointer-events: none;\n position: absolute;\n right: 0;\n }\n `,\n ];\n }\n\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n prefix: string \| null = null;\n\n suffix: string \| null = null;\n\n private __isErrorVisible = false;\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-text-field\n error-message=${ifDefined(this._errorMessage)}\n helper-text=${this.helperText}\n placeholder=${this.placeholder}\n label=${this.label}\n class=\"w-full\"\n ?clear-button-visible=${!this.suffix}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @input=${(evt: CustomEvent) => {\n const field = evt.currentTarget as TextFieldElement;\n this._value = field.value;\n }}\n >\n ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n </vaadin-text-field>\n `;\n }\n\n protected get _value(): string {\n return (super._value as string \| undefined) ?? '';\n }\n\n protected set _value(newValue: string) {\n super._value = newValue as unknown \| undefined;\n }\n\n private __renderSummaryItemLayout() {\n return html`\n <div class=\"~~flex items-start gap-m~~ leading-xs\">\n <div~~>\n <label~~ class=\"~~text~~-m ~~text~~-~~body~~\" ~~for=\"input\">${this.label}</label~~>\n <p class=\"text-xs text-~~secondary\">${this.helperText}</p>\n <p\n class=\"text~~-xs ~~text~~-~~error~~\"~~\n ?hidden=${!this.__isErrorVisible~~ ~~\|\| this.disabled \|\| this.readonly}~~\~~n >\n $~~{this.~~_errorMessage~~}\n </p>\n ~~</div>\n~~\n ~~<div class=\"flex-1 flex items-center gap-xs\" style=\"min-width: 30%\">\n~~ ${this.prefix ? html`<div>${this.prefix}</div>` : ''}\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'w-full appearance-none text-right bg-transparent transition-colors': true,\n 'text-m rounded-s focus-outline-none': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n type=\"text\"\n id=\"input\"\n .value=${live(this._value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @blur=${() => (this.__isErrorVisible = true)}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLInputElement).value;\n }}\n />\n\n ${this.suffix ? html`<div class=\"font-medium text-secondary\">${this.suffix}</div>` : ''}\n\n <button\n aria-label=${this.t('clear')}\n class=${classMap({\n 'rounded-full transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n })}\n style=\"width: 1em; height: 1em;\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly \|\| !this._value}\n @click=${() => {\n this._value = '';\n this.dispatchEvent(new CustomEvent('clear'));\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n </button>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalTextControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalTextControl/InternalTextControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { TextFieldElement } from '@vaadin/vaadin-text-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { live } from 'lit-html/directives/live';\n\n/*\n Internal control displaying a basic text box.\n \n @since 1.17.0\n * @element foxy-internal-text-control\n */\nexport class InternalTextControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n __isErrorVisible: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n super.styles,\n css`\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n display: none !important;\n pointer-events: none;\n position: absolute;\n right: 0;\n }\n `,\n ];\n }\n\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n prefix: string \| null = null;\n\n suffix: string \| null = null;\n\n private __isErrorVisible = false;\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-text-field\n error-message=${ifDefined(this._errorMessage)}\n helper-text=${this.helperText}\n placeholder=${this.placeholder}\n label=${this.label}\n class=\"w-full\"\n ?clear-button-visible=${!this.suffix}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @input=${(evt: CustomEvent) => {\n const field = evt.currentTarget as TextFieldElement;\n this._value = field.value;\n }}\n >\n ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n </vaadin-text-field>\n `;\n }\n\n protected get _value(): string {\n return (super._value as string \| undefined) ?? '';\n }\n\n protected set _value(newValue: string) {\n super._value = newValue as unknown \| undefined;\n }\n\n private __renderSummaryItemLayout() {\n return html`\n <div class=\"leading-xs\">\n <div class=\"flex items-center gap-xs\">\n <label class=\"text-m text-body flex-1 whitespace-nowrap\" for=\"input\">${this.label}</label>\n\n ${this.prefix ? html`<div>${this.prefix}</div>` : ''}\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'w-full appearance-none text-right bg-transparent transition-colors': true,\n 'text-m rounded-s focus-outline-none': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n type=\"text\"\n id=\"input\"\n .value=${live(this._value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @blur=${() => (this.__isErrorVisible = true)}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLInputElement).value;\n }}\n />\n\n ${this.suffix ? html`<div class=\"font-medium text-secondary\">${this.suffix}</div>` : ''}\n\n <button\n aria-label=${this.t('clear')}\n class=${classMap({\n 'flex-shrink-0 rounded-full transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n })}\n style=\"width: 1em; height: 1em;\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly \|\| !this._value}\n @click=${() => {\n this._value = '';\n this.dispatchEvent(new CustomEvent('clear'));\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n </button>\n </div>\n\n <div style=\"max-width: 32rem\">\n <p class=\"text-xs text-secondary\">${this.helperText}</p>\n <p\n class=\"text-xs text-error\"\n ?hidden=${!this.__isErrorVisible \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </p>\n </div>\n </div>\n `;\n }\n}\n"]}

package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.d.ts CHANGED Viewed

@@ -15,6 +15,7 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
 export declare class NativeIntegrationForm extends Base<Data> {
     static get properties(): PropertyDeclarations;
     static get v8n(): NucleonV8N<Data>;
+    itemCategoryBase: string | null;
     store: string | null;
     private readonly __createConfigGetterFor;
     private readonly __createConfigSetterFor;
@@ -22,8 +23,6 @@ export declare class NativeIntegrationForm extends Base<Data> {
     private readonly __providerSetValue;
     private readonly __templateProviderOptions;
     private readonly __avalaraAddressValidationCountriesOptions;
-    private readonly __codeMappingsGetValue;
-    private readonly __codeMappingsSetValue;
     private readonly __onesourceCompanyRoleOptions;
     private readonly __onesourceProductOrderPriorityGetValue;
     private readonly __onesourceProductOrderPrioritySetValue;

package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.js CHANGED Viewed

@@ -16,6 +16,7 @@ const Base = TranslatableMixin(InternalForm, NS);
 export class NativeIntegrationForm extends Base {
     constructor() {
         super(...arguments);
+        this.itemCategoryBase = null;
         this.store = null;
         this.__createConfigGetterFor = memoize((key) => {
             return () => { var _a; return (_a = this.__config) === null || _a === void 0 ? void 0 : _a[key]; };
@@ -38,22 +39,6 @@ export class NativeIntegrationForm extends Base {
             { value: 'custom_tax', label: 'option_custom_tax' },
         ];
         this.__avalaraAddressValidationCountriesOptions = [{ value: 'US' }, { value: 'CA' }];
-        this.__codeMappingsGetValue = () => {
-            var _a, _b;
-            const mappings = (_b = (_a = this.__config) === null || _a === void 0 ? void 0 : _a.category_to_product_tax_code_mappings) !== null && _b !== void 0 ? _b : {};
-            return Object.entries(mappings).map(([foxyCategory, vndTaxCode]) => {
-                return { value: `${foxyCategory}:${vndTaxCode}` };
-            });
-        };
-        this.__codeMappingsSetValue = (value) => {
-            const mappings = {};
-            for (const { value: mapping } of value) {
-                const [foxyCategory, vndTaxCode] = mapping.split(':');
-                if (foxyCategory && vndTaxCode)
-                    mappings[foxyCategory] = vndTaxCode;
-            }
-            this.__config = { category_to_product_tax_code_mappings: mappings };
-        };
         this.__onesourceCompanyRoleOptions = [
             { value: 'B', label: 'option_buyer' },
             { value: 'M', label: 'option_middleman' },
@@ -84,6 +69,7 @@ export class NativeIntegrationForm extends Base {
     static get properties() {
         return {
             ...super.properties,
+            itemCategoryBase: { attribute: 'item-category-base' },
             store: {},
         };
     }
@@ -112,13 +98,6 @@ export class NativeIntegrationForm extends Base {
             ({ provider: p = 'avalara', config: c = '{}' }) => {
                 return p !== 'avalara' || !!parse(c).company_code || 'avalara-company-code:v8n_required';
             },
-            ({ provider: p = 'avalara', config: c = '{}' }) => {
-                if (p !== 'avalara')
-                    return true;
-                const mappings = parse(c).category_to_product_tax_code_mappings;
-                const err = 'avalara-category-to-product-tax-code-mappings:v8n_required';
-                return (mappings && Object.entries(mappings).length > 0) || err;
-            },
             ({ provider: p = 'avalara', config: c = '{}' }) => {
                 return p !== 'taxjar' || !!parse(c).api_token || 'taxjar-api-token:v8n_required';
             },
@@ -256,7 +235,7 @@ export class NativeIntegrationForm extends Base {
         infer=""
         href=${ifDefined((_b = this.store) !== null && _b !== void 0 ? _b : void 0)}
         id="storeLoader"
-        @fetch=${() => this.requestUpdate()}
+        @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
     `;
@@ -315,8 +294,9 @@ export class NativeIntegrationForm extends Base {
         this.edit({ provider, config: newConfig });
     }
     __renderAvalaraConfig() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         const isActive = (_b = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.is_active;
+        const itemCategories = (_d = (_c = this.__storeLoader) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d._links['fx:item_categories'].href;
         const serviceUrlPlaceholder = typeof isActive === 'boolean'
             ? this.t(`avalara-group-one.avalara-service-url.placeholder_${isActive ? 'active' : 'inactive'}`)
             : void 0;
@@ -361,16 +341,6 @@ export class NativeIntegrationForm extends Base {
       </foxy-internal-summary-control>
       <foxy-internal-summary-control infer="avalara-group-two">
-        <foxy-internal-editable-list-control
-          layout="summary-item"
-          infer="avalara-category-to-product-tax-code-mappings"
-          .getValue=${this.__codeMappingsGetValue}
-          .setValue=${this.__codeMappingsSetValue}
-        >
-        </foxy-internal-editable-list-control>
-      </foxy-internal-summary-control>
-      <foxy-internal-summary-control infer="avalara-group-three">
         <foxy-internal-switch-control
           json-template=${defaults.avalara}
           json-path="use_ava_tax"
@@ -387,7 +357,7 @@ export class NativeIntegrationForm extends Base {
         >
         </foxy-internal-switch-control>
-        ${((_c = this.__config) === null || _c === void 0 ? void 0 : _c.use_address_validation) ? html `
+        ${((_e = this.__config) === null || _e === void 0 ? void 0 : _e.use_address_validation) ? html `
               <foxy-internal-editable-list-control
                 json-template=${defaults.avalara}
                 json-path="address_validation_countries"
@@ -416,9 +386,22 @@ export class NativeIntegrationForm extends Base {
         >
         </foxy-internal-switch-control>
       </foxy-internal-summary-control>
+      <foxy-internal-native-integration-form-code-map-control
+        item-category-base=${ifDefined((_f = this.itemCategoryBase) !== null && _f !== void 0 ? _f : void 0)}
+        item-categories=${ifDefined(itemCategories)}
+        json-template=${defaults.avalara}
+        json-path="category_to_product_tax_code_mappings"
+        property="config"
+        layout="summary-item"
+        infer="avalara-category-to-product-tax-code-mappings"
+      >
+      </foxy-internal-native-integration-form-code-map-control>
     `;
     }
     __renderTaxJarConfig() {
+        var _a, _b, _c;
+        const itemCategories = (_b = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._links['fx:item_categories'].href;
         return html `
       <foxy-internal-summary-control infer="taxjar-group-one">
         <foxy-internal-password-control
@@ -439,15 +422,15 @@ export class NativeIntegrationForm extends Base {
         </foxy-internal-switch-control>
       </foxy-internal-summary-control>
-      <foxy-internal-summary-control infer="taxjar-group-two">
-        <foxy-internal-editable-list-control
-          layout="summary-item"
-          infer="taxjar-category-to-product-tax-code-mappings"
-          .getValue=${this.__codeMappingsGetValue}
-          .setValue=${this.__codeMappingsSetValue}
-        >
-        </foxy-internal-editable-list-control>
-      </foxy-internal-summary-control>
+      <foxy-internal-native-integration-form-code-map-control
+        item-category-base=${ifDefined((_c = this.itemCategoryBase) !== null && _c !== void 0 ? _c : void 0)}
+        item-categories=${ifDefined(itemCategories)}
+        json-template=${defaults.taxjar}
+        json-path="category_to_product_tax_code_mappings"
+        property="config"
+        infer="taxjar-category-to-product-tax-code-mappings"
+      >
+      </foxy-internal-native-integration-form-code-map-control>
     `;
     }
     __renderOneSourceConfig() {