@ukic/canary-web-components 3.0.0-canary.33 → 3.0.0-canary.35

package/dist/cjs/ic-calendar_2.cjs.entry.js

@@ -5,7 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d337cd8a.js');
 const helpers = require('./helpers-f81fed28.js');
 const dateHelpers = require('./date-helpers-d7ee7b45.js');
+require('./ic-typography-a199c128.js');
+require('./ic-button-4c329a7d.js');
 const clearIcon = require('./clear-icon-547aa9b9.js');
+require('./ic-input-validation-bf7afa43.js');
+require('./ic-link-c77848ab.js');
+require('./helpers-cb472df9.js');
+require('./OpenInNew-add95b7b.js');
 
 const chevron = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>
@@ -1092,36 +1098,36 @@ const Calendar$1 = class {
         for (let i = 0; i < this.currMonthView.length; i += 7) {
             weeks.push(this.currMonthView.slice(i, i + 7));
         }
-        return (index.h(index.Host, { key: '5811c7e3bf515643f11c4ecd66e166ab672a15ab', class: {
+        return (index.h(index.Host, { key: 'd4151c94f3afbe6c92e2ca036482c5d3ab25a048', class: {
                 [`ic-calendar-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: '56f6fbfa98519f60e040d524f19d52bb2449e96d' }, index.h("span", { key: 'a52cc22ba545f12ccde1541b84bddbedc1a88734', id: "dialog-description", class: "sr-only" }, dialogDescription), index.h("div", Object.assign({ key: 'a4f6a18f109f7c55c5ba9a369dbc47352d215517' }, (parentIsDatePicker && {
+            } }, index.h("div", { key: 'bb8cf9b2317aa3af7c5c0f00c508d3748aaf1d23' }, index.h("span", { key: '4f3de5d7bb43b6f01e7e8e96970a774e7adb431c', id: "dialog-description", class: "sr-only" }, dialogDescription), index.h("div", Object.assign({ key: 'bdf2db0cbd065a2522adc889d07475324c311256' }, (parentIsDatePicker && {
             role: "dialog",
             "aria-modal": "true",
         }), { "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
                 "calendar-container": true,
-            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }), index.h("span", { key: '63a3c2c916c905efce47669886edff51422fd755', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("div", { key: 'd553857fb83f497d666355b283391530a94c09a9', class: {
+            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }), index.h("span", { key: 'e79af062141a912b8101cf80bb5d0847c11f6efa', ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("div", { key: '5342f1a9d3e3b9c5e1ca9ed85977dd816c858821', class: {
                 "month-year-nav-container": true,
-            } }, index.h("div", { key: 'aff93454cc4f27db3e8464ac4289471c353f0086', class: "month-year-nav" }, this.previousMonthButton(), index.h("span", { key: 'a4771ae4d86e75fbf80134a4a53190a9d9402297', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), index.h("ic-button", { key: '325ed5a8bb306b318c2fa471de7ac82ac0e98e2e', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), index.h("div", { key: '91adac1ecbcccbab1b1c76c741ea64b2d7efe818', class: "month-year-nav" }, this.previousYearButton(), index.h("span", { key: '2ccac8cb808bfd951f36e5f371c128ff9e1bf84e', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), index.h("ic-button", { key: '289835494a1015ec0ea67e8885c627ad1436b404', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (index.h("table", { key: 'd1bff2567dee5787f0ccd9ba2c0c40aa2c5e671a', role: "grid", class: {
+            } }, index.h("div", { key: 'ad8e87dc5c5e6254b5fac7c88ce6234a6f5c6817', class: "month-year-nav" }, this.previousMonthButton(), index.h("span", { key: '73aef7c278929632981f3da7061656777de3c715', id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), index.h("ic-button", { key: 'cc10bab65a8d765421eae3fa1a6b14509942d7b7', ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": monthPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": monthLabel, "aria-describedby": "select-month-hint", onKeyDown: this.monthButtonKeyDownHandler, onClick: this.monthButtonClickHandler }, monthNames[monthInView]), this.nextMonthButton()), index.h("div", { key: '3e28bb6cd5ffabb46d23469399e3a8e300a3d90b', class: "month-year-nav" }, this.previousYearButton(), index.h("span", { key: 'ed4bebe1d46bd024d8475b0e47ce6c7e7343705b', id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), index.h("ic-button", { key: 'f04c2b2a9962f1be59407c5764c6957b1257bf66', ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": yearPickerVisible ? "true" : "false", "full-width": "true", variant: "tertiary", "aria-label": yearLabel, "aria-describedby": "select-year-hint", onKeyDown: this.yearButtonKeyDownHandler, onClick: this.yearButtonClickHandler }, this.yearInView), this.nextYearButton())), !(monthPickerVisible || yearPickerVisible) && (index.h("table", { key: '52a7d17f02fb7d4a52abb1e7c33f11746ddfa240', role: "grid", class: {
                 calendar: true,
                 hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, index.h("thead", { key: '9dccafd91918a15ec52fd641991e0803ccb65468', class: "weekdays-container" }, index.h("tr", { key: '2ecccfb88a4220bec5ed80b4819651f57a819909', class: "weekdays" }, orderedDaysOfWeek.map((dayName) => {
+            }, onKeyDown: this.handleCalendarKeyDown }, index.h("thead", { key: '65ca8e1e10857f4633d5e414402603e548ebd61f', class: "weekdays-container" }, index.h("tr", { key: '79065bbaf141233a5a8a6d12d3fab643842110e5', class: "weekdays" }, orderedDaysOfWeek.map((dayName) => {
             const header = size === "small" ? dayName.charAt(0) : dayName;
             return (index.h("th", { scope: "col", class: "calendar-day-header" }, header));
-        }))), index.h("tbody", { key: '9c676dff19754d06310e626c8aba69e05ca8a71e', class: "calendar-days-container" }, weeks.map((week, weekIdx) => (index.h("tr", { key: weekIdx }, week.map((day) => {
+        }))), index.h("tbody", { key: '7b7f67b5c34309dde6e6e1492414e65e44dc54a4', class: "calendar-days-container" }, weeks.map((week, weekIdx) => (index.h("tr", { key: weekIdx }, week.map((day) => {
             var _a;
             return (index.h("td", { key: day.toISOString() }, index.h(DayButton, { day: day, disableDay: this.disabled ||
                     ((_a = this.disableDays) === null || _a === void 0 ? void 0 : _a.includes(Number(day.getDay()))), today: dateHelpers.dateMatches(day, this.today), selected: dateHelpers.dateMatches(day, this.selectedDate), focussed: dateHelpers.dateMatches(day, this.focussedDate), inRange: dateHelpers.dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })));
-        }))))))), index.h("div", { key: '5137281599f0ad0c3d1658448b740d1192073ad2', class: {
+        }))))))), index.h("div", { key: 'c94fdad326e93093ef7770cd833bb4ee9935244c', class: {
                 "month-picker-container": true,
                 hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (index.h(MonthPicker, { key: '460809cfbfb7db2aacd28470220863769c884651', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), index.h("div", { key: 'af3eb48f6bbeaf1a1ccdbb7a5f941241d10e6c4f', class: {
+            } }, monthPickerVisible && (index.h(MonthPicker, { key: '31ebc431e6f54c79e20c69a7d9bf6e3df0154cf7', size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), index.h("div", { key: 'cd5681a5b81d6dcc5a4cfea9437bdc9d747e18fa', class: {
                 "year-picker-container": true,
                 hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (index.h(YearPicker, { key: '4de6dd0c0563a6519b39f0fdf58a329a7bba450c', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), index.h("div", { key: '18495cc7c4150208bb64a0a222a7e233ea3a93d7', class: {
+            } }, yearPickerVisible && (index.h(YearPicker, { key: 'b451f5eed80d4b3f932b9209c230f272edc2b101', decadeView: decadeView, size: size, focussedYear: focussedYear, onSelectYear: this.handleSelectYear, onKeyDown: this.yearPickerKeyDownHandler, onFocusYear: this.onYearButtonFocusHandler, onBlurYear: this.onYearButtonBlurHandler, yearInView: yearInView, minDate: minDate, maxDate: maxDate, focussedYearRef: this.setFocussedYearEl }))), index.h("div", { key: 'c33172bac9021d91fd0b0a4b2ba9f8f7e60c2870', class: {
                 "bottom-buttons": true,
                 "no-today": !showTodayButton,
-            } }, showTodayButton && (index.h("ic-button", { key: 'd8623ea2ecc501dc77ad3fd47cd9f41b8e104c86', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showClearButton && (index.h("ic-button", { key: '40df11d2d3b36a505bab8c60acbbfb1eed03eddb', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
+            } }, showTodayButton && (index.h("ic-button", { key: 'd94df26b16b3b1c8464cd8a7ff16da0bef588674', id: "today-button", variant: "tertiary", ref: (el) => (this.todayButtonEl = el), size: size, "aria-label": "Navigate to current date", onClick: this.todayButtonClickHandler, onKeyDown: this.todayButtonKeyDownHandler, disabled: this.isCurrentMonth() }, "Go to today")), showClearButton && (index.h("ic-button", { key: '2ce3eef2be73fccd5863264ce959ab1427c380e7', id: "clear-button", "aria-label": "clear selected date", ref: (el) => (this.clearButtonEl = el), variant: "tertiary", size: size, onClick: this.clearButtonClickHandler, onKeyDown: this.clearButtonKeyDownHandler, disabled: this.value === "" ||
                 this.value === null ||
                 this.value === undefined }, "Clear")))))));
     }
@@ -2313,6 +2319,7 @@ const DateInput = class {
         }
     }
     render() {
+        var _a;
         const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showCalendarButton, size, theme, validationAriaLive, } = this;
         const hasCustomValidation = !helpers.isEmptyString(this.validationStatus);
         const validationStatus = hasCustomValidation
@@ -2322,15 +2329,17 @@ 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, { key: '0b677de27ad0835484eb7a68e6bc52cddb13b975', class: {
+        return (index.h(index.Host, { key: '894d4c210ef2598074038ec24d45ae891cd5932d', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-date-input-disabled`]: disabled,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, index.h("ic-input-container", { key: '8b440f9db75cf42c81163a8fc3fc927bddf061e7', disabled: disabled }, !(hideLabel && hideHelperText) && (index.h("ic-input-label", { key: '459c0ccececeddf034ee64775c41bea6e2c57b29', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, index.h("slot", { key: 'd051f25b9e91432752719c4c3e7511242697f93b', name: "helper-text", slot: "helper-text" }))), index.h("span", { key: 'bf2072a9a7482fa73ad3d4f178eadf3a39ea38d4', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), index.h("span", { key: 'ddae7fb05d3ff797eb08207dd12b3d98f0f3aa05', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), index.h("span", { key: 'bbd17aaf26b098379f436a6fc59fdcee52c52b64', id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("ic-input-component-container", { key: 'c602e815b61b7c7bbd31390f47116f58b21852d4', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, index.h("div", { key: '131868d25ab4297d80efec74f893552817f17186', class: "input-container" }, index.h("div", { key: 'c7184bd4b046ffd309fb20ee8fc90033d33e05fc', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), index.h("div", { key: '09009c954f7f4d0771553fdc13bfe2cc25cbf74a', class: "action-buttons" }, showClearButton && (index.h("ic-button", { key: '7a1878087c6b6091a7ef27c4cac6ac145ca09ae9', id: "clear-button", "aria-label": "Clear input", class: {
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, index.h("ic-input-container", { key: '39bb28edd5d11e18a7d0a0a6e87cb33fec78dc9e', disabled: disabled }, !(hideLabel && hideHelperText) && (index.h("ic-input-label", { key: 'f8e878e5629318e5b2eb32771bfce3e9e9af2bd8', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText !== null && helperText !== void 0 ? helperText : undefined : "", disabled: disabled }, index.h("slot", { key: 'b3e259f609df0457f014af6cfec958d7e69a74ff', name: "helper-text", slot: "helper-text" }))), index.h("span", { key: '1f7c47515397e895e794f84193b8f5c38290cf61', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), index.h("span", { key: '0e6255361a6ab455bfe391b9c222b06a267cce5e', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), index.h("span", { key: '9292ae3b7b70cae04d1b4a7bc80c74f4b18e419d', id: "live-region", "aria-live": "assertive", class: "sr-only" }), index.h("ic-input-component-container", { key: '1513590a6ad37c9d73cf92d93a56ec01999a4f70', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, index.h("div", { key: 'f239dad4ad5279bb621786ca38c9eee186b730ff', class: "input-container" }, index.h("div", { key: '846282ae8bc4a5ae3fce127dd63d7193ff87be8d', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), index.h("div", { key: '39c1443665b141e1ee83076158b1c55bb379d659', class: "action-buttons" }, showClearButton && (index.h("ic-button", { key: '50e305ad3048d844c55ef98c1e0a6a0e00cebcb7', 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: clearIcon.Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (index.h("div", { key: 'ec2f995db607ae5d575ddd7994e85f4b883ce2bb', class: "show-calendar-button-wrapper" }, index.h("div", { key: '74e895071ab608fcccc0a3e2b2ec368511efe4d3', class: { divider: true, [size]: true } }), index.h("ic-button", { key: '51e8939da851ae18809840d22492f3b5be958b26', 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", { key: '77d360d10492577650304e7914021ad40bb8b281', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, index.h("span", { key: '1c285045fb1b18bca93c9e32956e93b8d400b0a1', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), index.h("ic-input-validation", { key: '7f02c2d9ec754c92dec3156339e6ea6b504b8d74', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId, ariaLiveMode: validationAriaLive }))));
+            }, disabled: this.disabled, innerHTML: clearIcon.Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (index.h("div", { key: 'dd6c21da8fb8d644c49ba73dc86518d0356e17a8', class: "show-calendar-button-wrapper" }, index.h("div", { key: '300b22928703fbf3d713e3e9e7fbe600ce11e4dc', class: { divider: true, [size]: true } }), index.h("ic-button", { key: '79d1c71f09b7b3f4cd6fcf824c9eb6ee877caacb', 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", { key: '03a6a7aae9516df3bb65becac9839a92f5ab7e18', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, index.h("span", { key: 'e70c8df270cabf7482775b0eb5f5304e77ef79ee', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), index.h("ic-input-validation", { key: '58a678dfc8970afdfb061c6bd98ee479efd2a8c9', status: validationStatus, message: hasCustomValidation
+                ? (_a = this.validationText) !== null && _a !== void 0 ? _a : ""
+                : this.invalidDateText, for: inputId, ariaLiveMode: validationAriaLive }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }