@ukic/canary-web-components 2.0.0-canary.38 → 2.0.0-canary.39

package/dist/components/ic-date-picker.js

@@ -122,7 +122,7 @@ const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear,
                     h("path", { d: "M11.3333 5.33341H3.21996L6.94663 1.60675L5.99996 0.666748L0.666626 6.00008L5.99996 11.3334L6.93996 10.3934L3.21996 6.66675H11.3333V5.33341Z", fill: "currentColor" }))))));
 };
 
-const icDatePickerCss = "/*! 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{display:block;position:relative;--month-year-picker-button-width:5rem;--month-button-width:5.5rem;--input-field-width:var(--input-width, 19.125rem)}:host(.large){--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}:host(.small){--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}:host .date-input-container{position:relative}ic-date-input{--input-width:var(--input-field-width)}:host .calendar-container{min-width:19rem;max-width:23.5rem;width:var(--input-width);display:flex;flex-direction:column;gap:var(--ic-space-xs);position:absolute;border:var(--ic-border-default);border-radius:var(--ic-border-radius);align-items:center;background-color:var(--ic-architectural-white);z-index:var(--ic-z-index-date-picker);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);margin-top:var(--ic-space-xxxs);padding:var(--ic-space-xs);animation:fade-in-calendar var(--ic-transition-duration-slow)}:host(.small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.large) .calendar-container{min-width:21rem;max-width:25.5rem}:host .calendar-container.above{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{flex-wrap:wrap;display:inline-flex;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.small) .month-picker,:host(.small) .year-picker{width:13.125rem}:host(.large) .month-picker,:host(.large) .year-picker{width:20rem}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width)}:host .prev-decade .year-button svg{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .prev-decade .year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg)}:host(.small) .prev-decade .year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade .year-button svg{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .next-decade .year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg)}:host(.small) .next-decade .year-button::part(button),:host(.large) .next-decade .year-button::part(button){padding-left:var(--ic-space-xl)}:host .bottom-buttons{padding-top:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.small) .bottom-buttons{padding-top:var(--ic-space-xxs)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.large) .calendar{width:19.25rem}:host(.small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0}:host(.small) .calendar-days-container{padding:var(--ic-space-xxxs) 0}:host(.large) .calendar-days-container{padding:var(--ic-space-xs) 0}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}:host(.small) .calendar-day-header,:host(.large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .calendar-day-header ic-typography{color:var(--ic-color-tertiary-text);text-align:center}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.small) .day-button-container{width:2rem;height:2rem}:host(.large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-architectural-white);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.large) .day-button{width:2.25rem;height:2.25rem}:host(.small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;color:var(--ic-color-primary-text)}:host .day-button.outside-range ic-typography{color:var(--ic-architectural-400)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{color:var(--ic-color-primary-text)}:host .day-button:hover:not(.disabled){background-color:var(--ic-action-dark-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-action-dark-bg-active)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-action-default)}:host .day-button.selected ic-typography{color:var(--ic-color-white-text)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-action-default-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-action-default-active)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-action-default)}:host(.small) .day-button.today::after{bottom:0.35rem}:host(.large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-architectural-white)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-hc-border)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
+const icDatePickerCss = "/*! 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{display:block;position:relative;--month-year-picker-button-width:5rem;--month-button-width:5.5rem;--input-field-width:var(--input-width, 19.125rem)}:host(.large){--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}:host(.small){--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}:host .date-input-container{position:relative}ic-date-input{--input-width:var(--input-field-width)}:host .calendar-container{min-width:19rem;max-width:23.5rem;width:var(--input-width);display:flex;flex-direction:column;gap:var(--ic-space-xs);position:absolute;align-items:center;background-color:var(--ic-architectural-white);z-index:var(--ic-z-index-date-picker);box-sizing:border-box;margin-top:var(--ic-space-xxxs);padding:var(--ic-space-xs);animation:fade-in-calendar var(--ic-transition-duration-slow)}:host .calendar-container.show-date-input{border:var(--ic-border-default);border-radius:var(--ic-border-radius);box-shadow:var(--ic-elevation-overlay)}:host .calendar-container.hide-date-input{position:static}:host(.small) .calendar-container{min-width:17rem;max-width:21.5rem}:host(.large) .calendar-container{min-width:21rem;max-width:25.5rem}:host .calendar-container.above{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}:host .month-year-nav-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch}:host .month-year-nav-container.hidden{display:none}:host .month-year-nav{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}:host .month-picker,:host .year-picker{flex-wrap:wrap;display:inline-flex;align-items:center;width:17.5rem;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs);row-gap:var(--ic-space-xxs)}:host(.small) .month-picker,:host(.small) .year-picker{width:13.125rem}:host(.large) .month-picker,:host(.large) .year-picker{width:20rem}:host .month-picker-button,:host .year-picker-button{width:5rem;--min-width:5rem}:host .month-button,:host .year-button{width:var(--month-button-width)}:host .month-button.focussed,:host .year-button.focussed{z-index:1}:host .month-button::part(button),:host .year-button::part(button){min-width:var(--month-button-width)}:host .prev-decade .year-button svg{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .prev-decade .year-button::part(button){padding-left:0;padding-right:var(--ic-space-lg)}:host(.small) .prev-decade .year-button::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}:host .next-decade .year-button svg{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}:host .next-decade .year-button::part(button){padding-right:0;padding-left:var(--ic-space-lg)}:host(.small) .next-decade .year-button::part(button),:host(.large) .next-decade .year-button::part(button){padding-left:var(--ic-space-xl)}:host .bottom-buttons{padding-top:var(--ic-space-xs);display:flex;justify-content:space-between;align-items:center;align-self:stretch;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.small) .bottom-buttons{padding-top:var(--ic-space-xxs)}:host .bottom-buttons.no-today{align-items:flex-end;flex-direction:column}:host .bottom-buttons.hidden{display:none}:host .calendar{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}:host(.large) .calendar{width:19.25rem}:host(.small) .calendar{padding-bottom:var(--ic-space-xxs);width:14rem}:host .hidden{display:none}:host .weekdays{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}:host .calendar-days-container{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:var(--ic-space-xs);padding:var(--ic-space-xxs) 0}:host(.small) .calendar-days-container{padding:var(--ic-space-xxxs) 0}:host(.large) .calendar-days-container{padding:var(--ic-space-xs) 0}:host .calendar-day-header{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}:host(.small) .calendar-day-header,:host(.large) .calendar-day-header{padding:var(--ic-space-xxs)}:host .calendar-day-header ic-typography{color:var(--ic-color-tertiary-text);text-align:center}:host .day-button-container{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}:host(.small) .day-button-container{width:2rem;height:2rem}:host(.large) .day-button-container{width:2.5rem;height:2.5rem}:host .day-button{display:flex;position:relative;justify-content:center;align-items:center;border:0;border-radius:2rem;background-color:var(--ic-architectural-white);width:2rem;height:2rem;cursor:pointer;transition:var(--ic-easing-transition-fast);z-index:0}:host .day-button.disabled{cursor:default}:host(.large) .day-button{width:2.25rem;height:2.25rem}:host(.small) .day-button{width:1.75rem;height:1.75rem}:host .day-button ic-typography{width:1.75rem;color:var(--ic-color-primary-text)}:host .day-button.outside-range ic-typography{color:var(--ic-architectural-400)}:host .day-button.outside-month ic-typography{font-weight:var(--ic-font-weight-regular) !important}:host .day-button.outside-month:not(.outside-range):not(.selected) ic-typography{color:var(--ic-color-primary-text)}:host .day-button:hover:not(.disabled){background-color:var(--ic-action-dark-bg-hover)}:host .day-button:active:not(.disabled){background-color:var(--ic-action-dark-bg-active)}@media (prefers-reduced-motion: no-preference){:host .day-button:hover:not(.disabled):not(.focussed),:host .day-button:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}:host .day-button.selected:not(.hidden){background-color:var(--ic-action-default)}:host .day-button.selected ic-typography{color:var(--ic-color-white-text)}:host .day-button.selected:not(.hidden):hover{background-color:var(--ic-action-default-hover)}:host .day-button.selected:not(.hidden):active{background-color:var(--ic-action-default-active)}:host .day-button.focussed{z-index:1}:host .day-button:focus{outline:none}:host .day-button.focussed:focus{box-shadow:var(--ic-border-focus)}:host .day-button.today:not(.hidden)::after{content:\"\";position:absolute;width:0.875rem;height:0.125rem;bottom:0.4rem;border-radius:var(--ic-border-radius);background-color:var(--ic-action-default)}:host(.small) .day-button.today::after{bottom:0.35rem}:host(.large) .day-button.today::after{width:1rem}:host .day-button.today.selected::after{background-color:var(--ic-architectural-white)}:host #select-month-hint,:host #select-year-hint{display:none}.sr-only{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){:host .calendar-container,:host .calendar,:host .bottom-buttons{animation:none}}@keyframes fade-in-buttons{0%{opacity:0}50%{opacity:0}100%{opacity:1}}@keyframes fade-in-calendar{0%{display:flex;max-height:0}100%{display:flex;max-height:600px}}@media (forced-colors: active){:host .day-button.today:not(.hidden)::after{background-color:highlight}:host .day-button.selected:not(.hidden){background-color:highlight}:host .day-button.focussed:focus{border:var(--ic-hc-border)}:host .month-button.selected::part(button),:host .year-button.selected::part(button){background-color:highlight}}";
 
 const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
 const DEFAULT_DISABLE_DATES_FROM_NOW_MSG = "Dates in the future are not allowed. Please select a date in the past.";
