npm - @foxy.io/elements - Versions diffs - 1.27.0-beta.3 → 1.27.0-beta.5 - Mend

@foxy.io/elements 1.27.0-beta.3 → 1.27.0-beta.5

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalAsyncListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CollectionPage, NucleonElement } from '../../public/index';\nimport type { InternalConfirmDialog } from '../InternalConfirmDialog';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../index';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\nexport class InternalAsyncListControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n keepDialogOpenOnDelete: { type: Boolean, attribute: 'keep-dialog-open-on-delete' },\n keepDialogOpenOnPost: { type: Boolean, attribute: 'keep-dialog-open-on-post' },\n hideDeleteButton: { type: Boolean, attribute: 'hide-delete-button' },\n hideCreateButton: { type: Boolean, attribute: 'hide-create-button' },\n createPageHref: { attribute: 'create-page-href' },\n getPageHref: { attribute: false },\n related: { type: Array },\n first: {},\n limit: { type: Number },\n form: {},\n item: {},\n itemProps: { type: Object, attribute: 'item-props' },\n wide: { type: Boolean },\n alert: { type: Boolean },\n };\n }\n\n /** If true, FormDialog won't automatically close after the associated form deletes the resource. /\n keepDialogOpenOnDelete = false;\n\n /* If true, FormDialog won't automatically close after the associated form creates a resource. /\n keepDialogOpenOnPost = false;\n\n /* If provided, renders Create button as a link to this page. /\n createPageHref: string \| null = null;\n\n /* Same as the `related` property of `NucleonElement`. /\n related = [] as string[];\n\n /* Limit query parameter to apply to the `first` URL. /\n limit = 20;\n\n /* URI of the first page of the hAPI collection to display. /\n first: string \| null = null;\n\n /* Same as the `form` property of `FormDialog`. If set, will open a dialog on item click. /\n form: FormDialog['form'] = null;\n\n /* Same as the `item` property of `CollectionPage`. /\n item: CollectionPage<any>['item'] = null;\n\n /* Props to pass through to the `CollectionPage` rendering items. /\n itemProps: Record<string, unknown> = {};\n\n /* Same as the `wide` property of `FormDialog`. /\n wide = false;\n\n /* Same as the `alert` property of `FormDialog`. /\n alert = false;\n\n /* Hides Delete Swipe Action if true. /\n hideDeleteButton = false;\n\n /* Hides Create button if true. /\n hideCreateButton = false;\n\n /* If set, renders list items as <a> tags. */\n getPageHref: ((itemHref: string, item: unknown) => string \| null) \| null = null;\n\n private __deletionConfimationCallback: (() => void) \| null = null;\n\n private __cachedCardRenderer: {\n item: InternalAsyncListControl['item'];\n render: ItemRenderer;\n } \| null = null;\n\n private __itemRenderer: ItemRenderer = ctx => {\n if (!ctx.data) return this.__cardRenderer(ctx);\n\n const href = this.getPageHref?.(ctx.href, ctx.data);\n if (typeof href !== 'string' && !this.form) return this.__cardRenderer(ctx);\n\n const isDisabled = this.disabledSelector.matches('card', true);\n const card = this.__cardRenderer(ctx);\n let clickableItem: TemplateResult;\n\n const wrapperClass = classMap({\n 'rounded-t': !ctx.previous,\n 'rounded-b': !ctx.next,\n 'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n 'text-left w-full block transition-colors': true,\n 'hover-bg-contrast-5': !isDisabled,\n });\n\n if (this.getPageHref) {\n if (isDisabled) {\n clickableItem = html`<div class=${wrapperClass}>${card}</div>`;\n } else {\n const href = this.getPageHref(ctx.href, ctx.data);\n clickableItem = html`<a class=${wrapperClass} href=${href}>${card}</a>`;\n }\n } else {\n const handleClick = (evt: Event) => {\n const button = evt.currentTarget as HTMLButtonElement;\n const dialog = this.__dialog;\n\n dialog.header = 'header_update';\n dialog.href = ctx.href;\n dialog.show(button);\n };\n\n clickableItem = html`\n <button ?disabled=${isDisabled} class=${wrapperClass} @click=${handleClick}>${card}</button>\n `;\n }\n\n if (this.hideDeleteButton \|\| this.readonly) return clickableItem;\n\n return html`\n <foxy-swipe-actions class=\"block\">\n ${clickableItem}\n\n <vaadin-button\n theme=\"primary error\"\n class=\"h-full\"\n slot=\"action\"\n @click=${(evt: CustomEvent) => {\n const button = evt.currentTarget as HTMLElement;\n const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n\n confirm.show(button);\n\n this.__deletionConfimationCallback = () => {\n const cardButton = button.previousElementSibling!;\n const card = cardButton.querySelector<NucleonElement<any>>('[href]');\n\n card?.delete();\n this.__deletionConfimationCallback = null;\n };\n }}\n >\n <foxy-i18n infer=\"\" key=\"delete_button_text\"></foxy-i18n>\n </vaadin-button>\n </foxy-swipe-actions>\n `;\n };\n\n renderControl(): TemplateResult {\n let first: string \| undefined;\n\n try {\n const url = new URL(this.first ?? '');\n url.searchParams.set('limit', String(this.limit));\n first = url.toString();\n } catch {\n first = undefined;\n }\n\n return html`\n ${this.form\n ? html`\n <foxy-form-dialog\n parent=${ifDefined(this.first ?? void 0)}\n infer=\"dialog\"\n id=\"form\"\n ?wide=${this.wide}\n ?alert=${this.alert}\n ?keep-open-on-post=${this.keepDialogOpenOnPost}\n ?keep-open-on-delete=${this.keepDialogOpenOnDelete}\n .related=${this.related}\n .form=${this.form as any}\n >\n </foxy-form-dialog>\n `\n : ''}\n ${this.hideDeleteButton \|\| this.readonly\n ? ''\n : html`\n <foxy-internal-confirm-dialog\n message=\"delete_message\"\n confirm=\"delete_confirm\"\n cancel=\"delete_cancel\"\n header=\"delete_header\"\n theme=\"error\"\n infer=\"\"\n id=\"confirm\"\n @hide=${(evt: DialogHideEvent) => {\n if (!evt.detail.cancelled) this.__deletionConfimationCallback?.();\n }}\n >\n </foxy-internal-confirm-dialog>\n `}\n <div class=\"flex items-center justify-between mb-xs text-s font-medium\">\n <span class=\"text-secondary\">\n ${this.label && this.label !== 'label' ? this.label : ''}\n </span>\n ${(!this.form && !this.createPageHref) \|\| this.readonly \|\| this.hideCreateButton\n ? ''\n : this.createPageHref && !this.disabled\n ? html`\n <a\n class=\"rounded-s text-primary group focus-outline-none focus-ring-2 focus-ring-primary-50\"\n href=${this.createPageHref}\n >\n <foxy-i18n\n class=\"transition-opacity group-hover-opacity-80\"\n infer=\"\"\n key=\"create_button_text\"\n >\n </foxy-i18n>\n </a>\n `\n : html`\n <vaadin-button\n theme=\"tertiary-inline\"\n ?disabled=${this.disabled}\n @click=${(evt: Event) => {\n evt.preventDefault();\n evt.stopPropagation();\n\n const dialog = this.__dialog;\n const button = evt.currentTarget as HTMLButtonElement;\n\n dialog.header = 'header_create';\n dialog.href = '';\n dialog.show(button);\n }}\n >\n <foxy-i18n infer=\"pagination\" key=\"create_button_text\"></foxy-i18n>\n </vaadin-button>\n `}\n </div>\n\n <foxy-pagination first=${ifDefined(first)} infer=\"pagination\">\n <foxy-collection-page\n class=${classMap({\n 'block divide-y divide-contrast-5 rounded overflow-hidden': true,\n 'ring-1 ring-inset ring-contrast-10': !this.form && !this.getPageHref,\n 'bg-contrast-5': !!this.form \|\| !!this.getPageHref,\n })}\n infer=\"card\"\n .related=${this.related}\n .props=${this.itemProps}\n .item=${this.__itemRenderer as any}\n >\n </foxy-collection-page>\n </foxy-pagination>\n `;\n }\n\n private get __dialog() {\n return this.renderRoot.querySelector('#form') as FormDialog;\n }\n\n private get __cardRenderer() {\n const item = this.item;\n\n if (this.__cachedCardRenderer?.item !== item) {\n this.__cachedCardRenderer = {\n item: item,\n render:\n typeof item === 'string'\n ? (new Function(\n 'ctx',\n `return ctx.html\\`\n <${item}\n related=\\${JSON.stringify(ctx.related)}\n parent=\\${ctx.parent}\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n infer=\"\"\n href=\\${ctx.href}\n ...=\\${ctx.spread(ctx.props)}\n >\n </${item}>\\``\n ) as ItemRenderer)\n : ctx => html`\n <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">\n ${item?.(ctx)}\n </div>\n `,\n };\n }\n\n return this.__cachedCardRenderer.render;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalAsyncListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { CollectionPage, NucleonElement } from '../../public/index';\nimport type { InternalConfirmDialog } from '../InternalConfirmDialog';\nimport type { DialogHideEvent } from '../../private/Dialog/DialogHideEvent';\nimport type { ItemRenderer } from '../../public/CollectionPage/types';\nimport type { FormDialog } from '../../index';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-element';\n\nexport class InternalAsyncListControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n keepDialogOpenOnDelete: { type: Boolean, attribute: 'keep-dialog-open-on-delete' },\n keepDialogOpenOnPost: { type: Boolean, attribute: 'keep-dialog-open-on-post' },\n hideDeleteButton: { type: Boolean, attribute: 'hide-delete-button' },\n hideCreateButton: { type: Boolean, attribute: 'hide-create-button' },\n createPageHref: { attribute: 'create-page-href' },\n getPageHref: { attribute: false },\n related: { type: Array },\n first: {},\n limit: { type: Number },\n form: {},\n item: {},\n itemProps: { type: Object, attribute: 'item-props' },\n wide: { type: Boolean },\n alert: { type: Boolean },\n };\n }\n\n /** If true, FormDialog won't automatically close after the associated form deletes the resource. /\n keepDialogOpenOnDelete = false;\n\n /* If true, FormDialog won't automatically close after the associated form creates a resource. /\n keepDialogOpenOnPost = false;\n\n /* If provided, renders Create button as a link to this page. /\n createPageHref: string \| null = null;\n\n /* Same as the `related` property of `NucleonElement`. /\n related = [] as string[];\n\n /* Limit query parameter to apply to the `first` URL. /\n limit = 20;\n\n /* URI of the first page of the hAPI collection to display. /\n first: string \| null = null;\n\n /* Same as the `form` property of `FormDialog`. If set, will open a dialog on item click. /\n form: FormDialog['form'] = null;\n\n /* Same as the `item` property of `CollectionPage`. /\n item: CollectionPage<any>['item'] = null;\n\n /* Props to pass through to the `CollectionPage` rendering items. /\n itemProps: Record<string, unknown> = {};\n\n /* Same as the `wide` property of `FormDialog`. /\n wide = false;\n\n /* Same as the `alert` property of `FormDialog`. /\n alert = false;\n\n /* Hides Delete Swipe Action if true. /\n hideDeleteButton = false;\n\n /* Hides Create button if true. /\n hideCreateButton = false;\n\n /* If set, renders list items as <a> tags. */\n getPageHref: ((itemHref: string, item: unknown) => string \| null) \| null = null;\n\n private __deletionConfimationCallback: (() => void) \| null = null;\n\n private __cachedCardRenderer: {\n item: InternalAsyncListControl['item'];\n render: ItemRenderer;\n } \| null = null;\n\n private __itemRenderer: ItemRenderer = ctx => {\n if (!ctx.data) return this.__cardRenderer(ctx);\n\n const href = this.getPageHref?.(ctx.href, ctx.data);\n if (typeof href !== 'string' && !this.form) return this.__cardRenderer(ctx);\n\n const isDisabled = this.disabledSelector.matches('card', true);\n const card = this.__cardRenderer(ctx);\n let clickableItem: TemplateResult;\n\n const wrapperClass = classMap({\n 'rounded-t': !ctx.previous,\n 'rounded-b': !ctx.next,\n 'focus-outline-none focus-ring-2 focus-ring-inset focus-ring-primary-50': true,\n 'text-left w-full block transition-colors': true,\n 'hover-bg-contrast-5': !isDisabled,\n });\n\n if (this.getPageHref) {\n if (isDisabled) {\n clickableItem = html`<div class=${wrapperClass}>${card}</div>`;\n } else {\n const href = this.getPageHref(ctx.href, ctx.data);\n clickableItem = html`<a class=${wrapperClass} href=${href}>${card}</a>`;\n }\n } else {\n const handleClick = (evt: Event) => {\n const button = evt.currentTarget as HTMLButtonElement;\n const dialog = this.__dialog;\n\n dialog.header = 'header_update';\n dialog.href = ctx.href;\n dialog.show(button);\n };\n\n clickableItem = html`\n <button ?disabled=${isDisabled} class=${wrapperClass} @click=${handleClick}>${card}</button>\n `;\n }\n\n if (this.hideDeleteButton \|\| this.readonly) return clickableItem;\n\n return html`\n <foxy-swipe-actions class=\"block\">\n ${clickableItem}\n\n <vaadin-button\n theme=\"primary error\"\n class=\"h-full\"\n slot=\"action\"\n @click=${(evt: CustomEvent) => {\n const button = evt.currentTarget as HTMLElement;\n const confirm = this.renderRoot.querySelector('#confirm') as InternalConfirmDialog;\n\n confirm.show(button);\n\n this.__deletionConfimationCallback = () => {\n const cardButton = button.previousElementSibling!;\n const card = cardButton.querySelector<NucleonElement<any>>('[href]');\n\n card?.delete();\n this.__deletionConfimationCallback = null;\n };\n }}\n >\n <foxy-i18n infer=\"\" key=\"delete_button_text\"></foxy-i18n>\n </vaadin-button>\n </foxy-swipe-actions>\n `;\n };\n\n renderControl(): TemplateResult {\n let first: string \| undefined;\n\n try {\n const url = new URL(this.first ?? '');\n url.searchParams.set('limit', String(this.limit));\n first = url.toString();\n } catch {\n first = undefined;\n }\n\n return html`\n ${this.form\n ? html`\n <foxy-form-dialog\n parent=${ifDefined(this.first ?? void 0)}\n infer=\"dialog\"\n id=\"form\"\n ?wide=${this.wide}\n ?alert=${this.alert}\n ?keep-open-on-post=${this.keepDialogOpenOnPost}\n ?keep-open-on-delete=${this.keepDialogOpenOnDelete}\n .related=${this.related}\n .form=${this.form as any}\n >\n </foxy-form-dialog>\n `\n : ''}\n ${this.hideDeleteButton \|\| this.readonly\n ? ''\n : html`\n <foxy-internal-confirm-dialog\n message=\"delete_message\"\n confirm=\"delete_confirm\"\n cancel=\"delete_cancel\"\n header=\"delete_header\"\n theme=\"error\"\n infer=\"\"\n id=\"confirm\"\n @hide=${(evt: DialogHideEvent) => {\n if (!evt.detail.cancelled) this.__deletionConfimationCallback?.();\n }}\n >\n </foxy-internal-confirm-dialog>\n `}\n <div class=\"flex items-center justify-between mb-xs text-s font-medium\">\n <span class=\"text-secondary\">\n ${this.label && this.label !== 'label' ? this.label : ''}\n </span>\n ${(!this.form && !this.createPageHref) \|\| this.readonly \|\| this.hideCreateButton\n ? ''\n : this.createPageHref && !this.disabled\n ? html`\n <a\n class=\"rounded-s text-primary group focus-outline-none focus-ring-2 focus-ring-primary-50\"\n href=${this.createPageHref}\n >\n <foxy-i18n\n class=\"transition-opacity group-hover-opacity-80\"\n infer=\"\"\n key=\"create_button_text\"\n >\n </foxy-i18n>\n </a>\n `\n : html`\n <vaadin-button\n theme=\"tertiary-inline\"\n ?disabled=${this.disabled}\n @click=${(evt: Event) => {\n evt.preventDefault();\n evt.stopPropagation();\n\n const dialog = this.__dialog;\n const button = evt.currentTarget as HTMLButtonElement;\n\n dialog.header = 'header_create';\n dialog.href = '';\n dialog.show(button);\n }}\n >\n <foxy-i18n infer=\"pagination\" key=\"create_button_text\"></foxy-i18n>\n </vaadin-button>\n `}\n </div>\n\n <foxy-pagination first=${ifDefined(first)} infer=\"pagination\">\n <foxy-collection-page\n class=${classMap({\n 'block divide-y divide-contrast-5 rounded overflow-hidden': true,\n 'ring-1 ring-inset ring-contrast-10': !this.form && !this.getPageHref,\n 'bg-contrast-5': !!this.form \|\| !!this.getPageHref,\n })}\n infer=\"card\"\n .related=${this.related}\n .props=${this.itemProps}\n .item=${this.__itemRenderer as any}\n >\n </foxy-collection-page>\n </foxy-pagination>\n\n <div\n class=${classMap({\n 'transition-colors mt-xs text-xs': true,\n 'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n 'text-disabled': this.disabled,\n })}\n ?hidden=${!this.helperText \|\| this.helperText === 'helper_text'}\n >\n ${this.helperText}\n </div>\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 `;\n }\n\n private get __dialog() {\n return this.renderRoot.querySelector('#form') as FormDialog;\n }\n\n private get __cardRenderer() {\n const item = this.item;\n\n if (this.__cachedCardRenderer?.item !== item) {\n this.__cachedCardRenderer = {\n item: item,\n render:\n typeof item === 'string'\n ? (new Function(\n 'ctx',\n `return ctx.html\\`\n <${item}\n related=\\${JSON.stringify(ctx.related)}\n parent=\\${ctx.parent}\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n infer=\"\"\n href=\\${ctx.href}\n ...=\\${ctx.spread(ctx.props)}\n >\n </${item}>\\``\n ) as ItemRenderer)\n : ctx => html`\n <div style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\">\n ${item?.(ctx)}\n </div>\n `,\n };\n }\n\n return this.__cachedCardRenderer.render;\n }\n}\n"]}

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

@@ -1,10 +1,14 @@
-import type { PropertyDeclarations, TemplateResult } from 'lit-element';
-import type { Item, Option } from './types';
+import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { Item, Option, Unit } from './types';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 export declare class InternalEditableListControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    static get styles(): CSSResultArray;
     inputParams: Record<string, unknown>;
     options: Option[];
+    units: Unit[];
+    range: null | 'optional';
+    private __isErrorVisible;
     private __newItem;
     render(): TemplateResult;
     protected get _value(): Item[];

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

@@ -1,14 +1,17 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { html, css } from 'lit-element';
 import { classMap } from "../../../utils/class-map.js";
 import { repeat } from 'lit-html/directives/repeat';
 import { spread } from '@open-wc/lit-helpers';
 import { live } from 'lit-html/directives/live';
-import { html } from 'lit-element';
 export class InternalEditableListControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
         this.inputParams = {};
         this.options = [];
+        this.units = [];
+        this.range = null;
+        this.__isErrorVisible = false;
         this.__newItem = '';
     }
     static get properties() {
@@ -16,10 +19,36 @@ export class InternalEditableListControl extends InternalEditableControl {
             ...super.properties,
             inputParams: { attribute: false },
             options: { type: Array },
+            units: { type: Array },
+            range: {},
+            __isErrorVisible: { attribute: false },
             __newItem: { attribute: false },
         };
     }
+    static get styles() {
+        return [
+            ...super.styles,
+            css `div:has(> select){
+  position:relative;
+}
+div:has(> select)::after{
+  content:' ';
+  position:absolute;
+  top:50%;
+  margin-top:-2px;
+  right:10px;
+  width:0;
+  height:0;
+  border-left:5px solid transparent;
+  border-right:5px solid transparent;
+  border-top:5px solid currentColor;
+}
+      `,
+        ];
+    }
     render() {
+        var _a, _b;
         const deleteButtonClass = classMap({
             'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,
             'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,
@@ -36,9 +65,19 @@ export class InternalEditableListControl extends InternalEditableControl {
         });
         const isAddButtonDisabled = this.disabled || !this.__newItem;
         const addItem = () => {
-            if (!this.__newItem)
-                return;
-            this._value = [...this._value, { value: this.__newItem }];
+            var _a;
+            const newValue = [...this._value];
+            const unit = (_a = this.renderRoot.querySelector('select')) === null || _a === void 0 ? void 0 : _a.value;
+            this.__newItem
+                .split('\n')
+                .map(code => code.trim())
+                .filter(code => code.length > 0)
+                .forEach(value => {
+                if (!newValue.some(item => item.value === value)) {
+                    newValue.push({ value, unit });
+                }
+            });
+            this._value = newValue;
             this.__newItem = '';
         };
         return html `
@@ -86,7 +125,7 @@ export class InternalEditableListControl extends InternalEditableControl {
             ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'
             : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}
             class=${classMap({
-            'transition-colors pl-s h-m flex items-center': true,
+            'transition-colors pl-s h-m flex items-center gap-xs': true,
             'focus-within-ring-2 focus-within-ring-primary-50': true,
             'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,
             'bg-contrast-5': this.disabled,
@@ -94,23 +133,128 @@ export class InternalEditableListControl extends InternalEditableControl {
             'hidden': this.readonly,
         })}
           >
-            <input
-              placeholder=${this.placeholder}
+            ${this.range
+            ? html `
+                  <foxy-i18n infer="" class="text-disabled font-medium" key="range_from">
+                  </foxy-i18n>
+                  <input
+                    placeholder=${this.placeholder}
+                    class=${classMap({
+                'bg-transparent appearance-none h-m font-medium focus-outline-none': true,
+                'text-disabled': this.disabled,
+            })}
+                    list="list"
+                    ...=${spread(this.inputParams)}
+                    .value=${live((_a = this.__newItem.split('..')[0]) !== null && _a !== void 0 ? _a : '')}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    @keydown=${(evt) => evt.key === 'Enter' && addItem()}
+                    @change=${(evt) => evt.stopPropagation()}
+                    @input=${(evt) => {
+                var _a;
+                const newFrom = evt.currentTarget.value.trim();
+                const oldTo = (_a = this.__newItem.split('..')[1]) !== null && _a !== void 0 ? _a : '';
+                this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;
+            }}
+                    @paste=${(evt) => {
+                var _a, _b, _c;
+                evt.preventDefault();
+                const newFrom = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+                const oldTo = (_c = this.__newItem.split('..')[1]) !== null && _c !== void 0 ? _c : '';
+                this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;
+                addItem();
+            }}
+                    @blur=${() => {
+                this.__isErrorVisible = true;
+            }}
+                  />
+                  <foxy-i18n infer="" class="text-disabled font-medium" key="range_to"></foxy-i18n>
+                  <input
+                    placeholder=${this.placeholder}
+                    class=${classMap({
+                'bg-transparent appearance-none h-m font-medium focus-outline-none': true,
+                'text-disabled': this.disabled,
+            })}
+                    list="list"
+                    ...=${spread(this.inputParams)}
+                    .value=${live((_b = this.__newItem.split('..')[1]) !== null && _b !== void 0 ? _b : '')}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    @keydown=${(evt) => evt.key === 'Enter' && addItem()}
+                    @change=${(evt) => evt.stopPropagation()}
+                    @input=${(evt) => {
+                var _a;
+                const newTo = evt.currentTarget.value.trim();
+                const oldFrom = (_a = this.__newItem.split('..')[0]) !== null && _a !== void 0 ? _a : '';
+                this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;
+            }}
+                    @paste=${(evt) => {
+                var _a, _b, _c;
+                evt.preventDefault();
+                const newTo = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+                const oldFrom = (_c = this.__newItem.split('..')[0]) !== null && _c !== void 0 ? _c : '';
+                this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;
+                addItem();
+            }}
+                    @blur=${() => {
+                this.__isErrorVisible = true;
+            }}
+                  />
+                `
+            : html `
+                  <input
+                    placeholder=${this.placeholder}
+                    class=${classMap({
+                'w-full bg-transparent appearance-none h-m font-medium focus-outline-none': true,
+                'text-disabled': this.disabled,
+            })}
+                    list="list"
+                    ...=${spread(this.inputParams)}
+                    .value=${live(this.__newItem)}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    @keydown=${(evt) => evt.key === 'Enter' && addItem()}
+                    @change=${(evt) => evt.stopPropagation()}
+                    @input=${(evt) => {
+                this.__newItem = evt.currentTarget.value.trim();
+            }}
+                    @paste=${(evt) => {
+                var _a, _b;
+                evt.preventDefault();
+                this.__newItem = (_b = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+                addItem();
+            }}
+                    @blur=${() => {
+                this.__isErrorVisible = true;
+            }}
+                  />
+                `}
+            <div
               class=${classMap({
-            'w-full bg-transparent appearance-none h-m font-medium focus-outline-none': true,
+            'relative': true,
+            'hover-text-base focus-within-text-primary-contrast': !this.disabled,
             'text-disabled': this.disabled,
         })}
-              list="list"
-              ...=${spread(this.inputParams)}
-              .value=${live(this.__newItem)}
-              ?disabled=${this.disabled}
-              ?readonly=${this.readonly}
-              @keydown=${(evt) => evt.key === 'Enter' && addItem()}
-              @change=${(evt) => evt.stopPropagation()}
-              @input=${(evt) => {
-            this.__newItem = evt.currentTarget.value.trim();
-        }}
-            />
+              ?hidden=${this.units.length === 0}
+            >
+              <select
+                style="min-width: 8rem"
+                class=${classMap({
+            'transition-colors rounded-s mx-xs px-s': true,
+            'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,
+            'hover-bg-contrast focus-bg-primary': !this.disabled,
+        })}
+                ?disabled=${this.disabled}
+              >
+                ${this.units.map(({ label, value }) => {
+            return html `<option value=${value}>${label !== null && label !== void 0 ? label : value}</option>`;
+        })}
+              </select>
+            </div>
             <datalist id="list">
               ${this.options.map(({ label, value }) => {
@@ -120,14 +264,14 @@ export class InternalEditableListControl extends InternalEditableControl {
         })}
             </datalist>
-            <div class="transition-opacity ${this.__newItem ? 'opacity-100' : 'opacity-0'}">
+            <div class="mr-xs ml-auto" ?hidden=${!this.__newItem}>
               <button
                 aria-label=${this.t('submit')}
                 class=${classMap({
-            'w-xs h-xs mr-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,
-            'flex items-center justify-center rounded-full transition-colors': true,
+            'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,
+            'flex items-center justify-center rounded-s transition-colors': true,
             'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,
-            'bg-success-10 text-success cursor-pointer': !isAddButtonDisabled,
+            'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,
             'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,
             'focus-ring-2': !isAddButtonDisabled,
         })}
@@ -146,9 +290,17 @@ export class InternalEditableListControl extends InternalEditableControl {
             'text-secondary group-hover-text-body': !this.disabled && !this.readonly,
             'text-disabled': this.disabled,
         })}
+          ?hidden=${!this.helperText}
         >
           ${this.helperText}
         </div>
+        <div
+          class="mt-xs text-xs leading-xs text-error"
+          ?hidden=${!this.__isErrorVisible || !this._errorMessage || this.disabled || this.readonly}
+        >
+          ${this._errorMessage}
+        </div>
       </div>
     `;
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\nimport { html } from 'lit-element';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n inputParams: { attribute: false },\n options: { type: Array },\n __newItem: { attribute: false },\n };\n }\n\n inputParams: Record<string, unknown> = {};\n\n options: Option[] = [];\n\n private __newItem = '';\n\n render(): TemplateResult {\n const deleteButtonClass = classMap({\n 'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n 'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n 'flex items-center justify-center': !this.readonly,\n 'hidden': this.readonly,\n });\n\n const itemClass = classMap({\n 'transition-colors h-m ml-s flex items-center': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'group-hover-divide-contrast-20': !this.disabled && !this.readonly,\n });\n\n const isAddButtonDisabled = this.disabled \|\| !this.__newItem;\n\n const addItem = () => {\n if (!this.__newItem) return;\n this._value = [...this._value, { value: this.__newItem }];\n this.__newItem = '';\n };\n\n return html`\n <div class=\"group\">\n <div\n class=${classMap({\n 'transition-colors mb-xs font-medium text-s': true,\n 'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n 'text-disabled': this.disabled,\n })}\n >\n ${this.label}\n </div>\n\n <div\n class=${classMap({\n 'border border-contrast-10 rounded transition-colors': true,\n 'group-hover-border-contrast-20': !this.disabled && !this.readonly,\n })}\n >\n <ol class=\"transition-colors divide-y divide-contrast-10 font-medium\">\n ${repeat(\n this._value,\n item => item.value,\n (item, index) => {\n return html`\n <li class=${itemClass}>\n <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n <button\n aria-label=${this.t('delete')}\n class=${deleteButtonClass}\n ?disabled=${this.disabled}\n @click=${() => {\n this._value = this._value.filter((_, i) => i !== index);\n }}\n >\n <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n </button>\n </li>\n `;\n }\n )}\n </ol>\n\n <div\n style=${this._value.length === 0\n ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'\n : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}\n class=${classMap({\n 'transition-colors pl-s h-m flex items-center': true,\n 'focus-within-ring-2 focus-within-ring-primary-50': true,\n 'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,\n 'bg-contrast-5': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'w-full bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n }}\n />\n\n <datalist id=\"list\">\n ${this.options.map(({ label, value }) => {\n if (this._value.some(item => item.value === value)) return;\n return html`<option value=${value}>${label ?? value}</option>`;\n })}\n </datalist>\n\n <div class=\"transition-opacity ${this.__newItem ? 'opacity-100' : 'opacity-0'}\">\n <button\n aria-label=${this.t('submit')}\n class=${classMap({\n 'w-xs h-xs mr-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none':\n true,\n 'flex items-center justify-center rounded-full transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n 'bg-success-10 text-success cursor-pointer': !isAddButtonDisabled,\n 'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n 'focus-ring-2': !isAddButtonDisabled,\n })}\n ?disabled=${isAddButtonDisabled}\n @click=${addItem}\n >\n <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div\n class=${classMap({\n 'transition-colors mt-xs text-xs': true,\n 'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n 'text-disabled': this.disabled,\n })}\n >\n ${this.helperText}\n </div>\n </div>\n `;\n }\n\n protected get _value(): Item[] {\n return (super._value ?? []) as Item[];\n }\n\n protected set _value(newValue: Item[]) {\n super._value = newValue;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalEditableListControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/InternalEditableListControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { Item, Option, Unit } from './types';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\nimport { repeat } from 'lit-html/directives/repeat';\nimport { spread } from '@open-wc/lit-helpers';\nimport { live } from 'lit-html/directives/live';\n\nexport class InternalEditableListControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n inputParams: { attribute: false },\n options: { type: Array },\n units: { type: Array },\n range: {},\n __isErrorVisible: { attribute: false },\n __newItem: { attribute: false },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n div:has(> select) {\n position: relative;\n }\n\n div:has(> select)::after {\n content: ' ';\n position: absolute;\n top: 50%;\n margin-top: -2px;\n right: 10px;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid currentColor;\n }\n `,\n ];\n }\n\n inputParams: Record<string, unknown> = {};\n\n options: Option[] = [];\n\n units: Unit[] = [];\n\n range: null \| 'optional' = null;\n\n private __isErrorVisible = false;\n\n private __newItem = '';\n\n render(): TemplateResult {\n const deleteButtonClass = classMap({\n 'w-xs h-xs mr-xs rounded-full transition-colors flex-shrink-0': true,\n 'focus-outline-none focus-ring-2 ring-inset ring-error-50': true,\n 'text-tertiary hover-bg-error-10 hover-text-error': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n 'flex items-center justify-center': !this.readonly,\n 'hidden': this.readonly,\n });\n\n const itemClass = classMap({\n 'transition-colors h-m ml-s flex items-center': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'group-hover-divide-contrast-20': !this.disabled && !this.readonly,\n });\n\n const isAddButtonDisabled = this.disabled \|\| !this.__newItem;\n\n const addItem = () => {\n const newValue = [...this._value];\n const unit = this.renderRoot.querySelector('select')?.value;\n\n this.__newItem\n .split('\\n')\n .map(code => code.trim())\n .filter(code => code.length > 0)\n .forEach(value => {\n if (!newValue.some(item => item.value === value)) {\n newValue.push({ value, unit });\n }\n });\n\n this._value = newValue;\n this.__newItem = '';\n };\n\n return html`\n <div class=\"group\">\n <div\n class=${classMap({\n 'transition-colors mb-xs font-medium text-s': true,\n 'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n 'text-disabled': this.disabled,\n })}\n >\n ${this.label}\n </div>\n\n <div\n class=${classMap({\n 'border border-contrast-10 rounded transition-colors': true,\n 'group-hover-border-contrast-20': !this.disabled && !this.readonly,\n })}\n >\n <ol class=\"transition-colors divide-y divide-contrast-10 font-medium\">\n ${repeat(\n this._value,\n item => item.value,\n (item, index) => {\n return html`\n <li class=${itemClass}>\n <div class=\"flex-1 mr-s\">${item.label ?? item.value}</div>\n\n <button\n aria-label=${this.t('delete')}\n class=${deleteButtonClass}\n ?disabled=${this.disabled}\n @click=${() => {\n this._value = this._value.filter((_, i) => i !== index);\n }}\n >\n <iron-icon icon=\"lumo:cross\" class=\"icon-inline text-xl\"></iron-icon>\n </button>\n </li>\n `;\n }\n )}\n </ol>\n\n <div\n style=${this._value.length === 0\n ? 'border-radius: calc(var(--lumo-border-radius-m) - 1px)'\n : 'border-radius: 0 0 calc(var(--lumo-border-radius-m) - 1px) calc(var(--lumo-border-radius-m) - 1px)'}\n class=${classMap({\n 'transition-colors pl-s h-m flex items-center gap-xs': true,\n 'focus-within-ring-2 focus-within-ring-primary-50': true,\n 'bg-contrast-10 group-hover-bg-contrast-20': !this.disabled && !this.readonly,\n 'bg-contrast-5': this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n })}\n >\n ${this.range\n ? html`\n <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_from\">\n </foxy-i18n>\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem.split('..')[0] ?? '')}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n const newFrom = (evt.currentTarget as HTMLInputElement).value.trim();\n const oldTo = this.__newItem.split('..')[1] ?? '';\n this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n\n const newFrom = evt.clipboardData?.getData('text') ?? '';\n const oldTo = this.__newItem.split('..')[1] ?? '';\n this.__newItem = oldTo ? `${newFrom}..${oldTo}` : newFrom;\n\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n\n <foxy-i18n infer=\"\" class=\"text-disabled font-medium\" key=\"range_to\"></foxy-i18n>\n\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'bg-transparent appearance-none h-m font-medium focus-outline-none': true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem.split('..')[1] ?? '')}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n const newTo = (evt.currentTarget as HTMLInputElement).value.trim();\n const oldFrom = this.__newItem.split('..')[0] ?? '';\n this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n\n const newTo = evt.clipboardData?.getData('text') ?? '';\n const oldFrom = this.__newItem.split('..')[0] ?? '';\n this.__newItem = oldFrom ? `${oldFrom}..${newTo}` : newTo;\n\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n `\n : html`\n <input\n placeholder=${this.placeholder}\n class=${classMap({\n 'w-full bg-transparent appearance-none h-m font-medium focus-outline-none':\n true,\n 'text-disabled': this.disabled,\n })}\n list=\"list\"\n ...=${spread(this.inputParams)}\n .value=${live(this.__newItem)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && addItem()}\n @change=${(evt: Event) => evt.stopPropagation()}\n @input=${(evt: InputEvent) => {\n this.__newItem = (evt.currentTarget as HTMLInputElement).value.trim();\n }}\n @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n this.__newItem = evt.clipboardData?.getData('text') ?? '';\n addItem();\n }}\n @blur=${() => {\n this.__isErrorVisible = true;\n }}\n />\n `}\n\n <div\n class=${classMap({\n 'relative': true,\n 'hover-text-base focus-within-text-primary-contrast': !this.disabled,\n 'text-disabled': this.disabled,\n })}\n ?hidden=${this.units.length === 0}\n >\n <select\n style=\"min-width: 8rem\"\n class=${classMap({\n 'transition-colors rounded-s mx-xs px-s': true,\n 'bg-contrast-5 appearance-none h-xs font-medium focus-outline-none': true,\n 'hover-bg-contrast focus-bg-primary': !this.disabled,\n })}\n ?disabled=${this.disabled}\n >\n ${this.units.map(({ label, value }) => {\n return html`<option value=${value}>${label ?? value}</option>`;\n })}\n </select>\n </div>\n\n <datalist id=\"list\">\n ${this.options.map(({ label, value }) => {\n if (this._value.some(item => item.value === value)) return;\n return html`<option value=${value}>${label ?? value}</option>`;\n })}\n </datalist>\n\n <div class=\"mr-xs ml-auto\" ?hidden=${!this.__newItem}>\n <button\n aria-label=${this.t('submit')}\n class=${classMap({\n 'w-xs h-xs flex-shrink-0 ring-inset ring-success-50 focus-outline-none': true,\n 'flex items-center justify-center rounded-s transition-colors': true,\n 'bg-contrast-5 text-disabled cursor-default': isAddButtonDisabled,\n 'bg-contrast-5 text-body cursor-pointer': !isAddButtonDisabled,\n 'hover-bg-success hover-text-success-contrast': !isAddButtonDisabled,\n 'focus-ring-2': !isAddButtonDisabled,\n })}\n ?disabled=${isAddButtonDisabled}\n @click=${addItem}\n >\n <iron-icon icon=\"lumo:plus\" class=\"icon-inline text-l\"></iron-icon>\n </button>\n </div>\n </div>\n </div>\n\n <div\n class=${classMap({\n 'transition-colors mt-xs text-xs': true,\n 'text-secondary group-hover-text-body': !this.disabled && !this.readonly,\n 'text-disabled': this.disabled,\n })}\n ?hidden=${!this.helperText}\n >\n ${this.helperText}\n </div>\n\n <div\n class=\"mt-xs text-xs leading-xs text-error\"\n ?hidden=${!this.__isErrorVisible \|\| !this._errorMessage \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </div>\n </div>\n `;\n }\n\n protected get _value(): Item[] {\n return (super._value ?? []) as Item[];\n }\n\n protected set _value(newValue: Item[]) {\n super._value = newValue;\n }\n}\n"]}

package/dist/elements/internal/InternalEditableListControl/types.d.ts CHANGED Viewed

@@ -2,6 +2,11 @@ import type { TemplateResult } from 'lit-html';
 export declare type Item = {
     label?: string | TemplateResult;
     value: string;
+    unit?: string;
+};
+export declare type Unit = {
+    label?: string;
+    value: string;
 };
 export declare type Option = {
     label?: string;

package/dist/elements/internal/InternalEditableListControl/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TemplateResult } from 'lit-html';\n\nexport type Item = { label?: string \| TemplateResult; value: string };\nexport type Option = { label?: string; value: string };\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TemplateResult } from 'lit-html';\n\nexport type Item = { label?: string \| TemplateResult; value: string; unit?: string };\nexport type Unit = { label?: string; value: string };\nexport type Option = { label?: string; value: string };\n"]}

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

@@ -13,6 +13,7 @@ export declare class InternalFrequencyControl extends InternalEditableControl {
         value: string;
         label: string;
     }[];
+    max: number | null;
     private __i18n;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;

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

@@ -1,5 +1,6 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
 import { css, html } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined';
 /**
  * Internal control displaying a custom field for frequency input.
  *
@@ -15,6 +16,7 @@ export class InternalFrequencyControl extends InternalEditableControl {
             { value: 'm', label: 'month' },
             { value: 'y', label: 'year' },
         ];
+        this.max = 999;
         this.__i18n = {
             formatValue: inputValues => inputValues.join(''),
             parseValue: value => {
@@ -30,6 +32,7 @@ export class InternalFrequencyControl extends InternalEditableControl {
         return {
             ...super.properties,
             options: { attribute: false },
+            max: { type: Number },
         };
     }
     static get styles() {
@@ -94,7 +97,7 @@ vaadin-combo-box::part(text-field){
         }}
       >
         <vaadin-integer-field
-          max="999"
+          max=${ifDefined(this.max || undefined)}
           min="1"
           prevent-invalid-input
           has-controls

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":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;~~AAExC~~;;;;;GAKG;AACH,MAAM,OAAO,wBAAyB,SAAQ,uBAAuB;IAArE;;~~QAgDE~~,YAAO,GAAG;YACR,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE;YAC5B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE;YAC7B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE;YAC9B,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE;SAC9B,CAAC;~~QAEM~~,WAAM,GAAoB;YAChC,WAAW,EAAE,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;YAChD,UAAU,EAAE,KAAK,CAAC,EAAE;;gBAClB,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;gBACpE,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtF,MAAM,KAAK,SAAG,eAAe,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,mCAAI,EAAE,CAAC;gBAEhE,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;YAC9D,CAAC;SACF,CAAC;IAwDJ,CAAC;~~IAvHC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;~~SAC9B~~,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCF;SACF,CAAC;IACJ,CAAC;~~IAoBD~~,aAAa;;QACX,MAAM,KAAK,GAAG,OAAC,IAAI,CAAC,MAAM,mCAAI,EAAE,CAAW,CAAC;QAC5C,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAW,CAAC,CAAC;QACrE,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;YACpD,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC;YAC/B,KAAK;SACN,CAAC,CAAC,CAAC;QAEJ,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;wBACpB,MAAA,IAAI,CAAC,aAAa,mCAAI,EAAE;sBAC1B,IAAI,CAAC,UAAU;iBACpB,IAAI,CAAC,KAAK;iBACV,KAAK;gBACN,IAAI,CAAC,MAAM;kBACT,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAmC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,KAAe,CAAC;QACtC,CAAC~~;;;;;;;sBAOa~~,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;qBACd,CAAC,IAAI,CAAC,cAAc,EAAE;qBACtB,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;;;;;;;sBAOpE,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;qBACd,CAAC,IAAI,CAAC,cAAc,EAAE;mBACxB,KAAK;qBACH,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;;;;KAIrF,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAiC;;QACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QACnE,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM;YAAE,KAAK,CAAC,KAAK,GAAG,OAAC,IAAI,CAAC,MAAM,mCAAI,EAAE,CAAW,CAAC;IACxF,CAAC;CACF","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 } from 'lit-element';\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 options: { attribute: false },\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 ];\n }\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 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 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~~=\"999~~\"\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"]}
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 } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\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 options: { attribute: false },\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 ];\n }\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 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 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"]}

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

@@ -13,6 +13,4 @@ export declare class InternalIntegerControl extends InternalEditableControl {
     min: number | null;
     max: number | null;
     renderControl(): TemplateResult;
-    protected get _value(): number;
-    protected set _value(newValue: number);
 }

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

@@ -38,7 +38,7 @@ export class InternalIntegerControl extends InternalEditableControl {
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}
-        .value=${String(this._value)}
+        .value=${this._value}
         clear-button-visible
         @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
         @change=${(evt) => {
@@ -51,12 +51,5 @@ export class InternalIntegerControl extends InternalEditableControl {
       </vaadin-integer-field>
     `;
     }
-    get _value() {
-        var _a;
-        return (_a = super._value) !== null && _a !== void 0 ? _a : 0;
-    }
-    set _value(newValue) {
-        super._value = newValue;
-    }
 }
 //# sourceMappingURL=InternalIntegerControl.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalIntegerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalIntegerControl/InternalIntegerControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IAAnE;;QAWE,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAE7B,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;~~IAoC5B~~,CAAC;~~IApDC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAUD,aAAa;;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;cAEZ,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;cAChC,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;oBAC1B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,~~MAAM,CAAC,~~IAAI,CAAC,MAAM~~,CAAC~~;;~~mBAEjB~~,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAoC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,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,CAAC,CAAC;IACnD,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAA+B,CAAC;IACjD,CAAC;~~CACF","sourcesContent":["import type { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/*\n Internal control displaying a basic integer box.\n \n @since 1.17.0\n * @element foxy-internal-integer-control\n */\nexport class InternalIntegerControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n prefix: {},\n suffix: {},\n min: { type: Number },\n max: { type: Number },\n };\n }\n\n prefix: string \| null = null;\n\n suffix: string \| null = null;\n\n min: number \| null = null;\n\n max: number \| null = null;\n\n renderControl(): TemplateResult {\n return html`\n <vaadin-integer-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 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=${~~String(~~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 IntegerFieldElement;\n this._value = parseInt(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-integer-field>\n `;\n }\n~~\n protected get _value(): number {\n return (super._value as number \| undefined) ?? 0;\n~~ }\n~~\n protected set _value(newValue: number) {\n super._value = newValue as unknown \| undefined;\n }\n}\n~~"]}
