@oiz/stzh-components 2.6.0-beta → 2.6.0

package/dist/stzh-components/p-427461c5.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,o,e,s){function n(t){return t instanceof e?t:new e((function(o){o(t)}))}return new(e||(e=Promise))((function(e,r){function i(t){try{h(s.next(t))}catch(t){r(t)}}function a(t){try{h(s["throw"](t))}catch(t){r(t)}}function h(t){t.done?e(t.value):n(t.value).then(i,a)}h((s=s.apply(t,o||[])).next())}))};var __generator=this&&this.__generator||function(t,o){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},s,n,r,i;return i={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function a(t){return function(o){return h([t,o])}}function h(a){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,a[0]&&(e=0)),e)try{if(s=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;n=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){e.label=a[1];break}if(a[0]===6&&e.label<r[1]){e.label=r[1];r=a;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(a);break}if(r[2])e.ops.pop();e.trys.pop();continue}a=o.call(t,e)}catch(t){a=[6,t];n=0}finally{s=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b184ebb.system.js","./p-d4b7a303.system.js","./p-a408bfba.system.js"],(function(t){"use strict";var o,e,s,n,r,i,a,h;return{setters:[function(t){o=t.r;e=t.h;s=t.a;n=t.c;r=t.F;i=t.g},function(t){a=t.h},function(t){h=t.f}],execute:function(){var c=".sc-stzh-badge-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-base-color);display:-ms-inline-flexbox;display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-grey87);--background-color:var(--stzh-color-warning)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-zueriblue)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.875rem;height:0.875rem;padding:0}";var l=t("stzh_badge",function(){function t(t){o(this,t);this.label="";this.type="default"}t.prototype.render=function(){var t;var o=(t={"stzh-badge":true},t["stzh-badge--type-".concat(this.type)]=!!this.type,t);return e(s,null,e("div",{class:o},this.label))};return t}());l.style=c;var b='@charset "UTF-8";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-width:0.0625rem;--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-radius:var(--stzh-button-border-radius);--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);--white-space:normal;--border-radius:var(--stzh-button-border-radius);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--floating-position:sticky;--floating-float:right;--floating-bottom:var(--stzh-space-medium);--floating-right:var(--stzh-space-medium);display:inline-block}@media screen and (min-width: 600px){.sc-stzh-button-h{--floating-bottom:var(--stzh-space-xlarge);--floating-right:var(--stzh-space-xlarge)}}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[floating].sc-stzh-button-h:not([floating=false]){position:var(--floating-position);bottom:var(--floating-bottom);right:var(--floating-right);float:var(--floating-float)}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white);--border-color:var(--stzh-color-primary60op)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);line-height:1.25;font-family:inherit;position:relative;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:pointer;-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;min-width:var(--height);min-height:var(--height);border-radius:var(--border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{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-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:transparent}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-black8)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--is-floating.sc-stzh-button{-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{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-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}';var u=t("stzh_button",function(){function t(t){var e=this;o(this,t);this.stzhFocus=n(this,"stzhFocus",7);this.stzhBlur=n(this,"stzhBlur",7);this.stzhChange=n(this,"stzhChange",7);this.focusedByInput=false;this.onInput=function(t){e.checked=e.input.checked;e.stzhChange.emit({component:"stzh-button",originalEvent:t,value:e.value,checked:e.checked})};this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var o=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=function(t){var o=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=function(t){if(e.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.floating=false;this.size="default";this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.linkAccesskey=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.button.focus();return[2]}))}))};t.prototype.renderIcon=function(t){return e("div",{class:"stzh-button__icon-wrapper"},this.icon?e("stzh-icon",{class:"stzh-button__icon",name:this.icon}):e("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&e("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))};t.prototype.renderContent=function(){var t=this;return e("div",{class:"stzh-button__text"},this.rel&&this.rel.includes("external")&&e("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&e("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),e("div",{ref:function(o){return t.text=o}},this.label?this.label:e("slot",null)))};t.prototype.renderInner=function(t){return e(r,null,e("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&e("div",{class:"stzh-button__mark"},e("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&e("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){switch(o.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,h(this.element,"button")];case 1:t.localization=o.sent();o.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.button.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.render=function(){var t;var o=this;var n=a(this.element,"icon")||!!this.icon;var r=(t={"stzh-button":true,"stzh-button--has-icon":n,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-floating":this.floating,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled,"stzh-button--is-active":this.active},t["stzh-button--effect-".concat(this.effect)]=!!this.effect,t["stzh-button--badge-position-".concat(this.badgePosition)]=!!this.badgePosition,t["stzh-button--align-".concat(this.textAlign)]=!!this.textAlign,t["stzh-button--size-".concat(this.size)]=!!this.size,t["stzh-button--type-".concat(this.type)]=!!this.type,t["stzh-button--".concat(this.variant)]=!!this.variant,t);return e(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?e("a",{ref:function(t){return o.button=t},href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:r,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(n)):this.type==="radio"?e("label",{ref:function(t){return o.button=t},class:r,onClick:this.onClick},e("input",{ref:function(t){return o.input=t},type:"radio",class:"stzh-button__input",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(n)):e("button",{ref:function(t){return o.button=t},class:r,type:this.type,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(n)))};Object.defineProperty(t.prototype,"element",{get:function(){return i(this)},enumerable:false,configurable:true});return t}());u.style=b;var d=".sc-stzh-icon-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-icon-h{display:none}.sc-stzh-icon-h *.sc-stzh-icon,.sc-stzh-icon-h *.sc-stzh-icon::before,.sc-stzh-icon-h *.sc-stzh-icon::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-icon-h{--size:var(--stzh-icon-size-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:currentColor;vertical-align:text-top}.stzh-icon.sc-stzh-icon{width:var(--size);height:var(--size)}";var z=0;var f=t("stzh_icon",function(){function t(t){o(this,t);this.name="";this.a11yTitle=""}t.prototype.componentWillLoad=function(){this.iconId="stzh-icon-".concat(z++)};t.prototype.render=function(){return e(s,null,this.name&&e("svg",{class:"stzh-icon",role:this.a11yTitle?"img":"presentation","aria-hidden":this.a11yTitle?null:"true",focusable:this.a11yTitle?"true":"false","aria-labelledby":this.a11yTitle?"".concat(this.iconId,"-title"):null},this.a11yTitle&&e("title",{id:"".concat(this.iconId,"-title")},this.a11yTitle),e("use",{href:"#stzh-icon-".concat(this.name)})))};return t}());f.style=d}}}));
-//# sourceMappingURL=p-427461c5.system.entry.js.map

package/dist/stzh-components/p-427461c5.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhBadgeCss","StzhBadge","exports","class_1","prototype","render","classes","_a","concat","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","_this","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","class_2","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","componentWillLoad","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","class_3","iconId","role","a11yTitle","focusable","id"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$baseColor};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorGrey87};\n    --background-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorZueriblue};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorPrimary};\n  --border-width: 1px;\n  --border-color: #{$colorPrimary};\n  --border-radius: #{$buttonBorderRadius};\n  --height: #{$formInputHeight};\n  --icon-size: #{iconSize('small')};\n  --icon-text-margin: #{space('small')};\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n  --white-space: normal;\n  --border-radius: #{$buttonBorderRadius};\n\n  --hover-color: #{$colorWhite};\n  --hover-background-color: #{$colorPrimaryHover};\n  --hover-border-color: #{$colorPrimaryHover};\n\n  --floating-position: sticky;\n  --floating-float: right;\n  --floating-bottom: #{space('medium')};\n  --floating-right: #{space('medium')};\n\n  display: inline-block;\n\n  @include mq($from: small) {\n    --floating-bottom: #{space('xlarge')};\n    --floating-right: #{space('xlarge')};\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[floating]:not([floating=\"false\"]) {\n    position: var(--floating-position);\n    bottom: var(--floating-bottom);\n    right: var(--floating-right);\n    float: var(--floating-float);\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  &[size=\"tiny\"] {\n    --height: #{$formInputHeightTiny};\n    --icon-text-margin: #{space('xsmall')};\n    --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary};\n    --background-color: #{$colorWhite};\n    --border-color: #{$colorPrimary60op};\n  }\n\n  &[variant=\"input\"] {\n    --color: #{$formColor};\n    --background-color: transparent;\n    --border-color: #{$formBorderColor};\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: transparent;\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: #{$colorPrimary};\n    --background-color: transparent;\n    --border-color: transparent;\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$buttonTextHoverBackground};\n    --hover-border-color: transparent;\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorPrimaryHover};\n    --border-color: #{$colorPrimaryHover};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --border-color: #{$colorGrey13};\n    --background-color: #{$colorGrey13};\n\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: #{$colorGrey13};\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"] {\n    --color: #{$colorGrey25};\n    --border-color: #{$colorGrey13};\n    --background-color: transparent;\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: transparent;\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-button {\n  @include fontSize('milli');\n  line-height: 1.25;\n  font-family: inherit;\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding: var(--padding);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: pointer;\n  text-decoration-line: none;\n  width: 100%;\n  min-width: var(--height);\n  min-height: var(--height);\n  border-radius: var(--border-radius);\n  text-align: left;\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Size variants */\n\n  &--size-small,\n  &--size-tiny {\n    @include fontSize('micro');\n  }\n\n  /* Floating */\n\n  &--is-floating {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only {\n    width: var(--height);\n    height: var(--height);\n    padding: 0;\n  }\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Method,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Whether the button is floating */\n  @Prop({ reflect: true }) floating: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"tiny\" = \"default\";\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if type is radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  /** Focus button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-button__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-floating\": this.floating,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled,\n      \"stzh-button--is-active\": this.active,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--size-${this.size}`]: !!this.size,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel}\n            aria-describedby={this.a11yDescribedby}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel}\n                aria-describedby={this.a11yDescribedby}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls}\n                accessKey={this.linkAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel}\n              aria-describedby={this.a11yDescribedby}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls}\n              accessKey={this.linkAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n",":host {\n  --size: #{iconSize()};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: currentColor;\n  vertical-align: text-top;\n}\n\n.stzh-icon {\n  width: var(--size);\n  height: var(--size);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  scoped: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  private iconId: string;\n\n  componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.name &&\n          <svg\n            class=\"stzh-icon\"\n            role={this.a11yTitle ? 'img' : 'presentation'}\n            aria-hidden={this.a11yTitle ? null : 'true'}\n            focusable={this.a11yTitle ? 'true' : 'false'}\n            aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n          >\n            {this.a11yTitle &&\n              <title id={`${this.iconId}-title`}>\n                {this.a11yTitle}\n              </title>\n            }\n            <use href={`#stzh-icon-${this.name}`}></use>\n          </svg>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-5e09547b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhActionsCss","StzhActions","this","init","secondaryButtons","element","querySelectorAll","buttons","forEach","button","setPropsIfNull","variant","setAttribute","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","withBorder","h","Host","class","role","name"],"sources":["./src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=scoped","./src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]) {\n    flex-grow: 1;\n    margin: space('xxsmall');\n  }\n\n  &[variant=\"cta\"] ::slotted([slot=\"primary\"]),\n  &[variant=\"cta\"] ::slotted([slot=\"secondary\"]) {\n    flex-grow: 0;\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column;\n    margin: calc(#{space('xxsmall')} * -1);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions {\n    display: flex;\n  }\n\n  &--dialog &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__actions {\n    justify-content: space-between;\n  }\n\n  &--has-border {\n    padding-top: space('medium');\n    border-top: 1px solid $baseBorderColor;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  scoped: true\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"cta\" = \"form\";\n\n  /** With border separator */\n  @Prop({ reflect: true }) withBorder: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n    );\n\n    const buttons = this.element.querySelectorAll('stzh-button');\n\n    secondaryButtons.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"secondary\"\n      } as HTMLStzhButtonElement)\n    });\n\n    buttons.forEach((button) => {\n      button.setAttribute(\"role\", \"listitem\");\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--has-border\": this.withBorder,\n      [`stzh-actions--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"list\">\n            <div class=\"stzh-actions__secondary-actions\">\n              <slot name=\"secondary\"></slot>\n            </div>\n            <div class=\"stzh-actions__primary-actions\">\n              <slot name=\"primary\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,4qD,MCmBVC,EAAW,M,yBAWdC,KAAAC,KAAO,KACb,MAAMC,EAAmBF,KAAKG,QAAQC,iBACpC,iEAGF,MAAMC,EAAUL,KAAKG,QAAQC,iBAAiB,eAE9CF,EAAiBI,SAASC,IACxBC,EAAeD,EAAQ,CACrBE,QAAS,aACgB,IAG7BJ,EAAQC,SAASC,IACfA,EAAOG,aAAa,OAAQ,WAAW,GACvC,E,aAxBsE,O,gBAG3B,K,CAwB/CC,oBACEX,KAAKC,OAELD,KAAKY,SAAW,IAAIC,iBAAiBb,KAAKC,MAC1CD,KAAKY,SAASE,QAAQd,KAAKG,QAAS,CAClCY,UAAW,KACXC,QAAS,M,CAIbC,uBACE,GAAIjB,KAAKY,SAAU,CACjBZ,KAAKY,SAASM,Y,EAIlBC,SACE,MAAMC,EAAU,CACd,eAAgB,KAChB,2BAA4BpB,KAAKqB,WACjC,CAAC,iBAAiBrB,KAAKS,aAAcT,KAAKS,SAG5C,OACEa,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,wBAAwBC,KAAK,QACtCH,EAAA,OAAKE,MAAM,mCACTF,EAAA,QAAMI,KAAK,eAEbJ,EAAA,OAAKE,MAAM,iCACTF,EAAA,QAAMI,KAAK,e"}

package/dist/stzh-components/p-66c1942a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,a as o,c as e,F as r,g as n}from"./p-9e02896c.js";import{h as i}from"./p-5c697491.js";import{f as h}from"./p-25a09313.js";const a=".sc-stzh-badge-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-base-color);display:-ms-inline-flexbox;display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-grey87);--background-color:var(--stzh-color-warning)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-zueriblue)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:normal;-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;-webkit-box-shadow:0 0 0 0.0625rem #fff;box-shadow:0 0 0 0.0625rem #fff;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.875rem;height:0.875rem;padding:0}";const c=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,null,s("div",{class:t},this.label))}};c.style=a;const l='@charset "UTF-8";.sc-stzh-button-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-width:0.0625rem;--border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--border-radius:var(--stzh-button-border-radius);--height:var(--stzh-form-input-height);--icon-size:var(--stzh-icon-size-small);--icon-text-margin:var(--stzh-space-small);--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--padding:calc(var(--stzh-space-xsmall) - 0.0625rem) var(--stzh-space-xlarge);--white-space:normal;--border-radius:var(--stzh-button-border-radius);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--floating-position:sticky;--floating-float:right;--floating-bottom:var(--stzh-space-medium);--floating-right:var(--stzh-space-medium);display:inline-block}@media screen and (min-width: 600px){.sc-stzh-button-h{--floating-bottom:var(--stzh-space-xlarge);--floating-right:var(--stzh-space-xlarge)}}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:block}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[floating].sc-stzh-button-h:not([floating=false]){position:var(--floating-position);bottom:var(--floating-bottom);right:var(--floating-right);float:var(--floating-float)}[size=small].sc-stzh-button-h{--height:var(--stzh-form-input-small-height)}[size=tiny].sc-stzh-button-h{--height:var(--stzh-form-input-tiny-height);--icon-text-margin:var(--stzh-space-xsmall);--padding:calc(var(--stzh-space-xxsmall) - 0.0625rem) var(--stzh-space-medium)}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:var(--stzh-color-white);--border-color:var(--stzh-color-primary60op)}[variant=input].sc-stzh-button-h{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-button-text-hover-background);--hover-border-color:transparent}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}[disabled].sc-stzh-button-h:not([disabled=false]){--border-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-grey13);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:var(--stzh-color-grey13)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary]{--color:var(--stzh-color-grey25);--border-color:var(--stzh-color-grey13);--background-color:transparent;--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-color-grey13);--hover-background-color:transparent}@-webkit-keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{-webkit-transform:translateX(0);transform:translateX(0)}40%{-webkit-transform:translateX(-0.5rem);transform:translateX(-0.5rem)}60%{-webkit-transform:translateX(-0.25rem);transform:translateX(-0.25rem)}}.sc-stzh-button-h .sc-stzh-button-s>stzh-icon,.stzh-button__icon.sc-stzh-button{--size:var(--icon-size)}.stzh-button.sc-stzh-button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);line-height:1.25;font-family:inherit;position:relative;z-index:0;overflow:visible;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:stretch;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding:var(--padding);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:pointer;-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;min-width:var(--height);min-height:var(--height);border-radius:var(--border-radius);text-align:left}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{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-button__inner.sc-stzh-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:auto;height:1em}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey61)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:transparent}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-black8)}.stzh-button--size-small.sc-stzh-button,.stzh-button--size-tiny.sc-stzh-button{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-button--is-floating.sc-stzh-button{-webkit-box-shadow:var(--stzh-box-shadow-overlay);box-shadow:var(--stzh-box-shadow-overlay)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button{width:var(--height);height:var(--height);padding:0}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{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-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{-webkit-animation:stzh-button-effect-cta 1s;animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:start;justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:end;justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:center;justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{-ms-flex-pack:justify;justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}';const b=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.focusedByInput=false;this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.setFocus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.floating=false;this.size="default";this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.linkAccesskey=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}async setFocus(){this.button.focus()}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon?s("stzh-icon",{class:"stzh-button__icon",name:this.icon}):s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text"},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),s("div",{ref:t=>this.text=t},this.label?this.label:s("slot",null)))}renderInner(t){return s(r,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){if(!this.localization){this.localization=await h(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{this.button.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=i(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-floating":this.floating,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled,"stzh-button--is-active":this.active,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--size-${this.size}`]:!!this.size,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,disabled:this.disabled,"aria-label":this.a11yLabel,"aria-describedby":this.a11yDescribedby,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};b.style=l;const u=".sc-stzh-icon-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-icon-h{display:none}.sc-stzh-icon-h *.sc-stzh-icon,.sc-stzh-icon-h *.sc-stzh-icon::before,.sc-stzh-icon-h *.sc-stzh-icon::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-icon-h{--size:var(--stzh-icon-size-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:currentColor;vertical-align:text-top}.stzh-icon.sc-stzh-icon{width:var(--size);height:var(--size)}";let z=0;const d=class{constructor(s){t(this,s);this.name="";this.a11yTitle=""}componentWillLoad(){this.iconId=`stzh-icon-${z++}`}render(){return s(o,null,this.name&&s("svg",{class:"stzh-icon",role:this.a11yTitle?"img":"presentation","aria-hidden":this.a11yTitle?null:"true",focusable:this.a11yTitle?"true":"false","aria-labelledby":this.a11yTitle?`${this.iconId}-title`:null},this.a11yTitle&&s("title",{id:`${this.iconId}-title`},this.a11yTitle),s("use",{href:`#stzh-icon-${this.name}`})))}};d.style=u;export{c as stzh_badge,b as stzh_button,d as stzh_icon};
-//# sourceMappingURL=p-66c1942a.entry.js.map

package/dist/stzh-components/p-66c1942a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","onInput","event","checked","input","stzhChange","emit","component","originalEvent","value","onRootFocus","setFocus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","async","button","focus","renderIcon","iconUsed","icon","name","badge","badgeEmpty","badgePosition","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","Fragment","iconPosition","fetchTranslations","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","hasSlot","iconOnly","floating","rounded","fullwidth","active","effect","textAlign","size","variant","tabindex","href","target","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls","accessKey","linkAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","componentWillLoad","iconId","role","a11yTitle","focusable","id"],"sources":["./src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","./src/components/stzh-badge/stzh-badge.tsx","./src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","./src/components/stzh-button/stzh-button.tsx","./src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=scoped","./src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$baseColor};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorTruegreen};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorGrey87};\n    --background-color: #{$colorWarning};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorZueriblue};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorPrimary};\n  --border-width: 1px;\n  --border-color: #{$colorPrimary};\n  --border-radius: #{$buttonBorderRadius};\n  --height: #{$formInputHeight};\n  --icon-size: #{iconSize('small')};\n  --icon-text-margin: #{space('small')};\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n  --white-space: normal;\n  --border-radius: #{$buttonBorderRadius};\n\n  --hover-color: #{$colorWhite};\n  --hover-background-color: #{$colorPrimaryHover};\n  --hover-border-color: #{$colorPrimaryHover};\n\n  --floating-position: sticky;\n  --floating-float: right;\n  --floating-bottom: #{space('medium')};\n  --floating-right: #{space('medium')};\n\n  display: inline-block;\n\n  @include mq($from: small) {\n    --floating-bottom: #{space('xlarge')};\n    --floating-right: #{space('xlarge')};\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[floating]:not([floating=\"false\"]) {\n    position: var(--floating-position);\n    bottom: var(--floating-bottom);\n    right: var(--floating-right);\n    float: var(--floating-float);\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  &[size=\"tiny\"] {\n    --height: #{$formInputHeightTiny};\n    --icon-text-margin: #{space('xsmall')};\n    --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary};\n    --background-color: #{$colorWhite};\n    --border-color: #{$colorPrimary60op};\n  }\n\n  &[variant=\"input\"] {\n    --color: #{$formColor};\n    --background-color: transparent;\n    --border-color: #{$formBorderColor};\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: transparent;\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: #{$colorPrimary};\n    --background-color: transparent;\n    --border-color: transparent;\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$buttonTextHoverBackground};\n    --hover-border-color: transparent;\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorPrimaryHover};\n    --border-color: #{$colorPrimaryHover};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --border-color: #{$colorGrey13};\n    --background-color: #{$colorGrey13};\n\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: #{$colorGrey13};\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"] {\n    --color: #{$colorGrey25};\n    --border-color: #{$colorGrey13};\n    --background-color: transparent;\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: transparent;\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-button {\n  @include fontSize('milli');\n  line-height: 1.25;\n  font-family: inherit;\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding: var(--padding);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: pointer;\n  text-decoration-line: none;\n  width: 100%;\n  min-width: var(--height);\n  min-height: var(--height);\n  border-radius: var(--border-radius);\n  text-align: left;\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Size variants */\n\n  &--size-small,\n  &--size-tiny {\n    @include fontSize('micro');\n  }\n\n  /* Floating */\n\n  &--is-floating {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only {\n    width: var(--height);\n    height: var(--height);\n    padding: 0;\n  }\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Method,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Whether the button is floating */\n  @Prop({ reflect: true }) floating: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"tiny\" = \"default\";\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if type is radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  /** Focus button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-button__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-floating\": this.floating,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled,\n      \"stzh-button--is-active\": this.active,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--size-${this.size}`]: !!this.size,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel}\n            aria-describedby={this.a11yDescribedby}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel}\n                aria-describedby={this.a11yDescribedby}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls}\n                accessKey={this.linkAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel}\n              aria-describedby={this.a11yDescribedby}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls}\n              accessKey={this.linkAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n",":host {\n  --size: #{iconSize()};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: currentColor;\n  vertical-align: text-top;\n}\n\n.stzh-icon {\n  width: var(--size);\n  height: var(--size);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  scoped: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  private iconId: string;\n\n  componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.name &&\n          <svg\n            class=\"stzh-icon\"\n            role={this.a11yTitle ? 'img' : 'presentation'}\n            aria-hidden={this.a11yTitle ? null : 'true'}\n            focusable={this.a11yTitle ? 'true' : 'false'}\n            aria-labelledby={this.a11yTitle ? `${this.iconId}-title` : null}\n          >\n            {this.a11yTitle &&\n              <title id={`${this.iconId}-title`}>\n                {this.a11yTitle}\n              </title>\n            }\n            <use href={`#stzh-icon-${this.name}`}></use>\n          </svg>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}