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

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

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

Files changed (264) hide show

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

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

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

@@ -1,4 +1,5 @@
 import type { PropertyDeclarations, TemplateResult } from 'lit-element';
+import type { GeneratorOptions } from './generateRandomPassword';
 import { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';
 /**
  * Internal control displaying a basic password box.
@@ -8,10 +9,7 @@ import { InternalEditableControl } from '../InternalEditableControl/InternalEdit
  */
 export declare class InternalPasswordControl extends InternalEditableControl {
     static get properties(): PropertyDeclarations;
-    generatorOptions: null | {
-        length?: number;
-        charset?: string;
-    };
+    generatorOptions: null | GeneratorOptions;
     /** If true, renders the password generator button. */
     showGenerator: boolean;
     renderControl(): TemplateResult;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"~~AAGA~~,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAApE;;QASE,qBAAgB,~~GAAiD~~,IAAI,CAAC;~~QAEtE~~,sDAAsD;QACtD,kBAAa,GAAG,KAAK,CAAC;IAsDxB,CAAC;IAjEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE;YAClE,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE;SAC9D,CAAC;IACJ,CAAC;IAOD,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,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,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;UAEC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;KAEvD,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,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,2EAA2E,EAAE,IAAI;YACjF,yCAAyC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC3E,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACnD,CAAC;;iBAEO,GAAG,EAAE;;YACZ,IAAI,CAAC,MAAM,GAAG,sBAAsB,OAAC,IAAI,CAAC,gBAAgB,mCAAI,KAAK,CAAC,CAAC,CAAC;YACtE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACrE,oFAAoF;YACpF,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,mBAAmB,CAAC,IAAI,EAAE;QACnC,CAAC;;UAEC,GAAG,CAAA,g1BAAg1B;;KAEx1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { generateRandomPassword } from './generateRandomPassword';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\n/*\n Internal control displaying a basic password box.\n \n @since 1.17.0\n * @element foxy-internal-password-field-control\n /\nexport class InternalPasswordControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n generatorOptions: { type: Object, attribute: 'generator-options' },\n showGenerator: { type: Boolean, attribute: 'show-generator' },\n };\n }\n\n generatorOptions: null \| { ~~length?: number; charset?: string }~~ = null;\n\n /* If true, renders the password generator button. */\n showGenerator = false;\n\n renderControl(): TemplateResult {\n return html`\n <vaadin-password-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 ?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 area = evt.currentTarget as PasswordFieldElement;\n this._value = area.value;\n }}\n >\n ${this.showGenerator ? this.__renderGenerator() : ''}\n </vaadin-password-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 __renderGenerator(): TemplateResult {\n return html`\n <div\n data-testid=\"generator\"\n class=${classMap({\n 'w-s h-s flex items-center justify-center cursor-default transition-colors': true,\n 'text-contrast-60 hover-text-contrast-80': !this.disabled && !this.readonly,\n 'text-contrast-20': this.disabled \|\| this.readonly,\n })}\n slot=\"suffix\"\n @click=${() => {\n this._value = generateRandomPassword(this.generatorOptions ?? void 0);\n const field = this.renderRoot.querySelector('vaadin-password-field');\n // @ts-expect-error: this is a private method but it's ok since the version is fixed\n field?._setPasswordVisible(true);\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.15em; height: 1.15em\"><path d=\"M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.898l-2.051-.683a1 1 0 01-.633-.633L6.95 5.684zM13.949 13.684a1 1 0 00-1.898 0l-.184.551a1 1 0 01-.632.633l-.551.183a1 1 0 000 1.898l.551.183a1 1 0 01.633.633l.183.551a1 1 0 001.898 0l.184-.551a1 1 0 01.632-.633l.551-.183a1 1 0 000-1.898l-.551-.184a1 1 0 01-.633-.632l-.183-.551z\" /></svg>`}\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"InternalPasswordControl.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/InternalPasswordControl.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,8DAA2D;AAC7F,OAAO,EAAE,sBAAsB,EAAE,oCAAiC;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD;;;;;GAKG;AACH,MAAM,OAAO,uBAAwB,SAAQ,uBAAuB;IAApE;;QASE,qBAAgB,GAA4B,IAAI,CAAC;QAEjD,sDAAsD;QACtD,kBAAa,GAAG,KAAK,CAAC;IAsDxB,CAAC;IAjEC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,gBAAgB,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE;YAClE,aAAa,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE;SAC9D,CAAC;IACJ,CAAC;IAOD,aAAa;QACX,OAAO,IAAI,CAAA;;wBAES,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;sBAC/B,IAAI,CAAC,UAAU;sBACf,IAAI,CAAC,WAAW;gBACtB,IAAI,CAAC,KAAK;;oBAEN,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,IAAI,GAAG,GAAG,CAAC,aAAqC,CAAC;YACvD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;;UAEC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;;KAEvD,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,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,2EAA2E,EAAE,IAAI;YACjF,yCAAyC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC3E,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACnD,CAAC;;iBAEO,GAAG,EAAE;;YACZ,IAAI,CAAC,MAAM,GAAG,sBAAsB,OAAC,IAAI,CAAC,gBAAgB,mCAAI,KAAK,CAAC,CAAC,CAAC;YACtE,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;YACrE,oFAAoF;YACpF,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,mBAAmB,CAAC,IAAI,EAAE;QACnC,CAAC;;UAEC,GAAG,CAAA,g1BAAg1B;;KAEx1B,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { PropertyDeclarations, TemplateResult } from 'lit-element';\nimport type { PasswordFieldElement } from '@vaadin/vaadin-text-field/vaadin-password-field';\nimport type { GeneratorOptions } from './generateRandomPassword';\n\nimport { InternalEditableControl } from '../InternalEditableControl/InternalEditableControl';\nimport { generateRandomPassword } from './generateRandomPassword';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { html, svg } from 'lit-element';\nimport { classMap } from '../../../utils/class-map';\n\n/*\n Internal control displaying a basic password box.\n \n @since 1.17.0\n * @element foxy-internal-password-field-control\n /\nexport class InternalPasswordControl extends InternalEditableControl {\n static get properties(): PropertyDeclarations {\n return {\n ...super.properties,\n generatorOptions: { type: Object, attribute: 'generator-options' },\n showGenerator: { type: Boolean, attribute: 'show-generator' },\n };\n }\n\n generatorOptions: null \| GeneratorOptions = null;\n\n /* If true, renders the password generator button. */\n showGenerator = false;\n\n renderControl(): TemplateResult {\n return html`\n <vaadin-password-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 ?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 area = evt.currentTarget as PasswordFieldElement;\n this._value = area.value;\n }}\n >\n ${this.showGenerator ? this.__renderGenerator() : ''}\n </vaadin-password-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 __renderGenerator(): TemplateResult {\n return html`\n <div\n data-testid=\"generator\"\n class=${classMap({\n 'w-s h-s flex items-center justify-center cursor-default transition-colors': true,\n 'text-contrast-60 hover-text-contrast-80': !this.disabled && !this.readonly,\n 'text-contrast-20': this.disabled \|\| this.readonly,\n })}\n slot=\"suffix\"\n @click=${() => {\n this._value = generateRandomPassword(this.generatorOptions ?? void 0);\n const field = this.renderRoot.querySelector('vaadin-password-field');\n // @ts-expect-error: this is a private method but it's ok since the version is fixed\n field?._setPasswordVisible(true);\n }}\n >\n ${svg`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" style=\"width: 1.15em; height: 1.15em\"><path d=\"M15.98 1.804a1 1 0 00-1.96 0l-.24 1.192a1 1 0 01-.784.785l-1.192.238a1 1 0 000 1.962l1.192.238a1 1 0 01.785.785l.238 1.192a1 1 0 001.962 0l.238-1.192a1 1 0 01.785-.785l1.192-.238a1 1 0 000-1.962l-1.192-.238a1 1 0 01-.785-.785l-.238-1.192zM6.949 5.684a1 1 0 00-1.898 0l-.683 2.051a1 1 0 01-.633.633l-2.051.683a1 1 0 000 1.898l2.051.684a1 1 0 01.633.632l.683 2.051a1 1 0 001.898 0l.683-2.051a1 1 0 01.633-.633l2.051-.683a1 1 0 000-1.898l-2.051-.683a1 1 0 01-.633-.633L6.95 5.684zM13.949 13.684a1 1 0 00-1.898 0l-.184.551a1 1 0 01-.632.633l-.551.183a1 1 0 000 1.898l.551.183a1 1 0 01.633.633l.183.551a1 1 0 001.898 0l.184-.551a1 1 0 01.632-.633l.551-.183a1 1 0 000-1.898l-.551-.184a1 1 0 01-.633-.632l-.183-.551z\" /></svg>`}\n </div>\n `;\n }\n}\n"]}

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.d.ts CHANGED Viewed

@@ -1,4 +1,6 @@
-export declare function generateRandomPassword(opts?: {
+export declare type GeneratorOptions = {
     length?: number;
     charset?: string;
-}): string;
+    separator?: string;
+};
+export declare function generateRandomPassword(opts?: GeneratorOptions): string;

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.js CHANGED Viewed

@@ -1,11 +1,12 @@
 export function generateRandomPassword(opts) {
-    var _a, _b;
-    const charset = (_a = opts === null || opts === void 0 ? void 0 : opts.charset) !== null && _a !== void 0 ? _a : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    const length = (_b = opts === null || opts === void 0 ? void 0 : opts.length) !== null && _b !== void 0 ? _b : 18;
+    var _a, _b, _c;
+    const separator = (_a = opts === null || opts === void 0 ? void 0 : opts.separator) !== null && _a !== void 0 ? _a : '-';
+    const charset = (_b = opts === null || opts === void 0 ? void 0 : opts.charset) !== null && _b !== void 0 ? _b : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const length = (_c = opts === null || opts === void 0 ? void 0 : opts.length) !== null && _c !== void 0 ? _c : 18;
     let result = '';
     for (let i = 0; i < length; i++) {
-        if (i > 0 && i % 6 === 0)
-            result += '-';
+        if (separator && i > 0 && i % 6 === 0)
+            result += separator;
         result += charset[Math.floor(Math.random() * charset.length)];
     }
     return result;

package/dist/elements/internal/InternalPasswordControl/generateRandomPassword.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateRandomPassword.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/generateRandomPassword.ts"],"names":[],"mappings":"~~AAAA~~,MAAM,UAAU,sBAAsB,CAAC,~~IAA4C~~;;~~IACjF~~,MAAM,OAAO,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,mCAAI,gEAAgE,CAAC;IAClG,MAAM,MAAM,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,EAAE,CAAC;IAClC,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,IAAI,~~GAAG~~,CAAC;~~QACxC~~,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;KAC/D;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export ~~function~~ ~~generateRandomPassword(opts?:~~ { length?: number; charset?: string }): string {\n const charset = opts?.charset ?? 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n const length = opts?.length ?? 18;\n let result = '';\n\n for (let i = 0; i < length; i++) {\n if (i > 0 && i % 6 === 0) result += ~~'-'~~;\n result += charset[Math.floor(Math.random() * charset.length)];\n }\n\n return result;\n}\n"]}
1	+ {"version":3,"file":"generateRandomPassword.js","sourceRoot":"","sources":["../../../../src/elements/internal/InternalPasswordControl/generateRandomPassword.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,sBAAsB,CAAC,IAAuB;;IAC5D,MAAM,SAAS,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,mCAAI,GAAG,CAAC;IACzC,MAAM,OAAO,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,mCAAI,gEAAgE,CAAC;IAClG,MAAM,MAAM,SAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,EAAE,CAAC;IAClC,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;QAC/B,IAAI,SAAS,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;YAAE,MAAM,IAAI,SAAS,CAAC;QAC3D,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;KAC/D;IAED,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["export type GeneratorOptions = { length?: number; charset?: string; separator?: string };\n\nexport function generateRandomPassword(opts?: GeneratorOptions): string {\n const separator = opts?.separator ?? '-';\n const charset = opts?.charset ?? 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n const length = opts?.length ?? 18;\n let result = '';\n\n for (let i = 0; i < length; i++) {\n if (separator && i > 0 && i % 6 === 0) result += separator;\n result += charset[Math.floor(Math.random() * charset.length)];\n }\n\n return result;\n}\n"]}

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

@@ -71,7 +71,7 @@ export class InternalSwitchControl extends InternalEditableControl {
                 </div>
               </div>
             `}
-        ${this.helperTextAsToolip
+        ${this.helperTextAsToolip && this.helperText
             ? html `
               <div
                 class="transition-colors text-tertiary flex-shrink-0 cursor-pointer hover-text-body"

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,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"]}
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,IAAI,IAAI,CAAC,UAAU;YAC1C,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 && this.helperText\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/InternalTextControl/InternalTextControl.js CHANGED Viewed

@@ -90,7 +90,7 @@ export class InternalTextControl extends InternalEditableControl {
           </p>
         </div>
-        <div class="flex-1 flex items-center gap-xs">
+        <div class="flex-1 flex items-center gap-xs" style="min-width: 30%">
           <input
             placeholder=${this.placeholder}
             class=${classMap({

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":"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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';\nimport { live } from 'lit-html/directives/live';\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 __isErrorVisible: { attribute: false },\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 private __isErrorVisible = false;\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\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\n class=\"text-xs text-error\"\n ?hidden=${!this.__isErrorVisible \|\| this.disabled \|\| this.readonly}\n >\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=${live(this._value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @blur=${() => (this.__isErrorVisible = true)}\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';\nimport { live } from 'lit-html/directives/live';\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 __isErrorVisible: { attribute: false },\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 private __isErrorVisible = false;\n\n reportValidity(): void {\n this.__isErrorVisible = true;\n super.reportValidity();\n }\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\n class=\"text-xs text-error\"\n ?hidden=${!this.__isErrorVisible \|\| this.disabled \|\| this.readonly}\n >\n ${this._errorMessage}\n </p>\n </div>\n\n <div class=\"flex-1 flex items-center gap-xs\" style=\"min-width: 30%\">\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=${live(this._value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n @keydown=${(evt: KeyboardEvent) => evt.key === 'Enter' && this.nucleon?.submit()}\n @blur=${() => (this.__isErrorVisible = true)}\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/ClientForm/ClientForm.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ declare const Base: typeof InternalForm & import("lit-element").Constructor<impo
  * @since 1.24.0
  */
 export declare class ClientForm extends Base<Data> {
+    get headerSubtitleOptions(): Record<string, unknown>;
     get readonlySelector(): BooleanSelector;
     get hiddenSelector(): BooleanSelector;
     renderBody(): TemplateResult;

package/dist/elements/public/ClientForm/ClientForm.js CHANGED Viewed

@@ -12,6 +12,16 @@ const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
  * @since 1.24.0
  */
 export class ClientForm extends Base {
+    get headerSubtitleOptions() {
+        var _a, _b;
+        try {
+            const url = new URL((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.redirect_uri) !== null && _b !== void 0 ? _b : '');
+            return { context: 'with_domain', domain: url.hostname };
+        }
+        catch (_c) {
+            return super.headerSubtitleOptions;
+        }
+    }
     get readonlySelector() {
         const alwaysMatch = ['client-secret'];
         if (this.data || this.in({ busy: 'fetching' }))

package/dist/elements/public/ClientForm/ClientForm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ClientForm.js","sourceRoot":"","sources":["../../../../src/elements/public/ClientForm/ClientForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,EAAE,GAAG,aAAa,CAAC;AACzB,MAAM,IAAI,GAAG,eAAe,CAAC,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;AAElE;;;;;GAKG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAU;IACxC,IAAI,gBAAgB;QAClB,MAAM,WAAW,GAAG,CAAC,eAAe,CAAC,CAAC;QACtC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9E,OAAO,IAAI,eAAe,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC9F,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAa,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACpF,OAAO,IAAI,eAAe,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC5F,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA+BnB,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-element';\n\nconst NS = 'client-form';\nconst Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));\n\n/*\n Form element for viewing and deleting clients (`fx:client`).\n \n @element foxy-client-form\n * @since 1.24.0\n */\nexport class ClientForm extends Base<Data> {\n get readonlySelector(): BooleanSelector {\n const alwaysMatch = ['client-secret'];\n if (this.data \|\| this.in({ busy: 'fetching' })) alwaysMatch.push('client-id');\n return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.readonlySelector.toString()}`);\n }\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch: string[] = [];\n if (!this.data && !this.in({ busy: 'fetching' })) alwaysMatch.push('client-secret');\n return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.hiddenSelector.toString()}`);\n }\n\n renderBody(): TemplateResult {\n return html`\n ${this.renderHeader()}\n\n <div class=\"grid grid-cols-2 gap-m\">\n <foxy-internal-text-control class=\"col-span-2\" infer=\"client-id\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"client-secret\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"redirect-uri\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"project-name\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-area-control class=\"col-span-2\" infer=\"project-description\">\n </foxy-internal-text-area-control>\n\n <foxy-internal-text-control infer=\"company-name\"></foxy-internal-text-control>\n <foxy-internal-text-control infer=\"company-url\"></foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"company-logo\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"contact-name\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control infer=\"contact-email\"></foxy-internal-text-control>\n <foxy-internal-text-control infer=\"contact-phone\"></foxy-internal-text-control>\n </div>\n\n ${super.renderBody()}\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"ClientForm.js","sourceRoot":"","sources":["../../../../src/elements/public/ClientForm/ClientForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,wCAAqC;AACjE,OAAO,EAAE,eAAe,EAAE,sCAAmC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,oDAAiD;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,EAAE,GAAG,aAAa,CAAC;AACzB,MAAM,IAAI,GAAG,eAAe,CAAC,iBAAiB,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,CAAC;AAElE;;;;;GAKG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAU;IACxC,IAAI,qBAAqB;;QACvB,IAAI;YACF,MAAM,GAAG,GAAG,IAAI,GAAG,aAAC,IAAI,CAAC,IAAI,0CAAE,YAAY,mCAAI,EAAE,CAAC,CAAC;YACnD,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;SACzD;QAAC,WAAM;YACN,OAAO,KAAK,CAAC,qBAAqB,CAAC;SACpC;IACH,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,WAAW,GAAG,CAAC,eAAe,CAAC,CAAC;QACtC,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC9E,OAAO,IAAI,eAAe,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC9F,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,WAAW,GAAa,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;YAAE,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACpF,OAAO,IAAI,eAAe,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC5F,CAAC;IAED,UAAU;QACR,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA+BnB,KAAK,CAAC,UAAU,EAAE;KACrB,CAAC;IACJ,CAAC;CACF","sourcesContent":["import type { Data } from './types';\nimport type { TemplateResult } from 'lit-html';\n\nimport { TranslatableMixin } from '../../../mixins/translatable';\nimport { ResponsiveMixin } from '../../../mixins/responsive';\nimport { BooleanSelector } from '@foxy.io/sdk/core';\nimport { InternalForm } from '../../internal/InternalForm/InternalForm';\nimport { html } from 'lit-element';\n\nconst NS = 'client-form';\nconst Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));\n\n/*\n Form element for viewing and deleting clients (`fx:client`).\n \n @element foxy-client-form\n * @since 1.24.0\n */\nexport class ClientForm extends Base<Data> {\n get headerSubtitleOptions(): Record<string, unknown> {\n try {\n const url = new URL(this.data?.redirect_uri ?? '');\n return { context: 'with_domain', domain: url.hostname };\n } catch {\n return super.headerSubtitleOptions;\n }\n }\n\n get readonlySelector(): BooleanSelector {\n const alwaysMatch = ['client-secret'];\n if (this.data \|\| this.in({ busy: 'fetching' })) alwaysMatch.push('client-id');\n return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.readonlySelector.toString()}`);\n }\n\n get hiddenSelector(): BooleanSelector {\n const alwaysMatch: string[] = [];\n if (!this.data && !this.in({ busy: 'fetching' })) alwaysMatch.push('client-secret');\n return new BooleanSelector(`${alwaysMatch.join(' ')} ${super.hiddenSelector.toString()}`);\n }\n\n renderBody(): TemplateResult {\n return html`\n ${this.renderHeader()}\n\n <div class=\"grid grid-cols-2 gap-m\">\n <foxy-internal-text-control class=\"col-span-2\" infer=\"client-id\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"client-secret\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"redirect-uri\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"project-name\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-area-control class=\"col-span-2\" infer=\"project-description\">\n </foxy-internal-text-area-control>\n\n <foxy-internal-text-control infer=\"company-name\"></foxy-internal-text-control>\n <foxy-internal-text-control infer=\"company-url\"></foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"company-logo\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control class=\"col-span-2\" infer=\"contact-name\">\n </foxy-internal-text-control>\n\n <foxy-internal-text-control infer=\"contact-email\"></foxy-internal-text-control>\n <foxy-internal-text-control infer=\"contact-phone\"></foxy-internal-text-control>\n </div>\n\n ${super.renderBody()}\n `;\n }\n}\n"]}

package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.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> & {

package/dist/elements/public/NativeIntegrationForm/NativeIntegrationForm.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { BooleanSelector } from '@foxy.io/sdk/core';
 import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
-import { html } from 'lit-html';
+import { html, svg } from 'lit-html';
 import * as defaults from "./defaults.js";
 import memoize from 'lodash-es/memoize';
 const NS = 'native-integration-form';
@@ -494,23 +494,23 @@ export class NativeIntegrationForm extends Base {
     __renderWebhookConfig() {
         var _a, _b;
         return html `
-      <p
-        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
-        class="rounded bg-error-10 text-error font-medium"
-      >
-        <foxy-i18n infer="webhook-warning" key="warning_text"></foxy-i18n>
-        <br />
-        <br />
-        <a
-          target="_blank"
-          class="text-body rounded hover-underline hover-cursor-pointer focus-outline-none focus-ring-2 focus-ring-error-50"
-          lang="en"
-          rel="noopener"
-          href="https://www.foxy.io/blog/new-feature-json-webhook/"
-        >
-          <foxy-i18n infer="webhook-warning" key="link_text"></foxy-i18n>
-        </a>
-      </p>
+      <div
+        class="flex items-start border border-error rounded"
+        style="padding: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px); gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+      >
+        ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-error" style="width: 1.25em"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>`}
+        <p>
+          <foxy-i18n infer="webhook-warning" key="warning_text"></foxy-i18n>
+          <br />
+          <a
+            target="_blank"
+            class="mt-xs inline-block rounded font-medium text-error transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+            href="https://admin.foxycart.com"
+          >
+            <foxy-i18n infer="webhook-warning" key="link_text"></foxy-i18n>
+          </a>
+        </p>
+      </div>
       ${((_a = this.__config) === null || _a === void 0 ? void 0 : _a.service) === 'json'
             ? this.__renderWebhookJsonConfig()
@@ -643,13 +643,6 @@ export class NativeIntegrationForm extends Base {
         >
         </foxy-internal-text-control>
       </div>
-      <foxy-internal-password-control
-        infer="webflow-auth"
-        .getValue=${this.__createConfigGetterFor('auth')}
-        .setValue=${this.__createConfigSetterFor('auth')}
-      >
-      </foxy-internal-password-control>
     `;
     }
     __renderZapierConfig() {