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/InternalNumberControl/InternalNumberControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,~~SAAS~~,EAAE,MAAM,~~gCAAgC~~,CAAC;~~AAC3D~~,OAAO,EAAE,~~IAAI~~,EAAE,MAAM,~~aAAa~~,CAAC;~~AAEnC~~;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;~~QAWE~~,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAE7B,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;~~IA4B5B~~,CAAC;~~IA5CC~~,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;~~IAUD~~,aAAa;;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;cAEZ,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;cAChC,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;oBAC1B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;;mBAET,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAmC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;;UAEC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;UAChE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;KAE9F,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { ~~html~~ } from '~~lit~~-~~element~~';\n\n/*\n Internal control displaying a basic number box.\n \n @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n prefix: {},\n suffix: {},\n min: { type: Number },\n max: { type: Number },\n };\n }\n\n prefix: string \| null = null;\n\n suffix: string \| null = null;\n\n min: number \| null = null;\n\n max: number \| null = null;\n\n renderControl(): TemplateResult {\n return html`\n <vaadin-number-field\n error-message=${ifDefined(this._errorMessage)}\n placeholder=${this.placeholder}\n helper-text=${this.helperText}\n label=${this.label}\n class=\"w-full\"\n min=${ifDefined(this.min ?? undefined)}\n max=${ifDefined(this.max ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n clear-button-visible\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @change=${(evt: CustomEvent) => {\n const field = evt.currentTarget as NumberFieldElement;\n this._value = parseFloat(field.value);\n }}\n >\n ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n </vaadin-number-field>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,uBAAuB;IAAlE;;QAqCE,WAAM,GAAyC,IAAI,CAAC;QAEpD,WAAM,GAAkB,IAAI,CAAC;QAE7B,WAAM,GAAkB,IAAI,CAAC;QAE7B,QAAG,GAAkB,IAAI,CAAC;QAE1B,QAAG,GAAkB,IAAI,CAAC;IAsG5B,CAAC;IAlJC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;YACV,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACrB,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACtB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;;;;;;;;;;;OAkBF;SACF,CAAC;IACJ,CAAC;IAYD,aAAa;;QACX,IAAI,IAAI,CAAC,MAAM,KAAK,cAAc;YAAE,OAAO,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAE5E,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,WAAW;sBAChB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,KAAK;;cAEZ,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;cAChC,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,SAAS,CAAC;oBAC1B,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,cAAc;iBAC3B,IAAI,CAAC,MAAM;;mBAET,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;kBACtE,CAAC,GAAgB,EAAE,EAAE;YAC7B,MAAM,KAAK,GAAG,GAAG,CAAC,aAAmC,CAAC;YACtD,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;;UAEC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;UAChE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,+CAA+C,IAAI,CAAC,MAAM,QAAQ,CAAC,CAAC,CAAC,EAAE;;KAE9F,CAAC;IACJ,CAAC;IAEO,yBAAyB;;QAC/B,MAAM,gBAAgB,GAAG;YACvB,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,eAAe,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YACjD,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;QACF,OAAO,IAAI,CAAA;;;wDAGyC,IAAI,CAAC,KAAK;8CACpB,IAAI,CAAC,UAAU;kDACX,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;cAClE,IAAI,CAAC,aAAa;;;;;wBAKR,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;cAC5E,IAAI,CAAC,MAAM;;;;0BAIC,IAAI,CAAC,WAAW;;oBAEtB,QAAQ,CAAC;YACf,oEAAoE,EAAE,IAAI;YAC1E,qCAAqC,EAAE,IAAI;YAC3C,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9B,CAAC;;kBAEI,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,KAAK,CAAC,CAAC;kBAC7B,SAAS,OAAC,IAAI,CAAC,GAAG,mCAAI,KAAK,CAAC,CAAC;;qBAE1B,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;wBACjC,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;uBACd,CAAC,GAAkB,EAAE,EAAE,WAAC,OAAA,GAAG,CAAC,GAAG,KAAK,OAAO,WAAI,IAAI,CAAC,OAAO,0CAAE,MAAM,GAAE,CAAA,EAAA;qBACvE,CAAC,GAAU,EAAE,EAAE;YACtB,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,MAAM,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;QACvD,CAAC;;;wBAGW,QAAQ,CAAC,EAAE,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,gBAAgB,EAAE,CAAC;cAC5E,IAAI,CAAC,MAAM;;;;yBAIA,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;oBACpB,QAAQ,CAAC;YACf,8CAA8C,EAAE,IAAI;YACpD,uDAAuD,EAAE,IAAI;YAC7D,8CAA8C,EAAE,CAAC,IAAI,CAAC,QAAQ;YAC9D,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAC9C,CAAC;;wBAEU,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;qBAC9B,GAAG,EAAE;YACZ,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/C,CAAC;;cAEC,GAAG,CAAA,sWAAsW;;;;KAIlX,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/*\n Internal control displaying a basic number box.\n \n @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n min: { type: Number },\n max: { type: Number },\n };\n }\n\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n input::-webkit-contacts-auto-fill-button {\n visibility: hidden;\n display: none !important;\n pointer-events: none;\n position: absolute;\n right: 0;\n }\n\n input::-webkit-outer-spin-button,\n input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n input {\n -moz-appearance: textfield;\n }\n `,\n ];\n }\n\n layout: 'summary-item' \| 'standalone' \| null = null;\n\n prefix: string \| null = null;\n\n suffix: string \| null = null;\n\n min: number \| null = null;\n\n max: number \| null = null;\n\n renderControl(): TemplateResult {\n if (this.layout === 'summary-item') return this.__renderSummaryItemLayout();\n\n return html`\n <vaadin-number-field\n error-message=${ifDefined(this._errorMessage)}\n placeholder=${this.placeholder}\n helper-text=${this.helperText}\n label=${this.label}\n class=\"w-full\"\n min=${ifDefined(this.min ?? undefined)}\n max=${ifDefined(this.max ?? undefined)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n .checkValidity=${this._checkValidity}\n .value=${this._value}\n clear-button-visible\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @change=${(evt: CustomEvent) => {\n const field = evt.currentTarget as NumberFieldElement;\n this._value = parseFloat(field.value);\n }}\n >\n ${this.prefix ? html`<div slot=\"prefix\">${this.prefix}</div>` : ''}\n ${this.suffix ? html`<div class=\"pr-s font-medium\" slot=\"suffix\">${this.suffix}</div>` : ''}\n </vaadin-number-field>\n `;\n }\n\n private __renderSummaryItemLayout() {\n const sharedTextStyles = {\n 'text-disabled': this.disabled,\n 'text-tertiary': !this.readonly && !this.disabled,\n 'font-medium': !this.readonly,\n };\n return html`\n <div class=\"flex items-start gap-m leading-xs\">\n <div>\n <label class=\"text-m text-body\" for=\"input\">${this.label}</label>\n <p class=\"text-xs text-secondary\">${this.helperText}</p>\n <p 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 <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n ${this.prefix}\n </span>\n\n <input\n placeholder=${this.placeholder}\n style=\"min-width: 10ch\"\n class=${classMap({\n 'w-full appearance-none text-right bg-transparent transition-colors': true,\n 'text-m rounded-s focus-outline-none': true,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n type=\"number\"\n min=${ifDefined(this.min ?? void 0)}\n max=${ifDefined(this.max ?? void 0)}\n id=\"input\"\n .value=${this._value === 0 ? '' : this._value}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @input=${(evt: Event) => {\n evt.stopPropagation();\n this._value = (evt.target as HTMLInputElement).value;\n }}\n />\n\n <span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>\n ${this.suffix}\n </span>\n\n <button\n aria-label=${this.t('clear')}\n class=${classMap({\n 'flex-shrink-0 rounded-full transition-colors': true,\n 'focus-outline-none focus-ring-2 focus-ring-primary-50': true,\n 'cursor-pointer text-tertiary hover-text-body': !this.disabled,\n 'cursor-default text-disabled': this.disabled,\n })}\n style=\"width: 1em; height: 1em;\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly \|\| !this._value}\n @click=${() => {\n this._value = 0;\n this.dispatchEvent(new CustomEvent('clear'));\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n </button>\n </div>\n </div>\n `;\n }\n}\n"]}

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

@@ -3,7 +3,7 @@ import type { HALJSONResource } from '../../public/NucleonElement/types';
 import type { FormRenderer } from '../../public/FormDialog/types';
 import type { Option } from '../../public/QueryBuilder/types';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
-declare type DisplayValueOptionsCb = (resource: HALJSONResource | null, context: string) => Record<string, unknown>;
+declare type DisplayValueOptionsCb = (resource: HALJSONResource) => Record<string, unknown>;
 export declare class InternalResourcePickerControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
     getDisplayValueOptions: DisplayValueOptionsCb;

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

@@ -9,7 +9,7 @@ import memoize from 'lodash-es/memoize';
 export class InternalResourcePickerControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
-        this.getDisplayValueOptions = (r, c) => ({ resource: r, context: c });
+        this.getDisplayValueOptions = resource => ({ resource });
         this.virtualHost = uniqueId('internal-resource-picker-control-');
         this.formProps = {};
         this.filters = [];
@@ -72,7 +72,6 @@ export class InternalResourcePickerControl extends InternalEditableControl {
             (_b = (_a = this.__getItemRenderer.cache).clear) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     __renderSummaryItemLayout() {
-        var _a;
         const resource = this.renderRoot.querySelector('#value');
         const onClick = (evt) => {
             if (this.disabled || this.readonly)
@@ -112,7 +111,8 @@ export class InternalResourcePickerControl extends InternalEditableControl {
                     <foxy-i18n
                       infer=""
                       key="value"
-                      .options=${this.getDisplayValueOptions((_a = resource === null || resource === void 0 ? void 0 : resource.data) !== null && _a !== void 0 ? _a : null, (resource === null || resource === void 0 ? void 0 : resource.data) ? '' : (resource === null || resource === void 0 ? void 0 : resource.in('fail')) ? 'fail' : 'busy')}
+                      .options=${(resource === null || resource === void 0 ? void 0 : resource.data) ? this.getDisplayValueOptions(resource.data)
+                : { context: (resource === null || resource === void 0 ? void 0 : resource.in('fail')) ? 'fail' : 'busy' }}
                     >
                     </foxy-i18n>
                   `

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

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

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

@@ -72,8 +72,8 @@ export class InternalSelectControl extends InternalEditableControl {
       <div class="flex items-start leading-xs">
         <div class="flex-1">
           <label class="text-m text-body" for="select">${this.label}</label>
-          <p class="text-s text-secondary">${this.helperText}</p>
-          <p class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
             ${this._errorMessage}
           </p>
         </div>

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

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

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

@@ -9,7 +9,7 @@ export class InternalSummaryControl extends InternalEditableControl {
 }
 ::slotted(:not(:first-child)){
-  border-top:thin var(--foxy-border-style, solid) var(--lumo-contrast-5pct) !important;
+  border-top:thin var(--foxy-border-style, solid) var(--lumo-contrast-10pct) !important;
 }
       `,
         ];
@@ -20,7 +20,7 @@ export class InternalSummaryControl extends InternalEditableControl {
     renderControl() {
         return html `
       <p class="mb-xs font-medium text-secondary text-s" ?hidden=${!this.label}>${this.label}</p>
-      <div class="border border-contrast-5 rounded"><slot></slot></div>
+      <div class="border border-contrast-10 rounded"><slot></slot></div>
       <p class="mt-xs text-xs text-secondary" ?hidden=${!this.helperText}>${this.helperText}</p>
     `;
     }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IACjE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;OAQF;SACF,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;mEACoD,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;;wDAEpC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU;KACtF,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n ::slotted(*) {\n padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n }\n\n ::slotted(:not(:first-child)) {\n border-top: thin var(--foxy-border-style, solid) var(--lumo-contrast-~~5pct~~) !important;\n }\n `,\n ];\n }\n\n renderLightDom(): void {\n return;\n }\n\n renderControl(): TemplateResult {\n return html`\n <p class=\"mb-xs font-medium text-secondary text-s\" ?hidden=${!this.label}>${this.label}</p>\n <div class=\"border border-contrast-5 rounded\"><slot></slot></div>\n <p class=\"mt-xs text-xs text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalSummaryControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,OAAO,sBAAuB,SAAQ,uBAAuB;IACjE,MAAM,KAAK,MAAM;QACf,OAAO;YACL,GAAG,KAAK,CAAC,MAAM;YACf,GAAG;;;;;;;OAQF;SACF,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,OAAO;IACT,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAA;mEACoD,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;;wDAEpC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU;KACtF,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { CSSResultArray } from 'lit-element';\nimport type { TemplateResult } from 'lit-html';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css } from 'lit-element';\n\nexport class InternalSummaryControl extends InternalEditableControl {\n static get styles(): CSSResultArray {\n return [\n ...super.styles,\n css`\n ::slotted(*) {\n padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px);\n }\n\n ::slotted(:not(:first-child)) {\n border-top: thin var(--foxy-border-style, solid) var(--lumo-contrast-10pct) !important;\n }\n `,\n ];\n }\n\n renderLightDom(): void {\n return;\n }\n\n renderControl(): TemplateResult {\n return html`\n <p class=\"mb-xs font-medium text-secondary text-s\" ?hidden=${!this.label}>${this.label}</p>\n <div class=\"border border-contrast-10 rounded\"><slot></slot></div>\n <p class=\"mt-xs text-xs text-secondary\" ?hidden=${!this.helperText}>${this.helperText}</p>\n `;\n }\n}\n"]}

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

@@ -2,6 +2,7 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
 import { PropertyDeclarations, TemplateResult } from 'lit-element';
 export declare class InternalSwitchControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
+    helperTextAsToolip: boolean;
     invert: boolean;
     renderControl(): TemplateResult;
 }

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

@@ -1,25 +1,29 @@
 import { InternalEditableControl } from "../InternalEditableControl/InternalEditableControl.js";
-import { html } from 'lit-element';
+import { html, svg } from 'lit-element';
 import { classMap } from "../../../utils/class-map.js";
 export class InternalSwitchControl extends InternalEditableControl {
     constructor() {
         super(...arguments);
+        this.helperTextAsToolip = false;
         this.invert = false;
     }
     static get properties() {
         return {
             ...super.properties,
+            helperTextAsToolip: { type: Boolean, attribute: 'helper-text-as-tooltip' },
             invert: { type: Boolean },
         };
     }
     renderControl() {
         const checked = this.invert ? !this._value : !!this._value;
         return html `
-      <div class="flex items-center leading-xs">
+      <div class="flex items-start gap-s leading-xs text-m">
         <div class="flex-1">
           <label class="text-m text-body" for="input">${this.label}</label>
-          <p class="text-s text-secondary">${this.helperText}</p>
-          <p class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+          ${this.helperTextAsToolip
+            ? ''
+            : html `<p class="text-xs text-secondary">${this.helperText}</p>`}
+          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
             ${this._errorMessage}
           </p>
         </div>
@@ -27,9 +31,9 @@ export class InternalSwitchControl extends InternalEditableControl {
         ${this.readonly
             ? html `<p class="text-secondary">${checked ? this.t('checked') : this.t('unchecked')}</p>`
             : html `
-              <div style="height: 1em" class="flex items-center">
+              <div style="height: calc(1em * var(--lumo-line-height-xs))" class="flex items-center">
                 <div
-                  style="border-radius: var(--lumo-size-xl); width: calc((var(--lumo-space-m) * 2) + (var(--lumo-space-xs) * 2))"
+                  style="border-radius: var(--lumo-size-xl); width: calc((1em * var(--lumo-line-height-xs)) - 3px + var(--lumo-space-m))"
                   class=${classMap({
                 'cursor-pointer group transition-colors relative': true,
                 'flex flex-shrink-0 items-center': true,
@@ -41,14 +45,13 @@ export class InternalSwitchControl extends InternalEditableControl {
                   @click=${() => (this._value = !this._value)}
                 >
                   <div
-                    style="width: var(--lumo-space-m); height: var(--lumo-space-m)"
+                    style="margin: 1.5px; width: calc((1em * var(--lumo-line-height-xs)) - 6px); height: calc((1em * var(--lumo-line-height-xs)) - 6px)"
                     class=${classMap({
-                'transition-all transform block rounded-full m-xs': true,
+                'transition-all transform block rounded-full': true,
                 'translate-x-m': checked,
                 'translate-x-0': !checked,
                 'bg-base': this.disabled,
                 'bg-tint': !this.disabled,
-                'group-hover-scale-110': !this.disabled,
             })}
                   ></div>
@@ -68,6 +71,25 @@ export class InternalSwitchControl extends InternalEditableControl {
                 </div>
               </div>
             `}
+        ${this.helperTextAsToolip
+            ? html `
+              <div
+                class="transition-colors text-tertiary flex-shrink-0 cursor-pointer hover-text-body"
+                id="trigger"
+              >
+                ${svg `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: calc(1em * var(--lumo-line-height-xs)); height: calc(1em * var(--lumo-line-height-xs)); margin-right: -0.12em"><path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" /></svg>`}
+              </div>
+              <vcf-tooltip
+                for="trigger"
+                style="--lumo-base-color: black; max-width: 30rem"
+                class="mt-s"
+                theme="light"
+                position="bottom"
+              >
+                <span class="text-s" style="color: white">${this.helperText}</span>
+              </vcf-tooltip>
+            `
+            : ''}
       </div>
     `;
     }

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

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

package/dist/elements/internal/InternalSwitchControl/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import '@vaadin-component-factory/vcf-tooltip';
 import '../InternalEditableControl/index';
 import '../../public/I18n/index';
 import { InternalSwitchControl as Control } from './InternalSwitchControl';

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

@@ -1,3 +1,4 @@
+import '@vaadin-component-factory/vcf-tooltip';
 import "../InternalEditableControl/index.js";
 import "../../public/I18n/index.js";
 import { InternalSwitchControl as Control } from "./InternalSwitchControl.js";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSwitchControl/index.ts"],"names":[],"mappings":"AAAA,6CAA0C;AAC1C,oCAAiC;AAEjC,OAAO,EAAE,qBAAqB,IAAI,OAAO,EAAE,mCAAgC;AAE3E,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,OAAO,CAAC,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,CAAC","sourcesContent":["import '../InternalEditableControl/index';\nimport '../../public/I18n/index';\n\nimport { InternalSwitchControl as Control } from './InternalSwitchControl';\n\ncustomElements.define('foxy-internal-switch-control', Control);\n\nexport { Control as InternalSwitchControl };\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalSwitchControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,uCAAuC,CAAC;AAC/C,6CAA0C;AAC1C,oCAAiC;AAEjC,OAAO,EAAE,qBAAqB,IAAI,OAAO,EAAE,mCAAgC;AAE3E,cAAc,CAAC,MAAM,CAAC,8BAA8B,EAAE,OAAO,CAAC,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,CAAC","sourcesContent":["import '@vaadin-component-factory/vcf-tooltip';\nimport '../InternalEditableControl/index';\nimport '../../public/I18n/index';\n\nimport { InternalSwitchControl as Control } from './InternalSwitchControl';\n\ncustomElements.define('foxy-internal-switch-control', Control);\n\nexport { Control as InternalSwitchControl };\n"]}

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

@@ -74,8 +74,8 @@ export class InternalTextControl extends InternalEditableControl {
       <div class="flex items-start gap-m leading-xs">
         <div>
           <label class="text-m text-body" for="input">${this.label}</label>
-          <p class="text-s text-secondary">${this.helperText}</p>
-          <p class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
+          <p class="text-xs text-secondary">${this.helperText}</p>
+          <p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
             ${this._errorMessage}
           </p>
         </div>

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

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

package/dist/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import type { TemplateResult } from 'lit-html';
+import type { Data } from './types';
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from '../../internal/InternalForm/InternalForm';
+declare const Base: typeof InternalForm & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+export declare class AdminSubscriptionForm extends Base<Data> {
+    get hiddenSelector(): BooleanSelector;
+    get headerSubtitleOptions(): Record<string, unknown>;
+    renderHeaderActions(data: Data): TemplateResult;
+    renderBody(): TemplateResult;
+}
+export {};

package/dist/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.js ADDED Viewed

@@ -0,0 +1,109 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { html } from 'lit-html';
+const NS = 'admin-subscription-form';
+const Base = TranslatableMixin(InternalForm, NS);
+export class AdminSubscriptionForm extends Base {
+    get hiddenSelector() {
+        var _a, _b;
+        const alwaysMatch = ['delete', super.hiddenSelector.toString()];
+        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.error_message))
+            alwaysMatch.unshift('error-message');
+        if (!((_b = this.data) === null || _b === void 0 ? void 0 : _b.is_active))
+            alwaysMatch.unshift('view-action', 'cancel-action');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
+    }
+    get headerSubtitleOptions() {
+        var _a;
+        return { context: ((_a = this.data) === null || _a === void 0 ? void 0 : _a.is_active) ? 'active' : 'inactive' };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    renderHeaderActions(data) {
+        return html `
+      <foxy-internal-admin-subscription-form-load-in-cart-action infer="view-action">
+      </foxy-internal-admin-subscription-form-load-in-cart-action>
+      <foxy-internal-admin-subscription-form-load-in-cart-action
+        action="cancel"
+        infer="cancel-action"
+      >
+      </foxy-internal-admin-subscription-form-load-in-cart-action>
+    `;
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e;
+        let transactionsHref;
+        try {
+            const url = new URL((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:transactions'].href) !== null && _b !== void 0 ? _b : '');
+            url.searchParams.set('zoom', 'items');
+            transactionsHref = url.toString();
+        }
+        catch (_f) {
+            transactionsHref = undefined;
+        }
+        return html `
+      ${this.renderHeader()}
+      <foxy-internal-admin-subscription-form-error infer="error-message">
+      </foxy-internal-admin-subscription-form-error>
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-date-control layout="summary-item" format="iso-long" infer="start-date">
+        </foxy-internal-date-control>
+        <foxy-internal-frequency-control
+          layout="summary-item"
+          infer="frequency"
+          allow-twice-a-month
+        >
+        </foxy-internal-frequency-control>
+        <foxy-internal-date-control
+          layout="summary-item"
+          format="iso-long"
+          infer="next-transaction-date"
+        >
+        </foxy-internal-date-control>
+        <foxy-internal-date-control layout="summary-item" format="iso-long" infer="end-date">
+        </foxy-internal-date-control>
+      </foxy-internal-summary-control>
+      <foxy-internal-summary-control infer="overdue">
+        <foxy-internal-number-control
+          layout="summary-item"
+          suffix=${ifDefined((_c = this.data) === null || _c === void 0 ? void 0 : _c._embedded['fx:transaction_template'].currency_code)}
+          infer="past-due-amount"
+          min="0"
+        >
+        </foxy-internal-number-control>
+      </foxy-internal-summary-control>
+      ${this.renderTemplateOrSlot()}
+      <foxy-internal-async-list-control
+        infer="attributes"
+        class="min-w-0"
+        first=${ifDefined((_e = (_d = this.data) === null || _d === void 0 ? void 0 : _d._links) === null || _e === void 0 ? void 0 : _e['fx:attributes'].href)}
+        item="foxy-attribute-card"
+        form="foxy-attribute-form"
+        alert
+      >
+      </foxy-internal-async-list-control>
+      <foxy-internal-async-list-control
+        infer="transactions"
+        class="min-w-0"
+        first=${ifDefined(transactionsHref)}
+        item="foxy-transaction-card"
+        form="foxy-transaction"
+        hide-create-button
+        hide-delete-button
+        alert
+        wide
+      >
+      </foxy-internal-async-list-control>
+      ${super.renderBody()}
+    `;
+    }
+}
+//# sourceMappingURL=AdminSubscriptionForm.js.map

package/dist/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AdminSubscriptionForm.js","sourceRoot":"","sources":["../../../../src/elements/public/AdminSubscriptionForm/AdminSubscriptionForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,MAAM,EAAE,GAAG,yBAAyB,CAAC;AACrC,MAAM,IAAI,GAAG,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;AAEjD,MAAM,OAAO,qBAAsB,SAAQ,IAAU;IACnD,IAAI,cAAc;;QAChB,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;QAChE,IAAI,QAAC,IAAI,CAAC,IAAI,0CAAE,aAAa,CAAA;YAAE,WAAW,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QACpE,IAAI,QAAC,IAAI,CAAC,IAAI,0CAAE,SAAS,CAAA;YAAE,WAAW,CAAC,OAAO,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;QAC/E,OAAO,IAAI,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,qBAAqB;;QACvB,OAAO,EAAE,OAAO,EAAE,OAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,EAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IACnE,CAAC;IAED,6DAA6D;IAC7D,mBAAmB,CAAC,IAAU;QAC5B,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;IAED,UAAU;;QACR,IAAI,gBAAoC,CAAC;QAEzC,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,aAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,CAAC,iBAAiB,EAAE,IAAI,mCAAI,EAAE,CAAC,CAAC;YACrE,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACtC,gBAAgB,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC;SACnC;QAAC,WAAM;YACN,gBAAgB,GAAG,SAAS,CAAC;SAC9B;QAED,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA2BR,SAAS,OAAC,IAAI,CAAC,IAAI,0CAAE,SAAS,CAAC,yBAAyB,EAAE,aAAa,CAAC;;;;;;;QAOnF,IAAI,CAAC,oBAAoB,EAAE;;;;;gBAKnB,SAAS,aAAC,IAAI,CAAC,IAAI,0CAAE,MAAM,0CAAG,eAAe,EAAE,IAAI,CAAC;;;;;;;;;;gBAUpD,SAAS,CAAC,gBAAgB,CAAC;;;;;;;;;;QAUnC,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { TemplateResult } from 'lit-html';\nimport type { Data } from './types';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html } from 'lit-html';\n\nconst NS = 'admin-subscription-form';\nconst Base = TranslatableMixin(InternalForm, NS);\n\nexport class AdminSubscriptionForm extends Base<Data> {\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch = ['delete', super.hiddenSelector.toString()];\n if (!this.data?.error_message) alwaysMatch.unshift('error-message');\n if (!this.data?.is_active) alwaysMatch.unshift('view-action', 'cancel-action');\n return new BooleanSelector(alwaysMatch.join(' ').trim());\n }\n\n get headerSubtitleOptions(): Record<string, unknown> {\n return { context: this.data?.is_active ? 'active' : 'inactive' };\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n renderHeaderActions(data: Data): TemplateResult {\n return html`\n <foxy-internal-admin-subscription-form-load-in-cart-action infer=\"view-action\">\n </foxy-internal-admin-subscription-form-load-in-cart-action>\n <foxy-internal-admin-subscription-form-load-in-cart-action\n action=\"cancel\"\n infer=\"cancel-action\"\n >\n </foxy-internal-admin-subscription-form-load-in-cart-action>\n `;\n }\n\n renderBody(): TemplateResult {\n let transactionsHref: string | undefined;\n\n try {\n const url = new URL(this.data?._links['fx:transactions'].href ?? '');\n url.searchParams.set('zoom', 'items');\n transactionsHref = url.toString();\n } catch {\n transactionsHref = undefined;\n }\n\n return html`\n ${this.renderHeader()}\n\n <foxy-internal-admin-subscription-form-error infer=\"error-message\">\n </foxy-internal-admin-subscription-form-error>\n\n <foxy-internal-summary-control infer=\"general\">\n <foxy-internal-date-control layout=\"summary-item\" format=\"iso-long\" infer=\"start-date\">\n </foxy-internal-date-control>\n <foxy-internal-frequency-control\n layout=\"summary-item\"\n infer=\"frequency\"\n allow-twice-a-month\n >\n </foxy-internal-frequency-control>\n <foxy-internal-date-control\n layout=\"summary-item\"\n format=\"iso-long\"\n infer=\"next-transaction-date\"\n >\n </foxy-internal-date-control>\n <foxy-internal-date-control layout=\"summary-item\" format=\"iso-long\" infer=\"end-date\">\n </foxy-internal-date-control>\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"overdue\">\n <foxy-internal-number-control\n layout=\"summary-item\"\n suffix=${ifDefined(this.data?._embedded['fx:transaction_template'].currency_code)}\n infer=\"past-due-amount\"\n min=\"0\"\n >\n </foxy-internal-number-control>\n </foxy-internal-summary-control>\n\n ${this.renderTemplateOrSlot()}\n\n <foxy-internal-async-list-control\n infer=\"attributes\"\n class=\"min-w-0\"\n first=${ifDefined(this.data?._links?.['fx:attributes'].href)}\n item=\"foxy-attribute-card\"\n form=\"foxy-attribute-form\"\n alert\n >\n </foxy-internal-async-list-control>\n\n <foxy-internal-async-list-control\n infer=\"transactions\"\n class=\"min-w-0\"\n first=${ifDefined(transactionsHref)}\n item=\"foxy-transaction-card\"\n form=\"foxy-transaction\"\n hide-create-button\n hide-delete-button\n alert\n wide\n >\n </foxy-internal-async-list-control>\n\n ${super.renderBody()}\n `;\n }\n}\n"]}