1	+ {"version":3,"file":"InternalIntegerControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalIntegerControl/InternalIntegerControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC;;;;;GAKG;AACH,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IAAnE;;QAWE,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAE7B,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;IA4B5B,CAAC;IA5CC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAUD,aAAa;;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;cAEZ,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;cAChC,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;oBAC1B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;;mBAET,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAoC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,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;CACF","sourcesContent":["import type { IntegerFieldElement } from '@vaadin/vaadin-text-field/vaadin-integer-field';\nimport type { PropertyDeclarations, TemplateResult } from 'lit-element';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-element';\n\n/*\n Internal control displaying a basic integer box.\n \n @since 1.17.0\n * @element foxy-internal-integer-control\n */\nexport class InternalIntegerControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n prefix: {},\n suffix: {},\n min: { type: Number },\n max: { type: Number },\n };\n }\n\n prefix: string \| null = null;\n\n suffix: string \| null = null;\n\n min: number \| null = null;\n\n max: number \| null = null;\n\n renderControl(): TemplateResult {\n return html`\n <vaadin-integer-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 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 IntegerFieldElement;\n this._value = parseInt(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-integer-field>\n `;\n }\n}\n"]}

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

@@ -13,6 +13,4 @@ export declare class InternalNumberControl extends InternalEditableControl {
     min: number | null;
     max: number | null;
     renderControl(): TemplateResult;
-    protected get _value(): number;
-    protected set _value(newValue: number);
 }

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

@@ -38,7 +38,7 @@ export class InternalNumberControl extends InternalEditableControl {
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}
-        .value=${String(this._value)}
+        .value=${this._value}
         clear-button-visible
         @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
         @change=${(evt) => {
@@ -51,12 +51,5 @@ export class InternalNumberControl extends InternalEditableControl {
       </vaadin-number-field>
     `;
     }
-    get _value() {
-        var _a;
-        return (_a = super._value) !== null && _a !== void 0 ? _a : 0;
-    }
-    set _value(newValue) {
-        super._value = newValue;
-    }
 }
 //# sourceMappingURL=InternalNumberControl.js.map