@ukic/web-components 3.0.0-alpha.4 → 3.0.0-alpha.6

package/dist/collection/components/ic-select/ic-select.css

@@ -453,26 +453,45 @@ video {
 
   --ic-input-label-helpertext-padding: var(--ic-space-xxs);
   --menu-max-height: 100px;
+  --border-color: var(--ic-select-field-border);
+  --border-color-hover: var(--ic-select-field-border-hover);
+  --border-color-pressed: var(--ic-select-field-border-pressed);
+  --border-color-disabled: var(--ic-select-field-border-disabled);
+  --border-color-error: var(--ic-select-field-border-error);
+  --border-color-error-hover: var(--ic-select-field-border-error-hover);
+  --border-color-error-pressed: var(--ic-select-field-border-error-pressed);
+  --border-color-success: var(--ic-select-field-border-success);
+  --border-color-success-hover: var(--ic-select-field-border-success-hover);
+  --border-color-success-pressed: var(--ic-select-field-border-success-pressed);
+  --border-color-warning: var(--ic-select-field-border-warning);
+  --border-color-warning-hover: var(--ic-select-field-border-warning-hover);
+  --border-color-warning-pressed: var(--ic-select-field-border-warning-pressed);
+  --ic-input-label-text-color: var(--ic-select-field-labe);
+  --ic-input-label-helper-text-color: var(
+    --ic-select-input-field-label-subtitle
+  );
+  --ic-input-validation-status-text-color: var(--ic-select-state-text);
+  --ic-input-validation-error: var(--ic-select-state-icon-error);
+  --ic-input-validation-warning-icon-color: var(--ic-select-state-icon-warning);
+  --ic-input-validation-success-icon-color: var(--ic-select-state-icon-success);
+  --menu-item-text-color: var(--ic-select-list-option-text);
+  --menu-bg-color: var(--ic-select-list-option-background);
+  --menu-border-color: var(--ic-select-dropdown-list-border);
+}
+
+:host(.ic-select-disabled) {
+  --ic-input-label-text-color: var(--ic-select-field-label-disabled);
+  --ic-input-label-helper-text-color: var(
+    --ic-select-input-field-label-subtitle-disabled
+  );
 }
 
 :host(.ic-select-full-width) {
   width: 100%;
 }
 
-ic-input-component-container:hover {
-  --border-color: var(--ic-action-dark-hover);
-}
-
-ic-input-component-container:active {
-  --border-color: var(--ic-action-dark-pressed);
-
-  color: var(--ic-action-dark-pressed);
-}
-
 ic-input-component-container.menu-open {
-  --border-color: var(--ic-architectural-400);
-
-  color: var(--ic-action-dark);
+  --border-color: var(--ic-select-field-border-pressed);
 }
 
 ic-input-validation .status-icon,
