@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.2

package/dist/collection/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-data-table-title-bar.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/test/basic/ic-data-table-title-bar.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { h } from \"@stencil/core\";\nimport { DataTableTitleBar } from \"../../ic-data-table-title-bar\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-data-table-title-bar\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\"></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with description and metadata\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar\n          heading=\"header\"\n          metadata=\"metadata\"\n          description=\"desc\"\n        ></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with slotted actions\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\">\n          <ic-button slot=\"primary-action\">1</ic-button>\n          <ic-button slot=\"custom-actions\">2</ic-button>\n          <ic-button slot=\"custom-actions\">3</ic-button>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with slotted header and description\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar>\n          <ic-typography slot=\"heading\">slotted header</ic-typography>\n          <ic-typography slot=\"description\">slotted desc</ic-typography>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should not render the actions area if hideDensitySelect is true and there are no slotted elements\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar\n          heading=\"header\"\n          hideDensitySelect={true}\n        ></ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render the description area if the description is slotted and there is no action area\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\" hideDensitySelect={true}>\n          <ic-typography slot=\"description\">slotted desc</ic-typography>\n        </ic-data-table-title-bar>\n      ),\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should emit the icTableDensityUpdate when the density select is updated\", async () => {\n    const page = await newSpecPage({\n      components: [DataTableTitleBar],\n      template: () => (\n        <ic-data-table-title-bar heading=\"header\"></ic-data-table-title-bar>\n      ),\n    });\n\n    const eventSpy = jest.fn();\n    page.root.addEventListener(\"icTableDensityUpdate\", eventSpy);\n\n    const icChange = new CustomEvent(\"icChange\", {\n      detail: { value: \"dense\" },\n    });\n    const icSelect = page.root.shadowRoot.querySelector(\"ic-select\");\n    icSelect.dispatchEvent(icChange);\n\n    await page.waitForChanges();\n    expect(eventSpy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: expect.objectContaining({\n          value: \"dense\",\n        }),\n      })\n    );\n  });\n});\n"]}

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