@@ -138,6 +138,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.icChange = createEvent(this, "icChange", 7);
+        this.icSelectedDateChange = createEvent(this, "icSelectedDateChange", 7);
         this.clearButtonEl = null;
         this.daysOfWeek = [];
         this.dayButtonFocussed = false;
@@ -163,12 +164,30 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             this.decadeStart = decadeArr[1];
             this.decadeEnd = decadeArr[10];
         };
+        this.notifyScreenReaderSelectedDate = () => {
+            const dayNames = stringEnumToArray(IcDayNames);
+            const months = stringEnumToArray(IcDateInputMonths);
+            this.selectedDateInfoEl.textContent = this.selectedDate
+                ? `Selected date: ${dayNames[this.selectedDate.getDay()]}, ${this.selectedDate.getDate()} ${months[this.selectedDate.getMonth()]} ${this.selectedDate.getFullYear()}`
+                : "Selected date cleared";
+        };
         this.setSelectedDate = (d, emit = true) => {
             if (d === null || !dateMatches(d, this.selectedDate)) {
                 this.selectedDate = d;
                 this.value = d;
                 if (emit) {
-                    this.inputEl.triggerIcChange(d);
+                    if (this.inputEl) {
+                        this.inputEl.triggerIcChange(d);
+                    }
+                    else {
+                        if (this.selectedDate) {
+                            this.setFocussedDate(this.selectedDate);
+                        }
+                        this.icSelectedDateChange.emit({ value: d });
+                        if (!this.showDateInput && this.selectedDateInfoEl) {
+                            this.notifyScreenReaderSelectedDate();
+                        }
+                    }
                 }
             }
         };
