npm - @oiz/stzh-components - Versions diffs - 3.1.0 → 3.2.0-beta1 - Mend

@oiz/stzh-components 3.1.0 → 3.2.0-beta1

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.

Files changed (673) hide show

package/dist/components/stzh-cspace.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-cspace.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,k+tGAAk+tG;;MCkB3+tGA,YAAU;;;;IAoBb,SAAI,GAAG;MACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;QAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAC/B,4BAA4B;YAC5B,sKAAsK,CAC3K,CAAC;QAEF,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB;UAC9C,cAAc,CAAC,gBAAgB,EAAE;YAC/B,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;WAC2B,CAAC,CAAA;SACtD,CAAC,CAAC;OACJ;KACF,CAAA;;;+BA/B8E,QAAQ;;EAKvF,0BAA0B;IACxB,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EA0BD,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAGD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEd,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCspace"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n @include host;\n color: inherit;\n font-weight: inherit;\n font-family: inherit;\n letter-spacing: inherit;\n\n // Remove edge margin\n\n &[has-hidden-first-margin] > .stzh-cspace {\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > .section:first-child > :first-child {\n margin-top: 0 !important;\n }\n }\n\n &[has-hidden-last-margin] > .stzh-cspace {\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n & > .section:last-child > :last-child {\n margin-bottom: 0 !important;\n }\n }\n}\n\nstzh-cspace > .stzh-cspace {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n // display: flex;\n // flex-direction: column;\n // align-items: flex-start;\n\n & > .section > h1,\n & > h1,\n & > .section > :where(stzh-heading[level=\"1\"]),\n & > :where(stzh-heading[level=\"1\"]) {\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > h2,\n & > h2,\n & > .section > :where(stzh-heading[level=\"2\"]),\n & > :where(stzh-heading[level=\"2\"]) {\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > h3,\n & > h3,\n & > .section > :where(stzh-heading[level=\"3\"]),\n & > :where(stzh-heading[level=\"3\"]) {\n @include spaceCurve('margin-top', 'tiny');\n @include spaceCurve('margin-bottom', 'tiny');\n\n @include mq($from: large) {\n margin-top: space('xsmall');\n }\n }\n\n & > .section > h4,\n & > h4,\n & > .section > :where(stzh-heading[level=\"4\"]),\n & > :where(stzh-heading[level=\"4\"]) {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > p,\n & > p,\n & > .section > stzh-text,\n & > stzh-text,\n & > .section > ul,\n & > ul,\n & > .section > ol,\n & > ol,\n & > .section > dl,\n & > dl,\n & > .section > stzh-list,\n & > stzh-list {\n @include spaceCurve('margin-bottom', 'regular');\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"hero\"]),\n & > :where(stzh-text[curve=\"hero\"]),\n & > .section > :where(stzh-heading[curve=\"hero\"]),\n & > :where(stzh-heading[curve=\"hero\"]) {\n @include spaceCurve('margin-bottom', 'medium');\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"h1\"]),\n & > :where(stzh-text[curve=\"h1\"]),\n & > .section > :where(stzh-heading[curve=\"h1\"]),\n & > :where(stzh-heading[curve=\"h1\"]) {\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > :where(stzh-text[curve=\"h2\"]),\n & > :where(stzh-text[curve=\"h2\"]),\n & > .section > :where(stzh-heading[curve=\"h2\"]),\n & > :where(stzh-heading[curve=\"h2\"]) {\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n & > .section > :where(stzh-text[curve=\"h3\"]),\n & > :where(stzh-text[curve=\"h3\"]),\n & > .section > :where(stzh-heading[curve=\"h3\"]),\n & > :where(stzh-heading[curve=\"h3\"]) {\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > :where(stzh-text[curve=\"h4\"]),\n & > :where(stzh-text[curve=\"h4\"]),\n & > .section > :where(stzh-heading[curve=\"h4\"]),\n & > :where(stzh-heading[curve=\"h4\"]) {\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > :where(stzh-text[curve=\"p1\"]),\n & > :where(stzh-text[curve=\"p1\"]),\n & > .section > :where(stzh-heading[curve=\"p1\"]),\n & > :where(stzh-heading[curve=\"p1\"]) {\n @include spaceCurve('margin-bottom', 'regular');\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"p2\"]),\n & > :where(stzh-text[curve=\"p2\"]),\n & > .section > :where(stzh-heading[curve=\"p2\"]),\n & > :where(stzh-heading[curve=\"p2\"]) {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n & > .section > stzh-input, // DONE\n & > stzh-input, // DONE\n & > .section > stzh-datepicker, // DONE\n & > stzh-datepicker, // DONE\n & > .section > stzh-daterange, // DONE\n & > stzh-daterange, // DONE\n & > .section > stzh-dropdown, // DONE\n & > stzh-dropdown, // DONE\n & > .section > stzh-upload, // DONE\n & > stzh-upload, // DONE\n & > .section > stzh-checkbox, // DONE\n & > stzh-checkbox, // DONE\n & > .section > stzh-checkboxgroup, // DONE\n & > stzh-checkboxgroup, // DONE\n & > .section > stzh-radio, // DONE\n & > stzh-radio, // DONE\n & > .section > stzh-radiogroup, // DONE\n & > stzh-radiogroup { // DONE\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > stzh-chipgroup, // DONE\n & > stzh-chipgroup, // DONE\n & > .section > stzh-chipselect, // DONE\n & > stzh-chipselect { // DONE\n margin-bottom: space('xlarge');\n }\n\n & > .section > stzh-message, // DONE\n & > stzh-message { // DONE\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-cardlist, // DONE\n & > stzh-cardlist, // DONE\n & > .section > stzh-contact, // DONE\n & > stzh-contact, // DONE\n & > .section > stzh-accordion, // DONE\n & > stzh-accordion, // DONE\n & > .section > stzh-anchornav, // DONE\n & > stzh-anchornav, // DONE\n & > .section > stzh-audio, // DONE\n & > stzh-audio, // DONE\n & > .section > stzh-microsite-teaserlist,\n & > stzh-microsite-teaserlist,\n & > .section > stzh-gallery, // DONE\n & > stzh-gallery, // DONE\n & > .section > stzh-panorama,\n & > stzh-panorama,\n & > .section > stzh-chart,\n & > stzh-chart,\n & > .section > stzh-sitemap,\n & > stzh-sitemap,\n & > .section > stzh-hr,\n & > stzh-hr,\n & > .section > stzh-archivelist,\n & > stzh-archivelist,\n & > .section > stzh-figure, // DONE\n & > stzh-figure, // DONE\n & > stzh-iframe, // DONE\n & > .section > stzh-youtube, // DONE\n & > stzh-youtube, // DONE\n & > .section > stzh-vbz-ticker,\n & > stzh-vbz-ticker {\n @include spaceCurve('margin-bottom', 'large');\n }\n\n & > .section > stzh-eventinfo, // DONE\n & > stzh-eventinfo, // DONE\n & > .section > stzh-eventdata, // DONE\n & > stzh-eventdata, // DONE\n & > .section > stzh-datalist, // DONE\n & > stzh-datalist, // DONE\n & > .section > stzh-textandimage, // DONE\n & > stzh-textandimage { // DONE\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > stzh-section[variant=\"highlight\"], // DONE\n & > stzh-section[variant=\"highlight\"] { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-section[variant=\"contextbox\"], // DONE\n & > stzh-section[variant=\"contextbox\"] { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-section[variant=\"default\"], // DONE\n & > stzh-section[variant=\"default\"] { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-pagetitle[background=\"default\"], // DONE\n & > stzh-pagetitle[background=\"default\"] { // DONE\n @include spaceCurve('margin-bottom', 'section-inner');\n }\n\n & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n & > stzh-richtext[has-hidden-last-margin] { // DONE\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-cta, // DONE\n & > stzh-cta { // DONE\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'large');\n }\n\n & > .section > stzh-olmap,\n & > stzh-olmap {\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > stzh-breadcrumb, // DONE\n & > stzh-breadcrumb { // DONE\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-card,\n & > stzh-card {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-appointments,\n & > stzh-appointments {\n @include spaceCurve('margin-bottom', 'big');\n\n &[has-heading] {\n @include spaceCurve('margin-top', 'regular');\n }\n }\n\n & > .section > stzh-table, // DONE\n & > stzh-table, // DONE\n & > .section > stzh-datatable, // DONE\n & > stzh-datatable { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'large');\n }\n\n & > .section > stzh-pagebottom,\n & > stzh-pagebottom {\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > stzh-progressbar,\n & > stzh-progressbar {\n @include spaceCurve('margin-top', 'big');\n }\n\n & > .section > stzh-pagination, // DONE\n & > stzh-pagination { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'large');\n }\n\n & > .section > stzh-actions, // DONE\n & > stzh-actions { // DONE\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'big');\n }\n\n & > .section > stzh-saptcha, // DONE\n & > stzh-saptcha { // DONE\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > stzh-fieldset, // DONE\n & > stzh-fieldset { // DONE\n @include spaceCurve('margin-bottom', 'tiny');\n\n &[legend] {\n @include spaceCurve('margin-top', 'regular');\n }\n }\n\n // & > stzh-heading[level=\"4\"] + stzh-datalist,\n // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n // margin-top: 0;\n // }\n\n /* Utility classes for applying spacing curves /\n\n @each $spaceCurve, $value in $spaceCurves {\n $defaultSize: map-get($value, 'size');\n $breakpointSizes: map-get($value, 'sizes');\n\n & > .section > .cspace-y-curve-#{$spaceCurve},\n & > .cspace-y-curve-#{$spaceCurve} {\n @include spaceCurve('margin-top', $spaceCurve);\n @include spaceCurve('margin-bottom', $spaceCurve);\n }\n\n & > .section > .cspace-t-curve-#{$spaceCurve},\n & > .cspace-t-curve-#{$spaceCurve} {\n @include spaceCurve('margin-top', $spaceCurve);\n }\n\n & > .section > .cspace-b-curve-#{$spaceCurve},\n & > .cspace-b-curve-#{$spaceCurve} {\n @include spaceCurve('margin-bottom', $spaceCurve);\n }\n }\n\n / Utility classes for applying spacing values /\n\n @each $breakpoint, $size in $breakpoints {\n @each $space, $value in $spaceSizes {\n @if $breakpoint {\n & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n & > .#{$breakpoint}\\:cspace-y-#{$space} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n\n & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n & > .#{$breakpoint}\\:cspace-t-#{$space} {\n margin-top: #{$value};\n }\n\n & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n & > .#{$breakpoint}\\:cspace-b-#{$space} {\n margin-bottom: #{$value};\n }\n } @else {\n & > .section > .cspace-y-#{$space},\n & > .cspace-y-#{$space} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n\n & > .section > .cspace-t-#{$space},\n & > .cspace-t-#{$space} {\n margin-top: #{$value};\n }\n\n & > .section > .cspace-b-#{$space},\n & > .cspace-b-#{$space} {\n margin-bottom: #{$value};\n }\n }\n }\n }\n\n & > .section > .cspace-y-0,\n & > .cspace-y-0 {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n & > .section > .cspace-t-0,\n & > .cspace-t-0 {\n margin-top: 0;\n }\n\n & > .section > .cspace-b-0,\n & > .cspace-b-0 {\n margin-bottom: 0;\n }\n\n @each $breakpoint, $size in $breakpoints {\n & > .section > .#{$breakpoint}\\:cspace-y-0,\n & > .#{$breakpoint}\\:cspace-y-0 {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n & > .section > .#{$breakpoint}\\:cspace-t-0,\n & > .#{$breakpoint}\\:cspace-t-0 {\n margin-top: 0;\n }\n\n & > .section > .#{$breakpoint}\\:cspace-b-0,\n & > .#{$breakpoint}\\:cspace-b-0 {\n margin-bottom: 0;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot - Slot for any elements that should be vertically spaced\n /\n@Component({\n tag: \"stzh-cspace\",\n styleUrl: \"stzh-cspace.scss\"\n})\nexport class StzhCspace {\n /* Whether first top margin of first child component should be set to 0. /\n @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n /* Whether last bottom margin of last child component should be set to 0. /\n @Prop({ reflect: true }) removeLastMargin: boolean;\n\n /* Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n @Prop({ reflect: true }) preventRemoveNested: \"direct\" \| \"deep\" \| \"disabled\" = \"direct\";\n\n @Element() element: HTMLStzhCspaceElement;\n\n @Watch(\"preventRemoveNested\")\n preventRemoveNestedWatcher() {\n this.init();\n }\n\n private observer: MutationObserver;\n private rootElement: HTMLElement;\n\n private init = () => {\n if (!this.rootElement) {\n return;\n }\n\n if (this.preventRemoveNested !== \"disabled\") {\n const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n this.preventRemoveNested === \"deep\"\n ? \"stzh-cspace, stzh-richtext\"\n : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\"\n );\n\n nestedCspaceOrRichtext.forEach((cspaceOrRichtext) => { \n setPropsIfNull(cspaceOrRichtext, {\n removeFirstMargin: false,\n removeLastMargin: false,\n } as HTMLStzhCspaceElement \| HTMLStzhRichtextElement)\n });\n }\n }\n\n componentDidRender() {\n this.init();\n\n this.observer.observe(this.rootElement, {\n childList: true,\n subtree: true\n });\n }\n\n connectedCallback() {\n this.observer = new MutationObserver(this.init);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n\n render() {\n const classes = {\n \"stzh-cspace\": true\n };\n\n return (\n <Host\n has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n >\n <div\n ref={(el) => (this.rootElement = el as HTMLElement)}\n class={classes}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-cspace.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,mjyGAAmjyG;;MCkB5jyGA,YAAU;;;;IAoBb,SAAI,GAAG;MACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;QAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAC/B,4BAA4B;YAC5B,sKAAsK,CAC3K,CAAC;QAEF,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB;UAC9C,cAAc,CAAC,gBAAgB,EAAE;YAC/B,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;WAC2B,CAAC,CAAA;SACtD,CAAC,CAAC;OACJ;KACF,CAAA;;;+BA/B8E,QAAQ;;EAKvF,0BAA0B;IACxB,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EA0BD,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAGD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEd,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCspace"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n @include host;\n color: inherit;\n font-weight: inherit;\n font-family: inherit;\n letter-spacing: inherit;\n\n // Remove edge margin\n\n &[has-hidden-first-margin] > .stzh-cspace {\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > .section:first-child > :first-child {\n margin-top: 0 !important;\n }\n }\n\n &[has-hidden-last-margin] > .stzh-cspace {\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n & > .section:last-child > :last-child {\n margin-bottom: 0 !important;\n }\n }\n}\n\nstzh-cspace > .stzh-cspace {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n // display: flex;\n // flex-direction: column;\n // align-items: flex-start;\n\n & > .section > h1,\n & > h1,\n & > .section > :where(stzh-heading[level=\"1\"]),\n & > :where(stzh-heading[level=\"1\"]) {\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > h2,\n & > h2,\n & > .section > :where(stzh-heading[level=\"2\"]),\n & > :where(stzh-heading[level=\"2\"]) {\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > h3,\n & > h3,\n & > .section > :where(stzh-heading[level=\"3\"]),\n & > :where(stzh-heading[level=\"3\"]) {\n @include spaceCurve('margin-top', 'tiny');\n @include spaceCurve('margin-bottom', 'tiny');\n\n @include mq($from: large) {\n margin-top: space('xsmall');\n }\n }\n\n & > .section > h4,\n & > h4,\n & > .section > :where(stzh-heading[level=\"4\"]),\n & > :where(stzh-heading[level=\"4\"]) {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > p,\n & > p,\n & > .section > stzh-text,\n & > stzh-text,\n & > .section > ul,\n & > ul,\n & > .section > ol,\n & > ol,\n & > .section > dl,\n & > dl,\n & > .section > stzh-list,\n & > stzh-list {\n @include spaceCurve('margin-bottom', 'regular');\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"hero\"]),\n & > :where(stzh-text[curve=\"hero\"]),\n & > .section > :where(stzh-heading[curve=\"hero\"]),\n & > :where(stzh-heading[curve=\"hero\"]) {\n @include spaceCurve('margin-bottom', 'medium');\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"h1\"]),\n & > :where(stzh-text[curve=\"h1\"]),\n & > .section > :where(stzh-heading[curve=\"h1\"]),\n & > :where(stzh-heading[curve=\"h1\"]) {\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > :where(stzh-text[curve=\"h2\"]),\n & > :where(stzh-text[curve=\"h2\"]),\n & > .section > :where(stzh-heading[curve=\"h2\"]),\n & > :where(stzh-heading[curve=\"h2\"]) {\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n & > .section > :where(stzh-text[curve=\"h3\"]),\n & > :where(stzh-text[curve=\"h3\"]),\n & > .section > :where(stzh-heading[curve=\"h3\"]),\n & > :where(stzh-heading[curve=\"h3\"]) {\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > :where(stzh-text[curve=\"h4\"]),\n & > :where(stzh-text[curve=\"h4\"]),\n & > .section > :where(stzh-heading[curve=\"h4\"]),\n & > :where(stzh-heading[curve=\"h4\"]) {\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > :where(stzh-text[curve=\"p1\"]),\n & > :where(stzh-text[curve=\"p1\"]),\n & > .section > :where(stzh-heading[curve=\"p1\"]),\n & > :where(stzh-heading[curve=\"p1\"]) {\n @include spaceCurve('margin-bottom', 'regular');\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"p2\"]),\n & > :where(stzh-text[curve=\"p2\"]),\n & > .section > :where(stzh-heading[curve=\"p2\"]),\n & > :where(stzh-heading[curve=\"p2\"]) {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n & > .section > stzh-input, // DONE\n & > stzh-input, // DONE\n & > .section > stzh-datepicker, // DONE\n & > stzh-datepicker, // DONE\n & > .section > stzh-daterange, // DONE\n & > stzh-daterange, // DONE\n & > .section > stzh-dropdown, // DONE\n & > stzh-dropdown, // DONE\n & > .section > stzh-upload, // DONE\n & > stzh-upload, // DONE\n & > .section > stzh-checkbox, // DONE\n & > stzh-checkbox, // DONE\n & > .section > stzh-checkboxgroup, // DONE\n & > stzh-checkboxgroup, // DONE\n & > .section > stzh-radio, // DONE\n & > stzh-radio, // DONE\n & > .section > stzh-radiogroup, // DONE\n & > stzh-radiogroup { // DONE\n @include spaceCurve('margin-bottom', 'tiny');\n }\n\n & > .section > stzh-chipgroup, // DONE\n & > stzh-chipgroup, // DONE\n & > .section > stzh-chipselect, // DONE\n & > stzh-chipselect { // DONE\n margin-bottom: space('xlarge');\n }\n\n & > .section > stzh-message, // DONE\n & > stzh-message { // DONE\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-cardlist, // DONE\n & > stzh-cardlist, // DONE\n & > .section > stzh-contact, // DONE\n & > stzh-contact, // DONE\n & > .section > stzh-accordion, // DONE\n & > stzh-accordion, // DONE\n & > .section > stzh-anchornav, // DONE\n & > stzh-anchornav, // DONE\n & > .section > stzh-audio, // DONE\n & > stzh-audio, // DONE\n & > .section > stzh-microsite-teaserlist,\n & > stzh-microsite-teaserlist,\n & > .section > stzh-gallery, // DONE\n & > stzh-gallery, // DONE\n & > .section > stzh-panorama,\n & > stzh-panorama,\n & > .section > stzh-chart,\n & > stzh-chart,\n & > .section > stzh-sitemap,\n & > stzh-sitemap,\n & > .section > stzh-hr,\n & > stzh-hr,\n & > .section > stzh-archivelist,\n & > stzh-archivelist,\n & > .section > stzh-figure, // DONE\n & > stzh-figure, // DONE\n & > stzh-iframe, // DONE\n & > .section > stzh-youtube, // DONE\n & > stzh-youtube, // DONE\n & > .section > stzh-vbz-ticker,\n & > stzh-vbz-ticker {\n @include spaceCurve('margin-bottom', 'large');\n }\n\n & > .section > stzh-eventinfo, // DONE\n & > stzh-eventinfo, // DONE\n & > .section > stzh-eventdata, // DONE\n & > stzh-eventdata, // DONE\n & > .section > stzh-datalist, // DONE\n & > stzh-datalist, // DONE\n & > .section > stzh-textandimage, // DONE\n & > stzh-textandimage { // DONE\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > stzh-section[variant=\"highlight\"], // DONE\n & > stzh-section[variant=\"highlight\"] { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-section[variant=\"contextbox\"], // DONE\n & > stzh-section[variant=\"contextbox\"] { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-section[variant=\"default\"], // DONE\n & > stzh-section[variant=\"default\"] { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-section[variant=\"greybox\"], // DONE\n & > stzh-section[variant=\"default\"] { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-section[variant=\"poimax\"], // DONE\n & > stzh-section[variant=\"poimax\"] { // DONE\n @include spaceCurve('margin-top', 'regular');\n margin-bottom: space('xsmall');\n }\n\n & > .section > stzh-pagetitle[background=\"default\"], // DONE\n & > stzh-pagetitle[background=\"default\"] { // DONE\n @include spaceCurve('margin-bottom', 'section-inner');\n }\n\n & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n & > stzh-richtext[has-hidden-last-margin] { // DONE\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-cta, // DONE\n & > stzh-cta { // DONE\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'large');\n }\n\n & > .section > stzh-olmap,\n & > stzh-olmap {\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > stzh-breadcrumb, // DONE\n & > stzh-breadcrumb { // DONE\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-card,\n & > stzh-card {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n & > .section > stzh-appointments,\n & > stzh-appointments {\n @include spaceCurve('margin-bottom', 'big');\n\n &[has-heading] {\n @include spaceCurve('margin-top', 'regular');\n }\n }\n\n & > .section > stzh-table, // DONE\n & > stzh-table, // DONE\n & > .section > stzh-datatable, // DONE\n & > stzh-datatable { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'large');\n }\n\n & > .section > stzh-pagebottom,\n & > stzh-pagebottom {\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > stzh-progressbar,\n & > stzh-progressbar {\n @include spaceCurve('margin-top', 'big');\n }\n\n & > .section > stzh-pagination, // DONE\n & > stzh-pagination { // DONE\n @include spaceCurve('margin-top', 'regular');\n @include spaceCurve('margin-bottom', 'large');\n }\n\n & > .section > stzh-actions, // DONE\n & > stzh-actions { // DONE\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'big');\n }\n\n & > .section > stzh-saptcha, // DONE\n & > stzh-saptcha { // DONE\n @include spaceCurve('margin-bottom', 'medium');\n }\n\n & > .section > stzh-fieldset, // DONE\n & > stzh-fieldset { // DONE\n @include spaceCurve('margin-bottom', 'tiny');\n\n &[legend] {\n @include spaceCurve('margin-top', 'regular');\n }\n }\n\n // & > stzh-heading[level=\"4\"] + stzh-datalist,\n // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n // margin-top: 0;\n // }\n\n /* Utility classes for applying spacing curves /\n\n @each $spaceCurve, $value in $spaceCurves {\n $defaultSize: map-get($value, 'size');\n $breakpointSizes: map-get($value, 'sizes');\n\n & > .section > .cspace-y-curve-#{$spaceCurve},\n & > .cspace-y-curve-#{$spaceCurve} {\n @include spaceCurve('margin-top', $spaceCurve);\n @include spaceCurve('margin-bottom', $spaceCurve);\n }\n\n & > .section > .cspace-t-curve-#{$spaceCurve},\n & > .cspace-t-curve-#{$spaceCurve} {\n @include spaceCurve('margin-top', $spaceCurve);\n }\n\n & > .section > .cspace-b-curve-#{$spaceCurve},\n & > .cspace-b-curve-#{$spaceCurve} {\n @include spaceCurve('margin-bottom', $spaceCurve);\n }\n }\n\n / Utility classes for applying spacing values /\n\n @each $breakpoint, $size in $breakpoints {\n @each $space, $value in $spaceSizes {\n @if $breakpoint {\n & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n & > .#{$breakpoint}\\:cspace-y-#{$space} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n\n & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n & > .#{$breakpoint}\\:cspace-t-#{$space} {\n margin-top: #{$value};\n }\n\n & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n & > .#{$breakpoint}\\:cspace-b-#{$space} {\n margin-bottom: #{$value};\n }\n } @else {\n & > .section > .cspace-y-#{$space},\n & > .cspace-y-#{$space} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n\n & > .section > .cspace-t-#{$space},\n & > .cspace-t-#{$space} {\n margin-top: #{$value};\n }\n\n & > .section > .cspace-b-#{$space},\n & > .cspace-b-#{$space} {\n margin-bottom: #{$value};\n }\n }\n }\n }\n\n & > .section > .cspace-y-0,\n & > .cspace-y-0 {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n & > .section > .cspace-t-0,\n & > .cspace-t-0 {\n margin-top: 0;\n }\n\n & > .section > .cspace-b-0,\n & > .cspace-b-0 {\n margin-bottom: 0;\n }\n\n @each $breakpoint, $size in $breakpoints {\n & > .section > .#{$breakpoint}\\:cspace-y-0,\n & > .#{$breakpoint}\\:cspace-y-0 {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n & > .section > .#{$breakpoint}\\:cspace-t-0,\n & > .#{$breakpoint}\\:cspace-t-0 {\n margin-top: 0;\n }\n\n & > .section > .#{$breakpoint}\\:cspace-b-0,\n & > .#{$breakpoint}\\:cspace-b-0 {\n margin-bottom: 0;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Watch,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot - Slot for any elements that should be vertically spaced\n /\n@Component({\n tag: \"stzh-cspace\",\n styleUrl: \"stzh-cspace.scss\"\n})\nexport class StzhCspace {\n /* Whether first top margin of first child component should be set to 0. /\n @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n /* Whether last bottom margin of last child component should be set to 0. /\n @Prop({ reflect: true }) removeLastMargin: boolean;\n\n /* Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n @Prop({ reflect: true }) preventRemoveNested: \"direct\" \| \"deep\" \| \"disabled\" = \"direct\";\n\n @Element() element: HTMLStzhCspaceElement;\n\n @Watch(\"preventRemoveNested\")\n preventRemoveNestedWatcher() {\n this.init();\n }\n\n private observer: MutationObserver;\n private rootElement: HTMLElement;\n\n private init = () => {\n if (!this.rootElement) {\n return;\n }\n\n if (this.preventRemoveNested !== \"disabled\") {\n const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n this.preventRemoveNested === \"deep\"\n ? \"stzh-cspace, stzh-richtext\"\n : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\"\n );\n\n nestedCspaceOrRichtext.forEach((cspaceOrRichtext) => { \n setPropsIfNull(cspaceOrRichtext, {\n removeFirstMargin: false,\n removeLastMargin: false,\n } as HTMLStzhCspaceElement \| HTMLStzhRichtextElement)\n });\n }\n }\n\n componentDidRender() {\n this.init();\n\n this.observer.observe(this.rootElement, {\n childList: true,\n subtree: true\n });\n }\n\n connectedCallback() {\n this.observer = new MutationObserver(this.init);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n\n render() {\n const classes = {\n \"stzh-cspace\": true\n };\n\n return (\n <Host\n has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n >\n <div\n ref={(el) => (this.rootElement = el as HTMLElement)}\n class={classes}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-datepicker2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datepicker2.js","mappings":"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","names":[],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx"],"sourcesContent":[":host {\n --calendar-width: #{$calendarWidth};\n\n width: 100%;\n\n &[inline]:not([inline=\"false\"]) {\n width: var(--calendar-width);\n }\n}\n\n.stzh-datepicker {\n &__popover {\n --width: auto;\n }\n\n &__calendar {\n margin-left: auto;\n margin-right: auto;\n\n &.is-inline {\n width: 100%;\n margin-left: 0px;\n margin-right: 0px;\n }\n }\n\n &__actions {\n display: flex;\n width: var(--calendar-width);\n margin-left: auto;\n margin-right: auto;\n\n &.is-inline {\n width: 100%;\n margin-left: 0px;\n margin-right: 0px;\n }\n\n &:not(:empty) {\n padding-left: space('small');\n padding-right: space('small');\n }\n }\n\n /* Has action /\n\n &--has-action &__popover {\n --content-padding: 0 0 #{space('small')} 0;\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Element,\n h,\n Event,\n EventEmitter,\n Method,\n Watch,\n Fragment,\n State,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhCalendarChangeEvent,\n StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot action - Slot for action below calendar (stzh-link element)\n /\n@Component({\n tag: \"stzh-datepicker\",\n styleUrl: \"stzh-datepicker.scss\",\n scoped: true\n})\nexport class StzhDatepicker {\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @Prop() calendarMin: string = \"\"\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @Prop() calendarMax: string = \"\"\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n /\n @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n /* Name of the hidden date picker input. /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Value of hidden date picker input (current selected date in ISO format). /\n @Prop({ mutable: true }) value: string = \"\";\n @State() calendarValue: string = \"\";\n @State() inputValue: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Label for input field and popover /\n @Prop() label: string = \"\";\n\n /* Whether label is visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Show calendar inline /\n @Prop({ reflect: true }) inline: boolean = false;\n\n /\n Date adapter visible date shown to the user, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n /\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n /\n Date adapter for internal date passed to backend, for custom parsing/formatting.\n * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.)\n /\n @Prop() internalDateAdapter: \"iso\" \| \"legacy\" \| StzhLocaleAdapter = \"iso\";\n private _internalDateAdapter: StzhLocaleAdapter;\n\n /* Translation strings. /\n @Prop() localization: StzhDatepickerLocalizedText;\n\n @State() buttonLabel: string;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"localization\")\n createDateFormatters() {\n if (this.localization) {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n }\n\n /* Update calendar and input when value prop has changed /\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n if (!this._internalDateAdapter) {\n return;\n }\n\n const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n this.calendarValue = printISODate(date);\n this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n this.updateButtonAccessibleLabel();\n }\n\n @Watch(\"dateAdapter\")\n dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n if (!newValue) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n @Watch(\"internalDateAdapter\")\n internalDateAdapterWatcher(newValue: \"iso\" \| \"legacy\" \| StzhLocaleAdapter) {\n if (newValue === \"iso\" \|\| !newValue) {\n this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formatsIso,\n this.localization.$globals\n );\n } else if (newValue === \"legacy\") {\n this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formatsLegacy,\n this.localization.$globals\n );\n } else {\n this._internalDateAdapter = newValue;\n }\n }\n\n /* Set value by a JS Date object /\n @Method()\n async setDate(date: Date) {\n this.value = this._internalDateAdapter.format(date, \"dateInput\");\n }\n\n /* Return internal popover element /\n @Method()\n async getPopover(): Promise<HTMLStzhPopoverElement> {\n return this.popover;\n }\n\n /* Datepicker change event /\n @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n @Element() element: HTMLStzhDatepickerElement;\n\n /\n To format dates exclusively for the benefit of screen readers.\n \n We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatLong: Intl.DateTimeFormat\n\n private input: HTMLStzhInputElement;\n private popover: HTMLStzhPopoverElement;\n // private calendar: HTMLStzhCalendarElement;\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n }\n\n private onRootFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n }\n\n private onInputChanged = () => {\n const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n if (this.input.value === \"\" \|\| parsedDate) {\n const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n if (this.value !== formattedDate) {\n this.value = formattedDate;\n } else {\n this.valueWatcher(formattedDate);\n }\n\n this.stzhChange.emit({\n component: \"stzh-datepicker\",\n value: this.value,\n valueAsDate: parsedDate,\n })\n }\n }\n\n private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n if (event.detail.component !== \"stzh-calendar\") {\n return;\n }\n\n this.value = event.detail.valueAsDate\n && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n this.stzhChange.emit({\n component: \"stzh-datepicker\",\n value: this.value,\n valueAsDate: event.detail.valueAsDate,\n });\n\n if (this.popover) {\n this.popover.hide();\n }\n }\n\n private updateButtonAccessibleLabel() {\n if (!this.localization) {\n return;\n }\n\n try {\n const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n } catch (err) {\n this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n }\n }\n\n connectedCallback() {\n this.createDateFormatters();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n }\n\n this.dateAdapterWatcher(this.dateAdapter);\n this.internalDateAdapterWatcher(this.internalDateAdapter);\n this.valueWatcher(this.value);\n this.defaultValue = this.defaultValue \|\| this.value;\n }\n\n render() {\n const actionUsed = hasSlot(this.element, 'action');\n\n const classes = {\n \"stzh-datepicker\": true,\n \"stzh-datepicker--inline\": this.inline,\n \"stzh-datepicker--has-action\": actionUsed\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n />\n\n {this.inline &&\n <Fragment>\n <stzh-calendar\n // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n value={this.calendarValue}\n class=\"stzh-datepicker__calendar is-inline\"\n isDateDisabled={this.calendarIsDateDisabled}\n min={this.calendarMin}\n max={this.calendarMax}\n onStzhChange={this.onCalendarChange}\n ></stzh-calendar>\n <div class=\"stzh-datepicker__actions\">\n <slot name=\"action\"></slot>\n </div>\n </Fragment>\n }\n\n {!this.inline &&\n <stzh-input\n value={this.inputValue}\n label={this.label}\n labelHidden={this.labelHidden}\n ref={(el) => (this.input = el as HTMLStzhInputElement)}\n noAutocomplete\n onStzhChanged={this.onInputChanged}\n readonly={this.readonly}\n disabled={this.disabled}\n description={this.description}\n descriptionLong={this.descriptionLong}\n error={this.error}\n invalid={this.invalid}\n required={this.required}\n hideOptional={this.hideOptional}\n size={this.size}\n >\n <stzh-popover\n ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n class=\"stzh-datepicker__popover\"\n slot=\"button-right\"\n placement=\"bottom-end\"\n label={this.label}\n >\n <stzh-button\n icon-only\n icon=\"calendar\"\n size={this.size}\n disabled={this.disabled}\n a11yLabel={this.buttonLabel}\n ></stzh-button>\n <div slot=\"content\">\n <stzh-calendar\n // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n value={this.calendarValue}\n class=\"stzh-datepicker__calendar is-popover\"\n isDateDisabled={this.calendarIsDateDisabled}\n min={this.calendarMin}\n max={this.calendarMax}\n onStzhChange={this.onCalendarChange}\n >\n </stzh-calendar>\n <div class=\"stzh-datepicker__actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </stzh-popover>\n </stzh-input>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datepicker2.js","mappings":"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","names":[],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx"],"sourcesContent":[":host {\n --calendar-width: #{$calendarWidth};\n\n width: 100%;\n\n &[inline]:not([inline=\"false\"]) {\n width: var(--calendar-width);\n }\n}\n\n.stzh-datepicker {\n &__popover {\n --width: auto;\n }\n\n &__calendar {\n margin-left: auto;\n margin-right: auto;\n\n &.is-inline {\n width: 100%;\n margin-left: 0px;\n margin-right: 0px;\n }\n }\n\n &__actions {\n display: flex;\n width: var(--calendar-width);\n margin-left: auto;\n margin-right: auto;\n\n &.is-inline {\n width: 100%;\n margin-left: 0px;\n margin-right: 0px;\n }\n\n &:not(:empty) {\n padding-left: space('small');\n padding-right: space('small');\n }\n }\n\n /* Has action /\n\n &--has-action &__popover {\n --content-padding: 0 0 #{space('small')} 0;\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Element,\n h,\n Event,\n EventEmitter,\n Method,\n Watch,\n Fragment,\n State,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhCalendarChangeEvent,\n StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot action - Slot for action below calendar (stzh-link element)\n /\n@Component({\n tag: \"stzh-datepicker\",\n styleUrl: \"stzh-datepicker.scss\",\n scoped: true\n})\nexport class StzhDatepicker {\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @Prop() calendarMin: string = \"\"\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @Prop() calendarMax: string = \"\"\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n /\n @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n /* Name of the hidden date picker input. /\n @Prop({ reflect: true }) name: string = \"\";\n\n /* Value of the hidden date picker input. If a date can be parsed (via picker always), the value is in ISO format. Otherwise the value equals the manual input. /\n @Prop({ mutable: true }) value: string = \"\";\n @State() calendarValue: string = \"\";\n @State() inputValue: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Label for input field and popover /\n @Prop() label: string = \"\";\n\n /* Whether label is visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Show calendar inline /\n @Prop({ reflect: true }) inline: boolean = false;\n\n /\n Date adapter visible date shown to the user, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n /\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n /\n Date adapter for internal date passed to backend, for custom parsing/formatting.\n * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.)\n /\n @Prop() internalDateAdapter: \"iso\" \| \"legacy\" \| StzhLocaleAdapter = \"iso\";\n private _internalDateAdapter: StzhLocaleAdapter;\n\n /* Translation strings. /\n @Prop() localization: StzhDatepickerLocalizedText;\n\n @State() buttonLabel: string;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"localization\")\n createDateFormatters() {\n if (this.localization) {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n }\n\n /* Update calendar and input when value prop has changed /\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n if (!this._internalDateAdapter) {\n return;\n }\n\n const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n this.calendarValue = printISODate(date);\n this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n this.updateButtonAccessibleLabel();\n }\n\n @Watch(\"dateAdapter\")\n dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n if (!newValue) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n @Watch(\"internalDateAdapter\")\n internalDateAdapterWatcher(newValue: \"iso\" \| \"legacy\" \| StzhLocaleAdapter) {\n if (newValue === \"iso\" \|\| !newValue) {\n this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formatsIso,\n this.localization.$globals\n );\n } else if (newValue === \"legacy\") {\n this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formatsLegacy,\n this.localization.$globals\n );\n } else {\n this._internalDateAdapter = newValue;\n }\n }\n\n /* Set value by a JS Date object /\n @Method()\n async setDate(date: Date) {\n this.value = this._internalDateAdapter.format(date, \"dateInput\");\n }\n\n /* Return internal popover element /\n @Method()\n async getPopover(): Promise<HTMLStzhPopoverElement> {\n return this.popover;\n }\n\n /* Datepicker change event /\n @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n @Element() element: HTMLStzhDatepickerElement;\n\n /\n To format dates exclusively for the benefit of screen readers.\n \n We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatLong: Intl.DateTimeFormat\n\n private input: HTMLStzhInputElement;\n private popover: HTMLStzhPopoverElement;\n // private calendar: HTMLStzhCalendarElement;\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n }\n\n private onRootFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n }\n\n private onInputChanged = () => {\n const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n if (this.input.value === \"\" \|\| parsedDate) {\n const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n if (this.value !== formattedDate) {\n this.value = formattedDate;\n } else {\n this.valueWatcher(formattedDate);\n }\n\n this.stzhChange.emit({\n component: \"stzh-datepicker\",\n value: this.value,\n valueAsDate: parsedDate,\n })\n }\n }\n\n private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n if (event.detail.component !== \"stzh-calendar\") {\n return;\n }\n\n this.value = event.detail.valueAsDate\n && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n this.stzhChange.emit({\n component: \"stzh-datepicker\",\n value: this.value,\n valueAsDate: event.detail.valueAsDate,\n });\n\n if (this.popover) {\n this.popover.hide();\n }\n }\n\n private updateButtonAccessibleLabel() {\n if (!this.localization) {\n return;\n }\n\n try {\n const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n } catch (err) {\n this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n }\n }\n\n connectedCallback() {\n this.createDateFormatters();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n }\n\n this.dateAdapterWatcher(this.dateAdapter);\n this.internalDateAdapterWatcher(this.internalDateAdapter);\n this.valueWatcher(this.value);\n this.defaultValue = this.defaultValue \|\| this.value;\n }\n\n render() {\n const actionUsed = hasSlot(this.element, 'action');\n\n const classes = {\n \"stzh-datepicker\": true,\n \"stzh-datepicker--inline\": this.inline,\n \"stzh-datepicker--has-action\": actionUsed\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n />\n\n {this.inline &&\n <Fragment>\n <stzh-calendar\n // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n value={this.calendarValue}\n class=\"stzh-datepicker__calendar is-inline\"\n isDateDisabled={this.calendarIsDateDisabled}\n min={this.calendarMin}\n max={this.calendarMax}\n onStzhChange={this.onCalendarChange}\n ></stzh-calendar>\n <div class=\"stzh-datepicker__actions\">\n <slot name=\"action\"></slot>\n </div>\n </Fragment>\n }\n\n {!this.inline &&\n <stzh-input\n value={this.inputValue}\n label={this.label}\n labelHidden={this.labelHidden}\n ref={(el) => (this.input = el as HTMLStzhInputElement)}\n noAutocomplete\n onStzhChanged={this.onInputChanged}\n readonly={this.readonly}\n disabled={this.disabled}\n description={this.description}\n descriptionLong={this.descriptionLong}\n error={this.error}\n invalid={this.invalid}\n required={this.required}\n hideOptional={this.hideOptional}\n size={this.size}\n >\n <stzh-popover\n ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n class=\"stzh-datepicker__popover\"\n slot=\"button-right\"\n placement=\"bottom-end\"\n label={this.label}\n >\n <stzh-button\n icon-only\n icon=\"calendar\"\n size={this.size}\n disabled={this.disabled}\n a11yLabel={this.buttonLabel}\n ></stzh-button>\n <div slot=\"content\">\n <stzh-calendar\n // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n value={this.calendarValue}\n class=\"stzh-datepicker__calendar is-popover\"\n isDateDisabled={this.calendarIsDateDisabled}\n min={this.calendarMin}\n max={this.calendarMax}\n onStzhChange={this.onCalendarChange}\n >\n </stzh-calendar>\n <div class=\"stzh-datepicker__actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </stzh-popover>\n </stzh-input>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-dialog.js CHANGED Viewed

