@awc-ui/core 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/collection/components/md-multi-select/md-multi-select.js

@@ -1,4 +1,5 @@
 import { Host, forceUpdate, h } from "@stencil/core";
+import { LazyLoadingIndicator } from "../../utils/lazy-loading-indicator";
 import { collectOptions, normalizeInits, rowsToArray, } from "../../utils/select-options";
 import { setFormValue, checkValidityOf, reportValidityOf, getValidityOf } from "../../utils/form";
 import { VirtualSelectController } from "../../utils/virtual-select-controller";
@@ -884,7 +885,7 @@ export class MdMultiSelect {
             chipsWrap: isInline && this.chipOverflow === 'wrap', onClick: this.toggleOpen }, this.hasTriggerLeading && h("slot", { name: "trigger-leading", slot: "leading-icon" }), isInline && this.renderInlineChips(), this.hasTriggerTrailing && h("slot", { name: "trigger-trailing", slot: "trailing-icon" }), this.loading ? (
         // Busy state: a spinner replaces the clear/caret cluster. Consumers can
         // swap it via the `loader` slot; the default is md-loading-indicator.
-        h("span", { slot: "trailing-icon", class: "md-multi-select__loader", part: "loading-spinner" }, h("slot", { name: "loader" }, h("md-loading-indicator", { label: this.loadingText })))) : ([
+        h("span", { slot: "trailing-icon", class: "md-multi-select__loader", part: "loading-spinner" }, h("slot", { name: "loader" }, h(LazyLoadingIndicator, { label: this.loadingText })))) : ([
             this.clearable && hasValue && !this.isDisabled && (
             // A real <button> in the trailing slot: md-text-field detects it as an
             // interactive trailing control and un-hides the trailing wrapper, so this
@@ -1041,7 +1042,7 @@ export class MdMultiSelect {
             // WAI-ARIA combobox: this input owns focus while the listbox is open;
             // md-menu conveys the active option via aria-activedescendant, and
             // aria-controls points at the listbox wrapper rendered in this shadow root.
-            role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-controls": `${this.triggerId}-listbox`, "aria-autocomplete": "list", autocomplete: "off", placeholder: this.searchPlaceholder, "aria-label": this.filterLabel || (this.label ? `Filter ${this.label}` : 'Filter options'), onInput: this.onSearchInput, onClick: (e) => e.stopPropagation() }), this.searching && (h("md-loading-indicator", { class: "md-multi-select__search-spinner", part: "search-spinner", label: this.searchingLabel, "aria-hidden": "true" })))), this.showSelectAll && !virtual && !this.loading && this.optionsData.length > 0 && (h("div", { slot: "header", class: "md-multi-select__select-all", part: "select-all" }, h("md-menu-item", { type: "checkbox", "check-position": "start", part: "select-all-item", "role-override": "checkbox", "keep-open": true, headline: this.selectAllLabel, selected: allSelected, indeterminate: someSelected, disabled: this.isDisabled, onMdClick: (e) => this.toggleSelectAll(e) }))), this.loading ? (
+            role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-controls": `${this.triggerId}-listbox`, "aria-autocomplete": "list", autocomplete: "off", placeholder: this.searchPlaceholder, "aria-label": this.filterLabel || (this.label ? `Filter ${this.label}` : 'Filter options'), onInput: this.onSearchInput, onClick: (e) => e.stopPropagation() }), this.searching && (h(LazyLoadingIndicator, { class: "md-multi-select__search-spinner", part: "search-spinner", label: this.searchingLabel, "aria-hidden": "true" })))), this.showSelectAll && !virtual && !this.loading && this.optionsData.length > 0 && (h("div", { slot: "header", class: "md-multi-select__select-all", part: "select-all" }, h("md-menu-item", { type: "checkbox", "check-position": "start", part: "select-all-item", "role-override": "checkbox", "keep-open": true, headline: this.selectAllLabel, selected: allSelected, indeterminate: someSelected, disabled: this.isDisabled, onMdClick: (e) => this.toggleSelectAll(e) }))), this.loading ? (
         // Busy state inside the menu: a wavy (M3 Expressive) indeterminate linear
         // progress bar instead of the option list or "Loading…" text.
         h("div", { class: "md-multi-select__loading", part: "loading-bar", role: "status", "aria-label": this.loadingText }, h("slot", { name: "menu-loader" }, h("md-progress-indicator", { variant: "linear", indeterminate: true, wave: true, part: "loading-progress", label: this.loadingText })))) : virtual ? (
@@ -1063,7 +1064,7 @@ export class MdMultiSelect {
         ])));
     }
     render() {
-        return (h(Host, { key: '727566ee17b4c8007345fa27ee2fd1315d6af128', class: {
+        return (h(Host, { key: '9fe3cdfe669524760d977efe2714ebcf4f19a59c', class: {
                 'md-multi-select': true,
                 [`md-multi-select--${this.variant}`]: true,
                 'md-multi-select--open': this.open,
@@ -1076,7 +1077,7 @@ export class MdMultiSelect {
                 [`md-multi-select--chips-${this.chipPosition}`]: this.trigger === 'button' ||
                     this.hasSlottedTrigger ||
                     this.displayMode === 'chips',
-            }, "aria-haspopup": "listbox", "aria-busy": this.loading ? 'true' : undefined }, h("div", { key: 'b7451455e24cf345b609f878a3c4af7c598262e1', class: "md-multi-select__frame", part: "frame", ref: (el) => (this.frameEl = el) }, this.renderTrigger(), this.renderChips()), this.renderInlineMeasure(), this.renderMenu(), h("div", { key: '528396f650beec0a7718d9217afd9dafc08288b1', class: "md-multi-select__sr-live", part: "live-region", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.liveMessage), h("div", { key: '0ff0bf3c847d24cd8a66ea48e26679d3c82e49f8', class: "md-multi-select__options", hidden: true }, h("slot", { key: 'c6171dbffffbf80dc23fab363790d72037b1630e', onSlotchange: () => this.refreshOptions() }))));
+            }, "aria-haspopup": "listbox", "aria-busy": this.loading ? 'true' : undefined }, h("div", { key: '7b1b2aecd1ac12d5645e779daa2973d60c00d678', class: "md-multi-select__frame", part: "frame", ref: (el) => (this.frameEl = el) }, this.renderTrigger(), this.renderChips()), this.renderInlineMeasure(), this.renderMenu(), h("div", { key: '18d8e66db39168d0f4d336220c09dab3615460aa', class: "md-multi-select__sr-live", part: "live-region", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.liveMessage), h("div", { key: '0b01ad6bdeb5d95c6d035bc739ac83094f0e6e57', class: "md-multi-select__options", hidden: true }, h("slot", { key: 'e4bbb120ffdaf6307976dffa41227e97a8b834d0', onSlotchange: () => this.refreshOptions() }))));
     }
     static get is() { return "md-multi-select"; }
     static get encapsulation() { return "shadow"; }