@@ -463,10 +463,10 @@ ic-input-component-container {
 
 ic-input-component-container,
 ic-input-component-container:hover {
-  color: var(--ic-color-tertiary-text);
+  color: var(--ic-color-text-tertiary);
 }
 
-.focus-indicator {
+ic-input-component-container .focus-indicator {
   padding: var(--ic-space-xxxs) var(--ic-space-xs);
   align-items: center;
 }
@@ -528,8 +528,8 @@ ic-input-component-container:hover {
 .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;
+  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;
 }
 
@@ -551,7 +551,7 @@ ic-input-component-container:hover {
   height: var(--ic-space-md);
 }
 
-.divider.default {
+.divider.medium {
   height: calc(var(--ic-space-sm) + var(--ic-space-xs));
 }
 

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

@@ -1,6 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { IcInformationStatus, IcThemeForegroundEnum, IcDateInputMonths, IcDayNames, } from "../../utils/types";
-import { convertToDoubleDigits, createDate, extractDateFromZuluDateTime, isDateOrEpoch, splitStringDate, } from "../../utils/date-helpers";
+import { convertToDoubleDigits, createDate, dateMatches, extractDateFromZuluDateTime, isDateOrEpoch, splitStringDate, } from "../../utils/date-helpers";
 import { addFormResetListener, getInputDescribedByText, isEmptyString, isNumeric, onComponentRequiredPropUndefined, removeFormResetListener, renderHiddenInput, stringEnumToArray, } from "../../utils/helpers";
 import Clear from "../../assets/clear-icon.svg";
 import Calendar from "../../assets/calendar.svg";
@@ -26,6 +26,7 @@ export class DateInput {
         this.KEYBOARD_EVENT_OBJECT_STRING = "[object KeyboardEvent]";
         this.MAX_DAY = 31;
         this.MAX_MONTH = 12;
+        this.previousEmittedDate = undefined;
         this.previousSelectedDate = null;
         this.selectedDate = null;
         this.setInputPasteValue = (input, pastedValue) => {
@@ -272,7 +273,7 @@ export class DateInput {
         this.handleDateChange = (force) => {
             // Prevent icChange being emitted when each individual input is changed
             // This method is used within componentWillUpdate instead of using @Watch('value');
-            if (force || this.selectedDate !== this.previousSelectedDate) {
+            if (force || !dateMatches(this.selectedDate, this.previousSelectedDate)) {
                 if (this.value) {
                     this.inputsInOrder.forEach((input) => {
                         input.classList.add(this.FIT_TO_VALUE);
@@ -282,7 +283,7 @@ export class DateInput {
                     this.setValueAndEmitChange(this.selectedDate);
                     this.notifyScreenReaderSelectedDate();
                 }
-                else {
+                else if (!(this.selectedDate === null && this.previousSelectedDate === null)) {
                     this.setValueAndEmitChange(null);
                     this.selectedDateInfoEl.textContent = "";
                 }
@@ -415,7 +416,7 @@ export class DateInput {
                 this.selectedDate = null;
             }
             if (!(this.isValidDay && this.isValidMonth && this.isValidDate)) {
-                this.invalidDateText = "Please enter a valid date.";
+                this.invalidDateText = this.invalidDateMessage;
             }
             else if (this.isDisabledDate && this.selectedDate !== null) {
                 if (this.isBeforeMin) {
@@ -656,7 +657,8 @@ export class DateInput {
             this.icBlur.emit({ value: this.selectedDate });
         };
         this.handleHostFocus = () => {
-            if (this.el.shadowRoot.activeElement.id.match(/(day|month|year)-input$/)) {
+            var _a;
+            if ((_a = this.el.shadowRoot.activeElement) === null || _a === void 0 ? void 0 : _a.id.match(/(day|month|year)-input$/)) {
                 this.removeLabelledBy = false;
             }
             else {
@@ -749,25 +751,21 @@ export class DateInput {
                 this.setPreventInput(input, false);
             });
             this.isDateSetFromKeyboardEvent = false;
-            this.setValueAndEmitChange(null);
             this.setValidationMessage();
             this.handleDateChange(true);
             this.inputsInOrder[0].focus();
         };
         this.handleCalendarOpen = (ev) => {
+            var _a, _b;
             ev.stopImmediatePropagation();
-            this.calendarButtonEl.shadowRoot
-                .querySelector("ic-tooltip")
-                .displayTooltip(false);
+            (_a = this.calendarButtonEl) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector("ic-tooltip").displayTooltip(false);
             this.calendarButtonClicked.emit({ value: this.selectedDate });
-            this.calendarButtonEl.shadowRoot
-                .querySelector("ic-tooltip")
-                .displayTooltip(false);
+            (_b = this.calendarButtonEl) === null || _b === void 0 ? void 0 : _b.shadowRoot.querySelector("ic-tooltip").displayTooltip(false);
             this.isDateSetFromKeyboardEvent = false;
         };
         this.setValueAndEmitChange = (value) => {
-            if (this.value !== value) {
-                this.icChange.emit({ value: value });
+            if (!dateMatches(new Date(this.value), value)) {
+                this.emitIcChange(value);
                 this.value = value;
             }
         };
@@ -782,13 +780,21 @@ export class DateInput {
             this.clearButtonFocused = true;
         };
         this.handleClearBlur = (ev) => {
+            var _a;
             this.clearButtonFocused = false;
-            if (ev.relatedTarget.id.match(/(day|year)-input$/)) {
+            if ((_a = ev.relatedTarget) === null || _a === void 0 ? void 0 : _a.id.match(/(day|year)-input$/)) {
                 this.removeLabelledBy = false;
                 return;
             }
             this.removeLabelledBy = true;
         };
+        this.emitIcChange = (d) => {
+            if (!(d === null && this.previousEmittedDate === null) &&
+                !dateMatches(d, this.previousEmittedDate)) {
+                this.previousEmittedDate = d;
+                this.icChange.emit({ value: d });
+            }
+        };
         this.day = "";
         this.invalidDateText = undefined;
         this.maxDate = undefined;
@@ -807,7 +813,9 @@ export class DateInput {
         this.disablePast = false;
         this.disablePastMessage = "Dates in the past are not allowed. Please select a date in the future.";
         this.helperText = undefined;
+        this.hideHelperText = false;
         this.inputId = `ic-date-input-${inputIds++}`;
+        this.invalidDateMessage = "Please enter a valid date.";
         this.label = undefined;
         this.max = "";
         this.min = "";
@@ -815,11 +823,17 @@ export class DateInput {
         this.required = false;
         this.showCalendarButton = false;
         this.showClearButton = true;
-        this.size = "default";
+        this.size = "medium";
         this.value = "";
         this.validationStatus = "";
         this.validationText = "";
     }
+    watchDisableFutureHandler() {
+        this.watchMaxHandler();
+    }
+    watchDisablePastHandler() {
+        this.watchMinHandler();
+    }
     watchMaxHandler() {
         if (this.disableFuture) {
             this.maxDate = new Date();
@@ -836,18 +850,39 @@ export class DateInput {
             this.minDate = createDate(this.min, this.dateFormat);
         }
     }
+    watchRequiredHandler() {
+        // Prevent asterisk being read out after the label by screen reader (by applying aria-hidden)
+        // Needed because label is included in 'aria-labelledby' instead of using 'aria-label'
+        const labelEl = this.el.shadowRoot.querySelector("label");
+        if (this.required) {
+            const asteriskSpan = document.createElement("span");
+            asteriskSpan.setAttribute("id", "asterisk-span");
+            asteriskSpan.setAttribute("aria-hidden", "true");
+            asteriskSpan.textContent = " *";
+            labelEl === null || labelEl === void 0 ? void 0 : labelEl.appendChild(asteriskSpan);
+        }
+        else {
+            const asteriskSpan = this.el.shadowRoot.querySelector("#asterisk-span");
+            if (asteriskSpan) {
+                asteriskSpan.remove();
+            }
+        }
+    }
     disconnectedCallback() {
         removeFormResetListener(this.el, this.handleFormReset);
     }
     componentWillLoad() {
         this.defaultHelperText = `Use format ${this.dateFormat}`;
-        if (isEmptyString(this.helperText)) {
+        if (isEmptyString(this.helperText))
             this.helperText = this.defaultHelperText;
-        }
         this.watchMinHandler();
         this.watchMaxHandler();
         if (this.value) {
             this.setDate(this.value);
+            this.previousEmittedDate = this.selectedDate;
+        }
+        else {
+            this.previousEmittedDate = null;
         }
         this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
         this.assistiveHintId = `${this.inputId}-assistive-hint`;
@@ -872,20 +907,13 @@ export class DateInput {
             input.addEventListener("focus", this.handleFocus);
             input.addEventListener("blur", this.handleBlur);
         });
-        // Prevent asterisk being read out after the label by screen reader (by applying aria-hidden)
-        // Needed because label is included in 'aria-labelledby' instead of using 'aria-label'
-        const labelEl = this.el.shadowRoot.querySelector("label");
-        if (this.required) {
-            const asteriskSpan = document.createElement("span");
-            asteriskSpan.setAttribute("aria-hidden", "true");
-            asteriskSpan.textContent = " *";
-            labelEl === null || labelEl === void 0 ? void 0 : labelEl.appendChild(asteriskSpan);
-        }
+        this.watchRequiredHandler();
     }
     componentWillUpdate() {
-        if (!this.isDateSetFromKeyboardEvent) {
+        if (isEmptyString(this.helperText))
+            this.helperText = this.defaultHelperText;
+        if (!this.isDateSetFromKeyboardEvent)
             this.setDate(this.value);
-        }
         this.setAriaInvalid(this.isValidDay, this.isValidMonth, this.isValidDate, this.isDisabledDate);
         this.handleDateChange(false);
         this.isDateSetFromKeyboardEvent = false;
@@ -918,6 +946,12 @@ export class DateInput {
     async setDisableDays(days) {
         this.disableDays = days;
     }
+    /**
+     * @internal Used to enable other components to invoke an IcChange event from the input.
+     */
+    async triggerIcChange(d) {
+        this.emitIcChange(d);
+    }
     removeAriaLabelledBy() {
         this.inputCompContainerEl.removeAttribute(this.ARIA_LABELLED_BY);
     }
@@ -1024,7 +1058,7 @@ export class DateInput {
         }
     }
     render() {
-        const { inputId, label, disabled, helperText, showClearButton, showCalendarButton, size, } = this;
+        const { inputId, label, disabled, helperText, hideHelperText, showClearButton, showCalendarButton, size, } = this;
         const hasCustomValidation = !isEmptyString(this.validationStatus) &&
             !isEmptyString(this.validationText);
         const validationStatus = hasCustomValidation
@@ -1034,7 +1068,7 @@ 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 }, h("ic-input-label", { for: inputId, label: label, helperText: helperText, disabled: disabled }), h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), `${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, { onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { disabled: disabled }, h("ic-input-label", { for: inputId, label: label, helperText: !hideHelperText ? helperText : null, disabled: disabled }), h("span", { id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), 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: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
@@ -1231,6 +1265,24 @@ export class DateInput {
                 "attribute": "helper-text",
                 "reflect": false
             },
+            "hideHelperText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the helper text will be visually hidden, but still read out by screenreaders."
+                },
+                "attribute": "hide-helper-text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "inputId": {
                 "type": "string",
                 "mutable": false,
@@ -1249,6 +1301,24 @@ export class DateInput {
                 "reflect": false,
                 "defaultValue": "`ic-date-input-${inputIds++}`"
             },
+            "invalidDateMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the validation message when an invalid date is entered."
+                },
+                "attribute": "invalid-date-message",
+                "reflect": false,
+                "defaultValue": "\"Please enter a valid date.\""
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -1392,7 +1462,7 @@ export class DateInput {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -1409,7 +1479,7 @@ export class DateInput {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
             "value": {
                 "type": "string",
@@ -1651,17 +1721,54 @@ export class DateInput {
                             "text": "Used to pass disabledDays from parent component."
                         }]
                 }
+            },
+            "triggerIcChange": {
+                "complexType": {
+                    "signature": "(d: Date) => Promise<void>",
+                    "parameters": [{
+                            "name": "d",
+                            "type": "Date",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used to enable other components to invoke an IcChange event from the input."
+                        }]
+                }
             }
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disableFuture",
+                "methodName": "watchDisableFutureHandler"
+            }, {
+                "propName": "disablePast",
+                "methodName": "watchDisablePastHandler"
+            }, {
                 "propName": "max",
                 "methodName": "watchMaxHandler"
             }, {
                 "propName": "min",
                 "methodName": "watchMinHandler"
+            }, {
+                "propName": "required",
+                "methodName": "watchRequiredHandler"
             }];
     }
 }