@digital-realty/ix-select 1.0.15 → 1.0.17
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.
|
@@ -43,6 +43,8 @@ export declare class IxSelectOption extends LitElement implements SelectOption {
|
|
|
43
43
|
value: string;
|
|
44
44
|
protected readonly listItemRoot: HTMLElement | null;
|
|
45
45
|
protected readonly headlineElements: HTMLElement[];
|
|
46
|
+
protected readonly supportingTextElements: HTMLElement[];
|
|
47
|
+
protected readonly defaultElements: Element[];
|
|
46
48
|
type: "option";
|
|
47
49
|
/**
|
|
48
50
|
* The text that is selectable via typeahead. If not set, defaults to the
|
|
@@ -8,7 +8,7 @@ import '@material/web/ripple/ripple.js';
|
|
|
8
8
|
import '@material/web/focus/md-focus-ring.js';
|
|
9
9
|
import '@material/web/labs/item/item.js';
|
|
10
10
|
import { html, LitElement, nothing } from 'lit';
|
|
11
|
-
import { property, query, queryAssignedElements } from 'lit/decorators.js';
|
|
11
|
+
import { property, query, queryAssignedElements, queryAssignedNodes, } from 'lit/decorators.js';
|
|
12
12
|
import { classMap } from 'lit/directives/class-map.js';
|
|
13
13
|
import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
|
|
14
14
|
import { SelectOptionController, } from './selectOptionController.js';
|
|
@@ -41,7 +41,9 @@ export class IxSelectOption extends LitElement {
|
|
|
41
41
|
this.type = 'option';
|
|
42
42
|
this.selectOptionController = new SelectOptionController(this, {
|
|
43
43
|
getHeadlineElements: () => this.headlineElements,
|
|
44
|
-
|
|
44
|
+
getSupportingTextElements: () => this.supportingTextElements,
|
|
45
|
+
getDefaultElements: () => this.defaultElements,
|
|
46
|
+
getInteractiveElement: () => this.listItemRoot,
|
|
45
47
|
});
|
|
46
48
|
}
|
|
47
49
|
/**
|
|
@@ -179,6 +181,12 @@ __decorate([
|
|
|
179
181
|
__decorate([
|
|
180
182
|
queryAssignedElements({ slot: 'headline' })
|
|
181
183
|
], IxSelectOption.prototype, "headlineElements", void 0);
|
|
184
|
+
__decorate([
|
|
185
|
+
queryAssignedElements({ slot: 'supporting-text' })
|
|
186
|
+
], IxSelectOption.prototype, "supportingTextElements", void 0);
|
|
187
|
+
__decorate([
|
|
188
|
+
queryAssignedNodes({ slot: '' })
|
|
189
|
+
], IxSelectOption.prototype, "defaultElements", void 0);
|
|
182
190
|
__decorate([
|
|
183
191
|
property({ attribute: 'typeahead-text' })
|
|
184
192
|
], IxSelectOption.prototype, "typeaheadText", null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxSelectOption.js","sourceRoot":"","sources":["../../src/selectoption/IxSelectOption.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,
|
|
1
|
+
{"version":3,"file":"IxSelectOption.js","sourceRoot":"","sources":["../../src/selectoption/IxSelectOption.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '@material/web/ripple/ripple.js';\nimport '@material/web/focus/md-focus-ring.js';\nimport '@material/web/labs/item/item.js';\n\nimport { html, LitElement, nothing } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n queryAssignedNodes,\n} from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\nimport { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nimport {\n SelectOption,\n SelectOptionController,\n} from './selectOptionController.js';\n\n/**\n * @fires close-menu Closes the encapsulating menu on\n * @fires request-selection Requests the parent md-select to select this element\n * (and deselect others if single-selection) when `selected` changed to `true`.\n * @fires request-deselection Requests the parent md-select to deselect this\n * element when `selected` changed to `false`.\n */\nexport class IxSelectOption extends LitElement implements SelectOption {\n static {\n requestUpdateOnAriaChange(IxSelectOption);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Disables the item and makes it non-selectable and non-interactive.\n */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * READONLY: self-identifies as a menu item and sets its identifying attribute\n */\n @property({ type: Boolean, attribute: 'md-menu-item', reflect: true })\n isMenuItem = true;\n\n /**\n * Sets the item in the selected visual state when a submenu is opened.\n */\n @property({ type: Boolean }) selected = false;\n\n /**\n * Form value of the option.\n */\n @property() value = '';\n\n @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n @queryAssignedElements({ slot: 'headline' })\n protected readonly headlineElements!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'supporting-text' })\n protected readonly supportingTextElements!: HTMLElement[];\n\n @queryAssignedNodes({ slot: '' })\n protected readonly defaultElements!: Element[];\n\n type = 'option' as const;\n\n /**\n * The text that is selectable via typeahead. If not set, defaults to the\n * innerText of the item slotted into the `\"headline\"` slot.\n */\n get typeaheadText() {\n return this.selectOptionController.typeaheadText;\n }\n\n @property({ attribute: 'typeahead-text' })\n set typeaheadText(text: string) {\n this.selectOptionController.setTypeaheadText(text);\n }\n\n /**\n * The text that is displayed in the select field when selected. If not set,\n * defaults to the textContent of the item slotted into the `\"headline\"` slot.\n */\n get displayText() {\n return this.selectOptionController.displayText;\n }\n\n @property({ attribute: 'display-text' })\n set displayText(text: string) {\n this.selectOptionController.setDisplayText(text);\n }\n\n private readonly selectOptionController = new SelectOptionController(this, {\n getHeadlineElements: () => this.headlineElements,\n getSupportingTextElements: () => this.supportingTextElements,\n getDefaultElements: () => this.defaultElements,\n getInteractiveElement: () => this.listItemRoot,\n });\n\n protected override render() {\n return this.renderListItem(html`\n <md-item>\n <div slot=\"container\">\n ${this.renderRipple()} ${this.renderFocusRing()}\n </div>\n <slot name=\"start\" slot=\"start\"></slot>\n <slot name=\"end\" slot=\"end\"></slot>\n ${this.renderBody()}\n </md-item>\n `);\n }\n\n /**\n * Renders the root list item.\n *\n * @param content the child content of the list item.\n */\n protected renderListItem(content: unknown) {\n return html`\n <li\n id=\"item\"\n tabindex=${this.disabled ? -1 : 0}\n role=${this.selectOptionController.role}\n aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}\n aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n class=\"list-item ${classMap(this.getRenderClasses())}\"\n @click=${this.selectOptionController.onClick}\n @keydown=${this.selectOptionController.onKeydown}\n >\n ${content}\n </li>\n `;\n }\n\n /**\n * Handles rendering of the ripple element.\n */\n protected renderRipple() {\n return html` <md-ripple\n part=\"ripple\"\n for=\"item\"\n ?disabled=${this.disabled}\n ></md-ripple>`;\n }\n\n /**\n * Handles rendering of the focus ring.\n */\n // eslint-disable-next-line class-methods-use-this\n protected renderFocusRing() {\n return html` <md-focus-ring\n part=\"focus-ring\"\n for=\"item\"\n inward\n ></md-focus-ring>`;\n }\n\n /**\n * Classes applied to the list item root.\n */\n protected getRenderClasses(): ClassInfo {\n return {\n disabled: this.disabled,\n selected: this.selected,\n };\n }\n\n /**\n * Handles rendering the headline and supporting text.\n */\n // eslint-disable-next-line class-methods-use-this\n protected renderBody() {\n return html`\n <slot></slot>\n <slot name=\"overline\" slot=\"overline\"></slot>\n <slot name=\"headline\" slot=\"headline\"></slot>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n <slot\n name=\"trailing-supporting-text\"\n slot=\"trailing-supporting-text\"\n ></slot>\n `;\n }\n\n override focus() {\n // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n // work programmatically like in FF and select-option\n this.listItemRoot?.focus();\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.17",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@digital-realty/ix-icon": "
|
|
33
|
+
"@digital-realty/ix-icon": "*",
|
|
34
34
|
"@lit/react": "^1.0.2",
|
|
35
35
|
"@material/web": "^1.0.1",
|
|
36
36
|
"lit": "^2.0.2",
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"README.md",
|
|
105
105
|
"LICENSE"
|
|
106
106
|
],
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "4c0b776d7e028829eb231dc34af90f9f31a790b0"
|
|
108
108
|
}
|