@@ -183,13 +202,17 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             event.stopImmediatePropagation();
         };
         this.handleDocumentClick = () => {
-            this.calendarOpen = false;
+            if (this.showDateInput) {
+                this.calendarOpen = false;
+            }
         };
         this.keyDownHandler = (event) => {
             if (event.key === "Escape") {
                 if (this.calendarOpen) {
                     this.closeButtonClickHandler();
-                    this.inputEl.setCalendarFocus();
+                    if (this.inputEl) {
+                        this.inputEl.setCalendarFocus();
+                    }
                     event.stopImmediatePropagation();
                 }
             }
@@ -199,7 +222,9 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             }
         };
         this.closeButtonClickHandler = () => {
-            this.calendarOpen = false;
+            if (this.showDateInput) {
+                this.calendarOpen = false;
+            }
         };
         this.focusFirstElement = () => {
             this.monthButtonEl.setFocus();
@@ -409,8 +434,12 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         };
         this.handleSelectDay = (day) => {
             this.setSelectedDate(day);
-            this.calendarOpen = false;
-            this.inputEl.setCalendarFocus();
+            if (this.showDateInput) {
+                this.calendarOpen = false;
+                if (this.inputEl) {
+                    this.inputEl.setCalendarFocus();
+                }
+            }
         };
         this.handleSelectMonth = (month) => {
             this.moveMonths(month - this.monthInView);
@@ -823,6 +852,60 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             }
             return inputProps;
         };
