@oiz/stzh-components 2.11.0-beta1 → 2.11.1

package/dist/esm-es5/stzh-ghettobox.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,o,e,r){function s(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,a){function h(t){try{i(r.next(t))}catch(t){a(t)}}function n(t){try{i(r["throw"](t))}catch(t){a(t)}}function i(t){t.done?e(t.value):s(t.value).then(h,n)}i((r=r.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,s,a,h;return h={next:n(0),throw:n(1),return:n(2)},typeof Symbol==="function"&&(h[Symbol.iterator]=function(){return this}),h;function n(t){return function(o){return i([t,o])}}function i(n){if(r)throw new TypeError("Generator is already executing.");while(h&&(h=0,n[0]&&(e=0)),e)try{if(r=1,s&&(a=n[0]&2?s["return"]:n[0]?s["throw"]||((a=s["return"])&&a.call(s),0):s.next)&&!(a=a.call(s,n[1])).done)return a;if(s=0,a)n=[n[0]&2,a.value];switch(n[0]){case 0:case 1:a=n;break;case 4:e.label++;return{value:n[1],done:false};case 5:e.label++;s=n[1];n=[0];continue;case 7:n=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(n[0]===6||n[0]===2)){e=0;continue}if(n[0]===3&&(!a||n[1]>a[0]&&n[1]<a[3])){e.label=n[1];break}if(n[0]===6&&e.label<a[1]){e.label=a[1];a=n;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(n);break}if(a[2])e.ops.pop();e.trys.pop();continue}n=o.call(t,e)}catch(t){n=[6,t];s=0}finally{r=a=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{j as js_cookie}from"./js.cookie-e27f385b.js";import{s as setPropsIfNull}from"./utils-107fad0f.js";import"./_commonjsHelpers-ba3f0406.js";import"./string-utils-e252977e.js";var stzhGhettoboxCss=".sc-stzh-ghettobox-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-ghettobox-h{display:none}.sc-stzh-ghettobox-h *.sc-stzh-ghettobox,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::before,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-ghettobox-h .has-focus.sc-stzh-ghettobox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox{outline-style:none !important}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox::-moz-focus-inner{border:0 !important}.sc-stzh-ghettobox-h{--stzh-flyingfocus-color:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-heading-color:var(--stzh-base-invert-color);--stzh-link-color:var(--stzh-base-invert-color);--stzh-link-hover-color:var(--stzh-base-invert-color);--background-color:var(--stzh-color-error);--color:var(--stzh-base-invert-color);--richtext-color:var(--color);--button-color:var(--color);--hover-button-color:var(--background-color)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-richtext{--stzh-base-color:var(--richtext-color)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=default]{--color:var(--hover-button-color);--background-color:rgb(var(--stzh-base-invert-color-rgb));--border-color:rgb(var(--stzh-base-invert-color-rgb));--hover-color:var(--hover-button-color);--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=secondary]{--color:rgb(var(--stzh-base-invert-color-rgb));--background-color:transparent;--border-color:rgb(var(--stzh-base-invert-color-rgb));--hover-color:var(--hover-button-color);--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=tertiary]{--color:rgb(var(--stzh-base-invert-color-rgb));--background-color:transparent;--hover-color:rgb(var(--stzh-base-invert-color-rgb));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color16-alpha))}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][active]:not([active=false]){--color:var(--hover-button-color);--background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--border-color:transparent;--hover-color:var(--hover-button-color);--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false]),.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false]){--border-color:transparent;--background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-border-color:transparent;--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha))}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=secondary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=input],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=tertiary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=secondary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=input],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=tertiary]{--color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--border-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--background-color:transparent;--hover-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-border-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-background-color:transparent}.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);padding-left:var(--stzh-space-xxxlarge);padding-right:var(--stzh-space-xxxlarge);position:relative;display:-ms-flexbox;display:flex;background-color:var(--background-color);color:var(--color);-webkit-box-shadow:var(--stzh-box-shadow-message);box-shadow:var(--stzh-box-shadow-message);border-radius:var(--stzh-button-border-radius)}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{border-radius:0.1875rem}}.stzh-ghettobox__hidden-title.sc-stzh-ghettobox{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-ghettobox__message.sc-stzh-ghettobox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing));margin:0;color:inherit}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-large)}}.stzh-ghettobox__close.sc-stzh-ghettobox{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width: 600px){.stzh-ghettobox__close.sc-stzh-ghettobox{margin-left:var(--stzh-space-small)}}.stzh-ghettobox__close.sc-stzh-ghettobox{position:absolute;top:0;right:0}.stzh-ghettobox__close[variant=default].sc-stzh-ghettobox{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:rgb(var(--stzh-base-invert-color-rgb));--border-color:rgb(var(--stzh-base-invert-color-rgb));--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.stzh-ghettobox__close[variant=secondary].sc-stzh-ghettobox{--color:rgb(var(--stzh-base-invert-color-rgb));--background-color:transparent;--border-color:rgb(var(--stzh-base-invert-color-rgb));--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.stzh-ghettobox__close[variant=tertiary].sc-stzh-ghettobox{--color:rgb(var(--stzh-base-invert-color-rgb));--background-color:transparent;--hover-color:rgb(var(--stzh-base-invert-color-rgb));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color16-alpha))}.stzh-ghettobox__close[active].sc-stzh-ghettobox:not([active=false]){--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--border-color:transparent;--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false]),.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false]){--border-color:transparent;--background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-border-color:transparent;--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha))}.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=secondary],.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=input],.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=tertiary],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=secondary],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=input],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=tertiary]{--color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--border-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--background-color:transparent;--hover-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-border-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-background-color:transparent}.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 600px) and (min-width: 1024px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-xlarge)}}";var KEY_PREFIX_CLOSE_TIME="stzh-components-ghettobox-close-time";var StzhGhettobox=function(){function t(t){var o=this;registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhClose=createEvent(this,"stzhClose",7);this.onCloseButtonClick=function(){o.hide()};this.init=function(){var t=o.element.querySelector('stzh-button[slot="button"]');if(t){setPropsIfNull(t,{size:"small",variant:"secondary",effect:"cta",icon:"arrow-right-long",iconPosition:"right"})}};this.hiddenTitle="";this.mainTitle="";this.description="";this.hideClose=false;this.publishDate=undefined;this.closeTimeKey="global-alert";this.localization=undefined;this.open=true}t.prototype.publishDateWatcher=function(t){if(typeof t==="string"){this._publishDate=new Date(t)}else{this._publishDate=t}if(this.closeTimeKey&&this._publishDate){var o=js_cookie.get("".concat(KEY_PREFIX_CLOSE_TIME,"-").concat(this.closeTimeKey));if(o&&Number(o)>=this._publishDate.getTime()){this.hide(false)}}};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=true;this.stzhOpen.emit({component:"stzh-ghettobox"});return[2]}))}))};t.prototype.hide=function(t){if(t===void 0){t=true}return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(o){this.open=false;this.stzhClose.emit({component:"stzh-ghettobox"});if(this.closeTimeKey&&t){js_cookie.set("".concat(KEY_PREFIX_CLOSE_TIME,"-").concat(this.closeTimeKey),Date.now().toString())}return[2]}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){switch(o.label){case 0:this.publishDateWatcher(this.publishDate);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"ghettobox")];case 1:t.localization=o.sent();o.label=2;case 2:return[2]}}))}))};t.prototype.connectedCallback=function(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}};t.prototype.render=function(){var t={"stzh-ghettobox":true,"stzh-ghettobox--has-close-button":!this.hideClose};return h(Host,{hidden:!this.open},h("div",{class:t},h("h1",{class:"stzh-ghettobox__hidden-title"},this.hiddenTitle||this.localization.hiddenTitle),h("div",{class:"stzh-ghettobox__message"},h("h2",{class:"stzh-ghettobox__main-title"},this.mainTitle),h("div",{class:"stzh-ghettobox__description"},this.description?this.description:h("slot",null)),h("div",{class:"stzh-ghettobox__button"},h("slot",{name:"button"}))),!this.hideClose&&h("stzh-button",{class:"stzh-ghettobox__close",onClick:this.onCloseButtonClick,a11yLabel:this.localization.close,variant:"tertiary",size:"small",iconOnly:true,icon:"close"})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{publishDate:["publishDateWatcher"]}},enumerable:false,configurable:true});return t}();StzhGhettobox.style=stzhGhettoboxCss;export{StzhGhettobox as stzh_ghettobox};
+var __awaiter=this&&this.__awaiter||function(t,o,e,r){function s(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,a){function h(t){try{i(r.next(t))}catch(t){a(t)}}function n(t){try{i(r["throw"](t))}catch(t){a(t)}}function i(t){t.done?e(t.value):s(t.value).then(h,n)}i((r=r.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,s,a,h;return h={next:n(0),throw:n(1),return:n(2)},typeof Symbol==="function"&&(h[Symbol.iterator]=function(){return this}),h;function n(t){return function(o){return i([t,o])}}function i(n){if(r)throw new TypeError("Generator is already executing.");while(h&&(h=0,n[0]&&(e=0)),e)try{if(r=1,s&&(a=n[0]&2?s["return"]:n[0]?s["throw"]||((a=s["return"])&&a.call(s),0):s.next)&&!(a=a.call(s,n[1])).done)return a;if(s=0,a)n=[n[0]&2,a.value];switch(n[0]){case 0:case 1:a=n;break;case 4:e.label++;return{value:n[1],done:false};case 5:e.label++;s=n[1];n=[0];continue;case 7:n=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(n[0]===6||n[0]===2)){e=0;continue}if(n[0]===3&&(!a||n[1]>a[0]&&n[1]<a[3])){e.label=n[1];break}if(n[0]===6&&e.label<a[1]){e.label=a[1];a=n;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(n);break}if(a[2])e.ops.pop();e.trys.pop();continue}n=o.call(t,e)}catch(t){n=[6,t];s=0}finally{r=a=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{j as js_cookie}from"./js.cookie-e27f385b.js";import{s as setPropsIfNull}from"./utils-8bb4c3c6.js";import"./_commonjsHelpers-ba3f0406.js";import"./string-utils-e252977e.js";var stzhGhettoboxCss=".sc-stzh-ghettobox-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-ghettobox-h{display:none}.sc-stzh-ghettobox-h *.sc-stzh-ghettobox,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::before,.sc-stzh-ghettobox-h *.sc-stzh-ghettobox::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-ghettobox-h .has-focus.sc-stzh-ghettobox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox{outline-style:none !important}.sc-stzh-ghettobox-h .stzh-fylingfocus-focused.sc-stzh-ghettobox::-moz-focus-inner{border:0 !important}.sc-stzh-ghettobox-h{--stzh-flyingfocus-color:var(--stzh-base-invert-color);--stzh-base-color:var(--stzh-base-invert-color);--stzh-base-lead-color:var(--stzh-base-invert-color);--stzh-base-border-color:var(--stzh-base-invert-color);--stzh-heading-color:var(--stzh-base-invert-color);--stzh-link-color:var(--stzh-base-invert-color);--stzh-link-hover-color:var(--stzh-base-invert-color);--background-color:var(--stzh-color-error);--color:var(--stzh-base-invert-color);--richtext-color:var(--color);--button-color:var(--color);--hover-button-color:var(--background-color)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-richtext{--stzh-base-color:var(--richtext-color)}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=default]{--color:var(--hover-button-color);--background-color:rgb(var(--stzh-base-invert-color-rgb));--border-color:rgb(var(--stzh-base-invert-color-rgb));--hover-color:var(--hover-button-color);--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=secondary]{--color:rgb(var(--stzh-base-invert-color-rgb));--background-color:transparent;--border-color:rgb(var(--stzh-base-invert-color-rgb));--hover-color:var(--hover-button-color);--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][variant=tertiary]{--color:rgb(var(--stzh-base-invert-color-rgb));--background-color:transparent;--hover-color:rgb(var(--stzh-base-invert-color-rgb));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color16-alpha))}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][active]:not([active=false]){--color:var(--hover-button-color);--background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--border-color:transparent;--hover-color:var(--hover-button-color);--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false]),.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false]){--border-color:transparent;--background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-border-color:transparent;--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha))}.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=secondary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=input],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][disabled]:not([disabled=false])[variant=tertiary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=secondary],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=input],.sc-stzh-ghettobox-h .sc-stzh-ghettobox-s>stzh-button[slot=button][a11y-disabled]:not([a11y-disabled=false])[variant=tertiary]{--color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--border-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--background-color:transparent;--hover-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-border-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-background-color:transparent}.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);padding-left:var(--stzh-space-xxxlarge);padding-right:var(--stzh-space-xxxlarge);position:relative;display:-ms-flexbox;display:flex;background-color:var(--background-color);color:var(--color);-webkit-box-shadow:var(--stzh-box-shadow-message);box-shadow:var(--stzh-box-shadow-message);border-radius:var(--stzh-button-border-radius)}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-left:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{padding-right:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){.stzh-ghettobox.sc-stzh-ghettobox{border-radius:0.1875rem}}.stzh-ghettobox__hidden-title.sc-stzh-ghettobox{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-ghettobox__message.sc-stzh-ghettobox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1}.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing));margin:0;color:inherit}@media screen and (min-width: 600px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.stzh-ghettobox__main-title.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.stzh-ghettobox__description.sc-stzh-ghettobox{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-small)}@media screen and (min-width: 1024px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-ghettobox__description.sc-stzh-ghettobox:not(:empty),.stzh-ghettobox__button.sc-stzh-ghettobox:not(:empty){margin-top:var(--stzh-space-large)}}.stzh-ghettobox__close.sc-stzh-ghettobox{-ms-flex-negative:0;flex-shrink:0}@media screen and (min-width: 600px){.stzh-ghettobox__close.sc-stzh-ghettobox{margin-left:var(--stzh-space-small)}}.stzh-ghettobox__close.sc-stzh-ghettobox{position:absolute;top:0;right:0}.stzh-ghettobox__close[variant=default].sc-stzh-ghettobox{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:rgb(var(--stzh-base-invert-color-rgb));--border-color:rgb(var(--stzh-base-invert-color-rgb));--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.stzh-ghettobox__close[variant=secondary].sc-stzh-ghettobox{--color:rgb(var(--stzh-base-invert-color-rgb));--background-color:transparent;--border-color:rgb(var(--stzh-base-invert-color-rgb));--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.stzh-ghettobox__close[variant=tertiary].sc-stzh-ghettobox{--color:rgb(var(--stzh-base-invert-color-rgb));--background-color:transparent;--hover-color:rgb(var(--stzh-base-invert-color-rgb));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color16-alpha))}.stzh-ghettobox__close[active].sc-stzh-ghettobox:not([active=false]){--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--border-color:transparent;--hover-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color72-alpha));--hover-border-color:transparent}.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false]),.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false]){--border-color:transparent;--background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-border-color:transparent;--hover-background-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha))}.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=secondary],.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=input],.stzh-ghettobox__close[disabled].sc-stzh-ghettobox:not([disabled=false])[variant=tertiary],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=secondary],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=input],.stzh-ghettobox__close[a11y-disabled].sc-stzh-ghettobox:not([a11y-disabled=false])[variant=tertiary]{--color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--border-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--background-color:transparent;--hover-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-border-color:rgba(var(--stzh-base-invert-color-rgb)/var(--stzh-base-invert-color32-alpha));--hover-background-color:transparent}.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 600px) and (min-width: 1024px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-ghettobox--has-close-button.sc-stzh-ghettobox{padding-right:var(--stzh-space-xlarge)}}";var KEY_PREFIX_CLOSE_TIME="stzh-components-ghettobox-close-time";var StzhGhettobox=function(){function t(t){var o=this;registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhClose=createEvent(this,"stzhClose",7);this.onCloseButtonClick=function(){o.hide()};this.init=function(){var t=o.element.querySelector('stzh-button[slot="button"]');if(t){setPropsIfNull(t,{size:"small",variant:"secondary",effect:"cta",icon:"arrow-right-long",iconPosition:"right"})}};this.hiddenTitle="";this.mainTitle="";this.description="";this.hideClose=false;this.publishDate=undefined;this.closeTimeKey="global-alert";this.localization=undefined;this.open=true}t.prototype.publishDateWatcher=function(t){if(typeof t==="string"){this._publishDate=new Date(t)}else{this._publishDate=t}if(this.closeTimeKey&&this._publishDate){var o=js_cookie.get("".concat(KEY_PREFIX_CLOSE_TIME,"-").concat(this.closeTimeKey));if(o&&Number(o)>=this._publishDate.getTime()){this.hide(false)}}};t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=true;this.stzhOpen.emit({component:"stzh-ghettobox"});return[2]}))}))};t.prototype.hide=function(t){if(t===void 0){t=true}return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(o){this.open=false;this.stzhClose.emit({component:"stzh-ghettobox"});if(this.closeTimeKey&&t){js_cookie.set("".concat(KEY_PREFIX_CLOSE_TIME,"-").concat(this.closeTimeKey),Date.now().toString())}return[2]}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){switch(o.label){case 0:this.publishDateWatcher(this.publishDate);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"ghettobox")];case 1:t.localization=o.sent();o.label=2;case 2:return[2]}}))}))};t.prototype.connectedCallback=function(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}};t.prototype.render=function(){var t={"stzh-ghettobox":true,"stzh-ghettobox--has-close-button":!this.hideClose};return h(Host,{hidden:!this.open},h("div",{class:t},h("h1",{class:"stzh-ghettobox__hidden-title"},this.hiddenTitle||this.localization.hiddenTitle),h("div",{class:"stzh-ghettobox__message"},h("h2",{class:"stzh-ghettobox__main-title"},this.mainTitle),h("div",{class:"stzh-ghettobox__description"},this.description?this.description:h("slot",null)),h("div",{class:"stzh-ghettobox__button"},h("slot",{name:"button"}))),!this.hideClose&&h("stzh-button",{class:"stzh-ghettobox__close",onClick:this.onCloseButtonClick,a11yLabel:this.localization.close,variant:"tertiary",size:"small",iconOnly:true,icon:"close"})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{publishDate:["publishDateWatcher"]}},enumerable:false,configurable:true});return t}();StzhGhettobox.style=stzhGhettoboxCss;export{StzhGhettobox as stzh_ghettobox};
 //# sourceMappingURL=stzh-ghettobox.entry.js.map

