@universal-material/web 3.0.91 → 3.0.93
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/card/card.d.ts.map +1 -1
- package/card/card.js +2 -1
- package/card/card.js.map +1 -1
- package/custom-elements.json +10254 -8425
- package/field/field-base.d.ts +3 -1
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js +22 -11
- package/field/field-base.js.map +1 -1
- package/field/field-base.styles.d.ts.map +1 -1
- package/field/field-base.styles.js +14 -6
- package/field/field-base.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/navigation/side-navigation.d.ts.map +1 -1
- package/navigation/side-navigation.js +18 -7
- package/navigation/side-navigation.js.map +1 -1
- package/package.json +4 -4
- package/select/select.d.ts +1 -1
- package/select/select.d.ts.map +1 -1
- package/select/select.js +5 -1
- package/select/select.js.map +1 -1
- package/shared/char-count-text-field/native-text-field-wrapper.d.ts +14 -0
- package/shared/char-count-text-field/native-text-field-wrapper.d.ts.map +1 -0
- package/shared/char-count-text-field/native-text-field-wrapper.js +54 -0
- package/shared/char-count-text-field/native-text-field-wrapper.js.map +1 -0
- package/shared/text-field-base/text-field-base.d.ts +1 -1
- package/shared/text-field-base/text-field-base.d.ts.map +1 -1
- package/shared/text-field-base/text-field-base.js +1 -0
- package/shared/text-field-base/text-field-base.js.map +1 -1
- package/snackbar/snackbar.d.ts.map +1 -1
- package/snackbar/snackbar.js +25 -17
- package/snackbar/snackbar.js.map +1 -1
- package/tab-bar/tab-bar.d.ts.map +1 -1
- package/tab-bar/tab-bar.js +33 -17
- package/tab-bar/tab-bar.js.map +1 -1
- package/tab-bar/tab.d.ts.map +1 -1
- package/tab-bar/tab.js +6 -5
- package/tab-bar/tab.js.map +1 -1
- package/text-area/text-area.d.ts +15 -0
- package/text-area/text-area.d.ts.map +1 -0
- package/text-area/text-area.js +51 -0
- package/text-area/text-area.js.map +1 -0
- package/text-area/text-area.styles.d.ts +2 -0
- package/text-area/text-area.styles.d.ts.map +1 -0
- package/text-area/text-area.styles.js +39 -0
- package/text-area/text-area.styles.js.map +1 -0
- package/text-field/text-field.d.ts +2 -7
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +9 -31
- 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 +14 -0
- package/text-field/text-field.styles.js.map +1 -1
- package/typeahead/typeahead.d.ts +2 -0
- package/typeahead/typeahead.d.ts.map +1 -1
- package/typeahead/typeahead.js +28 -24
- package/typeahead/typeahead.js.map +1 -1
package/select/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, svg, TemplateResult } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { styles } from './select.styles.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { UmMenuField } from '../shared/menu-field/menu-field.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { ExtendedSelect } from './extended-select.js';\nimport { UmOption } from './option.js';\nimport { SelectNavigationController } from './select-navigation-controller.js';\n\nimport './option.js';\n\n@customElement('u-select')\nexport class UmSelect extends UmTextFieldBase implements UmMenuField {\n\n static override styles = [UmTextFieldBase.styles, styles];\n\n _nativeSelect: ExtendedSelect = (() => {\n const select = <ExtendedSelect>document.createElement('select');\n select.setAttribute('tabindex', '-1');\n select.setAttribute('part', 'select');\n\n return select;\n })();\n\n #list: HTMLElement = (() => {\n const list = document.createElement('div');\n list.role = 'listbox';\n list.id = 'list';\n list.className = 'list';\n\n return list;\n })();\n\n #navigationController = new SelectNavigationController(this);\n readonly #mutationObserver: MutationObserver;\n #connected = false;\n\n /**\n * The `value` of the selected option\n */\n @state()\n get value(): string {\n return this._nativeSelect.value;\n }\n set value(value: string) {\n this._nativeSelect.value = value;\n\n if (!this.#connected) {\n return;\n }\n\n this.elementInternals.setFormValue(value);\n }\n\n @query('u-menu', true) _menu!: UmMenu;\n @query('.button', true) _button!: HTMLButtonElement;\n @query('.input', true) _input!: HTMLElement;\n\n /**\n * The index of the selected option. When there's no selected option the value is `-1`.\n */\n @state()\n get selectedIndex(): number {\n return this._nativeSelect.selectedIndex;\n }\n set selectedIndex(index: number) {\n this._nativeSelect.selectedIndex = index;\n }\n\n /**\n * An `Array` containing the selected `UmOption` or empty if there's no selected option. Multiple selection is not supported.\n */\n get selectedOptions(): UmOption[] {\n return this._nativeSelect.selectedOptions.length\n ? [this._nativeSelect.selectedOptions[0]._parent]\n : [];\n }\n\n get _options(): UmOption[] {\n const options = Array.from(this.querySelectorAll<HTMLElement>('u-option'));\n\n return options.filter(o => o instanceof UmOption) as UmOption[];\n }\n\n constructor() {\n super();\n\n this.#mutationObserver = new MutationObserver(() => this._updateOptions())\n this.#mutationObserver.observe(this, {characterData: true, childList: true, subtree: true});\n }\n\n _updateOptions() {\n\n const options = this._options;\n\n for (const option of options) {\n option._select = this;\n }\n\n this.#updateOptions(options);\n this.#updateAccessibilityList(options);\n\n const selectedOption = this.selectedOptions[0];\n\n if (!selectedOption) {\n return;\n }\n\n // eslint-disable-next-line no-self-assign\n selectedOption.selected = selectedOption.selected;\n this.empty = !selectedOption.textContent?.trim();\n this._button.setAttribute('aria-labelledby', selectedOption._listItem.id)\n }\n\n #updateOptions(options: UmOption[]) {\n const maxLength = Math.max(options.length, this._nativeSelect.children.length);\n\n for (let i = 0; i < maxLength; i++) {\n const option = options[i];\n const nativeOption = this._nativeSelect.children[i];\n\n if (!option) {\n nativeOption.remove();\n continue;\n }\n\n if (!nativeOption) {\n this._nativeSelect.appendChild(option._nativeOption);\n continue;\n }\n\n nativeOption.insertAdjacentElement('beforebegin', option._nativeOption);\n }\n }\n\n #updateAccessibilityList(options: UmOption[]) {\n\n const maxLength = Math.max(options.length, this.#list.children.length);\n\n for (let i = 0; i < maxLength; i++) {\n const option = options[i];\n const item = this.#list.children[i];\n\n if (!option) {\n item.remove();\n continue;\n }\n\n option._listItem.id = `item-${i + 1}`;\n\n if (!item) {\n this.#list.appendChild(option._listItem);\n continue;\n }\n\n item.insertAdjacentElement('beforebegin', option._listItem);\n }\n }\n\n #setSelectedOption() {\n const options = this._options;\n\n const selectedClassOptions = options.filter(o => o.classList.contains('selected'));\n\n let found = false;\n\n for (const option of selectedClassOptions) {\n if (option.selected) {\n found = true;\n continue;\n }\n \n option.classList.remove('selected');\n }\n\n if (found) {\n return;\n }\n\n const selectedOption = this.selectedOptions[0];\n\n if (selectedOption) {\n selectedOption.classList.add('selected');\n }\n }\n\n protected override renderControl(): TemplateResult {\n return staticHtml`\n <button \n class=\"button\"\n role=\"combobox\"\n aria-expanded=\"false\"\n aria-owns=\"select\"\n ?disabled=${this.disabled}></button>\n <div class=\"input\"></div>`;\n }\n\n protected override renderAfterContent(): TemplateResult {\n return html`\n <u-menu>\n <slot></slot>\n </u-menu>\n `;\n }\n\n protected override renderDefaultTrailingIcon(): TemplateResult {\n return svg`\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\"/>\n </svg>`;\n }\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n this.empty = !this.selectedOptions[0]?.textContent?.trim();\n this.elementInternals.setFormValue(this._nativeSelect.value || null);\n }\n\n override attributeChangedCallback(name: string, _old: string | null, value: string | null) {\n super.attributeChangedCallback(name, _old, value);\n\n if (name !== 'disabled') {\n return;\n }\n\n this._nativeSelect.disabled = value === null;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#connected = true;\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.#detach();\n }\n\n #handleClick = (e: MouseEvent) => {\n this._menu.toggle();\n\n if (!this._menu.open || !this.selectedOptions.length) {\n return;\n }\n\n this.#navigationController.focusMenu(this.selectedOptions[0], e.detail === 0, false);\n };\n\n #handleMenuClick(e: Event) {\n e.stopPropagation();\n }\n\n #handleMenuOpen = () => {\n this._button.setAttribute('aria-expanded', 'true');\n this.#setSelectedOption();\n };\n\n #handleMenuOpened = () => {\n if (!this.selectedOptions.length) {\n return;\n }\n\n const option = this.selectedOptions[0];\n option.scrollIntoView({block: 'nearest'});\n };\n\n #handleMenuClose = () => {\n this._button.setAttribute('aria-expanded', 'false');\n this.#navigationController.blurMenu();\n };\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n\n this._nativeSelect.disabled = this.hasAttribute('disabled');\n\n this.#navigationController.attach(this);\n this._updateOptions();\n\n this._input.appendChild(this._nativeSelect);\n this._input.appendChild(this.#list);\n this._button.addEventListener('click', this.#handleClick);\n\n this._menu.anchorElement = this._container;\n this._menu.addEventListener('click', this.#handleMenuClick);\n this._menu.addEventListener('open', this.#handleMenuOpen);\n this._menu.addEventListener('opened', this.#handleMenuOpened);\n this._menu.addEventListener('close', this.#handleMenuClose);\n }\n\n async #detach(): Promise<void> {\n await this.updateComplete;\n\n this.#navigationController.detach();\n this.#connected = false;\n this._nativeSelect.remove();\n this._button.removeEventListener('click', this.#handleClick);\n this._menu.removeEventListener('click', this.#handleMenuClick);\n this._menu.removeEventListener('open', this.#handleMenuOpen);\n this._menu.removeEventListener('opened', this.#handleMenuOpened);\n this._menu.removeEventListener('close', this.#handleMenuClose);\n }\n\n get _menuItems(): UmOption[] {\n return this._options;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-select': UmSelect;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAI5C,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAE/E,OAAO,aAAa,CAAC;AAGd,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,eAAe;aAC3B,WAAM,GAAG,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;IAU1D,KAAK,CAOA;IAEL,qBAAqB,CAAwC;IACpD,iBAAiB,CAAmB;IAC7C,UAAU,CAAS;IAEnB;;OAEG;IAEH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IAClC,CAAC;IAED,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC;QAEjC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAMD;;OAEG;IAEH,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;IAC1C,CAAC;IAED,IAAI,aAAa,CAAC,KAAa;QAC7B,IAAI,CAAC,aAAa,CAAC,aAAa,GAAG,KAAK,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,MAAM;YAC9C,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YACjD,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,IAAI,QAAQ;QACV,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,UAAU,CAAC,CAAC,CAAC;QAE3E,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAAY,QAAQ,CAAe,CAAC;IAClE,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAvEV,kBAAa,GAAmB,CAAC,GAAG,EAAE;YACpC,MAAM,MAAM,GAAmB,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAChE,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACtC,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;YAEtC,OAAO,MAAM,CAAC;QAChB,CAAC,CAAC,EAAE,CAAC;QAEL,UAAK,GAAgB,CAAC,GAAG,EAAE;YACzB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;YACtB,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;YACjB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;YAExB,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,EAAE,CAAC;QAEL,0BAAqB,GAAG,IAAI,0BAA0B,CAAC,IAAI,CAAC,CAAC;QAE7D,eAAU,GAAG,KAAK,CAAC;QA2NnB,iBAAY,GAAG,CAAC,CAAa,EAAE,EAAE;YAC/B,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAEpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;gBACrD,OAAO;YACT,CAAC;YAED,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAClC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EACvB,CAAC,CAAC,MAAM,KAAK,CAAC,EACd,KAAK,CACN,CAAC;QACJ,CAAC,CAAC;QAMF,oBAAe,GAAG,GAAG,EAAE;YACrB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YACnD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC,CAAC;QAEF,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;gBACjC,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;YACvC,MAAM,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YACpD,IAAI,CAAC,qBAAqB,CAAC,QAAQ,EAAE,CAAC;QACxC,CAAC,CAAC;QAxMA,IAAI,CAAC,iBAAiB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAC3E,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,EAAE;YACnC,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,cAAc;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE9B,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;YAC7B,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAC7B,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC;QAEvC,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QAE/C,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,0CAA0C;QAC1C,cAAc,CAAC,QAAQ,GAAG,cAAc,CAAC,QAAQ,CAAC;QAClD,IAAI,CAAC,KAAK,GAAG,CAAC,cAAc,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;QACjD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC5E,CAAC;IAED,cAAc,CAAC,OAAmB;QAChC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CACxB,OAAO,CAAC,MAAM,EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CACnC,CAAC;QAEF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC;YACnC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YAEpD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,YAAY,CAAC,MAAM,EAAE,CAAC;gBACtB,SAAS;YACX,CAAC;YAED,IAAI,CAAC,YAAY,EAAE,CAAC;gBAClB,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;gBACrD,SAAS;YACX,CAAC;YAED,YAAY,CAAC,qBAAqB,CAAC,aAAa,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IAED,wBAAwB,CAAC,OAAmB;QAC1C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;QAEvE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC;YACnC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;YAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YAEpC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,SAAS;YACX,CAAC;YAED,MAAM,CAAC,SAAS,CAAC,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAEtC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBACzC,SAAS;YACX,CAAC;YAED,IAAI,CAAC,qBAAqB,CAAC,aAAa,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE9B,MAAM,oBAAoB,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAC9C,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CACjC,CAAC;QAEF,IAAI,KAAK,GAAG,KAAK,CAAC;QAElB,KAAK,MAAM,MAAM,IAAI,oBAAoB,EAAE,CAAC;YAC1C,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACpB,KAAK,GAAG,IAAI,CAAC;gBACb,SAAS;YACX,CAAC;YAED,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,KAAK,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QAE/C,IAAI,cAAc,EAAE,CAAC;YACnB,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAEkB,aAAa;QAC9B,OAAO,UAAU,CAAA;;;;;;qBAMA,IAAI,CAAC,QAAQ;gCACF,CAAC;IAC/B,CAAC;IAEkB,kBAAkB;QACnC,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAEkB,yBAAyB;QAC1C,OAAO,GAAG,CAAA;;;aAGD,CAAC;IACZ,CAAC;IAEkB,OAAO,CAAC,iBAAiC;QAC1D,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC3D,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;IACvE,CAAC;IAEQ,wBAAwB,CAC/B,IAAY,EACZ,IAAmB,EACnB,KAAoB;QAEpB,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;QAElD,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC;IAC/C,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,YAAY,CAYV;IAEF,gBAAgB,CAAC,CAAQ;QACvB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC;IAED,eAAe,CAGb;IAEF,iBAAiB,CAOf;IAEF,gBAAgB,CAGd;IAEF,KAAK,CAAC,OAAO;QACX,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QAE5D,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAE1D,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC5D,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC1D,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC9D,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC9D,CAAC;IAED,KAAK,CAAC,OAAO;QACX,MAAM,IAAI,CAAC,cAAc,CAAC;QAE1B,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,CAAC;QACpC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7D,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC/D,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC7D,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACjE,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACjE,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;;AA5RD;IADC,KAAK,EAAE;qCAGP;AAYsB;IAAtB,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;uCAAgB;AACd;IAAvB,KAAK,CAAC,SAAS,EAAE,IAAI,CAAC;yCAA6B;AAC7B;IAAtB,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;wCAAsB;AAM5C;IADC,KAAK,EAAE;6CAGP;AApDU,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAyTpB","sourcesContent":["import { html, svg, TemplateResult } from 'lit';\n\nimport { PropertyValues } from '@lit/reactive-element';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { styles } from './select.styles.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { UmMenuField } from '../shared/menu-field/menu-field.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { ExtendedSelect } from './extended-select.js';\nimport { UmOption } from './option.js';\nimport { SelectNavigationController } from './select-navigation-controller.js';\n\nimport './option.js';\n\n@customElement('u-select')\nexport class UmSelect extends UmTextFieldBase implements UmMenuField {\n static override styles = [UmTextFieldBase.styles, styles];\n\n _nativeSelect: ExtendedSelect = (() => {\n const select = <ExtendedSelect>document.createElement('select');\n select.setAttribute('tabindex', '-1');\n select.setAttribute('part', 'select');\n\n return select;\n })();\n\n #list: HTMLElement = (() => {\n const list = document.createElement('div');\n list.role = 'listbox';\n list.id = 'list';\n list.className = 'list';\n\n return list;\n })();\n\n #navigationController = new SelectNavigationController(this);\n readonly #mutationObserver: MutationObserver;\n #connected = false;\n\n /**\n * The `value` of the selected option\n */\n @state()\n get value(): string {\n return this._nativeSelect.value;\n }\n\n set value(value: string) {\n this._nativeSelect.value = value;\n\n if (!this.#connected) {\n return;\n }\n\n this.elementInternals.setFormValue(value);\n }\n\n @query('u-menu', true) _menu!: UmMenu;\n @query('.button', true) _button!: HTMLButtonElement;\n @query('.input', true) _input!: HTMLElement;\n\n /**\n * The index of the selected option. When there's no selected option the value is `-1`.\n */\n @state()\n get selectedIndex(): number {\n return this._nativeSelect.selectedIndex;\n }\n\n set selectedIndex(index: number) {\n this._nativeSelect.selectedIndex = index;\n }\n\n /**\n * An `Array` containing the selected `UmOption` or empty if there's no selected option. Multiple selection is not supported.\n */\n get selectedOptions(): UmOption[] {\n return this._nativeSelect.selectedOptions.length\n ? [this._nativeSelect.selectedOptions[0]._parent]\n : [];\n }\n\n get _options(): UmOption[] {\n const options = Array.from(this.querySelectorAll<HTMLElement>('u-option'));\n\n return options.filter(o => o instanceof UmOption) as UmOption[];\n }\n\n constructor() {\n super();\n\n this.#mutationObserver = new MutationObserver(() => this._updateOptions());\n this.#mutationObserver.observe(this, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n\n _updateOptions() {\n const options = this._options;\n\n for (const option of options) {\n option._select = this;\n }\n\n this.#updateOptions(options);\n this.#updateAccessibilityList(options);\n\n const selectedOption = this.selectedOptions[0];\n\n if (!selectedOption) {\n return;\n }\n\n // eslint-disable-next-line no-self-assign\n selectedOption.selected = selectedOption.selected;\n this.empty = !selectedOption.textContent?.trim();\n this._button.setAttribute('aria-labelledby', selectedOption._listItem.id);\n }\n\n #updateOptions(options: UmOption[]) {\n const maxLength = Math.max(\n options.length,\n this._nativeSelect.children.length,\n );\n\n for (let i = 0; i < maxLength; i++) {\n const option = options[i];\n const nativeOption = this._nativeSelect.children[i];\n\n if (!option) {\n nativeOption.remove();\n continue;\n }\n\n if (!nativeOption) {\n this._nativeSelect.appendChild(option._nativeOption);\n continue;\n }\n\n nativeOption.insertAdjacentElement('beforebegin', option._nativeOption);\n }\n }\n\n #updateAccessibilityList(options: UmOption[]) {\n const maxLength = Math.max(options.length, this.#list.children.length);\n\n for (let i = 0; i < maxLength; i++) {\n const option = options[i];\n const item = this.#list.children[i];\n\n if (!option) {\n item.remove();\n continue;\n }\n\n option._listItem.id = `item-${i + 1}`;\n\n if (!item) {\n this.#list.appendChild(option._listItem);\n continue;\n }\n\n item.insertAdjacentElement('beforebegin', option._listItem);\n }\n }\n\n #setSelectedOption() {\n const options = this._options;\n\n const selectedClassOptions = options.filter(o =>\n o.classList.contains('selected'),\n );\n\n let found = false;\n\n for (const option of selectedClassOptions) {\n if (option.selected) {\n found = true;\n continue;\n }\n\n option.classList.remove('selected');\n }\n\n if (found) {\n return;\n }\n\n const selectedOption = this.selectedOptions[0];\n\n if (selectedOption) {\n selectedOption.classList.add('selected');\n }\n }\n\n protected override renderControl(): TemplateResult {\n return staticHtml`\n <button \n class=\"button\"\n role=\"combobox\"\n aria-expanded=\"false\"\n aria-owns=\"select\"\n ?disabled=${this.disabled}></button>\n <div class=\"input\"></div>`;\n }\n\n protected override renderAfterContent(): TemplateResult {\n return html`\n <u-menu>\n <slot></slot>\n </u-menu>\n `;\n }\n\n protected override renderDefaultTrailingIcon(): TemplateResult {\n return svg`\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\"/>\n </svg>`;\n }\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n this.empty = !this.selectedOptions[0]?.textContent?.trim();\n this.elementInternals.setFormValue(this._nativeSelect.value || null);\n }\n\n override attributeChangedCallback(\n name: string,\n _old: string | null,\n value: string | null,\n ) {\n super.attributeChangedCallback(name, _old, value);\n\n if (name !== 'disabled') {\n return;\n }\n\n this._nativeSelect.disabled = value === null;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#connected = true;\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.#detach();\n }\n\n #handleClick = (e: MouseEvent) => {\n this._menu.toggle();\n\n if (!this._menu.open || !this.selectedOptions.length) {\n return;\n }\n\n this.#navigationController.focusMenu(\n this.selectedOptions[0],\n e.detail === 0,\n false,\n );\n };\n\n #handleMenuClick(e: Event) {\n e.stopPropagation();\n }\n\n #handleMenuOpen = () => {\n this._button.setAttribute('aria-expanded', 'true');\n this.#setSelectedOption();\n };\n\n #handleMenuOpened = () => {\n if (!this.selectedOptions.length) {\n return;\n }\n\n const option = this.selectedOptions[0];\n option.scrollIntoView({ block: 'nearest' });\n };\n\n #handleMenuClose = () => {\n this._button.setAttribute('aria-expanded', 'false');\n this.#navigationController.blurMenu();\n };\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n\n this._nativeSelect.disabled = this.hasAttribute('disabled');\n\n this.#navigationController.attach(this);\n this._updateOptions();\n\n this._input.appendChild(this._nativeSelect);\n this._input.appendChild(this.#list);\n this._button.addEventListener('click', this.#handleClick);\n\n this._menu.anchorElement = this._container;\n this._menu.addEventListener('click', this.#handleMenuClick);\n this._menu.addEventListener('open', this.#handleMenuOpen);\n this._menu.addEventListener('opened', this.#handleMenuOpened);\n this._menu.addEventListener('close', this.#handleMenuClose);\n }\n\n async #detach(): Promise<void> {\n await this.updateComplete;\n\n this.#navigationController.detach();\n this.#connected = false;\n this._nativeSelect.remove();\n this._button.removeEventListener('click', this.#handleClick);\n this._menu.removeEventListener('click', this.#handleMenuClick);\n this._menu.removeEventListener('open', this.#handleMenuOpen);\n this._menu.removeEventListener('opened', this.#handleMenuOpened);\n this._menu.removeEventListener('close', this.#handleMenuClose);\n }\n\n get _menuItems(): UmOption[] {\n return this._options;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-select': UmSelect;\n }\n}\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { UmTextFieldBase } from '../text-field-base/text-field-base.js';
|
|
2
|
+
export declare abstract class UmNativeTextFieldWrapper extends UmTextFieldBase {
|
|
3
|
+
#private;
|
|
4
|
+
protected _value: string;
|
|
5
|
+
get value(): string;
|
|
6
|
+
set value(value: string);
|
|
7
|
+
autocomplete: 'on' | 'off' | string | undefined;
|
|
8
|
+
get maxlength(): number | undefined;
|
|
9
|
+
set maxlength(value: number);
|
|
10
|
+
focus(): void;
|
|
11
|
+
abstract input: HTMLInputElement | HTMLTextAreaElement;
|
|
12
|
+
protected _handleInput(): void;
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=native-text-field-wrapper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"native-text-field-wrapper.d.ts","sourceRoot":"","sources":["../../../src/shared/char-count-text-field/native-text-field-wrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,8BAAsB,wBAAyB,SAAQ,eAAe;;IACpE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAM;IAC9B,IACI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAE4B,YAAY,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;IAI7E,IACI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAG1B;IAEQ,KAAK;IAId,QAAQ,CAAC,KAAK,EAAE,gBAAgB,GAAG,mBAAmB,CAAC;IAEvD,SAAS,CAAC,YAAY;CAavB"}
|
|
@@ -0,0 +1,54 @@
|
|
|
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 { property } from 'lit/decorators.js';
|
|
8
|
+
import { UmTextFieldBase } from '../text-field-base/text-field-base.js';
|
|
9
|
+
export class UmNativeTextFieldWrapper extends UmTextFieldBase {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this._value = '';
|
|
13
|
+
}
|
|
14
|
+
get value() {
|
|
15
|
+
return this._value;
|
|
16
|
+
}
|
|
17
|
+
set value(value) {
|
|
18
|
+
this._value = value;
|
|
19
|
+
this.empty = !value;
|
|
20
|
+
this.elementInternals.setFormValue(value);
|
|
21
|
+
}
|
|
22
|
+
#maxlength;
|
|
23
|
+
get maxlength() {
|
|
24
|
+
return this.#maxlength;
|
|
25
|
+
}
|
|
26
|
+
set maxlength(value) {
|
|
27
|
+
this.#maxlength = value;
|
|
28
|
+
this.#updateCounter();
|
|
29
|
+
}
|
|
30
|
+
focus() {
|
|
31
|
+
this.input.focus();
|
|
32
|
+
}
|
|
33
|
+
_handleInput() {
|
|
34
|
+
this.value = this.input.value;
|
|
35
|
+
this.#updateCounter();
|
|
36
|
+
}
|
|
37
|
+
#updateCounter() {
|
|
38
|
+
if (this.maxlength) {
|
|
39
|
+
this._innerCounter = `${this.value.length}/${this.maxlength}`;
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
this._innerCounter = undefined;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
__decorate([
|
|
46
|
+
property()
|
|
47
|
+
], UmNativeTextFieldWrapper.prototype, "value", null);
|
|
48
|
+
__decorate([
|
|
49
|
+
property({ reflect: true })
|
|
50
|
+
], UmNativeTextFieldWrapper.prototype, "autocomplete", void 0);
|
|
51
|
+
__decorate([
|
|
52
|
+
property({ type: Number, reflect: true })
|
|
53
|
+
], UmNativeTextFieldWrapper.prototype, "maxlength", null);
|
|
54
|
+
//# sourceMappingURL=native-text-field-wrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"native-text-field-wrapper.js","sourceRoot":"","sources":["../../../src/shared/char-count-text-field/native-text-field-wrapper.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,MAAM,OAAgB,wBAAyB,SAAQ,eAAe;IAAtE;;QACY,WAAM,GAAW,EAAE,CAAC;IA2ChC,CAAC;IAzCC,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IACD,IAAI,KAAK,CAAC,KAAa;QACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAID,UAAU,CAAqB;IAG/B,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IACD,IAAI,SAAS,CAAC,KAAa;QACzB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAIS,YAAY;QACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAC9B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAC9D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;IACjC,CAAC;CACF;AAzCC;IADC,QAAQ,EAAE;qDAGV;AAO4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DAAiD;AAK7E;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDAGzC","sourcesContent":["import { property } from 'lit/decorators.js';\n\nimport { UmTextFieldBase } from '../text-field-base/text-field-base.js';\n\nexport abstract class UmNativeTextFieldWrapper extends UmTextFieldBase {\n protected _value: string = '';\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({ reflect: true }) autocomplete: 'on' | 'off' | string | undefined;\n\n #maxlength: number | undefined;\n\n @property({ type: Number, reflect: true })\n get maxlength(): number | undefined {\n return this.#maxlength;\n }\n set maxlength(value: number) {\n this.#maxlength = value;\n this.#updateCounter();\n }\n\n override focus() {\n this.input.focus();\n }\n\n abstract input: HTMLInputElement | HTMLTextAreaElement;\n\n protected _handleInput() {\n this.value = this.input.value;\n this.#updateCounter();\n }\n\n #updateCounter() {\n if (this.maxlength) {\n this._innerCounter = `${this.value.length}/${this.maxlength}`;\n return;\n }\n\n this._innerCounter = undefined;\n }\n}\n"]}
|
|
@@ -8,7 +8,7 @@ export declare abstract class UmTextFieldBase extends UmFieldBase {
|
|
|
8
8
|
* Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
|
|
9
9
|
*/
|
|
10
10
|
empty: boolean;
|
|
11
|
-
placeholder: string
|
|
11
|
+
placeholder: string;
|
|
12
12
|
get form(): HTMLFormElement | null;
|
|
13
13
|
protected readonly elementInternals: ElementInternals;
|
|
14
14
|
constructor();
|
|
@@ -1 +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;AAM/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,8BAAsB,eAAgB,SAAQ,WAAW;IACvD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAgC;IAEtE,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF;;OAEG;IACM,KAAK,UAAQ;
|
|
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;AAM/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,8BAAsB,eAAgB,SAAQ,WAAW;IACvD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAgC;IAEtE,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF;;OAEG;IACM,KAAK,UAAQ;IAEO,WAAW,EAAE,MAAM,CAAM;IAEtD,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;;CAMvD"}
|
|
@@ -24,6 +24,7 @@ export class UmTextFieldBase extends UmFieldBase {
|
|
|
24
24
|
* Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
|
|
25
25
|
*/
|
|
26
26
|
this.empty = true;
|
|
27
|
+
this.placeholder = '';
|
|
27
28
|
this.elementInternals = this.attachInternals();
|
|
28
29
|
}
|
|
29
30
|
}
|
|
@@ -1 +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,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,OAAgB,eAAgB,SAAQ,WAAW;aACvC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,WAAM,GAAmB,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/C,CAAgD;aAEtD,sBAAiB,GAAmB;QAClD,GAAG,UAAU,CAAC,iBAAiB;QAC/B,cAAc,EAAE,IAAI;KACrB,AAHgC,CAG/B;IASF,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QAdV;;WAEG;QACM,UAAK,GAAG,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"text-field-base.js","sourceRoot":"","sources":["../../../src/shared/text-field-base/text-field-base.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,OAAgB,eAAgB,SAAQ,WAAW;aACvC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,WAAM,GAAmB,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/C,CAAgD;aAEtD,sBAAiB,GAAmB;QAClD,GAAG,UAAU,CAAC,iBAAiB;QAC/B,cAAc,EAAE,IAAI;KACrB,AAHgC,CAG/B;IASF,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QAdV;;WAEG;QACM,UAAK,GAAG,IAAI,CAAC;QAEO,gBAAW,GAAW,EAAE,CAAC;QAUpD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;;AAX4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAA0B","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { styles } from './text-field-base.styles.js';\n\nimport { UmFieldBase } from '../../field/field-base.js';\n\nexport abstract class UmTextFieldBase extends UmFieldBase {\n static readonly formAssociated = true;\n\n static override styles: CSSResultGroup = [UmFieldBase.styles, styles];\n\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n */\n override empty = true;\n\n @property({ reflect: true }) placeholder: string = '';\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n protected readonly elementInternals: ElementInternals;\n\n constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAIlC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,gBAAgB;IAC1B,KAAK,OAAO;IACZ,IAAI,OAAO;IACX,QAAQ,KAAK;CACd;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAwB;IAEjB,KAAK,EAAE,MAAM,CAAM;IACnB,WAAW,EAAE,MAAM,CAAM;IAEtD,SAAS,UAAS;IAC0B,SAAS,UAAS;IAE9D,OAAO,CAAC,QAAQ,CAAoB;IAChB,OAAO,CAAC,QAAQ,CAAe;IAE1C,MAAM,IAAI,kBAAkB;IAWrC,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,iBAAiB;IAkBzB,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,MAAM,CAAC,MAAM,CAAoB;IACzC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAU;IAEnC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU;IACtC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;IAoB/C,OAAO,CAAC,MAAM,CAAC,YAAY;IAO3B,OAAO,CAAC,MAAM,CAAC,QAAQ;IAmBvB,OAAO,CAAC,MAAM,CAAC,cAAc;CAS9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}
|
package/snackbar/snackbar.js
CHANGED
|
@@ -11,6 +11,7 @@ import { styles as baseStyles } from '../shared/base.styles.js';
|
|
|
11
11
|
import { styles } from './snackbar.styles.js';
|
|
12
12
|
import '../button/button.js';
|
|
13
13
|
import '../button/icon-button.js';
|
|
14
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
14
15
|
export var SnackbarDuration;
|
|
15
16
|
(function (SnackbarDuration) {
|
|
16
17
|
SnackbarDuration[SnackbarDuration["short"] = 2500] = "short";
|
|
@@ -26,31 +27,38 @@ let UmSnackbar = class UmSnackbar extends LitElement {
|
|
|
26
27
|
this.dismissed = false;
|
|
27
28
|
}
|
|
28
29
|
static { UmSnackbar_1 = this; }
|
|
29
|
-
static { this.styles = [
|
|
30
|
-
baseStyles,
|
|
31
|
-
styles
|
|
32
|
-
]; }
|
|
30
|
+
static { this.styles = [baseStyles, styles]; }
|
|
33
31
|
render() {
|
|
32
|
+
const classes = { dismiss: this.dismissed };
|
|
34
33
|
return html `
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
<div class="snackbar ${classMap(classes)}">
|
|
35
|
+
<div class="label">${this.label}</div>
|
|
36
|
+
${this.renderButton()} ${this.renderCloseButton()}
|
|
37
|
+
</div>
|
|
38
|
+
`;
|
|
40
39
|
}
|
|
41
40
|
renderButton() {
|
|
42
41
|
return this.buttonLabel
|
|
43
|
-
? html
|
|
42
|
+
? html `
|
|
43
|
+
<u-button variant="text">${this.buttonLabel}</u-button>
|
|
44
|
+
`
|
|
44
45
|
: nothing;
|
|
45
46
|
}
|
|
46
47
|
renderCloseButton() {
|
|
47
48
|
return this.showClose
|
|
48
49
|
? html `
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
<u-icon-button @click=${this.dismiss.bind(this)}>
|
|
51
|
+
<svg
|
|
52
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
53
|
+
height="1em"
|
|
54
|
+
viewBox="0 -960 960 960"
|
|
55
|
+
width="1em"
|
|
56
|
+
fill="currentColor">
|
|
57
|
+
<path
|
|
58
|
+
d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
|
|
59
|
+
</svg>
|
|
60
|
+
</u-icon-button>
|
|
61
|
+
`
|
|
54
62
|
: nothing;
|
|
55
63
|
}
|
|
56
64
|
dismiss() {
|
|
@@ -69,7 +77,7 @@ let UmSnackbar = class UmSnackbar extends LitElement {
|
|
|
69
77
|
static show(configOrLabel) {
|
|
70
78
|
if (typeof configOrLabel === 'string') {
|
|
71
79
|
configOrLabel = {
|
|
72
|
-
label: configOrLabel
|
|
80
|
+
label: configOrLabel,
|
|
73
81
|
};
|
|
74
82
|
}
|
|
75
83
|
configOrLabel.duration ??= SnackbarDuration.short;
|
|
@@ -100,7 +108,7 @@ let UmSnackbar = class UmSnackbar extends LitElement {
|
|
|
100
108
|
setTimeout(() => snackbar.dismiss(), snackbar.duration);
|
|
101
109
|
}
|
|
102
110
|
static createSnackbar(config) {
|
|
103
|
-
const snackbar = document.createElement(
|
|
111
|
+
const snackbar = document.createElement('u-snackbar');
|
|
104
112
|
snackbar.label = config.label;
|
|
105
113
|
snackbar.buttonLabel = config.buttonLabel;
|
|
106
114
|
snackbar.showClose = config.showClose;
|
package/snackbar/snackbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './snackbar.styles.js';\n\nimport '../button/button.js';\nimport '../button/icon-button.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport interface SnackbarConfig {\n label: string;\n duration?: SnackbarDuration;\n buttonLabel?: string;\n showClose?: boolean;\n}\n\nexport enum SnackbarDuration {\n short = 2500,\n long = 5000,\n infinite = -1,\n}\n\n@customElement('u-snackbar')\nexport class UmSnackbar extends LitElement {\n static override styles = [baseStyles, styles];\n\n @property({ reflect: true }) label: string = '';\n @property({ reflect: true }) buttonLabel: string = '';\n @property({ type: Boolean, attribute: 'show-close', reflect: true })\n showClose = false;\n @property({ type: Boolean, reflect: true }) dismissed = false;\n\n private duration!: SnackbarDuration;\n @query('.snackbar') private snackbar!: HTMLElement;\n\n override render(): HTMLTemplateResult {\n const classes = { dismiss: this.dismissed };\n\n return html`\n <div class=\"snackbar ${classMap(classes)}\">\n <div class=\"label\">${this.label}</div>\n ${this.renderButton()} ${this.renderCloseButton()}\n </div>\n `;\n }\n\n private renderButton() {\n return this.buttonLabel\n ? html`\n <u-button variant=\"text\">${this.buttonLabel}</u-button>\n `\n : nothing;\n }\n\n private renderCloseButton() {\n return this.showClose\n ? html`\n <u-icon-button @click=${this.dismiss.bind(this)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 -960 960 960\"\n width=\"1em\"\n fill=\"currentColor\">\n <path\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n </svg>\n </u-icon-button>\n `\n : nothing;\n }\n\n dismiss(): void {\n if (this.dismissed) {\n return;\n }\n\n this.dismissed = true;\n\n const onAnimationEnd = () => {\n this.snackbar.removeEventListener('animationend', onAnimationEnd);\n this.remove();\n\n UmSnackbar.showNext();\n };\n\n this.snackbar.addEventListener('animationend', onAnimationEnd);\n }\n\n private static _queue: UmSnackbar[] = [];\n private static _consuming: boolean;\n\n static show(label: string): UmSnackbar;\n static show(config: SnackbarConfig): UmSnackbar;\n static show(configOrLabel: SnackbarConfig | string): UmSnackbar {\n if (typeof configOrLabel === 'string') {\n configOrLabel = {\n label: configOrLabel,\n };\n }\n\n configOrLabel.duration ??= SnackbarDuration.short;\n\n const snackbar = this.createSnackbar(<SnackbarConfig>configOrLabel);\n UmSnackbar._queue.push(snackbar);\n\n if (!UmSnackbar._consuming) {\n UmSnackbar.consumeQueue();\n }\n\n return snackbar;\n }\n\n private static consumeQueue() {\n if (UmSnackbar._queue.length) {\n UmSnackbar._consuming = true;\n UmSnackbar.showNext();\n }\n }\n\n private static showNext() {\n if (!UmSnackbar._queue.length) {\n UmSnackbar._consuming = false;\n return;\n }\n\n const snackbar = UmSnackbar._queue[0];\n\n UmSnackbar._queue = UmSnackbar._queue.slice(1);\n\n document.body.appendChild(snackbar);\n\n if (snackbar.duration === -1) {\n return;\n }\n\n setTimeout(() => snackbar.dismiss(), snackbar.duration);\n }\n\n private static createSnackbar(config: SnackbarConfig): UmSnackbar {\n const snackbar = document.createElement('u-snackbar');\n snackbar.label = config.label;\n snackbar.buttonLabel = config.buttonLabel!;\n snackbar.showClose = config.showClose!;\n snackbar.duration = config.duration!;\n\n return snackbar;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-snackbar': UmSnackbar;\n }\n}\n"]}
|
package/tab-bar/tab-bar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"tab-bar.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAYvD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAAwB;IASjB,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAEnD,OAAO,CAAC,WAAW,CAAe;IACjC,OAAO,CAAC,YAAY,CAAe;IACtC,OAAO,CAAC,UAAU,CAAe;IAC7B,OAAO,CAAC,aAAa,CAAC,CAAc;IAEnB,gBAAgB,EAAG,WAAW,EAAE,CAAC;IAE3E,IAAI,cAAc,IAAI,MAAM,CAM3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED,IAAI,SAAS,IAAI,KAAK,GAAG,IAAI,CAE5B;IACD,IAAI,SAAS,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI,EAuBpC;IAEQ,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,CAAC,EAAE,MAAM,GAAG,IAAI,EAChB,EAAE,EAAE,MAAM,GAAG,IAAI;IAOV,iBAAiB;cAMP,MAAM,IAAI,cAAc;;IAuE3C,mBAAmB;IAmCnB,0BAA0B;CA8B3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/tab-bar/tab-bar.js
CHANGED
|
@@ -5,7 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement } from 'lit';
|
|
8
|
-
import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
|
|
8
|
+
import { customElement, property, query, queryAssignedElements, } from 'lit/decorators.js';
|
|
9
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
9
10
|
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
10
11
|
import { styles } from './tab-bar.styles.js';
|
|
11
12
|
import { UmTab } from './tab.js';
|
|
@@ -32,7 +33,9 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
32
33
|
this._updateTabIndicator();
|
|
33
34
|
return;
|
|
34
35
|
}
|
|
35
|
-
if (!activeTab ||
|
|
36
|
+
if (!activeTab ||
|
|
37
|
+
this.#activeTab === activeTab ||
|
|
38
|
+
this.#tabs.indexOf(activeTab) < 0) {
|
|
36
39
|
return;
|
|
37
40
|
}
|
|
38
41
|
const previouslyActiveTab = this.#activeTab;
|
|
@@ -52,21 +55,26 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
52
55
|
this.#attach();
|
|
53
56
|
}
|
|
54
57
|
render() {
|
|
58
|
+
const classes = { secondary: this.variant === 'secondary' };
|
|
55
59
|
return html `
|
|
56
|
-
|
|
57
60
|
<div
|
|
58
61
|
class="scroll-indicator scroll-left active"
|
|
59
62
|
@click=${this.#scrollToLeft}>
|
|
60
63
|
<u-elevation></u-elevation>
|
|
61
64
|
<u-ripple></u-ripple>
|
|
62
65
|
<slot name="scroll-left">
|
|
63
|
-
<svg
|
|
64
|
-
|
|
66
|
+
<svg
|
|
67
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
68
|
+
height="1em"
|
|
69
|
+
viewBox="0 -960 960 960"
|
|
70
|
+
width="1em"
|
|
71
|
+
fill="currentColor">
|
|
72
|
+
<path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z" />
|
|
65
73
|
</svg>
|
|
66
74
|
</slot>
|
|
67
75
|
</div>
|
|
68
76
|
<div
|
|
69
|
-
class="container ${
|
|
77
|
+
class="container ${classMap(classes)}"
|
|
70
78
|
@scrollend=${this.#handleContainerScrollEnd}>
|
|
71
79
|
<slot @slotchange=${this.#handleSlotChange}></slot>
|
|
72
80
|
<div class="tab-indicator"></div>
|
|
@@ -77,11 +85,17 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
77
85
|
<u-elevation></u-elevation>
|
|
78
86
|
<u-ripple></u-ripple>
|
|
79
87
|
<slot name="scroll-right">
|
|
80
|
-
<svg
|
|
81
|
-
|
|
88
|
+
<svg
|
|
89
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
90
|
+
height="1em"
|
|
91
|
+
viewBox="0 -960 960 960"
|
|
92
|
+
width="1em"
|
|
93
|
+
fill="currentColor">
|
|
94
|
+
<path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" />
|
|
82
95
|
</svg>
|
|
83
96
|
</slot>
|
|
84
|
-
</div
|
|
97
|
+
</div>
|
|
98
|
+
`;
|
|
85
99
|
}
|
|
86
100
|
constructor() {
|
|
87
101
|
super();
|
|
@@ -94,9 +108,7 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
94
108
|
this.variant = 'primary';
|
|
95
109
|
this.#handleSlotChange = (e) => {
|
|
96
110
|
const slot = e.target;
|
|
97
|
-
this.#tabs = slot
|
|
98
|
-
.assignedElements({ flatten: true })
|
|
99
|
-
.filter(e => e instanceof UmTab);
|
|
111
|
+
this.#tabs = (slot.assignedElements({ flatten: true }).filter(e => e instanceof UmTab));
|
|
100
112
|
for (const tab of this.#tabs) {
|
|
101
113
|
tab._bar = this;
|
|
102
114
|
}
|
|
@@ -109,10 +121,16 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
109
121
|
this._setScrollIndicatorsActive();
|
|
110
122
|
};
|
|
111
123
|
this.#scrollToLeft = () => {
|
|
112
|
-
this._container.scrollBy({
|
|
124
|
+
this._container.scrollBy({
|
|
125
|
+
left: this._container.offsetWidth / -2,
|
|
126
|
+
behavior: 'smooth',
|
|
127
|
+
});
|
|
113
128
|
};
|
|
114
129
|
this.#scrollToRight = () => {
|
|
115
|
-
this._container.scrollBy({
|
|
130
|
+
this._container.scrollBy({
|
|
131
|
+
left: this._container.offsetWidth / 2,
|
|
132
|
+
behavior: 'smooth',
|
|
133
|
+
});
|
|
116
134
|
};
|
|
117
135
|
this.#resizeObserver.observe(this);
|
|
118
136
|
}
|
|
@@ -128,9 +146,7 @@ let UmTabBar = class UmTabBar extends LitElement {
|
|
|
128
146
|
return;
|
|
129
147
|
}
|
|
130
148
|
const styles = getComputedStyle(this.activeTab);
|
|
131
|
-
const padding = this.variant === 'primary'
|
|
132
|
-
? parseInt(styles.paddingInline, 10)
|
|
133
|
-
: 0;
|
|
149
|
+
const padding = this.variant === 'primary' ? parseInt(styles.paddingInline, 10) : 0;
|
|
134
150
|
this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;
|
|
135
151
|
this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;
|
|
136
152
|
}
|
package/tab-bar/tab-bar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\n\nimport { UmTab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class UmTabBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n #tabs: UmTab[] = [];\n #activeTab: UmTab | null = null;\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n this._setScrollIndicatorsActive();\n this._updateTabIndicator();\n });\n\n @property({reflect: true}) variant: 'primary' | 'secondary' = 'primary';\n\n @query('.scroll-left') private _scrollLeft!: HTMLElement;\n @query('.scroll-right') private _scrollRight!: HTMLElement;\n @query('.container') private _container!: HTMLElement;\n @query('.tab-indicator') private _tabIndicator?: HTMLElement;\n\n @queryAssignedElements({flatten: true}) assignedElements!: HTMLElement[];\n\n get activeTabIndex(): number {\n if (!this.activeTab) {\n return -1;\n }\n\n return this.#tabs.indexOf(this.activeTab);\n }\n set activeTabIndex(index: number) {\n this.activeTab = this.#tabs[index];\n }\n\n get activeTab(): UmTab | null {\n return this.#activeTab;\n }\n set activeTab(activeTab: UmTab | null) {\n if (!this.#tabs.length) {\n this.#activeTab = null;\n this._updateTabIndicator();\n return;\n }\n\n if (!activeTab || this.#activeTab === activeTab || this.#tabs.indexOf(activeTab) < 0) {\n return;\n }\n\n const previouslyActiveTab = this.#activeTab;\n this.#activeTab = activeTab;\n\n previouslyActiveTab?.requestUpdate();\n\n activeTab.scrollIntoView({block: 'nearest', behavior: 'smooth'});\n activeTab.requestUpdate();\n this._updateTabIndicator();\n }\n\n override attributeChangedCallback(name: string, _: string | null, __: string | null) {\n if (name === 'variant') {\n this._updateTabIndicator();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#attach();\n }\n\n protected override render(): TemplateResult {\n return html`\n\n <div\n class=\"scroll-indicator scroll-left active\"\n @click=${this.#scrollToLeft}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-left\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>\n </svg>\n </slot>\n </div>\n <div\n class=\"container ${this.variant === 'secondary' ? 'secondary' : ''}\"\n @scrollend=${this.#handleContainerScrollEnd}>\n <slot @slotchange=${this.#handleSlotChange}></slot>\n <div class=\"tab-indicator\"></div>\n </div>\n <div\n class=\"scroll-indicator scroll-right active\"\n @click=${this.#scrollToRight}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-right\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\"/>\n </svg>\n </slot>\n </div>`;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n #handleSlotChange = (e: Event) => {\n\n const slot = <HTMLSlotElement>e.target;\n this.#tabs = <UmTab[]>slot\n .assignedElements({flatten: true})\n .filter(e => e instanceof UmTab);\n\n for (const tab of this.#tabs) {\n tab._bar = this;\n }\n\n if (this.activeTabIndex > -1) {\n return;\n }\n\n this.activeTab = this.#tabs[0];\n };\n\n #handleContainerScrollEnd = () => {\n this._setScrollIndicatorsActive();\n }\n\n _updateTabIndicator() {\n if (!this._tabIndicator) {\n return;\n }\n\n if (!this.activeTab) {\n this._tabIndicator.style.left = '0';\n this._tabIndicator.style.width = '0';\n return;\n }\n\n const styles = getComputedStyle(this.activeTab);\n const padding = this.variant === 'primary'\n ? parseInt(styles.paddingInline, 10)\n : 0;\n\n this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n this._tabIndicator.style.width = `${this.activeTab.offsetWidth - padding * 2}px`;\n }\n\n #scrollToLeft = () => {\n this._container.scrollBy({left: this._container.offsetWidth / -2, behavior: 'smooth'});\n };\n\n #scrollToRight = () => {\n this._container.scrollBy({left: this._container.offsetWidth / 2, behavior: 'smooth'});\n };\n\n _setScrollIndicatorsActive() {\n const scrollSafeMargin = 1;\n\n const scrollLength = this._container.scrollWidth - this._container.offsetWidth;\n\n const isRtl = getComputedStyle(this._container).direction === 'rtl';\n const scrollStart = isRtl\n ? this._container.scrollLeft + scrollLength\n : this._container.scrollLeft;\n\n if (scrollStart - scrollSafeMargin <= 0) {\n this._container.scrollBy(-1, 0);\n this._scrollLeft.classList.remove('active');\n } else {\n this._scrollLeft.classList.add('active');\n }\n\n if (scrollStart >= scrollLength - scrollSafeMargin) {\n this._container.scrollBy(1, 0);\n this._scrollRight.classList.remove('active');\n } else {\n this._scrollRight.classList.add('active');\n }\n }\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n this._setScrollIndicatorsActive()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab-bar': UmTabBar;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab-bar.js","sourceRoot":"","sources":["../../src/tab-bar/tab-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport {\n customElement,\n property,\n query,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './tab-bar.styles.js';\n\nimport { UmTab } from './tab.js';\n\n@customElement('u-tab-bar')\nexport class UmTabBar extends LitElement {\n static override styles = [baseStyles, styles];\n\n #tabs: UmTab[] = [];\n #activeTab: UmTab | null = null;\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n this._setScrollIndicatorsActive();\n this._updateTabIndicator();\n });\n\n @property({ reflect: true }) variant: 'primary' | 'secondary' = 'primary';\n\n @query('.scroll-left') private _scrollLeft!: HTMLElement;\n @query('.scroll-right') private _scrollRight!: HTMLElement;\n @query('.container') private _container!: HTMLElement;\n @query('.tab-indicator') private _tabIndicator?: HTMLElement;\n\n @queryAssignedElements({ flatten: true }) assignedElements!: HTMLElement[];\n\n get activeTabIndex(): number {\n if (!this.activeTab) {\n return -1;\n }\n\n return this.#tabs.indexOf(this.activeTab);\n }\n set activeTabIndex(index: number) {\n this.activeTab = this.#tabs[index];\n }\n\n get activeTab(): UmTab | null {\n return this.#activeTab;\n }\n set activeTab(activeTab: UmTab | null) {\n if (!this.#tabs.length) {\n this.#activeTab = null;\n this._updateTabIndicator();\n return;\n }\n\n if (\n !activeTab ||\n this.#activeTab === activeTab ||\n this.#tabs.indexOf(activeTab) < 0\n ) {\n return;\n }\n\n const previouslyActiveTab = this.#activeTab;\n this.#activeTab = activeTab;\n\n previouslyActiveTab?.requestUpdate();\n\n activeTab.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\n activeTab.requestUpdate();\n this._updateTabIndicator();\n }\n\n override attributeChangedCallback(\n name: string,\n _: string | null,\n __: string | null,\n ) {\n if (name === 'variant') {\n this._updateTabIndicator();\n }\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#attach();\n }\n\n protected override render(): TemplateResult {\n const classes = { secondary: this.variant === 'secondary' };\n\n return html`\n <div\n class=\"scroll-indicator scroll-left active\"\n @click=${this.#scrollToLeft}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-left\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 -960 960 960\"\n width=\"1em\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </slot>\n </div>\n <div\n class=\"container ${classMap(classes)}\"\n @scrollend=${this.#handleContainerScrollEnd}>\n <slot @slotchange=${this.#handleSlotChange}></slot>\n <div class=\"tab-indicator\"></div>\n </div>\n <div\n class=\"scroll-indicator scroll-right active\"\n @click=${this.#scrollToRight}>\n <u-elevation></u-elevation>\n <u-ripple></u-ripple>\n <slot name=\"scroll-right\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 -960 960 960\"\n width=\"1em\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </slot>\n </div>\n `;\n }\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n #handleSlotChange = (e: Event) => {\n const slot = <HTMLSlotElement>e.target;\n this.#tabs = <UmTab[]>(\n slot.assignedElements({ flatten: true }).filter(e => e instanceof UmTab)\n );\n\n for (const tab of this.#tabs) {\n tab._bar = this;\n }\n\n if (this.activeTabIndex > -1) {\n return;\n }\n\n this.activeTab = this.#tabs[0];\n };\n\n #handleContainerScrollEnd = () => {\n this._setScrollIndicatorsActive();\n };\n\n _updateTabIndicator() {\n if (!this._tabIndicator) {\n return;\n }\n\n if (!this.activeTab) {\n this._tabIndicator.style.left = '0';\n this._tabIndicator.style.width = '0';\n return;\n }\n\n const styles = getComputedStyle(this.activeTab);\n const padding =\n this.variant === 'primary' ? parseInt(styles.paddingInline, 10) : 0;\n\n this._tabIndicator.style.left = `${this.activeTab.offsetLeft + padding}px`;\n this._tabIndicator.style.width = `${\n this.activeTab.offsetWidth - padding * 2\n }px`;\n }\n\n #scrollToLeft = () => {\n this._container.scrollBy({\n left: this._container.offsetWidth / -2,\n behavior: 'smooth',\n });\n };\n\n #scrollToRight = () => {\n this._container.scrollBy({\n left: this._container.offsetWidth / 2,\n behavior: 'smooth',\n });\n };\n\n _setScrollIndicatorsActive() {\n const scrollSafeMargin = 1;\n\n const scrollLength =\n this._container.scrollWidth - this._container.offsetWidth;\n\n const isRtl = getComputedStyle(this._container).direction === 'rtl';\n const scrollStart = isRtl\n ? this._container.scrollLeft + scrollLength\n : this._container.scrollLeft;\n\n if (scrollStart - scrollSafeMargin <= 0) {\n this._container.scrollBy(-1, 0);\n this._scrollLeft.classList.remove('active');\n } else {\n this._scrollLeft.classList.add('active');\n }\n\n if (scrollStart >= scrollLength - scrollSafeMargin) {\n this._container.scrollBy(1, 0);\n this._scrollRight.classList.remove('active');\n } else {\n this._scrollRight.classList.add('active');\n }\n }\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n this._setScrollIndicatorsActive();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab-bar': UmTabBar;\n }\n}\n"]}
|
package/tab-bar/tab.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAM/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,qBACa,KAAM,SAAQ,eAAe;;IACxC,OAAgB,MAAM,iCAAoC;IAE1D,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAQ7B,IACI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EAWzB;IAE4B,OAAO,UAAS;;cAO1B,aAAa,IAAI,kBAAkB;IAe7C,iBAAiB;IAMjB,oBAAoB;cAiBV,WAAW,CAAC,CAAC,EAAE,OAAO;CAuB1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,KAAK,CAAC;KAChB;CACF"}
|
package/tab-bar/tab.js
CHANGED
|
@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html } from 'lit';
|
|
8
8
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
9
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
9
10
|
import { styles } from './tab.styles.js';
|
|
10
11
|
import { UmButtonWrapper } from '../shared/button-wrapper.js';
|
|
11
12
|
let UmTab = class UmTab extends UmButtonWrapper {
|
|
@@ -36,17 +37,17 @@ let UmTab = class UmTab extends UmButtonWrapper {
|
|
|
36
37
|
this.#resizeObserver.observe(this);
|
|
37
38
|
}
|
|
38
39
|
renderContent() {
|
|
40
|
+
const classes = { active: this.active, ['has-icon']: this.hasIcon };
|
|
39
41
|
return html `
|
|
40
|
-
<div class="tab-content ${
|
|
42
|
+
<div class="tab-content ${classMap(classes)}">
|
|
41
43
|
<div class="icon" part="icon">
|
|
42
|
-
<slot
|
|
43
|
-
name="icon"
|
|
44
|
-
@slotchange=${this.#iconSlotChange}></slot>
|
|
44
|
+
<slot name="icon" @slotchange=${this.#iconSlotChange}></slot>
|
|
45
45
|
</div>
|
|
46
46
|
<div class="label" part="label">
|
|
47
47
|
<slot></slot>
|
|
48
48
|
</div>
|
|
49
|
-
</div
|
|
49
|
+
</div>
|
|
50
|
+
`;
|
|
50
51
|
}
|
|
51
52
|
connectedCallback() {
|
|
52
53
|
super.connectedCallback();
|
package/tab-bar/tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/tab-bar/tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './tab.styles.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { UmTabBar } from './tab-bar.js';\n\n@customElement('u-tab')\nexport class UmTab extends UmButtonWrapper {\n static override styles = [UmButtonWrapper.styles, styles];\n\n _bar: UmTabBar | null = null;\n\n #resizeObserver: ResizeObserver = new ResizeObserver(() => {\n if (this.active) {\n this._bar?._updateTabIndicator();\n }\n });\n\n @state()\n get active(): boolean {\n return this._bar?.activeTab === this;\n }\n set active(active: boolean) {\n if (!this._bar) {\n return;\n }\n\n if (active) {\n this._bar.activeTab = this;\n return;\n }\n\n this._bar.activeTabIndex = 0;\n }\n\n @property({ type: Boolean }) hasIcon = false;\n\n constructor() {\n super();\n this.#resizeObserver.observe(this);\n }\n\n protected override renderContent(): HTMLTemplateResult {\n const classes = { active: this.active, ['has-icon']: this.hasIcon };\n\n return html`\n <div class=\"tab-content ${classMap(classes)}\">\n <div class=\"icon\" part=\"icon\">\n <slot name=\"icon\" @slotchange=${this.#iconSlotChange}></slot>\n </div>\n <div class=\"label\" part=\"label\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this._bar?._updateTabIndicator();\n this._bar?._setScrollIndicatorsActive();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n if (!this._bar) {\n return;\n }\n\n if (this._bar.activeTab === this) {\n this._bar.activeTabIndex = 0;\n }\n\n this._bar._updateTabIndicator();\n this._bar._setScrollIndicatorsActive();\n\n this._bar = null;\n }\n\n protected override handleClick(_: UIEvent) {\n super.handleClick(_);\n\n if (!this._bar) {\n return;\n }\n\n const changePrevented = !this._bar.dispatchEvent(\n new Event('changing', { bubbles: true, cancelable: true }),\n );\n\n if (changePrevented) {\n return;\n }\n\n this._bar.activeTab = this;\n this._bar.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n #iconSlotChange(e: Event) {\n const slot = <HTMLSlotElement>e.target;\n this.hasIcon = !!slot.assignedElements({ flatten: true }).length;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-tab': UmTab;\n }\n}\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
2
|
+
import { HTMLTemplateResult } from 'lit';
|
|
3
|
+
import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
|
|
4
|
+
export declare class UmTextArea extends UmNativeTextFieldWrapper {
|
|
5
|
+
static styles: CSSResultGroup;
|
|
6
|
+
rows: number;
|
|
7
|
+
input: HTMLTextAreaElement;
|
|
8
|
+
protected renderControl(): HTMLTemplateResult;
|
|
9
|
+
}
|
|
10
|
+
declare global {
|
|
11
|
+
interface HTMLElementTagNameMap {
|
|
12
|
+
'u-text-area': UmTextArea;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
//# sourceMappingURL=text-area.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-area.d.ts","sourceRoot":"","sources":["../../src/text-area/text-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,8DAA8D,CAAC;AAGxG,qBACa,UAAW,SAAQ,wBAAwB;IACtD,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE9C,IAAI,SAAK;IAET,KAAK,EAAG,mBAAmB,CAAC;cAErC,aAAa,IAAI,kBAAkB;CAqBvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|