npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.b2db78f → 0.0.0-insider.b85326c - Mend

@six-group/ui-library 0.0.0-insider.b2db78f → 0.0.0-insider.b85326c

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.

Files changed (1176) hide show

package/dist/collection/components/six-select/six-select.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { getTextContent, hasSlot } from "../../utils/slot";
+import { getSlot, getTextContent, hasSlot } from "../../utils/slot";
 import FormControl from "../../functional-components/form-control/form-control";
 import { EventListeners } from "../../utils/event-listeners";
 import { debounce, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
@@ -220,7 +220,7 @@ export class SixSelect {
                                 this.syncValueFromItems();
                                 this.sixChange.emit({ value: this.value, isSelected: true });
                             }
-                        } }, this.getItemLabel(item)));
+                        } }, this.getSlottedItem(item, 'prefix'), this.getItemLabel(item), this.getSlottedItem(item, 'suffix')));
                 });
             }
             this.isOpen = true;
@@ -319,6 +319,14 @@ export class SixSelect {
             return (_b = item.textContent) !== null && _b !== void 0 ? _b : '';
         }
     }
+    getSlottedItem(item, slotName) {
+        const slottedElement = getSlot(item, slotName);
+        if (slottedElement == null) {
+            return null;
+        }
+        const attributes = Object.fromEntries([...slottedElement.attributes].map((attr) => [attr.name, attr.value]));
+        return h(slottedElement.tagName.toLowerCase(), Object.assign(Object.assign({}, attributes), { innerHTML: slottedElement.innerHTML }));
+    }
     getItems() {
         if (this.options !== null && this.menu != null && this.menu.shadowRoot != null) {
             return [...this.menu.shadowRoot.querySelectorAll('six-menu-item')];
@@ -442,7 +450,7 @@ export class SixSelect {
             showClear = true;
             showExpand = false;
         }
-        return (h(FormControl, { key: 'f9827d54da20b0c36de14650fb04d3a3a97f2918', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: 'e53e3d25e2c9244625522f94d5b36105e5d987f3', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
+        return (h(FormControl, { key: '9312ec8e2cedbb88f1404d6ddb2f8e67a952f6da', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, onLabelClick: this.handleLabelClick, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("six-dropdown", { key: '77887d36593e973b83d80aec7fcb51c9f85d9d0c', part: "base", ref: (el) => (this.dropdown = el), hoist: this.hoist, matchTriggerWidth: true, closeOnSelect: !this.multiple, containingElement: this.host, disableHideOnEnterAndSpace: this.autocomplete, class: {
                 select: true,
                 'select--open': this.isOpen,
                 'select--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
@@ -457,20 +465,20 @@ export class SixSelect {
                 'select--large': this.size === 'large',
                 'select--pill': this.pill,
                 'select--invalid': this.invalid,
-            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { key: '553accc8bd6c4be66593b5f8ac96f485d3e2a8cb', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
+            }, onKeyDown: this.handleKeyDown, "onSix-dropdown-show": this.handleMenuShow, "onSix-dropdown-hide": this.handleMenuHide, filterPlaceholder: this.filterPlaceholder, filterDebounce: this.filterDebounce, filter: this.filter, asyncFilter: this.asyncFilter, virtualScroll: this.virtualScroll }, h("div", { key: 'afddffa7f575127a3c53b2bd23f996809adb9844', slot: "trigger", ref: (el) => (this.box = el), id: this.inputId, class: {
                 select__box: true,
                 'select__box--line': this.line,
                 'select__box--autocomplete': this.autocomplete,
-            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { key: 'f2201e36050a8127d7a173b0c9b39a92b2eb8563', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { key: '3f2d238e44f27d9790b316256717f6f673d31a69', exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { key: '3f7dfa9c4a8f598e91869665c2249b990ac44351', part: "icon", class: "select__icon" }, h("six-icon", { key: '3fa185567fdf0974f630951667c3af1981122064', size: "medium" }, "expand_more"))), h("six-input", { key: '021f19d93247a0cadf811a24580dc8f46ed5004f', ref: (el) => (this.autocompleteInput = el), class: {
+            }, role: "combobox", "aria-labelledby": this.labelId, "aria-describedby": this.helpTextId, "aria-haspopup": "true", "aria-expanded": this.isOpen ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onBlur: this.handleBlur, onFocus: this.handleFocus }, h("div", { key: '21b0e4ccb4535037e197b7dbd9a23f0bc37cf5f8', class: "display__values", ref: (el) => (this.displayValuesContainer = el) }, this.displayedValues.length > 0 ? (h("span", { class: "display__values-and-counter" }, h("span", { class: "display__values-values" }, this.displayedValues.map((value) => (h("span", { key: value, class: "display-value" }, value, h("span", { class: { separator: true } }, ", "))))), h("span", { ref: (el) => (this.overflowCount = el), class: "overflow-count" }, "+10"))) : (h("span", { class: "placeholder" }, this.placeholder))), showClear && (h("six-icon-button", { key: '4dfa510d19ed31997002b1eefff2e467a34b5fd0', exportparts: "base:clear-button", class: "select__clear", name: "clear", size: "small", onClick: this.handleClearClick, tabindex: "-1" })), showExpand && (h("span", { key: 'f03b60a3935c809d9f98342ad7b27698abaf537c', part: "icon", class: "select__icon" }, h("six-icon", { key: '271b8b90377be367a38abe77df0b5ae60960b9a8', size: "medium" }, "expand_more"))), h("six-input", { key: '0a8a3e663dd316f38e0d62625cd6c824022b0fd1', ref: (el) => (this.autocompleteInput = el), class: {
                 select__input: true,
                 'sr-only': !this.autocomplete,
-            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: '24abda79d4b024a062c604ca7a02f3e1f51159cb', class: {
+            }, "aria-hidden": "true", required: this.required, onFocus: this.handleFocus, clearable: this.clearable, placeholder: this.placeholder, pill: this.pill, disabled: this.disabled, size: this.size, tabIndex: -1 })), h("div", { key: 'a5fe2da3ed21d2e8cacbeb84ada7538f960b182e', class: {
                 'selection-container': true,
                 'selection-container--border': this.selectionContainerItems.length > 0 && items.length !== this.selectionContainerItems.length,
-            } }, this.selectionContainerItems), h("six-menu", { key: 'ffd8ebfed22f01708bbb08d81c15341341e7727a', ref: (el) => (this.menu = el), part: "menu", class: {
+            } }, this.selectionContainerItems), h("six-menu", { key: 'ba0c95940b5af32bdd1a8f5f65e4ea6f81ee5bb1', ref: (el) => (this.menu = el), part: "menu", class: {
                 select__menu: true,
                 'select__menu--hidden': !hasMenuItems,
-            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: 'fb614513d6f9477cdfa7e4a13ac503fea2d76a82', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: '14a20b465530efeb97e140d26d73698d00ac55ce', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: '8ece78f471f1d5fb8efa5a16b084987c86dac13c', type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
+            }, "onSix-menu-item-selected": this.handleMenuSelect, items: this.options, virtualScroll: this.virtualScroll, "remove-box-shadow": true, "disable-keyboard-handling": true }, h("slot", { key: 'f6be5fd5f9070395df4e165f0f912d274ffcc4b5', onSlotchange: this.handleSlotChange })), this.multiple && this.selectAllButton && (h("div", { key: 'bc6fe23ff6e09d9cb1c9709dc78199600d08cb3f', class: "select-all", slot: "dropdown-footer" }, h("six-button", { key: '4ac03af8a7233ed46ac2d9e4ed515a79387a2d2b', type: "link", onClick: () => this.selectAll() }, this.selectAllText == null ? selectAllDefaultText(hasDeselectedOptions) : this.selectAllText))))));
     }
     hasSelection() {
         return this.multiple ? this.value.length > 0 : this.value !== '';
@@ -494,6 +502,7 @@ export class SixSelect {
         return {
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -508,12 +517,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selectAllButton": {
                 "type": "boolean",
+                "attribute": "select-all-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -528,12 +537,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "select-all-button",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selectAllText": {
                 "type": "string",
+                "attribute": "select-all-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -548,11 +557,11 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "select-all-text",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -567,12 +576,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -587,12 +596,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -607,12 +616,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "filterPlaceholder": {
                 "type": "string",
+                "attribute": "filter-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -627,11 +636,11 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-placeholder",
                 "reflect": false
             },
             "filterDebounce": {
                 "type": "number",
+                "attribute": "filter-debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -646,11 +655,11 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-debounce",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -665,12 +674,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "hoist": {
                 "type": "boolean",
+                "attribute": "hoist",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -685,12 +694,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hoist",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[]",
@@ -705,12 +714,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "pill": {
                 "type": "boolean",
+                "attribute": "pill",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -725,12 +734,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pill",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -745,12 +754,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "help-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -765,12 +774,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -785,12 +794,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clearable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -805,12 +814,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -825,12 +834,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorTextCount": {
                 "type": "number",
+                "attribute": "error-text-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -845,11 +854,11 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text-count",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -864,12 +873,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "line": {
                 "type": "boolean",
+                "attribute": "line",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -884,12 +893,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "line",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "filter": {
                 "type": "boolean",
+                "attribute": "filter",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -904,12 +913,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "asyncFilter": {
                 "type": "boolean",
+                "attribute": "async-filter",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -924,12 +933,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "async-filter",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "autocomplete": {
                 "type": "boolean",
+                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -944,12 +953,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inputDebounce": {
                 "type": "number",
+                "attribute": "input-debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -964,12 +973,12 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input-debounce",
                 "reflect": false,
                 "defaultValue": "DEFAULT_DEBOUNCE_FAST"
             },
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "SixMenuItemData[] | null",
@@ -994,6 +1003,7 @@ export class SixSelect {
             },
             "virtualScroll": {
                 "type": "boolean",
+                "attribute": "virtual-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1008,7 +1018,6 @@ export class SixSelect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "virtual-scroll",
                 "reflect": false,
                 "defaultValue": "false"
             }