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

@foxy.io/elements 1.29.0-beta.2 → 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 (89) 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,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;;~~QA6BE~~,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;~~IA1IC~~,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~~;;;;;;;;;OAUF~~;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;~~6CACrB~~,IAAI,CAAC,UAAU;~~iDACX~~,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;~~cACjE~~,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;~~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;;;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;~~qBACd~~,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-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-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 <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}\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}\n @click=${() => {\n this._value = 0;\n this.dispatchEvent(new CustomEvent('clear'));\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em\"><path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" /></svg>`}\n </button>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalNumberControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalNumberControl/InternalNumberControl.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { NumberFieldElement } from '@vaadin/vaadin-text-field/vaadin-number-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { html, css, svg } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../utils/class-map';\n\n/*\n Internal control displaying a basic number box.\n \n @since 1.17.0\n * @element foxy-internal-number-control\n */\nexport class InternalNumberControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n layout: {},\n prefix: {},\n suffix: {},\n 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/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/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.js CHANGED Viewed

@@ -45,8 +45,8 @@ export class InternalCartFormAddressSummaryItem extends ResponsiveMixin(Internal
       <div class="flex flex-col gap-m sm-flex-row items-start leading-xs">
         <div class="flex-1">
           <p class="text-m text-body">${this.label}</p>
-          <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>
@@ -125,7 +125,7 @@ export class InternalCartFormAddressSummaryItem extends ResponsiveMixin(Internal
           ${this.__renderTextField(address.company)} ${this.__renderTextField(address.phone)}
         </foxy-internal-summary-control>
-        <p class="text-s text-secondary">
+        <p class="text-xs text-secondary">
           <foxy-i18n infer="" key="form_helper_text"></foxy-i18n>
         </p>

package/dist/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalCartFormAddressSummaryItem.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { AddressEntry, ZoomedCustomer } from './types';\nimport type { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { CartForm } from '../../CartForm';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { ResponsiveMixin } from '../../../../../mixins/responsive';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../../../utils/class-map';\nimport { style } from './style';\nimport { html } from 'lit-html';\n\nexport class InternalCartFormAddressSummaryItem extends ResponsiveMixin(InternalEditableControl) {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n countries: {},\n customer: { type: Object },\n regions: {},\n type: {},\n };\n }\n\n static get styles(): CSSResultArray {\n return [...super.styles, style];\n }\n\n /** URL of the `fx:countries` property helper. /\n countries: string \| null = null;\n\n /* Customer resource with billing and shipping address zoomed. /\n customer: ZoomedCustomer \| null = null;\n\n /* URL of the `fx:regions` property helper. /\n regions: string \| null = null;\n\n /* Type of the address. Billing by default. */\n type: 'billing' \| 'shipping' \| null = null;\n\n get disabledSelector(): BooleanSelector {\n const alwaysMatch = [super.disabledSelector.toString()];\n if (!this.__regionsLoader?.data) alwaysMatch.unshift('address:state');\n return new BooleanSelector(alwaysMatch.join(' ').toString());\n }\n\n renderControl(): TemplateResult {\n const regionOptions = this.__regionOptions;\n const addressType = this.type ?? 'billing';\n const address = this.__mergedAddress;\n\n return html`\n <div class=\"flex flex-col gap-m sm-flex-row items-start leading-xs\">\n <div class=\"flex-1\">\n <p class=\"text-m text-body\">${this.label}</p>\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 <button\n aria-label=${this.t('edit')}\n class=${classMap({\n 'text-left sm-text-right transition-colors transition-opacity': true,\n 'text-body cursor-pointer hover-opacity-80': !this.disabled && !this.readonly,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n ?disabled=${this.disabled \|\| this.readonly}\n @click=${() => this.__dialog?.showModal()}\n >\n ${this.__isAddressEmpty\n ? html`<foxy-i18n infer=\"\" key=\"not_set\"></foxy-i18n>`\n : html`\n <div>\n ${this.__renderAddressPart(address.first_name)}\n ${this.__renderAddressPart(address.last_name)}\n </div>\n <div>${this.__renderAddressPart(address.company)}</div>\n <div>${this.__renderAddressPart(address.phone)}</div>\n <div>\n ${this.__renderAddressPart(address.address1)}\n ${this.__renderAddressPart(address.address2)}\n ${this.__renderAddressPart(address.city)}\n ${this.__renderAddressPart(address.state)}\n ${this.__renderAddressPart(address.postal_code)}\n ${this.__renderAddressPart(address.country)}\n </div>\n `}\n </button>\n </div>\n\n <dialog id=\"dialog\" class=\"p-m bg-base shadow-xxl space-y-m\">\n <h2 class=\"text-xl font-medium\">\n <foxy-i18n infer=\"\" key=\"label\"></foxy-i18n>\n </h2>\n\n <foxy-internal-summary-control infer=\"name\">\n ${this.__renderTextField(address.first_name)} ${this.__renderTextField(address.last_name)}\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"address\">\n ${this.__renderTextField(address.address1)} ${this.__renderTextField(address.address2)}\n ${this.__renderTextField(address.city)}\n\n <foxy-internal-select-control\n placeholder=${ifDefined(this.__getPlaceholder(address.country))}\n property=\"${addressType}_country\"\n layout=\"summary-item\"\n infer=\"country\"\n .options=${this.__countryOptions}\n >\n </foxy-internal-select-control>\n\n ${regionOptions.length > 0\n ? html`\n <foxy-internal-select-control\n placeholder=${ifDefined(this.__getPlaceholder(address.state))}\n property=\"${addressType}_state\"\n layout=\"summary-item\"\n infer=\"state\"\n .options=${regionOptions}\n >\n </foxy-internal-select-control>\n `\n : this.__renderTextField(address.state)}\n ${this.__renderTextField(address.postal_code)}\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"extra\">\n ${this.__renderTextField(address.company)} ${this.__renderTextField(address.phone)}\n </foxy-internal-summary-control>\n\n <p class=\"text-s text-secondary\">\n <foxy-i18n infer=\"\" key=\"form_helper_text\"></foxy-i18n>\n </p>\n\n <div class=\"flex justify-between gap-m\">\n <vaadin-button\n theme=\"error\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly}\n @click=${() => {\n this.nucleon?.edit({\n [`${addressType}_first_name`]: null,\n [`${addressType}_last_name`]: null,\n [`${addressType}_company`]: null,\n [`${addressType}_address1`]: null,\n [`${addressType}_address2`]: null,\n [`${addressType}_city`]: null,\n [`${addressType}_state`]: null,\n [`${addressType}_postal_code`]: null,\n [`${addressType}_country`]: null,\n [`${addressType}_phone`]: null,\n });\n }}\n >\n <foxy-i18n infer=\"\" key=\"reset\"></foxy-i18n>\n </vaadin-button>\n\n <vaadin-button\n theme=\"primary\"\n ?disabled=${this.disabled}\n @click=${() => this.__dialog?.close()}\n >\n <foxy-i18n infer=\"\" key=\"done\"></foxy-i18n>\n </vaadin-button>\n </div>\n </dialog>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.countries ?? undefined)}\n id=\"countriesLoader\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__regionsUrl)}\n id=\"regionsLoader\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n `;\n }\n\n private __renderAddressPart(entry: AddressEntry) {\n const text = this.__getDisplayText(entry);\n\n return html`\n <span\n class=${classMap({\n 'text-success bg-success-10': entry.modified && !this.disabled,\n 'bg-contrast-5': entry.modified && this.disabled,\n 'inline-block': !!text,\n 'rounded-s': true,\n 'hidden': !text,\n })}\n >\n ${text}\n </span>\n `;\n }\n\n private __renderTextField(entry: AddressEntry) {\n return html`\n <foxy-internal-text-control\n placeholder=${ifDefined(this.__getPlaceholder(entry))}\n property=\"${this.type ?? 'billing'}_${entry.field}\"\n layout=\"summary-item\"\n infer=${entry.field.replace(/_/g, '-').replace('1', '-one').replace('2', '-two')}\n @clear=${() => this.nucleon?.edit({ [`${this.type ?? 'billing'}_${entry.field}`]: null })}\n >\n </foxy-internal-text-control>\n `;\n }\n\n private __getDisplayText(entry: AddressEntry) {\n return entry.value \|\| (entry.modified ? '--' : '');\n }\n\n private __getPlaceholder(entry: AddressEntry) {\n return entry.modified ? this.t('empty_modified_placeholder') : entry.originalValue \|\| void 0;\n }\n\n private get __countriesLoader() {\n type Loader = NucleonElement<Resource<Rels.Countries>>;\n return this.renderRoot.querySelector<Loader>('#countriesLoader');\n }\n\n private get __countryOptions() {\n return Object.values(this.__countriesLoader?.data?.values ?? {}).map(v => ({\n rawLabel: v.default,\n value: v.cc2,\n }));\n }\n\n private get __isAddressEmpty() {\n return Object.values(this.__mergedAddress).every(entry => this.__getDisplayText(entry) === '');\n }\n\n private get __regionOptions() {\n return Object.values(this.__regionsLoader?.data?.values ?? {}).map(v => ({\n rawLabel: v.default,\n value: v.code,\n }));\n }\n\n private get __regionsLoader() {\n type Loader = NucleonElement<Resource<Rels.Regions>>;\n return this.renderRoot.querySelector<Loader>('#regionsLoader');\n }\n\n private get __mergedAddress() {\n type EmbedKey = 'fx:default_billing_address' \| 'fx:default_shipping_address';\n\n const cart = (this.nucleon as CartForm \| null)?.form;\n const type = this.type === 'shipping' ? 'shipping' : 'billing';\n const defaults = this.customer?._embedded[`fx:default_${type}_address` as EmbedKey] ?? {};\n const addressFields = [\n 'first_name',\n 'last_name',\n 'company',\n 'address1',\n 'address2',\n 'city',\n 'state',\n 'postal_code',\n 'country',\n 'phone',\n ];\n\n const address = addressFields.reduce<Record<string, AddressEntry>>((acc, field) => {\n const cartKey = `${type}_${field}` as keyof typeof cart;\n const cartValue = cart?.[cartKey];\n const defaultKey = (field === 'state' ? 'region' : field) as keyof typeof defaults;\n const defaultValue = defaults?.[defaultKey];\n\n acc[field] = {\n originalValue: String(defaultValue ?? ''),\n modified: cartValue !== null,\n value: String(cartValue ?? defaultValue ?? ''),\n field,\n };\n\n return acc;\n }, {});\n\n return address;\n }\n\n private get __regionsUrl() {\n try {\n const regionsURL = new URL(this.regions ?? '');\n const country = this.__mergedAddress.country.value;\n if (country) regionsURL.searchParams.set('country_code', country);\n return regionsURL.toString();\n } catch {\n // ignore\n }\n }\n\n private get __dialog() {\n return this.renderRoot.querySelector<HTMLDialogElement>('#dialog');\n }\n}\n"]}
1	+ {"version":3,"file":"InternalCartFormAddressSummaryItem.js","sourceRoot":"","sources":["../../../../../../src/elements/public/CartForm/internal/InternalCartFormAddressSummaryItem/InternalCartFormAddressSummaryItem.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CSSResultArray, PropertyDeclarations } from 'lit-element';\nimport type { AddressEntry, ZoomedCustomer } from './types';\nimport type { NucleonElement } from '../../../NucleonElement/NucleonElement';\nimport type { TemplateResult } from 'lit-html';\nimport type { CartForm } from '../../CartForm';\nimport type { Resource } from '@foxy.io/sdk/core';\nimport type { Rels } from '@foxy.io/sdk/backend';\n\nimport { InternalEditableControl } from '../../../../internal/InternalEditableControl/InternalEditableControl';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { ResponsiveMixin } from '../../../../../mixins/responsive';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { classMap } from '../../../../../utils/class-map';\nimport { style } from './style';\nimport { html } from 'lit-html';\n\nexport class InternalCartFormAddressSummaryItem extends ResponsiveMixin(InternalEditableControl) {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n countries: {},\n customer: { type: Object },\n regions: {},\n type: {},\n };\n }\n\n static get styles(): CSSResultArray {\n return [...super.styles, style];\n }\n\n /** URL of the `fx:countries` property helper. /\n countries: string \| null = null;\n\n /* Customer resource with billing and shipping address zoomed. /\n customer: ZoomedCustomer \| null = null;\n\n /* URL of the `fx:regions` property helper. /\n regions: string \| null = null;\n\n /* Type of the address. Billing by default. */\n type: 'billing' \| 'shipping' \| null = null;\n\n get disabledSelector(): BooleanSelector {\n const alwaysMatch = [super.disabledSelector.toString()];\n if (!this.__regionsLoader?.data) alwaysMatch.unshift('address:state');\n return new BooleanSelector(alwaysMatch.join(' ').toString());\n }\n\n renderControl(): TemplateResult {\n const regionOptions = this.__regionOptions;\n const addressType = this.type ?? 'billing';\n const address = this.__mergedAddress;\n\n return html`\n <div class=\"flex flex-col gap-m sm-flex-row items-start leading-xs\">\n <div class=\"flex-1\">\n <p class=\"text-m text-body\">${this.label}</p>\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 <button\n aria-label=${this.t('edit')}\n class=${classMap({\n 'text-left sm-text-right transition-colors transition-opacity': true,\n 'text-body cursor-pointer hover-opacity-80': !this.disabled && !this.readonly,\n 'text-secondary': this.readonly,\n 'text-disabled': this.disabled,\n 'font-medium': !this.readonly,\n })}\n ?disabled=${this.disabled \|\| this.readonly}\n @click=${() => this.__dialog?.showModal()}\n >\n ${this.__isAddressEmpty\n ? html`<foxy-i18n infer=\"\" key=\"not_set\"></foxy-i18n>`\n : html`\n <div>\n ${this.__renderAddressPart(address.first_name)}\n ${this.__renderAddressPart(address.last_name)}\n </div>\n <div>${this.__renderAddressPart(address.company)}</div>\n <div>${this.__renderAddressPart(address.phone)}</div>\n <div>\n ${this.__renderAddressPart(address.address1)}\n ${this.__renderAddressPart(address.address2)}\n ${this.__renderAddressPart(address.city)}\n ${this.__renderAddressPart(address.state)}\n ${this.__renderAddressPart(address.postal_code)}\n ${this.__renderAddressPart(address.country)}\n </div>\n `}\n </button>\n </div>\n\n <dialog id=\"dialog\" class=\"p-m bg-base shadow-xxl space-y-m\">\n <h2 class=\"text-xl font-medium\">\n <foxy-i18n infer=\"\" key=\"label\"></foxy-i18n>\n </h2>\n\n <foxy-internal-summary-control infer=\"name\">\n ${this.__renderTextField(address.first_name)} ${this.__renderTextField(address.last_name)}\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"address\">\n ${this.__renderTextField(address.address1)} ${this.__renderTextField(address.address2)}\n ${this.__renderTextField(address.city)}\n\n <foxy-internal-select-control\n placeholder=${ifDefined(this.__getPlaceholder(address.country))}\n property=\"${addressType}_country\"\n layout=\"summary-item\"\n infer=\"country\"\n .options=${this.__countryOptions}\n >\n </foxy-internal-select-control>\n\n ${regionOptions.length > 0\n ? html`\n <foxy-internal-select-control\n placeholder=${ifDefined(this.__getPlaceholder(address.state))}\n property=\"${addressType}_state\"\n layout=\"summary-item\"\n infer=\"state\"\n .options=${regionOptions}\n >\n </foxy-internal-select-control>\n `\n : this.__renderTextField(address.state)}\n ${this.__renderTextField(address.postal_code)}\n </foxy-internal-summary-control>\n\n <foxy-internal-summary-control infer=\"extra\">\n ${this.__renderTextField(address.company)} ${this.__renderTextField(address.phone)}\n </foxy-internal-summary-control>\n\n <p class=\"text-xs text-secondary\">\n <foxy-i18n infer=\"\" key=\"form_helper_text\"></foxy-i18n>\n </p>\n\n <div class=\"flex justify-between gap-m\">\n <vaadin-button\n theme=\"error\"\n ?disabled=${this.disabled}\n ?hidden=${this.readonly}\n @click=${() => {\n this.nucleon?.edit({\n [`${addressType}_first_name`]: null,\n [`${addressType}_last_name`]: null,\n [`${addressType}_company`]: null,\n [`${addressType}_address1`]: null,\n [`${addressType}_address2`]: null,\n [`${addressType}_city`]: null,\n [`${addressType}_state`]: null,\n [`${addressType}_postal_code`]: null,\n [`${addressType}_country`]: null,\n [`${addressType}_phone`]: null,\n });\n }}\n >\n <foxy-i18n infer=\"\" key=\"reset\"></foxy-i18n>\n </vaadin-button>\n\n <vaadin-button\n theme=\"primary\"\n ?disabled=${this.disabled}\n @click=${() => this.__dialog?.close()}\n >\n <foxy-i18n infer=\"\" key=\"done\"></foxy-i18n>\n </vaadin-button>\n </div>\n </dialog>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.countries ?? undefined)}\n id=\"countriesLoader\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n\n <foxy-nucleon\n class=\"hidden\"\n infer=\"\"\n href=${ifDefined(this.__regionsUrl)}\n id=\"regionsLoader\"\n @update=${() => this.requestUpdate()}\n >\n </foxy-nucleon>\n `;\n }\n\n private __renderAddressPart(entry: AddressEntry) {\n const text = this.__getDisplayText(entry);\n\n return html`\n <span\n class=${classMap({\n 'text-success bg-success-10': entry.modified && !this.disabled,\n 'bg-contrast-5': entry.modified && this.disabled,\n 'inline-block': !!text,\n 'rounded-s': true,\n 'hidden': !text,\n })}\n >\n ${text}\n </span>\n `;\n }\n\n private __renderTextField(entry: AddressEntry) {\n return html`\n <foxy-internal-text-control\n placeholder=${ifDefined(this.__getPlaceholder(entry))}\n property=\"${this.type ?? 'billing'}_${entry.field}\"\n layout=\"summary-item\"\n infer=${entry.field.replace(/_/g, '-').replace('1', '-one').replace('2', '-two')}\n @clear=${() => this.nucleon?.edit({ [`${this.type ?? 'billing'}_${entry.field}`]: null })}\n >\n </foxy-internal-text-control>\n `;\n }\n\n private __getDisplayText(entry: AddressEntry) {\n return entry.value \|\| (entry.modified ? '--' : '');\n }\n\n private __getPlaceholder(entry: AddressEntry) {\n return entry.modified ? this.t('empty_modified_placeholder') : entry.originalValue \|\| void 0;\n }\n\n private get __countriesLoader() {\n type Loader = NucleonElement<Resource<Rels.Countries>>;\n return this.renderRoot.querySelector<Loader>('#countriesLoader');\n }\n\n private get __countryOptions() {\n return Object.values(this.__countriesLoader?.data?.values ?? {}).map(v => ({\n rawLabel: v.default,\n value: v.cc2,\n }));\n }\n\n private get __isAddressEmpty() {\n return Object.values(this.__mergedAddress).every(entry => this.__getDisplayText(entry) === '');\n }\n\n private get __regionOptions() {\n return Object.values(this.__regionsLoader?.data?.values ?? {}).map(v => ({\n rawLabel: v.default,\n value: v.code,\n }));\n }\n\n private get __regionsLoader() {\n type Loader = NucleonElement<Resource<Rels.Regions>>;\n return this.renderRoot.querySelector<Loader>('#regionsLoader');\n }\n\n private get __mergedAddress() {\n type EmbedKey = 'fx:default_billing_address' \| 'fx:default_shipping_address';\n\n const cart = (this.nucleon as CartForm \| null)?.form;\n const type = this.type === 'shipping' ? 'shipping' : 'billing';\n const defaults = this.customer?._embedded[`fx:default_${type}_address` as EmbedKey] ?? {};\n const addressFields = [\n 'first_name',\n 'last_name',\n 'company',\n 'address1',\n 'address2',\n 'city',\n 'state',\n 'postal_code',\n 'country',\n 'phone',\n ];\n\n const address = addressFields.reduce<Record<string, AddressEntry>>((acc, field) => {\n const cartKey = `${type}_${field}` as keyof typeof cart;\n const cartValue = cart?.[cartKey];\n const defaultKey = (field === 'state' ? 'region' : field) as keyof typeof defaults;\n const defaultValue = defaults?.[defaultKey];\n\n acc[field] = {\n originalValue: String(defaultValue ?? ''),\n modified: cartValue !== null,\n value: String(cartValue ?? defaultValue ?? ''),\n field,\n };\n\n return acc;\n }, {});\n\n return address;\n }\n\n private get __regionsUrl() {\n try {\n const regionsURL = new URL(this.regions ?? '');\n const country = this.__mergedAddress.country.value;\n if (country) regionsURL.searchParams.set('country_code', country);\n return regionsURL.toString();\n } catch {\n // ignore\n }\n }\n\n private get __dialog() {\n return this.renderRoot.querySelector<HTMLDialogElement>('#dialog');\n }\n}\n"]}

