npm - @foxy.io/elements - Versions diffs - 1.39.0 → 1.40.0-beta.2 - Mend

@foxy.io/elements 1.39.0 → 1.40.0-beta.2

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 (96) hide show

package/dist/cdn/translations/customer-portal/zh-hk.json CHANGED Viewed

@@ -3,6 +3,7 @@
     "title": "重置密码",
     "subtitle": "请立即更新您的密码以确保帐户安全。",
     "submit": "继续",
+    "skip": "暂时不",
     "password": {
       "label": "新密码",
       "placeholder": "必需的",

package/dist/cdn/translations/tax-form/en.json CHANGED Viewed

@@ -37,16 +37,21 @@
       "option_local": "Local",
       "option_custom_tax_endpoint": "Custom tax endpoint"
     },
+    "is-live": {
+      "label": "Calculate tax automatically",
+      "helper_text": "",
+      "checked": "Yes",
+      "unchecked": "No"
+    },
     "service-provider": {
-      "label": "Live rate provider",
+      "label": "Service provider",
       "helper_text": "",
       "placeholder": "Select",
       "option_avalara": "Avalara AvaTax 15",
       "option_custom_tax": "Custom Tax Endpoint",
       "option_taxjar": "TaxJar",
       "option_onesource": "Thomson Reuters ONESOURCE",
-      "option_none": "None",
-      "option_default": "Default"
+      "option_default": "Foxy Default (Thomson Reuters; others)"
     },
     "rate": {
       "label": "Fixed rate",

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

@@ -154,16 +154,10 @@ input{
             ? undefined
             : this.options.find(v => v.value === units);
         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.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">
           <input
             placeholder=${this.placeholder}
             inputmode="numeric"
@@ -252,6 +246,13 @@ input{
             </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.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
       </div>
     `;
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalFrequencyControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { css, html, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/*\n Internal control displaying a custom field for frequency input.\n \n @since 1.17.0\n * @element foxy-internal-frequency-control\n */\nexport class InternalFrequencyControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n allowTwiceAMonth: { type: Boolean, attribute: 'allow-twice-a-month' },\n options: { attribute: false },\n layout: {},\n max: { type: Number },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n super.styles,\n css`\n :host {\n display: block;\n }\n\n vaadin-custom-field {\n width: 100%;\n font-size: 0;\n line-height: 0;\n padding-top: 0 !important;\n }\n\n vaadin-custom-field::part(label) {\n padding-bottom: var(--lumo-space-s);\n }\n\n vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n padding-top: var(--lumo-space-xs);\n }\n\n vaadin-integer-field,\n vaadin-combo-box {\n width: calc(50% - (var(--lumo-space-s) / 2));\n }\n\n vaadin-integer-field {\n margin-right: var(--lumo-space-s);\n padding: 0;\n }\n\n vaadin-combo-box::part(text-field) {\n padding: 0;\n }\n\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input {\n -moz-appearance: textfield;\n }\n `,\n ];\n }\n\n allowTwiceAMonth = false;\n\n options = [\n { value: 'd', label: 'day' },\n { value: 'w', label: 'week' },\n { value: 'm', label: 'month' },\n { value: 'y', label: 'year' },\n ];\n\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n max: number \| null = 999;\n\n private __i18n: CustomFieldI18n = {\n formatValue: inputValues => inputValues.join(''),\n parseValue: value => {\n const normalizedValue = value.startsWith('.') ? `0${value}` : value;\n const count = parseFloat(value.substring(0, Math.max(normalizedValue.length - 1, 0)));\n const units = normalizedValue[normalizedValue.length - 1] ?? '';\n\n return isNaN(count) ? ['0', ''] : [count.toString(), units];\n },\n };\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n const value = (this._value ?? '') as string;\n const count = parseFloat(this.__i18n.parseValue(value)[0] as string);\n const items = this.options.map(({ value, label }) => ({\n label: this.t(label, { count }),\n value,\n }));\n\n return html`\n <vaadin-custom-field\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .errorMessage=${this._errorMessage ?? ''}\n .helperText=${this.helperText}\n .label=${this.label}\n .value=${value}\n .i18n=${this.__i18n}\n @change=${(evt: CustomEvent) => {\n const field = evt.currentTarget as CustomFieldElement;\n this._value = field.value as string;\n }}\n >\n <vaadin-integer-field\n max=${ifDefined(this.max \|\| undefined)}\n min=\"1\"\n prevent-invalid-input\n has-controls\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?invalid=${!this._checkValidity()}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n >\n </vaadin-integer-field>\n\n <vaadin-combo-box\n item-value-path=\"value\"\n item-label-path=\"label\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?invalid=${!this._checkValidity()}\n .items=${items}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n >\n </vaadin-combo-box>\n </vaadin-custom-field>\n `;\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n const field = this.renderRoot.querySelector('vaadin-custom-field');\n if (field && field.value !== this._value) field.value = (this._value ?? '') as string;\n }\n\n private __renderSummaryItemLayout() {\n const value = (this._value ?? '') as string;\n const [strCount, units] = this.__i18n.parseValue(value);\n const count = parseFloat(strCount as string);\n const selection =\n this._value === '.5m' && !this.allowTwiceAMonth\n ? undefined\n : this.options.find(v => v.value === units);\n\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 class=\"text-xs text-error\" ?hidden=${this.disabled \|\| this.readonly}>\n ${this._errorMessage}\n </p>\n </div>\n\n <div class=\"flex-1 flex items-center gap-xs\">\n <input\n placeholder=${this.placeholder}\n inputmode=\"numeric\"\n style=\"min-width: 10ch\"\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=\"number\"\n step=\"1\"\n min=\"1\"\n max=${ifDefined(this.max ?? void 0)}\n id=\"input\"\n .value=${value === '.5m' ? (this.allowTwiceAMonth ? 2 : '') : count}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n const input = evt.currentTarget as HTMLInputElement;\n this._value = this.__i18n.formatValue([input.value, units]);\n }}\n />\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 class=\"whitespace-nowrap\">\n ${value === '.5m'\n ? this.t('times_a_month')\n : selection\n ? this.t(selection.label, { count })\n : this.t('select')}\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 @change=${(evt: Event) => {\n evt.stopPropagation();\n const value = (evt.currentTarget as HTMLSelectElement).value;\n if (value === 'times_a_month') {\n this._value = '.5m';\n } else {\n this._value = this.__i18n.formatValue([count, value]);\n }\n }}\n >\n <option value=\"\" ?selected=${!selection} disabled hidden>${this.t('select')}</option>\n ${this.allowTwiceAMonth && (count === 2 \|\| value === '.5m')\n ? html`\n <option value=\"times_a_month\" ?selected=${value === '.5m'}>\n ${this.t('times_a_month')}\n </option>\n `\n : ''}\n ${this.options.map(\n option =>\n html`\n <option\n value=${option.value}\n ?selected=${value !== '.5m' && option.value === selection?.value}\n >\n ${this.t(option.label, { count })}\n </option>\n `\n )}\n </select>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalFrequencyControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CustomFieldElement, CustomFieldI18n } from '@vaadin/vaadin-custom-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { css, html, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/*\n Internal control displaying a custom field for frequency input.\n \n @since 1.17.0\n * @element foxy-internal-frequency-control\n */\nexport class InternalFrequencyControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n allowTwiceAMonth: { type: Boolean, attribute: 'allow-twice-a-month' },\n options: { attribute: false },\n layout: {},\n max: { type: Number },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n super.styles,\n css`\n :host {\n display: block;\n }\n\n vaadin-custom-field {\n width: 100%;\n font-size: 0;\n line-height: 0;\n padding-top: 0 !important;\n }\n\n vaadin-custom-field::part(label) {\n padding-bottom: var(--lumo-space-s);\n }\n\n vaadin-custom-field::part(error-message)[aria-hidden='false'] {\n padding-top: var(--lumo-space-xs);\n }\n\n vaadin-integer-field,\n vaadin-combo-box {\n width: calc(50% - (var(--lumo-space-s) / 2));\n }\n\n vaadin-integer-field {\n margin-right: var(--lumo-space-s);\n padding: 0;\n }\n\n vaadin-combo-box::part(text-field) {\n padding: 0;\n }\n\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input {\n -moz-appearance: textfield;\n }\n `,\n ];\n }\n\n allowTwiceAMonth = false;\n\n options = [\n { value: 'd', label: 'day' },\n { value: 'w', label: 'week' },\n { value: 'm', label: 'month' },\n { value: 'y', label: 'year' },\n ];\n\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n max: number \| null = 999;\n\n private __i18n: CustomFieldI18n = {\n formatValue: inputValues => inputValues.join(''),\n parseValue: value => {\n const normalizedValue = value.startsWith('.') ? `0${value}` : value;\n const count = parseFloat(value.substring(0, Math.max(normalizedValue.length - 1, 0)));\n const units = normalizedValue[normalizedValue.length - 1] ?? '';\n\n return isNaN(count) ? ['0', ''] : [count.toString(), units];\n },\n };\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n const value = (this._value ?? '') as string;\n const count = parseFloat(this.__i18n.parseValue(value)[0] as string);\n const items = this.options.map(({ value, label }) => ({\n label: this.t(label, { count }),\n value,\n }));\n\n return html`\n <vaadin-custom-field\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .errorMessage=${this._errorMessage ?? ''}\n .helperText=${this.helperText}\n .label=${this.label}\n .value=${value}\n .i18n=${this.__i18n}\n @change=${(evt: CustomEvent) => {\n const field = evt.currentTarget as CustomFieldElement;\n this._value = field.value as string;\n }}\n >\n <vaadin-integer-field\n max=${ifDefined(this.max \|\| undefined)}\n min=\"1\"\n prevent-invalid-input\n has-controls\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?invalid=${!this._checkValidity()}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n >\n </vaadin-integer-field>\n\n <vaadin-combo-box\n item-value-path=\"value\"\n item-label-path=\"label\"\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?invalid=${!this._checkValidity()}\n .items=${items}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n >\n </vaadin-combo-box>\n </vaadin-custom-field>\n `;\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n const field = this.renderRoot.querySelector('vaadin-custom-field');\n if (field && field.value !== this._value) field.value = (this._value ?? '') as string;\n }\n\n private __renderSummaryItemLayout() {\n const value = (this._value ?? '') as string;\n const [strCount, units] = this.__i18n.parseValue(value);\n const count = parseFloat(strCount as string);\n const selection =\n this._value === '.5m' && !this.allowTwiceAMonth\n ? undefined\n : this.options.find(v => v.value === units);\n\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 <input\n placeholder=${this.placeholder}\n inputmode=\"numeric\"\n style=\"min-width: 10ch\"\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=\"number\"\n step=\"1\"\n min=\"1\"\n max=${ifDefined(this.max ?? void 0)}\n id=\"input\"\n .value=${value === '.5m' ? (this.allowTwiceAMonth ? 2 : '') : count}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n const input = evt.currentTarget as HTMLInputElement;\n this._value = this.__i18n.formatValue([input.value, units]);\n }}\n />\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 class=\"whitespace-nowrap\">\n ${value === '.5m'\n ? this.t('times_a_month')\n : selection\n ? this.t(selection.label, { count })\n : this.t('select')}\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 @change=${(evt: Event) => {\n evt.stopPropagation();\n const value = (evt.currentTarget as HTMLSelectElement).value;\n if (value === 'times_a_month') {\n this._value = '.5m';\n } else {\n this._value = this.__i18n.formatValue([count, value]);\n }\n }}\n >\n <option value=\"\" ?selected=${!selection} disabled hidden>${this.t('select')}</option>\n ${this.allowTwiceAMonth && (count === 2 \|\| value === '.5m')\n ? html`\n <option value=\"times_a_month\" ?selected=${value === '.5m'}>\n ${this.t('times_a_month')}\n </option>\n `\n : ''}\n ${this.options.map(\n option =>\n html`\n <option\n value=${option.value}\n ?selected=${value !== '.5m' && option.value === selection?.value}\n >\n ${this.t(option.label, { count })}\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 class=\"text-xs text-error\" ?hidden=${this.disabled \|\| this.readonly}>\n ${this._errorMessage}\n </p>\n </div>\n </div>\n `;\n }\n}\n"]}

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

