@universal-material/web 3.0.58 → 3.0.60
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.
- package/chip-field/chip-field.js +1 -1
- package/chip-field/chip-field.js.map +1 -1
- package/custom-elements.json +3270 -3270
- package/field/field-base.d.ts +1 -2
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js +3 -5
- package/field/field-base.js.map +1 -1
- package/field/field.d.ts.map +1 -1
- package/field/field.js +5 -1
- package/field/field.js.map +1 -1
- package/package.json +1 -1
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +19 -13
- package/text-field/text-field.js.map +1 -1
- package/text-field/text-field.styles.d.ts.map +1 -1
- package/text-field/text-field.styles.js +11 -4
- package/text-field/text-field.styles.js.map +1 -1
package/field/field-base.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Context, ContextProvider } from '@lit/context';
|
|
2
|
-
import { PropertyValues } from '@lit/reactive-element';
|
|
3
2
|
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
4
3
|
import { HTMLTemplateResult, LitElement } from 'lit';
|
|
5
4
|
import { UmFieldDefaults } from './field-defaults.js';
|
|
@@ -42,7 +41,7 @@ export declare abstract class UmFieldBase extends LitElement {
|
|
|
42
41
|
constructor();
|
|
43
42
|
protected render(): HTMLTemplateResult;
|
|
44
43
|
protected abstract renderControl(): HTMLTemplateResult;
|
|
45
|
-
|
|
44
|
+
connectedCallback(): void;
|
|
46
45
|
disconnectedCallback(): void;
|
|
47
46
|
private handleLeadingIconSlotChange;
|
|
48
47
|
private handleTrailingIconSlotChange;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM
|
|
1
|
+
{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAO3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAEtD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAO7H;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAG5F,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,YAAY,EAAG,WAAW,CAAC;IACvB,SAAS,EAAG,WAAW,CAAC;IAE7C,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,kBAAkB;IAqC/C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAQjB,oBAAoB;IAO7B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;CAWhC"}
|
package/field/field-base.js
CHANGED
|
@@ -56,9 +56,7 @@ export class UmFieldBase extends LitElement {
|
|
|
56
56
|
<slot name="label">${this.label}</slot>
|
|
57
57
|
</label>
|
|
58
58
|
<div class="input-wrapper" part="wrapper">
|
|
59
|
-
|
|
60
|
-
<div class="input">${this.renderControl()}</div>
|
|
61
|
-
<slot name="suffix"></slot>
|
|
59
|
+
${this.renderControl()}
|
|
62
60
|
</div>
|
|
63
61
|
<slot
|
|
64
62
|
class="icon trailing-icon"
|
|
@@ -82,8 +80,8 @@ export class UmFieldBase extends LitElement {
|
|
|
82
80
|
</div>
|
|
83
81
|
`;
|
|
84
82
|
}
|
|
85
|
-
|
|
86
|
-
super.
|
|
83
|
+
connectedCallback() {
|
|
84
|
+
super.connectedCallback();
|
|
87
85
|
this.hasLeadingIcon = !!this.assignedLeadingIcons.length;
|
|
88
86
|
this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties());
|
|
89
87
|
this.labelSizeObserver.observe(this.labelElement);
|
package/field/field-base.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAW,eAAe,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\n\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport abstract class UmFieldBase extends LitElement {\n static override styles: CSSResultGroup = [baseStyles, styles];\n\n @consume({context: fieldDefaultsContext, subscribe: true})\n @state()\n private config: UmFieldDefaults | undefined;\n\n @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n @property() label: string | undefined;\n @property() counter: string | undefined;\n @property({attribute: 'supporting-text'}) supportingText: string | undefined;\n @property({attribute: 'error-text'}) errorText: string | undefined;\n\n @property({type: Boolean, reflect: true}) empty = false;\n @property({type: Boolean, reflect: true}) disabled = false;\n @property({type: Boolean, reflect: true}) invalid = false;\n\n static setDefaults(contextRoot: HTMLElement, config: UmFieldDefaults): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {\n return new ContextProvider(contextRoot, {\n context: fieldDefaultsContext,\n initialValue: config\n });\n }\n\n /**\n * Whether the field has a leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-leading-icon', reflect: true}) hasLeadingIcon = false;\n\n /**\n * Whether the field has a trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-trailing-icon', reflect: true}) hasTrailingIcon = false;\n\n /**\n * Whether the field has an error text or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-error-text', reflect: true}) hasErrorText = false;\n\n @queryAssignedElements({slot: 'leading-icon', flatten: true})\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'trailing-icon', flatten: true})\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'error-text', flatten: true})\n private readonly assignedErrorTexts!: HTMLElement[];\n\n @query('.label') labelElement!: HTMLElement;\n @query('.container') container!: HTMLElement;\n\n private labelSizeObserver: ResizeObserver | null = null;\n\n constructor() {\n super();\n this.variant = undefined;\n }\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"container ${this.variant ?? this.config?.variant ?? 'filled'}\">\n <slot\n class=\"icon leading-icon\"\n name=\"leading-icon\"\n @slotchange=\"${this.handleLeadingIconSlotChange}\">\n </slot>\n <label class=\"label\" slot=\"label\" id=\"label\">\n <slot name=\"label\">${this.label}</slot>\n </label>\n <div class=\"input-wrapper\" part=\"wrapper\">\n ${this.renderControl()}\n </div>\n <slot\n class=\"icon trailing-icon\"\n name=\"trailing-icon\"\n @slotchange=\"${this.handleTrailingIconSlotChange}\">\n </slot>\n </div>\n <div class=\"supporting-text\" id=\"supporting-text\">\n <slot\n class=\"error-text\"\n name=\"error-text\"\n @slotchange=\"${this.handleErrorTextSlotChange}\">\n <div>${this.errorText}</div>\n </slot>\n <slot name=\"supporting-text\" id=\"supporting-text\">\n <div>${this.supportingText}</div>\n </slot>\n <slot class=\"counter\" name=\"counter\">\n <div>${this.counter}</div>\n </slot>\n </div>\n `;\n }\n\n protected abstract renderControl(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties())\n this.labelSizeObserver.observe(this.labelElement);\n this.setLabelWidthProperties();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.labelSizeObserver!.disconnect();\n this.labelSizeObserver = null;\n }\n\n private handleLeadingIconSlotChange() {\n this.labelElement.style.transition = 'none';\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n setTimeout(() => {\n this.labelElement.style.transition = '';\n });\n }\n\n private handleTrailingIconSlotChange() {\n this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n private handleErrorTextSlotChange() {\n this.hasErrorText = this.assignedErrorTexts.length > 0;\n }\n\n private setLabelWidthProperties() {\n\n const width = this.labelElement.offsetWidth;\n\n this.style.setProperty('--u-field-label-width', `${width}px`);\n this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n\n if (!width) {\n this.container.classList.add('no-label');\n }\n }\n}\n"]}
|
package/field/field.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,qBACa,OAAQ,SAAQ,WAAW;IAEX,SAAS,UAAS;IAE7C,OAAO,CAAC,OAAO,CAAiC;IAEvC,iBAAiB;IAUjB,oBAAoB;IAM7B,OAAO,CAAC,kBAAkB,CAIzB;cAEkB,aAAa;
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,qBACa,OAAQ,SAAQ,WAAW;IAEX,SAAS,UAAS;IAE7C,OAAO,CAAC,OAAO,CAAiC;IAEvC,iBAAiB;IAUjB,oBAAoB;IAM7B,OAAO,CAAC,kBAAkB,CAIzB;cAEkB,aAAa;CAOjC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}
|
package/field/field.js
CHANGED
|
@@ -32,7 +32,11 @@ let UmField = class UmField extends UmFieldBase {
|
|
|
32
32
|
this.control = null;
|
|
33
33
|
}
|
|
34
34
|
renderControl() {
|
|
35
|
-
return html
|
|
35
|
+
return html `
|
|
36
|
+
<slot name="prefix"></slot>
|
|
37
|
+
<div class="input"><slot></slot></div>
|
|
38
|
+
<slot name="suffix"></slot>
|
|
39
|
+
`;
|
|
36
40
|
}
|
|
37
41
|
};
|
|
38
42
|
__decorate([
|
package/field/field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGvC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAEsB,cAAS,GAAG,KAAK,CAAC;QAErC,YAAO,GAA4B,IAAI,CAAC;QAkBxC,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;YACpC,CAAC;QACH,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGvC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,WAAW;IAAjC;;QAEsB,cAAS,GAAG,KAAK,CAAC;QAErC,YAAO,GAA4B,IAAI,CAAC;QAkBxC,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;YACpC,CAAC;QACH,CAAC,CAAA;IASH,CAAC;IA7BU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAA4B,IAAI,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC;QAC9F,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEjE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC;QACpC,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACpE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAQkB,aAAa;QAC9B,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAjC4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAmB;AAFlC,OAAO;IADnB,aAAa,CAAC,SAAS,CAAC;GACZ,OAAO,CAmCnB","sourcesContent":["import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { UmFieldBase } from './field-base.js';\n\n@customElement('u-field')\nexport class UmField extends UmFieldBase {\n\n @property({type: Boolean}) autoEmpty = false;\n\n private control: HTMLInputElement | null = null;\n\n override connectedCallback() {\n super.connectedCallback();\n this.control = <HTMLInputElement | null>this.querySelector('input, select, button, textarea');\n this.control?.addEventListener('input', this.handleControlInput);\n\n if (this.autoEmpty) {\n this.empty = !this.control?.value;\n }\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.control?.removeEventListener('input', this.handleControlInput);\n this.control = null;\n }\n\n private handleControlInput = () => {\n if (this.autoEmpty) {\n this.empty = !this.control?.value;\n }\n }\n\n protected override renderControl() {\n return html`\n <slot name=\"prefix\"></slot>\n <div class=\"input\"><slot></slot></div>\n <slot name=\"suffix\"></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-field': UmField;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAE9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAIF,IACI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEqC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAErD,KAAK,EAAG,gBAAgB,CAAC;IAEhC,KAAK;cAIK,aAAa,IAAI,kBAAkB;
|
|
1
|
+
{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAE9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAIF,IACI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEqC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAErD,KAAK,EAAG,gBAAgB,CAAC;IAEhC,KAAK;cAIK,aAAa,IAAI,kBAAkB;CA4BvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
|
package/text-field/text-field.js
CHANGED
|
@@ -39,20 +39,26 @@ let UmTextField = class UmTextField extends UmTextFieldBase {
|
|
|
39
39
|
this.input.focus();
|
|
40
40
|
}
|
|
41
41
|
renderControl() {
|
|
42
|
-
const prefix = html
|
|
43
|
-
const suffix = html
|
|
42
|
+
// const prefix = html`<span class="prefix" slot="prefix">${this.prefixText || html`<slot name="prefix"></slot>`}</span>`;
|
|
43
|
+
// const suffix = html`<span class="suffix" slot="suffix">${this.suffixText || html`<slot name="suffix"></slot>`}</span>`;
|
|
44
44
|
return html `
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
45
|
+
<slot class="prefix" name="prefix">
|
|
46
|
+
<span>${this.prefixText}</span>
|
|
47
|
+
</slot>
|
|
48
|
+
<div class="input">
|
|
49
|
+
<input
|
|
50
|
+
part="input"
|
|
51
|
+
id=${this.id || nothing}
|
|
52
|
+
aria-labelledby="label"
|
|
53
|
+
aria-describedBy="supporting-text"
|
|
54
|
+
?disabled=${this.disabled}
|
|
55
|
+
placeholder=${this.placeholder || nothing}
|
|
56
|
+
.value=${live(__classPrivateFieldGet(this, _UmTextField_value, "f"))}
|
|
57
|
+
@input=${__classPrivateFieldGet(this, _UmTextField_instances, "m", _UmTextField_handleInput)} />
|
|
58
|
+
</div>
|
|
59
|
+
<slot class="suffix" name="suffix">
|
|
60
|
+
<span>${this.suffixText}</span>
|
|
61
|
+
</slot>`;
|
|
56
62
|
}
|
|
57
63
|
};
|
|
58
64
|
_UmTextField_value = new WeakMap();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;;QAOL,6BAAiB,EAAE,EAAC;
|
|
1
|
+
{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;;QAOL,6BAAiB,EAAE,EAAC;IAiDtB,CAAC;IA9CC,IAAI,KAAK;QACP,OAAO,uBAAA,IAAI,0BAAO,CAAC;IACrB,CAAC;IACD,IAAI,KAAK,CAAC,KAAa;QACrB,uBAAA,IAAI,sBAAU,KAAK,MAAA,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAOQ,KAAK;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAEkB,aAAa;QAE9B,0HAA0H;QAC1H,0HAA0H;QAE1H,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;;;;;eAKhB,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;wBACX,IAAI,CAAC,WAAW,IAAI,OAAO;mBAChC,IAAI,CAAC,uBAAA,IAAI,0BAAO,CAAC;mBACjB,uBAAA,IAAI,wDAAa;;;gBAGpB,IAAI,CAAC,UAAU;cACjB,CAAC;IACb,CAAC;;;;;IAGC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAChC,CAAC;AArDe,kBAAM,GAAmB;IACvC,eAAe,CAAC,MAAM;IACtB,MAAM;CACP,AAHqB,CAGpB;AAKF;IADC,QAAQ,EAAE;wCAGV;AAOqC;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC/B;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAErD;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAtB9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwDvB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles } from './text-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-text-field')\nexport class UmTextField extends UmTextFieldBase {\n\n static override styles: CSSResultGroup = [\n UmTextFieldBase.styles,\n styles\n ];\n\n #value: string = '';\n\n @property()\n get value() {\n return this.#value;\n }\n set value(value: string) {\n this.#value = value;\n this.empty = !value;\n this.elementInternals.setFormValue(value);\n }\n\n @property({attribute: 'prefix-text'}) prefixText: string | undefined;\n @property({attribute: 'suffix-text'}) suffixText: string | undefined;\n\n @query('input') input!: HTMLInputElement;\n\n override focus() {\n this.input.focus();\n }\n\n protected override renderControl(): HTMLTemplateResult {\n\n // const prefix = html`<span class=\"prefix\" slot=\"prefix\">${this.prefixText || html`<slot name=\"prefix\"></slot>`}</span>`;\n // const suffix = html`<span class=\"suffix\" slot=\"suffix\">${this.suffixText || html`<slot name=\"suffix\"></slot>`}</span>`;\n\n return html`\n <slot class=\"prefix\" name=\"prefix\">\n <span>${this.prefixText}</span>\n </slot>\n <div class=\"input\">\n <input\n part=\"input\"\n id=${this.id || nothing}\n aria-labelledby=\"label\"\n aria-describedBy=\"supporting-text\"\n ?disabled=${this.disabled}\n placeholder=${this.placeholder || nothing}\n .value=${live(this.#value)}\n @input=${this.#handleInput} />\n </div>\n <slot class=\"suffix\" name=\"suffix\">\n <span>${this.suffixText}</span>\n </slot>`;\n }\n\n #handleInput() {\n this.value = this.input.value;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-text-field': UmTextField;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwBlB,CAAC"}
|
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
|
-
.prefix
|
|
3
|
+
.prefix span:empty,
|
|
4
|
+
.suffix span:empty {
|
|
5
|
+
display: none;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.prefix::slotted(*),
|
|
9
|
+
.prefix span {
|
|
4
10
|
color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
|
|
5
11
|
margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));
|
|
6
12
|
}
|
|
7
13
|
|
|
8
|
-
.suffix
|
|
14
|
+
.suffix::slotted(*),
|
|
15
|
+
.suffix span {
|
|
9
16
|
color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
|
|
10
17
|
margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));
|
|
11
18
|
}
|
|
12
19
|
|
|
13
|
-
:host([disabled]) .prefix {
|
|
20
|
+
:host([disabled]) .prefix::slotted(*) {
|
|
14
21
|
color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));
|
|
15
22
|
}
|
|
16
|
-
:host([disabled]) .suffix {
|
|
23
|
+
:host([disabled]) .suffix::slotted(*) {
|
|
17
24
|
color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));
|
|
18
25
|
}
|
|
19
26
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n .prefix span:empty,\n .suffix span:empty {\n display: none;\n }\n\n .prefix::slotted(*),\n .prefix span {\n color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));\n }\n\n .suffix::slotted(*),\n .suffix span {\n color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));\n }\n\n :host([disabled]) .prefix::slotted(*) {\n color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n }\n :host([disabled]) .suffix::slotted(*) {\n color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n }\n`;\n"]}
|