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

package/dist/collection/components/ic-date-input/ic-date-input.css

@@ -443,6 +443,27 @@ video {
 
 :host {
   --ic-input-label-helpertext-padding: var(--ic-space-xxs);
+  --input-bg-color: var(--ic-date-input-bg);
+  --ic-input-label-text-color: var(--ic-date-input-label);
+  --ic-input-label-helper-text-color: var(--ic-date-input-subtitle);
+  --border-color: var(--ic-date-input-border);
+  --border-color-disabled: var(--ic-date-input-border-disabled);
+  --border-color-hover: var(--ic-date-input-border-default-hover);
+  --border-color-pressed: var(--ic-date-input-border-default-pressed);
+  --border-error-color: var(--ic-date-input-border-error);
+  --border-error-color-hover: var(--ic-date-input-border-error-hover);
+  --border-error-color-pressed: var(--ic-date-input-border-error-pressed);
+  --border-success-color: var(--ic-date-input-border-success);
+  --border-success-color-hover: var(--ic-date-input-border-success-hover);
+  --border-success-color-pressed: var(--ic-date-input-border-success-pressed);
+  --border-warning-color: var(--ic-date-input-border-warning);
+  --border-warning-color-hover: var(--ic-date-input-border-warning-hover);
+  --border-warning-color-pressed: var(--ic-date-input-border-warning-pressed);
+}
+
+:host(.ic-date-input-disabled) {
+  --ic-input-label-text-color: var(--ic-date-input-label-disabled);
+  --ic-input-label-helper-text-color: var(--ic-date-input-subtitle-disabled);
 }
 
 input {
@@ -454,6 +475,8 @@ input {
   -moz-appearance: textfield;
   -webkit-appearance: textfield;
           appearance: textfield;
+  color: var(--ic-date-input-text-filled);
+  caret-color: var(--ic-date-input-typing-cursor);
 }
 
 input::-webkit-outer-spin-button,
@@ -462,16 +485,20 @@ input::-webkit-inner-spin-button {
 }
 
 input:-webkit-autofill {
-  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-architectural-white) inset;
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;
+  -webkit-text-fill-color: var(--ic-date-input-text-filled) !important;
 }
 
-ic-input-component-container {
-  cursor: text;
+input::-moz-placeholder {
+  color: var(--ic-date-input-text-placeholder);
+}
+
+input::placeholder {
+  color: var(--ic-date-input-text-placeholder);
 }
 
-ic-input-component-container,
-ic-input-component-container:hover {
-  color: var(--ic-color-text-tertiary);
+ic-input-component-container {
+  cursor: text;
 }
 
 ic-input-component-container .focus-indicator {
@@ -479,6 +506,10 @@ ic-input-component-container .focus-indicator {
   align-items: center;
 }
 
+.date-inputs {
+  color: var(--ic-date-input-text-placeholder);
+}
+
 .day-input {
   width: 1.438rem;
 }
@@ -541,6 +572,17 @@ ic-input-component-container .focus-indicator {
   border-radius: 0.25rem;
 }
 
+.calendar-button:focus,
+.calendar-button:active {
+  --ic-button-tertiary-text-active: var(--ic-atoms-input-clear-button-focus);
+  --ic-button-tertiary-text-hover-active: var(
+    --ic-atoms-input-clear-button-focus
+  );
+  --ic-button-tertiary-text-pressed-active: var(
+    --ic-atoms-input-clear-button-focus
+  );
+}
+
 .clear-button:focus,
 .calendar-button:focus,
 .clear-button:active *,
@@ -548,10 +590,14 @@ ic-input-component-container .focus-indicator {
   fill: var(--ic-architectural-white);
 }
 
+.clear-button svg {
+  color: var(--ic-date-input-clear-icon);
+}
+
 .divider {
   margin: 0 var(--ic-space-xxs);
   width: var(--ic-space-1px);
-  background-color: var(--ic-architectural-400);
+  background-color: var(--ic-atoms-input-divider);
   border-radius: var(--ic-space-1px);
 }
 
@@ -566,3 +612,10 @@ ic-input-component-container .focus-indicator {
 .divider.large {
   height: var(--ic-space-lg);
 }
+
+ic-input-validation {
+  --ic-input-validation-status-text-color: var(--ic-date-input-status-text);
+  --ic-input-validation-error: var(--ic-date-input-icon-error);
+  --ic-input-validation-warning-icon-color: var(--ic-date-input-icon-warning);
+  --ic-input-validation-success-icon-color: var(--ic-date-input-icon-success);
+}

package/dist/collection/components/ic-date-input/ic-date-input.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
-import { IcInformationStatus, IcThemeForegroundEnum, IcDateInputMonths, IcDayNames, } from "../../utils/types";
+import { IcInformationStatus, IcDateInputMonths, IcDayNames, } from "../../utils/types";
 import { convertToDoubleDigits, createDate, dateMatches, extractDateFromZuluDateTime, isDateOrEpoch, splitStringDate, } from "../../utils/date-helpers";
-import { addFormResetListener, getInputDescribedByText, isEmptyString, isNumeric, onComponentRequiredPropUndefined, removeFormResetListener, renderHiddenInput, stringEnumToArray, } from "../../utils/helpers";
+import { addFormResetListener, getInputDescribedByText, isEmptyString, isNumeric, onComponentRequiredPropUndefined, removeDisabledFalse, removeFormResetListener, renderHiddenInput, stringEnumToArray, } from "../../utils/helpers";
 import Clear from "../../assets/clear-icon.svg";
 import Calendar from "../../assets/calendar.svg";
 let inputIds = 0;
@@ -826,10 +826,14 @@ export class DateInput {
         this.showCalendarButton = false;
         this.showClearButton = true;
         this.size = "medium";
+        this.theme = "inherit";
         this.value = "";
         this.validationStatus = "";
         this.validationText = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     watchDisableFutureHandler() {
         this.watchMaxHandler();
     }
@@ -890,6 +894,7 @@ export class DateInput {
         this.assistiveHintId = `${this.inputId}-assistive-hint`;
         this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
         addFormResetListener(this.el, this.handleFormReset);
+        removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
         this.setInputsInOrder();
@@ -1060,7 +1065,7 @@ export class DateInput {
         }
     }
     render() {
-        const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showCalendarButton, size, } = this;
+        const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showCalendarButton, size, theme, } = this;
         const hasCustomValidation = !isEmptyString(this.validationStatus) &&
             !isEmptyString(this.validationText);
         const validationStatus = hasCustomValidation
@@ -1070,16 +1075,15 @@ export class DateInput {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (h(Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : null, disabled: disabled })), h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, h("div", { class: "input-container" }, h("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { class: "action-buttons" }, showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
+        return (h(Host, { class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-date-input-disabled`]: disabled,
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : null, disabled: disabled })), h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { class: "input-container" }, h("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { class: "action-buttons" }, showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
                     isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon", appearance: this.clearButtonFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark, size: size })), showCalendarButton && (h("div", { class: "show-calendar-button-wrapper" }, h("div", { class: { divider: true, [size]: true } }), h("ic-button", { id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, appearance: this.calendarFocused
-                ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Default })))))), h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { class: "show-calendar-button-wrapper" }, h("div", { class: { divider: true, [size]: true } }), h("ic-button", { id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
     }
     static get is() { return "ic-date-input"; }
     static get encapsulation() { return "shadow"; }
@@ -1501,6 +1505,30 @@ export class DateInput {
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
+            "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 date picker to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "value": {
                 "type": "string",
                 "mutable": true,
@@ -1775,6 +1803,9 @@ export class DateInput {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }, {
                 "propName": "disableFuture",
                 "methodName": "watchDisableFutureHandler"
             }, {