+        this.renderHiddenInput = () => !this.showDateInput ? (h("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" }))) : ("");
+        this.renderCalendar = () => {
+            const { monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = this;
+            let monthButtonText = "";
+            if (monthPickerVisible) {
+                monthButtonText = `Use the arrow keys to change the selected month. To return to day picker view, press Enter or Space to select a month, or press Escape.`;
+            }
+            else {
+                monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
+            }
+            let yearButtonText = "";
+            if (yearPickerVisible) {
+                yearButtonText = `Use the arrow keys to change the selected year. To return to day picker view, press Enter or Space to select a year, or press Escape.`;
+            }
+            else {
+                yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
+            }
+            const dialogLabel = "choose date";
+            const monthLabel = monthNames && monthNames[monthInView]
+                ? monthNames[monthInView]
+                : "Open month picker";
+            const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
+            let minDay = minDate;
+            if (this.disablePast) {
+                const yesterday = new Date(minDate);
+                yesterday.setDate(minDate.getDate() - 1);
+                minDay = yesterday;
+            }
+            return (h("div", null, h("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
+                    "calendar-container": true,
+                    "show-date-input": this.showDateInput,
+                    "hide-date-input": !this.showDateInput,
+                    above: this.showPickerAbove,
+                }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { class: {
+                    "month-year-nav-container": true,
+                } }, h("div", { class: "month-year-nav" }, this.previousMonthButton(), h("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "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()), h("div", { class: "month-year-nav" }, this.previousYearButton(), h("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "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) && (h("div", { class: {
+                    calendar: true,
+                    hidden: monthPickerVisible || yearPickerVisible,
+                }, onKeyDown: this.handleCalendarKeyDown }, h("div", { class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
+                const header = size === "small" ? dayName.charAt(0) : dayName;
+                return (h("div", { class: "calendar-day-header" }, h("ic-typography", { variant: "caption" }, header)));
+            })), h("div", { class: "calendar-days-container" }, this.currMonthView.map((day) => (h(DayButton, { day: day, disableDay: this.disableDays.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })))))), h("div", { class: {
+                    "month-picker-container": true,
+                    hidden: !monthPickerVisible,
+                } }, monthPickerVisible && (h(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { class: {
+                    "year-picker-container": true,
+                    hidden: !yearPickerVisible,
+                } }, yearPickerVisible && (h(YearPicker, { 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 }))), h("div", { class: {
+                    "bottom-buttons": true,
+                    "no-today": !showPickerTodayButton,
+                } }, showPickerTodayButton && (h("ic-button", { 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")), showPickerClearButton && (h("ic-button", { 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")))), this.renderHiddenInput()));
+        };
         this.calendarOpen = false;
         this.currMonthView = [];
         this.currYearPickerView = [];
@@ -860,6 +943,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.name = undefined;
         this.openAtDate = "";
         this.required = false;
+        this.showDateInput = true;
         this.showDaysOutsideMonth = true;
         this.showPickerClearButton = true;
         this.showPickerTodayButton = true;
@@ -894,6 +978,11 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             this.minDate = createDate(this.min, this.dateFormat);
         }
     }
+    watchShowDateInputHandler() {
+        if (!this.showDateInput) {
+            this.calendarOpen = true;
+        }
+    }
     watchStartOfWeekHandler() {
         this.orderedDaysOfWeek = this.daysOfWeek
             .slice(this.startOfWeek)
@@ -985,13 +1074,23 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         this.watchMaxHandler();
         this.watchMinHandler();
         removeDisabledFalse(this.disabled, this.el);
+        this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
     }
     componentWillRender() {
         this.dateInputProps = this.setDateInputProps();
+        if (!this.showDateInput) {
+            this.calendarOpen = true;
+        }
     }
     componentWillUpdate() {
         this.dateInputProps = this.setDateInputProps();
     }
+    componentDidLoad() {
+        if (!this.showDateInput && this.value) {
+            this.setSelectedDate(new Date(this.value));
+            this.setFocussedDate(this.selectedDate);
+        }
+    }
     localCalendarButtonClickHandler(ev) {
         this.myCalendarButtonClicked = true;
         if (!this.calendarOpen) {
@@ -1001,61 +1100,14 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
     }
     calendarButtonClickHandler() {
         //closes this picker if calendar button in another clicked
-        if (!this.myCalendarButtonClicked) {
+        if (!this.myCalendarButtonClicked && this.showDateInput) {
             this.calendarOpen = false;
         }
         this.myCalendarButtonClicked = false;
     }
     render() {
-        const { calendarOpen, dateInputProps, monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = this;
-        let monthButtonText = "";
-        if (monthPickerVisible) {
-            monthButtonText = `Use the arrow keys to change the selected month. To return to day picker view, press Enter or Space to select a month, or press Escape.`;
-        }
-        else {
-            monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
-        }
-        let yearButtonText = "";
-        if (yearPickerVisible) {
-            yearButtonText = `Use the arrow keys to change the selected year. To return to day picker view, press Enter or Space to select a year, or press Escape.`;
-        }
-        else {
-            yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
-        }
-        const dialogLabel = "choose date";
-        const monthLabel = monthNames && monthNames[monthInView]
-            ? monthNames[monthInView]
-            : "Open month picker";
-        const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
-        let minDay = minDate;
-        if (this.disablePast) {
-            const yesterday = new Date(minDate);
-            yesterday.setDate(minDate.getDate() - 1);
-            minDay = yesterday;
-        }
-        return (h(Host, { onKeyDown: this.keyDownHandler, class: size }, h("div", { class: "date-input-container" }, h("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (h("div", null, h("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), h("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
-                "calendar-container": true,
-                above: this.showPickerAbove,
-            }, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, h("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { class: {
-                "month-year-nav-container": true,
-            } }, h("div", { class: "month-year-nav" }, this.previousMonthButton(), h("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), h("ic-button", { ref: (el) => (this.monthButtonEl = el), size: size, class: "month-picker-button", "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()), h("div", { class: "month-year-nav" }, this.previousYearButton(), h("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), h("ic-button", { ref: (el) => (this.yearButtonEl = el), size: size, class: "year-picker-button", "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) && (h("div", { class: {
-                calendar: true,
-                hidden: monthPickerVisible || yearPickerVisible,
-            }, onKeyDown: this.handleCalendarKeyDown }, h("div", { class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
-            const header = size === "small" ? dayName.charAt(0) : dayName;
-            return (h("div", { class: "calendar-day-header" }, h("ic-typography", { variant: "caption" }, header)));
-        })), h("div", { class: "calendar-days-container" }, this.currMonthView.map((day) => (h(DayButton, { day: day, disableDay: this.disableDays.includes(Number(day.getDay())), today: dateMatches(day, this.today), selected: dateMatches(day, this.selectedDate), focussed: dateMatches(day, this.focussedDate), inRange: dateInRange(day, minDay, maxDate), monthInView: monthInView, onSelectDay: this.handleSelectDay, focussedDayRef: this.setFocussedDayEl, onFocusDay: this.onDayButtonFocusHandler, onBlurDay: this.onDayButtonBlurHandler, showDaysOutsideMonth: this.showDaysOutsideMonth })))))), h("div", { class: {
-                "month-picker-container": true,
-                hidden: !monthPickerVisible,
-            } }, monthPickerVisible && (h(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), h("div", { class: {
-                "year-picker-container": true,
-                hidden: !yearPickerVisible,
-            } }, yearPickerVisible && (h(YearPicker, { 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 }))), h("div", { class: {
-                "bottom-buttons": true,
-                "no-today": !showPickerTodayButton,
-            } }, showPickerTodayButton && (h("ic-button", { 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")), showPickerClearButton && (h("ic-button", { 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"))))))));
+        const { calendarOpen, dateInputProps, keyDownHandler, renderCalendar, showDateInput, size, } = this;
+        return (h(Host, { onKeyDown: keyDownHandler, class: size }, showDateInput && (h("div", { class: "date-input-container" }, h("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps)))), calendarOpen && renderCalendar()));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -1065,6 +1117,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "disablePast": ["watchDisablePastHandler"],
         "max": ["watchMaxHandler"],
         "min": ["watchMinHandler"],
+        "showDateInput": ["watchShowDateInputHandler"],
         "startOfWeek": ["watchStartOfWeekHandler"],
         "calendarOpen": ["watchOpenHandler"],
         "focussedDate": ["watchFocussedDateHandler"],
@@ -1095,6 +1148,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "name": [1],
         "openAtDate": [1, "open-at-date"],
         "required": [4],
+        "showDateInput": [4, "show-date-input"],
         "showDaysOutsideMonth": [4, "show-days-outside-month"],
         "showPickerClearButton": [4, "show-picker-clear-button"],
         "showPickerTodayButton": [4, "show-picker-today-button"],
@@ -1127,6 +1181,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         "disablePast": ["watchDisablePastHandler"],
         "max": ["watchMaxHandler"],
         "min": ["watchMinHandler"],
+        "showDateInput": ["watchShowDateInputHandler"],
         "startOfWeek": ["watchStartOfWeekHandler"],
         "calendarOpen": ["watchOpenHandler"],
         "focussedDate": ["watchFocussedDateHandler"],