@@ -90,28 +90,12 @@ input{
     }
     __renderSummaryItemLayout() {
         var _a, _b, _c;
-        const sharedTextStyles = {
-            'text-disabled': this.disabled,
-            'text-tertiary': !this.readonly && !this.disabled,
-            'font-medium': !this.readonly,
-        };
         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">
-          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
-            ${this.prefix}
-          </span>
+          ${this.prefix ? html `<div>${this.prefix}</div>` : ''}
           <input
             placeholder=${this.placeholder}
@@ -140,9 +124,7 @@ input{
         }}
           />
-          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
-            ${this.suffix}
-          </span>
+          ${this.suffix ? html `<div class="font-medium text-secondary">${this.suffix}</div>` : ''}
           <button
             aria-label=${this.t('clear')}
@@ -163,6 +145,16 @@ input{
             ${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/InternalNumberControl/InternalNumberControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-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';\n\n/*\n Internal control displaying a basic number box.\n \n @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n step: { type: Number },\n min: { type: Number },\n max: { type: Number },\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 input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input {\n -moz-appearance: textfield;\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 step: number \| null = null;\n\n min: number \| null = null;\n\n max: number \| 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-number-field\n error-message=${ifDefined(this._errorMessage)}\n placeholder=${this.placeholder}\n helper-text=${this.helperText}\n label=${this.label}\n class=\"w-full\"\n step=${ifDefined(this.step ?? undefined)}\n min=${ifDefined(this.min ?? undefined)}\n max=${ifDefined(this.max ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n clear-button-visible\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @change=${(evt: CustomEvent) => {\n const field = evt.currentTarget as NumberFieldElement;\n this._value = parseFloat(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-number-field>\n `;\n }\n\n private __renderSummaryItemLayout() {\n const sharedTextStyles = {\n 'text-disabled': this.disabled,\n 'text-tertiary': !this.readonly && !this.disabled,\n 'font-medium': !this.readonly,\n };\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\">\n <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n ${this.prefix}\n </span>\n\n <input\n placeholder=${this.placeholder}\n style=\"min-width: 10ch\"\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=\"number\"\n step=${ifDefined(this.step ?? void 0)}\n min=${ifDefined(this.min ?? void 0)}\n max=${ifDefined(this.max ?? void 0)}\n id=\"input\"\n .value=${this._value === 0 ? '' : 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 const newValue = parseFloat((evt.target as HTMLInputElement).value);\n this._value = isNaN(newValue) ? 0 : newValue;\n }}\n />\n\n <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n ${this.suffix}\n </span>\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 = 0;\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":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-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';\n\n/*\n Internal control displaying a basic number box.\n \n @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n step: { type: Number },\n min: { type: Number },\n max: { type: Number },\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 input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input {\n -moz-appearance: textfield;\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 step: number \| null = null;\n\n min: number \| null = null;\n\n max: number \| 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-number-field\n error-message=${ifDefined(this._errorMessage)}\n placeholder=${this.placeholder}\n helper-text=${this.helperText}\n label=${this.label}\n class=\"w-full\"\n step=${ifDefined(this.step ?? undefined)}\n min=${ifDefined(this.min ?? undefined)}\n max=${ifDefined(this.max ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n clear-button-visible\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @change=${(evt: CustomEvent) => {\n const field = evt.currentTarget as NumberFieldElement;\n this._value = parseFloat(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-number-field>\n `;\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 style=\"min-width: 10ch\"\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=\"number\"\n step=${ifDefined(this.step ?? void 0)}\n min=${ifDefined(this.min ?? void 0)}\n max=${ifDefined(this.max ?? void 0)}\n id=\"input\"\n .value=${this._value === 0 ? '' : 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 const newValue = parseFloat((evt.target as HTMLInputElement).value);\n this._value = isNaN(newValue) ? 0 : newValue;\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 = 0;\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/internal/InternalResourcePickerControl/InternalResourcePickerControl.js CHANGED Viewed

@@ -91,16 +91,10 @@ export class InternalResourcePickerControl extends InternalEditableControl {
             dialog.show(button);
         };
         return html `
-      <div class="flex items-start leading-xs gap-m">
-        <div class="flex-1">
-          <div class="text-m text-body whitespace-nowrap">${this.label}</div>
-          <div class="text-s text-secondary">${this.helperText}</div>
-          <div class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
-            ${this._errorMessage}
-          </div>
-        </div>
+      <div class="leading-xs">
         <div class="flex items-center gap-xs">
+          <div class="text-m text-body whitespace-nowrap flex-1">${this.label}</div>
           <button
             aria-label=${this.t('select')}
             class=${classMap({
@@ -145,6 +139,13 @@ export class InternalResourcePickerControl 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">
+          <div class="text-xs text-secondary">${this.helperText}</div>
+          <div class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
+            ${this._errorMessage}
+          </div>
+        </div>
       </div>
       <foxy-nucleon

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalResourcePickerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport type { FormRenderer } from '../../public/FormDialog/types';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../public/FormDialog/FormDialog';\nimport type { Option } from '../../public/QueryBuilder/types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\nimport { uniqueId } from 'lodash-es';\nimport { spread } from '@open-wc/lit-helpers';\n\nimport memoize from 'lodash-es/memoize';\n\ntype DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;\n\nexport class InternalResourcePickerControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n getDisplayValueOptions: { attribute: false },\n showCopyIdButton: { type: Boolean, attribute: 'show-copy-id-button' },\n virtualHost: {},\n getItemUrl: { attribute: false },\n formProps: { type: Object },\n filters: { type: Array },\n layout: {},\n first: {},\n item: {},\n form: {},\n };\n }\n\n getDisplayValueOptions: DisplayValueOptionsCb = resource => ({ resource });\n\n showCopyIdButton = false;\n\n virtualHost = uniqueId('internal-resource-picker-control-');\n\n getItemUrl: ((href: string, data: unknown \| null) => string) \| null = null;\n\n formProps: Record<string, unknown> = {};\n\n filters: Option[] = [];\n\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n first: string \| null = null;\n\n item: string \| null = null;\n\n form: string \| null \| FormRenderer = null;\n\n private readonly __getItemRenderer = memoize((item: string \| null) => {\n return new Function(\n 'ctx',\n `return ctx.html\\`\n <${item ?? 'foxy-null'}\n related=\\${JSON.stringify(ctx.related)}\n parent=\\${ctx.parent}\n infer=\"card\"\n href=$\\{ctx.href}\n ...=\\${ctx.spread(ctx.props)}\n >\n </${item ?? 'foxy-null'}>\\``\n ) as ItemRenderer;\n });\n\n renderControl(): TemplateResult {\n const dialogProps = {\n ...this.formProps,\n '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },\n };\n\n return html`\n <foxy-form-dialog\n parent=\"foxy://${this.virtualHost}/select\"\n header=\"header\"\n infer=\"dialog\"\n alert\n .props=${dialogProps}\n .form=${this.form ?? 'foxy-internal-resource-picker-control-form'}\n @fetch=${this.__handleFetchEvent}\n >\n </foxy-form-dialog>\n\n ${this.layout === 'summary-item'\n ? this.__renderSummaryItemLayout()\n : this.__renderStandaloneLayout()}\n `;\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n if (changes.has('item')) this.__getItemRenderer.cache.clear?.();\n }\n\n private __clear(): void {\n this._value = '';\n this.dispatchEvent(new CustomEvent('clear'));\n }\n\n private __renderSummaryItemLayout() {\n const resource = this.renderRoot.querySelector<NucleonElement<any>>('#value');\n const onClick = (evt: Event) => {\n if (this.disabled \|\| this.readonly) return;\n const button = evt.currentTarget as HTMLButtonElement;\n const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n dialog.href = '';\n dialog.show(button);\n };\n\n return html`\n <div class=\"flex items-start leading-xs gap-m\">\n <div class=\"flex-1\">\n <div class=\"text-m text-body whitespace-nowrap\">${this.label}</div>\n <div class=\"text-s text-secondary\">${this.helperText}</div>\n <div class=\"text-s text-error\" ?hidden=${this.disabled \|\| this.readonly}>\n ${this._errorMessage}\n </div>\n </div>\n\n <div class=\"flex items-center gap-xs\">\n <button\n aria-label=${this.t('select')}\n class=${classMap({\n 'text-right min-w-0 transition-colors transition-opacity': true,\n 'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,\n 'font-medium': !this.readonly,\n })}\n ?disabled=${this.disabled \|\| this.readonly}\n @click=${onClick}\n >\n <div class=\"truncate min-w-0\">\n ${this._value\n ? html`\n <foxy-i18n\n infer=\"\"\n key=\"value\"\n .options=${resource?.data\n ? this.getDisplayValueOptions(resource.data)\n : { context: resource?.in('fail') ? 'fail' : 'busy' }}\n >\n </foxy-i18n>\n `\n : this.placeholder}\n </div>\n </button>\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=${this.__clear}\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 <foxy-nucleon\n infer=\"\"\n href=${ifDefined(this._value \|\| void 0)}\n id=\"value\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n `;\n }\n\n private __renderStandaloneLayout() {\n const valueLoader = this.__valueLoader;\n const selectionId = typeof this._value === 'string' ? getResourceId(this._value) : void 0;\n const selectionUrl =\n typeof this._value === 'string'\n ? this.getItemUrl?.(this._value, valueLoader?.data ?? null)\n : void 0;\n\n return html`\n <div class=\"block group\">\n <div\n class=${classMap({\n 'flex items-center gap-s transition-colors font-medium': true,\n 'text-disabled': this.disabled,\n })}\n >\n <span class=\"mr-auto text-l\">${this.label}</span>\n ${selectionUrl\n ? html`\n <a\n class=\"text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50\"\n href=${selectionUrl}\n >\n <foxy-i18n infer=\"\" key=\"view\"></foxy-i18n>\n </a>\n `\n : ''}\n ${this.showCopyIdButton && selectionId !== null\n ? html`\n <foxy-copy-to-clipboard\n layout=\"text\"\n theme=\"contrast tertiary-inline\"\n infer=\"copy-id\"\n text=${selectionId}\n >\n </foxy-copy-to-clipboard>\n `\n : ''}\n ${this.readonly \|\| !this._value\n ? ''\n : html`\n <vaadin-button\n theme=\"error tertiary-inline\"\n ?disabled=${this.disabled}\n @click=${this.__clear}\n >\n <foxy-i18n infer=\"\" key=\"clear\"></foxy-i18n>\n </vaadin-button>\n `}\n </div>\n\n <div class=\"text-secondary text-s\" ?hidden=${!this.helperText}>${this.helperText}</div>\n\n <button\n class=${classMap({\n 'block w-full bg-contrast-5 rounded text-left transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer hover-bg-contrast-10': !this.disabled && !this.readonly,\n 'cursor-default': this.disabled \|\| this.readonly,\n 'mt-s': !!this.label \|\| !!this.helperText,\n })}\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n ?disabled=${this.disabled \|\| this.readonly}\n @click=${(evt: MouseEvent) => {\n const button = evt.currentTarget as HTMLButtonElement;\n const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n dialog.href = '';\n dialog.show(button);\n }}\n >\n <div class=${classMap({ 'transition-opacity': true, 'opacity-50': this.disabled })}>\n <foxy-nucleon\n class=\"block\"\n infer=\"\"\n href=${ifDefined(this._value \|\| void 0)}\n id=\"valueLoader\"\n @update=${() => this.requestUpdate()}\n >\n ${this.__getItemRenderer(this.item)({\n html,\n data: valueLoader?.data ?? null,\n href: (this._value as string \| undefined) \|\| '',\n related: [],\n parent: '',\n props: {},\n spread: spread,\n simplifyNsLoading: this.simplifyNsLoading,\n disabled: this.disabled,\n disabledControls: this.disabledControls,\n readonly: this.readonly,\n readonlyControls: this.readonlyControls,\n hidden: this.hidden,\n hiddenControls: this.hiddenControls,\n templates: this.templates,\n previous: null,\n next: null,\n group: this.nucleon?.group ?? '',\n lang: this.lang,\n ns: this.ns,\n })}\n </foxy-nucleon>\n </div>\n </button>\n\n <div\n class=\"mt-xs text-xs leading-xs text-error\"\n ?hidden=${!this._errorMessage \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </div>\n </div>\n `;\n }\n\n private __handleFetchEvent(event: Event) {\n if (!(event instanceof FetchEvent)) return;\n if (event.defaultPrevented) return;\n\n const { url, method } = event.request;\n\n if (url === `foxy://${this.virtualHost}/select` && method === 'POST') {\n return event.respondWith(this.__handleSelect(event.request));\n }\n\n if (url === `foxy://${this.virtualHost}/empty` && method === 'GET') {\n return event.respondWith(this.__handleEmpty());\n }\n }\n\n private async __handleSelect(request: Request): Promise<Response> {\n const body = (await request.clone().json()) as { selection: string };\n this._value = body.selection;\n return new Response(\n JSON.stringify({\n _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n message: 'Resource selected.',\n })\n );\n }\n\n private async __handleEmpty(): Promise<Response> {\n return new Response(\n JSON.stringify({\n _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n message: 'Resource selected.',\n })\n );\n }\n\n private get __valueLoader() {\n type Loader = NucleonElement<any>;\n return this.renderRoot.querySelector<Loader>('#valueLoader');\n }\n}\n"]}
1	+ {"version":3,"file":"InternalResourcePickerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport type { FormRenderer } from '../../public/FormDialog/types';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../public/FormDialog/FormDialog';\nimport type { Option } from '../../public/QueryBuilder/types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { getResourceId } from '@foxy.io/sdk/core';\nimport { FetchEvent } from '../../public/NucleonElement/FetchEvent';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-html';\nimport { classMap } from '../../../utils/class-map';\nimport { uniqueId } from 'lodash-es';\nimport { spread } from '@open-wc/lit-helpers';\n\nimport memoize from 'lodash-es/memoize';\n\ntype DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;\n\nexport class InternalResourcePickerControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n getDisplayValueOptions: { attribute: false },\n showCopyIdButton: { type: Boolean, attribute: 'show-copy-id-button' },\n virtualHost: {},\n getItemUrl: { attribute: false },\n formProps: { type: Object },\n filters: { type: Array },\n layout: {},\n first: {},\n item: {},\n form: {},\n };\n }\n\n getDisplayValueOptions: DisplayValueOptionsCb = resource => ({ resource });\n\n showCopyIdButton = false;\n\n virtualHost = uniqueId('internal-resource-picker-control-');\n\n getItemUrl: ((href: string, data: unknown \| null) => string) \| null = null;\n\n formProps: Record<string, unknown> = {};\n\n filters: Option[] = [];\n\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n first: string \| null = null;\n\n item: string \| null = null;\n\n form: string \| null \| FormRenderer = null;\n\n private readonly __getItemRenderer = memoize((item: string \| null) => {\n return new Function(\n 'ctx',\n `return ctx.html\\`\n <${item ?? 'foxy-null'}\n related=\\${JSON.stringify(ctx.related)}\n parent=\\${ctx.parent}\n infer=\"card\"\n href=$\\{ctx.href}\n ...=\\${ctx.spread(ctx.props)}\n >\n </${item ?? 'foxy-null'}>\\``\n ) as ItemRenderer;\n });\n\n renderControl(): TemplateResult {\n const dialogProps = {\n ...this.formProps,\n '.selectionProps': { '.filters': this.filters, '.first': this.first, '.item': this.item },\n };\n\n return html`\n <foxy-form-dialog\n parent=\"foxy://${this.virtualHost}/select\"\n header=\"header\"\n infer=\"dialog\"\n alert\n .props=${dialogProps}\n .form=${this.form ?? 'foxy-internal-resource-picker-control-form'}\n @fetch=${this.__handleFetchEvent}\n >\n </foxy-form-dialog>\n\n ${this.layout === 'summary-item'\n ? this.__renderSummaryItemLayout()\n : this.__renderStandaloneLayout()}\n `;\n }\n\n updated(changes: Map<keyof this, unknown>): void {\n super.updated(changes);\n if (changes.has('item')) this.__getItemRenderer.cache.clear?.();\n }\n\n private __clear(): void {\n this._value = '';\n this.dispatchEvent(new CustomEvent('clear'));\n }\n\n private __renderSummaryItemLayout() {\n const resource = this.renderRoot.querySelector<NucleonElement<any>>('#value');\n const onClick = (evt: Event) => {\n if (this.disabled \|\| this.readonly) return;\n const button = evt.currentTarget as HTMLButtonElement;\n const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n dialog.href = '';\n dialog.show(button);\n };\n\n return html`\n <div class=\"leading-xs\">\n <div class=\"flex items-center gap-xs\">\n <div class=\"text-m text-body whitespace-nowrap flex-1\">${this.label}</div>\n\n <button\n aria-label=${this.t('select')}\n class=${classMap({\n 'text-right min-w-0 transition-colors transition-opacity': true,\n 'rounded-s focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'cursor-pointer text-body hover-opacity-80': !this.disabled && !this.readonly,\n 'font-medium': !this.readonly,\n })}\n ?disabled=${this.disabled \|\| this.readonly}\n @click=${onClick}\n >\n <div class=\"truncate min-w-0\">\n ${this._value\n ? html`\n <foxy-i18n\n infer=\"\"\n key=\"value\"\n .options=${resource?.data\n ? this.getDisplayValueOptions(resource.data)\n : { context: resource?.in('fail') ? 'fail' : 'busy' }}\n >\n </foxy-i18n>\n `\n : this.placeholder}\n </div>\n </button>\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=${this.__clear}\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 <div class=\"text-xs text-secondary\">${this.helperText}</div>\n <div class=\"text-xs text-error\" ?hidden=${this.disabled \|\| this.readonly}>\n ${this._errorMessage}\n </div>\n </div>\n </div>\n\n <foxy-nucleon\n infer=\"\"\n href=${ifDefined(this._value \|\| void 0)}\n id=\"value\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n `;\n }\n\n private __renderStandaloneLayout() {\n const valueLoader = this.__valueLoader;\n const selectionId = typeof this._value === 'string' ? getResourceId(this._value) : void 0;\n const selectionUrl =\n typeof this._value === 'string'\n ? this.getItemUrl?.(this._value, valueLoader?.data ?? null)\n : void 0;\n\n return html`\n <div class=\"block group\">\n <div\n class=${classMap({\n 'flex items-center gap-s transition-colors font-medium': true,\n 'text-disabled': this.disabled,\n })}\n >\n <span class=\"mr-auto text-l\">${this.label}</span>\n ${selectionUrl\n ? html`\n <a\n class=\"text-body rounded transition-opacity hover-opacity-90 focus-outline-none focus-ring-2 focus-ring-primary-50\"\n href=${selectionUrl}\n >\n <foxy-i18n infer=\"\" key=\"view\"></foxy-i18n>\n </a>\n `\n : ''}\n ${this.showCopyIdButton && selectionId !== null\n ? html`\n <foxy-copy-to-clipboard\n layout=\"text\"\n theme=\"contrast tertiary-inline\"\n infer=\"copy-id\"\n text=${selectionId}\n >\n </foxy-copy-to-clipboard>\n `\n : ''}\n ${this.readonly \|\| !this._value\n ? ''\n : html`\n <vaadin-button\n theme=\"error tertiary-inline\"\n ?disabled=${this.disabled}\n @click=${this.__clear}\n >\n <foxy-i18n infer=\"\" key=\"clear\"></foxy-i18n>\n </vaadin-button>\n `}\n </div>\n\n <div class=\"text-secondary text-s\" ?hidden=${!this.helperText}>${this.helperText}</div>\n\n <button\n class=${classMap({\n 'block w-full bg-contrast-5 rounded text-left transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer hover-bg-contrast-10': !this.disabled && !this.readonly,\n 'cursor-default': this.disabled \|\| this.readonly,\n 'mt-s': !!this.label \|\| !!this.helperText,\n })}\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n ?disabled=${this.disabled \|\| this.readonly}\n @click=${(evt: MouseEvent) => {\n const button = evt.currentTarget as HTMLButtonElement;\n const dialog = this.renderRoot.querySelector('foxy-form-dialog') as FormDialog;\n\n dialog.href = '';\n dialog.show(button);\n }}\n >\n <div class=${classMap({ 'transition-opacity': true, 'opacity-50': this.disabled })}>\n <foxy-nucleon\n class=\"block\"\n infer=\"\"\n href=${ifDefined(this._value \|\| void 0)}\n id=\"valueLoader\"\n @update=${() => this.requestUpdate()}\n >\n ${this.__getItemRenderer(this.item)({\n html,\n data: valueLoader?.data ?? null,\n href: (this._value as string \| undefined) \|\| '',\n related: [],\n parent: '',\n props: {},\n spread: spread,\n simplifyNsLoading: this.simplifyNsLoading,\n disabled: this.disabled,\n disabledControls: this.disabledControls,\n readonly: this.readonly,\n readonlyControls: this.readonlyControls,\n hidden: this.hidden,\n hiddenControls: this.hiddenControls,\n templates: this.templates,\n previous: null,\n next: null,\n group: this.nucleon?.group ?? '',\n lang: this.lang,\n ns: this.ns,\n })}\n </foxy-nucleon>\n </div>\n </button>\n\n <div\n class=\"mt-xs text-xs leading-xs text-error\"\n ?hidden=${!this._errorMessage \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </div>\n </div>\n `;\n }\n\n private __handleFetchEvent(event: Event) {\n if (!(event instanceof FetchEvent)) return;\n if (event.defaultPrevented) return;\n\n const { url, method } = event.request;\n\n if (url === `foxy://${this.virtualHost}/select` && method === 'POST') {\n return event.respondWith(this.__handleSelect(event.request));\n }\n\n if (url === `foxy://${this.virtualHost}/empty` && method === 'GET') {\n return event.respondWith(this.__handleEmpty());\n }\n }\n\n private async __handleSelect(request: Request): Promise<Response> {\n const body = (await request.clone().json()) as { selection: string };\n this._value = body.selection;\n return new Response(\n JSON.stringify({\n _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n message: 'Resource selected.',\n })\n );\n }\n\n private async __handleEmpty(): Promise<Response> {\n return new Response(\n JSON.stringify({\n _links: { self: { href: `foxy://${this.virtualHost}/empty` } },\n message: 'Resource selected.',\n })\n );\n }\n\n private get __valueLoader() {\n type Loader = NucleonElement<any>;\n return this.renderRoot.querySelector<Loader>('#valueLoader');\n }\n}\n"]}

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":"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","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/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>