@universal-material/web 3.0.38 → 3.0.40
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/chip.d.ts +11 -4
- package/chip/chip.d.ts.map +1 -1
- package/chip/chip.js +83 -39
- package/chip/chip.js.map +1 -1
- package/chip/chip.styles.d.ts.map +1 -1
- package/chip/chip.styles.js +45 -20
- package/chip/chip.styles.js.map +1 -1
- package/chip-field/chip-field.d.ts +25 -0
- package/chip-field/chip-field.d.ts.map +1 -0
- package/chip-field/chip-field.js +133 -0
- package/chip-field/chip-field.js.map +1 -0
- package/chip-field/chip-field.styles.d.ts +2 -0
- package/chip-field/chip-field.styles.d.ts.map +1 -0
- package/chip-field/chip-field.styles.js +20 -0
- package/chip-field/chip-field.styles.js.map +1 -0
- package/custom-elements.json +2639 -1671
- package/field/field.d.ts +1 -0
- package/field/field.d.ts.map +1 -1
- package/field/field.js +12 -4
- package/field/field.js.map +1 -1
- package/field/field.styles.js +1 -1
- package/field/field.styles.js.map +1 -1
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -1
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/radio/radio.js +1 -1
- package/radio/radio.js.map +1 -1
- package/shared/button-wrapper.d.ts +1 -0
- package/shared/button-wrapper.d.ts.map +1 -1
- package/shared/button-wrapper.js +7 -3
- package/shared/button-wrapper.js.map +1 -1
- package/shared/extract-template-html.d.ts +2 -0
- package/shared/extract-template-html.d.ts.map +1 -0
- package/shared/extract-template-html.js +8 -0
- package/shared/extract-template-html.js.map +1 -0
- package/shared/text-field-base/text-field-base.d.ts +23 -0
- package/shared/text-field-base/text-field-base.d.ts.map +1 -0
- package/shared/text-field-base/text-field-base.js +87 -0
- package/shared/text-field-base/text-field-base.js.map +1 -0
- package/shared/text-field-base/text-field-base.styles.d.ts +2 -0
- package/shared/text-field-base/text-field-base.styles.d.ts.map +1 -0
- package/shared/text-field-base/text-field-base.styles.js +7 -0
- package/shared/text-field-base/text-field-base.styles.js.map +1 -0
- package/text-field/text-field.d.ts +9 -24
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +29 -96
- 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 +0 -4
- package/text-field/text-field.styles.js.map +1 -1
- package/typeahead/typeahead.d.ts +1 -0
- package/typeahead/typeahead.d.ts.map +1 -1
- package/typeahead/typeahead.js +22 -4
- package/typeahead/typeahead.js.map +1 -1
package/field/field.d.ts
CHANGED
package/field/field.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ3D,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAAwB;IAEnB,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAmC;IAClD,KAAK,
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ3D,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAAwB;IAEnB,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAmC;IAClD,KAAK,UAAS;IAC7B,SAAS,UAAS;IACH,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAE5F;;;;OAIG;IACiE,UAAU,UAAS;IAGvF,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAGpD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAiB;IAE/B,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACnC,KAAK,EAAG,WAAW,CAAC;IAErC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,iBAAiB,CAA+B;cAErC,MAAM,IAAI,kBAAkB;IAkCtC,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAS9C,iBAAiB;IAUjB,oBAAoB;IAS7B,OAAO,CAAC,kBAAkB,CAIzB;IAED,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,uBAAuB;CAMhC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}
|
package/field/field.js
CHANGED
|
@@ -13,7 +13,8 @@ let UmField = class UmField extends LitElement {
|
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments);
|
|
15
15
|
this.variant = config.fields.defaultAppearance;
|
|
16
|
-
this.empty =
|
|
16
|
+
this.empty = false;
|
|
17
|
+
this.autoEmpty = false;
|
|
17
18
|
this.disabled = false;
|
|
18
19
|
this.invalid = false;
|
|
19
20
|
/**
|
|
@@ -43,7 +44,9 @@ let UmField = class UmField extends LitElement {
|
|
|
43
44
|
this.control = null;
|
|
44
45
|
this.labelSizeObserver = null;
|
|
45
46
|
this.handleControlInput = () => {
|
|
46
|
-
this.
|
|
47
|
+
if (this.autoEmpty) {
|
|
48
|
+
this.empty = !this.control?.value;
|
|
49
|
+
}
|
|
47
50
|
};
|
|
48
51
|
}
|
|
49
52
|
render() {
|
|
@@ -55,7 +58,7 @@ let UmField = class UmField extends LitElement {
|
|
|
55
58
|
@slotchange="${this.handleLeadingIconSlotChange}">
|
|
56
59
|
</slot>
|
|
57
60
|
<slot class="label" name="label"></slot>
|
|
58
|
-
<div class="input-wrapper">
|
|
61
|
+
<div class="input-wrapper" part="wrapper">
|
|
59
62
|
<slot name="prefix"></slot>
|
|
60
63
|
<slot class="input"></slot>
|
|
61
64
|
<slot name="suffix"></slot>
|
|
@@ -90,7 +93,9 @@ let UmField = class UmField extends LitElement {
|
|
|
90
93
|
super.connectedCallback();
|
|
91
94
|
this.control = this.querySelector('input, select, button, textarea');
|
|
92
95
|
this.control?.addEventListener('input', this.handleControlInput);
|
|
93
|
-
this.
|
|
96
|
+
if (this.autoEmpty) {
|
|
97
|
+
this.empty = !this.control?.value;
|
|
98
|
+
}
|
|
94
99
|
}
|
|
95
100
|
disconnectedCallback() {
|
|
96
101
|
super.disconnectedCallback();
|
|
@@ -128,6 +133,9 @@ __decorate([
|
|
|
128
133
|
__decorate([
|
|
129
134
|
property({ type: Boolean, reflect: true })
|
|
130
135
|
], UmField.prototype, "empty", void 0);
|
|
136
|
+
__decorate([
|
|
137
|
+
property({ type: Boolean })
|
|
138
|
+
], UmField.prototype, "autoEmpty", void 0);
|
|
131
139
|
__decorate([
|
|
132
140
|
property({ type: Boolean, reflect: true })
|
|
133
141
|
], UmField.prototype, "disabled", void 0);
|
package/field/field.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAE1F,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG/B,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGsB,YAAO,GAA0B,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;QAClD,UAAK,GAAG,
|
|
1
|
+
{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field.styles.js';\n\nimport { config } from '../config.js';\n\n@customElement('u-field')\nexport class UmField extends LitElement {\n static override styles = [baseStyles, styles];\n\n @property({reflect: true}) variant: 'filled' | 'outlined' = config.fields.defaultAppearance;\n @property({type: Boolean, reflect: true}) empty = false;\n @property({type: Boolean}) autoEmpty = false;\n @property({type: Boolean, reflect: true}) disabled = false;\n @property({type: Boolean, reflect: true}) invalid = false;\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 /**\n * Whether the field has a counter or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-counter', reflect: true}) hasCounter = 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 @queryAssignedElements({slot: 'counter', flatten: true})\n private readonly assignedCounters!: HTMLElement[];\n\n @query('.counter') counter: HTMLElement | undefined;\n @query('.label') label!: HTMLElement;\n\n private control: HTMLInputElement | null = null;\n private labelSizeObserver: ResizeObserver | null = null;\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"field\">\n <slot\n class=\"icon leading-icon\"\n name=\"leading-icon\"\n @slotchange=\"${this.handleLeadingIconSlotChange}\">\n </slot>\n <slot class=\"label\" name=\"label\"></slot>\n <div class=\"input-wrapper\" part=\"wrapper\">\n <slot name=\"prefix\"></slot>\n <slot class=\"input\"></slot>\n <slot name=\"suffix\"></slot>\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\">\n <slot\n class=\"error-text\"\n name=\"error-text\"\n @slotchange=\"${this.handleErrorTextSlotChange}\"></slot>\n <slot class=\"supporting-text-slot\" name=\"supporting-text\" id=\"supporting-text\"></slot>\n <slot\n class=\"counter\"\n name=\"counter\"\n @slotchange=\"${this.handleCounterSlotChange}\"></slot>\n </div>\n `;\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n\n this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties())\n this.labelSizeObserver.observe(this.label);\n this.setLabelWidthProperties();\n }\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 this.labelSizeObserver!.disconnect();\n this.labelSizeObserver = null;\n }\n\n private handleControlInput = () => {\n if (this.autoEmpty) {\n this.empty = !this.control?.value;\n }\n }\n\n private handleLeadingIconSlotChange() {\n this.label.style.transition = 'none';\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n setTimeout(() => {\n this.label.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 handleCounterSlotChange() {\n this.hasCounter = this.assignedCounters.length > 0;\n }\n\n private setLabelWidthProperties() {\n\n const width = this.label.offsetWidth;\n this.style.setProperty('--u-field-label-width', `${width}px`);\n this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-field': UmField;\n }\n}\n"]}
|
package/field/field.styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../src/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2SzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n --_label-line-height: var(--u-field-label-line-height, 1rem);\n --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n --_field-control-padding: var(--u-field-control-padding, 16px);\n --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n --_field-min-height: var(--u-field-min-height, 56px);\n --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n --_active-indicator-opacity: 1;\n --_vertical-padding: var(--u-field-vertical-padding, 8px);\n --_icon-size: var(--u-field-icon-size, 1.5rem);\n --_icon-padding: var(--u-field-icon-padding, 12px);\n --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n --_field-control-leading-padding: var(--_field-control-inline-padding);\n --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n --u-label-input-start: auto;\n --u-label-input-span-leading-offset: 0;\n --u-label-input-span-trailing-offset: 0;\n --u-text-field-horizontal-padding: 12px;\n }\n\n .field {\n display: flex;\n align-items: center;\n position: relative;\n }\n .field::before, .field::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n }\n .field::before {\n background: var(--u-color-on-surface, rgb(29, 27, 32));\n transition: opacity 150ms;\n opacity: 0;\n }\n .field::after {\n border-width: var(--u-field-border-width, 1px);\n border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n opacity: var(--u-state-hover-opacity, 0.08);\n }\n :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n }\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--_icon-size);\n color: var(--_icon-color);\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n }\n .icon::slotted(*) {\n flex-shrink: 0;\n }\n\n .leading-icon {\n margin-inline-start: var(--_icon-padding);\n }\n\n .trailing-icon {\n margin-inline-end: var(--_icon-padding);\n }\n\n .label {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n display: block;\n position: absolute;\n inset-inline-start: var(--_field-control-leading-padding);\n margin-bottom: 0;\n line-height: var(--_label-line-height);\n color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n transition: inset 200ms, font-size 200ms;\n }\n\n .input-wrapper {\n display: flex;\n align-items: center;\n flex: 1;\n padding-inline: var(--_field-control-inline-padding);\n min-height: var(--_field-min-height);\n transition: opacity 150ms;\n }\n\n .input {\n color: var(--u-on-surface-color);\n }\n .input:focus {\n outline: 0;\n }\n .input::slotted(*) {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n width: 100%;\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n min-height: var(--_control-line-height);\n line-height: var(--_control-line-height);\n padding: 0;\n margin: 0;\n appearance: none;\n background: transparent;\n border: none;\n outline: 0 !important;\n }\n .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n transition: color 150ms 100ms;\n }\n .input::slotted(:is(input, textarea))::placeholder {\n color: var(--_field-placeholder-color);\n }\n\n .supporting-text {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-inline: 16px;\n gap: 16px;\n }\n .supporting-text .supporting-text-slot {\n display: block;\n }\n .supporting-text ::slotted(*) {\n display: inline-block;\n margin-top: 4px;\n }\n\n .error-text {\n display: none;\n }\n\n .counter {\n display: none;\n margin-inline-start: auto;\n }\n\n :host([has-counter]) .counter {\n display: block;\n }\n\n :host([has-leading-icon]) {\n --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host(:not([has-leading-icon])) .leading-icon {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing-icon {\n display: none;\n }\n\n :host(:focus-within) {\n --u-field-border-width: var(--_focus-border-width);\n }\n :host(:focus-within) .field::after {\n border-color: var(--u-field-focused-border-color, var(--_color-primary));\n }\n :host(:focus-within) .label {\n color: var(--u-field-label-focused-color, var(--_color-primary));\n }\n\n :host([invalid]) .field::after {\n border-color: var(--u-field-error-border-color, var(--_color-error));\n }\n :host([invalid]) .label {\n color: var(--u-field-label-error-color, var(--_color-error));\n }\n :host([invalid]) .supporting-text {\n color: var(--u-field-supporting-text-error-color, var(--_color-error));\n }\n :host([invalid]) .trailing-icon {\n color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n }\n :host([invalid]) .leading-icon {\n color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n }\n\n :host([invalid][has-error-text]) .error-text {\n display: block;\n }\n :host([invalid][has-error-text]) .supporting-text-slot {\n display: none;\n }\n\n :host([disabled]) .field::after {\n border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n }\n :host([disabled]) .supporting-text {\n color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .label {\n color: var(--u-field-label-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(*) {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .trailing-icon {\n color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .leading-icon {\n color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n }\n\n :host([variant=filled]) .field {\n border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n }\n :host([variant=filled]) .field::after {\n border-bottom-style: solid;\n }\n :host([variant=filled]) .label {\n top: var(--_vertical-padding);\n }\n :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n display: block;\n }\n :host([variant=filled]) .input-wrapper {\n padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));\n padding-bottom: var(--_vertical-padding);\n }\n\n :host([variant=filled][disabled]) .field {\n background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n }\n\n :host([variant=outlined]) .field::after {\n --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n border-style: solid;\n clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n transition: clip-path 100ms;\n }\n :host([variant=outlined]) .label {\n top: calc(var(--_label-line-height) / -2);\n }\n\n :host([variant=outlined]:focus-within) .field::after,\n :host([variant=outlined]:not([empty])) .field::after {\n --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n }\n :host([variant=outlined]:focus-within) .label,\n :host([variant=outlined]:not([empty])) .label {\n inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n }\n\n :host([empty]) ::slotted(select) {\n color: var(--_field-placeholder-color);\n }\n\n :host([empty]:not(:focus-within)) .label {\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n pointer-events: none;\n top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n }\n :host([empty]:not(:focus-within)) .input-wrapper {\n opacity: 0;\n }\n :host([empty]:not(:focus-within)) .input,\n :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n :host([empty]:not(:focus-within)) ::slotted(select) {\n color: transparent;\n transition: color 150ms;\n }\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../src/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2SzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n --_label-line-height: var(--u-field-label-line-height, 1rem);\n --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n --_field-control-padding: var(--u-field-control-padding, 16px);\n --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n --_field-min-height: var(--u-field-min-height, 56px);\n --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n --_active-indicator-opacity: 1;\n --_vertical-padding: var(--u-field-vertical-padding, 8px);\n --_icon-size: var(--u-field-icon-size, 1.5rem);\n --_icon-padding: var(--u-field-icon-padding, 12px);\n --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n --_field-control-leading-padding: var(--_field-control-inline-padding);\n --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n --u-label-input-start: auto;\n --u-label-input-span-leading-offset: 0;\n --u-label-input-span-trailing-offset: 0;\n --u-text-field-horizontal-padding: 12px;\n }\n\n .field {\n display: flex;\n align-items: center;\n position: relative;\n }\n .field::before, .field::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n }\n .field::before {\n background: var(--u-color-on-surface, rgb(29, 27, 32));\n transition: opacity 150ms;\n opacity: 0;\n }\n .field::after {\n border-width: var(--u-field-border-width, 1px);\n border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n opacity: var(--u-state-hover-opacity, 0.08);\n }\n :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n }\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--_icon-size);\n color: var(--_icon-color);\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n }\n .icon::slotted(*) {\n flex-shrink: 0;\n }\n\n .leading-icon {\n margin-inline-start: var(--_icon-padding);\n }\n\n .trailing-icon {\n margin-inline-end: var(--_icon-padding);\n }\n\n .label {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n display: block;\n position: absolute;\n inset-inline-start: var(--_field-control-leading-padding);\n margin-bottom: 0;\n line-height: var(--_label-line-height);\n color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n transition: inset 200ms, font-size 200ms;\n }\n\n .input-wrapper {\n display: flex;\n align-items: center;\n flex: 1;\n padding-inline: var(--_field-control-inline-padding);\n min-height: var(--_field-min-height);\n transition: opacity 150ms;\n }\n\n .input {\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n .input:focus {\n outline: 0;\n }\n .input::slotted(*) {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n width: 100%;\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n min-height: var(--_control-line-height);\n line-height: var(--_control-line-height);\n padding: 0;\n margin: 0;\n appearance: none;\n background: transparent;\n border: none;\n outline: 0 !important;\n }\n .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n transition: color 150ms 100ms;\n }\n .input::slotted(:is(input, textarea))::placeholder {\n color: var(--_field-placeholder-color);\n }\n\n .supporting-text {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-inline: 16px;\n gap: 16px;\n }\n .supporting-text .supporting-text-slot {\n display: block;\n }\n .supporting-text ::slotted(*) {\n display: inline-block;\n margin-top: 4px;\n }\n\n .error-text {\n display: none;\n }\n\n .counter {\n display: none;\n margin-inline-start: auto;\n }\n\n :host([has-counter]) .counter {\n display: block;\n }\n\n :host([has-leading-icon]) {\n --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host(:not([has-leading-icon])) .leading-icon {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing-icon {\n display: none;\n }\n\n :host(:focus-within) {\n --u-field-border-width: var(--_focus-border-width);\n }\n :host(:focus-within) .field::after {\n border-color: var(--u-field-focused-border-color, var(--_color-primary));\n }\n :host(:focus-within) .label {\n color: var(--u-field-label-focused-color, var(--_color-primary));\n }\n\n :host([invalid]) .field::after {\n border-color: var(--u-field-error-border-color, var(--_color-error));\n }\n :host([invalid]) .label {\n color: var(--u-field-label-error-color, var(--_color-error));\n }\n :host([invalid]) .supporting-text {\n color: var(--u-field-supporting-text-error-color, var(--_color-error));\n }\n :host([invalid]) .trailing-icon {\n color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n }\n :host([invalid]) .leading-icon {\n color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n }\n\n :host([invalid][has-error-text]) .error-text {\n display: block;\n }\n :host([invalid][has-error-text]) .supporting-text-slot {\n display: none;\n }\n\n :host([disabled]) .field::after {\n border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n }\n :host([disabled]) .supporting-text {\n color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .label {\n color: var(--u-field-label-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(*) {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .trailing-icon {\n color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .leading-icon {\n color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n }\n\n :host([variant=filled]) .field {\n border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n }\n :host([variant=filled]) .field::after {\n border-bottom-style: solid;\n }\n :host([variant=filled]) .label {\n top: var(--_vertical-padding);\n }\n :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n display: block;\n }\n :host([variant=filled]) .input-wrapper {\n padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));\n padding-bottom: var(--_vertical-padding);\n }\n\n :host([variant=filled][disabled]) .field {\n background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n }\n\n :host([variant=outlined]) .field::after {\n --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n border-style: solid;\n clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n transition: clip-path 100ms;\n }\n :host([variant=outlined]) .label {\n top: calc(var(--_label-line-height) / -2);\n }\n\n :host([variant=outlined]:focus-within) .field::after,\n :host([variant=outlined]:not([empty])) .field::after {\n --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n }\n :host([variant=outlined]:focus-within) .label,\n :host([variant=outlined]:not([empty])) .label {\n inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n }\n\n :host([empty]) ::slotted(select) {\n color: var(--_field-placeholder-color);\n }\n\n :host([empty]:not(:focus-within)) .label {\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n pointer-events: none;\n top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n }\n :host([empty]:not(:focus-within)) .input-wrapper {\n opacity: 0;\n }\n :host([empty]:not(:focus-within)) .input,\n :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n :host([empty]:not(:focus-within)) ::slotted(select) {\n color: transparent;\n transition: color 150ms;\n }\n`;\n"]}
|
package/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ import './button/icon-button.js';
|
|
|
6
6
|
import './card/card.js';
|
|
7
7
|
import './chip/chip.js';
|
|
8
8
|
import './chip/chip-set.js';
|
|
9
|
+
import './chip-field/chip-field.js';
|
|
9
10
|
import './checkbox/checkbox.js';
|
|
10
11
|
import './checkbox/checkbox-list-item.js';
|
|
11
12
|
import './radio/radio.js';
|
|
@@ -34,6 +35,7 @@ export * from './button/fab.js';
|
|
|
34
35
|
export * from './button/icon-button.js';
|
|
35
36
|
export * from './card/card.js';
|
|
36
37
|
export * from './chip/chip.js';
|
|
38
|
+
export * from './chip-field/chip-field.js';
|
|
37
39
|
export * from './chip/chip-set.js';
|
|
38
40
|
export * from './card/card-content.js';
|
|
39
41
|
export * from './card/card-media.js';
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}
|
package/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import './button/icon-button.js';
|
|
|
6
6
|
import './card/card.js';
|
|
7
7
|
import './chip/chip.js';
|
|
8
8
|
import './chip/chip-set.js';
|
|
9
|
+
import './chip-field/chip-field.js';
|
|
9
10
|
import './checkbox/checkbox.js';
|
|
10
11
|
import './checkbox/checkbox-list-item.js';
|
|
11
12
|
import './radio/radio.js';
|
|
@@ -34,6 +35,7 @@ export * from './button/fab.js';
|
|
|
34
35
|
export * from './button/icon-button.js';
|
|
35
36
|
export * from './card/card.js';
|
|
36
37
|
export * from './chip/chip.js';
|
|
38
|
+
export * from './chip-field/chip-field.js';
|
|
37
39
|
export * from './chip/chip-set.js';
|
|
38
40
|
export * from './card/card-content.js';
|
|
39
41
|
export * from './card/card-media.js';
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC","sourcesContent":["import './app-bar/top-app-bar.js';\nimport './button/button.js';\nimport './button/button-set.js';\nimport './button/fab.js';\nimport './button/icon-button.js';\nimport './card/card.js';\nimport './chip/chip.js';\nimport './chip/chip-set.js';\nimport './checkbox/checkbox.js';\nimport './checkbox/checkbox-list-item.js';\nimport './radio/radio.js';\nimport './radio/radio-list-item.js';\nimport './switch/switch.js';\nimport './switch/switch-list-item.js';\nimport './elevation/elevation.js';\nimport './field/field.js';\nimport './text-field/text-field.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './navigation/drawer.js';\nimport './navigation/drawer-item.js';\nimport './navigation/side-navigation.js';\nimport './ripple/ripple.js';\nimport './snackbar/snackbar.js';\nimport './typeahead/highlight.js';\nimport './typeahead/typeahead.js';\n\nexport * from './app-bar/top-app-bar.js';\nexport * from './button/button.js';\nexport * from './button/button-base.js';\nexport * from './button/button-set.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './card/card.js';\nexport * from './chip/chip.js';\nexport * from './chip/chip-set.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './checkbox/checkbox.js';\nexport * from './radio/radio.js';\nexport * from './switch/switch.js';\nexport * from './switch/switch-list-item.js';\nexport * from './elevation/elevation.js';\nexport * from './field/field.js';\nexport * from './text-field/text-field.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './navigation/drawer.js';\nexport * from './navigation/drawer-item.js';\nexport * from './navigation/side-navigation.js';\nexport * from './ripple/ripple.js';\nexport * from './snackbar/snackbar.js';\nexport * from './theme/theme-builder.js';\nexport * from './typeahead/highlight.js';\nexport * from './typeahead/typeahead.js';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC","sourcesContent":["import './app-bar/top-app-bar.js';\nimport './button/button.js';\nimport './button/button-set.js';\nimport './button/fab.js';\nimport './button/icon-button.js';\nimport './card/card.js';\nimport './chip/chip.js';\nimport './chip/chip-set.js';\nimport './chip-field/chip-field.js';\nimport './checkbox/checkbox.js';\nimport './checkbox/checkbox-list-item.js';\nimport './radio/radio.js';\nimport './radio/radio-list-item.js';\nimport './switch/switch.js';\nimport './switch/switch-list-item.js';\nimport './elevation/elevation.js';\nimport './field/field.js';\nimport './text-field/text-field.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './navigation/drawer.js';\nimport './navigation/drawer-item.js';\nimport './navigation/side-navigation.js';\nimport './ripple/ripple.js';\nimport './snackbar/snackbar.js';\nimport './typeahead/highlight.js';\nimport './typeahead/typeahead.js';\n\nexport * from './app-bar/top-app-bar.js';\nexport * from './button/button.js';\nexport * from './button/button-base.js';\nexport * from './button/button-set.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './card/card.js';\nexport * from './chip/chip.js';\nexport * from './chip-field/chip-field.js';\nexport * from './chip/chip-set.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './checkbox/checkbox.js';\nexport * from './radio/radio.js';\nexport * from './switch/switch.js';\nexport * from './switch/switch-list-item.js';\nexport * from './elevation/elevation.js';\nexport * from './field/field.js';\nexport * from './text-field/text-field.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './navigation/drawer.js';\nexport * from './navigation/drawer-item.js';\nexport * from './navigation/side-navigation.js';\nexport * from './ripple/ripple.js';\nexport * from './snackbar/snackbar.js';\nexport * from './theme/theme-builder.js';\nexport * from './typeahead/highlight.js';\nexport * from './typeahead/typeahead.js';\n"]}
|
package/package.json
CHANGED
package/radio/radio.js
CHANGED
|
@@ -54,7 +54,7 @@ let UmRadio = class UmRadio extends UmSelectionControl {
|
|
|
54
54
|
if (!this.name) {
|
|
55
55
|
return;
|
|
56
56
|
}
|
|
57
|
-
const radios =
|
|
57
|
+
const radios = Array.from(document.querySelectorAll(`${this.tagName}[name="${this.name}"]`));
|
|
58
58
|
const lastChecked = radios
|
|
59
59
|
.reverse()
|
|
60
60
|
.find(r => r.checked);
|
package/radio/radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAG/E,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,kBAAkB;IAU1B,eAAe;QAChC,OAAO,IAAI,CAAA,+BAA+B,CAAC;IAC7C,CAAC;IAED,IAAa,OAAO;QAClB,OAAO,KAAK,CAAC,OAAO,CAAC;IACvB,CAAC;IACD,IAAa,OAAO,CAAC,KAAc;QACjC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAEtB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAA;QACzB,CAAC;IACH,CAAC;IAWD;QACE,KAAK,EAAE,CAAC;;QAnC+D,mBAAc,GAAG,KAAK,CAAC;QAE7E,cAAS,GAAyB,OAAO,CAAC;IAkC7D,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,kDAAe,CAAC,CAAC;IACxD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,uBAAA,IAAI,kDAAe,CAAC,CAAC;IAC3D,CAAC;IAoDO,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './radio.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-radio')\nexport class UmRadio extends UmSelectionControl {\n static override styles = [\n baseStyles,\n styles\n ];\n\n @property({type: Boolean, attribute: 'hide-state-layer', reflect: true}) hideStateLayer = false;\n\n protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n protected override renderIndicator(): HTMLTemplateResult {\n return html`<div class=\"indicator\"></div>`;\n }\n\n override get checked() {\n return super.checked;\n }\n override set checked(value: boolean) {\n super.checked = value;\n\n if (!value) {\n return;\n }\n\n this.uncheckSiblings();\n\n if (this.input) {\n this.input.tabIndex = 0\n }\n }\n\n get #siblings(): UmRadio[] {\n if (!this.name) {\n return [this];\n }\n\n return Array\n .from((<Element>this.getRootNode()).querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n }\n\n constructor() {\n super();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.ensureOnlyOneChecked();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this.#handleKeyDown);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.#handleKeyDown);\n }\n\n #handleKeyDown(event: KeyboardEvent) {\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n\n if (!isLeft && !isRight && !isDown && !isUp) {\n return;\n }\n\n // Don't try to select another sibling if there aren't any.\n const siblings = this.#siblings;\n\n if (!siblings.length) {\n return;\n }\n\n event.preventDefault();\n\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n const factor = forwards ? 1 : -1;\n\n const thisIndex = siblings.indexOf(this);\n let nextIndex = thisIndex + factor;\n\n while (nextIndex !== thisIndex) {\n if (nextIndex >= siblings.length) {\n // Return to start if moving past the last item.\n nextIndex = 0;\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = siblings.length - 1;\n }\n\n const nextSibling = siblings[nextIndex];\n\n if (nextSibling.disabled) {\n nextIndex += factor;\n\n continue;\n }\n\n nextSibling.checked = true;\n nextSibling.input.focus();\n nextSibling.dispatchEvent(new Event('change', {bubbles: true}));\n break;\n }\n }\n\n private ensureOnlyOneChecked() {\n if (!this.name) {\n return;\n }\n\n const radios = Array.from(document.querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n const lastChecked = radios\n .reverse()\n .find(r => r.checked);\n\n if (!lastChecked) {\n return;\n }\n\n lastChecked.checked = true;\n }\n\n private uncheckSiblings() {\n for (const radio of this.#siblings) {\n if (radio === this) {\n continue;\n }\n\n if (radio.input) {\n radio.input.tabIndex = -1;\n }\n\n radio.checked = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-radio': UmRadio;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAE7B,8BAAsB,eAAgB,SAAQ,UAAU;;IAEtD;;OAEG;IACuC,QAAQ,UAAS;
|
|
1
|
+
{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAE7B,8BAAsB,eAAgB,SAAQ,UAAU;;IAEtD;;OAEG;IACuC,QAAQ,UAAS;IAElD,YAAY,UAAQ;IAE7B;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,SAAS,CAAC,QAAQ,CAAC,aAAa,EAAG,WAAW,CAAC;IAC9C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE1C,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM,IAAI,kBAAkB;IAM/C,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,UAAU;IAiBlB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAKb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI;IAIvC,OAAO,CAAC,iBAAiB;IA8BzB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}
|
package/shared/button-wrapper.js
CHANGED
|
@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
11
11
|
};
|
|
12
12
|
var _UmButtonWrapper_instances, _UmButtonWrapper_innerClickHandler;
|
|
13
13
|
import { html, LitElement, nothing } from 'lit';
|
|
14
|
-
import { property, query } from 'lit/decorators.js';
|
|
14
|
+
import { property, query, state } from 'lit/decorators.js';
|
|
15
15
|
import { redispatchEvent } from './redispatch-event.js';
|
|
16
16
|
import '../elevation/elevation.js';
|
|
17
17
|
import '../ripple/ripple.js';
|
|
@@ -23,6 +23,7 @@ export class UmButtonWrapper extends LitElement {
|
|
|
23
23
|
* Whether the button is disabled or not.
|
|
24
24
|
*/
|
|
25
25
|
this.disabled = false;
|
|
26
|
+
this.renderRipple = true;
|
|
26
27
|
this.innerRole = null;
|
|
27
28
|
}
|
|
28
29
|
get pathname() {
|
|
@@ -44,7 +45,7 @@ export class UmButtonWrapper extends LitElement {
|
|
|
44
45
|
.role=${this.innerRole}
|
|
45
46
|
type="button"
|
|
46
47
|
@click=${__classPrivateFieldGet(this, _UmButtonWrapper_instances, "m", _UmButtonWrapper_innerClickHandler)}>
|
|
47
|
-
<u-ripple ?disabled=${this.disabled}></u-ripple>
|
|
48
|
+
<u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>
|
|
48
49
|
<u-elevation></u-elevation>
|
|
49
50
|
</button>
|
|
50
51
|
<div class="content">${this.renderContent()}</div>`;
|
|
@@ -61,7 +62,7 @@ export class UmButtonWrapper extends LitElement {
|
|
|
61
62
|
target=${this.target || nothing}
|
|
62
63
|
@click=${__classPrivateFieldGet(this, _UmButtonWrapper_instances, "m", _UmButtonWrapper_innerClickHandler)}>
|
|
63
64
|
<u-elevation></u-elevation>
|
|
64
|
-
<u-ripple ?disabled=${this.disabled}></u-ripple>
|
|
65
|
+
<u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>
|
|
65
66
|
</a>
|
|
66
67
|
<div class="content">${this.renderContent()}</div>`;
|
|
67
68
|
}
|
|
@@ -109,6 +110,9 @@ _UmButtonWrapper_instances = new WeakSet(), _UmButtonWrapper_innerClickHandler =
|
|
|
109
110
|
__decorate([
|
|
110
111
|
property({ type: Boolean, reflect: true })
|
|
111
112
|
], UmButtonWrapper.prototype, "disabled", void 0);
|
|
113
|
+
__decorate([
|
|
114
|
+
state()
|
|
115
|
+
], UmButtonWrapper.prototype, "renderRipple", void 0);
|
|
112
116
|
__decorate([
|
|
113
117
|
property()
|
|
114
118
|
], UmButtonWrapper.prototype, "href", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { redispatchEvent } from './redispatch-event.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\n\nexport abstract class UmButtonWrapper extends LitElement {\n\n /**\n * Whether the button is disabled or not.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @state() renderRipple = true;\n\n /**\n * The URL that the link button points to.\n */\n @property() href: string | undefined;\n\n /**\n * Where to display the linked `href` URL for a link button. Common options\n * include `_blank` to open in a new tab.\n */\n @property() target: string | undefined;\n\n @property() name: string | undefined;\n\n @query('.button') protected readonly buttonElement!: HTMLElement;\n @query('u-ripple') private readonly ripple!: UmRipple;\n\n protected innerRole: string | null = null;\n\n get pathname(): string {\n return (<HTMLAnchorElement>this.buttonElement)?.pathname\n }\n\n protected override render(): HTMLTemplateResult {\n return typeof this.href === 'string'\n ? this.renderLink()\n : this.renderButton();\n }\n\n private renderButton() {\n return html`\n <button\n id=\"button\"\n class=\"button focus-ring\"\n ?disabled=${this.disabled}\n aria-label=${this.getAriaLabel() || nothing}\n aria-labelledby=\"${this.getAriaLabel() ? nothing : 'text'}\"\n .role=${this.innerRole}\n type=\"button\"\n @click=${this.#innerClickHandler}>\n <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n <u-elevation></u-elevation>\n </button>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n private renderLink() {\n return html`<a\n id=\"link\"\n class=\"button\"\n href=${this.disabled ? nothing : this.href}\n aria-disabled=${this.disabled || nothing}\n aria-label=${this.ariaLabel || nothing}\n aria-labelledby=\"${this.ariaLabel ? nothing : 'text'}\"\n .role=${this.innerRole}\n target=${this.target || nothing}\n @click=${this.#innerClickHandler}>\n <u-elevation></u-elevation>\n <u-ripple ?disabled=${this.disabled || !this.renderRipple}></u-ripple>\n </a>\n <div class=\"content\">${this.renderContent()}</div>`;\n }\n\n protected abstract renderContent(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this.innerFocusHandler)\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this.innerFocusHandler);\n }\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n\n this.buttonElement?.blur();\n }\n\n protected getAriaLabel(): string | null {\n return this.ariaLabel;\n }\n\n private innerFocusHandler(): void {\n const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n if (tabIndexAttributeValue !== \"0\") {\n return;\n }\n \n this.removeAttribute('tabindex');\n setTimeout(() => this.buttonElement?.focus());\n }\n\n #innerClickHandler(event: MouseEvent): void {\n \n if (this.disabled) {\n return;\n }\n\n const preventDefault = !redispatchEvent(this, event);\n\n if (preventDefault) {\n return;\n }\n\n if (!(<PointerEvent>event).pointerType) {\n this.ripple.createRipple();\n }\n\n this.handleClick(event);\n }\n\n protected handleClick(_: UIEvent): void {\n\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"extract-template-html.d.ts","sourceRoot":"","sources":["../../src/shared/extract-template-html.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,mBAAmB,UAQhE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"extract-template-html.js","sourceRoot":"","sources":["../../src/shared/extract-template-html.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,mBAAmB,CAAC,QAA6B;IAC/D,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,MAAM,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC1D,IAAI,IAAI,KAAK,CAAC,SAAS,CAAC;IAC1B,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["export function extractTemplateHtml(template: HTMLTemplateElement) {\n let html = '';\n\n for (const child of Array.from(template.content.children)) {\n html += child.outerHTML;\n }\n\n return html;\n}\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
2
|
+
import { HTMLTemplateResult, LitElement } from 'lit';
|
|
3
|
+
import '../../field/field.js';
|
|
4
|
+
export declare abstract class UmTextFieldBase extends LitElement {
|
|
5
|
+
static readonly formAssociated = true;
|
|
6
|
+
static styles: CSSResultGroup;
|
|
7
|
+
static shadowRootOptions: ShadowRootInit;
|
|
8
|
+
variant: "filled" | "outlined";
|
|
9
|
+
label: string | undefined;
|
|
10
|
+
counter: string | undefined;
|
|
11
|
+
placeholder: string | undefined;
|
|
12
|
+
supportingText: string | undefined;
|
|
13
|
+
errorText: string | undefined;
|
|
14
|
+
disabled: boolean;
|
|
15
|
+
invalid: boolean;
|
|
16
|
+
get form(): HTMLFormElement | null;
|
|
17
|
+
get empty(): boolean;
|
|
18
|
+
protected readonly elementInternals: ElementInternals;
|
|
19
|
+
constructor();
|
|
20
|
+
protected render(): HTMLTemplateResult;
|
|
21
|
+
protected abstract renderContent(): HTMLTemplateResult;
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=text-field-base.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-field-base.d.ts","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ3D,OAAO,sBAAsB,CAAC;AAE9B,8BAAsB,eAAgB,SAAQ,UAAU;IACtD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEU,OAAO,wBAAmC;IAC1C,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACb,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IACjB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,IACI,KAAK,YAAoB;IAE7B,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;;cAOnC,MAAM,IAAI,kBAAkB;IAiC/C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;CACvD"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, LitElement } from 'lit';
|
|
8
|
+
import { property, state } from 'lit/decorators.js';
|
|
9
|
+
import { styles as baseStyles } from '../base.styles.js';
|
|
10
|
+
import { styles } from './text-field-base.styles.js';
|
|
11
|
+
import { config } from '../../config.js';
|
|
12
|
+
import '../../field/field.js';
|
|
13
|
+
export class UmTextFieldBase extends LitElement {
|
|
14
|
+
get form() {
|
|
15
|
+
return this.elementInternals.form;
|
|
16
|
+
}
|
|
17
|
+
get empty() { return false; }
|
|
18
|
+
constructor() {
|
|
19
|
+
super();
|
|
20
|
+
this.variant = config.fields.defaultAppearance;
|
|
21
|
+
this.disabled = false;
|
|
22
|
+
this.invalid = false;
|
|
23
|
+
this.elementInternals = this.attachInternals();
|
|
24
|
+
}
|
|
25
|
+
render() {
|
|
26
|
+
const label = this.label
|
|
27
|
+
? html `<label slot="label" id="label">${this.label}</label>`
|
|
28
|
+
: html `<slot slot="label" name="label"></slot>`;
|
|
29
|
+
const supportingText = this.supportingText
|
|
30
|
+
? html `<span slot="supporting-text">${this.supportingText}</span>`
|
|
31
|
+
: html `<slot slot="supporting-text" name="supporting-text"></slot>`;
|
|
32
|
+
const errorText = this.errorText
|
|
33
|
+
? html `<span slot="error-text">${this.errorText}</span>`
|
|
34
|
+
: html `<slot slot="error-text" name="error-text"></slot>`;
|
|
35
|
+
const counter = this.counter
|
|
36
|
+
? html `<span slot="counter">${this.counter}</span>`
|
|
37
|
+
: html `<slot slot="counter" name="counter"></slot>`;
|
|
38
|
+
return html `
|
|
39
|
+
<u-field
|
|
40
|
+
.variant=${this.variant}
|
|
41
|
+
?invalid=${this.invalid}
|
|
42
|
+
?disabled=${this.disabled}
|
|
43
|
+
?empty=${this.empty}>
|
|
44
|
+
${label}
|
|
45
|
+
<slot slot="leading-icon" name="leading-icon"></slot>
|
|
46
|
+
${this.renderContent()}
|
|
47
|
+
<slot slot="trailing-icon" name="trailing-icon"></slot>
|
|
48
|
+
${supportingText}
|
|
49
|
+
${errorText}
|
|
50
|
+
${counter}
|
|
51
|
+
</u-field>`;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
UmTextFieldBase.formAssociated = true;
|
|
55
|
+
UmTextFieldBase.styles = [baseStyles, styles];
|
|
56
|
+
UmTextFieldBase.shadowRootOptions = {
|
|
57
|
+
...LitElement.shadowRootOptions,
|
|
58
|
+
delegatesFocus: true,
|
|
59
|
+
};
|
|
60
|
+
__decorate([
|
|
61
|
+
property()
|
|
62
|
+
], UmTextFieldBase.prototype, "variant", void 0);
|
|
63
|
+
__decorate([
|
|
64
|
+
property()
|
|
65
|
+
], UmTextFieldBase.prototype, "label", void 0);
|
|
66
|
+
__decorate([
|
|
67
|
+
property()
|
|
68
|
+
], UmTextFieldBase.prototype, "counter", void 0);
|
|
69
|
+
__decorate([
|
|
70
|
+
property({ reflect: true })
|
|
71
|
+
], UmTextFieldBase.prototype, "placeholder", void 0);
|
|
72
|
+
__decorate([
|
|
73
|
+
property({ attribute: 'supporting-text' })
|
|
74
|
+
], UmTextFieldBase.prototype, "supportingText", void 0);
|
|
75
|
+
__decorate([
|
|
76
|
+
property({ attribute: 'error-text' })
|
|
77
|
+
], UmTextFieldBase.prototype, "errorText", void 0);
|
|
78
|
+
__decorate([
|
|
79
|
+
property({ type: Boolean, reflect: true })
|
|
80
|
+
], UmTextFieldBase.prototype, "disabled", void 0);
|
|
81
|
+
__decorate([
|
|
82
|
+
property({ type: Boolean, reflect: true })
|
|
83
|
+
], UmTextFieldBase.prototype, "invalid", void 0);
|
|
84
|
+
__decorate([
|
|
85
|
+
state()
|
|
86
|
+
], UmTextFieldBase.prototype, "empty", null);
|
|
87
|
+
//# sourceMappingURL=text-field-base.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-field-base.js","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,sBAAsB,CAAC;AAE9B,MAAM,OAAgB,eAAgB,SAAQ,UAAU;IAoBtD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAGD,IAAI,KAAK,KAAK,OAAO,KAAK,CAAC,CAAC,CAAC;IAI7B;QACE,KAAK,EAAE,CAAC;QApBE,YAAO,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,CAAC;QAOZ,aAAQ,GAAG,KAAK,CAAC;QACjB,YAAO,GAAG,KAAK,CAAC;QAaxD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEkB,MAAM;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK;YACtB,CAAC,CAAC,IAAI,CAAA,kCAAkC,IAAI,CAAC,KAAK,UAAU;YAC5D,CAAC,CAAC,IAAI,CAAA,yCAAyC,CAAC;QAElD,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc;YACxC,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,cAAc,SAAS;YAClE,CAAC,CAAC,IAAI,CAAA,6DAA6D,CAAC;QAEtE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS;YAC9B,CAAC,CAAC,IAAI,CAAA,2BAA2B,IAAI,CAAC,SAAS,SAAS;YACxD,CAAC,CAAC,IAAI,CAAA,mDAAmD,CAAC;QAE5D,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO;YAC1B,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,OAAO,SAAS;YACnD,CAAC,CAAC,IAAI,CAAA,6CAA6C,CAAC;QAEtD,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;mBACZ,IAAI,CAAC,OAAO;oBACX,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,KAAK;UACjB,KAAK;;UAEL,IAAI,CAAC,aAAa,EAAE;;UAEpB,cAAc;UACd,SAAS;UACT,OAAO;iBACA,CAAC;IAChB,CAAC;;AAhEe,8BAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,sBAAM,GAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvC,CAAwC;AAE9C,iCAAiB,GAAmB;IAClD,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEU;IAAX,QAAQ,EAAE;gDAA2C;AAC1C;IAAX,QAAQ,EAAE;8CAA2B;AAC1B;IAAX,QAAQ,EAAE;gDAA6B;AACb;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAiC;AACjB;IAAzC,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAC,CAAC;uDAAoC;AACxC;IAApC,QAAQ,CAAC,EAAC,SAAS,EAAE,YAAY,EAAC,CAAC;kDAA+B;AAEzB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDAAkB;AACjB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;gDAAiB;AAO1D;IADC,KAAK,EAAE;4CACqB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../base.styles.js';\nimport { styles } from './text-field-base.styles.js';\n\nimport { config } from '../../config.js';\n\nimport '../../field/field.js';\n\nexport abstract class UmTextFieldBase extends LitElement {\n static readonly formAssociated = true;\n\n static override styles: CSSResultGroup = [baseStyles, styles];\n\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property() variant = config.fields.defaultAppearance;\n @property() label: string | undefined;\n @property() counter: string | undefined;\n @property({reflect: true}) placeholder: 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}) disabled = false;\n @property({type: Boolean, reflect: true}) invalid = false;\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n @state()\n get empty() { return false; }\n\n protected readonly elementInternals: ElementInternals;\n\n constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n\n protected override render(): HTMLTemplateResult {\n const label = this.label\n ? html`<label slot=\"label\" id=\"label\">${this.label}</label>`\n : html`<slot slot=\"label\" name=\"label\"></slot>`;\n\n const supportingText = this.supportingText\n ? html`<span slot=\"supporting-text\">${this.supportingText}</span>`\n : html`<slot slot=\"supporting-text\" name=\"supporting-text\"></slot>`;\n\n const errorText = this.errorText\n ? html`<span slot=\"error-text\">${this.errorText}</span>`\n : html`<slot slot=\"error-text\" name=\"error-text\"></slot>`;\n\n const counter = this.counter\n ? html`<span slot=\"counter\">${this.counter}</span>`\n : html`<slot slot=\"counter\" name=\"counter\"></slot>`;\n\n return html`\n <u-field\n .variant=${this.variant}\n ?invalid=${this.invalid}\n ?disabled=${this.disabled}\n ?empty=${this.empty}>\n ${label}\n <slot slot=\"leading-icon\" name=\"leading-icon\"></slot>\n ${this.renderContent()}\n <slot slot=\"trailing-icon\" name=\"trailing-icon\"></slot>\n ${supportingText}\n ${errorText}\n ${counter}\n </u-field>`;\n }\n\n protected abstract renderContent(): HTMLTemplateResult;\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-field-base.styles.d.ts","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAIlB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-field-base.styles.js","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;CAIzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n cursor: text;\n }\n`;\n"]}
|