npm - @foxy.io/elements - Versions diffs - 1.27.0-beta.4 → 1.27.0-beta.6 - Mend

@foxy.io/elements 1.27.0-beta.4 → 1.27.0-beta.6

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

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,14 +65,16 @@ export class InternalEditableListControl extends InternalEditableControl {
         });
         const isAddButtonDisabled = this.disabled || !this.__newItem;
         const addItem = () => {
+            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 });
+                    newValue.push({ value, unit });
                 }
             });
             this._value = newValue;
@@ -94,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,
@@ -102,29 +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();
-        }}
-              @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();
-        }}
-            />
+              ?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 }) => {
@@ -134,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,
         })}
@@ -160,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 const newValue = [...this._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 });\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': 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 @paste=${(evt: ClipboardEvent) => {\n evt.preventDefault();\n this.__newItem = evt.clipboardData?.getData('text') ?? '';\n addItem();\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":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEhD,MAAM,OAAO,2BAA4B,SAAQ,uBAAuB;IAAxE;;QAqCE,gBAAW,GAA4B,EAAE,CAAC;QAE1C,YAAO,GAAa,EAAE,CAAC;QAEvB,UAAK,GAAW,EAAE,CAAC;QAEnB,UAAK,GAAsB,IAAI,CAAC;QAExB,qBAAgB,GAAG,KAAK,CAAC;QAEzB,cAAS,GAAG,EAAE,CAAC;IAiRzB,CAAC;IA/TC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,WAAW,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YACjC,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACtB,KAAK,EAAE,EAAE;YACT,gBAAgB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;YACtC,SAAS,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;SAChC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;;;;;;;;;;OAiBF;SACF,CAAC;IACJ,CAAC;IAcD,MAAM;;QACJ,MAAM,iBAAiB,GAAG,QAAQ,CAAC;YACjC,8DAA8D,EAAE,IAAI;YACpE,0DAA0D,EAAE,IAAI;YAChE,kDAAkD,EAAE,CAAC,IAAI,CAAC,QAAQ;YAClE,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ;YAClD,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,QAAQ,CAAC;YACzB,8CAA8C,EAAE,IAAI;YACpD,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,gCAAgC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;SACnE,CAAC,CAAC;QAEH,MAAM,mBAAmB,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAE7D,MAAM,OAAO,GAAG,GAAG,EAAE;;YACnB,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;YAClC,MAAM,IAAI,SAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,0CAAE,KAAK,CAAC;YAE5D,IAAI,CAAC,SAAS;iBACX,KAAK,CAAC,IAAI,CAAC;iBACX,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;iBACxB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC/B,OAAO,CAAC,KAAK,CAAC,EAAE;gBACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE;oBAChD,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;iBAChC;YACH,CAAC,CAAC,CAAC;YAEL,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;YACvB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACtB,CAAC,CAAC;QAEF,OAAO,IAAI,CAAA;;;kBAGG,QAAQ,CAAC;YACf,4CAA4C,EAAE,IAAI;YAClD,sCAAsC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YACxE,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,CAAC;;YAEA,IAAI,CAAC,KAAK;;;;kBAIJ,QAAQ,CAAC;YACf,qDAAqD,EAAE,IAAI;YAC3D,gCAAgC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;SACnE,CAAC;;;cAGE,MAAM,CACN,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAClB,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YACd,OAAO,IAAI,CAAA;8BACG,SAAS;+CACQ,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK;;;mCAGpC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;8BACrB,iBAAiB;kCACb,IAAI,CAAC,QAAQ;+BAChB,GAAG,EAAE;gBACZ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAC1D,CAAC;;;;;iBAKN,CAAC;QACJ,CAAC,CACF;;;;oBAIO,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAC9B,CAAC,CAAC,wDAAwD;YAC1D,CAAC,CAAC,oGAAoG;oBAChG,QAAQ,CAAC;YACf,qDAAqD,EAAE,IAAI;YAC3D,kDAAkD,EAAE,IAAI;YACxD,2CAA2C,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC7E,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;;cAEA,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;;;;kCAKc,IAAI,CAAC,WAAW;4BACtB,QAAQ,CAAC;gBACf,mEAAmE,EAAE,IAAI;gBACzE,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,CAAC;;0BAEI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;6BACrB,IAAI,OAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;gCACtC,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,QAAQ;+BACd,CAAC,GAAkB,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE;8BACzD,CAAC,GAAU,EAAE,EAAE,CAAC,GAAG,CAAC,eAAe,EAAE;6BACtC,CAAC,GAAe,EAAE,EAAE;;gBAC3B,MAAM,OAAO,GAAI,GAAG,CAAC,aAAkC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACrE,MAAM,KAAK,SAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;gBAClD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YAC5D,CAAC;6BACQ,CAAC,GAAmB,EAAE,EAAE;;gBAC/B,GAAG,CAAC,cAAc,EAAE,CAAC;gBAErB,MAAM,OAAO,eAAG,GAAG,CAAC,aAAa,0CAAE,OAAO,CAAC,MAAM,oCAAK,EAAE,CAAC;gBACzD,MAAM,KAAK,SAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;gBAClD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;gBAE1D,OAAO,EAAE,CAAC;YACZ,CAAC;4BACO,GAAG,EAAE;gBACX,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC/B,CAAC;;;;;;kCAMa,IAAI,CAAC,WAAW;4BACtB,QAAQ,CAAC;gBACf,mEAAmE,EAAE,IAAI;gBACzE,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,CAAC;;0BAEI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;6BACrB,IAAI,OAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;gCACtC,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,QAAQ;+BACd,CAAC,GAAkB,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE;8BACzD,CAAC,GAAU,EAAE,EAAE,CAAC,GAAG,CAAC,eAAe,EAAE;6BACtC,CAAC,GAAe,EAAE,EAAE;;gBAC3B,MAAM,KAAK,GAAI,GAAG,CAAC,aAAkC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACnE,MAAM,OAAO,SAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;gBACpD,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC5D,CAAC;6BACQ,CAAC,GAAmB,EAAE,EAAE;;gBAC/B,GAAG,CAAC,cAAc,EAAE,CAAC;gBAErB,MAAM,KAAK,eAAG,GAAG,CAAC,aAAa,0CAAE,OAAO,CAAC,MAAM,oCAAK,EAAE,CAAC;gBACvD,MAAM,OAAO,SAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;gBACpD,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;gBAE1D,OAAO,EAAE,CAAC;YACZ,CAAC;4BACO,GAAG,EAAE;gBACX,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC/B,CAAC;;iBAEJ;YACH,CAAC,CAAC,IAAI,CAAA;;kCAEc,IAAI,CAAC,WAAW;4BACtB,QAAQ,CAAC;gBACf,0EAA0E,EACxE,IAAI;gBACN,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,CAAC;;0BAEI,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;6BACrB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;gCACjB,IAAI,CAAC,QAAQ;gCACb,IAAI,CAAC,QAAQ;+BACd,CAAC,GAAkB,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,OAAO,IAAI,OAAO,EAAE;8BACzD,CAAC,GAAU,EAAE,EAAE,CAAC,GAAG,CAAC,eAAe,EAAE;6BACtC,CAAC,GAAe,EAAE,EAAE;gBAC3B,IAAI,CAAC,SAAS,GAAI,GAAG,CAAC,aAAkC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACxE,CAAC;6BACQ,CAAC,GAAmB,EAAE,EAAE;;gBAC/B,GAAG,CAAC,cAAc,EAAE,CAAC;gBACrB,IAAI,CAAC,SAAS,eAAG,GAAG,CAAC,aAAa,0CAAE,OAAO,CAAC,MAAM,oCAAK,EAAE,CAAC;gBAC1D,OAAO,EAAE,CAAC;YACZ,CAAC;4BACO,GAAG,EAAE;gBACX,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;YAC/B,CAAC;;iBAEJ;;;sBAGK,QAAQ,CAAC;YACf,UAAU,EAAE,IAAI;YAChB,oDAAoD,EAAE,CAAC,IAAI,CAAC,QAAQ;YACpE,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,CAAC;wBACQ,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;;;;wBAIvB,QAAQ,CAAC;YACf,wCAAwC,EAAE,IAAI;YAC9C,mEAAmE,EAAE,IAAI;YACzE,oCAAoC,EAAE,CAAC,IAAI,CAAC,QAAQ;SACrD,CAAC;4BACU,IAAI,CAAC,QAAQ;;kBAEvB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;YACpC,OAAO,IAAI,CAAA,iBAAiB,KAAK,IAAI,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,WAAW,CAAC;QACjE,CAAC,CAAC;;;;;gBAKF,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;YACtC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;gBAAE,OAAO;YAC3D,OAAO,IAAI,CAAA,iBAAiB,KAAK,IAAI,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,WAAW,CAAC;QACjE,CAAC,CAAC;;;iDAGiC,CAAC,IAAI,CAAC,SAAS;;6BAEnC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;wBACrB,QAAQ,CAAC;YACf,uEAAuE,EAAE,IAAI;YAC7E,8DAA8D,EAAE,IAAI;YACpE,4CAA4C,EAAE,mBAAmB;YACjE,wCAAwC,EAAE,CAAC,mBAAmB;YAC9D,8CAA8C,EAAE,CAAC,mBAAmB;YACpE,cAAc,EAAE,CAAC,mBAAmB;SACrC,CAAC;4BACU,mBAAmB;yBACtB,OAAO;;;;;;;;;kBASd,QAAQ,CAAC;YACf,iCAAiC,EAAE,IAAI;YACvC,sCAAsC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YACxE,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,CAAC;oBACQ,CAAC,IAAI,CAAC,UAAU;;YAExB,IAAI,CAAC,UAAU;;;;;oBAKP,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;;YAEvF,IAAI,CAAC,aAAa;;;KAGzB,CAAC;IACJ,CAAC;IAED,IAAc,MAAM;;QAClB,OAAO,OAAC,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAW,CAAC;IACxC,CAAC;IAED,IAAc,MAAM,CAAC,QAAgB;QACnC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;IAC1B,CAAC;CACF","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/InternalForm/InternalForm.d.ts CHANGED Viewed