package/dist/esm-es5/stzh-header.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,a,t,r){function s(e){return e instanceof t?e:new t((function(a){a(e)}))}return new(t||(t=Promise))((function(t,i){function n(e){try{o(r.next(e))}catch(e){i(e)}}function h(e){try{o(r["throw"](e))}catch(e){i(e)}}function o(e){e.done?t(e.value):s(e.value).then(n,h)}o((r=r.apply(e,a||[])).next())}))};var __generator=this&&this.__generator||function(e,a){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},r,s,i,n;return n={next:h(0),throw:h(1),return:h(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function h(e){return function(a){return o([e,a])}}function o(h){if(r)throw new TypeError("Generator is already executing.");while(n&&(n=0,h[0]&&(t=0)),t)try{if(r=1,s&&(i=h[0]&2?s["return"]:h[0]?s["throw"]||((i=s["return"])&&i.call(s),0):s.next)&&!(i=i.call(s,h[1])).done)return i;if(s=0,i)h=[h[0]&2,i.value];switch(h[0]){case 0:case 1:i=h;break;case 4:t.label++;return{value:h[1],done:false};case 5:t.label++;s=h[1];h=[0];continue;case 7:h=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(h[0]===6||h[0]===2)){t=0;continue}if(h[0]===3&&(!i||h[1]>i[0]&&h[1]<i[3])){t.label=h[1];break}if(h[0]===6&&t.label<i[1]){t.label=i[1];i=h;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(h);break}if(i[2])t.ops.pop();t.trys.pop();continue}h=a.call(e,t)}catch(e){h=[6,e];s=0}finally{r=i=0}if(h[0]&5)throw h[1];return{value:h[0]?h[1]:void 0,done:true}}};import{r as registerInstance,e as readTask,w as writeTask,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-107fad0f.js";import{m as media}from"./media-utils-ee5a59fa.js";import"./string-utils-e252977e.js";var stzhHeaderCss=".sc-stzh-header-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-header-h{display:none}.sc-stzh-header-h *.sc-stzh-header,.sc-stzh-header-h *.sc-stzh-header::before,.sc-stzh-header-h *.sc-stzh-header::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-header-h .has-focus.sc-stzh-header{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header{outline-style:none !important}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header::-moz-focus-inner{border:0 !important}@-webkit-keyframes stzh-header-open{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes stzh-header-open{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0%);transform:translateY(0%)}}@-webkit-keyframes stzh-header-close{from{-webkit-transform:translateY(0%);transform:translateY(0%)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes stzh-header-close{from{-webkit-transform:translateY(0%);transform:translateY(0%)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@media print{.sc-stzh-header-h{display:none}}.sc-stzh-header-h .sc-stzh-header-s>img[slot=logo]{width:auto;height:100%}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login]{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover,.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover__trigger{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);height:auto}@media screen and (max-width: 799px){.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button{border-radius:0;height:100%}}@media screen and (max-width: 799px){.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button__badge{top:0.5rem;right:0.4375rem}}.header__inner.sc-stzh-header{-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}.header__main.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header);background-color:var(--stzh-color-white);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 800px){.header__main.sc-stzh-header{-webkit-box-shadow:none;box-shadow:none;-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-top:4rem}@supports ((position: -webkit-sticky) or (position: sticky)){.header__main.sc-stzh-header{padding-top:0}}}.header__metabar.sc-stzh-header{border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 800px){.header__metabar.sc-stzh-header{border-top:none;background-color:var(--stzh-color-grey5);z-index:1;position:absolute;top:0;left:0;right:0}@supports ((position: -webkit-sticky) or (position: sticky)){.header__metabar.sc-stzh-header{position:-webkit-sticky;position:sticky}}}.header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;height:3rem}@media screen and (min-width: 600px){.header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 1024px){.header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.header__metabar-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 1440px){.header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;width:78.75rem}}@media screen and (max-width: 799px){.header__metabar-inner.sc-stzh-header{margin:0 auto}}@media screen and (min-width: 800px){.header__metabar-inner.sc-stzh-header{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;height:4rem}}.header__metabar-nav.sc-stzh-header,.header__metabar-langnav.sc-stzh-header{display:none}@media screen and (min-width: 800px){.header__metabar-nav.sc-stzh-header,.header__metabar-langnav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}.header__metabar-login.sc-stzh-header{display:-ms-flexbox;display:flex;-ms-flex-preferred-size:50%;flex-basis:50%}@media screen and (min-width: 800px){.header__metabar-login.sc-stzh-header:not(:empty){-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:var(--stzh-space-small)}}@media screen and (min-width: 800px){.header__metabar-langnav.sc-stzh-header:not(:empty){margin-left:var(--stzh-space-medium)}}.header__logobar.sc-stzh-header{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.header__logobar-logo.sc-stzh-header{-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);overflow:hidden;width:calc(100% - 3rem - 0.0625rem)}@media screen and (min-width: 800px){.header__logobar-logo.sc-stzh-header{width:25rem}}@media screen and (min-width: 1260px){.header__logobar-logo.sc-stzh-header{width:28.75rem}}@media screen and (min-width: 1440px){.header__logobar-logo.sc-stzh-header{padding-left:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.header__logo-link.sc-stzh-header{-ms-flex-positive:1;flex-grow:1;display:-ms-inline-flexbox;display:inline-flex;height:4.75rem;padding:var(--stzh-space-medium);padding-left:1.25rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.header__logo-link.sc-stzh-header{padding-left:2rem}}@media screen and (min-width: 800px){.header__logo-link.sc-stzh-header{height:5.625rem}}@media screen and (min-width: 1260px){.header__logo-link.sc-stzh-header{height:7.5rem;padding:var(--stzh-space-large);padding-left:5.5rem}}@media screen and (min-width: 1440px){.header__logo-link.sc-stzh-header{padding-left:0}}.header__appnav.sc-stzh-header{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--stzh-z-index-header) - 1);-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header);background-color:var(--stzh-color-white)}@media screen and (min-width: 600px){.header__appnav.sc-stzh-header{position:static;-webkit-box-shadow:none;box-shadow:none}}@media screen and (min-width: 600px){.header__appnav-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem}}@media screen and (min-width: 600px) and (min-width: 600px){.header__appnav-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 600px) and (min-width: 1024px){.header__appnav-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 600px) and (min-width: 1260px){.header__appnav-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 600px) and (min-width: 1440px){.header__appnav-inner.sc-stzh-header{margin-left:auto;margin-right:auto;width:78.75rem}}.header--hide-logo.sc-stzh-header .header__logo-link.sc-stzh-header{opacity:0}@media screen and (max-width: 799px){.header--has-empty-metabar-mobile.sc-stzh-header .header__metabar.sc-stzh-header{display:none}}.header--has-empty-metabar.sc-stzh-header .header__metabar.sc-stzh-header{display:none}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-langnav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-nav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:none;box-shadow:none;-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-bottom:0.0625rem solid var(--stzh-base-border-color)}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar.sc-stzh-header{display:block;border-top:none;background-color:var(--stzh-color-grey5)}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}@media screen and (max-width: 799px) and (min-width: 600px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (max-width: 799px) and (min-width: 1024px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (max-width: 799px) and (min-width: 1260px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (max-width: 799px) and (min-width: 1440px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;width:78.75rem}}@media screen and (min-width: 800px){.header--sticky-metabar.sc-stzh-header:not(.header--sticky):not(.header--is-sticky-disabled) .header__metabar.sc-stzh-header{position:fixed}}@media screen and (min-width: 600px){.header--sticky.sc-stzh-header .header__inner.sc-stzh-header{-webkit-animation:stzh-header-open var(--stzh-base-transition-animation-speed);animation:stzh-header-open var(--stzh-base-transition-animation-speed);z-index:var(--stzh-z-index-header);position:fixed;top:0;left:0;right:0;margin:0;-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header)}}@media screen and (max-width: 599px){.header--sticky.sc-stzh-header .header__main.sc-stzh-header{-webkit-animation:stzh-header-open var(--stzh-base-transition-animation-speed);animation:stzh-header-open var(--stzh-base-transition-animation-speed);z-index:var(--stzh-z-index-header);position:fixed;top:0;left:0;right:0;margin:0}}@media screen and (min-width: 600px){.header--sticky.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:none;box-shadow:none}}@media screen and (max-width: 799px){.header--sticky.sc-stzh-header .header__appnav.sc-stzh-header{border-top:0.0625rem solid var(--stzh-base-border-color)}}.header--sticky.sc-stzh-header .header__metabar.sc-stzh-header{border-top:none}.header--sticky.header--has-empty-metabar.sc-stzh-header .header__metabar.sc-stzh-header{display:none}@media screen and (min-width: 600px){.header--sticky.header--has-empty-metabar.sc-stzh-header:not(.header--has-appnav) .header__main.sc-stzh-header{border-bottom:none}}.header--sticky.sc-stzh-header .header__logobar.sc-stzh-header{display:none}@media screen and (max-width: 599px){.header--sticky.header--has-metabar-stay.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header)}}@media screen and (min-width: 600px){.header--sticky-closing.sc-stzh-header .header__inner.sc-stzh-header{-webkit-animation:stzh-header-close var(--stzh-base-transition-animation-speed);animation:stzh-header-close var(--stzh-base-transition-animation-speed)}}@media screen and (max-width: 599px){.header--sticky-closing.sc-stzh-header .header__main.sc-stzh-header{-webkit-animation:stzh-header-close var(--stzh-base-transition-animation-speed);animation:stzh-header-close var(--stzh-base-transition-animation-speed)}}@media screen and (min-width: 800px){@supports ((position: -webkit-sticky) or (position: sticky)){.header--is-sticky-disabled.sc-stzh-header .header__main.sc-stzh-header{padding-top:4rem}}}@media screen and (min-width: 800px){@supports ((position: -webkit-sticky) or (position: sticky)){.header--is-sticky-disabled.sc-stzh-header .header__metabar.sc-stzh-header{position:absolute}}}";var StzhHeader=function(){function e(e){var a=this;registerInstance(this,e);this.handleResize=function(){if(a.stickyDisabled){return}if(a.debounceResize){window.cancelAnimationFrame(a.debounceResize)}a.debounceResize=requestAnimationFrame((function(){readTask((function(){a.isSmall=media("small").matches;a.isSmallheader=media("smallheader").matches;a.headerTop=a.element.offsetTop;a.headerHeight=a.element.offsetHeight;a.appnavHeight=a.appnavElement?a.appnavElement.offsetHeight:0;a.metabarHeight=a.metabarElement?a.metabarElement.offsetHeight:0}));writeTask((function(){document.documentElement.style.setProperty("--stzh-header-height","".concat(a.headerHeight,"px"));document.documentElement.style.setProperty("--stzh-header-appnav-height","".concat(a.appnavHeight,"px"));document.documentElement.style.setProperty("--stzh-header-metabar-height","".concat(a.metabarHeight,"px"));if(a.appnavHeight&&!a.isSmall&&!a.preventAppnavPlaceholder){a.appnavPlaceholderElement.style.height="".concat(a.appnavHeight,"px");document.documentElement.style.setProperty("--stzh-header-sticky-appnav-height","".concat(a.appnavHeight,"px"))}else{a.appnavPlaceholderElement.style.height="0px";document.documentElement.style.setProperty("--stzh-header-sticky-appnav-height","0px")}}));a.scrollListener()}))};this.href="https://www.stadt-zuerich.ch";this.metabarStay=false;this.stickyDisabled=false;this.preventAppnavPlaceholder=false;this.logoAnalyticsId=undefined;this.hideLogo=false;this.paddingTop=undefined;this.metabarTransform=undefined;this.sticky=false;this.stickyClosing=false;this.stickyMetabar=false;this.stickyMetabarEnd=false}e.prototype.updatePosition=function(){return __awaiter(this,void 0,void 0,(function(){var e,a;var t=this;return __generator(this,(function(r){if(this.stickyDisabled){return[2]}e=function(){t.sticky=false;t.stickyClosing=false;t.paddingTop=0};if(this.scrollingUp&&this.belowStayStickyPoint){if(!this.sticky&&this.belowStartStickyPoint){this.paddingTop=this.headerHeight;this.sticky=true}this.updateMetabarPosition()}else{if(this.sticky&&this.belowStayStickyPoint){a=function(){e();t.updateMetabarPosition();t.innerElement.removeEventListener("animationend",a)};this.innerElement.addEventListener("animationend",a);this.stickyClosing=true}else{e();this.updateMetabarPosition()}}return[2]}))}))};e.prototype.scrollListener=function(){var e=this;if(this.stickyDisabled){return}readTask((function(){e.scrollTop=e.getScrollTop();e.scrollingUp=e.lastScrollTop&&e.lastScrollTop>e.scrollTop;e.lastScrollTop=e.scrollTop;e.innerHeight=e.innerElement?e.innerElement.offsetHeight:0;e.mainHeight=e.mainElement?e.mainElement.offsetHeight:0;e.logobarHeight=e.sticky?e.isSmall?e.headerHeight-e.innerHeight:e.headerHeight-e.mainHeight:e.logobarElement?e.logobarElement.offsetHeight:0;e.belowStayStickyPoint=e.scrollTop>e.logobarHeight;e.belowStartStickyPoint=e.scrollTop>e.headerHeight;e.headerOverlap=(e.headerTop-e.scrollTop)/-1;e.hideLogo=e.isSmallheader&&e.headerOverlap>10}));writeTask((function(){e.updatePosition()}))};e.prototype.getScrollTop=function(){return window.pageYOffset||document.documentElement.scrollTop};e.prototype.updateMetabarPosition=function(){if(!this.metabarElement||this.stickyDisabled){return}if(CSS&&CSS.supports&&CSS.supports("position","sticky")){return}if(this.isSmallheader&&this.headerOverlap>0&&!this.sticky&&!this.stickyClosing){if(this.headerOverlap<this.mainHeight-this.metabarHeight){this.stickyMetabar=true;this.stickyMetabarEnd=false;this.metabarTransform="translateY(0)"}else{this.stickyMetabar=false;this.stickyMetabarEnd=true;this.metabarTransform="translateY(".concat(this.logobarHeight,"px)")}}else{this.stickyMetabar=false;this.stickyMetabarEnd=false;this.metabarTransform="translateY(0)"}};e.prototype.connectedCallback=function(){this.appnavPlaceholderElement=document.createElement("div");this.element.parentElement.appendChild(this.appnavPlaceholderElement);this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)};e.prototype.disconnectedCallback=function(){this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);if(this.resizeObserver){this.resizeObserver.disconnect()}};e.prototype.render=function(){var e=this;var a=hasSlot(this.element,"nav");var t=hasSlot(this.element,"login");var r=hasSlot(this.element,"appnav");var s=hasSlot(this.element,"langnav");var i={header:true,"header--is-sticky-disabled":this.stickyDisabled,"header--sticky":this.sticky,"header--sticky-closing":this.stickyClosing,"header--hide-logo":this.hideLogo,"header--sticky-metabar":this.stickyMetabar,"header--sticky-metabar-end":this.stickyMetabarEnd,"header--has-metabar-stay":this.metabarStay,"header--has-empty-metabar-mobile":!t,"header--has-empty-metabar":!t&&!s&&!a,"header--has-appnav":r};return h(Host,null,h("div",{style:{paddingTop:"".concat(this.paddingTop,"px")},class:i},h("div",{class:"header__inner",ref:function(a){return e.innerElement=a}},h("div",{class:"header__main",ref:function(a){return e.mainElement=a}},h("div",{class:"header__logobar",ref:function(a){return e.logobarElement=a}},h("div",{class:"header__logobar-logo"},h("a",{href:this.href,class:"header__logo-link","s-object-id":this.logoAnalyticsId||"Header Logo"},h("slot",{name:"logo"})))),h("div",{class:"header__metabar",style:{transform:this.metabarTransform},ref:function(a){return e.metabarElement=a}},h("div",{class:"header__metabar-inner"},h("div",{class:"header__metabar-nav"},h("slot",{name:"nav"})),h("div",{class:"header__metabar-login"},h("slot",{name:"login"})),h("div",{class:"header__metabar-langnav"},h("slot",{name:"langnav"}))))),h("div",{class:"header__appnav",ref:function(a){return e.appnavElement=a}},h("div",{class:"header__appnav-inner"},h("slot",{name:"appnav"}))))))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();StzhHeader.style=stzhHeaderCss;export{StzhHeader as stzh_header};
+var __awaiter=this&&this.__awaiter||function(e,a,t,s){function r(e){return e instanceof t?e:new t((function(a){a(e)}))}return new(t||(t=Promise))((function(t,i){function n(e){try{o(s.next(e))}catch(e){i(e)}}function h(e){try{o(s["throw"](e))}catch(e){i(e)}}function o(e){e.done?t(e.value):r(e.value).then(n,h)}o((s=s.apply(e,a||[])).next())}))};var __generator=this&&this.__generator||function(e,a){var t={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,r,i,n;return n={next:h(0),throw:h(1),return:h(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function h(e){return function(a){return o([e,a])}}function o(h){if(s)throw new TypeError("Generator is already executing.");while(n&&(n=0,h[0]&&(t=0)),t)try{if(s=1,r&&(i=h[0]&2?r["return"]:h[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,h[1])).done)return i;if(r=0,i)h=[h[0]&2,i.value];switch(h[0]){case 0:case 1:i=h;break;case 4:t.label++;return{value:h[1],done:false};case 5:t.label++;r=h[1];h=[0];continue;case 7:h=t.ops.pop();t.trys.pop();continue;default:if(!(i=t.trys,i=i.length>0&&i[i.length-1])&&(h[0]===6||h[0]===2)){t=0;continue}if(h[0]===3&&(!i||h[1]>i[0]&&h[1]<i[3])){t.label=h[1];break}if(h[0]===6&&t.label<i[1]){t.label=i[1];i=h;break}if(i&&t.label<i[2]){t.label=i[2];t.ops.push(h);break}if(i[2])t.ops.pop();t.trys.pop();continue}h=a.call(e,t)}catch(e){h=[6,e];r=0}finally{s=i=0}if(h[0]&5)throw h[1];return{value:h[0]?h[1]:void 0,done:true}}};import{r as registerInstance,e as readTask,w as writeTask,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import{m as media}from"./media-utils-ee5a59fa.js";import"./string-utils-e252977e.js";var stzhHeaderCss=".sc-stzh-header-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-header-h{display:none}.sc-stzh-header-h *.sc-stzh-header,.sc-stzh-header-h *.sc-stzh-header::before,.sc-stzh-header-h *.sc-stzh-header::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-header-h .has-focus.sc-stzh-header{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header{outline-style:none !important}.sc-stzh-header-h .stzh-fylingfocus-focused.sc-stzh-header::-moz-focus-inner{border:0 !important}@-webkit-keyframes stzh-header-open{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes stzh-header-open{from{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0%);transform:translateY(0%)}}@-webkit-keyframes stzh-header-close{from{-webkit-transform:translateY(0%);transform:translateY(0%)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes stzh-header-close{from{-webkit-transform:translateY(0%);transform:translateY(0%)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@media print{.sc-stzh-header-h{display:none}}.sc-stzh-header-h .sc-stzh-header-s>[slot=logo]{width:auto;height:100%}.sc-stzh-header-h .sc-stzh-header-s>stzh-logo[slot=logo]{--width:auto;--height:100%}.sc-stzh-header-h .sc-stzh-header-s>stzh-logo[slot=logo]:not([type=stzh]):not([type=none]){--width:auto;--height:1.9375rem}@media screen and (min-width: 1024px){.sc-stzh-header-h .sc-stzh-header-s>stzh-logo[slot=logo]:not([type=stzh]):not([type=none]){--height:2.1875rem}}@media screen and (min-width: 1440px){.sc-stzh-header-h .sc-stzh-header-s>stzh-logo[slot=logo]:not([type=stzh]):not([type=none]){--height:3.3125rem}}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login]{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover,.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover__trigger{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);height:auto}@media screen and (max-width: 799px){.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button{border-radius:0;height:100%}}@media screen and (max-width: 799px){.sc-stzh-header-h .sc-stzh-header-s>stzh-popover[slot=login] .stzh-popover .stzh-popover__trigger stzh-button .stzh-button__badge{top:0.5rem;right:0.4375rem}}.header__inner.sc-stzh-header{-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}.header__main.sc-stzh-header{position:relative;z-index:var(--stzh-z-index-header);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header);background-color:var(--stzh-color-white);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 800px){.header__main.sc-stzh-header{-webkit-box-shadow:none;box-shadow:none;-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-top:4rem}@supports ((position: -webkit-sticky) or (position: sticky)){.header__main.sc-stzh-header{padding-top:0}}}.header__metabar.sc-stzh-header{border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 800px){.header__metabar.sc-stzh-header{border-top:none;background-color:var(--stzh-color-grey5);z-index:1;position:absolute;top:0;left:0;right:0}@supports ((position: -webkit-sticky) or (position: sticky)){.header__metabar.sc-stzh-header{position:-webkit-sticky;position:sticky}}}.header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;height:3rem}@media screen and (min-width: 600px){.header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 1024px){.header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.header__metabar-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 1440px){.header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;width:78.75rem}}@media screen and (max-width: 799px){.header__metabar-inner.sc-stzh-header{margin:0 auto}}@media screen and (min-width: 800px){.header__metabar-inner.sc-stzh-header{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;height:4rem}}.header__metabar-nav.sc-stzh-header,.header__metabar-langnav.sc-stzh-header{display:none}@media screen and (min-width: 800px){.header__metabar-nav.sc-stzh-header,.header__metabar-langnav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}.header__metabar-login.sc-stzh-header{display:-ms-flexbox;display:flex;-ms-flex-preferred-size:50%;flex-basis:50%}@media screen and (min-width: 800px){.header__metabar-login.sc-stzh-header:not(:empty){-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:var(--stzh-space-small)}}@media screen and (min-width: 800px){.header__metabar-langnav.sc-stzh-header:not(:empty){margin-left:var(--stzh-space-medium)}}.header__logobar.sc-stzh-header{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.header__logobar-logo.sc-stzh-header{-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);overflow:hidden;width:calc(100% - 3rem - 0.0625rem)}@media screen and (min-width: 800px){.header__logobar-logo.sc-stzh-header{width:25rem}}@media screen and (min-width: 1260px){.header__logobar-logo.sc-stzh-header{width:28.75rem}}@media screen and (min-width: 1440px){.header__logobar-logo.sc-stzh-header{padding-left:calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.header__logo-link.sc-stzh-header{-ms-flex-positive:1;flex-grow:1;display:-ms-inline-flexbox;display:inline-flex;height:4.75rem;padding:var(--stzh-space-medium);padding-left:1.25rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.header__logo-link.sc-stzh-header{padding-left:2rem}}@media screen and (min-width: 800px){.header__logo-link.sc-stzh-header{height:5.625rem}}@media screen and (min-width: 1260px){.header__logo-link.sc-stzh-header{height:7.5rem;padding:var(--stzh-space-large);padding-left:5.5rem}}@media screen and (min-width: 1440px){.header__logo-link.sc-stzh-header{padding-left:0}}.header__appnav.sc-stzh-header{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--stzh-z-index-header) - 1);-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header);background-color:var(--stzh-color-white)}@media screen and (min-width: 600px){.header__appnav.sc-stzh-header{position:static;-webkit-box-shadow:none;box-shadow:none}}@media screen and (min-width: 600px){.header__appnav-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem}}@media screen and (min-width: 600px) and (min-width: 600px){.header__appnav-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 600px) and (min-width: 1024px){.header__appnav-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 600px) and (min-width: 1260px){.header__appnav-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (min-width: 600px) and (min-width: 1440px){.header__appnav-inner.sc-stzh-header{margin-left:auto;margin-right:auto;width:78.75rem}}.header--hide-logo.sc-stzh-header .header__logo-link.sc-stzh-header{opacity:0}@media screen and (max-width: 799px){.header--has-empty-metabar-mobile.sc-stzh-header .header__metabar.sc-stzh-header{display:none}}.header--has-empty-metabar.sc-stzh-header .header__metabar.sc-stzh-header{display:none}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-langnav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-nav.sc-stzh-header{display:-ms-inline-flexbox;display:inline-flex}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:none;box-shadow:none;-ms-flex-direction:column-reverse;flex-direction:column-reverse;border-bottom:0.0625rem solid var(--stzh-base-border-color)}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar.sc-stzh-header{display:block;border-top:none;background-color:var(--stzh-color-grey5)}}@media screen and (max-width: 799px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:1.25rem;margin-right:1.25rem;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}@media screen and (max-width: 799px) and (min-width: 600px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:2rem;margin-right:2rem}}@media screen and (max-width: 799px) and (min-width: 1024px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (max-width: 799px) and (min-width: 1260px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:5.5rem;margin-right:5.5rem}}@media screen and (max-width: 799px) and (min-width: 1440px){.header--has-metabar-stay.sc-stzh-header .header__metabar-inner.sc-stzh-header{margin-left:auto;margin-right:auto;width:78.75rem}}@media screen and (min-width: 800px){.header--sticky-metabar.sc-stzh-header:not(.header--sticky):not(.header--is-sticky-disabled) .header__metabar.sc-stzh-header{position:fixed}}@media screen and (min-width: 600px){.header--sticky.sc-stzh-header .header__inner.sc-stzh-header{-webkit-animation:stzh-header-open var(--stzh-base-transition-animation-speed);animation:stzh-header-open var(--stzh-base-transition-animation-speed);z-index:var(--stzh-z-index-header);position:fixed;top:0;left:0;right:0;margin:0;-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header)}}@media screen and (max-width: 599px){.header--sticky.sc-stzh-header .header__main.sc-stzh-header{-webkit-animation:stzh-header-open var(--stzh-base-transition-animation-speed);animation:stzh-header-open var(--stzh-base-transition-animation-speed);z-index:var(--stzh-z-index-header);position:fixed;top:0;left:0;right:0;margin:0}}@media screen and (min-width: 600px){.header--sticky.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:none;box-shadow:none}}@media screen and (max-width: 799px){.header--sticky.sc-stzh-header .header__appnav.sc-stzh-header{border-top:0.0625rem solid var(--stzh-base-border-color)}}.header--sticky.sc-stzh-header .header__metabar.sc-stzh-header{border-top:none}.header--sticky.header--has-empty-metabar.sc-stzh-header .header__metabar.sc-stzh-header{display:none}@media screen and (min-width: 600px){.header--sticky.header--has-empty-metabar.sc-stzh-header:not(.header--has-appnav) .header__main.sc-stzh-header{border-bottom:none}}.header--sticky.sc-stzh-header .header__logobar.sc-stzh-header{display:none}@media screen and (max-width: 599px){.header--sticky.header--has-metabar-stay.sc-stzh-header .header__main.sc-stzh-header{-webkit-box-shadow:var(--stzh-box-shadow-header);box-shadow:var(--stzh-box-shadow-header)}}@media screen and (min-width: 600px){.header--sticky-closing.sc-stzh-header .header__inner.sc-stzh-header{-webkit-animation:stzh-header-close var(--stzh-base-transition-animation-speed);animation:stzh-header-close var(--stzh-base-transition-animation-speed)}}@media screen and (max-width: 599px){.header--sticky-closing.sc-stzh-header .header__main.sc-stzh-header{-webkit-animation:stzh-header-close var(--stzh-base-transition-animation-speed);animation:stzh-header-close var(--stzh-base-transition-animation-speed)}}@media screen and (min-width: 800px){@supports ((position: -webkit-sticky) or (position: sticky)){.header--is-sticky-disabled.sc-stzh-header .header__main.sc-stzh-header{padding-top:4rem}}}@media screen and (min-width: 800px){@supports ((position: -webkit-sticky) or (position: sticky)){.header--is-sticky-disabled.sc-stzh-header .header__metabar.sc-stzh-header{position:absolute}}}";var StzhHeader=function(){function e(e){var a=this;registerInstance(this,e);this.handleResize=function(){if(a.stickyDisabled){return}if(a.debounceResize){window.cancelAnimationFrame(a.debounceResize)}a.debounceResize=requestAnimationFrame((function(){readTask((function(){a.isSmall=media("small").matches;a.isSmallheader=media("smallheader").matches;a.headerTop=a.element.offsetTop;a.headerHeight=a.element.offsetHeight;a.appnavHeight=a.appnavElement?a.appnavElement.offsetHeight:0;a.metabarHeight=a.metabarElement?a.metabarElement.offsetHeight:0}));writeTask((function(){document.documentElement.style.setProperty("--stzh-header-height","".concat(a.headerHeight,"px"));document.documentElement.style.setProperty("--stzh-header-appnav-height","".concat(a.appnavHeight,"px"));document.documentElement.style.setProperty("--stzh-header-metabar-height","".concat(a.metabarHeight,"px"));if(a.appnavHeight&&!a.isSmall&&!a.preventAppnavPlaceholder){a.appnavPlaceholderElement.style.height="".concat(a.appnavHeight,"px");document.documentElement.style.setProperty("--stzh-header-sticky-appnav-height","".concat(a.appnavHeight,"px"))}else{a.appnavPlaceholderElement.style.height="0px";document.documentElement.style.setProperty("--stzh-header-sticky-appnav-height","0px")}}));a.scrollListener()}))};this.href="https://www.stadt-zuerich.ch";this.metabarStay=false;this.stickyDisabled=false;this.preventAppnavPlaceholder=false;this.logoAnalyticsId=undefined;this.hideLogo=false;this.paddingTop=undefined;this.metabarTransform=undefined;this.sticky=false;this.stickyClosing=false;this.stickyMetabar=false;this.stickyMetabarEnd=false}e.prototype.updatePosition=function(){return __awaiter(this,void 0,void 0,(function(){var e,a;var t=this;return __generator(this,(function(s){if(this.stickyDisabled){return[2]}e=function(){t.sticky=false;t.stickyClosing=false;t.paddingTop=0};if(this.scrollingUp&&this.belowStayStickyPoint){if(!this.sticky&&this.belowStartStickyPoint){this.paddingTop=this.headerHeight;this.sticky=true}this.updateMetabarPosition()}else{if(this.sticky&&this.belowStayStickyPoint){a=function(){e();t.updateMetabarPosition();t.innerElement.removeEventListener("animationend",a)};this.innerElement.addEventListener("animationend",a);this.stickyClosing=true}else{e();this.updateMetabarPosition()}}return[2]}))}))};e.prototype.scrollListener=function(){var e=this;if(this.stickyDisabled){return}readTask((function(){e.scrollTop=window.scrollY;e.scrollingUp=e.lastScrollTop&&e.lastScrollTop>e.scrollTop;e.lastScrollTop=e.scrollTop;e.innerHeight=e.innerElement?e.innerElement.offsetHeight:0;e.mainHeight=e.mainElement?e.mainElement.offsetHeight:0;e.logobarHeight=e.sticky?e.isSmall?e.headerHeight-e.innerHeight:e.headerHeight-e.mainHeight:e.logobarElement?e.logobarElement.offsetHeight:0;e.belowStayStickyPoint=e.scrollTop>e.logobarHeight;e.belowStartStickyPoint=e.scrollTop>e.headerHeight;e.headerOverlap=(e.headerTop-e.scrollTop)/-1;e.hideLogo=e.isSmallheader&&e.headerOverlap>10}));writeTask((function(){e.updatePosition()}))};e.prototype.updateMetabarPosition=function(){if(!this.metabarElement||this.stickyDisabled){return}if(CSS&&CSS.supports&&CSS.supports("position","sticky")){return}if(this.isSmallheader&&this.headerOverlap>0&&!this.sticky&&!this.stickyClosing){if(this.headerOverlap<this.mainHeight-this.metabarHeight){this.stickyMetabar=true;this.stickyMetabarEnd=false;this.metabarTransform="translateY(0)"}else{this.stickyMetabar=false;this.stickyMetabarEnd=true;this.metabarTransform="translateY(".concat(this.logobarHeight,"px)")}}else{this.stickyMetabar=false;this.stickyMetabarEnd=false;this.metabarTransform="translateY(0)"}};e.prototype.connectedCallback=function(){this.appnavPlaceholderElement=document.createElement("div");this.element.parentElement.appendChild(this.appnavPlaceholderElement);this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)};e.prototype.disconnectedCallback=function(){this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);if(this.resizeObserver){this.resizeObserver.disconnect()}};e.prototype.render=function(){var e=this;var a=hasSlot(this.element,"nav");var t=hasSlot(this.element,"login");var s=hasSlot(this.element,"appnav");var r=hasSlot(this.element,"langnav");var i={header:true,"header--is-sticky-disabled":this.stickyDisabled,"header--sticky":this.sticky,"header--sticky-closing":this.stickyClosing,"header--hide-logo":this.hideLogo,"header--sticky-metabar":this.stickyMetabar,"header--sticky-metabar-end":this.stickyMetabarEnd,"header--has-metabar-stay":this.metabarStay,"header--has-empty-metabar-mobile":!t,"header--has-empty-metabar":!t&&!r&&!a,"header--has-appnav":s};return h(Host,null,h("div",{style:{paddingTop:"".concat(this.paddingTop,"px")},class:i},h("div",{class:"header__inner",ref:function(a){return e.innerElement=a}},h("div",{class:"header__main",ref:function(a){return e.mainElement=a}},h("div",{class:"header__logobar",ref:function(a){return e.logobarElement=a}},h("div",{class:"header__logobar-logo"},h("a",{href:this.href,class:"header__logo-link","s-object-id":this.logoAnalyticsId||"Header Logo"},h("slot",{name:"logo"})))),h("div",{class:"header__metabar",style:{transform:this.metabarTransform},ref:function(a){return e.metabarElement=a}},h("div",{class:"header__metabar-inner"},h("div",{class:"header__metabar-nav"},h("slot",{name:"nav"})),h("div",{class:"header__metabar-login"},h("slot",{name:"login"})),h("div",{class:"header__metabar-langnav"},h("slot",{name:"langnav"}))))),h("div",{class:"header__appnav",ref:function(a){return e.appnavElement=a}},h("div",{class:"header__appnav-inner"},h("slot",{name:"appnav"}))))))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();StzhHeader.style=stzhHeaderCss;export{StzhHeader as stzh_header};
 //# sourceMappingURL=stzh-header.entry.js.map

package/dist/esm-es5/stzh-header.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhHeaderCss","StzhHeader","this","handleResize","_this","stickyDisabled","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","readTask","isSmall","media","matches","isSmallheader","headerTop","element","offsetTop","headerHeight","offsetHeight","appnavHeight","appnavElement","metabarHeight","metabarElement","writeTask","document","documentElement","style","setProperty","concat","preventAppnavPlaceholder","appnavPlaceholderElement","height","scrollListener","class_1","prototype","updatePosition","removeSticky","sticky","stickyClosing","paddingTop","scrollingUp","belowStayStickyPoint","belowStartStickyPoint","updateMetabarPosition","animationEnd_1","innerElement","removeEventListener","addEventListener","scrollTop","getScrollTop","lastScrollTop","innerHeight","mainHeight","mainElement","logobarHeight","logobarElement","headerOverlap","hideLogo","pageYOffset","CSS","supports","stickyMetabar","stickyMetabarEnd","metabarTransform","connectedCallback","createElement","parentElement","appendChild","resizeObserver","ResizeObserver","observe","disconnectedCallback","removeChild","disconnect","render","navSlotUsed","hasSlot","loginSlotUsed","appnavSlotUsed","langNavSlotUsed","classes","header","metabarStay","h","Host","class","ref","el","href","logoAnalyticsId","name","transform"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/**\n * @prop --stzh-header-height: **Global**: Height of header (readonly variable)\n * @prop --stzh-header-appnav-height: **Global**: Height of appnav header if exists (readonly variable)\n * @prop --stzh-header-metabar-height: **Global**: Height of metabar header (readonly variable)\n * @prop --stzh-header-sticky-appnav-height: **Global**: Height of appnav header if he is sticky (readonly variable)\n */\n\n@keyframes stzh-header-open {\n\tfrom {\n\t\ttransform: translateY(-100%);\n\t}\n\n\tto {\n\t\ttransform: translateY(0%);\n\t}\n}\n\n@keyframes stzh-header-close {\n\tfrom {\n\t\ttransform: translateY(0%);\n\t}\n\n\tto {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n:host {\n  @media print {\n    display: none;\n  }\n\n  ::slotted(img[slot=\"logo\"]) {\n    width: auto;\n    height: 100%;\n  }\n\n  ::slotted(stzh-popover[slot=\"login\"]) {\n    display: flex;\n    flex-grow: 1;\n\n    .stzh-popover,\n    .stzh-popover__trigger {\n      display: flex;\n      flex-grow: 1;\n    }\n\n    .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {\n      @include fontSize('micro');\n      height: auto;\n\n      @include mq($to: smallheader) {\n        border-radius: 0;\n        height: 100%;\n      }\n\n      &__badge {\n        @include mq($to: smallheader) {\n          top: 8px;\n          right: 7px;\n        }\n      }\n    }\n  }\n}\n\n.header {\n  &__inner {\n    transition: box-shadow $baseTransitionAnimationSpeed;\n  }\n\n  &__main {\n    position: relative;\n    z-index: $zIndexHeader;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    box-shadow: $boxShadowHeader;\n    background-color: $colorWhite;\n    transition: box-shadow $baseTransitionAnimationSpeed;\n\n    @include mq($from: smallheader) {\n      box-shadow: none;\n      flex-direction: column-reverse;\n      border-bottom: 1px solid $baseBorderColor;\n      padding-top: $headerMetabarHeightRegularUp;\n\n      @supports (position: sticky) {\n        padding-top: 0;\n      }\n    }\n  }\n\n  &__metabar {\n    border-top: 1px solid $baseBorderColor;\n\n    @include mq($from: smallheader) {\n      border-top: none;\n      background-color: $colorGrey5;\n      z-index: 1;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n\n      @supports (position: sticky) {\n        position: sticky;\n      }\n    }\n  }\n\n  &__metabar-inner {\n    @include container;\n    display: flex;\n    align-items: stretch;\n    height: $headerMetabarHeight;\n\n\t\t@include mq($to: smallheader) {\n      // overwrite container margin for smallheader\n      // to be able to use fullwidth of metabar\n      margin: 0 auto;\n    }\n\n\t\t@include mq($from: smallheader) {\n      justify-content: flex-end;\n      align-items: center;\n      height: $headerMetabarHeightRegularUp;\n    }\n  }\n\n  &__metabar-nav,\n  &__metabar-langnav {\n    display: none;\n\n    @include mq($from: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &__metabar-login {\n    display: flex;\n    flex-basis: 50%;\n\n    &:not(:empty) {\n  \t\t@include mq($from: smallheader) {\n        flex-basis: auto;\n        margin-left: space('small');\n      }\n    }\n  }\n\n  &__metabar-langnav {\n    &:not(:empty) {\n      @include mq($from: smallheader) {\n        margin-left: space('medium');\n      }\n    }\n  }\n\n  &__logobar {\n    display: flex;\n    background-color: $colorPrimary;\n  }\n\n  &__logobar-logo {\n    box-sizing: content-box;\n    display: flex;\n    background-color: $colorWhite;\n    overflow: hidden;\n    width: calc(100% - #{$headerMetabarHeight} - 1px);\n\n\t\t@include mq($from: smallheader) {\n      width: 400px;\n    }\n\n\t\t@include mq($from: large) {\n\t\t  width: 460px;\n\t\t}\n\n\t\t@include mq($from: ultra) {\n  \t\tpadding-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n\t\t}\n  }\n\n  &__logo-link {\n    flex-grow: 1;\n    display: inline-flex;\n\t\theight: 76px;\n    padding: space('medium');\n    padding-left: $containerMargin;\n    transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: smallheader) {\n\t\t\theight: 90px;\n\t\t}\n\n\t\t@include mq($from: large) {\n\t\t\theight: 120px;\n      padding: space('large');\n\t\t\tpadding-left: $containerMarginLarge;\n    }\n\n\t\t@include mq($from: ultra) {\n      padding-left: 0;\n    }\n  }\n\n  &__appnav {\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: calc(#{$zIndexHeader} - 1);\n    box-shadow: $boxShadowHeader;\n    background-color: $colorWhite;\n\n    @include mq($from: small) {\n      position: static;\n      box-shadow: none;\n    }\n  }\n\n  &__appnav-inner {\n    @include mq($from: small) {\n      @include container;\n    }\n  }\n\n  /* Hide logo */\n\n  &--hide-logo &__logo-link {\n    opacity: 0;\n  }\n\n  /* Has empty metabar */\n\n  &--has-empty-metabar-mobile &__metabar {\n    @include mq($to: smallheader) {\n      display: none;\n    }\n  }\n\n  /* Has empty metabar */\n\n  &--has-empty-metabar &__metabar {\n    display: none;\n  }\n\n  /* Metabar Stay */\n\n  &--has-metabar-stay &__metabar-langnav {\n    @include mq($to: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &--has-metabar-stay &__metabar-nav {\n    @include mq($to: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &--has-metabar-stay &__main {\n    @include mq($to: smallheader) {\n      box-shadow: none;\n      flex-direction: column-reverse;\n      border-bottom: 1px solid $baseBorderColor;\n    }\n  }\n\n  &--has-metabar-stay &__metabar {\n    @include mq($to: smallheader) {\n      display: block;\n      border-top: none;\n      background-color: $colorGrey5;\n    }\n  }\n\n  &--has-metabar-stay &__metabar-inner {\n    @include mq($to: smallheader) {\n      @include container;\n      justify-content: flex-end;\n      align-items: center;\n    }\n  }\n\n  /* Sticky metabar */\n\n  &--sticky-metabar:not(#{&}--sticky):not(#{&}--is-sticky-disabled) &__metabar {\n    @include mq($from: smallheader) {\n      position: fixed;\n    }\n  }\n\n  /* Sticky variant */\n\n  &--sticky &__inner {\n\t\t@include mq($from: small) {\n      animation: stzh-header-open $baseTransitionAnimationSpeed;\n      z-index: $zIndexHeader;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin: 0;\n      box-shadow: $boxShadowHeader;\n    }\n  }\n\n  &--sticky &__main {\n\t\t@include mq($to: small) {\n      animation: stzh-header-open $baseTransitionAnimationSpeed;\n      z-index: $zIndexHeader;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin: 0;\n    }\n\n\t\t@include mq($from: small) {\n      box-shadow: none;\n    }\n  }\n\n  &--sticky &__appnav {\n\t\t@include mq($to: smallheader) {\n      border-top: 1px solid $baseBorderColor;\n    }\n  }\n\n  &--sticky &__metabar {\n    border-top: none;\n  }\n\n  &--sticky#{&}--has-empty-metabar &__metabar {\n    display: none;\n  }\n\n  &--sticky#{&}--has-empty-metabar:not(#{&}--has-appnav) &__main {\n\t\t@include mq($from: small) {\n      border-bottom: none;\n    }\n  }\n\n  &--sticky &__logobar {\n    display: none;\n  }\n\n  &--sticky#{&}--has-metabar-stay &__main {\n\t\t@include mq($to: small) {\n      box-shadow: $boxShadowHeader;\n    }\n  }\n\n  /* Sticky closing */\n\n  &--sticky-closing &__inner {\n\t\t@include mq($from: small) {\n      animation: stzh-header-close $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &--sticky-closing &__main {\n\t\t@include mq($to: small) {\n      animation: stzh-header-close $baseTransitionAnimationSpeed;\n    }\n  }\n\n  /* Sticky disabled */\n\n  &--is-sticky-disabled &__main {\n    @include mq($from: smallheader) {\n      @supports (position: sticky) {\n        padding-top: $headerMetabarHeightRegularUp;\n      }\n    }\n  }\n\n  &--is-sticky-disabled &__metabar {\n    @include mq($from: smallheader) {\n      @supports (position: sticky) {\n        position: absolute;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Listen,\n  Host,\n  State,\n  h,\n  writeTask,\n  readTask,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n */\n@Component({\n  tag: \"stzh-header\",\n  styleUrl: \"stzh-header.scss\",\n  scoped: true\n})\nexport class StzhHeader {\n  /** Portal link (for logo) */\n  @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether grey metabar should stay (on top) on mobile */\n  @Prop() metabarStay: boolean = false;\n\n  /** Whether sticky behaviour should be disabled */\n  @Prop() stickyDisabled: boolean = false;\n\n  /**\n   * Prevent creating a appnav placeholder element\n   * with the size of appnav inside header parent element.\n   * This prevents the fixed appnav to overlap\n   * content at the end on mikro breakpoint,\n   * but could lead to problems with certain layouts.\n   */\n  @Prop() preventAppnavPlaceholder: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value is \"Header Logo\".\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @State() hideLogo: boolean = false;\n  @State() paddingTop: number;\n  @State() metabarTransform: string;\n  @State() sticky: boolean = false;\n  @State() stickyClosing: boolean = false;\n  @State() stickyMetabar: boolean = false;\n  @State() stickyMetabarEnd: boolean = false;\n\n  @Element() element: HTMLStzhHeaderElement;\n\n  /** Update position / sticky state of header */\n  @Method()\n  async updatePosition() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    const removeSticky = () => {\n      this.sticky = false;\n      this.stickyClosing = false;\n      this.paddingTop = 0;\n    }\n\n    if (this.scrollingUp && this.belowStayStickyPoint) {\n      if (!this.sticky && this.belowStartStickyPoint) {\n        this.paddingTop = this.headerHeight;\n        this.sticky = true;\n      }\n\n      this.updateMetabarPosition();\n    } else {\n      if (this.sticky && this.belowStayStickyPoint) {\n        const animationEnd = () => {\n          removeSticky();\n          this.updateMetabarPosition();\n          this.innerElement.removeEventListener(\"animationend\", animationEnd);\n        };\n\n        this.innerElement.addEventListener(\"animationend\", animationEnd);\n        this.stickyClosing = true;\n      } else {\n        removeSticky();\n        this.updateMetabarPosition();\n      }\n    }\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  scrollListener() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    readTask(() => {\n      this.scrollTop = this.getScrollTop();\n      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;\n      this.lastScrollTop = this.scrollTop;\n\n      this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n      this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n      this.logobarHeight = this.sticky\n        ? this.isSmall\n          ? this.headerHeight - this.innerHeight\n          : this.headerHeight - this.mainHeight\n        : this.logobarElement\n          ? this.logobarElement.offsetHeight\n          : 0;\n\n      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;\n      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;\n\n      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;\n      this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n    });\n\n    writeTask(() => {\n      this.updatePosition();\n    });\n  }\n\n  private scrollTop: number;\n  private lastScrollTop: number;\n  private headerOverlap: number;\n  private scrollingUp: boolean;\n  private belowStayStickyPoint: boolean;\n  private belowStartStickyPoint: boolean;\n\n  private headerTop: number;\n  private headerHeight: number;\n  private innerHeight: number;\n  private mainHeight: number;\n  private metabarHeight: number;\n  private logobarHeight: number;\n  private appnavHeight: number;\n\n  private isSmall: boolean;\n  private isSmallheader: boolean;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private innerElement: HTMLDivElement;\n  private mainElement: HTMLDivElement;\n  private logobarElement: HTMLDivElement;\n  private metabarElement: HTMLDivElement;\n  private appnavElement: HTMLDivElement;\n  private appnavPlaceholderElement: HTMLDivElement;\n\n  private handleResize = () => {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(() => {\n      readTask(() => {\n        this.isSmall = media(\"small\").matches;\n        this.isSmallheader = media(\"smallheader\").matches;\n\n        this.headerTop = this.element.offsetTop;\n        this.headerHeight = this.element.offsetHeight;\n        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n      });\n\n      writeTask(() => {\n        document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n        } else {\n          this.appnavPlaceholderElement.style.height = \"0px\";\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n        }\n      });\n\n      this.scrollListener();\n    });\n  }\n\n  private getScrollTop() {\n    return window.pageYOffset || document.documentElement.scrollTop;\n  }\n\n  private updateMetabarPosition() {\n    if (!this.metabarElement || this.stickyDisabled) {\n      return;\n    }\n\n    if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n      return;\n    }\n\n    if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n      if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n        this.stickyMetabar = true;\n        this.stickyMetabarEnd = false;\n        this.metabarTransform = \"translateY(0)\";\n      } else {\n        this.stickyMetabar = false;\n        this.stickyMetabarEnd = true;\n        this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n      }\n    } else {\n      this.stickyMetabar = false;\n      this.stickyMetabarEnd = false;\n      this.metabarTransform = \"translateY(0)\";\n    }\n  }\n\n  connectedCallback() {\n    this.appnavPlaceholderElement = document.createElement(\"div\");\n    this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n    const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n    const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n    const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n    const classes = {\n      \"header\": true,\n      \"header--is-sticky-disabled\": this.stickyDisabled,\n      \"header--sticky\": this.sticky,\n      \"header--sticky-closing\": this.stickyClosing,\n      \"header--hide-logo\": this.hideLogo,\n      \"header--sticky-metabar\": this.stickyMetabar,\n      \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n      \"header--has-metabar-stay\": this.metabarStay,\n      \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n      \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n      \"header--has-appnav\": appnavSlotUsed\n    };\n\n    return (\n      <Host>\n        <div style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n          <div\n            class=\"header__inner\"\n            ref={(el) => (this.innerElement = el as HTMLDivElement)}\n          >\n            <div\n              class=\"header__main\"\n              ref={(el) => (this.mainElement = el as HTMLDivElement)}\n            >\n              <div\n                class=\"header__logobar\"\n                ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__logobar-logo\">\n                  <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n                    <slot name=\"logo\"></slot>\n                  </a>\n                </div>\n              </div>\n\n              <div\n                class=\"header__metabar\"\n                style={{transform: this.metabarTransform}}\n                ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__metabar-inner\">\n                  <div class=\"header__metabar-nav\">\n                    <slot name=\"nav\"></slot>\n                  </div>\n                  <div class=\"header__metabar-login\">\n                    <slot name=\"login\"></slot>\n                  </div>\n                  <div class=\"header__metabar-langnav\">\n                    <slot name=\"langnav\"></slot>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"header__appnav\"\n              ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n            >\n              <div class=\"header__appnav-inner\">\n                <slot name=\"appnav\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"isDAAA,IAAMA,cAAgB,47Z,IC4BTC,WAAU,W,kDAuIbC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,eAAgB,CACvB,M,CAGF,GAAID,EAAKE,eAAgB,CACvBC,OAAOC,qBAAqBJ,EAAKE,e,CAGnCF,EAAKE,eAAiBG,uBAAsB,WAC1CC,UAAS,WACPN,EAAKO,QAAUC,MAAM,SAASC,QAC9BT,EAAKU,cAAgBF,MAAM,eAAeC,QAE1CT,EAAKW,UAAYX,EAAKY,QAAQC,UAC9Bb,EAAKc,aAAed,EAAKY,QAAQG,aACjCf,EAAKgB,aAAehB,EAAKiB,cAAgBjB,EAAKiB,cAAcF,aAAe,EAC3Ef,EAAKkB,cAAgBlB,EAAKmB,eAAiBnB,EAAKmB,eAAeJ,aAAe,C,IAGhFK,WAAU,WACRC,SAASC,gBAAgBC,MAAMC,YAAY,uBAAwB,GAAAC,OAAGzB,EAAKc,aAAY,OACvFO,SAASC,gBAAgBC,MAAMC,YAAY,8BAA+B,GAAAC,OAAGzB,EAAKgB,aAAY,OAC9FK,SAASC,gBAAgBC,MAAMC,YAAY,+BAAgC,GAAAC,OAAGzB,EAAKkB,cAAa,OAEhG,GAAIlB,EAAKgB,eAAiBhB,EAAKO,UAAYP,EAAK0B,yBAA0B,CACxE1B,EAAK2B,yBAAyBJ,MAAMK,OAAS,GAAAH,OAAGzB,EAAKgB,aAAY,MACjEK,SAASC,gBAAgBC,MAAMC,YAAY,qCAAsC,GAAAC,OAAGzB,EAAKgB,aAAY,M,KAChG,CACLhB,EAAK2B,yBAAyBJ,MAAMK,OAAS,MAC7CP,SAASC,gBAAgBC,MAAMC,YAAY,qCAAsC,M,KAIrFxB,EAAK6B,gB,eAvKc,+B,iBAGQ,M,oBAGG,M,8BASU,M,6CASf,M,sEAGF,M,mBACO,M,mBACA,M,sBACG,K,CAM/BC,EAAAC,UAAAC,eAAN,W,wGACE,GAAIlC,KAAKG,eAAgB,CACvB,S,CAGIgC,EAAe,WACnBjC,EAAKkC,OAAS,MACdlC,EAAKmC,cAAgB,MACrBnC,EAAKoC,WAAa,C,EAGpB,GAAItC,KAAKuC,aAAevC,KAAKwC,qBAAsB,CACjD,IAAKxC,KAAKoC,QAAUpC,KAAKyC,sBAAuB,CAC9CzC,KAAKsC,WAAatC,KAAKgB,aACvBhB,KAAKoC,OAAS,I,CAGhBpC,KAAK0C,uB,KACA,CACL,GAAI1C,KAAKoC,QAAUpC,KAAKwC,qBAAsB,CACtCG,EAAe,WACnBR,IACAjC,EAAKwC,wBACLxC,EAAK0C,aAAaC,oBAAoB,eAAgBF,E,EAGxD3C,KAAK4C,aAAaE,iBAAiB,eAAgBH,GACnD3C,KAAKqC,cAAgB,I,KAChB,CACLF,IACAnC,KAAK0C,uB,mBAMXV,EAAAC,UAAAF,eAAA,eAAA7B,EAAAF,KACE,GAAIA,KAAKG,eAAgB,CACvB,M,CAGFK,UAAS,WACPN,EAAK6C,UAAY7C,EAAK8C,eACtB9C,EAAKqC,YAAcrC,EAAK+C,eAAiB/C,EAAK+C,cAAgB/C,EAAK6C,UACnE7C,EAAK+C,cAAgB/C,EAAK6C,UAE1B7C,EAAKgD,YAAchD,EAAK0C,aAAe1C,EAAK0C,aAAa3B,aAAe,EACxEf,EAAKiD,WAAajD,EAAKkD,YAAclD,EAAKkD,YAAYnC,aAAe,EAErEf,EAAKmD,cAAgBnD,EAAKkC,OACtBlC,EAAKO,QACHP,EAAKc,aAAed,EAAKgD,YACzBhD,EAAKc,aAAed,EAAKiD,WAC3BjD,EAAKoD,eACHpD,EAAKoD,eAAerC,aACpB,EAENf,EAAKsC,qBAAuBtC,EAAK6C,UAAY7C,EAAKmD,cAClDnD,EAAKuC,sBAAwBvC,EAAK6C,UAAY7C,EAAKc,aAEnDd,EAAKqD,eAAiBrD,EAAKW,UAAYX,EAAK6C,YAAc,EAC1D7C,EAAKsD,SAAWtD,EAAKU,eAAiBV,EAAKqD,cAAgB,E,IAG7DjC,WAAU,WACRpB,EAAKgC,gB,KAsEDF,EAAAC,UAAAe,aAAA,WACN,OAAO3C,OAAOoD,aAAelC,SAASC,gBAAgBuB,S,EAGhDf,EAAAC,UAAAS,sBAAA,WACN,IAAK1C,KAAKqB,gBAAkBrB,KAAKG,eAAgB,CAC/C,M,CAGF,GAAIuD,KAAOA,IAAIC,UAAYD,IAAIC,SAAS,WAAY,UAAW,CAC7D,M,CAGF,GAAI3D,KAAKY,eAAiBZ,KAAKuD,cAAgB,IAAMvD,KAAKoC,SAAWpC,KAAKqC,cAAe,CACvF,GAAIrC,KAAKuD,cAAgBvD,KAAKmD,WAAanD,KAAKoB,cAAe,CAC7DpB,KAAK4D,cAAgB,KACrB5D,KAAK6D,iBAAmB,MACxB7D,KAAK8D,iBAAmB,e,KACnB,CACL9D,KAAK4D,cAAgB,MACrB5D,KAAK6D,iBAAmB,KACxB7D,KAAK8D,iBAAmB,cAAAnC,OAAc3B,KAAKqD,cAAa,M,MAErD,CACLrD,KAAK4D,cAAgB,MACrB5D,KAAK6D,iBAAmB,MACxB7D,KAAK8D,iBAAmB,e,GAI5B9B,EAAAC,UAAA8B,kBAAA,WACE/D,KAAK6B,yBAA2BN,SAASyC,cAAc,OACvDhE,KAAKc,QAAQmD,cAAcC,YAAYlE,KAAK6B,0BAE5C7B,KAAKmE,eAAiB,IAAIC,eAAepE,KAAKC,cAC9CD,KAAKmE,eAAeE,QAAQrE,KAAKc,Q,EAGnCkB,EAAAC,UAAAqC,qBAAA,WACEtE,KAAK6B,yBAAyBoC,cAAcM,YAAYvE,KAAK6B,0BAE7D,GAAI7B,KAAKmE,eAAgB,CACvBnE,KAAKmE,eAAeK,Y,GAIxBxC,EAAAC,UAAAwC,OAAA,eAAAvE,EAAAF,KACE,IAAM0E,EAAuBC,QAAQ3E,KAAKc,QAAS,OACnD,IAAM8D,EAAyBD,QAAQ3E,KAAKc,QAAS,SACrD,IAAM+D,EAA0BF,QAAQ3E,KAAKc,QAAS,UACtD,IAAMgE,EAAkBH,QAAQ3E,KAAKc,QAAS,WAE9C,IAAMiE,EAAU,CACdC,OAAU,KACV,6BAA8BhF,KAAKG,eACnC,iBAAkBH,KAAKoC,OACvB,yBAA0BpC,KAAKqC,cAC/B,oBAAqBrC,KAAKwD,SAC1B,yBAA0BxD,KAAK4D,cAC/B,6BAA8B5D,KAAK6D,iBACnC,2BAA4B7D,KAAKiF,YACjC,oCAAqCL,EACrC,6BAA8BA,IAAkBE,IAAoBJ,EACpE,qBAAsBG,GAGxB,OACEK,EAACC,KAAI,KACHD,EAAA,OAAKzD,MAAO,CAACa,WAAY,GAAAX,OAAG3B,KAAKsC,WAAU,OAAO8C,MAAOL,GACvDG,EAAA,OACEE,MAAM,gBACNC,IAAK,SAACC,GAAE,OAAMpF,EAAK0C,aAAe0C,CAA1B,GAERJ,EAAA,OACEE,MAAM,eACNC,IAAK,SAACC,GAAE,OAAMpF,EAAKkD,YAAckC,CAAzB,GAERJ,EAAA,OACEE,MAAM,kBACNC,IAAK,SAACC,GAAE,OAAMpF,EAAKoD,eAAiBgC,CAA5B,GAERJ,EAAA,OAAKE,MAAM,wBACTF,EAAA,KAAGK,KAAMvF,KAAKuF,KAAMH,MAAM,oBAAmB,cAAcpF,KAAKwF,iBAAmB,eACjFN,EAAA,QAAMO,KAAK,YAKjBP,EAAA,OACEE,MAAM,kBACN3D,MAAO,CAACiE,UAAW1F,KAAK8D,kBACxBuB,IAAK,SAACC,GAAE,OAAMpF,EAAKmB,eAAiBiE,CAA5B,GAERJ,EAAA,OAAKE,MAAM,yBACTF,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMO,KAAK,SAEbP,EAAA,OAAKE,MAAM,yBACTF,EAAA,QAAMO,KAAK,WAEbP,EAAA,OAAKE,MAAM,2BACTF,EAAA,QAAMO,KAAK,gBAMnBP,EAAA,OACEE,MAAM,iBACNC,IAAK,SAACC,GAAE,OAAMpF,EAAKiB,cAAgBmE,CAA3B,GAERJ,EAAA,OAAKE,MAAM,wBACTF,EAAA,QAAMO,KAAK,e,qIA7RJ,G"}
+{"version":3,"names":["stzhHeaderCss","StzhHeader","this","handleResize","_this","stickyDisabled","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","readTask","isSmall","media","matches","isSmallheader","headerTop","element","offsetTop","headerHeight","offsetHeight","appnavHeight","appnavElement","metabarHeight","metabarElement","writeTask","document","documentElement","style","setProperty","concat","preventAppnavPlaceholder","appnavPlaceholderElement","height","scrollListener","class_1","prototype","updatePosition","removeSticky","sticky","stickyClosing","paddingTop","scrollingUp","belowStayStickyPoint","belowStartStickyPoint","updateMetabarPosition","animationEnd_1","innerElement","removeEventListener","addEventListener","scrollTop","scrollY","lastScrollTop","innerHeight","mainHeight","mainElement","logobarHeight","logobarElement","headerOverlap","hideLogo","CSS","supports","stickyMetabar","stickyMetabarEnd","metabarTransform","connectedCallback","createElement","parentElement","appendChild","resizeObserver","ResizeObserver","observe","disconnectedCallback","removeChild","disconnect","render","navSlotUsed","hasSlot","loginSlotUsed","appnavSlotUsed","langNavSlotUsed","classes","header","metabarStay","h","Host","class","ref","el","href","logoAnalyticsId","name","transform"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/**\n * @prop --stzh-header-height: **Global**: Height of header (readonly variable)\n * @prop --stzh-header-appnav-height: **Global**: Height of appnav header if exists (readonly variable)\n * @prop --stzh-header-metabar-height: **Global**: Height of metabar header (readonly variable)\n * @prop --stzh-header-sticky-appnav-height: **Global**: Height of appnav header if he is sticky (readonly variable)\n */\n\n@keyframes stzh-header-open {\n\tfrom {\n\t\ttransform: translateY(-100%);\n\t}\n\n\tto {\n\t\ttransform: translateY(0%);\n\t}\n}\n\n@keyframes stzh-header-close {\n\tfrom {\n\t\ttransform: translateY(0%);\n\t}\n\n\tto {\n\t\ttransform: translateY(-100%);\n\t}\n}\n\n:host {\n  @media print {\n    display: none;\n  }\n\n  ::slotted([slot=\"logo\"]) {\n    width: auto;\n    height: 100%;\n  }\n\n  ::slotted(stzh-logo[slot=\"logo\"]) {\n    --width: auto;\n    --height: 100%;\n  }\n\n  ::slotted(stzh-logo[slot=\"logo\"]:not([type=\"stzh\"]):not([type=\"none\"])) {\n    --width: auto;\n    --height: 31px;\n\n    @include mq($from: medium) {\n      --height: 35px;\n    }\n\n    @include mq($from: ultra) {\n      --height: 53px;\n    }\n  }\n\n  ::slotted(stzh-popover[slot=\"login\"]) {\n    display: flex;\n    flex-grow: 1;\n\n    .stzh-popover,\n    .stzh-popover__trigger {\n      display: flex;\n      flex-grow: 1;\n    }\n\n    .stzh-popover .stzh-popover__trigger stzh-button .stzh-button {\n      @include fontSize('micro');\n      height: auto;\n\n      @include mq($to: smallheader) {\n        border-radius: 0;\n        height: 100%;\n      }\n\n      &__badge {\n        @include mq($to: smallheader) {\n          top: 8px;\n          right: 7px;\n        }\n      }\n    }\n  }\n}\n\n.header {\n  &__inner {\n    transition: box-shadow $baseTransitionAnimationSpeed;\n  }\n\n  &__main {\n    position: relative;\n    z-index: $zIndexHeader;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    box-shadow: $boxShadowHeader;\n    background-color: $colorWhite;\n    transition: box-shadow $baseTransitionAnimationSpeed;\n\n    @include mq($from: smallheader) {\n      box-shadow: none;\n      flex-direction: column-reverse;\n      border-bottom: 1px solid $baseBorderColor;\n      padding-top: $headerMetabarHeightRegularUp;\n\n      @supports (position: sticky) {\n        padding-top: 0;\n      }\n    }\n  }\n\n  &__metabar {\n    border-top: 1px solid $baseBorderColor;\n\n    @include mq($from: smallheader) {\n      border-top: none;\n      background-color: $colorGrey5;\n      z-index: 1;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n\n      @supports (position: sticky) {\n        position: sticky;\n      }\n    }\n  }\n\n  &__metabar-inner {\n    @include container;\n    display: flex;\n    align-items: stretch;\n    height: $headerMetabarHeight;\n\n\t\t@include mq($to: smallheader) {\n      // overwrite container margin for smallheader\n      // to be able to use fullwidth of metabar\n      margin: 0 auto;\n    }\n\n\t\t@include mq($from: smallheader) {\n      justify-content: flex-end;\n      align-items: center;\n      height: $headerMetabarHeightRegularUp;\n    }\n  }\n\n  &__metabar-nav,\n  &__metabar-langnav {\n    display: none;\n\n    @include mq($from: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &__metabar-login {\n    display: flex;\n    flex-basis: 50%;\n\n    &:not(:empty) {\n  \t\t@include mq($from: smallheader) {\n        flex-basis: auto;\n        margin-left: space('small');\n      }\n    }\n  }\n\n  &__metabar-langnav {\n    &:not(:empty) {\n      @include mq($from: smallheader) {\n        margin-left: space('medium');\n      }\n    }\n  }\n\n  &__logobar {\n    display: flex;\n    background-color: $colorPrimary;\n  }\n\n  &__logobar-logo {\n    box-sizing: content-box;\n    display: flex;\n    background-color: $colorWhite;\n    overflow: hidden;\n    width: calc(100% - #{$headerMetabarHeight} - 1px);\n\n\t\t@include mq($from: smallheader) {\n      width: 400px;\n    }\n\n\t\t@include mq($from: large) {\n\t\t  width: 460px;\n\t\t}\n\n\t\t@include mq($from: ultra) {\n  \t\tpadding-left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n\t\t}\n  }\n\n  &__logo-link {\n    flex-grow: 1;\n    display: inline-flex;\n\t\theight: 76px;\n    padding: space('medium');\n    padding-left: $containerMargin;\n    transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: smallheader) {\n\t\t\theight: 90px;\n\t\t}\n\n\t\t@include mq($from: large) {\n\t\t\theight: 120px;\n      padding: space('large');\n\t\t\tpadding-left: $containerMarginLarge;\n    }\n\n\t\t@include mq($from: ultra) {\n      padding-left: 0;\n    }\n  }\n\n  &__appnav {\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: calc(#{$zIndexHeader} - 1);\n    box-shadow: $boxShadowHeader;\n    background-color: $colorWhite;\n\n    @include mq($from: small) {\n      position: static;\n      box-shadow: none;\n    }\n  }\n\n  &__appnav-inner {\n    @include mq($from: small) {\n      @include container;\n    }\n  }\n\n  /* Hide logo */\n\n  &--hide-logo &__logo-link {\n    opacity: 0;\n  }\n\n  /* Has empty metabar */\n\n  &--has-empty-metabar-mobile &__metabar {\n    @include mq($to: smallheader) {\n      display: none;\n    }\n  }\n\n  /* Has empty metabar */\n\n  &--has-empty-metabar &__metabar {\n    display: none;\n  }\n\n  /* Metabar Stay */\n\n  &--has-metabar-stay &__metabar-langnav {\n    @include mq($to: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &--has-metabar-stay &__metabar-nav {\n    @include mq($to: smallheader) {\n      display: inline-flex;\n    }\n  }\n\n  &--has-metabar-stay &__main {\n    @include mq($to: smallheader) {\n      box-shadow: none;\n      flex-direction: column-reverse;\n      border-bottom: 1px solid $baseBorderColor;\n    }\n  }\n\n  &--has-metabar-stay &__metabar {\n    @include mq($to: smallheader) {\n      display: block;\n      border-top: none;\n      background-color: $colorGrey5;\n    }\n  }\n\n  &--has-metabar-stay &__metabar-inner {\n    @include mq($to: smallheader) {\n      @include container;\n      justify-content: flex-end;\n      align-items: center;\n    }\n  }\n\n  /* Sticky metabar */\n\n  &--sticky-metabar:not(#{&}--sticky):not(#{&}--is-sticky-disabled) &__metabar {\n    @include mq($from: smallheader) {\n      position: fixed;\n    }\n  }\n\n  /* Sticky variant */\n\n  &--sticky &__inner {\n\t\t@include mq($from: small) {\n      animation: stzh-header-open $baseTransitionAnimationSpeed;\n      z-index: $zIndexHeader;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin: 0;\n      box-shadow: $boxShadowHeader;\n    }\n  }\n\n  &--sticky &__main {\n\t\t@include mq($to: small) {\n      animation: stzh-header-open $baseTransitionAnimationSpeed;\n      z-index: $zIndexHeader;\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin: 0;\n    }\n\n\t\t@include mq($from: small) {\n      box-shadow: none;\n    }\n  }\n\n  &--sticky &__appnav {\n\t\t@include mq($to: smallheader) {\n      border-top: 1px solid $baseBorderColor;\n    }\n  }\n\n  &--sticky &__metabar {\n    border-top: none;\n  }\n\n  &--sticky#{&}--has-empty-metabar &__metabar {\n    display: none;\n  }\n\n  &--sticky#{&}--has-empty-metabar:not(#{&}--has-appnav) &__main {\n\t\t@include mq($from: small) {\n      border-bottom: none;\n    }\n  }\n\n  &--sticky &__logobar {\n    display: none;\n  }\n\n  &--sticky#{&}--has-metabar-stay &__main {\n\t\t@include mq($to: small) {\n      box-shadow: $boxShadowHeader;\n    }\n  }\n\n  /* Sticky closing */\n\n  &--sticky-closing &__inner {\n\t\t@include mq($from: small) {\n      animation: stzh-header-close $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &--sticky-closing &__main {\n\t\t@include mq($to: small) {\n      animation: stzh-header-close $baseTransitionAnimationSpeed;\n    }\n  }\n\n  /* Sticky disabled */\n\n  &--is-sticky-disabled &__main {\n    @include mq($from: smallheader) {\n      @supports (position: sticky) {\n        padding-top: $headerMetabarHeightRegularUp;\n      }\n    }\n  }\n\n  &--is-sticky-disabled &__metabar {\n    @include mq($from: smallheader) {\n      @supports (position: sticky) {\n        position: absolute;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Listen,\n  Host,\n  State,\n  h,\n  writeTask,\n  readTask,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot logo - Slot for brand logo\n * @slot nav - Slot for `stzh-metanav` element\n * @slot login - Slot for login button\n * @slot appnav - Slot for `stzh-appnav` element\n * @slot langnav - Slot for `stzh-langnav` element\n */\n@Component({\n  tag: \"stzh-header\",\n  styleUrl: \"stzh-header.scss\",\n  scoped: true\n})\nexport class StzhHeader {\n  /** Portal link (for logo) */\n  @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether grey metabar should stay (on top) on mobile */\n  @Prop() metabarStay: boolean = false;\n\n  /** Whether sticky behaviour should be disabled */\n  @Prop() stickyDisabled: boolean = false;\n\n  /**\n   * Prevent creating a appnav placeholder element\n   * with the size of appnav inside header parent element.\n   * This prevents the fixed appnav to overlap\n   * content at the end on mikro breakpoint,\n   * but could lead to problems with certain layouts.\n   */\n  @Prop() preventAppnavPlaceholder: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value is \"Header Logo\".\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @State() hideLogo: boolean = false;\n  @State() paddingTop: number;\n  @State() metabarTransform: string;\n  @State() sticky: boolean = false;\n  @State() stickyClosing: boolean = false;\n  @State() stickyMetabar: boolean = false;\n  @State() stickyMetabarEnd: boolean = false;\n\n  @Element() element: HTMLStzhHeaderElement;\n\n  /** Update position / sticky state of header */\n  @Method()\n  async updatePosition() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    const removeSticky = () => {\n      this.sticky = false;\n      this.stickyClosing = false;\n      this.paddingTop = 0;\n    }\n\n    if (this.scrollingUp && this.belowStayStickyPoint) {\n      if (!this.sticky && this.belowStartStickyPoint) {\n        this.paddingTop = this.headerHeight;\n        this.sticky = true;\n      }\n\n      this.updateMetabarPosition();\n    } else {\n      if (this.sticky && this.belowStayStickyPoint) {\n        const animationEnd = () => {\n          removeSticky();\n          this.updateMetabarPosition();\n          this.innerElement.removeEventListener(\"animationend\", animationEnd);\n        };\n\n        this.innerElement.addEventListener(\"animationend\", animationEnd);\n        this.stickyClosing = true;\n      } else {\n        removeSticky();\n        this.updateMetabarPosition();\n      }\n    }\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  scrollListener() {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    readTask(() => {\n      this.scrollTop = window.scrollY;\n      this.scrollingUp = this.lastScrollTop && this.lastScrollTop > this.scrollTop;\n      this.lastScrollTop = this.scrollTop;\n\n      this.innerHeight = this.innerElement ? this.innerElement.offsetHeight : 0;\n      this.mainHeight = this.mainElement ? this.mainElement.offsetHeight : 0;\n\n      this.logobarHeight = this.sticky\n        ? this.isSmall\n          ? this.headerHeight - this.innerHeight\n          : this.headerHeight - this.mainHeight\n        : this.logobarElement\n          ? this.logobarElement.offsetHeight\n          : 0;\n\n      this.belowStayStickyPoint = this.scrollTop > this.logobarHeight;\n      this.belowStartStickyPoint = this.scrollTop > this.headerHeight;\n\n      this.headerOverlap = (this.headerTop - this.scrollTop) / -1;\n      this.hideLogo = this.isSmallheader && this.headerOverlap > 10;\n    });\n\n    writeTask(() => {\n      this.updatePosition();\n    });\n  }\n\n  private scrollTop: number;\n  private lastScrollTop: number;\n  private headerOverlap: number;\n  private scrollingUp: boolean;\n  private belowStayStickyPoint: boolean;\n  private belowStartStickyPoint: boolean;\n\n  private headerTop: number;\n  private headerHeight: number;\n  private innerHeight: number;\n  private mainHeight: number;\n  private metabarHeight: number;\n  private logobarHeight: number;\n  private appnavHeight: number;\n\n  private isSmall: boolean;\n  private isSmallheader: boolean;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private innerElement: HTMLDivElement;\n  private mainElement: HTMLDivElement;\n  private logobarElement: HTMLDivElement;\n  private metabarElement: HTMLDivElement;\n  private appnavElement: HTMLDivElement;\n  private appnavPlaceholderElement: HTMLDivElement;\n\n  private handleResize = () => {\n    if (this.stickyDisabled) {\n      return;\n    }\n\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(() => {\n      readTask(() => {\n        this.isSmall = media(\"small\").matches;\n        this.isSmallheader = media(\"smallheader\").matches;\n\n        this.headerTop = this.element.offsetTop;\n        this.headerHeight = this.element.offsetHeight;\n        this.appnavHeight = this.appnavElement ? this.appnavElement.offsetHeight : 0;\n        this.metabarHeight = this.metabarElement ? this.metabarElement.offsetHeight : 0;\n      });\n\n      writeTask(() => {\n        document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-appnav-height', `${this.appnavHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n\n        if (this.appnavHeight && !this.isSmall && !this.preventAppnavPlaceholder) {\n          this.appnavPlaceholderElement.style.height = `${this.appnavHeight}px`;\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', `${this.appnavHeight}px`);\n        } else {\n          this.appnavPlaceholderElement.style.height = \"0px\";\n          document.documentElement.style.setProperty('--stzh-header-sticky-appnav-height', \"0px\");\n        }\n      });\n\n      this.scrollListener();\n    });\n  }\n\n  private updateMetabarPosition() {\n    if (!this.metabarElement || this.stickyDisabled) {\n      return;\n    }\n\n    if (CSS && CSS.supports && CSS.supports(\"position\", \"sticky\")) {\n      return;\n    }\n\n    if (this.isSmallheader && this.headerOverlap > 0 && !this.sticky && !this.stickyClosing) {\n      if (this.headerOverlap < this.mainHeight - this.metabarHeight) {\n        this.stickyMetabar = true;\n        this.stickyMetabarEnd = false;\n        this.metabarTransform = \"translateY(0)\";\n      } else {\n        this.stickyMetabar = false;\n        this.stickyMetabarEnd = true;\n        this.metabarTransform = `translateY(${this.logobarHeight}px)`;\n      }\n    } else {\n      this.stickyMetabar = false;\n      this.stickyMetabarEnd = false;\n      this.metabarTransform = \"translateY(0)\";\n    }\n  }\n\n  connectedCallback() {\n    this.appnavPlaceholderElement = document.createElement(\"div\");\n    this.element.parentElement.appendChild(this.appnavPlaceholderElement);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const navSlotUsed: boolean = hasSlot(this.element, \"nav\");\n    const loginSlotUsed: boolean = hasSlot(this.element, \"login\");\n    const appnavSlotUsed: boolean = hasSlot(this.element, \"appnav\");\n    const langNavSlotUsed = hasSlot(this.element, \"langnav\");\n\n    const classes = {\n      \"header\": true,\n      \"header--is-sticky-disabled\": this.stickyDisabled,\n      \"header--sticky\": this.sticky,\n      \"header--sticky-closing\": this.stickyClosing,\n      \"header--hide-logo\": this.hideLogo,\n      \"header--sticky-metabar\": this.stickyMetabar,\n      \"header--sticky-metabar-end\": this.stickyMetabarEnd,\n      \"header--has-metabar-stay\": this.metabarStay,\n      \"header--has-empty-metabar-mobile\": !loginSlotUsed, // check for searchfield and burger slot when implemented\n      \"header--has-empty-metabar\": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,\n      \"header--has-appnav\": appnavSlotUsed\n    };\n\n    return (\n      <Host>\n        <div style={{paddingTop: `${this.paddingTop}px`}} class={classes}>\n          <div\n            class=\"header__inner\"\n            ref={(el) => (this.innerElement = el as HTMLDivElement)}\n          >\n            <div\n              class=\"header__main\"\n              ref={(el) => (this.mainElement = el as HTMLDivElement)}\n            >\n              <div\n                class=\"header__logobar\"\n                ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__logobar-logo\">\n                  <a href={this.href} class=\"header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n                    <slot name=\"logo\"></slot>\n                  </a>\n                </div>\n              </div>\n\n              <div\n                class=\"header__metabar\"\n                style={{transform: this.metabarTransform}}\n                ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n              >\n                <div class=\"header__metabar-inner\">\n                  <div class=\"header__metabar-nav\">\n                    <slot name=\"nav\"></slot>\n                  </div>\n                  <div class=\"header__metabar-login\">\n                    <slot name=\"login\"></slot>\n                  </div>\n                  <div class=\"header__metabar-langnav\">\n                    <slot name=\"langnav\"></slot>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div\n              class=\"header__appnav\"\n              ref={(el) => (this.appnavElement = el as HTMLDivElement)}\n            >\n              <div class=\"header__appnav-inner\">\n                <slot name=\"appnav\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-hspace_2.entry.js

@@ -0,0 +1,2 @@
+import{r as registerInstance,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{p as parseISODate}from"./date-utils-c0d90fa4.js";var stzhHspaceCss=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--h-space:var(--stzh-space-default);--h-around-left:0;--h-around-right:0;--h-around:0;display:-ms-flexbox;display:flex}:host ::slotted(*){max-width:100%;padding-left:calc(var(--h-space) * var(--h-around-left));padding-right:calc(var(--h-space) * var(--h-around-right));margin:0}:host ::slotted(*:not(:last-child)){margin-right:calc(var(--h-space) * (1 - var(--h-around)))}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:1;flex-grow:1}:host(:empty),:host([around]:not([around=false])){--h-around-left:1;--h-around-right:1;--h-around:1}:host(:empty){width:var(--h-space)}:host([around-left]:not([around-left=false])){--h-around-left:1;--h-around:1}:host([around-right]:not([around-right=false])){--h-around-right:1;--h-around:1}:host([border=left]),:host([border=left-right]){border-left:0.0625rem solid var(--stzh-base-border-color)}:host([border=right]),:host([border=left-right]){border-right:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--h-space:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host([curve=tiny]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--h-space:var(--stzh-space-medium)}}:host([curve=small]){--h-space:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host([curve=small]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--h-space:var(--stzh-space-large)}}:host([curve=regular]){--h-space:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host([curve=regular]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([curve=regular]){--h-space:var(--stzh-space-xlarge)}}:host([curve=medium]){--h-space:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host([curve=medium]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--h-space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--h-space:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host([curve=large]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--h-space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--h-space:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([curve=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=big]){--h-space:var(--stzh-space-xbig)}}:host([curve=huge]){--h-space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([curve=huge]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([curve=huge]){--h-space:var(--stzh-space-huge)}}:host([size=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--h-space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--h-space:var(--stzh-space-xsmall)}:host([size=small]){--h-space:var(--stzh-space-small)}:host([size=medium]){--h-space:var(--stzh-space-medium)}:host([size=large]){--h-space:var(--stzh-space-large)}:host([size=xlarge]){--h-space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--h-space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}:host([size=big]){--h-space:var(--stzh-space-big)}:host([size=xbig]){--h-space:var(--stzh-space-xbig)}:host([size=huge]){--h-space:var(--stzh-space-huge)}:host([size=xhuge]){--h-space:var(--stzh-space-xhuge)}:host([size=none]){--h-space:var(--stzh-space-none)}:host([size=default]){--h-space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 800px){:host([size-smallheader=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 800px){:host([size-smallheader=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 800px){:host([size-smallheader=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 800px){:host([size-smallheader=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 800px){:host([size-smallheader=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 800px){:host([size-smallheader=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 800px){:host([size-smallheader=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 800px){:host([size-smallheader=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1024px){:host([size-medium=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){:host([size-medium=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){:host([size-medium=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host([size-medium=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host([size-medium=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([size-medium=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1024px){:host([size-medium=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){:host([size-medium=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1024px){:host([size-medium=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1024px){:host([size-medium=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--h-space:var(--stzh-space-default)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxsmall]){--h-space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xxsmall]){--h-space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xsmall]){--h-space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=small]){--h-space:var(--stzh-space-small)}}@media screen and (min-width: 1440px){:host([size-ultra=medium]){--h-space:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){:host([size-ultra=large]){--h-space:var(--stzh-space-large)}}@media screen and (min-width: 1440px){:host([size-ultra=xlarge]){--h-space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxlarge]){--h-space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxlarge]){--h-space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxxlarge]){--h-space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=big]){--h-space:var(--stzh-space-big)}}@media screen and (min-width: 1440px){:host([size-ultra=xbig]){--h-space:var(--stzh-space-xbig)}}@media screen and (min-width: 1440px){:host([size-ultra=huge]){--h-space:var(--stzh-space-huge)}}@media screen and (min-width: 1440px){:host([size-ultra=xhuge]){--h-space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1440px){:host([size-ultra=none]){--h-space:var(--stzh-space-none)}}@media screen and (min-width: 1440px){:host([size-ultra=default]){--h-space:var(--stzh-space-default)}}.stzh-hspace{-ms-flex-positive:1;flex-grow:1;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start;padding:0;margin:0;}.stzh-hspace--border-left{border-left:0.0625rem solid var(--stzh-base-border-color)}.stzh-hspace--border-right{border-right:0.0625rem solid var(--stzh-base-border-color)}.stzh-hspace--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-hspace--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-hspace--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-hspace--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-hspace--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-hspace--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-hspace--items-center{-ms-flex-align:center;align-items:center}.stzh-hspace--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-hspace--items-stretch{-ms-flex-align:stretch;align-items:stretch}";var StzhHspace=function(){function e(e){registerInstance(this,e);this.curve="none";this.size=undefined;this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.justify="start";this.items="start";this.around=false;this.aroundLeft=false;this.aroundRight=false;this.border="none"}e.prototype.render=function(){var e;return h(Host,null,h("div",{class:(e={"stzh-hspace":true},e["stzh-hspace--justify-".concat(this.justify)]=!!this.justify,e["stzh-hspace--items-".concat(this.items)]=!!this.items,e)},h("slot",null)))};return e}();StzhHspace.style=stzhHspaceCss;var stzhShowCss=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--show-display:block;--hide-display:none;display:var(--hide-display)}:host([mikro]){display:var(--show-display)}:host([mikro=false]){display:var(--hide-display)}@media screen and (min-width: 600px){:host([small]){display:var(--show-display)}}@media screen and (min-width: 600px){:host([small=false]){display:var(--hide-display)}}@media screen and (min-width: 1024px){:host([medium]){display:var(--show-display)}}@media screen and (min-width: 1024px){:host([medium=false]){display:var(--hide-display)}}@media screen and (min-width: 1260px){:host([large]){display:var(--show-display)}}@media screen and (min-width: 1260px){:host([large=false]){display:var(--hide-display)}}@media screen and (min-width: 1440px){:host([ultra]){display:var(--show-display)}}@media screen and (min-width: 1440px){:host([ultra=false]){display:var(--hide-display)}}";var StzhShow=function(){function e(e){registerInstance(this,e);this.mikro=undefined;this.small=undefined;this.medium=undefined;this.large=undefined;this.ultra=undefined;this.hideFromDate=undefined}e.prototype.hideFromDateWatcher=function(e){if(typeof e==="string"){this._hideFromDate=parseISODate(e)}else{this._hideFromDate=e}};e.prototype.componentWillLoad=function(){this.hideFromDateWatcher(this.hideFromDate)};e.prototype.render=function(){return h(Host,{hidden:this._hideFromDate&&Date.now()>=this._hideFromDate.getTime()},h("slot",null))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{hideFromDate:["hideFromDateWatcher"]}},enumerable:false,configurable:true});return e}();StzhShow.style=stzhShowCss;export{StzhHspace as stzh_hspace,StzhShow as stzh_show};
+//# sourceMappingURL=stzh-hspace_2.entry.js.map

package/dist/esm-es5/stzh-hspace_2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhHspaceCss","StzhHspace","prototype","render","h","Host","class","_a","concat","this","justify","items","stzhShowCss","StzhShow","hideFromDateWatcher","newValue","_hideFromDate","parseISODate","componentWillLoad","hideFromDate","hidden","Date","now","getTime"],"sources":["src/components/stzh-hspace/stzh-hspace.scss?tag=stzh-hspace&encapsulation=shadow","src/components/stzh-hspace/stzh-hspace.tsx","src/components/stzh-show/stzh-show.scss?tag=stzh-show&encapsulation=shadow","src/components/stzh-show/stzh-show.tsx"],"sourcesContent":[":host {\n  --h-space: #{space()};\n  --h-around-left: 0;\n  --h-around-right: 0;\n  --h-around: 0;\n\n  display: flex;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding-left: calc(var(--h-space) * var(--h-around-left));\n    padding-right: calc(var(--h-space) * var(--h-around-right));\n    margin: 0;\n  }\n\n  ::slotted(*:not(:last-child)) {\n    margin-right: calc(var(--h-space) * (1 - var(--h-around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty),\n:host([around]:not([around=\"false\"])) {\n  --h-around-left: 1;\n  --h-around-right: 1;\n  --h-around: 1;\n}\n\n:host(:empty) {\n  width: var(--h-space);\n}\n\n:host([around-left]:not([around-left=\"false\"])) {\n  --h-around-left: 1;\n  --h-around: 1;\n}\n\n:host([around-right]:not([around-right=\"false\"])) {\n  --h-around-right: 1;\n  --h-around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space variants */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-h-space {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --h-space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --h-space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-h-space {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --h-space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-h-space {\n      :host([size=\"#{$space}\"]) {\n        --h-space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-hspace {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: 0;\n  margin: 0;\n\n  &--border-left {\n    border-left: 1px solid $baseBorderColor;\n  }\n\n  &--border-right {\n    border-right: 1px solid $baseBorderColor;\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be horizontically spaced\n */\n@Component({\n  tag: \"stzh-hspace\",\n  styleUrl: \"stzh-hspace.scss\",\n  shadow: true\n})\nexport class StzhHspace {\n  /** Type of curve (see [Spacings docs page](/docs/tokens-spacings--docs#curves) for more info). */\n  @Prop({ reflect: true }) curve: Space.Curves = \"none\";\n\n  /** Type of size (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) size: Space.Sizes;\n  /** Type of size above small breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeSmall: Space.Sizes;\n  /** Type of size above medium breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeMedium: Space.Sizes;\n  /** Type of size above large breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeLarge: Space.Sizes;\n  /** Type of size above ultra breakpoint (see [Spacings docs page](/docs/tokens-spacings--docs#values) for more info). */\n  @Prop({ reflect: true }) sizeUltra: Space.Sizes;\n\n  /** Alignment */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements (padding instead of margin) */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only left) */\n  @Prop({ reflect: true }) aroundLeft: boolean = false;\n\n  /** Apply spacing to slotted elements (padding instead of margin, only right) */\n  @Prop({ reflect: true }) aroundRight: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"left\" | \"right\" | \"left-right\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-hspace\": true,\n            [`stzh-hspace--justify-${this.justify}`]: !!this.justify,\n            [`stzh-hspace--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --show-display: Display value that is used when content is shown (default `block`)\n * @prop --hide-display: Display value that is used when content is hidden (default `none`)\n */\n\n:host {\n  --show-display: block;\n  --hide-display: none;\n\n  display: var(--hide-display);\n}\n\n/* Mikro */\n\n:host([mikro]) {\n  display: var(--show-display);\n}\n\n:host([mikro=\"false\"]) {\n  display: var(--hide-display);\n}\n\n/* Small */\n\n:host([small]) {\n  @include mq($from: small) {\n    display: var(--show-display);\n  }\n}\n\n:host([small=\"false\"]) {\n  @include mq($from: small) {\n    display: var(--hide-display);\n  }\n}\n\n/* Medium */\n\n:host([medium]) {\n  @include mq($from: medium) {\n    display: var(--show-display);\n  }\n}\n\n:host([medium=\"false\"]) {\n  @include mq($from: medium) {\n    display: var(--hide-display);\n  }\n}\n\n/* Large */\n\n:host([large]) {\n  @include mq($from: large) {\n    display: var(--show-display);\n  }\n}\n\n:host([large=\"false\"]) {\n  @include mq($from: large) {\n    display: var(--hide-display);\n  }\n}\n\n/* Ultra */\n\n:host([ultra]) {\n  @include mq($from: ultra) {\n    display: var(--show-display);\n  }\n}\n\n:host([ultra=\"false\"]) {\n  @include mq($from: ultra) {\n    display: var(--hide-display);\n  }\n}","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { parseISODate } from \"../../utils/date-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-show\",\n  styleUrl: \"stzh-show.scss\",\n  shadow: true\n})\nexport class StzhShow {\n  /** Mikro */\n  @Prop({ reflect: true }) mikro: boolean;\n\n  /** Small */\n  @Prop({ reflect: true }) small: boolean;\n\n  /** Medium */\n  @Prop({ reflect: true }) medium: boolean;\n\n  /** Large */\n  @Prop({ reflect: true }) large: boolean;\n\n  /** Ultra */\n  @Prop({ reflect: true }) ultra: boolean;\n\n  /** Hide from date */\n  @Prop() hideFromDate: Date | string;\n  private _hideFromDate: Date;\n\n  @Watch(\"hideFromDate\")\n  hideFromDateWatcher(newValue: Date | string) {\n    if (typeof newValue === \"string\") {\n      this._hideFromDate = parseISODate(newValue);\n    } else {\n      this._hideFromDate = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhShowElement;\n\n  componentWillLoad() {\n    this.hideFromDateWatcher(this.hideFromDate);\n  }\n\n  render() {\n    return (\n      <Host hidden={this._hideFromDate && Date.now() >= this._hideFromDate.getTime()}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2IAAA,IAAMA,cAAgB,++a,ICiBTC,WAAU,W,kDAE0B,O,sIAcI,Q,WAGJ,Q,YAGJ,M,gBAGI,M,iBAGC,M,YAG4B,M,CAE5EA,EAAAC,UAAAC,OAAA,W,MACE,OACEC,EAACC,KAAI,KACHD,EAAA,OACEE,OAAKC,EAAA,CACH,cAAe,MACfA,EAAC,wBAAAC,OAAwBC,KAAKC,YAAcD,KAAKC,QACjDH,EAAC,sBAAAC,OAAsBC,KAAKE,UAAYF,KAAKE,M,IAG/CP,EAAA,c,WA3Ca,G,+BCjBvB,IAAMQ,YAAc,qhD,ICmBPC,SAAQ,W,6KAqBnBA,EAAAX,UAAAY,oBAAA,SAAoBC,GAClB,UAAWA,IAAa,SAAU,CAChCN,KAAKO,cAAgBC,aAAaF,E,KAC7B,CACLN,KAAKO,cAAgBD,C,GAMzBF,EAAAX,UAAAgB,kBAAA,WACET,KAAKK,oBAAoBL,KAAKU,a,EAGhCN,EAAAX,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,CAACe,OAAQX,KAAKO,eAAiBK,KAAKC,OAASb,KAAKO,cAAcO,WACnEnB,EAAA,a,2QAtCa,G"}

package/dist/esm-es5/stzh-imagecomparison.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,o){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,a){function n(t){try{c(o.next(t))}catch(t){a(t)}}function r(t){try{c(o["throw"](t))}catch(t){a(t)}}function c(t){t.done?i(t.value):s(t.value).then(n,r)}c((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,s,a,n;return n={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function r(t){return function(e){return c([t,e])}}function c(r){if(o)throw new TypeError("Generator is already executing.");while(n&&(n=0,r[0]&&(i=0)),i)try{if(o=1,s&&(a=r[0]&2?s["return"]:r[0]?s["throw"]||((a=s["return"])&&a.call(s),0):s.next)&&!(a=a.call(s,r[1])).done)return a;if(s=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;s=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){i.label=r[1];break}if(r[0]===6&&i.label<a[1]){i.label=a[1];a=r;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(r);break}if(a[2])i.ops.pop();i.trys.pop();continue}r=e.call(t,i)}catch(t){r=[6,t];s=0}finally{o=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhImagecomparisonCss=".sc-stzh-imagecomparison-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.1875rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;justify-items:center;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:2.5rem;height:2.5rem;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background-color:var(--stzh-color-white);border-radius:5rem;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));position:absolute;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black48);color:var(--stzh-color-white)}@media screen and (min-width: 1024px){.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison,.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));color:var(--stzh-color-white)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";var StzhImageComparison=function(){function t(t){var e=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.handleInput=function(t){var i=e.inputElement.value;e.value=Number(i);e.stzhChange.emit({component:"stzh-imagecomparison",originalEvent:t,value:e.value})};this.localization=undefined;this.hintLeft="";this.hintRight="";this.caption="";this.copyright="";this.value=50;this.label=undefined;this.a11yDescribedby=""}t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"imagecomparison")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t=this;var e={"stzh-imagecomparison":true};return h(Host,{"aria-roledescription":this.localization.label,style:{"--exposure":"".concat(this.value.toString(),"%")}},h("div",{class:e},h("div",{class:"stzh-imagecomparison__element"},h("slot",{name:"image-before"}),h("slot",{name:"image-after"}),h("label",{class:"stzh-imagecomparison__label","aria-label":this.label||this.localization.label,"aria-describedby":this.a11yDescribedby||null},h("div",{class:"stzh-imagecomparison__slider-line"}),h("div",{class:"stzh-imagecomparison__slider-icon-wrapper"},h("stzh-icon",{class:"stzh-imagecomparison__slider-icon-left",name:"angle-left"}),h("stzh-icon",{class:"stzh-imagecomparison__slider-icon-right",name:"angle-right"})),h("input",{type:"range",class:"stzh-imagecomparison__control",min:"0",max:"100",ref:function(e){return t.inputElement=e},onInput:this.handleInput})),h("div",{class:"stzh-imagecomparison__hint-wrapper"},h("span",{class:"stzh-imagecomparison__hint-left"},this.hintLeft?this.hintLeft:h("slot",{name:"hint-left"})),h("span",{class:"stzh-imagecomparison__hint-right"},this.hintRight?this.hintRight:h("slot",{name:"hint-right"}))))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhImageComparison.style=stzhImagecomparisonCss;export{StzhImageComparison as stzh_imagecomparison};
+var __awaiter=this&&this.__awaiter||function(t,e,i,o){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,a){function n(t){try{c(o.next(t))}catch(t){a(t)}}function r(t){try{c(o["throw"](t))}catch(t){a(t)}}function c(t){t.done?i(t.value):s(t.value).then(n,r)}c((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,s,a,n;return n={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function r(t){return function(e){return c([t,e])}}function c(r){if(o)throw new TypeError("Generator is already executing.");while(n&&(n=0,r[0]&&(i=0)),i)try{if(o=1,s&&(a=r[0]&2?s["return"]:r[0]?s["throw"]||((a=s["return"])&&a.call(s),0):s.next)&&!(a=a.call(s,r[1])).done)return a;if(s=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;s=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){i.label=r[1];break}if(r[0]===6&&i.label<a[1]){i.label=a[1];a=r;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(r);break}if(a[2])i.ops.pop();i.trys.pop();continue}r=e.call(t,i)}catch(t){r=[6,t];s=0}finally{o=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhImagecomparisonCss=".sc-stzh-imagecomparison-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.1875rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;justify-items:center;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:2.5rem;height:2.5rem;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background-color:var(--stzh-color-white);border-radius:5rem;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));position:absolute;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black48);color:var(--stzh-color-white)}@media screen and (min-width: 1024px){.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison,.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));color:var(--stzh-color-white)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";var StzhImageComparison=function(){function t(t){var e=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.handleInput=function(t){var i=e.inputElement.value;e.value=Number(i);e.stzhChange.emit({component:"stzh-imagecomparison",originalEvent:t,value:e.value})};this.localization=undefined;this.hintLeft="";this.hintRight="";this.value=50;this.label=undefined;this.a11yDescribedby=""}t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"imagecomparison")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t=this;var e={"stzh-imagecomparison":true};return h(Host,{"aria-roledescription":this.localization.label,style:{"--exposure":"".concat(this.value.toString(),"%")}},h("div",{class:e},h("div",{class:"stzh-imagecomparison__element"},h("slot",{name:"image-before"}),h("slot",{name:"image-after"}),h("label",{class:"stzh-imagecomparison__label","aria-label":this.label||this.localization.label,"aria-describedby":this.a11yDescribedby||null},h("div",{class:"stzh-imagecomparison__slider-line"}),h("div",{class:"stzh-imagecomparison__slider-icon-wrapper"},h("stzh-icon",{class:"stzh-imagecomparison__slider-icon-left",name:"angle-left"}),h("stzh-icon",{class:"stzh-imagecomparison__slider-icon-right",name:"angle-right"})),h("input",{type:"range",class:"stzh-imagecomparison__control",min:"0",max:"100",ref:function(e){return t.inputElement=e},onInput:this.handleInput})),h("div",{class:"stzh-imagecomparison__hint-wrapper"},h("span",{class:"stzh-imagecomparison__hint-left"},this.hintLeft?this.hintLeft:h("slot",{name:"hint-left"})),h("span",{class:"stzh-imagecomparison__hint-right"},this.hintRight?this.hintRight:h("slot",{name:"hint-right"}))))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhImageComparison.style=stzhImagecomparisonCss;export{StzhImageComparison as stzh_imagecomparison};
 //# sourceMappingURL=stzh-imagecomparison.entry.js.map

package/dist/esm-es5/stzh-imagecomparison.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhImagecomparisonCss","StzhImageComparison","this","handleInput","event","value","_this","inputElement","Number","stzhChange","emit","component","originalEvent","class_1","prototype","componentWillLoad","localization","_a","window","stzhComponents","utils","fetchTranslations","element","_b","sent","render","classes","h","Host","label","style","concat","toString","class","name","a11yDescribedby","type","min","max","ref","el","onInput","hintLeft","hintRight"],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 3px;\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  \n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n  \n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n  \n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: 40px;\n    height: 40px;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    border-radius: 80px;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontCurve('caption');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack48;\n    color: $colorWhite;\n  }\n  \n  &__hint-left {\n    left: 0;\n  }\n  \n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line,\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorPrimary;\n    color: $colorWhite;\n }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import { \n  Component, \n  Host, \n  Element, \n  Prop, \n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport { \n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Caption */\n  @Prop() caption: string = \"\";\n\n  /** Copyright */\n  @Prop() copyright: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n  \n  private inputElement: HTMLInputElement;\n  \n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({   \n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  } \n  \n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-left\" \n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-right\" \n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n\n              <input\n                type=\"range\" \n                class=\"stzh-imagecomparison__control\" \n                min=\"0\" \n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span> \n            </div>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"],"mappings":"kjDAAA,IAAMA,uBAAyB,+tJ,IC6BlBC,oBAAmB,W,mGAgCtBC,KAAAC,YAAc,SAACC,GACrB,IAAIC,EAAQC,EAAKC,aAAaF,MAC9BC,EAAKD,MAAQG,OAAOH,GAEpBC,EAAKG,WAAWC,KAAK,CACnBC,UAAW,uBACXC,cAAeR,EACfC,MAAOC,EAAKD,O,4CAlCW,G,eAGC,G,aAGF,G,eAGE,G,WAGa,G,0CAM0B,E,CAoB7DQ,EAAAC,UAAAC,kBAAN,W,uHACOb,KAAKc,aAAN,YACFC,EAAAf,KAAoB,SAAMgB,OAAOC,eAAeC,MAAMC,kBAAkBnB,KAAKoB,QAAS,oB,OAAtFL,EAAKD,aAAeO,EAAAC,O,mCAIxBX,EAAAC,UAAAW,OAAA,eAAAnB,EAAAJ,KACE,IAAMwB,EAAU,CACd,uBAAwB,MAG1B,OACEC,EAACC,KAAI,wBACmB1B,KAAKc,aAAaa,MACxCC,MAAO,CACL,aAAc,GAAAC,OAAG7B,KAAKG,MAAM2B,WAAU,OAGxCL,EAAA,OAAKM,MAAOP,GACVC,EAAA,OAAKM,MAAM,iCACTN,EAAA,QAAMO,KAAK,iBACXP,EAAA,QAAMO,KAAK,gBAEXP,EAAA,SACEM,MAAM,8BAA6B,aACvB/B,KAAK2B,OAAS3B,KAAKc,aAAaa,MAAK,mBAC/B3B,KAAKiC,iBAAmB,MAE1CR,EAAA,OAAKM,MAAM,sCACXN,EAAA,OAAKM,MAAM,6CACTN,EAAA,aACEM,MAAM,yCACNC,KAAK,eAEPP,EAAA,aACEM,MAAM,0CACNC,KAAK,iBAITP,EAAA,SACES,KAAK,QACLH,MAAM,gCACNI,IAAI,IACJC,IAAI,MACJC,IAAK,SAACC,GAAE,OAAMlC,EAAKC,aAAeiC,CAA1B,EACRC,QAASvC,KAAKC,eAIlBwB,EAAA,OAAKM,MAAM,sCACTN,EAAA,QAAMM,MAAM,mCACT/B,KAAKwC,SAAWxC,KAAKwC,SAAWf,EAAA,QAAMO,KAAK,eAE9CP,EAAA,QAAMM,MAAM,oCACT/B,KAAKyC,UAAYzC,KAAKyC,UAAYhB,EAAA,QAAMO,KAAK,mB,qIAlG9B,G"}
+{"version":3,"names":["stzhImagecomparisonCss","StzhImageComparison","this","handleInput","event","value","_this","inputElement","Number","stzhChange","emit","component","originalEvent","class_1","prototype","componentWillLoad","localization","_a","window","stzhComponents","utils","fetchTranslations","element","_b","sent","render","classes","h","Host","label","style","concat","toString","class","name","a11yDescribedby","type","min","max","ref","el","onInput","hintLeft","hintRight"],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 3px;\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  \n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n  \n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n  \n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: 40px;\n    height: 40px;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    border-radius: 80px;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontCurve('caption');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack48;\n    color: $colorWhite;\n  }\n  \n  &__hint-left {\n    left: 0;\n  }\n  \n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line,\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorPrimary;\n    color: $colorWhite;\n }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import { \n  Component, \n  Host, \n  Element, \n  Prop, \n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport { \n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n  \n  private inputElement: HTMLInputElement;\n  \n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({   \n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  } \n  \n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-left\" \n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-right\" \n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n\n              <input\n                type=\"range\" \n                class=\"stzh-imagecomparison__control\" \n                min=\"0\" \n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span> \n            </div>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"],"mappings":"kjDAAA,IAAMA,uBAAyB,+tJ,IC6BlBC,oBAAmB,W,mGA0BtBC,KAAAC,YAAc,SAACC,GACrB,IAAIC,EAAQC,EAAKC,aAAaF,MAC9BC,EAAKD,MAAQG,OAAOH,GAEpBC,EAAKG,WAAWC,KAAK,CACnBC,UAAW,uBACXC,cAAeR,EACfC,MAAOC,EAAKD,O,4CA5BW,G,eAGC,G,WAGa,G,0CAM0B,E,CAoB7DQ,EAAAC,UAAAC,kBAAN,W,uHACOb,KAAKc,aAAN,YACFC,EAAAf,KAAoB,SAAMgB,OAAOC,eAAeC,MAAMC,kBAAkBnB,KAAKoB,QAAS,oB,OAAtFL,EAAKD,aAAeO,EAAAC,O,mCAIxBX,EAAAC,UAAAW,OAAA,eAAAnB,EAAAJ,KACE,IAAMwB,EAAU,CACd,uBAAwB,MAG1B,OACEC,EAACC,KAAI,wBACmB1B,KAAKc,aAAaa,MACxCC,MAAO,CACL,aAAc,GAAAC,OAAG7B,KAAKG,MAAM2B,WAAU,OAGxCL,EAAA,OAAKM,MAAOP,GACVC,EAAA,OAAKM,MAAM,iCACTN,EAAA,QAAMO,KAAK,iBACXP,EAAA,QAAMO,KAAK,gBAEXP,EAAA,SACEM,MAAM,8BAA6B,aACvB/B,KAAK2B,OAAS3B,KAAKc,aAAaa,MAAK,mBAC/B3B,KAAKiC,iBAAmB,MAE1CR,EAAA,OAAKM,MAAM,sCACXN,EAAA,OAAKM,MAAM,6CACTN,EAAA,aACEM,MAAM,yCACNC,KAAK,eAEPP,EAAA,aACEM,MAAM,0CACNC,KAAK,iBAITP,EAAA,SACES,KAAK,QACLH,MAAM,gCACNI,IAAI,IACJC,IAAI,MACJC,IAAK,SAACC,GAAE,OAAMlC,EAAKC,aAAeiC,CAA1B,EACRC,QAASvC,KAAKC,eAIlBwB,EAAA,OAAKM,MAAM,sCACTN,EAAA,QAAMM,MAAM,mCACT/B,KAAKwC,SAAWxC,KAAKwC,SAAWf,EAAA,QAAMO,KAAK,eAE9CP,EAAA,QAAMM,MAAM,oCACT/B,KAAKyC,UAAYzC,KAAKyC,UAAYhB,EAAA,QAAMO,KAAK,mB,qIA5F9B,G"}