@@ -1,229 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { s as setPropsIfNull } from './utils.js';
-import { c as createBaseFocusTrapOptions } from './overlay-utils.js';
-import { c as createFocusTrap } from './focus-trap.esm.js';
-import { d as defineCustomElement$5 } from './stzh-badge2.js';
-import { d as defineCustomElement$4 } from './stzh-button2.js';
-import { d as defineCustomElement$3 } from './stzh-heading2.js';
-import { d as defineCustomElement$2 } from './stzh-icon2.js';
-const stzhDialogCss = ".sc-stzh-dialog-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-dialog-h{display:none}.sc-stzh-dialog-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-dialog-h .has-focus.sc-stzh-dialog{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog{outline-style:none !important}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog::-moz-focus-inner{border:0 !important}.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge);--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--width:100%;--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--width:38.125rem}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:54.125rem}}@media screen and (min-width: 1600px){.sc-stzh-dialog-h{--width:55.5rem}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 900px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:flex;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:var(--width);max-width:100%;box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0px;left:0px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-medium);padding-top:var(--padding-top);padding-left:var(--padding-left);padding-right:var(--padding-right)}@media screen and (min-width: 600px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xlarge);overflow:auto;flex-grow:1}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__actions.sc-stzh-dialog:not(:empty){padding-top:var(--stzh-space-medium);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}.stzh-dialog--is-open.sc-stzh-dialog{display:flex}";
-const CLASS_BODY_OPEN = "stzh-dialog-open";
-let activeDialog = null;
-let dialogCounter = 0;
-const StzhDialog$1 = /*@__PURE__*/ proxyCustomElement(class StzhDialog extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhOpen = createEvent(this, "stzhOpen", 7);
-    this.stzhClose = createEvent(this, "stzhClose", 7);
-    this.handleDialogClick = (event) => {
-      const target = event.target;
-      if (target.dataset.stzhDialogClose) {
-        this.hide();
-      }
-      else {
-        const closest = target.closest("[data-stzh-dialog-close]");
-        if (closest) {
-          this.hide();
-        }
-      }
-    };
-    this.handleCloseButtonClick = () => {
-      this.hide();
-    };
-    this.init = () => {
-      const actions = this.element.querySelector('stzh-actions[slot="actions"]');
-      if (actions) {
-        setPropsIfNull(actions, {
-          variant: "dialog"
-        });
-      }
-    };
-    this.localization = undefined;
-    this.closeOnEscapeKey = false;
-    this.closeOnBackdropClick = false;
-    this.open = false;
-    this.stay = true;
-    this.size = "default";
-    this.hideClose = false;
-    this.heading = "";
-    this.a11yRole = "alertdialog";
-    this.a11yLabel = "";
-    this.closeAnalyticsId = undefined;
-  }
-  handleOutsideClick(event) {
-    if (!this.open || !this.closeOnBackdropClick) {
-      return;
-    }
-    const isClickOutside = event.target !== this.dialogElement
-      && this.dialogElement.contains(event.target) === false;
-    if (isClickOutside) {
-      this.hide();
-    }
-  }
-  handleKeydown(event) {
-    if (event.key === "Escape"
-      && activeDialog === this
-      && this.closeOnEscapeKey) {
-      this.hide();
-    }
-  }
-  handleOpenTriggerClick(event) {
-    const target = event.target;
-    if (target.dataset.stzhDialogTrigger === this.element.id) {
-      this.show();
-    }
-    else {
-      const closest = target.closest("[data-stzh-dialog-trigger]");
-      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {
-        this.show();
-      }
-    }
-  }
-  async show() {
-    this.open = true;
-    this.stzhOpen.emit({
-      component: "stzh-dialog"
-    });
-  }
-  async hide() {
-    this.open = false;
-    this.stzhClose.emit({
-      component: "stzh-dialog"
-    });
-  }
-  getSiblings() {
-    if (!this.parentElement) {
-      return [];
-    }
-    return Array.from(this.parentElement.children).filter((child) => child !== this.element);
-  }
-  disableSiblings() {
-    this.getSiblings().forEach((sibling) => {
-      sibling.setAttribute("aria-hidden", "true");
-    });
-  }
-  enableSiblings() {
-    this.getSiblings().forEach((sibling) => {
-      sibling.removeAttribute("aria-hidden");
-    });
-  }
-  dialogShown() {
-    activeDialog = this;
-    document.body.classList.add(CLASS_BODY_OPEN);
-    this.disableSiblings();
-    if (this.trap) {
-      this.trap.activate();
-    }
-  }
-  dialogHidden() {
-    document.body.classList.remove(CLASS_BODY_OPEN);
-    this.enableSiblings();
-    if (this.trap) {
-      this.trap.deactivate();
-    }
-    activeDialog = null;
-  }
-  async componentWillLoad() {
-    this.id = `stzh-dialog-${dialogCounter}`;
-    dialogCounter++;
-    if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "dialog");
-    }
-  }
-  componentDidRender() {
-    this.open ? this.dialogShown() : this.dialogHidden();
-  }
-  componentDidUpdate() {
-    this.trap.updateContainerElements(this.element);
-  }
-  componentDidLoad() {
-    this.trap = createFocusTrap(this.element, Object.assign({ fallbackFocus: this.dialogElement }, createBaseFocusTrapOptions()));
-    if (this.open) {
-      this.dialogShown();
-    }
-  }
-  connectedCallback() {
-    if (!this.stay && this.element.parentElement !== document.body) {
-      document.body.appendChild(this.element);
-    }
-    this.parentElement = this.element.parentElement;
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.dialogHidden();
-    if (this.observer) {
-      this.observer.disconnect();
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        "stzh-dialog": true,
-        "stzh-dialog--is-open": this.open,
-        "stzh-dialog--has-heading": !!this.heading,
-        "stzh-dialog--has-close-hidden": this.hideClose,
-        [`stzh-dialog--size-${this.size}`]: !!this.size,
-      } }, h("div", { class: "stzh-dialog__backdrop" }), h("div", { class: "stzh-dialog__content" }, h("div", { class: "stzh-dialog__dialog", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: this.a11yRole, "aria-label": this.a11yLabel || null, "aria-labelledby": this.heading ? `${this.id}-heading` : null, "aria-hidden": this.open ? "false" : "true", onClick: this.handleDialogClick }, this.heading &&
-      h("stzh-heading", { id: `${this.id}-heading`, class: "stzh-dialog__heading", level: "2" }, this.heading), h("div", { class: "stzh-dialog__dialog-content" }, h("slot", null)), h("div", { class: "stzh-dialog__actions" }, h("slot", { name: "actions" })), !this.hideClose &&
-      h("stzh-button", { class: "stzh-dialog__close-button", variant: "tertiary", size: "small", icon: "close", iconOnly: true, onClick: this.handleCloseButtonClick, a11yLabel: this.localization.close, analyticsId: this.closeAnalyticsId || this.localization.close }))))));
-  }
-  get element() { return this; }
-  static get style() { return stzhDialogCss; }
-}, [6, "stzh-dialog", {
-    "localization": [16],
-    "closeOnEscapeKey": [4, "close-on-escape-key"],
-    "closeOnBackdropClick": [4, "close-on-backdrop-click"],
-    "open": [1028],
-    "stay": [4],
-    "size": [513],
-    "hideClose": [4, "hide-close"],
-    "heading": [1],
-    "a11yRole": [1, "a11y-role"],
-    "a11yLabel": [1, "a11y-label"],
-    "closeAnalyticsId": [1, "close-analytics-id"],
-    "show": [64],
-    "hide": [64]
-  }, [[6, "click", "handleOutsideClick"], [4, "keydown", "handleKeydown"], [4, "click", "handleOpenTriggerClick"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-dialog", "stzh-badge", "stzh-button", "stzh-heading", "stzh-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-dialog":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhDialog$1);
-      }
-      break;
-    case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "stzh-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "stzh-heading":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { S as StzhDialog$1, d as defineCustomElement$1 } from './stzh-dialog2.js';
 const StzhDialog = StzhDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-dialog.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,s7KAAs7K;;ACwB58K,MAAM,eAAe,GAAG,kBAAkB,CAAC;AAE3C,IAAI,YAAY,GAAe,IAAI,CAAC;AACpC,IAAI,aAAa,GAAG,CAAC,CAAC;MAUTA,YAAU;;;;;;IA4Gb,sBAAiB,GAAG,CAAC,KAAiB;MAC5C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;MAC3C,IAAI,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE;QAClC,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;WAAM;QACL,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;QAE3D,IAAI,OAAO,EAAE;UACX,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;OACF;KACF,CAAA;IAEO,2BAAsB,GAAG;MAC/B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb,CAAA;IAEO,SAAI,GAAG;MACb,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,8BAA8B,CAAC,CAAC;MAE3E,IAAI,OAAO,EAAE;QACX,cAAc,CAAC,OAAO,EAAE;UACtB,OAAO,EAAE,QAAQ;SACQ,CAAC,CAAA;OAC7B;KACF,CAAA;;4BAhImC,KAAK;gCAGD,KAAK;gBAGJ,KAAK;gBAGtB,IAAI;gBAGyB,SAAS;qBAGjC,KAAK;mBAGR,EAAE;oBAG2C,aAAa;qBAG7B,EAAE;;;EAkBzD,kBAAkB,CAAC,KAAiB;IAClC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;MAC5C,OAAM;KACP;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa;SACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,KAAK,KAAK,CAAA;IAEvE,IAAI,cAAc,EAAE;MAClB,IAAI,CAAC,IAAI,EAAE,CAAA;KACZ;GACF;EAGD,aAAa,CAAC,KAAoB;IAChC,IACE,KAAK,CAAC,GAAG,KAAK,QAAQ;SACnB,YAAY,KAAK,IAAI;SACrB,IAAI,CAAC,gBAAgB,EACxB;MACA,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;GACF;EAGD,sBAAsB,CAAC,KAAiB;IACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;IAE3C,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE;MACxD,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;SAAM;MACL,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,4BAA4B,CAAgB,CAAC;MAE5E,IAAI,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,iBAAiB,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE;QACpE,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF;GACF;EAGD,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;MACjB,SAAS,EAAE,aAAa;KACzB,CAAC,CAAC;GACJ;EAGD,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,SAAS,EAAE,aAAa;KACzB,CAAC,CAAC;GACJ;EAmCO,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MACvB,OAAO,EAAE,CAAC;KACX;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,MAAM,CACnD,CAAC,KAAK,KAAK,KAAK,KAAK,IAAI,CAAC,OAAO,CAClC,CAAC;GACH;EAEO,eAAe;IACrB,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAC,OAAO;MACjC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KAC7C,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,CAAC,OAAO;MACjC,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;KACxC,CAAC,CAAC;GACJ;EAEO,WAAW;IACjB,YAAY,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;IAEvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;KACtB;GACF;EAEO,YAAY;IAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;IAChD,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;KACxB;IAED,YAAY,GAAG,IAAI,CAAC;GACrB;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,EAAE,GAAG,eAAe,aAAa,EAAE,CAAC;IACzC,aAAa,EAAE,CAAC;IAEhB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;GACtD;EAED,kBAAkB;IAChB,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACjD;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,kBACtC,aAAa,EAAE,IAAI,CAAC,aAAa,IAC9B,0BAA0B,EAAE,EAC/B,CAAC;IAEH,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;MAC9D,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACzC;IAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;IAEhD,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,YAAY,EAAE,CAAC;IAEpB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,sBAAsB,EAAE,IAAI,CAAC,IAAI;QACjC,0BAA0B,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;QAC1C,+BAA+B,EAAE,IAAI,CAAC,SAAS;QAC/C,CAAC,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;OAChD,IAED,WAAK,KAAK,EAAC,uBAAuB,GAAO,EACzC,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WACE,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAoB,CAAC,EACxD,QAAQ,EAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,QAAQ,gBACP,IAAI,CAAC,SAAS,IAAI,IAAI,qBACjB,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,iBAC9C,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EACzC,OAAO,EAAE,IAAI,CAAC,iBAAiB,IAE9B,IAAI,CAAC,OAAO;MACX,oBACE,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,UAAU,EACxB,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAC,GAAG,IAER,IAAI,CAAC,OAAO,CACA,EAGjB,WAAK,KAAK,EAAC,6BAA6B,IACtC,eAAa,CACT,EAEN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EAEL,CAAC,IAAI,CAAC,SAAS;MACd,mBACE,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAClC,WAAW,EAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,GAChD,CAEb,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhDialog"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/*\n @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n \n @prop --stzh-dialog-backdrop-opacity: Global: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: Global: Background color of backdrops\n /\n\n:host {\n @include spaceCurve('--padding-top', 'large');\n @include spaceCurve('--padding-bottom', 'large');\n @include spaceCurve('--padding-left', 'medium');\n @include spaceCurve('--padding-right', 'medium');\n --width: 100%;\n --backdrop-opacity: #{$dialogBackdropOpacity};\n --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n @include mq($from: small) {\n --width: 536px;\n }\n\n @include mq($from: medium) {\n --width: 610px; // 786 before\n }\n\n @include mq($from: large) {\n --width: 866px; // 832 before\n }\n\n @include mq($from: ultra) {\n --width: 888px;\n }\n\n &[size=\"small\"] {\n @include mq($from: small) {\n --width: 395px;\n }\n\n @include mq($from: medium) {\n --width: 460px;\n }\n\n @include mq($from: large) {\n --width: 512px;\n }\n }\n}\n\n.stzh-dialog {\n z-index: $zIndexDialog;\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: stretch;\n justify-content: stretch;\n\n &__content {\n z-index: 2;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n flex-grow: 1;\n overflow: auto;\n }\n\n &__dialog {\n position: relative;\n display: flex;\n flex-direction: column;\n margin: auto;\n border: none;\n background-color: $colorWhite;\n width: var(--width);\n max-width: 100%;\n box-shadow: $boxShadowOverlay;\n height: 100vh;\n max-height: 100vh;\n // overflow: visible;\n overflow: hidden;\n outline: none;\n\n @include mq($from: small) {\n height: auto;\n }\n }\n\n &__backdrop {\n z-index: 1;\n\t\tposition: absolute;\n\t\ttop: 0px;\n\t\tleft: 0px;\n\t\twidth: 100%;\n height: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\ttext-align: center;\n background-color: var(--backdrop-background-color);\n opacity: var(--backdrop-opacity);\n }\n\n &__heading {\n @include spaceCurve('padding-bottom', 'regular');\n padding-top: var(--padding-top);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n }\n\n &__dialog-content {\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n @include spaceCurve('padding-top', 'medium');\n @include spaceCurve('padding-bottom', 'medium');\n overflow: auto;\n flex-grow: 1;\n }\n\n &__actions {\n &:not(:empty) {\n padding-top: space('medium');\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n }\n }\n\n &__close-button {\n position: absolute;\n top: space('xsmall');\n right: space('xsmall');\n\n @include mq($from: medium) {\n top: space('large');\n right: space('large');\n }\n }\n\n &--is-open {\n display: flex;\n }\n}\n","import {\n Host,\n Component,\n Element,\n Method,\n Listen,\n Prop,\n Event,\n EventEmitter,\n h,\n} from \"@stencil/core\";\n\nimport {\n StzhDialogOpenEvent,\n StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/\n @slot - Slot for any content inside the dialog\n /\n@Component({\n tag: \"stzh-dialog\",\n styleUrl: \"stzh-dialog.scss\",\n scoped: true\n})\nexport class StzhDialog {\n /* Translation strings /\n @Prop() localization: StzhDialogLocalizedText;\n\n /* Close dialog when pressing ESC /\n @Prop() closeOnEscapeKey: boolean = false;\n\n /* Close dialog when clicking outside of it /\n @Prop() closeOnBackdropClick: boolean = false;\n\n /* Open status /\n @Prop({ mutable: true }) open: boolean = false;\n\n /* Stay in original position (true) or move to body (false) /\n @Prop() stay: boolean = true;\n\n /* Size /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Whether to hide close button /\n @Prop() hideClose: boolean = false;\n\n /* Heading text /\n @Prop() heading: string = \"\";\n\n /* Accessibility role /\n @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" \| \"alertdialog\" = \"alertdialog\";\n\n /* Accessible label for dialog (use if no heading is used) /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the close button element.\n * Default value will be taken from translations.\n /\n @Prop() closeAnalyticsId: string;\n\n /* Dialog open event /\n @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n /* Dialog close event */\n @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n @Element() element: HTMLStzhDialogElement;\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.open \|\| !this.closeOnBackdropClick) {\n return\n }\n\n const isClickOutside = event.target !== this.dialogElement\n && this.dialogElement.contains(event.target as HTMLElement) === false\n\n if (isClickOutside) {\n this.hide()\n }\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeydown(event: KeyboardEvent) {\n if (\n event.key === \"Escape\"\n && activeDialog === this\n && this.closeOnEscapeKey\n ) {\n this.hide();\n }\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleOpenTriggerClick(event: MouseEvent) {\n const target = event.target as HTMLElement;\n\n if (target.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n this.show();\n }\n }\n }\n\n @Method()\n async show() {\n this.open = true;\n this.stzhOpen.emit({\n component: \"stzh-dialog\"\n });\n }\n\n @Method()\n async hide() {\n this.open = false;\n this.stzhClose.emit({\n component: \"stzh-dialog\"\n });\n }\n\n private observer: MutationObserver;\n private id: string;\n private trap: FocusTrap;\n private parentElement: HTMLElement;\n private dialogElement: HTMLDivElement;\n\n private handleDialogClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n if (target.dataset.stzhDialogClose) {\n this.hide();\n } else {\n const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n if (closest) {\n this.hide();\n }\n }\n }\n\n private handleCloseButtonClick = () => {\n this.hide();\n }\n\n private init = () => {\n const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n if (actions) {\n setPropsIfNull(actions, {\n variant: \"dialog\"\n } as HTMLStzhActionsElement)\n }\n }\n\n private getSiblings() {\n if (!this.parentElement) {\n return [];\n }\n\n return Array.from(this.parentElement.children).filter(\n (child) => child !== this.element\n );\n }\n\n private disableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.setAttribute(\"aria-hidden\", \"true\");\n });\n }\n\n private enableSiblings() {\n this.getSiblings().forEach((sibling) => {\n sibling.removeAttribute(\"aria-hidden\");\n });\n }\n\n private dialogShown() {\n activeDialog = this;\n document.body.classList.add(CLASS_BODY_OPEN);\n this.disableSiblings();\n\n if (this.trap) {\n this.trap.activate();\n }\n }\n\n private dialogHidden() {\n document.body.classList.remove(CLASS_BODY_OPEN);\n this.enableSiblings();\n\n if (this.trap) {\n this.trap.deactivate();\n }\n\n activeDialog = null;\n }\n\n async componentWillLoad() {\n this.id = `stzh-dialog-${dialogCounter}`;\n dialogCounter++;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n }\n }\n\n componentDidRender() {\n this.open ? this.dialogShown() : this.dialogHidden();\n }\n\n componentDidUpdate() {\n this.trap.updateContainerElements(this.element);\n }\n\n componentDidLoad() {\n this.trap = createFocusTrap(this.element, {\n fallbackFocus: this.dialogElement,\n ...createBaseFocusTrapOptions()\n });\n\n if (this.open) {\n this.dialogShown();\n }\n }\n\n connectedCallback() {\n if (!this.stay && this.element.parentElement !== document.body) {\n document.body.appendChild(this.element);\n }\n\n this.parentElement = this.element.parentElement;\n\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n this.dialogHidden();\n\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-dialog\": true,\n \"stzh-dialog--is-open\": this.open,\n \"stzh-dialog--has-heading\": !!this.heading,\n \"stzh-dialog--has-close-hidden\": this.hideClose,\n [`stzh-dialog--size-${this.size}`]: !!this.size,\n }}\n >\n <div class=\"stzh-dialog__backdrop\"></div>\n <div class=\"stzh-dialog__content\">\n <div\n class=\"stzh-dialog__dialog\"\n ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n tabindex=\"-1\"\n role={this.a11yRole}\n aria-label={this.a11yLabel \|\| null}\n aria-labelledby={this.heading ? `${this.id}-heading` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onClick={this.handleDialogClick}\n >\n {this.heading &&\n <stzh-heading\n id={`${this.id}-heading`}\n class=\"stzh-dialog__heading\"\n level=\"2\"\n >\n {this.heading}\n </stzh-heading>\n }\n\n <div class=\"stzh-dialog__dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"stzh-dialog__actions\">\n <slot name=\"actions\"></slot>\n </div>\n\n {!this.hideClose &&\n <stzh-button\n class=\"stzh-dialog__close-button\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"close\"\n iconOnly={true}\n onClick={this.handleCloseButtonClick}\n a11yLabel={this.localization.close}\n analyticsId={this.closeAnalyticsId \|\| this.localization.close}\n ></stzh-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"stzh-dialog.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}