@digital-realty/ix-select 1.0.3 → 1.0.4
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/dist/IxSelect.d.ts +1 -0
- package/dist/IxSelect.js +8 -1
- package/dist/IxSelect.js.map +1 -1
- package/package.json +2 -2
package/dist/IxSelect.d.ts
CHANGED
|
@@ -45,6 +45,7 @@ export declare class IxSelect extends LitElement {
|
|
|
45
45
|
get value(): string;
|
|
46
46
|
get validationMessage(): string;
|
|
47
47
|
get materialRoot(): Select;
|
|
48
|
+
changeHandler: () => void;
|
|
48
49
|
firstUpdated(): void;
|
|
49
50
|
protected updated(changed: PropertyValues<Select>): void;
|
|
50
51
|
render(): import("lit-html").TemplateResult<1> | undefined;
|
package/dist/IxSelect.js
CHANGED
|
@@ -35,6 +35,11 @@ export class IxSelect extends LitElement {
|
|
|
35
35
|
this.internals = this /* needed for closure */
|
|
36
36
|
.attachInternals();
|
|
37
37
|
this.customValidationMessage = '';
|
|
38
|
+
this.changeHandler = () => {
|
|
39
|
+
this.materialRoot.setAttribute('value', this.materialRoot.selectedOptions[0].value);
|
|
40
|
+
this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
|
|
41
|
+
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
42
|
+
};
|
|
38
43
|
}
|
|
39
44
|
get hasError() {
|
|
40
45
|
return this.error || this.nativeError;
|
|
@@ -94,6 +99,7 @@ export class IxSelect extends LitElement {
|
|
|
94
99
|
.required=${this.required}
|
|
95
100
|
supporting-text=${this.supportingText}
|
|
96
101
|
error-text=${this.getErrorText()}
|
|
102
|
+
@change=${this.changeHandler}
|
|
97
103
|
>
|
|
98
104
|
<slot></slot>
|
|
99
105
|
</md-outlined-select>`;
|
|
@@ -113,9 +119,10 @@ export class IxSelect extends LitElement {
|
|
|
113
119
|
.error=${this.hasError}
|
|
114
120
|
supporting-text=${this.supportingText}
|
|
115
121
|
error-text=${this.getErrorText()}
|
|
122
|
+
@change=${this.changeHandler}
|
|
116
123
|
>
|
|
117
124
|
<slot></slot>
|
|
118
|
-
</md-
|
|
125
|
+
</md-filled-select>`;
|
|
119
126
|
}
|
|
120
127
|
}
|
|
121
128
|
getErrorText() {
|
package/dist/IxSelect.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { Field } from '@material/web/field/internal/field';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport './selectoption/ix-select-option.js';\n\nexport const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;\n\nexport class IxSelect extends LitElement {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n @query('.field') private readonly field!: Field | null;\n\n @query('slot') slotEl!: HTMLSlotElement;\n\n @query('md-outlined-select') default!: Select;\n\n @property() appearance: 'filled' | 'outlined' = 'outlined';\n\n @property() label: String = '';\n\n @property({ type: Boolean }) quick = false;\n\n @property({ type: Boolean }) required = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n /**\n * The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n */\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error || this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n return this.materialRoot.value;\n }\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n get materialRoot(): Select {\n return this.shadowRoot?.querySelector('md-filled-select') ?? this.default;\n }\n\n firstUpdated() {\n this.addEventListener('request-selection', () => {\n this.internals.setFormValue(this.materialRoot.value);\n });\n }\n\n protected override updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n }\n\n // eslint-disable-next-line consistent-return\n render() {\n if (this.appearance === 'outlined') {\n return html` <md-outlined-select\n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .menu-positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .error=${this.hasError}\n .name=${this.name}\n .required=${this.required}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n >\n <slot></slot>\n </md-outlined-select>`;\n }\n if (this.appearance === 'filled') {\n return html`\n <md-filled-select \n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .required=${this.required}\n .error=${this.hasError}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n >\n <slot></slot>\n </md-outlined-select>`;\n }\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n let invalidEvent: Event | undefined;\n this.addEventListener(\n 'invalid',\n event => {\n invalidEvent = event;\n },\n { once: true }\n );\n\n const valid = this.checkValidity();\n if (invalidEvent?.defaultPrevented) {\n return valid;\n }\n\n const prevMessage = this.getErrorText();\n this.nativeError = !valid;\n this.nativeErrorText = this.validationMessage;\n\n if (prevMessage === this.getErrorText()) {\n this.field?.reannounceError();\n }\n\n return valid;\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n private syncValidity() {\n const valueMissing = this.required && !this.materialRoot.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage ||\n (valueMissing && this.getRequiredValidationMessage()) ||\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage\n );\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { Select } from '@material/web/select/internal/select.js';\nimport { Field } from '@material/web/field/internal/field';\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport '@material/web/select/filled-select.js';\nimport '@material/web/select/outlined-select.js';\nimport './selectoption/ix-select-option.js';\n\nexport const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;\n\nexport class IxSelect extends LitElement {\n /** @nocollapse */\n static readonly formAssociated = true;\n\n @query('.field') private readonly field!: Field | null;\n\n @query('slot') slotEl!: HTMLSlotElement;\n\n @query('md-outlined-select') default!: Select;\n\n @property() appearance: 'filled' | 'outlined' = 'outlined';\n\n @property() label: String = '';\n\n @property({ type: Boolean }) quick = false;\n\n @property({ type: Boolean }) required = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n @property({ type: String, attribute: 'error-text' }) errorText = '';\n\n @property({ type: String, attribute: 'supporting-text' }) supportingText = '';\n\n @property({ type: Boolean, reflect: true }) error = false;\n\n @property({ type: String, attribute: 'display-text' }) displayText = '';\n\n /**\n * Whether or not the underlying md-menu should be position: fixed to display\n * in a top-level manner, or position: absolute.\n *\n * position:fixed is useful for cases where select is inside of another\n * element with stacking context and hidden overflows such as `md-dialog`.\n */\n @property({ attribute: 'menu-positioning' })\n menuPositioning: 'absolute' | 'fixed' = 'absolute';\n\n /**\n * The max time between the keystrokes of the typeahead select / menu behavior\n * before it clears the typeahead buffer.\n */\n @property({ type: Number, attribute: 'typeahead-delay' })\n typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;\n\n @state() private nativeError = false;\n\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error || this.nativeError;\n }\n\n private readonly internals = (this as HTMLElement) /* needed for closure */\n .attachInternals();\n\n private customValidationMessage = '';\n\n get form() {\n return this.internals.form;\n }\n\n get labels() {\n return this.internals.labels;\n }\n\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n get value() {\n return this.materialRoot.value;\n }\n\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n get materialRoot(): Select {\n return this.shadowRoot?.querySelector('md-filled-select') ?? this.default;\n }\n\n changeHandler = () => {\n this.materialRoot.setAttribute(\n 'value',\n this.materialRoot.selectedOptions[0].value\n );\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true }));\n };\n\n firstUpdated() {\n this.addEventListener('request-selection', () => {\n this.internals.setFormValue(this.materialRoot.value);\n });\n }\n\n protected override updated(changed: PropertyValues<Select>) {\n if (changed.has('required')) {\n this.syncValidity();\n }\n }\n\n // eslint-disable-next-line consistent-return\n render() {\n if (this.appearance === 'outlined') {\n return html` <md-outlined-select\n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .menu-positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .error=${this.hasError}\n .name=${this.name}\n .required=${this.required}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n @change=${this.changeHandler}\n >\n <slot></slot>\n </md-outlined-select>`;\n }\n if (this.appearance === 'filled') {\n return html`\n <md-filled-select \n .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n .tabindex=${this.disabled ? '-1' : '0'}\n .label=${this.label}\n .populated=${!!this.displayText}\n .disabled=${this.disabled}\n .quick=${this.quick}\n .positioning=${this.menuPositioning}\n .typeaheadDelay=${this.typeaheadDelay}\n .required=${this.required}\n .error=${this.hasError}\n supporting-text=${this.supportingText}\n error-text=${this.getErrorText()}\n @change=${this.changeHandler}\n >\n <slot></slot>\n </md-filled-select>`;\n }\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n reportValidity() {\n let invalidEvent: Event | undefined;\n this.addEventListener(\n 'invalid',\n event => {\n invalidEvent = event;\n },\n { once: true }\n );\n\n const valid = this.checkValidity();\n if (invalidEvent?.defaultPrevented) {\n return valid;\n }\n\n const prevMessage = this.getErrorText();\n this.nativeError = !valid;\n this.nativeErrorText = this.validationMessage;\n\n if (prevMessage === this.getErrorText()) {\n this.field?.reannounceError();\n }\n\n return valid;\n }\n\n setCustomValidity(error: string) {\n this.customValidationMessage = error;\n this.syncValidity();\n }\n\n private syncValidity() {\n const valueMissing = this.required && !this.materialRoot.value;\n const customError = !!this.customValidationMessage;\n const validationMessage =\n this.customValidationMessage ||\n (valueMissing && this.getRequiredValidationMessage()) ||\n '';\n\n this.internals.setValidity(\n { valueMissing, customError },\n validationMessage\n );\n }\n\n // eslint-disable-next-line class-methods-use-this\n private getRequiredValidationMessage() {\n const select = document.createElement('select');\n select.required = true;\n return select.validationMessage;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-select following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "interxion",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.4",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"README.md",
|
|
101
101
|
"LICENSE"
|
|
102
102
|
],
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "8b801892bdb92ec0c653961b76f4a144cc35a4f1"
|
|
104
104
|
}
|