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

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

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

Files changed (298) hide show

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 { 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"]}
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 layout: {},\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 layout: 'standalone' \| 'summary-item' \| null = null;\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 isSummaryItem = this.layout === 'summary-item';\n const isInteractive = !this.disabled && !this.readonly;\n\n const deleteButtonClass = classMap({\n 'w-xs h-xs rounded-s 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 'mr-xs': !isSummaryItem,\n });\n\n const itemClass = classMap({\n 'transition-colors flex items-center': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'group-hover-divide-contrast-20': !isSummaryItem && isInteractive,\n 'pl-s border border-contrast-10 rounded-s': isSummaryItem,\n 'ml-s h-m': !isSummaryItem,\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': true,\n 'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n 'text-disabled': !isSummaryItem && this.disabled,\n 'font-medium text-s': !isSummaryItem,\n 'text-m': isSummaryItem,\n })}\n >\n ${this.label}\n </div>\n\n <div\n class=${classMap({\n 'transition-colors': true,\n 'border border-contrast-10 rounded': !isSummaryItem,\n 'group-hover-border-contrast-20': !isSummaryItem && isInteractive,\n })}\n >\n <ol\n class=${classMap({\n 'transition-colors font-medium': true,\n 'divide-y divide-contrast-10': !isSummaryItem,\n 'flex flex-wrap gap-s': isSummaryItem,\n })}\n >\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=${isSummaryItem\n ? ''\n : 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': !isSummaryItem,\n 'bg-contrast-10 group-hover-bg-contrast-20': !isSummaryItem && isInteractive,\n 'bg-contrast-5': !isSummaryItem && this.disabled,\n 'flex': !this.readonly,\n 'hidden': this.readonly,\n 'rounded-s border border-contrast-10': isSummaryItem,\n 'mt-s': this._value.length > 0,\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 text-xs mt-xs': true,\n 'text-secondary group-hover-text-body': !isSummaryItem && isInteractive,\n 'text-disabled': !isSummaryItem && this.disabled,\n 'text-secondary': isSummaryItem,\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/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import '@vaadin-component-factory/vcf-tooltip';
 import '@vaadin/vaadin-icons';
 import '@polymer/iron-icon';
 import '../InternalEditableControl/index';

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

@@ -1,3 +1,4 @@
+import '@vaadin-component-factory/vcf-tooltip';
 import '@vaadin/vaadin-icons';
 import '@polymer/iron-icon';
 import "../InternalEditableControl/index.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAE5B,6CAA0C;AAE1C,OAAO,EAAE,2BAA2B,EAAE,yCAAsC;AAE5E,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,2BAA2B,CAAC,CAAC;AAE1F,OAAO,EAAE,2BAA2B,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-icons';\nimport '@polymer/iron-icon';\n\nimport '../InternalEditableControl/index';\n\nimport { InternalEditableListControl } from './InternalEditableListControl';\n\ncustomElements.define('foxy-internal-editable-list-control', InternalEditableListControl);\n\nexport { InternalEditableListControl };\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalEditableListControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAE5B,6CAA0C;AAE1C,OAAO,EAAE,2BAA2B,EAAE,yCAAsC;AAE5E,cAAc,CAAC,MAAM,CAAC,qCAAqC,EAAE,2BAA2B,CAAC,CAAC;AAE1F,OAAO,EAAE,2BAA2B,EAAE,CAAC","sourcesContent":["import '@vaadin-component-factory/vcf-tooltip';\nimport '@vaadin/vaadin-icons';\nimport '@polymer/iron-icon';\n\nimport '../InternalEditableControl/index';\n\nimport { InternalEditableListControl } from './InternalEditableListControl';\n\ncustomElements.define('foxy-internal-editable-list-control', InternalEditableListControl);\n\nexport { InternalEditableListControl };\n"]}

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

@@ -65,7 +65,7 @@ export class InternalForm extends Base {
         if (!this.href)
             alwaysMatch.unshift('delete', 'timestamps', 'submit');
         if (!this.in({ idle: { snapshot: 'dirty' } }))
-            alwaysMatch.unshift('undo');
+            alwaysMatch.unshift('undo', 'submit');
         return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
     /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/*\n An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n \n @element foxy-internal-form\n * @since 1.17.0\n /\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n /* Validation errors with this prefix will show up at the top of the form. /\n static generalErrorPrefix = 'error:';\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n status: { type: Object },\n };\n }\n\n /* Status message to render at the top of the form. If `null`, the message is hidden. /\n status: null \| Status = null;\n\n /\n Renders header actions when the optional header is rendered.\n * Empty by default.\n /\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n renderHeaderActions(data: TData): TemplateResult \| null {\n return null;\n }\n\n /* Getter that returns a i18n key for the optional form header title. /\n get headerTitleKey(): string {\n return 'title';\n }\n\n /* I18next options to pass to the header title translation function. /\n get headerTitleOptions(): Record<string, unknown> {\n return {\n ...this.data,\n context: this.data ? 'existing' : 'new',\n id: this.data ? getResourceId(this.data._links.self.href) : null,\n };\n }\n\n /* Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleKey(): string {\n return 'subtitle';\n }\n\n /* I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleOptions(): Record<string, unknown> {\n return this.data ?? {};\n }\n\n /* ID that will be written to clipboard when Copy ID button in header is clicked. /\n get headerCopyIdValue(): string \| number {\n return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n }\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch = [super.hiddenSelector.toString()];\n if (this.href) alwaysMatch.unshift('create');\n if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');\n if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n /\n Renders optional form header.\n * - Customize which actions are rendered with `.renderHeaderActions()` method.\n * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n * - To hide the header completely, add `header` to `hidden-controls` attribute.\n /\n renderHeader(): TemplateResult {\n if (this.hiddenSelector.matches('header', true)) return html``;\n\n const data = this.data;\n const actions = data ? this.renderHeaderActions(data) : null;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('header:before')}\n <h2>\n <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n <foxy-i18n\n options=${JSON.stringify(this.headerTitleOptions)}\n infer=\"header\"\n key=${this.headerTitleKey}\n >\n </foxy-i18n>\n ${data\n ? html`\n ${this.hiddenSelector.matches('header:copy-id', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-id\"\n class=\"text-m\"\n text=${this.headerCopyIdValue}\n >\n </foxy-copy-to-clipboard>\n `}\n ${this.hiddenSelector.matches('header:copy-json', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-json\"\n class=\"text-m\"\n icon=\"icons:code\"\n text=${JSON.stringify(data, null, 2)}\n >\n </foxy-copy-to-clipboard>\n `}\n `\n : ''}\n </span>\n ${data\n ? html`\n <foxy-i18n\n infer=\"header\"\n class=\"text-m text-secondary\"\n key=${this.headerSubtitleKey}\n .options=${this.headerSubtitleOptions}\n >\n </foxy-i18n>\n ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n `\n : ''}\n </h2>\n ${this.renderTemplateOrSlot('header:after')}\n </div>\n `;\n }\n\n /\n Renders form body. This is the method you should implement in your forms\n * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n * don't forget to add `super.renderBody()` to your template.\n /\n renderBody(): TemplateResult {\n const nested = ['delete', 'undo', 'submit', 'create'];\n\n return html`\n <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n\n <div class=\"flex gap-m\" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>\n <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n\n <div class=\"w-full\"></div>\n\n <foxy-internal-undo-control infer=\"undo\"> </foxy-internal-undo-control>\n <foxy-internal-submit-control infer=\"submit\"> </foxy-internal-submit-control>\n <foxy-internal-submit-control infer=\"create\" theme=\"primary success\">\n </foxy-internal-submit-control>\n </div>\n `;\n }\n\n /\n Renders the entire form. You should probably implement `.renderBody()`\n * instead of this method in your form to keep the spinner and the common layout features.\n */\n render(): TemplateResult {\n const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) \|\| !this.data);\n\n return html`\n <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n <div\n class=${classMap({\n 'space-y-m': true,\n 'transition-opacity': true,\n 'opacity-0 pointer-events-none': isSpinnerVisible,\n })}\n >\n ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'flex flex-col items-center justify-center gap-m': true,\n 'transition-opacity absolute inset-0': true,\n 'opacity-0 pointer-events-none': !isSpinnerVisible,\n })}\n >\n <foxy-spinner\n layout=${this.in('fail') ? 'vertical' : 'no-label'}\n state=${this.in('fail') ? 'error' : 'busy'}\n infer=\"spinner\"\n >\n </foxy-spinner>\n ${this.href && this.in('fail')\n ? html`\n <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n </vaadin-button>\n `\n : ''}\n </div>\n </div>\n `;\n }\n\n private get __generalErrors() {\n const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n return this.errors.filter(v => v.startsWith(prefix));\n }\n\n private __renderGeneralError(err: string) {\n return html`\n <foxy-i18n\n class=\"leading-xs text-body rounded bg-error-10 block\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n infer=\"error\"\n key=${err.replace('error:', '')}\n >\n </foxy-i18n>\n `;\n }\n\n private __renderStatus({ key, options }: Status) {\n if (this.hiddenSelector.matches('status', true)) return;\n return html`\n <p\n data-testid=\"status\"\n class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n <vaadin-button\n class=\"flex-shrink-0\"\n theme=\"success tertiary-inline\"\n @click=${() => (this.status = null)}\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n </vaadin-button>\n </p>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalForm.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/InternalForm.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyDeclarations } from 'lit-element';\nimport type { HALJSONResource } from '../../public/NucleonElement/types';\nimport type { TemplateResult } from 'lit-html';\nimport type { Status } from './types';\n\nimport { BooleanSelector, getResourceId } from '@foxy.io/sdk/core';\nimport { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { classMap } from '../../../utils/class-map';\nimport { html } from 'lit-html';\n\nconst Base = ConfigurableMixin(ThemeableMixin(NucleonElement));\n\n/*\n An internal base class for any nucleon-powered form. Renders create/delete\n * buttons and timestamps by default, displays a spinner in non-idle states.\n \n @element foxy-internal-form\n * @since 1.17.0\n /\nexport class InternalForm<TData extends HALJSONResource> extends Base<TData> {\n /* Validation errors with this prefix will show up at the top of the form. /\n static generalErrorPrefix = 'error:';\n\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n status: { type: Object },\n };\n }\n\n /* Status message to render at the top of the form. If `null`, the message is hidden. /\n status: null \| Status = null;\n\n /\n Renders header actions when the optional header is rendered.\n * Empty by default.\n /\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n renderHeaderActions(data: TData): TemplateResult \| null {\n return null;\n }\n\n /* Getter that returns a i18n key for the optional form header title. /\n get headerTitleKey(): string {\n return 'title';\n }\n\n /* I18next options to pass to the header title translation function. /\n get headerTitleOptions(): Record<string, unknown> {\n return {\n ...this.data,\n context: this.data ? 'existing' : 'new',\n id: this.data ? getResourceId(this.data._links.self.href) : null,\n };\n }\n\n /* Getter that returns a i18n key for the optional form header subtitle. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleKey(): string {\n return 'subtitle';\n }\n\n /* I18next options to pass to the header subtitle translation function. Note that subtitle is shown only when data is avaiable. /\n get headerSubtitleOptions(): Record<string, unknown> {\n return this.data ?? {};\n }\n\n /* ID that will be written to clipboard when Copy ID button in header is clicked. /\n get headerCopyIdValue(): string \| number {\n return this.data ? getResourceId(this.data._links.self.href) ?? '' : '';\n }\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch = [super.hiddenSelector.toString()];\n if (this.href) alwaysMatch.unshift('create');\n if (!this.href) alwaysMatch.unshift('delete', 'timestamps', 'submit');\n if (!this.in({ idle: { snapshot: 'dirty' } })) alwaysMatch.unshift('undo', 'submit');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n /\n Renders optional form header.\n * - Customize which actions are rendered with `.renderHeaderActions()` method.\n * - Customize the header title and subtitle with `.headerTitleKey` and `.headerSubtitleKey` getters.\n * - Customize the header title and subtitle options with `.headerTitleOptions` and `.headerSubtitleOptions` getters.\n * - To hide the header completely, add `header` to `hidden-controls` attribute.\n /\n renderHeader(): TemplateResult {\n if (this.hiddenSelector.matches('header', true)) return html``;\n\n const data = this.data;\n const actions = data ? this.renderHeaderActions(data) : null;\n\n return html`\n <div>\n ${this.renderTemplateOrSlot('header:before')}\n <h2>\n <span class=\"flex items-center gap-s leading-xs text-xl font-medium break-all\">\n <foxy-i18n\n options=${JSON.stringify(this.headerTitleOptions)}\n infer=\"header\"\n key=${this.headerTitleKey}\n >\n </foxy-i18n>\n ${data\n ? html`\n ${this.hiddenSelector.matches('header:copy-id', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-id\"\n class=\"text-m\"\n text=${this.headerCopyIdValue}\n >\n </foxy-copy-to-clipboard>\n `}\n ${this.hiddenSelector.matches('header:copy-json', true)\n ? ''\n : html`\n <foxy-copy-to-clipboard\n infer=\"header copy-json\"\n class=\"text-m\"\n icon=\"icons:code\"\n text=${JSON.stringify(data, null, 2)}\n >\n </foxy-copy-to-clipboard>\n `}\n `\n : ''}\n </span>\n ${data\n ? html`\n <foxy-i18n\n infer=\"header\"\n class=\"text-m text-secondary\"\n key=${this.headerSubtitleKey}\n .options=${this.headerSubtitleOptions}\n >\n </foxy-i18n>\n ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n `\n : ''}\n </h2>\n ${this.renderTemplateOrSlot('header:after')}\n </div>\n `;\n }\n\n /\n Renders form body. This is the method you should implement in your forms\n * instead of `.render()`. If you'd like to keep the submit button and the timestamps,\n * don't forget to add `super.renderBody()` to your template.\n /\n renderBody(): TemplateResult {\n const nested = ['delete', 'undo', 'submit', 'create'];\n\n return html`\n <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n\n <div class=\"flex gap-m\" ?hidden=${nested.every(v => this.hiddenSelector.matches(v, true))}>\n <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n\n <div class=\"w-full\"></div>\n\n <foxy-internal-undo-control infer=\"undo\"> </foxy-internal-undo-control>\n <foxy-internal-submit-control infer=\"submit\"> </foxy-internal-submit-control>\n <foxy-internal-submit-control infer=\"create\" theme=\"primary success\">\n </foxy-internal-submit-control>\n </div>\n `;\n }\n\n /\n Renders the entire form. You should probably implement `.renderBody()`\n * instead of this method in your form to keep the spinner and the common layout features.\n */\n render(): TemplateResult {\n const isSpinnerVisible = !this.in('idle') && (!this.in({ busy: 'fetching' }) \|\| !this.data);\n\n return html`\n <div aria-busy=${this.in('busy')} aria-live=\"polite\" class=\"relative\">\n <div\n class=${classMap({\n 'space-y-m': true,\n 'transition-opacity': true,\n 'opacity-0 pointer-events-none': isSpinnerVisible,\n })}\n >\n ${this.__generalErrors.map(err => this.__renderGeneralError(err))}\n ${this.status ? this.__renderStatus(this.status) : ''} ${this.renderBody()}\n </div>\n\n <div\n data-testid=\"spinner\"\n class=${classMap({\n 'flex flex-col items-center justify-center gap-m': true,\n 'transition-opacity absolute inset-0': true,\n 'opacity-0 pointer-events-none': !isSpinnerVisible,\n })}\n >\n <foxy-spinner\n layout=${this.in('fail') ? 'vertical' : 'no-label'}\n state=${this.in('fail') ? 'error' : 'busy'}\n infer=\"spinner\"\n >\n </foxy-spinner>\n ${this.href && this.in('fail')\n ? html`\n <vaadin-button theme=\"small contrast\" @click=${() => this.refresh()}>\n <foxy-i18n infer=\"spinner\" key=\"refresh\"></foxy-i18n>\n </vaadin-button>\n `\n : ''}\n </div>\n </div>\n `;\n }\n\n private get __generalErrors() {\n const prefix = (this.constructor as typeof InternalForm).generalErrorPrefix;\n return this.errors.filter(v => v.startsWith(prefix));\n }\n\n private __renderGeneralError(err: string) {\n return html`\n <foxy-i18n\n class=\"leading-xs text-body rounded bg-error-10 block\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n infer=\"error\"\n key=${err.replace('error:', '')}\n >\n </foxy-i18n>\n `;\n }\n\n private __renderStatus({ key, options }: Status) {\n if (this.hiddenSelector.matches('status', true)) return;\n return html`\n <p\n data-testid=\"status\"\n class=\"leading-xs text-body rounded bg-success-10 flex items-start gap-m\"\n style=\"padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)\"\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=${key} .options=${options}></foxy-i18n>\n <vaadin-button\n class=\"flex-shrink-0\"\n theme=\"success tertiary-inline\"\n @click=${() => (this.status = null)}\n >\n <foxy-i18n class=\"flex-1\" infer=\"status\" key=\"close\"></foxy-i18n>\n </vaadin-button>\n </p>\n `;\n }\n}\n"]}

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

