@ukic/canary-web-components 2.0.0-canary.38 → 2.0.0-canary.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/core.cjs.js +1 -1
- package/dist/cjs/ic-date-picker.cjs.entry.js +110 -57
- package/dist/cjs/ic-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/ic-navigation-group.cjs.entry.js +9 -0
- package/dist/cjs/ic-navigation-group.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js +605 -0
- package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js.map +1 -0
- package/dist/collection/components/ic-data-table/ic-data-table.stories.js +414 -0
- package/dist/collection/components/ic-data-table/ic-data-table.stories.js.map +1 -0
- package/dist/collection/components/ic-data-table/story-data.js.map +1 -1
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js +98 -0
- package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js.map +1 -0
- package/dist/collection/components/ic-date-input/ic-date-input.stories.js +341 -0
- package/dist/collection/components/ic-date-input/ic-date-input.stories.js.map +1 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.css +10 -3
- package/dist/collection/components/ic-date-picker/ic-date-picker.js +152 -57
- package/dist/collection/components/ic-date-picker/ic-date-picker.js.map +1 -1
- package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js +167 -0
- package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js.map +1 -0
- package/dist/collection/components/ic-date-picker/story-data.js +34 -3
- package/dist/collection/components/ic-date-picker/story-data.js.map +1 -1
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.stories.js +260 -0
- package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.stories.js.map +1 -0
- package/dist/collection/components/ic-select-with-multi/ic-select-multi.stories.js +144 -0
- package/dist/collection/components/ic-select-with-multi/ic-select-multi.stories.js.map +1 -0
- package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js +456 -0
- package/dist/collection/components/ic-tree-view/ic-tree-view.stories.js.map +1 -0
- package/dist/components/ic-date-picker.js +112 -57
- package/dist/components/ic-date-picker.js.map +1 -1
- package/dist/components/ic-navigation-group.js +11 -2
- package/dist/components/ic-navigation-group.js.map +1 -1
- package/dist/core/core.esm.js +1 -1
- package/dist/core/core.esm.js.map +1 -1
- package/dist/core/p-04fe848d.entry.js +2 -0
- package/dist/core/p-04fe848d.entry.js.map +1 -0
- package/dist/core/p-fac387e8.entry.js +2 -0
- package/dist/core/p-fac387e8.entry.js.map +1 -0
- package/dist/esm/core.js +1 -1
- package/dist/esm/ic-date-picker.entry.js +110 -57
- package/dist/esm/ic-date-picker.entry.js.map +1 -1
- package/dist/esm/ic-navigation-group.entry.js +10 -1
- package/dist/esm/ic-navigation-group.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/ic-card-horizontal/ic-card-horizontal.stories.d.ts +82 -0
- package/dist/types/components/ic-data-table/ic-data-table.stories.d.ts +239 -0
- package/dist/types/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.d.ts +47 -0
- package/dist/types/components/ic-date-input/ic-date-input.stories.d.ts +124 -0
- package/dist/types/components/ic-date-picker/ic-date-picker.d.ts +18 -1
- package/dist/types/components/ic-date-picker/ic-date-picker.stories.d.ts +153 -0
- package/dist/types/components/ic-date-picker/story-data.d.ts +2 -0
- package/dist/types/components/ic-pagination-bar/ic-pagination-bar.stories.d.ts +106 -0
- package/dist/types/components/ic-select-with-multi/ic-select-multi.stories.d.ts +106 -0
- package/dist/types/components/ic-tree-view/ic-tree-view.stories.d.ts +99 -0
- package/dist/types/components.d.ts +13 -0
- package/hydrate/index.js +121 -58
- package/package.json +12 -12
- package/dist/core/p-4084bce2.entry.js +0 -2
- package/dist/core/p-4084bce2.entry.js.map +0 -1
- package/dist/core/p-71bbb583.entry.js +0 -2
- package/dist/core/p-71bbb583.entry.js.map +0 -1
package/hydrate/index.js
CHANGED
|
@@ -13531,7 +13531,7 @@ const YearPicker = ({ decadeView, size, focussedYear, yearInView, onSelectYear,
|
|
|
13531
13531
|
hAsync("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" }))))));
|
|
13532
13532
|
};
|
|
13533
13533
|
|
|
13534
|
-
const icDatePickerCss = "/*!@html*/html.sc-ic-date-picker{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-date-picker{margin:0}/*!@main*/main.sc-ic-date-picker{display:block}/*!@h1*/h1.sc-ic-date-picker{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-date-picker{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-date-picker{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-date-picker{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-date-picker{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-date-picker,strong.sc-ic-date-picker{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-date-picker,kbd.sc-ic-date-picker,samp.sc-ic-date-picker{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-date-picker{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-date-picker,sup.sc-ic-date-picker{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-date-picker{bottom:-0.25em}/*!@sup*/sup.sc-ic-date-picker{top:-0.5em}/*!@img*/img.sc-ic-date-picker{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-date-picker,input.sc-ic-date-picker,optgroup.sc-ic-date-picker,select.sc-ic-date-picker,textarea.sc-ic-date-picker{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-date-picker,input.sc-ic-date-picker{overflow:visible}/*!@button,\nselect*/button.sc-ic-date-picker,select.sc-ic-date-picker{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-date-picker,[type=\"button\"].sc-ic-date-picker,[type=\"reset\"].sc-ic-date-picker,[type=\"submit\"].sc-ic-date-picker{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-date-picker::-moz-focus-inner,[type=\"button\"].sc-ic-date-picker::-moz-focus-inner,[type=\"reset\"].sc-ic-date-picker::-moz-focus-inner,[type=\"submit\"].sc-ic-date-picker::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-date-picker:-moz-focusring,[type=\"button\"].sc-ic-date-picker:-moz-focusring,[type=\"reset\"].sc-ic-date-picker:-moz-focusring,[type=\"submit\"].sc-ic-date-picker:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-date-picker{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-date-picker{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-date-picker{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-date-picker{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-date-picker,[type=\"radio\"].sc-ic-date-picker{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-date-picker::-webkit-inner-spin-button,[type=\"number\"].sc-ic-date-picker::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-date-picker{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-date-picker::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-date-picker::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-date-picker{display:block}/*!@summary*/summary.sc-ic-date-picker{display:list-item}/*!@template*/template.sc-ic-date-picker{display:none}/*!@[hidden]*/[hidden].sc-ic-date-picker{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-date-picker,body.sc-ic-date-picker,div.sc-ic-date-picker,span.sc-ic-date-picker,applet.sc-ic-date-picker,object.sc-ic-date-picker,iframe.sc-ic-date-picker,h1.sc-ic-date-picker,h2.sc-ic-date-picker,h3.sc-ic-date-picker,h4.sc-ic-date-picker,h5.sc-ic-date-picker,h6.sc-ic-date-picker,p.sc-ic-date-picker,blockquote.sc-ic-date-picker,pre.sc-ic-date-picker,a.sc-ic-date-picker,abbr.sc-ic-date-picker,acronym.sc-ic-date-picker,address.sc-ic-date-picker,big.sc-ic-date-picker,cite.sc-ic-date-picker,code.sc-ic-date-picker,del.sc-ic-date-picker,dfn.sc-ic-date-picker,em.sc-ic-date-picker,img.sc-ic-date-picker,ins.sc-ic-date-picker,kbd.sc-ic-date-picker,q.sc-ic-date-picker,s.sc-ic-date-picker,samp.sc-ic-date-picker,small.sc-ic-date-picker,strike.sc-ic-date-picker,strong.sc-ic-date-picker,sub.sc-ic-date-picker,sup.sc-ic-date-picker,tt.sc-ic-date-picker,var.sc-ic-date-picker,b.sc-ic-date-picker,u.sc-ic-date-picker,i.sc-ic-date-picker,center.sc-ic-date-picker,dl.sc-ic-date-picker,dt.sc-ic-date-picker,dd.sc-ic-date-picker,ol.sc-ic-date-picker,ul.sc-ic-date-picker,li.sc-ic-date-picker,fieldset.sc-ic-date-picker,form.sc-ic-date-picker,label.sc-ic-date-picker,legend.sc-ic-date-picker,table.sc-ic-date-picker,caption.sc-ic-date-picker,tbody.sc-ic-date-picker,tfoot.sc-ic-date-picker,thead.sc-ic-date-picker,tr.sc-ic-date-picker,th.sc-ic-date-picker,td.sc-ic-date-picker,article.sc-ic-date-picker,aside.sc-ic-date-picker,canvas.sc-ic-date-picker,details.sc-ic-date-picker,embed.sc-ic-date-picker,figure.sc-ic-date-picker,figcaption.sc-ic-date-picker,footer.sc-ic-date-picker,header.sc-ic-date-picker,hgroup.sc-ic-date-picker,menu.sc-ic-date-picker,nav.sc-ic-date-picker,output.sc-ic-date-picker,ruby.sc-ic-date-picker,section.sc-ic-date-picker,summary.sc-ic-date-picker,time.sc-ic-date-picker,mark.sc-ic-date-picker,audio.sc-ic-date-picker,video.sc-ic-date-picker{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-date-picker-h{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)*/.large.sc-ic-date-picker-h{--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}/*!@:host(.small)*/.small.sc-ic-date-picker-h{--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}/*!@:host .date-input-container*/.sc-ic-date-picker-h .date-input-container.sc-ic-date-picker{position:relative}/*!@ic-date-input*/ic-date-input.sc-ic-date-picker{--input-width:var(--input-field-width)}/*!@:host .calendar-container*/.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{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*/.small.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{min-width:17rem;max-width:21.5rem}/*!@:host(.large) .calendar-container*/.large.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{min-width:21rem;max-width:25.5rem}/*!@:host .calendar-container.above*/.sc-ic-date-picker-h .calendar-container.above.sc-ic-date-picker{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}/*!@:host .month-year-nav-container*/.sc-ic-date-picker-h .month-year-nav-container.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:center;align-self:stretch}/*!@:host .month-year-nav-container.hidden*/.sc-ic-date-picker-h .month-year-nav-container.hidden.sc-ic-date-picker{display:none}/*!@:host .month-year-nav*/.sc-ic-date-picker-h .month-year-nav.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}/*!@:host .month-picker,\n:host .year-picker*/.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.sc-ic-date-picker-h .year-picker.sc-ic-date-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,\n:host(.small) .year-picker*/.small.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.small.sc-ic-date-picker-h .year-picker.sc-ic-date-picker{width:13.125rem}/*!@:host(.large) .month-picker,\n:host(.large) .year-picker*/.large.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.large.sc-ic-date-picker-h .year-picker.sc-ic-date-picker{width:20rem}/*!@:host .month-picker-button,\n:host .year-picker-button*/.sc-ic-date-picker-h .month-picker-button.sc-ic-date-picker,.sc-ic-date-picker-h .year-picker-button.sc-ic-date-picker{width:5rem;--min-width:5rem}/*!@:host .month-button,\n:host .year-button*/.sc-ic-date-picker-h .month-button.sc-ic-date-picker,.sc-ic-date-picker-h .year-button.sc-ic-date-picker{width:var(--month-button-width)}/*!@:host .month-button.focussed,\n:host .year-button.focussed*/.sc-ic-date-picker-h .month-button.focussed.sc-ic-date-picker,.sc-ic-date-picker-h .year-button.focussed.sc-ic-date-picker{z-index:1}/*!@:host .month-button::part(button),\n:host .year-button::part(button)*/.sc-ic-date-picker-h .month-button.sc-ic-date-picker::part(button),.sc-ic-date-picker-h .year-button.sc-ic-date-picker::part(button){min-width:var(--month-button-width)}/*!@:host .prev-decade .year-button svg*/.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker svg.sc-ic-date-picker{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}/*!@:host .prev-decade .year-button::part(button)*/.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:0;padding-right:var(--ic-space-lg)}/*!@:host(.small) .prev-decade .year-button::part(button)*/.small.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}/*!@:host .next-decade .year-button svg*/.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker svg.sc-ic-date-picker{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}/*!@:host .next-decade .year-button::part(button)*/.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-right:0;padding-left:var(--ic-space-lg)}/*!@:host(.small) .next-decade .year-button::part(button),\n:host(.large) .next-decade .year-button::part(button)*/.small.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button),.large.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:var(--ic-space-xl)}/*!@:host .bottom-buttons*/.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{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*/.small.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{padding-top:var(--ic-space-xxs)}/*!@:host .bottom-buttons.no-today*/.sc-ic-date-picker-h .bottom-buttons.no-today.sc-ic-date-picker{align-items:flex-end;flex-direction:column}/*!@:host .bottom-buttons.hidden*/.sc-ic-date-picker-h .bottom-buttons.hidden.sc-ic-date-picker{display:none}/*!@:host .calendar*/.sc-ic-date-picker-h .calendar.sc-ic-date-picker{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}/*!@:host(.large) .calendar*/.large.sc-ic-date-picker-h .calendar.sc-ic-date-picker{width:19.25rem}/*!@:host(.small) .calendar*/.small.sc-ic-date-picker-h .calendar.sc-ic-date-picker{padding-bottom:var(--ic-space-xxs);width:14rem}/*!@:host .hidden*/.sc-ic-date-picker-h .hidden.sc-ic-date-picker{display:none}/*!@:host .weekdays*/.sc-ic-date-picker-h .weekdays.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}/*!@:host .calendar-days-container*/.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{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*/.small.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{padding:var(--ic-space-xxxs) 0}/*!@:host(.large) .calendar-days-container*/.large.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{padding:var(--ic-space-xs) 0}/*!@:host .calendar-day-header*/.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}/*!@:host(.small) .calendar-day-header,\n:host(.large) .calendar-day-header*/.small.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker,.large.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker{padding:var(--ic-space-xxs)}/*!@:host .calendar-day-header ic-typography*/.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-color-tertiary-text);text-align:center}/*!@:host .day-button-container*/.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}/*!@:host(.small) .day-button-container*/.small.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{width:2rem;height:2rem}/*!@:host(.large) .day-button-container*/.large.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{width:2.5rem;height:2.5rem}/*!@:host .day-button*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker{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*/.sc-ic-date-picker-h .day-button.disabled.sc-ic-date-picker{cursor:default}/*!@:host(.large) .day-button*/.large.sc-ic-date-picker-h .day-button.sc-ic-date-picker{width:2.25rem;height:2.25rem}/*!@:host(.small) .day-button*/.small.sc-ic-date-picker-h .day-button.sc-ic-date-picker{width:1.75rem;height:1.75rem}/*!@:host .day-button ic-typography*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker ic-typography.sc-ic-date-picker{width:1.75rem;color:var(--ic-color-primary-text)}/*!@:host .day-button.outside-range ic-typography*/.sc-ic-date-picker-h .day-button.outside-range.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-architectural-400)}/*!@:host .day-button.outside-month ic-typography*/.sc-ic-date-picker-h .day-button.outside-month.sc-ic-date-picker ic-typography.sc-ic-date-picker{font-weight:var(--ic-font-weight-regular) !important}/*!@:host\n .day-button.outside-month:not(.outside-range):not(.selected)\n ic-typography*/.sc-ic-date-picker-h .day-button.outside-month.sc-ic-date-picker:not(.outside-range):not(.selected) ic-typography.sc-ic-date-picker{color:var(--ic-color-primary-text)}/*!@:host .day-button:hover:not(.disabled)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:hover:not(.disabled){background-color:var(--ic-action-dark-bg-hover)}/*!@:host .day-button:active:not(.disabled)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker: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),\n :host .day-button:active:not(.disabled):not(.focussed)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:hover:not(.disabled):not(.focussed),.sc-ic-date-picker-h .day-button.sc-ic-date-picker:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}/*!@:host .day-button.selected:not(.hidden)*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden){background-color:var(--ic-action-default)}/*!@:host .day-button.selected ic-typography*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-color-white-text)}/*!@:host .day-button.selected:not(.hidden):hover*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden):hover{background-color:var(--ic-action-default-hover)}/*!@:host .day-button.selected:not(.hidden):active*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden):active{background-color:var(--ic-action-default-active)}/*!@:host .day-button.focussed*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker{z-index:1}/*!@:host .day-button:focus*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:focus{outline:none}/*!@:host .day-button.focussed:focus*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker:focus{box-shadow:var(--ic-border-focus)}/*!@:host .day-button.today:not(.hidden)::after*/.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker: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*/.small.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker::after{bottom:0.35rem}/*!@:host(.large) .day-button.today::after*/.large.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker::after{width:1rem}/*!@:host .day-button.today.selected::after*/.sc-ic-date-picker-h .day-button.today.selected.sc-ic-date-picker::after{background-color:var(--ic-architectural-white)}/*!@:host #select-month-hint,\n:host #select-year-hint*/.sc-ic-date-picker-h #select-month-hint.sc-ic-date-picker,.sc-ic-date-picker-h #select-year-hint.sc-ic-date-picker{display:none}/*!@.sr-only*/.sr-only.sc-ic-date-picker{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){/*!@:host .calendar-container,\n :host .calendar,\n :host .bottom-buttons*/.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker,.sc-ic-date-picker-h .calendar.sc-ic-date-picker,.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{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*/.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker:not(.hidden)::after{background-color:highlight}/*!@:host .day-button.selected:not(.hidden)*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden){background-color:highlight}/*!@:host .day-button.focussed:focus*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker:focus{border:var(--ic-hc-border)}/*!@:host .month-button.selected::part(button),\n :host .year-button.selected::part(button)*/.sc-ic-date-picker-h .month-button.selected.sc-ic-date-picker::part(button),.sc-ic-date-picker-h .year-button.selected.sc-ic-date-picker::part(button){background-color:highlight}}";
|
|
13534
|
+
const icDatePickerCss = "/*!@html*/html.sc-ic-date-picker{line-height:1.15;-webkit-text-size-adjust:100%}/*!@body*/body.sc-ic-date-picker{margin:0}/*!@main*/main.sc-ic-date-picker{display:block}/*!@h1*/h1.sc-ic-date-picker{font-size:2em;margin:0.67em 0}/*!@hr*/hr.sc-ic-date-picker{box-sizing:content-box;height:0;overflow:visible}/*!@pre*/pre.sc-ic-date-picker{font-family:monospace, monospace;font-size:1em}/*!@a*/a.sc-ic-date-picker{background-color:transparent}/*!@abbr[title]*/abbr[title].sc-ic-date-picker{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}/*!@b,\nstrong*/b.sc-ic-date-picker,strong.sc-ic-date-picker{font-weight:bolder}/*!@code,\nkbd,\nsamp*/code.sc-ic-date-picker,kbd.sc-ic-date-picker,samp.sc-ic-date-picker{font-family:monospace, monospace;font-size:1em}/*!@small*/small.sc-ic-date-picker{font-size:80%}/*!@sub,\nsup*/sub.sc-ic-date-picker,sup.sc-ic-date-picker{font-size:75%;line-height:0;position:relative;vertical-align:baseline}/*!@sub*/sub.sc-ic-date-picker{bottom:-0.25em}/*!@sup*/sup.sc-ic-date-picker{top:-0.5em}/*!@img*/img.sc-ic-date-picker{border-style:none}/*!@button,\ninput,\noptgroup,\nselect,\ntextarea*/button.sc-ic-date-picker,input.sc-ic-date-picker,optgroup.sc-ic-date-picker,select.sc-ic-date-picker,textarea.sc-ic-date-picker{font-family:inherit;font-size:100%;line-height:1.15;margin:0}/*!@button,\ninput*/button.sc-ic-date-picker,input.sc-ic-date-picker{overflow:visible}/*!@button,\nselect*/button.sc-ic-date-picker,select.sc-ic-date-picker{text-transform:none}/*!@button,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"]*/button.sc-ic-date-picker,[type=\"button\"].sc-ic-date-picker,[type=\"reset\"].sc-ic-date-picker,[type=\"submit\"].sc-ic-date-picker{-webkit-appearance:button}/*!@button::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner*/button.sc-ic-date-picker::-moz-focus-inner,[type=\"button\"].sc-ic-date-picker::-moz-focus-inner,[type=\"reset\"].sc-ic-date-picker::-moz-focus-inner,[type=\"submit\"].sc-ic-date-picker::-moz-focus-inner{border-style:none;padding:0}/*!@button:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring*/button.sc-ic-date-picker:-moz-focusring,[type=\"button\"].sc-ic-date-picker:-moz-focusring,[type=\"reset\"].sc-ic-date-picker:-moz-focusring,[type=\"submit\"].sc-ic-date-picker:-moz-focusring{outline:1px dotted ButtonText}/*!@fieldset*/fieldset.sc-ic-date-picker{padding:0.35em 0.75em 0.625em}/*!@legend*/legend.sc-ic-date-picker{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}/*!@progress*/progress.sc-ic-date-picker{vertical-align:baseline}/*!@textarea*/textarea.sc-ic-date-picker{overflow:auto}/*!@[type=\"checkbox\"],\n[type=\"radio\"]*/[type=\"checkbox\"].sc-ic-date-picker,[type=\"radio\"].sc-ic-date-picker{box-sizing:border-box;padding:0}/*!@[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button*/[type=\"number\"].sc-ic-date-picker::-webkit-inner-spin-button,[type=\"number\"].sc-ic-date-picker::-webkit-outer-spin-button{height:auto}/*!@[type=\"search\"]*/[type=\"search\"].sc-ic-date-picker{-webkit-appearance:textfield;outline-offset:-2px}/*!@[type=\"search\"]::-webkit-search-decoration*/[type=\"search\"].sc-ic-date-picker::-webkit-search-decoration{-webkit-appearance:none}/*!@::-webkit-file-upload-button*/.sc-ic-date-picker::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}/*!@details*/details.sc-ic-date-picker{display:block}/*!@summary*/summary.sc-ic-date-picker{display:list-item}/*!@template*/template.sc-ic-date-picker{display:none}/*!@[hidden]*/[hidden].sc-ic-date-picker{display:none}/*!@html,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo*/html.sc-ic-date-picker,body.sc-ic-date-picker,div.sc-ic-date-picker,span.sc-ic-date-picker,applet.sc-ic-date-picker,object.sc-ic-date-picker,iframe.sc-ic-date-picker,h1.sc-ic-date-picker,h2.sc-ic-date-picker,h3.sc-ic-date-picker,h4.sc-ic-date-picker,h5.sc-ic-date-picker,h6.sc-ic-date-picker,p.sc-ic-date-picker,blockquote.sc-ic-date-picker,pre.sc-ic-date-picker,a.sc-ic-date-picker,abbr.sc-ic-date-picker,acronym.sc-ic-date-picker,address.sc-ic-date-picker,big.sc-ic-date-picker,cite.sc-ic-date-picker,code.sc-ic-date-picker,del.sc-ic-date-picker,dfn.sc-ic-date-picker,em.sc-ic-date-picker,img.sc-ic-date-picker,ins.sc-ic-date-picker,kbd.sc-ic-date-picker,q.sc-ic-date-picker,s.sc-ic-date-picker,samp.sc-ic-date-picker,small.sc-ic-date-picker,strike.sc-ic-date-picker,strong.sc-ic-date-picker,sub.sc-ic-date-picker,sup.sc-ic-date-picker,tt.sc-ic-date-picker,var.sc-ic-date-picker,b.sc-ic-date-picker,u.sc-ic-date-picker,i.sc-ic-date-picker,center.sc-ic-date-picker,dl.sc-ic-date-picker,dt.sc-ic-date-picker,dd.sc-ic-date-picker,ol.sc-ic-date-picker,ul.sc-ic-date-picker,li.sc-ic-date-picker,fieldset.sc-ic-date-picker,form.sc-ic-date-picker,label.sc-ic-date-picker,legend.sc-ic-date-picker,table.sc-ic-date-picker,caption.sc-ic-date-picker,tbody.sc-ic-date-picker,tfoot.sc-ic-date-picker,thead.sc-ic-date-picker,tr.sc-ic-date-picker,th.sc-ic-date-picker,td.sc-ic-date-picker,article.sc-ic-date-picker,aside.sc-ic-date-picker,canvas.sc-ic-date-picker,details.sc-ic-date-picker,embed.sc-ic-date-picker,figure.sc-ic-date-picker,figcaption.sc-ic-date-picker,footer.sc-ic-date-picker,header.sc-ic-date-picker,hgroup.sc-ic-date-picker,menu.sc-ic-date-picker,nav.sc-ic-date-picker,output.sc-ic-date-picker,ruby.sc-ic-date-picker,section.sc-ic-date-picker,summary.sc-ic-date-picker,time.sc-ic-date-picker,mark.sc-ic-date-picker,audio.sc-ic-date-picker,video.sc-ic-date-picker{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}/*!@:host*/.sc-ic-date-picker-h{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)*/.large.sc-ic-date-picker-h{--month-button-width:6.3125rem;--input-field-width:var(--input-width, 21.125rem)}/*!@:host(.small)*/.small.sc-ic-date-picker-h{--month-button-width:6.25rem;--input-field-width:var(--input-width, 17.125rem)}/*!@:host .date-input-container*/.sc-ic-date-picker-h .date-input-container.sc-ic-date-picker{position:relative}/*!@ic-date-input*/ic-date-input.sc-ic-date-picker{--input-width:var(--input-field-width)}/*!@:host .calendar-container*/.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{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*/.sc-ic-date-picker-h .calendar-container.show-date-input.sc-ic-date-picker{border:var(--ic-border-default);border-radius:var(--ic-border-radius);box-shadow:var(--ic-elevation-overlay)}/*!@:host .calendar-container.hide-date-input*/.sc-ic-date-picker-h .calendar-container.hide-date-input.sc-ic-date-picker{position:static}/*!@:host(.small) .calendar-container*/.small.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{min-width:17rem;max-width:21.5rem}/*!@:host(.large) .calendar-container*/.large.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker{min-width:21rem;max-width:25.5rem}/*!@:host .calendar-container.above*/.sc-ic-date-picker-h .calendar-container.above.sc-ic-date-picker{bottom:calc(var(--ic-space-xxl) - var(--ic-space-xxs))}/*!@:host .month-year-nav-container*/.sc-ic-date-picker-h .month-year-nav-container.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:center;align-self:stretch}/*!@:host .month-year-nav-container.hidden*/.sc-ic-date-picker-h .month-year-nav-container.hidden.sc-ic-date-picker{display:none}/*!@:host .month-year-nav*/.sc-ic-date-picker-h .month-year-nav.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:center;flex:1 0 0}/*!@:host .month-picker,\n:host .year-picker*/.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.sc-ic-date-picker-h .year-picker.sc-ic-date-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,\n:host(.small) .year-picker*/.small.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.small.sc-ic-date-picker-h .year-picker.sc-ic-date-picker{width:13.125rem}/*!@:host(.large) .month-picker,\n:host(.large) .year-picker*/.large.sc-ic-date-picker-h .month-picker.sc-ic-date-picker,.large.sc-ic-date-picker-h .year-picker.sc-ic-date-picker{width:20rem}/*!@:host .month-picker-button,\n:host .year-picker-button*/.sc-ic-date-picker-h .month-picker-button.sc-ic-date-picker,.sc-ic-date-picker-h .year-picker-button.sc-ic-date-picker{width:5rem;--min-width:5rem}/*!@:host .month-button,\n:host .year-button*/.sc-ic-date-picker-h .month-button.sc-ic-date-picker,.sc-ic-date-picker-h .year-button.sc-ic-date-picker{width:var(--month-button-width)}/*!@:host .month-button.focussed,\n:host .year-button.focussed*/.sc-ic-date-picker-h .month-button.focussed.sc-ic-date-picker,.sc-ic-date-picker-h .year-button.focussed.sc-ic-date-picker{z-index:1}/*!@:host .month-button::part(button),\n:host .year-button::part(button)*/.sc-ic-date-picker-h .month-button.sc-ic-date-picker::part(button),.sc-ic-date-picker-h .year-button.sc-ic-date-picker::part(button){min-width:var(--month-button-width)}/*!@:host .prev-decade .year-button svg*/.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker svg.sc-ic-date-picker{margin-right:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}/*!@:host .prev-decade .year-button::part(button)*/.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:0;padding-right:var(--ic-space-lg)}/*!@:host(.small) .prev-decade .year-button::part(button)*/.small.sc-ic-date-picker-h .prev-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:0;padding-right:calc(var(--ic-space-lg) + var(--ic-space-xxs))}/*!@:host .next-decade .year-button svg*/.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker svg.sc-ic-date-picker{margin-left:calc(-1 * var(--ic-space-xl));padding-top:var(--ic-space-sm)}/*!@:host .next-decade .year-button::part(button)*/.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-right:0;padding-left:var(--ic-space-lg)}/*!@:host(.small) .next-decade .year-button::part(button),\n:host(.large) .next-decade .year-button::part(button)*/.small.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button),.large.sc-ic-date-picker-h .next-decade.sc-ic-date-picker .year-button.sc-ic-date-picker::part(button){padding-left:var(--ic-space-xl)}/*!@:host .bottom-buttons*/.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{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*/.small.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{padding-top:var(--ic-space-xxs)}/*!@:host .bottom-buttons.no-today*/.sc-ic-date-picker-h .bottom-buttons.no-today.sc-ic-date-picker{align-items:flex-end;flex-direction:column}/*!@:host .bottom-buttons.hidden*/.sc-ic-date-picker-h .bottom-buttons.hidden.sc-ic-date-picker{display:none}/*!@:host .calendar*/.sc-ic-date-picker-h .calendar.sc-ic-date-picker{display:flex;flex-direction:column;align-items:flex-start;width:15.75rem;animation:fade-in-buttons var(--ic-transition-duration-slow)}/*!@:host(.large) .calendar*/.large.sc-ic-date-picker-h .calendar.sc-ic-date-picker{width:19.25rem}/*!@:host(.small) .calendar*/.small.sc-ic-date-picker-h .calendar.sc-ic-date-picker{padding-bottom:var(--ic-space-xxs);width:14rem}/*!@:host .hidden*/.sc-ic-date-picker-h .hidden.sc-ic-date-picker{display:none}/*!@:host .weekdays*/.sc-ic-date-picker-h .weekdays.sc-ic-date-picker{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--ic-space-xs);align-self:stretch}/*!@:host .calendar-days-container*/.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{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*/.small.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{padding:var(--ic-space-xxxs) 0}/*!@:host(.large) .calendar-days-container*/.large.sc-ic-date-picker-h .calendar-days-container.sc-ic-date-picker{padding:var(--ic-space-xs) 0}/*!@:host .calendar-day-header*/.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker{display:flex;width:2rem;padding:var(--ic-space-xxs) 0;justify-content:center;align-items:center}/*!@:host(.small) .calendar-day-header,\n:host(.large) .calendar-day-header*/.small.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker,.large.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker{padding:var(--ic-space-xxs)}/*!@:host .calendar-day-header ic-typography*/.sc-ic-date-picker-h .calendar-day-header.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-color-tertiary-text);text-align:center}/*!@:host .day-button-container*/.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{display:flex;justify-content:center;align-items:center;width:2.25rem;height:2.25rem}/*!@:host(.small) .day-button-container*/.small.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{width:2rem;height:2rem}/*!@:host(.large) .day-button-container*/.large.sc-ic-date-picker-h .day-button-container.sc-ic-date-picker{width:2.5rem;height:2.5rem}/*!@:host .day-button*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker{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*/.sc-ic-date-picker-h .day-button.disabled.sc-ic-date-picker{cursor:default}/*!@:host(.large) .day-button*/.large.sc-ic-date-picker-h .day-button.sc-ic-date-picker{width:2.25rem;height:2.25rem}/*!@:host(.small) .day-button*/.small.sc-ic-date-picker-h .day-button.sc-ic-date-picker{width:1.75rem;height:1.75rem}/*!@:host .day-button ic-typography*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker ic-typography.sc-ic-date-picker{width:1.75rem;color:var(--ic-color-primary-text)}/*!@:host .day-button.outside-range ic-typography*/.sc-ic-date-picker-h .day-button.outside-range.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-architectural-400)}/*!@:host .day-button.outside-month ic-typography*/.sc-ic-date-picker-h .day-button.outside-month.sc-ic-date-picker ic-typography.sc-ic-date-picker{font-weight:var(--ic-font-weight-regular) !important}/*!@:host\n .day-button.outside-month:not(.outside-range):not(.selected)\n ic-typography*/.sc-ic-date-picker-h .day-button.outside-month.sc-ic-date-picker:not(.outside-range):not(.selected) ic-typography.sc-ic-date-picker{color:var(--ic-color-primary-text)}/*!@:host .day-button:hover:not(.disabled)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:hover:not(.disabled){background-color:var(--ic-action-dark-bg-hover)}/*!@:host .day-button:active:not(.disabled)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker: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),\n :host .day-button:active:not(.disabled):not(.focussed)*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:hover:not(.disabled):not(.focussed),.sc-ic-date-picker-h .day-button.sc-ic-date-picker:active:not(.disabled):not(.focussed){transition:background-color var(--ic-transition-duration-slow) ease-in-out}}/*!@:host .day-button.selected:not(.hidden)*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden){background-color:var(--ic-action-default)}/*!@:host .day-button.selected ic-typography*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker ic-typography.sc-ic-date-picker{color:var(--ic-color-white-text)}/*!@:host .day-button.selected:not(.hidden):hover*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden):hover{background-color:var(--ic-action-default-hover)}/*!@:host .day-button.selected:not(.hidden):active*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden):active{background-color:var(--ic-action-default-active)}/*!@:host .day-button.focussed*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker{z-index:1}/*!@:host .day-button:focus*/.sc-ic-date-picker-h .day-button.sc-ic-date-picker:focus{outline:none}/*!@:host .day-button.focussed:focus*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker:focus{box-shadow:var(--ic-border-focus)}/*!@:host .day-button.today:not(.hidden)::after*/.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker: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*/.small.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker::after{bottom:0.35rem}/*!@:host(.large) .day-button.today::after*/.large.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker::after{width:1rem}/*!@:host .day-button.today.selected::after*/.sc-ic-date-picker-h .day-button.today.selected.sc-ic-date-picker::after{background-color:var(--ic-architectural-white)}/*!@:host #select-month-hint,\n:host #select-year-hint*/.sc-ic-date-picker-h #select-month-hint.sc-ic-date-picker,.sc-ic-date-picker-h #select-year-hint.sc-ic-date-picker{display:none}/*!@.sr-only*/.sr-only.sc-ic-date-picker{position:absolute;left:-9999px}@media (prefers-reduced-motion: reduce){/*!@:host .calendar-container,\n :host .calendar,\n :host .bottom-buttons*/.sc-ic-date-picker-h .calendar-container.sc-ic-date-picker,.sc-ic-date-picker-h .calendar.sc-ic-date-picker,.sc-ic-date-picker-h .bottom-buttons.sc-ic-date-picker{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*/.sc-ic-date-picker-h .day-button.today.sc-ic-date-picker:not(.hidden)::after{background-color:highlight}/*!@:host .day-button.selected:not(.hidden)*/.sc-ic-date-picker-h .day-button.selected.sc-ic-date-picker:not(.hidden){background-color:highlight}/*!@:host .day-button.focussed:focus*/.sc-ic-date-picker-h .day-button.focussed.sc-ic-date-picker:focus{border:var(--ic-hc-border)}/*!@:host .month-button.selected::part(button),\n :host .year-button.selected::part(button)*/.sc-ic-date-picker-h .month-button.selected.sc-ic-date-picker::part(button),.sc-ic-date-picker-h .year-button.selected.sc-ic-date-picker::part(button){background-color:highlight}}";
|
|
13535
13535
|
|
|
13536
13536
|
const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";
|
|
13537
13537
|
const DEFAULT_DISABLE_DATES_FROM_NOW_MSG = "Dates in the future are not allowed. Please select a date in the past.";
|
|
@@ -13545,6 +13545,7 @@ class DatePicker {
|
|
|
13545
13545
|
constructor(hostRef) {
|
|
13546
13546
|
registerInstance(this, hostRef);
|
|
13547
13547
|
this.icChange = createEvent(this, "icChange", 7);
|
|
13548
|
+
this.icSelectedDateChange = createEvent(this, "icSelectedDateChange", 7);
|
|
13548
13549
|
this.clearButtonEl = null;
|
|
13549
13550
|
this.daysOfWeek = [];
|
|
13550
13551
|
this.dayButtonFocussed = false;
|
|
@@ -13570,12 +13571,30 @@ class DatePicker {
|
|
|
13570
13571
|
this.decadeStart = decadeArr[1];
|
|
13571
13572
|
this.decadeEnd = decadeArr[10];
|
|
13572
13573
|
};
|
|
13574
|
+
this.notifyScreenReaderSelectedDate = () => {
|
|
13575
|
+
const dayNames = stringEnumToArray(IcDayNames);
|
|
13576
|
+
const months = stringEnumToArray(IcDateInputMonths);
|
|
13577
|
+
this.selectedDateInfoEl.textContent = this.selectedDate
|
|
13578
|
+
? `Selected date: ${dayNames[this.selectedDate.getDay()]}, ${this.selectedDate.getDate()} ${months[this.selectedDate.getMonth()]} ${this.selectedDate.getFullYear()}`
|
|
13579
|
+
: "Selected date cleared";
|
|
13580
|
+
};
|
|
13573
13581
|
this.setSelectedDate = (d, emit = true) => {
|
|
13574
13582
|
if (d === null || !dateMatches(d, this.selectedDate)) {
|
|
13575
13583
|
this.selectedDate = d;
|
|
13576
13584
|
this.value = d;
|
|
13577
13585
|
if (emit) {
|
|
13578
|
-
this.inputEl
|
|
13586
|
+
if (this.inputEl) {
|
|
13587
|
+
this.inputEl.triggerIcChange(d);
|
|
13588
|
+
}
|
|
13589
|
+
else {
|
|
13590
|
+
if (this.selectedDate) {
|
|
13591
|
+
this.setFocussedDate(this.selectedDate);
|
|
13592
|
+
}
|
|
13593
|
+
this.icSelectedDateChange.emit({ value: d });
|
|
13594
|
+
if (!this.showDateInput && this.selectedDateInfoEl) {
|
|
13595
|
+
this.notifyScreenReaderSelectedDate();
|
|
13596
|
+
}
|
|
13597
|
+
}
|
|
13579
13598
|
}
|
|
13580
13599
|
}
|
|
13581
13600
|
};
|
|
@@ -13590,13 +13609,17 @@ class DatePicker {
|
|
|
13590
13609
|
event.stopImmediatePropagation();
|
|
13591
13610
|
};
|
|
13592
13611
|
this.handleDocumentClick = () => {
|
|
13593
|
-
this.
|
|
13612
|
+
if (this.showDateInput) {
|
|
13613
|
+
this.calendarOpen = false;
|
|
13614
|
+
}
|
|
13594
13615
|
};
|
|
13595
13616
|
this.keyDownHandler = (event) => {
|
|
13596
13617
|
if (event.key === "Escape") {
|
|
13597
13618
|
if (this.calendarOpen) {
|
|
13598
13619
|
this.closeButtonClickHandler();
|
|
13599
|
-
this.inputEl
|
|
13620
|
+
if (this.inputEl) {
|
|
13621
|
+
this.inputEl.setCalendarFocus();
|
|
13622
|
+
}
|
|
13600
13623
|
event.stopImmediatePropagation();
|
|
13601
13624
|
}
|
|
13602
13625
|
}
|
|
@@ -13606,7 +13629,9 @@ class DatePicker {
|
|
|
13606
13629
|
}
|
|
13607
13630
|
};
|
|
13608
13631
|
this.closeButtonClickHandler = () => {
|
|
13609
|
-
this.
|
|
13632
|
+
if (this.showDateInput) {
|
|
13633
|
+
this.calendarOpen = false;
|
|
13634
|
+
}
|
|
13610
13635
|
};
|
|
13611
13636
|
this.focusFirstElement = () => {
|
|
13612
13637
|
this.monthButtonEl.setFocus();
|
|
@@ -13816,8 +13841,12 @@ class DatePicker {
|
|
|
13816
13841
|
};
|
|
13817
13842
|
this.handleSelectDay = (day) => {
|
|
13818
13843
|
this.setSelectedDate(day);
|
|
13819
|
-
this.
|
|
13820
|
-
|
|
13844
|
+
if (this.showDateInput) {
|
|
13845
|
+
this.calendarOpen = false;
|
|
13846
|
+
if (this.inputEl) {
|
|
13847
|
+
this.inputEl.setCalendarFocus();
|
|
13848
|
+
}
|
|
13849
|
+
}
|
|
13821
13850
|
};
|
|
13822
13851
|
this.handleSelectMonth = (month) => {
|
|
13823
13852
|
this.moveMonths(month - this.monthInView);
|
|
@@ -14230,6 +14259,60 @@ class DatePicker {
|
|
|
14230
14259
|
}
|
|
14231
14260
|
return inputProps;
|
|
14232
14261
|
};
|
|
14262
|
+
this.renderHiddenInput = () => !this.showDateInput ? (hAsync("span", { id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, hAsync("span", { ref: (el) => (this.selectedDateInfoEl = el), role: "status" }))) : ("");
|
|
14263
|
+
this.renderCalendar = () => {
|
|
14264
|
+
const { monthNames, size, focussedMonth, focussedYear, monthInView, yearInView, monthPickerVisible, yearPickerVisible, orderedDaysOfWeek, decadeView, minDate, maxDate, showPickerClearButton, showPickerTodayButton, dialogDescription, } = this;
|
|
14265
|
+
let monthButtonText = "";
|
|
14266
|
+
if (monthPickerVisible) {
|
|
14267
|
+
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.`;
|
|
14268
|
+
}
|
|
14269
|
+
else {
|
|
14270
|
+
monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
|
|
14271
|
+
}
|
|
14272
|
+
let yearButtonText = "";
|
|
14273
|
+
if (yearPickerVisible) {
|
|
14274
|
+
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.`;
|
|
14275
|
+
}
|
|
14276
|
+
else {
|
|
14277
|
+
yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
|
|
14278
|
+
}
|
|
14279
|
+
const dialogLabel = "choose date";
|
|
14280
|
+
const monthLabel = monthNames && monthNames[monthInView]
|
|
14281
|
+
? monthNames[monthInView]
|
|
14282
|
+
: "Open month picker";
|
|
14283
|
+
const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
|
|
14284
|
+
let minDay = minDate;
|
|
14285
|
+
if (this.disablePast) {
|
|
14286
|
+
const yesterday = new Date(minDate);
|
|
14287
|
+
yesterday.setDate(minDate.getDate() - 1);
|
|
14288
|
+
minDay = yesterday;
|
|
14289
|
+
}
|
|
14290
|
+
return (hAsync("div", null, hAsync("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), hAsync("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
|
|
14291
|
+
"calendar-container": true,
|
|
14292
|
+
"show-date-input": this.showDateInput,
|
|
14293
|
+
"hide-date-input": !this.showDateInput,
|
|
14294
|
+
above: this.showPickerAbove,
|
|
14295
|
+
}, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, hAsync("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("div", { class: {
|
|
14296
|
+
"month-year-nav-container": true,
|
|
14297
|
+
} }, hAsync("div", { class: "month-year-nav" }, this.previousMonthButton(), hAsync("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), hAsync("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()), hAsync("div", { class: "month-year-nav" }, this.previousYearButton(), hAsync("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), hAsync("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) && (hAsync("div", { class: {
|
|
14298
|
+
calendar: true,
|
|
14299
|
+
hidden: monthPickerVisible || yearPickerVisible,
|
|
14300
|
+
}, onKeyDown: this.handleCalendarKeyDown }, hAsync("div", { class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
|
|
14301
|
+
const header = size === "small" ? dayName.charAt(0) : dayName;
|
|
14302
|
+
return (hAsync("div", { class: "calendar-day-header" }, hAsync("ic-typography", { variant: "caption" }, header)));
|
|
14303
|
+
})), hAsync("div", { class: "calendar-days-container" }, this.currMonthView.map((day) => (hAsync(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 })))))), hAsync("div", { class: {
|
|
14304
|
+
"month-picker-container": true,
|
|
14305
|
+
hidden: !monthPickerVisible,
|
|
14306
|
+
} }, monthPickerVisible && (hAsync(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), hAsync("div", { class: {
|
|
14307
|
+
"year-picker-container": true,
|
|
14308
|
+
hidden: !yearPickerVisible,
|
|
14309
|
+
} }, yearPickerVisible && (hAsync(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 }))), hAsync("div", { class: {
|
|
14310
|
+
"bottom-buttons": true,
|
|
14311
|
+
"no-today": !showPickerTodayButton,
|
|
14312
|
+
} }, showPickerTodayButton && (hAsync("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 && (hAsync("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 === "" ||
|
|
14313
|
+
this.value === null ||
|
|
14314
|
+
this.value === undefined }, "Clear")))), this.renderHiddenInput()));
|
|
14315
|
+
};
|
|
14233
14316
|
this.calendarOpen = false;
|
|
14234
14317
|
this.currMonthView = [];
|
|
14235
14318
|
this.currYearPickerView = [];
|
|
@@ -14267,6 +14350,7 @@ class DatePicker {
|
|
|
14267
14350
|
this.name = undefined;
|
|
14268
14351
|
this.openAtDate = "";
|
|
14269
14352
|
this.required = false;
|
|
14353
|
+
this.showDateInput = true;
|
|
14270
14354
|
this.showDaysOutsideMonth = true;
|
|
14271
14355
|
this.showPickerClearButton = true;
|
|
14272
14356
|
this.showPickerTodayButton = true;
|
|
@@ -14301,6 +14385,11 @@ class DatePicker {
|
|
|
14301
14385
|
this.minDate = createDate(this.min, this.dateFormat);
|
|
14302
14386
|
}
|
|
14303
14387
|
}
|
|
14388
|
+
watchShowDateInputHandler() {
|
|
14389
|
+
if (!this.showDateInput) {
|
|
14390
|
+
this.calendarOpen = true;
|
|
14391
|
+
}
|
|
14392
|
+
}
|
|
14304
14393
|
watchStartOfWeekHandler() {
|
|
14305
14394
|
this.orderedDaysOfWeek = this.daysOfWeek
|
|
14306
14395
|
.slice(this.startOfWeek)
|
|
@@ -14392,13 +14481,23 @@ class DatePicker {
|
|
|
14392
14481
|
this.watchMaxHandler();
|
|
14393
14482
|
this.watchMinHandler();
|
|
14394
14483
|
removeDisabledFalse(this.disabled, this.el);
|
|
14484
|
+
this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
|
|
14395
14485
|
}
|
|
14396
14486
|
componentWillRender() {
|
|
14397
14487
|
this.dateInputProps = this.setDateInputProps();
|
|
14488
|
+
if (!this.showDateInput) {
|
|
14489
|
+
this.calendarOpen = true;
|
|
14490
|
+
}
|
|
14398
14491
|
}
|
|
14399
14492
|
componentWillUpdate() {
|
|
14400
14493
|
this.dateInputProps = this.setDateInputProps();
|
|
14401
14494
|
}
|
|
14495
|
+
componentDidLoad() {
|
|
14496
|
+
if (!this.showDateInput && this.value) {
|
|
14497
|
+
this.setSelectedDate(new Date(this.value));
|
|
14498
|
+
this.setFocussedDate(this.selectedDate);
|
|
14499
|
+
}
|
|
14500
|
+
}
|
|
14402
14501
|
localCalendarButtonClickHandler(ev) {
|
|
14403
14502
|
this.myCalendarButtonClicked = true;
|
|
14404
14503
|
if (!this.calendarOpen) {
|
|
@@ -14408,61 +14507,14 @@ class DatePicker {
|
|
|
14408
14507
|
}
|
|
14409
14508
|
calendarButtonClickHandler() {
|
|
14410
14509
|
//closes this picker if calendar button in another clicked
|
|
14411
|
-
if (!this.myCalendarButtonClicked) {
|
|
14510
|
+
if (!this.myCalendarButtonClicked && this.showDateInput) {
|
|
14412
14511
|
this.calendarOpen = false;
|
|
14413
14512
|
}
|
|
14414
14513
|
this.myCalendarButtonClicked = false;
|
|
14415
14514
|
}
|
|
14416
14515
|
render() {
|
|
14417
|
-
const { calendarOpen, dateInputProps,
|
|
14418
|
-
|
|
14419
|
-
if (monthPickerVisible) {
|
|
14420
|
-
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.`;
|
|
14421
|
-
}
|
|
14422
|
-
else {
|
|
14423
|
-
monthButtonText = `Press Enter or Space to open month picker view or use the arrow keys to change month.`;
|
|
14424
|
-
}
|
|
14425
|
-
let yearButtonText = "";
|
|
14426
|
-
if (yearPickerVisible) {
|
|
14427
|
-
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.`;
|
|
14428
|
-
}
|
|
14429
|
-
else {
|
|
14430
|
-
yearButtonText = `Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`;
|
|
14431
|
-
}
|
|
14432
|
-
const dialogLabel = "choose date";
|
|
14433
|
-
const monthLabel = monthNames && monthNames[monthInView]
|
|
14434
|
-
? monthNames[monthInView]
|
|
14435
|
-
: "Open month picker";
|
|
14436
|
-
const yearLabel = this.yearInView ? this.yearInView : "Open year picker";
|
|
14437
|
-
let minDay = minDate;
|
|
14438
|
-
if (this.disablePast) {
|
|
14439
|
-
const yesterday = new Date(minDate);
|
|
14440
|
-
yesterday.setDate(minDate.getDate() - 1);
|
|
14441
|
-
minDay = yesterday;
|
|
14442
|
-
}
|
|
14443
|
-
return (hAsync(Host, { onKeyDown: this.keyDownHandler, class: size }, hAsync("div", { class: "date-input-container" }, hAsync("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps))), calendarOpen && (hAsync("div", null, hAsync("span", { id: "dialog-description", class: "sr-only" }, dialogDescription), hAsync("div", { role: "dialog", "aria-modal": "true", "aria-label": dialogLabel, "aria-describedBy": "dialog-description", class: {
|
|
14444
|
-
"calendar-container": true,
|
|
14445
|
-
above: this.showPickerAbove,
|
|
14446
|
-
}, onMouseDown: this.handleCalendarMouseDown, onClick: this.handleCalendarClick }, hAsync("span", { ref: (el) => (this.liveRegionEl = el), id: "live-region", "aria-live": "assertive", class: "sr-only" }), hAsync("div", { class: {
|
|
14447
|
-
"month-year-nav-container": true,
|
|
14448
|
-
} }, hAsync("div", { class: "month-year-nav" }, this.previousMonthButton(), hAsync("span", { id: "select-month-hint", "aria-hidden": "true" }, monthButtonText), hAsync("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()), hAsync("div", { class: "month-year-nav" }, this.previousYearButton(), hAsync("span", { id: "select-year-hint", "aria-hidden": "true" }, yearButtonText), hAsync("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) && (hAsync("div", { class: {
|
|
14449
|
-
calendar: true,
|
|
14450
|
-
hidden: monthPickerVisible || yearPickerVisible,
|
|
14451
|
-
}, onKeyDown: this.handleCalendarKeyDown }, hAsync("div", { class: "weekdays", "aria-hidden": "true" }, orderedDaysOfWeek.map((dayName) => {
|
|
14452
|
-
const header = size === "small" ? dayName.charAt(0) : dayName;
|
|
14453
|
-
return (hAsync("div", { class: "calendar-day-header" }, hAsync("ic-typography", { variant: "caption" }, header)));
|
|
14454
|
-
})), hAsync("div", { class: "calendar-days-container" }, this.currMonthView.map((day) => (hAsync(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 })))))), hAsync("div", { class: {
|
|
14455
|
-
"month-picker-container": true,
|
|
14456
|
-
hidden: !monthPickerVisible,
|
|
14457
|
-
} }, monthPickerVisible && (hAsync(MonthPicker, { size: size, onSelectMonth: this.handleSelectMonth, monthInView: monthInView, focussedMonth: focussedMonth, onKeyDown: this.monthPickerKeyDownHandler, focussedMonthRef: this.setFocussedMonthEl, minDate: minDate, maxDate: maxDate, yearInView: yearInView }))), hAsync("div", { class: {
|
|
14458
|
-
"year-picker-container": true,
|
|
14459
|
-
hidden: !yearPickerVisible,
|
|
14460
|
-
} }, yearPickerVisible && (hAsync(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 }))), hAsync("div", { class: {
|
|
14461
|
-
"bottom-buttons": true,
|
|
14462
|
-
"no-today": !showPickerTodayButton,
|
|
14463
|
-
} }, showPickerTodayButton && (hAsync("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 && (hAsync("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 === "" ||
|
|
14464
|
-
this.value === null ||
|
|
14465
|
-
this.value === undefined }, "Clear"))))))));
|
|
14516
|
+
const { calendarOpen, dateInputProps, keyDownHandler, renderCalendar, showDateInput, size, } = this;
|
|
14517
|
+
return (hAsync(Host, { onKeyDown: keyDownHandler, class: size }, showDateInput && (hAsync("div", { class: "date-input-container" }, hAsync("ic-date-input", Object.assign({ ref: (el) => (this.inputEl = el) }, dateInputProps)))), calendarOpen && renderCalendar()));
|
|
14466
14518
|
}
|
|
14467
14519
|
static get delegatesFocus() { return true; }
|
|
14468
14520
|
get el() { return getElement(this); }
|
|
@@ -14472,6 +14524,7 @@ class DatePicker {
|
|
|
14472
14524
|
"disablePast": ["watchDisablePastHandler"],
|
|
14473
14525
|
"max": ["watchMaxHandler"],
|
|
14474
14526
|
"min": ["watchMinHandler"],
|
|
14527
|
+
"showDateInput": ["watchShowDateInputHandler"],
|
|
14475
14528
|
"startOfWeek": ["watchStartOfWeekHandler"],
|
|
14476
14529
|
"calendarOpen": ["watchOpenHandler"],
|
|
14477
14530
|
"focussedDate": ["watchFocussedDateHandler"],
|
|
@@ -14505,6 +14558,7 @@ class DatePicker {
|
|
|
14505
14558
|
"name": [1],
|
|
14506
14559
|
"openAtDate": [1, "open-at-date"],
|
|
14507
14560
|
"required": [4],
|
|
14561
|
+
"showDateInput": [4, "show-date-input"],
|
|
14508
14562
|
"showDaysOutsideMonth": [4, "show-days-outside-month"],
|
|
14509
14563
|
"showPickerClearButton": [4, "show-picker-clear-button"],
|
|
14510
14564
|
"showPickerTodayButton": [4, "show-picker-today-button"],
|
|
@@ -21673,6 +21727,7 @@ const icNavigationGroupCss = "/*!@html*/html.sc-ic-navigation-group{line-height:
|
|
|
21673
21727
|
class NavigationGroup {
|
|
21674
21728
|
constructor(hostRef) {
|
|
21675
21729
|
registerInstance(this, hostRef);
|
|
21730
|
+
this.navigationGroupOpened = createEvent(this, "navigationGroupOpened", 7);
|
|
21676
21731
|
this.allGroupedNavigationItems = [];
|
|
21677
21732
|
this.DYNAMIC_GROUPED_LINKS_HEIGHT_MS = 100;
|
|
21678
21733
|
this.IC_NAVIGATION_ITEM = "ic-navigation-item";
|
|
@@ -21912,6 +21967,11 @@ class NavigationGroup {
|
|
|
21912
21967
|
childBlurHandler() {
|
|
21913
21968
|
this.hideDropdown();
|
|
21914
21969
|
}
|
|
21970
|
+
handleNavigationGroupOpened(event) {
|
|
21971
|
+
if (event.detail.source !== this.el) {
|
|
21972
|
+
this.hideDropdown();
|
|
21973
|
+
}
|
|
21974
|
+
}
|
|
21915
21975
|
navItemClickHandler() {
|
|
21916
21976
|
this.hideDropdown();
|
|
21917
21977
|
}
|
|
@@ -21932,6 +21992,9 @@ class NavigationGroup {
|
|
|
21932
21992
|
}
|
|
21933
21993
|
showDropdown() {
|
|
21934
21994
|
if (!this.dropdownOpen) {
|
|
21995
|
+
this.navigationGroupOpened.emit({
|
|
21996
|
+
source: this.el,
|
|
21997
|
+
});
|
|
21935
21998
|
this.toggleDropdown();
|
|
21936
21999
|
}
|
|
21937
22000
|
}
|
|
@@ -21983,7 +22046,7 @@ class NavigationGroup {
|
|
|
21983
22046
|
"parentEl": [32],
|
|
21984
22047
|
"setFocus": [64]
|
|
21985
22048
|
},
|
|
21986
|
-
"$listeners$": [[0, "childBlur", "childBlurHandler"], [0, "navItemClicked", "navItemClickHandler"], [4, "themeChange", "themeChangeHandler"]],
|
|
22049
|
+
"$listeners$": [[0, "childBlur", "childBlurHandler"], [4, "navigationGroupOpened", "handleNavigationGroupOpened"], [0, "navItemClicked", "navItemClickHandler"], [4, "themeChange", "themeChangeHandler"]],
|
|
21987
22050
|
"$lazyBundleId$": "-",
|
|
21988
22051
|
"$attrsToReflect$": []
|
|
21989
22052
|
}; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukic/canary-web-components",
|
|
3
|
-
"version": "2.0.0-canary.
|
|
3
|
+
"version": "2.0.0-canary.39",
|
|
4
4
|
"description": "A web component UI library compiled with StencilJS",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@popperjs/core": "^2.11.2",
|
|
47
47
|
"@stencil/core": "^4.9.0",
|
|
48
|
-
"@ukic/web-components": "^2.37.
|
|
48
|
+
"@ukic/web-components": "^2.37.1"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@ukic/fonts": "^2.3.0"
|
|
@@ -58,15 +58,15 @@
|
|
|
58
58
|
"@open-wc/testing-helpers": "^2.0.2",
|
|
59
59
|
"@stencil/postcss": "^2.1.0",
|
|
60
60
|
"@stencil/react-output-target": "^0.5.3",
|
|
61
|
-
"@storybook/addon-a11y": "^
|
|
62
|
-
"@storybook/addon-actions": "^
|
|
63
|
-
"@storybook/addon-
|
|
64
|
-
"@storybook/addon-
|
|
65
|
-
"@storybook/addon-links": "^7.6.10",
|
|
66
|
-
"@storybook/addon-mdx-gfm": "^7.6.10",
|
|
61
|
+
"@storybook/addon-a11y": "^8.5.3",
|
|
62
|
+
"@storybook/addon-actions": "^8.5.3",
|
|
63
|
+
"@storybook/addon-essentials": "^8.5.3",
|
|
64
|
+
"@storybook/addon-links": "^8.5.3",
|
|
67
65
|
"@storybook/addon-postcss": "^2.0.0",
|
|
68
|
-
"@storybook/
|
|
69
|
-
"@storybook/
|
|
66
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.5",
|
|
67
|
+
"@storybook/blocks": "^8.5.3",
|
|
68
|
+
"@storybook/web-components": "^8.5.3",
|
|
69
|
+
"@storybook/web-components-webpack5": "^8.5.3",
|
|
70
70
|
"@types/autoprefixer": "^10.2.0",
|
|
71
71
|
"@types/jest": "^26.0.24",
|
|
72
72
|
"@types/jest-axe": "^3.5.3",
|
|
@@ -85,11 +85,11 @@
|
|
|
85
85
|
"react-markdown": "^8.0.7",
|
|
86
86
|
"remark-gfm": "^3.0.1",
|
|
87
87
|
"stencil-inline-svg": "^1.1.0",
|
|
88
|
-
"storybook": "^
|
|
88
|
+
"storybook": "^8.5.3",
|
|
89
89
|
"ts-jest": "^26.5.6",
|
|
90
90
|
"webpack": "^5.76.0"
|
|
91
91
|
},
|
|
92
92
|
"license": "MIT",
|
|
93
93
|
"packageManager": "^npm@10.9.2",
|
|
94
|
-
"gitHead": "
|
|
94
|
+
"gitHead": "57c92bd6e5ec9649c60d0231067852679af99def"
|
|
95
95
|
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{h as t,r as e,c as i,H as s,g as a}from"./p-8455d1bb.js";import{d as n,g as h,a as o,y as r,b as l,c,e as d,f as u,h as f}from"./p-33dd24eb.js";import{s as b,k as p,l as m,m as y,r as w,o as g,n as v}from"./p-8ab58daa.js";const k=`<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M9.70687 6L8.29688 7.41L12.8769 12L8.29688 16.59L9.70687 18L15.7069 12L9.70687 6Z" fill="currentColor"/>\n</svg>\n`;const x=({focussed:e,today:i,day:s,monthInView:a,onFocusDay:n,onBlurDay:h,onSelectDay:o,selected:r,focussedDayRef:l,inRange:c,showDaysOutsideMonth:d,disableDay:u})=>{const f=()=>{o(s)};const y=()=>{n()};const w=()=>{h()};const g=b(p);const v=b(m);const k=!c||u;const x=a!==s.getMonth();const D=k||x&&!d;return t("div",{class:"day-button-container"},t("button",{class:{"day-button":true,"outside-month":x,"outside-range":k,hidden:x&&!d,disabled:D,today:i,selected:r,focussed:e},tabIndex:e?0:-1,"aria-hidden":x?"true":"false","aria-disabled":D?"true":"false","aria-current":i?"date":undefined,"aria-label":D||x||k?undefined:`Choose ${g[s.getDay()]}, ${s.getDate()} ${v[s.getMonth()]} ${s.getFullYear()}`,disabled:D,onClick:f,onBlur:w,onFocus:y,ref:t=>{if(e&&t&&l){l(t)}}},(!x||x&&d)&&t("ic-typography",{variant:"subtitle-small",italic:x},s.getDate())))};const D=({size:e,focussedMonth:i,monthInView:s,onSelectMonth:a,onKeyDown:r,focussedMonthRef:l,minDate:c,maxDate:d,yearInView:u})=>{const f=t=>{const e=t.target;a(Number(e.getAttribute("data-month")))};const p=b(m);return t("div",{class:{"month-picker":true},role:"list"},p.map(((a,b)=>{const p=s===b;const m=i===b;const y=!n(new Date(u,b,1),c?o(c):null,d?h(d):null);return t("ic-button",{role:"listitem",class:{"month-button":true,selected:p,focussed:m,disabled:y},"full-width":true,disabled:y,variant:p?"primary":"tertiary","data-month":b,size:e,tabIndex:m?0:-1,"aria-current":p?"true":"false","aria-label":p?"":`select ${a}`,onClick:f,onKeyDown:r,ref:t=>{if(m&&t){l(t)}}},a)})))};const z=({decadeView:e,size:i,focussedYear:s,yearInView:a,onSelectYear:n,onFocusYear:h,onBlurYear:o,onKeyDown:l,minDate:c,maxDate:d,focussedYearRef:u})=>{const f=t=>{const e=t.target;n(Number(e.getAttribute("data-year")))};const b=()=>{h()};const p=()=>{o()};const m=t=>{t.preventDefault()};const y=e[0];const w=e[11];const g=e.slice(1,11);return t("div",{class:"year-picker",role:"list"},t("div",{class:"prev-decade","aria-hidden":"true"},t("ic-button",{id:"prev-decade-button",class:{"year-button":true},disabled:!r(y,c,d),"data-year":y,tabIndex:-1,variant:"tertiary",onClick:f,onMouseDown:m,"aria-hidden":"true",size:i},`${y-9}s`,t("svg",{slot:"left-icon",width:"12",height:"12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("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"})))),g.map((e=>{const n=a===e;const h=s===e;return t("ic-button",{class:{"year-button":true,selected:n,focussed:h},disabled:!r(e,c,d),"data-year":e,tabIndex:h?0:-1,variant:n?"primary":"tertiary",onClick:f,"aria-label":n?"":`select ${e}`,role:"listitem","aria-current":n?"true":"false",onKeyDown:l,onFocus:b,onBlur:p,size:i,ref:t=>{if(h&&t){u(t)}}},e)})),t("div",{class:"next-decade","aria-hidden":"true"},t("ic-button",{id:"next-decade-button",class:{"year-button":true,flip:true},disabled:!r(w,c,d),"data-year":w,tabIndex:-1,variant:"tertiary",onClick:f,onMouseDown:m,"aria-hidden":"true",size:i},`${w}s`,t("svg",{slot:"right-icon",width:"12",height:"12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("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 H='/*! 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 M="DD/MM/YYYY";const P="Dates in the future are not allowed. Please select a date in the past.";const V="Dates in the past are not allowed. Please select a date in the future.";const L="The date you have selected is on a day of the week that is not allowed. Please select another date.";const T=100;const I=360;const C=400;const Y=440;const $=class{constructor(s){e(this,s);this.icChange=i(this,"icChange",7);this.clearButtonEl=null;this.daysOfWeek=[];this.dayButtonFocussed=false;this.dayPickerKeyboardNav=false;this.dialogDescription="";this.focusDay=true;this.liveRegionEl=null;this.monthNames=[];this.monthInViewUpdateHandled=false;this.myCalendarButtonClicked=false;this.showPickerAbove=false;this.today=new Date;this.todayButtonEl=null;this.yearButtonFocussed=false;this.setDecadeView=t=>{let e=t-1;const i=[];while(e<=t+10){i.push(e);e++}this.decadeView=i;this.decadeStart=i[1];this.decadeEnd=i[10]};this.setSelectedDate=(t,e=true)=>{if(t===null||!l(t,this.selectedDate)){this.selectedDate=t;this.value=t;if(e){this.inputEl.triggerIcChange(t)}}};this.handleCalendarMouseDown=t=>{const e=t.target;if(e.tagName!=="IC-BUTTON"){t.preventDefault()}};this.handleCalendarClick=t=>{this.clearDialogDescription();t.stopImmediatePropagation()};this.handleDocumentClick=()=>{this.calendarOpen=false};this.keyDownHandler=t=>{if(t.key==="Escape"){if(this.calendarOpen){this.closeButtonClickHandler();this.inputEl.setCalendarFocus();t.stopImmediatePropagation()}}else{this.clearDialogDescription();t.stopImmediatePropagation()}};this.closeButtonClickHandler=()=>{this.calendarOpen=false};this.focusFirstElement=()=>{this.monthButtonEl.setFocus()};this.focusLastElement=()=>{if(this.showPickerClearButton&&!this.clearButtonEl.disabled){this.clearButtonEl.setFocus()}else if(this.showPickerTodayButton&&!this.todayButtonEl.disabled){this.todayButtonEl.setFocus()}else if(this.monthPickerVisible){this.focussedMonthEl.setFocus()}else if(this.yearPickerVisible){this.focussedYearEl.setFocus()}else{this.focussedDayEl.focus()}};this.focusFocussedDay=()=>{this.focussedDayEl.focus()};this.monthButtonClickHandler=()=>{this.yearPickerVisible=false;this.focusDay=false;this.monthPickerVisible=!this.monthPickerVisible;if(this.monthPickerVisible){this.setAriaLiveRegionText("Month picker view open")}else{this.setMonthSelectedLiveRegionText()}};this.yearButtonClickHandler=()=>{this.monthPickerVisible=false;this.focusDay=false;this.yearPickerVisible=!this.yearPickerVisible;if(this.yearPickerVisible){this.setAriaLiveRegionText(`Year picker view open. ${this.getDecadeInViewText()}`)}else{this.setYearSelectedLiveRegionText()}};this.todayButtonClickHandler=()=>{this.yearPickerVisible=false;this.monthPickerVisible=false;this.setFocussedDate(new Date);this.setAriaLiveRegionText(this.getMonthInViewText());setTimeout((()=>this.focusFocussedDay()),T)};this.todayButtonKeyDownHandler=t=>{if(t.key==="Tab"&&!t.shiftKey&&this.clearButtonEl.disabled){this.focusFirstElement();t.preventDefault()}};this.clearButtonClickHandler=()=>{this.setSelectedDate(null);let t="Selected date cleared.";if(!this.monthPickerVisible&&!this.yearPickerVisible){t+=` ${this.getMonthInViewText()}`}if(this.monthPickerVisible){this.focussedMonthEl.setFocus()}else if(this.yearPickerVisible){this.focussedYearEl.setFocus()}else{this.focusFocussedDay()}this.setAriaLiveRegionText(t)};this.setMonthSelectedLiveRegionText=()=>{this.setAriaLiveRegionText(`${this.monthNames[this.monthInView]} selected. ${this.getMonthInViewText()}`)};this.setYearSelectedLiveRegionText=()=>{this.setAriaLiveRegionText(`${this.yearInView} selected. ${this.getMonthInViewText()}`)};this.getMonthInViewText=()=>`${this.monthNames[this.monthInView]} ${this.yearInView} currently in view.`;this.getDecadeInViewText=()=>`${this.decadeStart} to ${this.decadeEnd} currently in view.`;this.setAriaLiveRegionText=t=>{this.liveRegionEl&&(this.liveRegionEl.innerText=t)};this.clearDialogDescription=()=>{this.dialogDescription=""};this.clearButtonKeyDownHandler=t=>{if(t.key==="Tab"&&!t.shiftKey){this.focusFirstElement();t.preventDefault()}};this.goToPreviousMonth=(t=false)=>{this.focusDay=t;this.moveMonths(-1)};this.goToNextMonth=(t=false)=>{this.focusDay=t;this.moveMonths(1)};this.goToPreviousYear=(t=false)=>{if(this.isPrevYearAllowed()){this.focusDay=t;this.moveYears(-1)}};this.goToNextYear=(t=false)=>{if(this.isNextYearAllowed()){this.focusDay=t;this.moveYears(1)}};this.navButtonMouseDownHandler=t=>{t.preventDefault()};this.renderMonthYearNavButton=(e,i,s)=>{const a=this.size;return t("div",{"aria-hidden":"true"},t("ic-button",{id:e,disableTooltip:true,disabled:s,onClick:this.monthYearNavClickHandler,class:{flip:i},variant:"icon",innerHTML:k,size:a,tabIndex:-1,"aria-hidden":"true",onMouseDown:this.navButtonMouseDownHandler}))};this.monthYearNavClickHandler=t=>{const e=t.target;switch(e.id){case"previous-month-button":this.goToPreviousMonth(this.dayButtonFocussed);break;case"next-month-button":this.goToNextMonth(this.dayButtonFocussed);break;case"previous-year-button":this.goToPreviousYear(this.dayButtonFocussed);break;case"next-year-button":this.goToNextYear(this.dayButtonFocussed);break}};this.previousMonthButton=()=>{let t=false;if(this.focussedDate!==null&&this.minDate!==null){const e=this.focussedDate.getFullYear()===this.minDate.getFullYear();if(e){t=this.monthInView-1<this.minDate.getMonth()}}return this.renderMonthYearNavButton("previous-month-button",true,t)};this.nextMonthButton=()=>{let t=false;if(this.focussedDate!==null&&this.maxDate!==null){const e=this.focussedDate.getFullYear()===this.maxDate.getFullYear();if(e){t=this.monthInView+1>this.maxDate.getMonth()}}return this.renderMonthYearNavButton("next-month-button",false,t)};this.previousYearButton=()=>this.renderMonthYearNavButton("previous-year-button",true,!this.isPrevYearAllowed());this.nextYearButton=()=>this.renderMonthYearNavButton("next-year-button",false,!this.isNextYearAllowed());this.isPrevYearAllowed=()=>this.isYearAllowed(this.yearInView-1);this.isNextYearAllowed=()=>this.isYearAllowed(this.yearInView+1);this.isYearAllowed=t=>r(t,this.minDate,this.maxDate);this.getMonthView=t=>{const e=c(o(t),this.startOfWeek);const i=d(h(t),this.startOfWeek);const s=[];let a=e;while(!l(a,i)){s.push(a);a=new Date(a);a.setDate(a.getDate()+1)}s.push(a);return s};this.isCurrentMonth=()=>{const t=new Date;return t.getFullYear()===this.yearInView&&t.getMonth()===this.monthInView};this.updateMonthInView=()=>{this.currMonthView=this.getMonthView(this.focussedDate);this.focussedDay=this.focussedDate.getDate();this.monthInView=this.focussedDate.getMonth();this.yearInView=this.focussedDate.getFullYear();if(this.dayPickerKeyboardNav){this.monthInViewUpdateHandled=true;this.setAriaLiveRegionText(this.getMonthInViewText());this.dayPickerKeyboardNav=false}};this.handleSelectDay=t=>{this.setSelectedDate(t);this.calendarOpen=false;this.inputEl.setCalendarFocus()};this.handleSelectMonth=t=>{this.moveMonths(t-this.monthInView);setTimeout((()=>{this.monthButtonEl.setFocus();this.monthPickerVisible=false;this.setMonthSelectedLiveRegionText()}),T)};this.handleSelectYear=t=>{const e=this.decadeView.indexOf(t);if(e>0&&e<this.decadeView.length-1){this.moveYears(t-this.yearInView);this.focusDay=false;const e=this.monthNames[this.monthInView];this.setAriaLiveRegionText(`${t} selected. ${e} ${t} currently in view.`);setTimeout((()=>{this.yearButtonEl.setFocus();this.yearPickerVisible=false}),T)}else{const e=t-this.focussedYear>0?10:-10;this.updateFocussedYear(e,this.yearButtonFocussed);this.setAriaLiveRegionText(this.getDecadeInViewText())}};this.monthPickerKeyDownHandler=t=>{let e=true;switch(t.key){case"ArrowUp":case"ArrowLeft":this.updateFocussedMonth(-1);break;case"ArrowDown":case"ArrowRight":this.updateFocussedMonth(1);break;case"Home":this.updateFocussedMonth(-this.focussedMonth);break;case"End":this.updateFocussedMonth(11-this.focussedMonth);break;case"Tab":e=this.calendarTabHandler(t);break;case"Escape":t.stopImmediatePropagation();this.monthPickerVisible=false;setTimeout((()=>this.focusFocussedDay()),T);break;default:e=false}if(e){t.preventDefault()}};this.yearPickerKeyDownHandler=t=>{let e=true;switch(t.key){case"ArrowUp":case"ArrowLeft":this.updateFocussedYear(-1);break;case"ArrowDown":case"ArrowRight":this.updateFocussedYear(1);break;case"Home":if(this.focussedYear>this.decadeStart){this.updateFocussedYear(this.decadeStart-this.focussedYear)}break;case"End":if(this.focussedYear<this.decadeEnd){this.updateFocussedYear(this.decadeEnd-this.focussedYear)}break;case"PageUp":this.updateFocussedYear(-10);break;case"PageDown":this.updateFocussedYear(10);break;case"Tab":e=this.calendarTabHandler(t);break;case"Escape":t.stopImmediatePropagation();this.yearPickerVisible=false;setTimeout((()=>this.focusFocussedDay()),T);break;default:e=false}if(e){t.preventDefault()}};this.onYearButtonFocusHandler=()=>{this.yearButtonFocussed=true};this.onYearButtonBlurHandler=()=>{this.yearButtonFocussed=false};this.monthButtonKeyDownHandler=t=>{let e=false;switch(t.key){case"ArrowLeft":case"ArrowUp":e=true;this.goToPreviousMonth();break;case"ArrowRight":case"ArrowDown":e=true;this.goToNextMonth();break;case"Home":e=true;this.focusDay=false;this.moveMonths(-this.monthInView);break;case"End":e=true;this.focusDay=false;this.moveMonths(11-this.monthInView);break;case"Tab":if(t.shiftKey){e=true;this.focusLastElement()}break;case"Escape":if(this.monthPickerVisible){this.monthPickerVisible=false;t.stopImmediatePropagation()}break}if(e){t.preventDefault()}};this.yearButtonKeyDownHandler=t=>{let e=false;switch(t.key){case"ArrowLeft":case"ArrowUp":e=true;this.goToPreviousYear();break;case"ArrowRight":case"ArrowDown":e=true;this.goToNextYear();break;case"Home":if(this.yearPickerVisible&&this.yearInView>this.decadeStart){e=true;this.moveYears(this.decadeStart-this.yearInView)}break;case"End":if(this.yearPickerVisible&&this.yearInView<this.decadeEnd){e=true;this.moveYears(this.decadeEnd-this.focussedYear)}break;case"PageUp":e=true;this.focusDay=false;this.moveYears(-10);break;case"PageDown":e=true;this.focusDay=false;this.moveYears(10);break;case"Escape":if(this.yearPickerVisible){this.yearPickerVisible=false;t.stopImmediatePropagation()}break}if(e){t.preventDefault()}};this.handleCalendarKeyDown=t=>{let e=true;switch(t.key){case"ArrowDown":this.dayPickerKeyboardNav=true;this.moveDays(7);break;case"ArrowUp":this.dayPickerKeyboardNav=true;this.moveDays(-7);break;case"ArrowLeft":this.dayPickerKeyboardNav=true;this.moveDays(-1*this.getNextDayToFocus(this.focussedDate,false));break;case"ArrowRight":this.dayPickerKeyboardNav=true;this.moveDays(this.getNextDayToFocus(this.focussedDate,true));break;case"PageUp":this.dayPickerKeyboardNav=true;t.shiftKey?this.moveYears(-1):this.moveMonths(-1);break;case"PageDown":this.dayPickerKeyboardNav=true;t.shiftKey?this.moveYears(1):this.moveMonths(1);break;case"Home":this.dayPickerKeyboardNav=true;this.setFocussedDate(new Date(this.focussedYear,this.focussedMonth,1));break;case"End":this.dayPickerKeyboardNav=true;this.setFocussedDate(new Date(this.focussedYear,this.focussedMonth+1,0));break;case"Tab":e=this.calendarTabHandler(t);break;default:e=false;break}if(e){t.preventDefault()}};this.calendarTabHandler=t=>{let e=false;if(!t.shiftKey&&(!this.showPickerTodayButton||this.isCurrentMonth())&&(!this.showPickerClearButton||this.clearButtonEl.disabled)){this.focusFirstElement();e=true}else if(t.shiftKey){this.yearButtonEl.setFocus();e=true}return e};this.onDayButtonFocusHandler=()=>{this.dayButtonFocussed=true};this.onDayButtonBlurHandler=()=>{this.dayButtonFocussed=false};this.getNextDayToFocus=(t,e,i=1)=>{const s=e?1:-1;const a=new Date(t);a.setDate(a.getDate()+s);const n=Number(a.getDay());if(this.disableDays.includes(n)){return this.getNextDayToFocus(a,e,i+1)}else{return i}};this.moveDays=t=>{const e=new Date(this.focussedDate);e.setDate(e.getDate()+t);this.setFocussedDate(e)};this.moveMonths=t=>{const e=this.focussedDate.getMonth()+t;const i=new Date(new Date(o(this.focussedDate)).setMonth(e));const s=h(i);const a=new Date(new Date(this.focussedDate).setMonth(e));this.setFocussedDate(u(a,i,s));if(this.monthPickerVisible===false&&this.yearPickerVisible===false&&this.monthInViewUpdateHandled===false){this.setAriaLiveRegionText(this.getMonthInViewText())}this.monthInViewUpdateHandled=false};this.moveYears=t=>{const e=this.focussedDate.getFullYear()+t;const i=new Date(new Date(o(this.focussedDate)).setFullYear(e));const s=h(i);const a=new Date(new Date(this.focussedDate).setFullYear(e));this.setFocussedDate(u(a,i,s));if(this.monthPickerVisible===false&&this.yearPickerVisible===false&&this.monthInViewUpdateHandled===false){this.setAriaLiveRegionText(this.getMonthInViewText())}this.monthInViewUpdateHandled=false};this.updateFocussedMonth=t=>{const e=new Date(this.focussedYear,this.focussedMonth,1);e.setMonth(this.focussedMonth+t);const i=u(e,this.minDate,this.maxDate);this.focussedMonth=i.getMonth();setTimeout((()=>this.focussedMonthEl.setFocus()),T)};this.updateFocussedYear=(t,e=true)=>{const i=new Date((new Date).setFullYear(this.focussedYear+t));const s=u(i,this.minDate,this.maxDate);this.setFocussedYear(s.getFullYear(),e)};this.setFocussedDate=t=>{this.focussedDate=u(t,this.minDate,this.maxDate)};this.setFocussedDayEl=t=>{this.focussedDayEl=t};this.setFocussedMonthEl=t=>{this.focussedMonthEl=t};this.setFocussedYearEl=t=>{this.focussedYearEl=t};this.setFocussedYear=(t,e=true)=>{const i=this.focussedYear;this.focussedYear=t;if(this.yearPickerVisible){const s=Math.floor(t/10)*10;const a=Math.floor(i/10)*10;if(s!==a){this.setDecadeView(s);this.setAriaLiveRegionText(this.getDecadeInViewText())}if(e){setTimeout((()=>{if(this.focussedYearEl!==null)this.focussedYearEl.setFocus()}),T)}}else{this.setDecadeView(Math.floor(t/10)*10)}};this.setDateInputProps=()=>{const t={hideLabel:this.hideLabel,invalidDateMessage:this.invalidDateMessage,label:this.label,showClearButton:true,showCalendarButton:true,value:this.value};if(this.dateFormat!==M){t.dateFormat=this.dateFormat}if(this.disableFuture){t.disableFuture=this.disableFuture;if(this.disableFutureMessage!==P){t.disableFutureMessage=this.disableFutureMessage}}if(this.disablePast){t.disablePast=this.disablePast;if(this.disablePastMessage!==V){t.disablePastMessage=this.disablePastMessage}}if(this.disableDays.length>0){t.disableDays=this.disableDays;if(this.disableDaysMessage!==L){t.disableDaysMessage=this.disableDaysMessage}}if(this.max!==null&&this.max!==""){t.max=this.maxDate}if(this.min!==null&&this.min!==""){t.min=this.minDate}if(this.helperText!==undefined){t.helperText=this.helperText}if(this.hideHelperText!==false){t.hideHelperText=this.hideHelperText}if(this.inputId!==undefined){t.inputId=this.inputId}if(this.name!==undefined){t.name=this.name}if(this.disabled){t.disabled=this.disabled}if(this.required){t.required=this.required}if(this.size!=="default"){t.size=this.size}if(this.validationStatus!==""){t.validationStatus=this.validationStatus}if(this.validationText!==""){t.validationText=this.validationText}return t};this.calendarOpen=false;this.currMonthView=[];this.currYearPickerView=[];this.decadeView=[];this.focussedDate=null;this.focussedDay=undefined;this.focussedDayEl=undefined;this.focussedMonth=undefined;this.focussedMonthEl=undefined;this.focussedYear=undefined;this.maxDate=null;this.minDate=null;this.monthInView=undefined;this.monthPickerVisible=false;this.orderedDaysOfWeek=[];this.selectedDate=null;this.yearInView=undefined;this.yearPickerVisible=false;this.dateFormat="DD/MM/YYYY";this.disabled=false;this.disableDays=[];this.disableDaysMessage="The date you have selected is on a day of the week that is not allowed. Please select another date.";this.disableFuture=false;this.disableFutureMessage="Dates in the future are not allowed. Please select a date in the past.";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.hideLabel=false;this.inputId=undefined;this.invalidDateMessage="Please enter a valid date.";this.label=undefined;this.max="";this.min="";this.name=undefined;this.openAtDate="";this.required=false;this.showDaysOutsideMonth=true;this.showPickerClearButton=true;this.showPickerTodayButton=true;this.size="default";this.startOfWeek=y.Monday;this.validationStatus="";this.validationText="";this.value=""}watchDisabledHandler(){w(this.disabled,this.el)}watchDisableFutureHandler(){this.watchMaxHandler()}watchDisablePastHandler(){this.watchMinHandler()}watchMaxHandler(){if(this.disableFuture){this.maxDate=new Date}else{this.maxDate=f(this.max,this.dateFormat)}}watchMinHandler(){if(this.disablePast){this.minDate=new Date}else{this.minDate=f(this.min,this.dateFormat)}}watchStartOfWeekHandler(){this.orderedDaysOfWeek=this.daysOfWeek.slice(this.startOfWeek).concat(this.daysOfWeek.slice(0,this.startOfWeek));if(this.calendarOpen){this.updateMonthInView()}}watchOpenHandler(){if(this.calendarOpen){if(this.inputEl){let t=C;if(this.size==="small"){t=I}else if(this.size==="large"){t=Y}if(this.el.offsetTop+this.inputEl.offsetHeight+t>window.innerHeight&&this.el.offsetTop>t){this.showPickerAbove=true}else{this.showPickerAbove=false}}if(this.selectedDate===null||!n(this.selectedDate,this.minDate,this.maxDate)){let t=new Date;if(this.openAtDate!==""){t=f(this.openAtDate,this.dateFormat)}this.setFocussedDate(t)}else{this.setFocussedDate(this.selectedDate)}let t=this.getMonthInViewText();if(this.selectedDate===null){t+=" No date selected."}t+=" Use arrow keys to change day. Press enter or space to select a date or press escape to close the picker";this.dialogDescription=t;setTimeout((()=>this.focusFocussedDay()),T);document.addEventListener("click",this.handleDocumentClick)}else{document.removeEventListener("click",this.handleDocumentClick);this.monthPickerVisible=false;this.yearPickerVisible=false}}watchFocussedDateHandler(t,e){if(e===null||!(e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth())){this.updateMonthInView()}}watchMonthInViewHandler(){this.focussedMonth=this.monthInView}watchYearInViewHandler(){this.setFocussedYear(this.yearInView,false)}watchYearPickerVisibleHandler(){if(!this.yearPickerVisible){this.setFocussedYear(this.yearInView)}}watchMonthPickerVisibleHandler(){if(!this.monthPickerVisible){this.focussedMonth=this.monthInView}}watchFocussedDayEl(){if(this.focusDay){setTimeout((()=>this.focusFocussedDay()),T)}this.focusDay=true}componentWillLoad(){g([{prop:this.label,propName:"label"}],"Date Picker");this.monthNames=b(m);this.daysOfWeek=b(v);this.watchStartOfWeekHandler();this.watchMaxHandler();this.watchMinHandler();w(this.disabled,this.el)}componentWillRender(){this.dateInputProps=this.setDateInputProps()}componentWillUpdate(){this.dateInputProps=this.setDateInputProps()}localCalendarButtonClickHandler(t){this.myCalendarButtonClicked=true;if(!this.calendarOpen){this.setSelectedDate(t.detail.value,false)}this.calendarOpen=!this.calendarOpen}calendarButtonClickHandler(){if(!this.myCalendarButtonClicked){this.calendarOpen=false}this.myCalendarButtonClicked=false}render(){const{calendarOpen:e,dateInputProps:i,monthNames:a,size:h,focussedMonth:o,focussedYear:r,monthInView:c,yearInView:d,monthPickerVisible:u,yearPickerVisible:f,orderedDaysOfWeek:b,decadeView:p,minDate:m,maxDate:y,showPickerClearButton:w,showPickerTodayButton:g,dialogDescription:v}=this;let k="";if(u){k=`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{k=`Press Enter or Space to open month picker view or use the arrow keys to change month.`}let H="";if(f){H=`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{H=`Press Enter or Space to open year picker view or use the arrow keys to change the selected year.`}const M="choose date";const P=a&&a[c]?a[c]:"Open month picker";const V=this.yearInView?this.yearInView:"Open year picker";let L=m;if(this.disablePast){const t=new Date(m);t.setDate(m.getDate()-1);L=t}return t(s,{onKeyDown:this.keyDownHandler,class:h},t("div",{class:"date-input-container"},t("ic-date-input",Object.assign({ref:t=>this.inputEl=t},i))),e&&t("div",null,t("span",{id:"dialog-description",class:"sr-only"},v),t("div",{role:"dialog","aria-modal":"true","aria-label":M,"aria-describedBy":"dialog-description",class:{"calendar-container":true,above:this.showPickerAbove},onMouseDown:this.handleCalendarMouseDown,onClick:this.handleCalendarClick},t("span",{ref:t=>this.liveRegionEl=t,id:"live-region","aria-live":"assertive",class:"sr-only"}),t("div",{class:{"month-year-nav-container":true}},t("div",{class:"month-year-nav"},this.previousMonthButton(),t("span",{id:"select-month-hint","aria-hidden":"true"},k),t("ic-button",{ref:t=>this.monthButtonEl=t,size:h,class:"month-picker-button","aria-haspopup":"menu","aria-expanded":u?"true":"false","full-width":"true",variant:"tertiary","aria-label":P,"aria-describedby":"select-month-hint",onKeyDown:this.monthButtonKeyDownHandler,onClick:this.monthButtonClickHandler},a[c]),this.nextMonthButton()),t("div",{class:"month-year-nav"},this.previousYearButton(),t("span",{id:"select-year-hint","aria-hidden":"true"},H),t("ic-button",{ref:t=>this.yearButtonEl=t,size:h,class:"year-picker-button","aria-haspopup":"menu","aria-expanded":f?"true":"false","full-width":"true",variant:"tertiary","aria-label":V,"aria-describedby":"select-year-hint",onKeyDown:this.yearButtonKeyDownHandler,onClick:this.yearButtonClickHandler},this.yearInView),this.nextYearButton())),!(u||f)&&t("div",{class:{calendar:true,hidden:u||f},onKeyDown:this.handleCalendarKeyDown},t("div",{class:"weekdays","aria-hidden":"true"},b.map((e=>{const i=h==="small"?e.charAt(0):e;return t("div",{class:"calendar-day-header"},t("ic-typography",{variant:"caption"},i))}))),t("div",{class:"calendar-days-container"},this.currMonthView.map((e=>t(x,{day:e,disableDay:this.disableDays.includes(Number(e.getDay())),today:l(e,this.today),selected:l(e,this.selectedDate),focussed:l(e,this.focussedDate),inRange:n(e,L,y),monthInView:c,onSelectDay:this.handleSelectDay,focussedDayRef:this.setFocussedDayEl,onFocusDay:this.onDayButtonFocusHandler,onBlurDay:this.onDayButtonBlurHandler,showDaysOutsideMonth:this.showDaysOutsideMonth}))))),t("div",{class:{"month-picker-container":true,hidden:!u}},u&&t(D,{size:h,onSelectMonth:this.handleSelectMonth,monthInView:c,focussedMonth:o,onKeyDown:this.monthPickerKeyDownHandler,focussedMonthRef:this.setFocussedMonthEl,minDate:m,maxDate:y,yearInView:d})),t("div",{class:{"year-picker-container":true,hidden:!f}},f&&t(z,{decadeView:p,size:h,focussedYear:r,onSelectYear:this.handleSelectYear,onKeyDown:this.yearPickerKeyDownHandler,onFocusYear:this.onYearButtonFocusHandler,onBlurYear:this.onYearButtonBlurHandler,yearInView:d,minDate:m,maxDate:y,focussedYearRef:this.setFocussedYearEl})),t("div",{class:{"bottom-buttons":true,"no-today":!g}},g&&t("ic-button",{id:"today-button",variant:"tertiary",ref:t=>this.todayButtonEl=t,size:h,"aria-label":"Navigate to current date",onClick:this.todayButtonClickHandler,onKeyDown:this.todayButtonKeyDownHandler,disabled:this.isCurrentMonth()},"Go to today"),w&&t("ic-button",{id:"clear-button","aria-label":"clear selected date",ref:t=>this.clearButtonEl=t,variant:"tertiary",size:h,onClick:this.clearButtonClickHandler,onKeyDown:this.clearButtonKeyDownHandler,disabled:this.value===""||this.value===null||this.value===undefined},"Clear")))))}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{disabled:["watchDisabledHandler"],disableFuture:["watchDisableFutureHandler"],disablePast:["watchDisablePastHandler"],max:["watchMaxHandler"],min:["watchMinHandler"],startOfWeek:["watchStartOfWeekHandler"],calendarOpen:["watchOpenHandler"],focussedDate:["watchFocussedDateHandler"],monthInView:["watchMonthInViewHandler"],yearInView:["watchYearInViewHandler"],yearPickerVisible:["watchYearPickerVisibleHandler"],monthPickerVisible:["watchMonthPickerVisibleHandler"],focussedDayEl:["watchFocussedDayEl"]}}};$.style=H;export{$ as ic_date_picker};
|
|
2
|
-
//# sourceMappingURL=p-4084bce2.entry.js.map
|