@@ -493,8 +512,8 @@ ic-input-label {
 select {
   border: 0;
   border-radius: var(--ic-border-radius);
-  background-color: var(--ic-architectural-white);
-  color: var(--ic-color-text-primary);
+  background-color: var(--ic-select-field-background);
+  color: var(--ic-select-content-text);
   line-height: 1.5rem;
   letter-spacing: 0.005rem;
   width: 100%;
@@ -505,17 +524,18 @@ select {
           appearance: none;
   background-repeat: no-repeat;
   background-position: right 0.375rem center;
-  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  background-image: var(--ic-select-mobile-dropdown-icon);
+  caret-color: var(--ic-select-input-field-text-cursor);
 }
 
 select option,
 .select-option-selected {
-  color: var(--ic-color-text-primary);
+  color: var(--ic-select-list-option-text);
 }
 
 select:disabled {
-  color: var(--ic-architectural-200);
-  background-image: url("data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  color: var(--ic-select-content-text-disabled);
+  background-image: var(--ic-select-mobile-dropdown-icon-disabled);
 }
 
 select:focus {
@@ -544,18 +564,14 @@ select:not([disabled]) {
   justify-content: space-between;
   background: none;
   border: none;
+  background-color: var(--ic-select-field-background);
+  color: var(--ic-select-content-text);
 }
 
 .select-input:focus {
   outline: var(--ic-hc-focus-outline);
 }
 
-:host(:not(.ic-select-disabled))
-  ic-input-component-container:hover
-  .select-input {
-  background-color: var(--ic-architectural-white);
-}
-
 .select-input[disabled] {
   pointer-events: none;
 }
@@ -591,7 +607,7 @@ select:not([disabled]) {
 .expand-icon {
   height: var(--ic-space-lg);
   padding-left: var(--ic-space-xxs);
-  color: var(--ic-action-dark);
+  color: var(--ic-select-expand-icon-color);
 }
 
 .expand-icon > svg {
@@ -602,7 +618,7 @@ select:not([disabled]) {
 
 :host(.ic-select-disabled) .expand-icon,
 :host(.ic-select-disabled) .expand-icon > svg > path {
-  color: var(--ic-architectural-200);
+  color: var(--ic-select-disabled-expand-icon-color);
 }
 
 :host(.ic-select-searchable) .expand-icon {
@@ -621,7 +637,7 @@ select:not([disabled]) {
 }
 
 .expand-icon-open {
-  color: var(--ic-action-dark);
+  color: var(--ic-select-expand-icon-color);
 }
 
 .expand-icon-open,
@@ -631,7 +647,7 @@ select:not([disabled]) {
 
 :host(.ic-select-disabled) .value-text,
 .placeholder {
-  color: var(--ic-color-text-tertiary);
+  color: var(--ic-select-content-placeholder-text);
 }
 
 .select-input-end {
@@ -646,7 +662,7 @@ select:not([disabled]) {
 
 .divider {
   width: var(--ic-space-1px);
-  background-color: var(--ic-architectural-400);
+  background-color: var(--ic-select-content-divider);
   margin: var(--ic-space-xxs) 0;
   border-radius: var(--ic-space-1px);
   height: var(--ic-space-lg);
@@ -661,6 +677,7 @@ select:not([disabled]) {
 }
 
 .clear-button {
+  color: var(--ic-select-clear-button);
   position: absolute;
   right: calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));
   border-radius: var(--ic-border-radius);
@@ -674,10 +691,6 @@ select:not([disabled]) {
   border-radius: 0.25rem;
 }
 
-.clear-button:focus * {
-  fill: white;
-}
-
 .clear-button.searchable {
   position: static;
 }
@@ -695,11 +708,11 @@ select:not([disabled]) {
 }
 
 ::slotted([slot="icon"]) {
-  fill: var(--ic-color-text-tertiary);
+  fill: var(--ic-select-content-placeholder-text);
 }
 
 .has-value ::slotted([slot="icon"]) {
-  fill: var(--ic-color-text-primary);
+  fill: var(--ic-select-content-text);
 }
 
 .readonly ::slotted([slot="icon"]) {

package/dist/collection/components/ic-select/ic-select.js

@@ -1,7 +1,7 @@
 import { Host, h, forceUpdate, } from "@stencil/core";
 import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, getOptionsWithoutGroupTitlesCount, addFormResetListener, removeFormResetListener, removeDisabledFalse, checkSlotInChildMutations, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
-import { IcInformationStatus, IcThemeForegroundEnum, } from "../../utils/types";
+import { IcInformationStatus, } from "../../utils/types";
 import Expand from "./assets/Expand.svg";
 import Clear from "./assets/Clear.svg";
 let inputIds = 0;
@@ -170,8 +170,10 @@ export class Select {
         this.handleCustomSelectChange = (event) => {
             var _a;
             const value = event.detail.value;
-            if (this.searchable && event.detail.label === this.emptyOptionListText) {
-                this.searchableSelectElement.focus();
+            if (event.detail.label === this.emptyOptionListText) {
+                if (this.searchable) {
+                    this.searchableSelectElement.focus();
+                }
                 return;
             }
             if (this.searchable) {
@@ -584,6 +586,7 @@ export class Select {
         this.showClearButton = false;
         this.size = "medium";
         this.timeout = undefined;
+        this.theme = "inherit";
         this.validationStatus = "";
         this.validationText = "";
         this.loading = false;
@@ -597,6 +600,9 @@ export class Select {
         this.inputValueToFilter = this.value;
         this.currValue = this.value;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     loadingHandler(newValue) {
         newValue && this.triggerLoading();
     }
@@ -724,7 +730,7 @@ export class Select {
         }, 800);
     }
     render() {
-        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, theme, } = this;
         // HTML inputs only accept 'string' for their value
         // Does not cause errors when it is a multi-select - sets value correctly, to a comma-separated string
         renderHiddenInput(true, this.el, name, this.searchable ? this.hiddenInputValue : currValue, disabled);
@@ -736,10 +742,11 @@ export class Select {
         }
         const optionsSelectedCount = `${currValue === null || currValue === void 0 ? void 0 : currValue.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
         return (h(Host, { class: {
-                ["ic-select-disabled"]: disabled,
-                ["ic-select-searchable"]: searchable,
+                "ic-select-disabled": disabled,
+                "ic-select-searchable": searchable,
                 [`ic-select-${size}`]: size !== "medium",
-                ["ic-select-full-width"]: fullWidth,
+                "ic-select-full-width": fullWidth,
+                [`ic-theme-${theme}`]: theme !== "inherit",
             }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (h("span", { slot: "left-icon", class: {
                 ["readonly"]: readonly,
                 ["has-value"]: !!this.value,
@@ -758,9 +765,7 @@ export class Select {
             }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${this.open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), this.searchableSelectInputValue &&
             (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
                 ? "Clear input"
-                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
+                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
             }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${(multiple && currValue
@@ -776,9 +781,7 @@ export class Select {
             placeholder), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { class: {
+            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { class: {
                 "no-results": this.loading ||
                     this.hasTimedOut ||
                     (this.noOptions !== null &&
@@ -1121,7 +1124,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options."
+                    "text": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component."
                 },
                 "attribute": "searchable",
                 "reflect": false,
@@ -1228,6 +1231,30 @@ export class Select {
                 "attribute": "timeout",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "validationStatus": {
                 "type": "string",
                 "mutable": false,
@@ -1572,6 +1599,9 @@ export class Select {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }, {
                 "propName": "loading",
                 "methodName": "loadingHandler"
             }, {