@@ -9,12 +9,15 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
 export declare class InternalFrequencyControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     static get styles(): CSSResultArray;
+    allowTwiceAMonth: boolean;
     options: {
         value: string;
         label: string;
     }[];
+    layout: 'summary-item' | 'standalone' | null;
     max: number | null;
     private __i18n;
     renderControl(): TemplateResult;
     updated(changes: Map<keyof this, unknown>): void;
+    private __renderSummaryItemLayout;
 }

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

@@ -1,6 +1,7 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
-import { css, html } from 'lit-element';
+import { css, html, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from "../../../utils/class-map.js";
 /**
  * Internal control displaying a custom field for frequency input.
  *
@@ -10,12 +11,14 @@ import { ifDefined } from 'lit-html/directives/if-defined';
 export class InternalFrequencyControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.allowTwiceAMonth = false;
         this.options = [
             { value: 'd', label: 'day' },
             { value: 'w', label: 'week' },
             { value: 'm', label: 'month' },
             { value: 'y', label: 'year' },
         ];
+        this.layout = null;
         this.max = 999;
         this.__i18n = {
             formatValue: inputValues => inputValues.join(''),
@@ -31,7 +34,9 @@ export class InternalFrequencyControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            allowTwiceAMonth: { type: Boolean, attribute: 'allow-twice-a-month' },
             options: { attribute: false },
+            layout: {},
             max: { type: Number },
         };
     }
@@ -70,11 +75,23 @@ vaadin-integer-field{
 vaadin-combo-box::part(text-field){
   padding:0;
 }
+input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button{
+  -webkit-appearance:none;
+  margin:0;
+}
+input{
+  -moz-appearance:textfield;
+}
       `,
         ];
     }
     renderControl() {
         var _a, _b;
+        if (this.layout === 'summary-item')
+            return this.__renderSummaryItemLayout();
         const value = ((_a = this._value) !== null && _a !== void 0 ? _a : '');
         const count = parseFloat(this.__i18n.parseValue(value)[0]);
         const items = this.options.map(({ value, label }) => ({
@@ -128,5 +145,115 @@ vaadin-combo-box::part(text-field){
         if (field && field.value !== this._value)
             field.value = ((_a = this._value) !== null && _a !== void 0 ? _a : '');
     }
+    __renderSummaryItemLayout() {
+        var _a, _b;
+        const value = ((_a = this._value) !== null && _a !== void 0 ? _a : '');
+        const [strCount, units] = this.__i18n.parseValue(value);
+        const count = parseFloat(strCount);
+        const selection = this._value === '.5m' && !this.allowTwiceAMonth
+            ? 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="flex-1 flex items-center gap-xs">
+          <input
+            placeholder=${this.placeholder}
+            inputmode="numeric"
+            style="min-width: 10ch"
+            class=${classMap({
+            'w-full appearance-none text-right bg-transparent transition-colors': true,
+            'text-m rounded-s focus-outline-none': true,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'font-medium': !this.readonly,
+        })}
+            type="number"
+            step="1"
+            min="1"
+            max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : void 0)}
+            id="input"
+            .value=${value === '.5m' ? (this.allowTwiceAMonth ? 2 : '') : count}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
+            @input=${(evt) => {
+            evt.stopPropagation();
+            const input = evt.currentTarget;
+            this._value = this.__i18n.formatValue([input.value, units]);
+        }}
+          />
+          <div
+            class=${classMap({
+            'relative rounded-s transition-colors transition-opacity': 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 class="whitespace-nowrap">
+                ${value === '.5m'
+            ? this.t('times_a_month')
+            : selection
+                ? this.t(selection.label, { count })
+                : this.t('select')}
+              </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>
+            <select
+              class=${classMap({
+            'absolute inset-0 opacity-0': true,
+            'cursor-pointer': !this.disabled && !this.readonly,
+        })}
+              id="select"
+              ?disabled=${this.disabled}
+              ?hidden=${this.readonly}
+              @change=${(evt) => {
+            evt.stopPropagation();
+            const value = evt.currentTarget.value;
+            if (value === 'times_a_month') {
+                this._value = '.5m';
+            }
+            else {
+                this._value = this.__i18n.formatValue([count, value]);
+            }
+        }}
+            >
+              <option value="" ?selected=${!selection} disabled hidden>${this.t('select')}</option>
+              ${this.allowTwiceAMonth && (count === 2 || value === '.5m')
+            ? html `
+                    <option value="times_a_month" ?selected=${value === '.5m'}>
+                      ${this.t('times_a_month')}
+                    </option>
+                  `
+            : ''}
+              ${this.options.map(option => html `
+                    <option
+                      value=${option.value}
+                      ?selected=${value !== '.5m' && option.value === (selection === null || selection === void 0 ? void 0 : selection.value)}
+                    >
+                      ${this.t(option.label, { count })}
+                    </option>
+                  `)}
+            </select>
+          </div>
+        </div>
+      </div>
+    `;
+    }
 }
 //# sourceMappingURL=InternalFrequencyControl.js.map

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;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;;;;GAKG;AACH,MAAM,OAAO,wBAAyB,SAAQ,uBAAuB;IAArE;;QAiDE,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;QAEF,QAAG,GAAkB,GAAG,CAAC;QAEjB,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;IA1HC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YAC7B,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCF;SACF,CAAC;IACJ,CAAC;IAsBD,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;;;gBAGO,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,SAAS,CAAC;;;;sBAI1B,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';\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"]}
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"]}

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

@@ -1,4 +1,4 @@
-import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
  * Internal control displaying a basic number box.
@@ -8,9 +8,12 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  */
 export declare class InternalNumberControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    static get styles(): CSSResultArray;
+    layout: 'summary-item' | 'standalone' | null;
     prefix: string | null;
     suffix: string | null;
     min: number | null;
     max: number | null;
     renderControl(): TemplateResult;
+    private __renderSummaryItemLayout;
 }

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

