@ukic/canary-web-components 3.0.0-canary.1 → 3.0.0-canary.11

package/dist/cjs/ic-date-input.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4cf27b16.js');
-const helpers = require('./helpers-6817cfbb.js');
+const helpers = require('./helpers-02b23286.js');
 const dateHelpers = require('./date-helpers-c9551119.js');
 
 const Clear = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -15,7 +15,7 @@ const Calendar = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
   <path d="M16.6667 2.50004H15.8334V0.833374H14.1667V2.50004H5.83342V0.833374H4.16675V2.50004H3.33341C2.41675 2.50004 1.66675 3.25004 1.66675 4.16671V17.5C1.66675 18.4167 2.41675 19.1667 3.33341 19.1667H16.6667C17.5834 19.1667 18.3334 18.4167 18.3334 17.5V4.16671C18.3334 3.25004 17.5834 2.50004 16.6667 2.50004ZM16.6667 17.5H3.33341V6.66671H16.6667V17.5Z" fill="currentColor"/>
 </svg>`;
 
-const icDateInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}ic-input-component-container{cursor:text}ic-input-component-container,ic-input-component-container:hover{color:var(--ic-color-tertiary-text)}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.day-input{width:1.438rem}.month-input{width:1.813rem}.year-input,.year-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-calendar-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.calendar-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.calendar-button:focus,.clear-button:active,.calendar-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:0.25rem}.clear-button:focus,.calendar-button:focus,.clear-button:active *,.calendar-button:active *{fill:var(--ic-architectural-white)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-architectural-400);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}";
+const icDateInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}: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{border:0;height:100%;padding:0;outline:none;background:none;-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,input::-webkit-inner-spin-button{-webkit-appearance:none}input:-webkit-autofill{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}input::-moz-placeholder{color:var(--ic-date-input-text-placeholder)}input::placeholder{color:var(--ic-date-input-text-placeholder)}ic-input-component-container{cursor:text}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.date-inputs{color:var(--ic-date-input-text-placeholder)}.day-input{width:1.438rem}.month-input{width:1.813rem}.year-input,.year-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-calendar-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.calendar-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.calendar-button:focus,.clear-button:active,.calendar-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;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(\n    --ic-atoms-input-clear-button-focus\n  );--ic-button-tertiary-text-pressed-active:var(\n    --ic-atoms-input-clear-button-focus\n  )}.clear-button:focus,.calendar-button:focus,.clear-button:active *,.calendar-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button svg{color:var(--ic-date-input-clear-icon)}.clear-button:focus svg{color:var(--ic-atoms-input-clear-button-focus)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-atoms-input-divider);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.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)}";
 
 let inputIds = 0;
 const DateInput = class {
@@ -164,8 +164,9 @@ const DateInput = class {
             this.notifyScreenReader(input, event);
         };
         this.handleKeyDown = (event, isInputPrevented) => {
+            var _a;
             const input = event.target;
-            const eventKey = event.key.toLowerCase();
+            const eventKey = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
             // Regex required due to FF allowing all characters as values for number text field.
             const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[/-]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
             if (!regex.test(eventKey) &&
@@ -191,6 +192,12 @@ const DateInput = class {
                     this.preventAutoFormatting = true;
                     this.handleUpDownArrowKeyPress(input, event);
                     break;
+                case "backspace":
+                    if (input.value.length === 0) {
+                        event.preventDefault();
+                        this.moveToPreviousInput(input);
+                    }
+                    break;
             }
             this.preventInput(event, isInputPrevented);
             this.isDateSetFromKeyboardEvent = true;
@@ -473,7 +480,7 @@ const DateInput = class {
         // Includes text usually added using aria-describedby
         // (which doesn't work on input component container)
         this.setAriaLabelledBy = () => {
-            var _a;
+            var _a, _b;
             if (this.disabled &&
                 !helpers.isEmptyString((_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.getAttribute(this.ARIA_LABELLED_BY))) {
                 this.removeAriaLabelledBy();
@@ -486,12 +493,11 @@ const DateInput = class {
             const labelId = `${this.inputId}-label`;
             if (labelEl !== null && labelEl !== undefined) {
                 labelEl.id = labelId;
-                const hasValidation = (!helpers.isEmptyString(this.validationStatus) &&
-                    !helpers.isEmptyString(this.validationText)) ||
-                    !helpers.isEmptyString(this.invalidDateText);
-                const labelledBy = `${labelId} ${this.screenReaderInfoId} ${helpers.getInputDescribedByText(this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
-                this.inputCompContainerEl.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
             }
+            const hasValidation = !helpers.isEmptyString(this.validationStatus) ||
+                !helpers.isEmptyString(this.invalidDateText);
+            const labelledBy = `${(_b = labelEl === null || labelEl === void 0 ? void 0 : labelEl.id) !== null && _b !== void 0 ? _b : ""} ${this.screenReaderInfoId} ${helpers.getInputDescribedByText(this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedDate ? this.selectedDateInfoId : ""} ${this.assistiveHintId}`;
+            this.inputCompContainerEl.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
         };
         // Sets boolean for each input, used to limit the number of characters within each field (2 for day / month, 4 for year)
         this.setPreventInput = (input, isPrevented) => {
@@ -828,6 +834,7 @@ const DateInput = class {
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
         this.helperText = undefined;
         this.hideHelperText = false;
+        this.hideLabel = false;
         this.inputId = `ic-date-input-${inputIds++}`;
         this.invalidDateMessage = "Please enter a valid date.";
         this.label = undefined;
@@ -838,10 +845,14 @@ const DateInput = class {
         this.showCalendarButton = false;
         this.showClearButton = true;
         this.size = "medium";
+        this.theme = "inherit";
         this.value = "";
         this.validationStatus = "";
         this.validationText = "";
     }
+    watchDisabledHandler() {
+        helpers.removeDisabledFalse(this.disabled, this.el);
+    }
     watchDisableFutureHandler() {
         this.watchMaxHandler();
     }
@@ -902,6 +913,7 @@ const DateInput = class {
         this.assistiveHintId = `${this.inputId}-assistive-hint`;
         this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
         helpers.addFormResetListener(this.el, this.handleFormReset);
+        helpers.removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
         this.setInputsInOrder();
@@ -1072,9 +1084,8 @@ const DateInput = class {
         }
     }
     render() {
-        const { inputId, label, disabled, helperText, hideHelperText, showClearButton, showCalendarButton, size, } = this;
-        const hasCustomValidation = !helpers.isEmptyString(this.validationStatus) &&
-            !helpers.isEmptyString(this.validationText);
+        const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showCalendarButton, size, theme, } = this;
+        const hasCustomValidation = !helpers.isEmptyString(this.validationStatus);
         const validationStatus = hasCustomValidation
             ? this.validationStatus
             : !helpers.isEmptyString(this.invalidDateText)
@@ -1082,20 +1093,20 @@ const DateInput = class {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         helpers.renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (index.h(index.Host, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, index.h("ic-input-container", { disabled: disabled }, index.h("ic-input-label", { for: inputId, label: label, helperText: !hideHelperText ? helperText : null, disabled: disabled }), index.h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), index.h("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), index.h("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("ic-input-component-container", { id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group" }, index.h("div", { class: "input-container" }, index.h("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), index.h("div", { class: "action-buttons" }, showClearButton && (index.h("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
+        return (index.h(index.Host, { class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-date-input-disabled`]: disabled,
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, index.h("ic-input-container", { disabled: disabled }, !(hideLabel && hideHelperText) && (index.h("ic-input-label", { for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled })), index.h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), index.h("span", { id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), index.h("span", { id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.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" } }, index.h("div", { class: "input-container" }, index.h("div", { class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), index.h("div", { class: "action-buttons" }, showClearButton && (index.h("ic-button", { id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: helpers.isEmptyString(this.day) &&
                     helpers.isEmptyString(this.month) &&
                     helpers.isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon", appearance: this.clearButtonFocused
-                ? helpers.IcThemeForegroundEnum.Light
-                : helpers.IcThemeForegroundEnum.Dark, size: size })), showCalendarButton && (index.h("div", { class: "show-calendar-button-wrapper" }, index.h("div", { class: { divider: true, [size]: true } }), index.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
-                ? helpers.IcThemeForegroundEnum.Light
-                : helpers.IcThemeForegroundEnum.Default })))))), index.h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, index.h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !helpers.isEmptyString(this.invalidDateText)) && (index.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 && (index.h("div", { class: "show-calendar-button-wrapper" }, index.h("div", { class: { divider: true, [size]: true } }), index.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" })))))), index.h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, index.h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !helpers.isEmptyString(this.invalidDateText)) && (index.h("ic-input-validation", { status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "disableFuture": ["watchDisableFutureHandler"],
         "disablePast": ["watchDisablePastHandler"],
         "max": ["watchMaxHandler"],