@digital-realty/ix-select 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -55
- package/dist/IxSelect.js +16 -17
- package/dist/IxSelect.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -33,59 +33,6 @@ import { IxSelect, IxSelectOption } from 'ix-select'
|
|
|
33
33
|
</IxSelect>
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
##
|
|
36
|
+
## Demo and Documentation
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
npm run lint
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
To automatically fix linting and formatting errors, run
|
|
45
|
-
|
|
46
|
-
```bash
|
|
47
|
-
npm run format
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
## Testing with Web Test Runner
|
|
51
|
-
|
|
52
|
-
To execute a single test run:
|
|
53
|
-
|
|
54
|
-
```bash
|
|
55
|
-
npm run test
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
To run the tests in interactive watch mode run:
|
|
59
|
-
|
|
60
|
-
```bash
|
|
61
|
-
npm run test:watch
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
## Demoing with Storybook
|
|
65
|
-
|
|
66
|
-
To run a local instance of Storybook for your component, run
|
|
67
|
-
|
|
68
|
-
```bash
|
|
69
|
-
npm run storybook
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
To build a production version of Storybook, run
|
|
73
|
-
|
|
74
|
-
```bash
|
|
75
|
-
npm run storybook:build
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
## Tooling configs
|
|
80
|
-
|
|
81
|
-
For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
|
|
82
|
-
|
|
83
|
-
If you customize the configuration a lot, you can consider moving them to individual files.
|
|
84
|
-
|
|
85
|
-
## Local Demo with `web-dev-server`
|
|
86
|
-
|
|
87
|
-
```bash
|
|
88
|
-
npm start
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
To run a local development server that serves the basic demo located in `demo/index.html`
|
|
38
|
+
Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-select--default).
|
package/dist/IxSelect.js
CHANGED
|
@@ -105,23 +105,22 @@ export class IxSelect extends LitElement {
|
|
|
105
105
|
</md-outlined-select>`;
|
|
106
106
|
}
|
|
107
107
|
if (this.appearance === 'filled') {
|
|
108
|
-
return html `
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
>
|
|
124
|
-
<slot></slot>
|
|
108
|
+
return html ` <md-filled-select
|
|
109
|
+
.aria-label=${this.ariaLabel || nothing}
|
|
110
|
+
.tabindex=${this.disabled ? '-1' : '0'}
|
|
111
|
+
.label=${this.label}
|
|
112
|
+
.populated=${!!this.displayText}
|
|
113
|
+
.disabled=${this.disabled}
|
|
114
|
+
.quick=${this.quick}
|
|
115
|
+
.positioning=${this.menuPositioning}
|
|
116
|
+
.typeaheadDelay=${this.typeaheadDelay}
|
|
117
|
+
.required=${this.required}
|
|
118
|
+
.error=${this.hasError}
|
|
119
|
+
supporting-text=${this.supportingText}
|
|
120
|
+
error-text=${this.getErrorText()}
|
|
121
|
+
@change=${this.changeHandler}
|
|
122
|
+
>
|
|
123
|
+
<slot></slot>
|
|
125
124
|
</md-filled-select>`;
|
|
126
125
|
}
|
|
127
126
|
}
|
package/dist/IxSelect.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxSelect.js","sourceRoot":"","sources":["../src/IxSelect.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI3D,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,oCAAoC,CAAC;AAE5C,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAC;AAEjD,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAUc,eAAU,GAA0B,UAAU,CAAC;QAE/C,UAAK,GAAW,EAAE,CAAC;QAEF,UAAK,GAAG,KAAK,CAAC;QAEd,aAAQ,GAAG,KAAK,CAAC;QAEF,aAAQ,GAAG,KAAK,CAAC;QAER,cAAS,GAAG,EAAE,CAAC;QAEV,mBAAc,GAAG,EAAE,CAAC;QAElC,UAAK,GAAG,KAAK,CAAC;QAEH,gBAAW,GAAG,EAAE,CAAC;QAExE;;;;;;WAMG;QAEH,oBAAe,GAAyB,UAAU,CAAC;QAEnD;;;WAGG;QAEH,mBAAc,GAAG,6BAA6B,CAAC;QAE9B,gBAAW,GAAG,KAAK,CAAC;QAEpB,oBAAe,GAAG,EAAE,CAAC;QAMrB,cAAS,GAAI,IAAoB,CAAC,wBAAwB;aACxE,eAAe,EAAE,CAAC;QAEb,4BAAuB,GAAG,EAAE,CAAC;QAoCrC,kBAAa,GAAG,GAAG,EAAE;YACnB,IAAI,CAAC,YAAY,CAAC,YAAY,CAC5B,OAAO,EACP,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAC3C,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAC1E,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7D,CAAC,CAAC;IAsHJ,CAAC;IAxKC,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC;IACxC,CAAC;IAOD,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,IAAI,CAAC,IAAY;QACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;IACjC,CAAC;IAED,IAAI,iBAAiB;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED,IAAI,YAAY;;QACd,OAAO,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAC,mCAAI,IAAI,CAAC,OAAO,CAAC;IAC5E,CAAC;IAWD,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,GAAG,EAAE;YAC9C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,OAA+B;QACxD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;IACH,CAAC;IAED,6CAA6C;IAC7C,MAAM;QACJ,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE;YAClC,OAAO,IAAI,CAAA;sBACM,IAAwB,CAAC,SAAS,IAAI,OAAO;oBAChD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;iBAC7B,IAAI,CAAC,KAAK;qBACN,CAAC,CAAC,IAAI,CAAC,WAAW;oBACnB,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,KAAK;4BACC,IAAI,CAAC,eAAe;0BACtB,IAAI,CAAC,cAAc;iBAC5B,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,IAAI;oBACL,IAAI,CAAC,QAAQ;0BACP,IAAI,CAAC,cAAc;qBACxB,IAAI,CAAC,YAAY,EAAE;kBACtB,IAAI,CAAC,aAAa;;;4BAGR,CAAC;SACxB;QACD,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE;YAChC,OAAO,IAAI,CAAA;;wBAEQ,IAAwB,CAAC,SAAS,IAAI,OAAO;sBAChD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;mBAC7B,IAAI,CAAC,KAAK;uBACN,CAAC,CAAC,IAAI,CAAC,WAAW;sBACnB,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,KAAK;yBACJ,IAAI,CAAC,eAAe;4BACjB,IAAI,CAAC,cAAc;sBACzB,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,QAAQ;4BACJ,IAAI,CAAC,cAAc;uBACxB,IAAI,CAAC,YAAY,EAAE;oBACtB,IAAI,CAAC,aAAa;;;0BAGZ,CAAC;SACtB;IACH,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAC5D,CAAC;IAED,aAAa;QACX,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,cAAc;;QACZ,IAAI,YAA+B,CAAC;QACpC,IAAI,CAAC,gBAAgB,CACnB,SAAS,EACT,KAAK,CAAC,EAAE;YACN,YAAY,GAAG,KAAK,CAAC;QACvB,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;QAEF,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACnC,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,EAAE;YAClC,OAAO,KAAK,CAAC;SACd;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,IAAI,CAAC,WAAW,GAAG,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAE9C,IAAI,WAAW,KAAK,IAAI,CAAC,YAAY,EAAE,EAAE;YACvC,MAAA,IAAI,CAAC,KAAK,0CAAE,eAAe,EAAE,CAAC;SAC/B;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAED,iBAAiB,CAAC,KAAa;QAC7B,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACrC,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEO,YAAY;QAClB,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;QAC/D,MAAM,WAAW,GAAG,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC;QACnD,MAAM,iBAAiB,GACrB,IAAI,CAAC,uBAAuB;YAC5B,CAAC,YAAY,IAAI,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACrD,EAAE,CAAC;QAEL,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,EAAE,YAAY,EAAE,WAAW,EAAE,EAC7B,iBAAiB,CAClB,CAAC;IACJ,CAAC;IAED,kDAAkD;IAC1C,4BAA4B;QAClC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,OAAO,MAAM,CAAC,iBAAiB,CAAC;IAClC,CAAC;;AAvND,kBAAkB;AACF,uBAAc,GAAG,IAAI,CAAC;AAErB;IAAhB,KAAK,CAAC,QAAQ,CAAC;uCAAuC;AAExC;IAAd,KAAK,CAAC,MAAM,CAAC;wCAA0B;AAEX;IAA5B,KAAK,CAAC,oBAAoB,CAAC;yCAAkB;AAElC;IAAX,QAAQ,EAAE;4CAAgD;AAE/C;IAAX,QAAQ,EAAE;uCAAoB;AAEF;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAe;AAEd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEF;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAER;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAAgB;AAEV;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;gDAAqB;AAElC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAEH;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6CAAkB;AAUxE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;iDACO;AAOnD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;gDACV;AAEtC;IAAR,KAAK,EAAE;6CAA6B;AAE5B;IAAR,KAAK,EAAE;iDAA8B","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"]}
|
|
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` <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.6",
|
|
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": "f487170ac27de967505c921dabf983d2a122e625"
|
|
104
104
|
}
|