@@ -19,6 +19,16 @@ export declare class InternalForm<TData extends HALJSONResource> extends Base<TD
     static get properties(): PropertyDeclarations;
     /** Status message to render at the top of the form. If `null`, the message is hidden. */
     status: null | Status;
+    /**
+     * Renders header actions when the optional header is rendered.
+     * Empty by default.
+     */
+    renderHeaderActions(data: TData): TemplateResult | null;
+    /**
+     * Renders optional form header with ID, last update timestamp and actions list (snapshot-only).
+     * Customize which actions are rendered with `.renderHeaderActions()` method.
+     */
+    renderHeader(): TemplateResult;
     /**
      * Renders form body. This is the method you should implement in your forms
      * instead of `.render()`. If you'd like to keep the submit button and the timestamps,

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

@@ -1,6 +1,7 @@
 import { ConfigurableMixin } from "../../../mixins/configurable.js";
 import { ThemeableMixin } from "../../../mixins/themeable.js";
 import { NucleonElement } from "../../public/NucleonElement/NucleonElement.js";
+import { getResourceId } from '@foxy.io/sdk/core';
 import { classMap } from "../../../utils/class-map.js";
 import { html } from 'lit-html';
 const Base = ConfigurableMixin(ThemeableMixin(NucleonElement));
@@ -23,6 +24,49 @@ export class InternalForm extends Base {
             status: { type: Object },
         };
     }
+    /**
+     * Renders header actions when the optional header is rendered.
+     * Empty by default.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    renderHeaderActions(data) {
+        return null;
+    }
+    /**
+     * Renders optional form header with ID, last update timestamp and actions list (snapshot-only).
+     * Customize which actions are rendered with `.renderHeaderActions()` method.
+     */
+    renderHeader() {
+        const data = this.data;
+        const actions = data ? this.renderHeaderActions(data) : null;
+        const id = data ? getResourceId(data._links.self.href) : '';
+        return html `
+      <h2>
+        <span class="flex items-center gap-s leading-xs text-xxl font-medium break-all">
+          <foxy-i18n infer="header" key=${data ? 'title_existing' : 'title_new'} .options=${{ id }}>
+          </foxy-i18n>
+          ${data
+            ? html `
+                <foxy-copy-to-clipboard infer="header" class="text-m" text=${id}>
+                </foxy-copy-to-clipboard>
+              `
+            : ''}
+        </span>
+        ${data
+            ? html `
+              <foxy-i18n
+                infer="header"
+                class="text-l text-secondary"
+                key="subtitle"
+                .options=${data}
+              >
+              </foxy-i18n>
+              ${actions ? html `<div class="mt-xs flex gap-m">${actions}</div>` : ''}
+            `
+            : ''}
+      </h2>
+    `;
+    }
     /**
      * Renders form body. This is the method you should implement in your forms
      * instead of `.render()`. If you'd like to keep the submit button and the timestamps,

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":"AAKA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,cAAc,EAAE,sDAAmD;AAC5E,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,IAAI,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,OAAO,YAA4C,SAAQ,IAAW;IAA5E;;QAWE,yFAAyF;QACzF,WAAM,GAAkB,IAAI,CAAC;~~IAiG~~/B,CAAC;~~IAzGC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAKD;;;;OAIG;IACH,UAAU;QACR,OAAO,IAAI,CAAC,IAAI;YACd,CAAC,CAAC,IAAI,CAAA;;;SAGH;YACH,CAAC,CAAC,IAAI,CAAA,8EAA8E,CAAC;IACzF,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5F,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;;kBAEpB,QAAQ,CAAC;YACf,WAAW,EAAE,IAAI;YACjB,oBAAoB,EAAE,IAAI;YAC1B,+BAA+B,EAAE,gBAAgB;SAClD,CAAC;;YAEA,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE;;;;;kBAKlE,QAAQ,CAAC;YACf,iDAAiD,EAAE,IAAI;YACvD,qCAAqC,EAAE,IAAI;YAC3C,+BAA+B,EAAE,CAAC,gBAAgB;SACnD,CAAC;;;qBAGS,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;oBAC1C,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;YAI1C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;YAC5B,CAAC,CAAC,IAAI,CAAA;+DAC6C,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;;;eAGpE;YACH,CAAC,CAAC,EAAE;;;KAGX,CAAC;IACJ,CAAC;IAED,IAAY,eAAe;QACzB,MAAM,MAAM,GAAI,IAAI,CAAC,WAAmC,CAAC,kBAAkB,CAAC;QAC5E,OAAO,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IACvD,CAAC;IAEO,oBAAoB,CAAC,GAAW;QACtC,OAAO,IAAI,CAAA;;;;;cAKD,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC;;;KAGlC,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,EAAE,GAAG,EAAE,OAAO,EAAU;QAC7C,OAAO,IAAI,CAAA;;;;;;uDAMwC,GAAG,aAAa,OAAO;;;;mBAI3D,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;;;;;KAKxC,CAAC;IACJ,CAAC;;~~AA3GD~~,8EAA8E;AACvE,+BAAkB,GAAG,QAAQ,CAAC","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 { 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 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 return this.data\n ? html`\n <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n `\n : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\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 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 { ConfigurableMixin } from '../../../mixins/configurable';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { NucleonElement } from '../../public/NucleonElement/NucleonElement';\nimport { getResourceId } from '@foxy.io/sdk/core';\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 /\n Renders optional form header with ID, last update timestamp and actions list (snapshot-only).\n * Customize which actions are rendered with `.renderHeaderActions()` method.\n /\n renderHeader(): TemplateResult {\n const data = this.data;\n const actions = data ? this.renderHeaderActions(data) : null;\n const id = data ? getResourceId(data._links.self.href) : '';\n\n return html`\n <h2>\n <span class=\"flex items-center gap-s leading-xs text-xxl font-medium break-all\">\n <foxy-i18n infer=\"header\" key=${data ? 'title_existing' : 'title_new'} .options=${{ id }}>\n </foxy-i18n>\n ${data\n ? html`\n <foxy-copy-to-clipboard infer=\"header\" class=\"text-m\" text=${id}>\n </foxy-copy-to-clipboard>\n `\n : ''}\n </span>\n ${data\n ? html`\n <foxy-i18n\n infer=\"header\"\n class=\"text-l text-secondary\"\n key=\"subtitle\"\n .options=${data}\n >\n </foxy-i18n>\n ${actions ? html`<div class=\"mt-xs flex gap-m\">${actions}</div>` : ''}\n `\n : ''}\n </h2>\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 return this.data\n ? html`\n <foxy-internal-timestamps-control infer=\"timestamps\"></foxy-internal-timestamps-control>\n <foxy-internal-delete-control infer=\"delete\"></foxy-internal-delete-control>\n `\n : html`<foxy-internal-create-control infer=\"create\"></foxy-internal-create-control>`;\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 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/InternalForm/index.d.ts CHANGED Viewed

@@ -2,6 +2,8 @@ import '@vaadin/vaadin-button';
 import '../InternalTimestampsControl/index';
 import '../InternalCreateControl/index';
 import '../InternalDeleteControl/index';
+import '../../public/CopyToClipboard/index';
 import '../../public/Spinner/index';
+import '../../public/I18n/index';
 import { InternalForm } from './InternalForm';
 export { InternalForm };

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

@@ -2,7 +2,9 @@ import '@vaadin/vaadin-button';
 import "../InternalTimestampsControl/index.js";
 import "../InternalCreateControl/index.js";
 import "../InternalDeleteControl/index.js";
+import "../../public/CopyToClipboard/index.js";
 import "../../public/Spinner/index.js";
+import "../../public/I18n/index.js";
 import { InternalForm } from "./InternalForm.js";
 customElements.define('foxy-internal-form', InternalForm);
 export { InternalForm };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,+CAA4C;AAC5C,2CAAwC;AACxC,2CAAwC;AAExC,uCAAoC;~~AAEpC~~,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../InternalTimestampsControl/index';\nimport '../InternalCreateControl/index';\nimport '../InternalDeleteControl/index';\n\nimport '../../public/Spinner/index';\n\nimport { InternalForm } from './InternalForm';\n\ncustomElements.define('foxy-internal-form', InternalForm);\n\nexport { InternalForm };\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,+CAA4C;AAC5C,2CAAwC;AACxC,2CAAwC;AAExC,+CAA4C;AAC5C,uCAAoC;AACpC,oCAAiC;AAEjC,OAAO,EAAE,YAAY,EAAE,0BAAuB;AAE9C,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,CAAC","sourcesContent":["import '@vaadin/vaadin-button';\n\nimport '../InternalTimestampsControl/index';\nimport '../InternalCreateControl/index';\nimport '../InternalDeleteControl/index';\n\nimport '../../public/CopyToClipboard/index';\nimport '../../public/Spinner/index';\nimport '../../public/I18n/index';\n\nimport { InternalForm } from './InternalForm';\n\ncustomElements.define('foxy-internal-form', InternalForm);\n\nexport { InternalForm };\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

@@ -8,6 +8,7 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  */
 export declare class InternalIntegerControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    showControls: boolean;
     prefix: string | null;
     suffix: string | null;
     min: number | null;

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

@@ -10,6 +10,7 @@ import { html } from 'lit-element';
 export class InternalIntegerControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.showControls = false;
         this.prefix = null;
         this.suffix = null;
         this.min = null;
@@ -18,6 +19,7 @@ export class InternalIntegerControl extends InternalEditableControl {
     static get properties() {
         return {
             ...super.properties,
+            showControls: { type: Boolean, attribute: 'show-controls' },
             prefix: {},
             suffix: {},
             min: { type: Number },
@@ -35,6 +37,7 @@ export class InternalIntegerControl extends InternalEditableControl {
         class="w-full"
         min=${ifDefined((_a = this.min) !== null && _a !== void 0 ? _a : undefined)}
         max=${ifDefined((_b = this.max) !== null && _b !== void 0 ? _b : undefined)}
+        ?has-controls=${this.showControls}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
         .checkValidity=${this._checkValidity}