@@ -1,6 +1,7 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
+import { html, css, svg } from 'lit-element';
 import { ifDefined } from 'lit-html/directives/if-defined';
-import { html } from 'lit-element';
+import { classMap } from "../../../utils/class-map.js";
 /**
  * Internal control displaying a basic number box.
  *
@@ -10,6 +11,7 @@ import { html } from 'lit-element';
 export class InternalNumberControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.layout = null;
         this.prefix = null;
         this.suffix = null;
         this.min = null;
@@ -18,14 +20,40 @@ export class InternalNumberControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            layout: {},
             prefix: {},
             suffix: {},
             min: { type: Number },
             max: { type: Number },
         };
     }
+    static get styles() {
+        return [
+            ...super.styles,
+            css `input::-webkit-contacts-auto-fill-button{
+  visibility:hidden;
+  display:none !important;
+  pointer-events:none;
+  position:absolute;
+  right:0;
+}
+input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button{
+  -webkit-appearance:none;
+  margin:0;
+}
+input{
+  -moz-appearance:textfield;
+}
+      `,
+        ];
+    }
     renderControl() {
         var _a, _b;
+        if (this.layout === 'summary-item')
+            return this.__renderSummaryItemLayout();
         return html `
       <vaadin-number-field
         error-message=${ifDefined(this._errorMessage)}
@@ -51,5 +79,77 @@ export class InternalNumberControl extends InternalEditableControl {
       </vaadin-number-field>
     `;
     }
+    __renderSummaryItemLayout() {
+        var _a, _b;
+        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.disabled || this.readonly}>
+            ${this._errorMessage}
+          </p>
+        </div>
+        <div class="flex-1 flex items-center gap-xs">
+          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
+            ${this.prefix}
+          </span>
+          <input
+            placeholder=${this.placeholder}
+            style="min-width: 10ch"
+            class=${classMap({
+            'w-full appearance-none text-right bg-transparent transition-colors': true,
+            'text-m rounded-s focus-outline-none': true,
+            'text-secondary': this.readonly,
+            'text-disabled': this.disabled,
+            'font-medium': !this.readonly,
+        })}
+            type="number"
+            min=${ifDefined((_a = this.min) !== null && _a !== void 0 ? _a : void 0)}
+            max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : void 0)}
+            id="input"
+            .value=${this._value === 0 ? '' : this._value}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @keydown=${(evt) => { var _a; return evt.key === 'Enter' && ((_a = this.nucleon) === null || _a === void 0 ? void 0 : _a.submit()); }}
+            @input=${(evt) => {
+            evt.stopPropagation();
+            this._value = evt.target.value;
+        }}
+          />
+          <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
+            ${this.suffix}
+          </span>
+          <button
+            aria-label=${this.t('clear')}
+            class=${classMap({
+            'flex-shrink-0 rounded-full transition-colors': true,
+            'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+            'cursor-pointer text-tertiary hover-text-body': !this.disabled,
+            'cursor-default text-disabled': this.disabled,
+        })}
+            style="width: 1em; height: 1em;"
+            ?disabled=${this.disabled}
+            ?hidden=${this.readonly || !this._value}
+            @click=${() => {
+            this._value = 0;
+            this.dispatchEvent(new CustomEvent('clear'));
+        }}
+          >
+            ${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>
+    `;
+    }
 }
 //# sourceMappingURL=InternalNumberControl.js.map