package/dist/elements/public/SubscriptionSettingsForm/SubscriptionSettingsForm.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import type { Data } from './types';
 import type { TemplateResult } from 'lit-html';
 import type { NucleonV8N } from '../NucleonElement/types';
+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> & {
@@ -14,26 +14,17 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  */
 export declare class SubscriptionSettingsForm extends Base<Data> {
     static get v8n(): NucleonV8N<Data>;
-    private __sendEmailReceiptsForAutomatedBillingOptions;
-    private __automaticallyChargePastDueAmountOptions;
-    private __clearPastDueAmountsOnSuccessOptions;
-    private __resetNextDateOnMakeUpPaymentOptions;
     private __pastDueAmountHandlingOptions;
     private __positiveIntegerInputParams;
-    private __sendEmailReceiptsForAutomatedBillingGetValue;
-    private __sendEmailReceiptsForAutomatedBillingSetValue;
     private __expiringSoonPaymentReminderScheduleGetValue;
     private __expiringSoonPaymentReminderScheduleSetValue;
-    private __automaticallyChargePastDueAmountGetValue;
-    private __automaticallyChargePastDueAmountSetValue;
-    private __clearPastDueAmountsOnSuccessGetValue;
-    private __clearPastDueAmountsOnSuccessSetValue;
-    private __resetNextDateOnMakeUpPaymentGetValue;
-    private __resetNextDateOnMakeUpPaymentSetValue;
     private __reminderEmailScheduleGetValue;
     private __reminderEmailScheduleSetValue;
     private __reattemptScheduleGetValue;
     private __reattemptScheduleSetValue;
+    private __getReattemptBypassStringsValue;
+    private __setReattemptBypassStringsValue;
+    private __reattemptBypassLogicOptions;
     get hiddenSelector(): BooleanSelector;
     renderBody(): TemplateResult;
     private get __cancellationScheduleSuffix();