@oiz/stzh-components 2.12.0-beta1 → 2.12.0

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,i,e,n){function s(t){return t instanceof e?t:new e((function(i){i(t)}))}return new(e||(e=Promise))((function(e,l){function o(t){try{r(n.next(t))}catch(t){l(t)}}function a(t){try{r(n["throw"](t))}catch(t){l(t)}}function r(t){t.done?e(t.value):s(t.value).then(o,a)}r((n=n.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(l[0]&1)throw l[1];return l[1]},trys:[],ops:[]},n,s,l,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(i){return r([t,i])}}function r(a){if(n)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(e=0)),e)try{if(n=1,s&&(l=a[0]&2?s["return"]:a[0]?s["throw"]||((l=s["return"])&&l.call(s),0):s.next)&&!(l=l.call(s,a[1])).done)return l;if(s=0,l)a=[a[0]&2,l.value];switch(a[0]){case 0:case 1:l=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;s=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(l=e.trys,l=l.length>0&&l[l.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!l||a[1]>l[0]&&a[1]<l[3])){e.label=a[1];break}if(a[0]===6&&e.label<l[1]){e.label=l[1];l=a;break}if(l&&e.label<l[2]){e.label=l[2];e.ops.push(a);break}if(l[2])e.ops.pop();e.trys.pop();continue}a=i.call(t,e)}catch(t){a=[6,t];s=0}finally{n=l=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import"./string-utils-e252977e.js";var stzhLinkCss='@charset "UTF-8";.sc-stzh-link-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-link-h{display:none}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::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-link-h .has-focus.sc-stzh-link{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link{outline-style:none !important}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link::-moz-focus-inner{border:0 !important}.sc-stzh-link-h{--color:var(--stzh-link-color);--text-decoration-line:underline;--icon-size:var(--stzh-icon-size-medium);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration-line:underline;color:var(--color);display:inline-block}.sc-stzh-link-h .sc-stzh-link-s>stzh-text{--color:initial}[fullwidth].sc-stzh-link-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-link-h{--icon-size:var(--stzh-icon-size-small)}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-base-color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25)}.sc-stzh-link-h .sc-stzh-link-s>stzh-icon,.stzh-link__icon.sc-stzh-link{--size:var(--icon-size)}.stzh-link.sc-stzh-link{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:inherit;position:relative;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;border:none;color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;-webkit-text-decoration-line:none;text-decoration-line:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius);text-align:left}@media screen and (min-width: 1024px){.stzh-link.sc-stzh-link{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-link.sc-stzh-link:hover{color:var(--hover-color)}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--hover-text-decoration-line);text-decoration-line:var(--hover-text-decoration-line)}.stzh-link__vhidden.sc-stzh-link{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-link__inner.sc-stzh-link{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-link__icon-wrapper.sc-stzh-link{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:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--text-decoration-line);text-decoration-line:var(--text-decoration-line)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{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-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--size-small.sc-stzh-link{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-link--size-inherit.sc-stzh-link{font-size:inherit;line-height:inherit;letter-spacing:inherit}.stzh-link--align-left.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:start;justify-content:flex-start}.stzh-link--align-right.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:end;justify-content:flex-end}.stzh-link--align-center.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:center;justify-content:center}.stzh-link--align-space-between.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:justify;justify-content:space-between}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}';var StzhLink=function(){function t(t){var i=this;registerInstance(this,t);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!i.focusedByInput){i.setFocus()}i.focusedByInput=false};this.onFocus=function(t){i.focusedByInput=true;var e=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});i.element.dispatchEvent(e);i.stzhFocus.emit({component:"stzh-link",originalEvent:t})};this.onBlur=function(t){var e=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});i.element.dispatchEvent(e);i.stzhBlur.emit({component:"stzh-link",originalEvent:t})};this.localization=undefined;this.icon="";this.iconPosition="left";this.size="default";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.variant="default";this.fullwidth=false;this.textAlign="default";this.badge="";this.badgeType="default";this.badgeEmpty=false;this.badgePosition="icon";this.disabled=false;this.active=false;this.iconOnly=false;this.label="";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.link.focus();return[2]}))}))};t.prototype.renderIcon=function(){return h("div",{class:"stzh-link__icon-wrapper"},this.icon?h("stzh-icon",{class:"stzh-link__icon",name:this.icon}):h("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&h("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))};t.prototype.renderContent=function(){var t=this;return h("div",{class:"stzh-link__text"},this.rel&&this.rel.includes("external")&&h("div",{class:"stzh-link__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&h("div",{class:"stzh-link__vhidden"},this.localization.$globals.downloadLinkLabel),h("div",{ref:function(i){return t.text=i}},this.label?this.label:h("slot",null)))};t.prototype.renderInner=function(t){return h(Fragment,null,h("div",{class:"stzh-link__inner"},this.iconPosition==="left"&&this.renderIcon(),this.renderContent(),this.iconPosition==="right"&&this.renderIcon()),(this.badge||this.badgeEmpty)&&!t&&h("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"link")];case 1:t.localization=i.sent();i.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.link.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.render=function(){var t;var i=this;var e=hasSlot(this.element,"icon")||!!this.icon;var n=(t={"stzh-link":true,"stzh-link--has-icon":e,"stzh-link--has-icon-only":this.iconOnly,"stzh-link--has-badge":!!this.badge,"stzh-link--is-fullwidth":this.fullwidth,"stzh-link--is-disabled":this.disabled,"stzh-link--is-active":this.active},t["stzh-link--badge-position-".concat(this.badgePosition)]=!!this.badgePosition,t["stzh-link--align-".concat(this.textAlign)]=!!this.textAlign,t["stzh-link--size-".concat(this.size)]=!!this.size,t["stzh-link--".concat(this.variant)]=!!this.variant,t);return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?h("a",{ref:function(t){return i.link=t},href:this.disabled?null:this.href,download:this.download,rel:this.rel,target:this.target,class:n,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"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||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(e)):h("button",{ref:function(t){return i.link=t},class:n,type:this.type,disabled:this.disabled,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"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||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(e)))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhLink.style=stzhLinkCss;export{StzhLink as stzh_link};
+var __awaiter=this&&this.__awaiter||function(t,i,e,n){function s(t){return t instanceof e?t:new e((function(i){i(t)}))}return new(e||(e=Promise))((function(e,l){function o(t){try{r(n.next(t))}catch(t){l(t)}}function a(t){try{r(n["throw"](t))}catch(t){l(t)}}function r(t){t.done?e(t.value):s(t.value).then(o,a)}r((n=n.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(l[0]&1)throw l[1];return l[1]},trys:[],ops:[]},n,s,l,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(i){return r([t,i])}}function r(a){if(n)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(e=0)),e)try{if(n=1,s&&(l=a[0]&2?s["return"]:a[0]?s["throw"]||((l=s["return"])&&l.call(s),0):s.next)&&!(l=l.call(s,a[1])).done)return l;if(s=0,l)a=[a[0]&2,l.value];switch(a[0]){case 0:case 1:l=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;s=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(l=e.trys,l=l.length>0&&l[l.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!l||a[1]>l[0]&&a[1]<l[3])){e.label=a[1];break}if(a[0]===6&&e.label<l[1]){e.label=l[1];l=a;break}if(l&&e.label<l[2]){e.label=l[2];e.ops.push(a);break}if(l[2])e.ops.pop();e.trys.pop();continue}a=i.call(t,e)}catch(t){a=[6,t];s=0}finally{n=l=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import"./string-utils-e252977e.js";var stzhLinkCss='@charset "UTF-8";.sc-stzh-link-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-link-h{display:none}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::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-link-h .has-focus.sc-stzh-link{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link{outline-style:none !important}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link::-moz-focus-inner{border:0 !important}.sc-stzh-link-h{--color:var(--stzh-link-color);--text-decoration-line:underline;--icon-size:var(--stzh-icon-size-medium);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration-line:underline;color:var(--color);display:inline-block}.sc-stzh-link-h .sc-stzh-link-s>stzh-text{--color:initial}[fullwidth].sc-stzh-link-h:not([fullwidth=false]){width:100%;display:block}[size=small].sc-stzh-link-h{--icon-size:var(--stzh-icon-size-small)}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-base-color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25)}.sc-stzh-link-h .sc-stzh-link-s>stzh-icon,.stzh-link__icon.sc-stzh-link{--size:var(--icon-size)}.stzh-link.sc-stzh-link{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:inherit;position:relative;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;border:none;color:var(--color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;-webkit-text-decoration-line:none;text-decoration-line:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius);text-align:left}@media screen and (min-width: 1024px){.stzh-link.sc-stzh-link{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-link.sc-stzh-link:hover{color:var(--hover-color)}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--hover-text-decoration-line);text-decoration-line:var(--hover-text-decoration-line)}.stzh-link__vhidden.sc-stzh-link{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-link__inner.sc-stzh-link{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-link__icon-wrapper.sc-stzh-link{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:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--text-decoration-line);text-decoration-line:var(--text-decoration-line)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{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-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--size-small.sc-stzh-link{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-link--size-inherit.sc-stzh-link{font-size:inherit;line-height:inherit;letter-spacing:inherit}.stzh-link--align-left.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:start;justify-content:flex-start}.stzh-link--align-right.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:end;justify-content:flex-end}.stzh-link--align-center.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:center;justify-content:center}.stzh-link--align-space-between.sc-stzh-link .stzh-link__inner.sc-stzh-link{-ms-flex-pack:justify;justify-content:space-between}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}';var StzhLink=function(){function t(t){var i=this;registerInstance(this,t);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!i.focusedByInput){i.setFocus()}i.focusedByInput=false};this.onFocus=function(t){i.focusedByInput=true;var e=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});i.element.dispatchEvent(e);i.stzhFocus.emit({component:"stzh-link",originalEvent:t})};this.onBlur=function(t){var e=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});i.element.dispatchEvent(e);i.stzhBlur.emit({component:"stzh-link",originalEvent:t})};this.localization=undefined;this.icon="";this.iconPosition="left";this.size="default";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.variant="default";this.fullwidth=false;this.textAlign="default";this.badge="";this.badgeType="default";this.badgeEmpty=false;this.badgePosition="icon";this.disabled=false;this.active=false;this.iconOnly=false;this.label="";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.link.focus();return[2]}))}))};t.prototype.renderIcon=function(){return h("div",{class:"stzh-link__icon-wrapper"},this.icon?h("stzh-icon",{class:"stzh-link__icon",name:this.icon}):h("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&h("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))};t.prototype.renderContent=function(){var t=this;return h("div",{class:"stzh-link__text"},this.rel&&this.rel.includes("external")&&h("div",{class:"stzh-link__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&h("div",{class:"stzh-link__vhidden"},this.localization.$globals.downloadLinkLabel),h("div",{ref:function(i){return t.text=i}},this.label?this.label:h("slot",null)))};t.prototype.renderInner=function(t){return h(Fragment,null,h("div",{class:"stzh-link__inner"},this.iconPosition==="left"&&this.renderIcon(),this.renderContent(),this.iconPosition==="right"&&this.renderIcon()),(this.badge||this.badgeEmpty)&&!t&&h("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"link")];case 1:t.localization=i.sent();i.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){var i;(i=t.link)===null||i===void 0?void 0:i.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.render=function(){var t;var i=this;var e=hasSlot(this.element,"icon")||!!this.icon;var n=(t={"stzh-link":true,"stzh-link--has-icon":e,"stzh-link--has-icon-only":this.iconOnly,"stzh-link--has-badge":!!this.badge,"stzh-link--is-fullwidth":this.fullwidth,"stzh-link--is-disabled":this.disabled,"stzh-link--is-active":this.active},t["stzh-link--badge-position-".concat(this.badgePosition)]=!!this.badgePosition,t["stzh-link--align-".concat(this.textAlign)]=!!this.textAlign,t["stzh-link--size-".concat(this.size)]=!!this.size,t["stzh-link--".concat(this.variant)]=!!this.variant,t);return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?h("a",{ref:function(t){return i.link=t},href:this.disabled?null:this.href,download:this.download,rel:this.rel,target:this.target,class:n,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"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||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(e)):h("button",{ref:function(t){return i.link=t},class:n,type:this.type,disabled:this.disabled,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"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||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(e)))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhLink.style=stzhLinkCss;export{StzhLink as stzh_link};
 //# sourceMappingURL=stzh-link.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["stzhLinkCss","StzhLink","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","class_1","prototype","link","focus","renderIcon","h","class","icon","name","badge","badgeEmpty","label","type","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","iconUsed","Fragment","iconPosition","componentWillLoad","_a","stzhComponents","utils","fetchTranslations","_b","sent","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","innerText","render","hasSlot","classes","iconOnly","fullwidth","disabled","active","concat","badgePosition","textAlign","size","variant","Host","tabindex","href","target","accessKey","linkAccesskey","a11yTabindex","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --icon-size: Size of icon next to link\n * @prop --text-decoration: Text decoration of link\n * @prop --hover-text-decoration: Hover text decoration of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n */\n\n:host {\n  --color: #{$linkColor};\n  --text-decoration-line: underline;\n  --icon-size: #{iconSize('medium')};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: underline;\n\n  color: var(--color);\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: initial;\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[size=\"small\"] {\n    --icon-size: #{iconSize('small')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$baseColor};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey25};\n    --hover-color: #{$colorGrey25};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-link__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-link {\n  @include fontCurve('p1');\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\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: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space('xxsmall')} * -1);\n    right: calc(#{space('large')} * -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 + &__text:not(:empty) {\n    margin-left: space('small');\n  }\n\n  /* Size variants */\n\n  &--size-small {\n    @include fontSize('micro');\n  }\n\n  &--size-inherit {\n    font-size: inherit;\n    line-height: inherit;\n    letter-spacing: inherit;\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  Fragment,\n  Element,\n  h,\n  Prop,\n  Method,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhLinkFocusEvent,\n  StzhLinkBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\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  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"inherit\" = \"default\";\n\n  /** href attribute of the 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, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\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: HTMLStzhLinkElement;\n\n  /** Focus link */\n  @Method()\n  async setFocus() {\n    this.link.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\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-link\",\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-link\",\n      originalEvent: event\n    });\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) &&\n          <stzh-badge class=\"stzh-link__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-link__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-link__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 class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--size-${this.size}`]: !!this.size,\n      [`stzh-link--${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.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\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 || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          <button\n            ref={(el) => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\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 || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhLinkCss","StzhLink","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","class_1","prototype","link","focus","renderIcon","h","class","icon","name","badge","badgeEmpty","label","type","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","iconUsed","Fragment","iconPosition","componentWillLoad","_b","stzhComponents","utils","fetchTranslations","_c","sent","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","innerText","render","hasSlot","classes","iconOnly","fullwidth","disabled","active","concat","badgePosition","textAlign","size","variant","Host","tabindex","href","target","accessKey","linkAccesskey","a11yTabindex","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --icon-size: Size of icon next to link\n * @prop --text-decoration: Text decoration of link\n * @prop --hover-text-decoration: Hover text decoration of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n */\n\n:host {\n  --color: #{$linkColor};\n  --text-decoration-line: underline;\n  --icon-size: #{iconSize('medium')};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: underline;\n\n  color: var(--color);\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: initial;\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[size=\"small\"] {\n    --icon-size: #{iconSize('small')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$baseColor};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey25};\n    --hover-color: #{$colorGrey25};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-link__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-link {\n  @include fontCurve('p1');\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\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: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space('xxsmall')} * -1);\n    right: calc(#{space('large')} * -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 + &__text:not(:empty) {\n    margin-left: space('small');\n  }\n\n  /* Size variants */\n\n  &--size-small {\n    @include fontSize('micro');\n  }\n\n  &--size-inherit {\n    font-size: inherit;\n    line-height: inherit;\n    letter-spacing: inherit;\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  Fragment,\n  Element,\n  h,\n  Prop,\n  Method,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhLinkFocusEvent,\n  StzhLinkBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\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  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"inherit\" = \"default\";\n\n  /** href attribute of the 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, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\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: HTMLStzhLinkElement;\n\n  /** Focus link */\n  @Method()\n  async setFocus() {\n    this.link.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\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-link\",\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-link\",\n      originalEvent: event\n    });\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) &&\n          <stzh-badge class=\"stzh-link__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-link__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-link__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 class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--size-${this.size}`]: !!this.size,\n      [`stzh-link--${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.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\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 || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          <button\n            ref={(el) => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\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 || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,s){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,i){function r(e){try{h(s.next(e))}catch(e){i(e)}}function a(e){try{h(s["throw"](e))}catch(e){i(e)}}function h(e){e.done?n(e.value):o(e.value).then(r,a)}h((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,o,i,r;return r={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function a(e){return function(t){return h([e,t])}}function h(a){if(s)throw new TypeError("Generator is already executing.");while(r&&(r=0,a[0]&&(n=0)),n)try{if(s=1,o&&(i=a[0]&2?o["return"]:a[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;if(o=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){n.label=a[1];break}if(a[0]===6&&n.label<i[1]){n.label=i[1];i=a;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(a);break}if(i[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];o=0}finally{s=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,c as createEvent,F as Fragment,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import"./string-utils-e252977e.js";var stzhMenuCss=".sc-stzh-menu-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-menu-h{display:none}.sc-stzh-menu-h *.sc-stzh-menu,.sc-stzh-menu-h *.sc-stzh-menu::before,.sc-stzh-menu-h *.sc-stzh-menu::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-menu-h .has-focus.sc-stzh-menu{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-menu-h .stzh-fylingfocus-focused.sc-stzh-menu{outline-style:none !important}.sc-stzh-menu-h .stzh-fylingfocus-focused.sc-stzh-menu::-moz-focus-inner{border:0 !important}.sc-stzh-menu-h .sc-stzh-menu-s>stzh-hr{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}.stzh-menu.sc-stzh-menu{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}";var StzhMenu=function(){function e(e){registerInstance(this,e)}e.prototype.render=function(){return h(Host,{role:"menu"},h("div",{class:"stzh-menu"},h("slot",null)))};return e}();StzhMenu.style=stzhMenuCss;var stzhMenuItemCss=".sc-stzh-menu-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-item::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-menu-item-h .has-focus.sc-stzh-menu-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item{outline-style:none !important}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item::-moz-focus-inner{border:0 !important}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-grey70);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey5)}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-color-primary8)}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey13);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-grey13)}.sc-stzh-menu-item-h .sc-stzh-menu-item-s>stzh-icon,.stzh-menu-item__icon.sc-stzh-menu-item{--size:var(--icon-size)}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;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;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);-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;cursor:pointer}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{position:relative;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-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item+.stzh-menu-item__text.sc-stzh-menu-item:not(:empty){margin-left:var(--stzh-space-xsmall)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}";var StzhMenuItem=function(){function e(e){var t=this;registerInstance(this,e);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!t.focusedByInput){t.setFocus()}t.focusedByInput=false};this.onFocus=function(e){t.focusedByInput=true;var n=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});t.element.dispatchEvent(n);t.stzhFocus.emit({component:"stzh-menu-item",originalEvent:e})};this.onBlur=function(e){var n=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});t.element.dispatchEvent(n);t.stzhBlur.emit({component:"stzh-menu-item",originalEvent:e})};this.badge="";this.badgeType="default";this.badgeEmpty=false;this.disabled=false;this.active=false;this.icon="";this.label="";this.href="";this.target="";this.a11yLabel=undefined;this.analyticsId=undefined}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menuItem.focus();return[2]}))}))};e.prototype.componentDidRender=function(){var e=this;requestAnimationFrame((function(){e.menuItem.setAttribute("s-object-id",e.analyticsId||e.text.innerText)}))};e.prototype.renderInner=function(e){var t=this;return h(Fragment,null,e&&h("div",{class:"stzh-menu-item__icon-wrapper"},this.icon?h("stzh-icon",{class:"stzh-menu-item__icon",name:this.icon}):h("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&h("stzh-badge",{class:"stzh-menu-item__badge",label:this.badge,type:this.badgeType})),h("div",{ref:function(e){return t.text=e},class:"stzh-menu-item__text"},this.label?this.label:h("slot",null)))};e.prototype.render=function(){var e=this;var t=hasSlot(this.element,"icon")||!!this.icon;var n={"stzh-menu-item":true,"stzh-menu-item--has-icon":t,"stzh-menu-item--has-badge":!!this.badge,"stzh-menu-item--is-disabled":this.disabled,"stzh-menu-item--is-active":this.active};return h(Host,{role:"menuitem",tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?h("a",{ref:function(t){return e.menuItem=t},href:this.disabled?null:this.href,target:this.target,class:n,"aria-label":this.a11yLabel||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)):h("button",{ref:function(t){return e.menuItem=t},class:n,type:"button",disabled:this.disabled,"aria-label":this.a11yLabel||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();StzhMenuItem.style=stzhMenuItemCss;export{StzhMenu as stzh_menu,StzhMenuItem as stzh_menu_item};
+var __awaiter=this&&this.__awaiter||function(e,t,n,s){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,i){function r(e){try{h(s.next(e))}catch(e){i(e)}}function a(e){try{h(s["throw"](e))}catch(e){i(e)}}function h(e){e.done?n(e.value):o(e.value).then(r,a)}h((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,o,i,r;return r={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function a(e){return function(t){return h([e,t])}}function h(a){if(s)throw new TypeError("Generator is already executing.");while(r&&(r=0,a[0]&&(n=0)),n)try{if(s=1,o&&(i=a[0]&2?o["return"]:a[0]?o["throw"]||((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,a[1])).done)return i;if(o=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){n.label=a[1];break}if(a[0]===6&&n.label<i[1]){n.label=i[1];i=a;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(a);break}if(i[2])n.ops.pop();n.trys.pop();continue}a=t.call(e,n)}catch(e){a=[6,e];o=0}finally{s=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,c as createEvent,F as Fragment,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import"./string-utils-e252977e.js";var stzhMenuCss=".sc-stzh-menu-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-menu-h{display:none}.sc-stzh-menu-h *.sc-stzh-menu,.sc-stzh-menu-h *.sc-stzh-menu::before,.sc-stzh-menu-h *.sc-stzh-menu::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-menu-h .has-focus.sc-stzh-menu{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-menu-h .stzh-fylingfocus-focused.sc-stzh-menu{outline-style:none !important}.sc-stzh-menu-h .stzh-fylingfocus-focused.sc-stzh-menu::-moz-focus-inner{border:0 !important}.sc-stzh-menu-h .sc-stzh-menu-s>stzh-hr{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}.stzh-menu.sc-stzh-menu{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}";var StzhMenu=function(){function e(e){registerInstance(this,e)}e.prototype.render=function(){return h(Host,{role:"menu"},h("div",{class:"stzh-menu"},h("slot",null)))};return e}();StzhMenu.style=stzhMenuCss;var stzhMenuItemCss=".sc-stzh-menu-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-item::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-menu-item-h .has-focus.sc-stzh-menu-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item{outline-style:none !important}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item::-moz-focus-inner{border:0 !important}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-grey70);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey5)}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:var(--stzh-color-primary8)}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey13);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-grey13)}.sc-stzh-menu-item-h .sc-stzh-menu-item-s>stzh-icon,.stzh-menu-item__icon.sc-stzh-menu-item{--size:var(--icon-size)}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;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;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding:var(--stzh-space-xsmall) var(--stzh-space-medium);padding-left:var(--stzh-space-large);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);-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;cursor:pointer}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{position:relative;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-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item+.stzh-menu-item__text.sc-stzh-menu-item:not(:empty){margin-left:var(--stzh-space-xsmall)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}";var StzhMenuItem=function(){function e(e){var t=this;registerInstance(this,e);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!t.focusedByInput){t.setFocus()}t.focusedByInput=false};this.onFocus=function(e){t.focusedByInput=true;var n=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});t.element.dispatchEvent(n);t.stzhFocus.emit({component:"stzh-menu-item",originalEvent:e})};this.onBlur=function(e){var n=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});t.element.dispatchEvent(n);t.stzhBlur.emit({component:"stzh-menu-item",originalEvent:e})};this.badge="";this.badgeType="default";this.badgeEmpty=false;this.disabled=false;this.active=false;this.icon="";this.label="";this.href="";this.target="";this.a11yLabel=undefined;this.analyticsId=undefined}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.menuItem.focus();return[2]}))}))};e.prototype.componentDidRender=function(){var e=this;requestAnimationFrame((function(){var t;(t=e.menuItem)===null||t===void 0?void 0:t.setAttribute("s-object-id",e.analyticsId||e.text.innerText)}))};e.prototype.renderInner=function(e){var t=this;return h(Fragment,null,e&&h("div",{class:"stzh-menu-item__icon-wrapper"},this.icon?h("stzh-icon",{class:"stzh-menu-item__icon",name:this.icon}):h("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&h("stzh-badge",{class:"stzh-menu-item__badge",label:this.badge,type:this.badgeType})),h("div",{ref:function(e){return t.text=e},class:"stzh-menu-item__text"},this.label?this.label:h("slot",null)))};e.prototype.render=function(){var e=this;var t=hasSlot(this.element,"icon")||!!this.icon;var n={"stzh-menu-item":true,"stzh-menu-item--has-icon":t,"stzh-menu-item--has-badge":!!this.badge,"stzh-menu-item--is-disabled":this.disabled,"stzh-menu-item--is-active":this.active};return h(Host,{role:"menuitem",tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?h("a",{ref:function(t){return e.menuItem=t},href:this.disabled?null:this.href,target:this.target,class:n,"aria-label":this.a11yLabel||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)):h("button",{ref:function(t){return e.menuItem=t},class:n,type:"button",disabled:this.disabled,"aria-label":this.a11yLabel||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();StzhMenuItem.style=stzhMenuItemCss;export{StzhMenu as stzh_menu,StzhMenuItem as stzh_menu_item};
 //# sourceMappingURL=stzh-menu_2.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["stzhMenuCss","StzhMenu","prototype","render","h","Host","role","class","stzhMenuItemCss","StzhMenuItem","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","class_1","menuItem","focus","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","text","innerText","renderInner","iconUsed","Fragment","icon","name","badge","badgeEmpty","label","type","badgeType","ref","el","hasSlot","classes","disabled","active","tabindex","href","target","a11yLabel"],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-hr) {\n    margin-top: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n}\n\n.stzh-menu {\n  display: flex;\n  flex-direction: column;\n}\n","import {\n  Component,\n  Host,\n  h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n  tag: \"stzh-menu\",\n  styleUrl: \"stzh-menu.scss\",\n  scoped: true\n})\nexport class StzhMenu {\n  render() {\n    return (\n      <Host role=\"menu\">\n        <div class=\"stzh-menu\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: #{$menuItemHeight};\n  --color: #{$colorGrey70};\n  --background-color: transparent;\n  --icon-size: #{iconSize('small')};\n\n  --hover-color: #{$colorGrey70};\n  --hover-background-color: #{$colorGrey5};\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$colorPrimary8};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey13};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey13};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-menu-item__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-menu-item {\n  @include fontSize('micro');\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding: space('xsmall') space('medium');\n  padding-left: space('large');\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    position: relative;\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  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('xsmall');\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true\n})\nexport class StzhMenuItem {\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\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  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.menuItem.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\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-menu-item\",\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-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed &&\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ?\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n              :\n              <slot name=\"icon\"></slot>\n            }\n            {(this.badge || this.badgeEmpty) &&\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            }\n          </div>\n        }\n        <div\n          ref={(el) => (this.text = el as HTMLDivElement)}\n          class=\"stzh-menu-item__text\"\n        >\n          {this.label ? this.label : <slot></slot>}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        :\n          <button\n            ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"ipDAAA,IAAMA,YAAc,+jC,ICcPC,SAAQ,W,uCACnBA,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,CAACC,KAAK,QACTF,EAAA,OAAKG,MAAM,aACTH,EAAA,c,WALW,G,2BCdrB,IAAMI,gBAAkB,g5G,IC4BXC,aAAY,W,8IAuDfC,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,WACpB,IAAKC,EAAKF,eAAgB,CACxBE,EAAKC,U,CAGPD,EAAKF,eAAiB,K,EAGhBD,KAAAK,QAAU,SAACC,GACjBH,EAAKF,eAAiB,KAEtB,IAAMM,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdT,EAAKU,QAAQC,cAAcP,GAC3BJ,EAAKY,UAAUC,KAAK,CAClBC,UAAW,iBACXC,cAAeZ,G,EAIXN,KAAAmB,OAAS,SAACb,GAChB,IAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdT,EAAKU,QAAQC,cAAcM,GAC3BjB,EAAKkB,SAASL,KAAK,CACjBC,UAAW,iBACXC,cAAeZ,G,aAzFK,G,eAGmE,U,gBAG5C,M,cAGF,M,YAGF,M,UAGpB,G,WAGC,G,UAGD,G,YAGE,G,oDAgBnBgB,EAAA9B,UAAAY,SAAN,W,qFACEJ,KAAKuB,SAASC,Q,iBAoDhBF,EAAA9B,UAAAiC,mBAAA,eAAAtB,EAAAH,KACE0B,uBAAsB,WACpBvB,EAAKoB,SAASI,aAAa,cAAexB,EAAKyB,aAAezB,EAAK0B,KAAKC,U,KAIpER,EAAA9B,UAAAuC,YAAA,SAAYC,GAAZ,IAAA7B,EAAAH,KACN,OACEN,EAACuC,SAAQ,KACND,GACCtC,EAAA,OAAKG,MAAM,gCACRG,KAAKkC,KACJxC,EAAA,aAAWG,MAAM,uBAAuBsC,KAAMnC,KAAKkC,OAEnDxC,EAAA,QAAMyC,KAAK,UAEXnC,KAAKoC,OAASpC,KAAKqC,aACnB3C,EAAA,cAAYG,MAAM,wBAAwByC,MAAOtC,KAAKoC,MAAOG,KAAMvC,KAAKwC,aAI9E9C,EAAA,OACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAK0B,KAAOa,CAAlB,EACR7C,MAAM,wBAELG,KAAKsC,MAAQtC,KAAKsC,MAAQ5C,EAAA,c,EAMnC4B,EAAA9B,UAAAC,OAAA,eAAAU,EAAAH,KACE,IAAMgC,EAAoBW,QAAQ3C,KAAKa,QAAS,WAAab,KAAKkC,KAClE,IAAMU,EAAU,CACd,iBAAkB,KAClB,2BAA4BZ,EAC5B,8BAA+BhC,KAAKoC,MACpC,8BAA+BpC,KAAK6C,SACpC,4BAA6B7C,KAAK8C,QAGpC,OACEpD,EAACC,KAAI,CAACC,KAAK,WAAWmD,SAAU/C,KAAK6C,SAAW,KAAO,KAAMxC,QAASL,KAAKE,aACxEF,KAAKgD,KACJtD,EAAA,KACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAKoB,SAAWmB,CAAtB,EACRM,KAAMhD,KAAK6C,SAAW,KAAO7C,KAAKgD,KAClCC,OAAQjD,KAAKiD,OACbpD,MAAO+C,EAAO,aACF5C,KAAKkD,WAAa,KAC9B7C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK+B,YAAYC,IAGpBtC,EAAA,UACE+C,IAAK,SAACC,GAAE,OAAMvC,EAAKoB,SAAWmB,CAAtB,EACR7C,MAAO+C,EACPL,KAAK,SACLM,SAAU7C,KAAK6C,SAAQ,aACX7C,KAAKkD,WAAa,KAC9B7C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK+B,YAAYC,I,qIAhKL,G"}
+{"version":3,"names":["stzhMenuCss","StzhMenu","prototype","render","h","Host","role","class","stzhMenuItemCss","StzhMenuItem","this","focusedByInput","onRootFocus","_this","setFocus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","class_1","menuItem","focus","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","text","innerText","renderInner","iconUsed","Fragment","icon","name","badge","badgeEmpty","label","type","badgeType","ref","el","hasSlot","classes","disabled","active","tabindex","href","target","a11yLabel"],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-hr) {\n    margin-top: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n}\n\n.stzh-menu {\n  display: flex;\n  flex-direction: column;\n}\n","import {\n  Component,\n  Host,\n  h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n  tag: \"stzh-menu\",\n  styleUrl: \"stzh-menu.scss\",\n  scoped: true\n})\nexport class StzhMenu {\n  render() {\n    return (\n      <Host role=\"menu\">\n        <div class=\"stzh-menu\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n  --height: #{$menuItemHeight};\n  --color: #{$colorGrey70};\n  --background-color: transparent;\n  --icon-size: #{iconSize('small')};\n\n  --hover-color: #{$colorGrey70};\n  --hover-background-color: #{$colorGrey5};\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$colorPrimary8};\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey13};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey13};\n  }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-menu-item__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-menu-item {\n  @include fontSize('micro');\n  font-family: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  text-decoration-line: none;\n  border: none;\n  padding: space('xsmall') space('medium');\n  padding-left: space('large');\n  color: var(--color);\n  background-color: var(--background-color);\n  width: 100%;\n  height: var(--height);\n  line-height: var(--height);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__icon-wrapper {\n    position: relative;\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  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('xsmall');\n  }\n\n  &__text {\n    @include truncate;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Method,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhMenuItemFocusEvent,\n  StzhMenuItemBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n  tag: \"stzh-menu-item\",\n  styleUrl: \"stzh-menu-item.scss\",\n  scoped: true\n})\nexport class StzhMenuItem {\n  /** Badge (only displayed if `icon` property or icon slot is used) */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\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  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhMenuItemElement;\n\n  /** Focus menu item */\n  @Method()\n  async setFocus() {\n    this.menuItem.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n  private menuItem: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n\n  private focusedByInput: boolean = false;\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-menu-item\",\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-menu-item\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        {iconUsed &&\n          <div class=\"stzh-menu-item__icon-wrapper\">\n            {this.icon ?\n              <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n              :\n              <slot name=\"icon\"></slot>\n            }\n            {(this.badge || this.badgeEmpty) &&\n              <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n            }\n          </div>\n        }\n        <div\n          ref={(el) => (this.text = el as HTMLDivElement)}\n          class=\"stzh-menu-item__text\"\n        >\n          {this.label ? this.label : <slot></slot>}\n        </div>\n      </Fragment>\n    );\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-menu-item\": true,\n      \"stzh-menu-item--has-icon\": iconUsed,\n      \"stzh-menu-item--has-badge\": !!this.badge,\n      \"stzh-menu-item--is-disabled\": this.disabled,\n      \"stzh-menu-item--is-active\": this.active\n    };\n\n    return (\n      <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n        :\n          <button\n            ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n            class={classes}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-label={this.a11yLabel || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-progressbar-item.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhProgressbarItemCss='.sc-stzh-progressbar-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-progressbar-item-h{display:none}.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::before,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::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-progressbar-item-h .has-focus.sc-stzh-progressbar-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-progressbar-item-h .stzh-fylingfocus-focused.sc-stzh-progressbar-item{outline-style:none !important}.sc-stzh-progressbar-item-h .stzh-fylingfocus-focused.sc-stzh-progressbar-item::-moz-focus-inner{border:0 !important}[hide].sc-stzh-progressbar-item-h{display:none}.stzh-progressbar-item.sc-stzh-progressbar-item{text-align:center}.stzh-progressbar-item__button.sc-stzh-progressbar-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background-color:transparent;border:none;cursor:pointer;border-radius:var(--stzh-form-input-border-radius)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Highlight;border-color:Highlight}}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-primary8)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:2.1875rem;height:2.1875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:1.3125rem;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stzh-color-grey55);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{width:2.625rem;height:2.625rem;margin-bottom:var(--stzh-space-large)}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:none;content:"";position:absolute;top:1rem;right:2.125rem;width:100vw;height:0.0625rem;background-color:var(--stzh-base-border-color);z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:1.25rem;right:2.5625rem}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item::after{content:"";z-index:0;position:absolute;display:block;width:100%;height:100%;top:0;left:0;border-radius:1.3125rem;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:block;font-size:0.875rem;line-height:1.28;color:var(--stzh-color-grey55);padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 599px){.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{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-progressbar-item__number.sc-stzh-progressbar-item,.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{z-index:1}.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-xsmall);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:CanvasText}}.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-small);color:currentColor}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;position:absolute;top:0.1875rem;width:1.6875rem;height:1.6875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:50%;cursor:pointer;-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:Highlight}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:var(--stzh-color-primary8)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:Canvas}}@media screen and (min-width: 600px){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before,.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block}.stzh-progressbar-item--first.sc-stzh-progressbar-item{position:relative}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.84375rem))}@media screen and (min-width: 600px){.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.96875rem))}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:Canvas;border-color:CanvasText}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{border-color:Highlight}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:transparent}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Canvas}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:SelectedItem}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item:hover{-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));border:solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:SelectedItem;border-color:SelectedItem;background-color:Canvas}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));z-index:-1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:CanvasText}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:Canvas}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:SelectedItem}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{margin-bottom:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{padding-left:0;padding-right:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{position:relative;z-index:0;top:0.3125rem;width:1.6875rem;height:1.6875rem;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{top:0.5rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.75rem;right:1.625rem}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.8125rem;right:1.875rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:none}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:var(--stzh-color-white);z-index:1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:Canvas}}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{cursor:not-allowed}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-grey55);border-color:var(--stzh-base-border-color)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:GrayText;border-color:GrayText}}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-grey55)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:GrayText}}';var StzhProgressbarItem=function(){function r(r){var s=this;registerInstance(this,r);this.stzhClick=createEvent(this,"stzhClick",7);this.stzhDottedClick=createEvent(this,"stzhDottedClick",7);this.onClick=function(r){s.stzhClick.emit({component:"stzh-progressbar-item",originalEvent:r,index:Array.prototype.indexOf.call(s.element.parentNode.children,s.element)})};this.onDottedClick=function(r){s.stzhDottedClick.emit({component:"stzh-progressbar-item",originalEvent:r,index:Array.prototype.indexOf.call(s.element.parentNode.children,s.element)})};this.label=undefined;this.disabled=false;this.first=false;this.last=false;this.passed=false;this.current=false;this.hide=false;this.dotted=false;this.step=1;this.icon="";this.analyticsId=undefined}r.prototype.componentDidRender=function(){var r=this;requestAnimationFrame((function(){r.button.setAttribute("s-object-id",r.analyticsId||r.text.innerText)}))};r.prototype.render=function(){var r=this;var s={"stzh-progressbar-item":true,"stzh-progressbar-item--first":this.first,"stzh-progressbar-item--last":this.last,"stzh-progressbar-item--passed":this.passed,"stzh-progressbar-item--current":this.current,"stzh-progressbar-item--hide":this.hide,"stzh-progressbar-item--dotted":this.dotted,"stzh-progressbar-item--has-icon":!!this.icon,"stzh-progressbar-item--is-disabled":this.disabled};var t=h("button",{class:"stzh-progressbar-item__dotted",onClick:this.onDottedClick},h("stzh-icon",{class:"stzh-progressbar-item__dotted-icon",name:"more-horizontal"}));return h(Host,{role:"listitem"},h("div",{class:s},this.last&&this.dotted&&t,h("button",{ref:function(s){return r.button=s},class:"stzh-progressbar-item__button","aria-pressed":this.current?"true":"false",disabled:this.dotted&&this.first||this.disabled,onClick:this.onClick},h("span",{class:"stzh-progressbar-item__number-block"},this.icon?h("stzh-icon",{class:"stzh-progressbar-item__user-icon",name:this.icon}):h(Fragment,null,h("span",{class:"stzh-progressbar-item__number"},this.step),this.passed&&h("stzh-icon",{class:"stzh-progressbar-item__icon",name:"checkmark"}))),h("span",{ref:function(s){return r.text=s},class:"stzh-progressbar-item__label-block"},this.label?this.label:h("slot",null))),this.first&&this.dotted&&t))};Object.defineProperty(r.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();StzhProgressbarItem.style=stzhProgressbarItemCss;export{StzhProgressbarItem as stzh_progressbar_item};
+import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhProgressbarItemCss='.sc-stzh-progressbar-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-progressbar-item-h{display:none}.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::before,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::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-progressbar-item-h .has-focus.sc-stzh-progressbar-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-progressbar-item-h .stzh-fylingfocus-focused.sc-stzh-progressbar-item{outline-style:none !important}.sc-stzh-progressbar-item-h .stzh-fylingfocus-focused.sc-stzh-progressbar-item::-moz-focus-inner{border:0 !important}[hide].sc-stzh-progressbar-item-h{display:none}.stzh-progressbar-item.sc-stzh-progressbar-item{text-align:center}.stzh-progressbar-item__button.sc-stzh-progressbar-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background-color:transparent;border:none;cursor:pointer;border-radius:var(--stzh-form-input-border-radius)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Highlight;border-color:Highlight}}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-primary8)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:2.1875rem;height:2.1875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:1.3125rem;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stzh-color-grey55);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{width:2.625rem;height:2.625rem;margin-bottom:var(--stzh-space-large)}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:none;content:"";position:absolute;top:1rem;right:2.125rem;width:100vw;height:0.0625rem;background-color:var(--stzh-base-border-color);z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:1.25rem;right:2.5625rem}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item::after{content:"";z-index:0;position:absolute;display:block;width:100%;height:100%;top:0;left:0;border-radius:1.3125rem;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:block;font-size:0.875rem;line-height:1.28;color:var(--stzh-color-grey55);padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 599px){.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{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-progressbar-item__number.sc-stzh-progressbar-item,.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{z-index:1}.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-xsmall);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:CanvasText}}.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-small);color:currentColor}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;position:absolute;top:0.1875rem;width:1.6875rem;height:1.6875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:50%;cursor:pointer;-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:Highlight}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:var(--stzh-color-primary8)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:Canvas}}@media screen and (min-width: 600px){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before,.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block}.stzh-progressbar-item--first.sc-stzh-progressbar-item{position:relative}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.84375rem))}@media screen and (min-width: 600px){.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.96875rem))}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:Canvas;border-color:CanvasText}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{border-color:Highlight}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:transparent}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Canvas}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:SelectedItem}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item:hover{-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));border:solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:SelectedItem;border-color:SelectedItem;background-color:Canvas}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block;background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));z-index:-1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:CanvasText}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:Canvas}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:SelectedItem}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{margin-bottom:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{padding-left:0;padding-right:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{position:relative;z-index:0;top:0.3125rem;width:1.6875rem;height:1.6875rem;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{top:0.5rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.75rem;right:1.625rem}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.8125rem;right:1.875rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:none}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:var(--stzh-color-white);z-index:1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:Canvas}}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{cursor:not-allowed}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-grey55);border-color:var(--stzh-base-border-color)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:GrayText;border-color:GrayText}}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-grey55)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:GrayText}}';var StzhProgressbarItem=function(){function r(r){var s=this;registerInstance(this,r);this.stzhClick=createEvent(this,"stzhClick",7);this.stzhDottedClick=createEvent(this,"stzhDottedClick",7);this.onClick=function(r){s.stzhClick.emit({component:"stzh-progressbar-item",originalEvent:r,index:Array.prototype.indexOf.call(s.element.parentNode.children,s.element)})};this.onDottedClick=function(r){s.stzhDottedClick.emit({component:"stzh-progressbar-item",originalEvent:r,index:Array.prototype.indexOf.call(s.element.parentNode.children,s.element)})};this.label=undefined;this.disabled=false;this.first=false;this.last=false;this.passed=false;this.current=false;this.hide=false;this.dotted=false;this.step=1;this.icon="";this.analyticsId=undefined}r.prototype.componentDidRender=function(){var r=this;requestAnimationFrame((function(){var s;(s=r.button)===null||s===void 0?void 0:s.setAttribute("s-object-id",r.analyticsId||r.text.innerText)}))};r.prototype.render=function(){var r=this;var s={"stzh-progressbar-item":true,"stzh-progressbar-item--first":this.first,"stzh-progressbar-item--last":this.last,"stzh-progressbar-item--passed":this.passed,"stzh-progressbar-item--current":this.current,"stzh-progressbar-item--hide":this.hide,"stzh-progressbar-item--dotted":this.dotted,"stzh-progressbar-item--has-icon":!!this.icon,"stzh-progressbar-item--is-disabled":this.disabled};var t=h("button",{class:"stzh-progressbar-item__dotted",onClick:this.onDottedClick},h("stzh-icon",{class:"stzh-progressbar-item__dotted-icon",name:"more-horizontal"}));return h(Host,{role:"listitem"},h("div",{class:s},this.last&&this.dotted&&t,h("button",{ref:function(s){return r.button=s},class:"stzh-progressbar-item__button","aria-pressed":this.current?"true":"false",disabled:this.dotted&&this.first||this.disabled,onClick:this.onClick},h("span",{class:"stzh-progressbar-item__number-block"},this.icon?h("stzh-icon",{class:"stzh-progressbar-item__user-icon",name:this.icon}):h(Fragment,null,h("span",{class:"stzh-progressbar-item__number"},this.step),this.passed&&h("stzh-icon",{class:"stzh-progressbar-item__icon",name:"checkmark"}))),h("span",{ref:function(s){return r.text=s},class:"stzh-progressbar-item__label-block"},this.label?this.label:h("slot",null))),this.first&&this.dotted&&t))};Object.defineProperty(r.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();StzhProgressbarItem.style=stzhProgressbarItemCss;export{StzhProgressbarItem as stzh_progressbar_item};
 //# sourceMappingURL=stzh-progressbar-item.entry.js.map

package/dist/esm-es5/stzh-progressbar-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhProgressbarItemCss","StzhProgressbarItem","this","onClick","event","_this","stzhClick","emit","component","originalEvent","index","Array","prototype","indexOf","call","element","parentNode","children","onDottedClick","stzhDottedClick","componentDidRender","requestAnimationFrame","button","setAttribute","analyticsId","text","innerText","render","classes","first","last","passed","current","hide","dotted","icon","disabled","h","class","name","Host","role","ref","el","Fragment","step","label"],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n  text-align: center;\n\n  &__button {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimary8;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font('heavy');\n    @include fontCurve('p1');\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $progressbarItemSize;\n    height: $progressbarItemSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: $progressbarItemSmallUp / 2;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorGrey55;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $progressbarItemSmallUp;\n      height: $progressbarItemSmallUp;\n      margin-bottom: space('large');\n    }\n\n\t\t// set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: '';\n      position: absolute;\n      top: 16px;\n      right: $progressbarItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      background-color: $baseBorderColor;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $progressbarItemSmallUp - 1px;\n      }\n    }\n  }\n\n  &__number-block,\n  &__dotted {\n    &::after {\n      content: '';\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      border-radius: $progressbarItemSmallUp / 2;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey55;\n    padding: space('xxsmall') space('small');\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize('xsmall')};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize('small')};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: 50%;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorPrimary8;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n    @include mq($from: small) {\n      right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n\t\t@include font('heavy');\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorWhite;\n    border: solid 1px $colorPrimary;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  &--passed &__number-block,\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed &__user-icon {\n    color: $colorPrimary;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font('heavy');\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    border: none;\n    background-color: transparent;\n\n    // change dimensions to be still hidden\n    @include mq($from: small) {\n      top: 8px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n\n    // realign white line\n    &::before {\n      top: 12px;\n      right: 26px;\n\n      @include mq($from: small) {\n        top: 13px;\n        right: 30px;\n      }\n    }\n  }\n\n  &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  // &--is-disabled &__number-block {\n  //   background-color: $baseBorderColor;\n  // }\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorGrey55;\n    border-color: $baseBorderColor;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey55;\n\n    @include highContrast() {\n      color: GrayText;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarItemClickEvent,\n  StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-progressbar-item\",\n  styleUrl: \"stzh-progressbar-item.scss\",\n  scoped: true\n})\nexport class StzhProgressbarItem {\n  @Prop({ reflect: true }) label: string;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) first: boolean = false;\n\n  @Prop({ reflect: true }) last: boolean = false;\n\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  @Prop({ reflect: true }) current: boolean = false;\n\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  @Prop({ reflect: true }) step: number = 1;\n\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhProgressbarItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\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 classes = {\n      \"stzh-progressbar-item\": true,\n      \"stzh-progressbar-item--first\": this.first,\n      \"stzh-progressbar-item--last\": this.last,\n      \"stzh-progressbar-item--passed\": this.passed,\n      \"stzh-progressbar-item--current\": this.current,\n      \"stzh-progressbar-item--hide\": this.hide,\n      \"stzh-progressbar-item--dotted\": this.dotted,\n      \"stzh-progressbar-item--has-icon\": !!this.icon,\n      \"stzh-progressbar-item--is-disabled\": this.disabled\n    };\n\n    const dotted = (\n      <button\n        class=\"stzh-progressbar-item__dotted\"\n        onClick={this.onDottedClick}\n      >\n        <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n      </button>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          <button\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            class=\"stzh-progressbar-item__button\"\n            aria-pressed={this.current ? \"true\" : \"false\"}\n            disabled={(this.dotted && this.first) || this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-progressbar-item__number-block\">\n              {this.icon\n                ?\n                <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n                :\n                <Fragment>\n                  <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                  {this.passed &&\n                    <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n                  }\n                </Fragment>\n              }\n            </span>\n            <span\n              ref={(el) => (this.text = el as HTMLElement)}\n              class=\"stzh-progressbar-item__label-block\"\n            >\n              {this.label ? this.label : <slot></slot>}\n            </span>\n          </button>\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kHAAA,IAAMA,uBAAyB,++qB,ICwBlBC,oBAAmB,W,4JAuCtBC,KAAAC,QAAU,SAACC,GACjBC,EAAKC,UAAUC,KAAK,CAClBC,UAAW,wBACXC,cAAeL,EACfM,MAAOC,MAAMC,UAAUC,QAAQC,KAAKT,EAAKU,QAAQC,WAAWC,SAAUZ,EAAKU,U,EAIvEb,KAAAgB,cAAgB,SAACd,GACvBC,EAAKc,gBAAgBZ,KAAK,CACxBC,UAAW,wBACXC,cAAeL,EACfM,MAAOC,MAAMC,UAAUC,QAAQC,KAAKT,EAAKU,QAAQC,WAAWC,SAAUZ,EAAKU,U,qCAhDlC,M,WAEH,M,UAED,M,YAEE,M,aAEC,M,UAEH,M,YAEE,M,UAEH,E,UAEA,G,2BAoCxCd,EAAAW,UAAAQ,mBAAA,eAAAf,EAAAH,KACEmB,uBAAsB,WACpBhB,EAAKiB,OAAOC,aAAa,cAAelB,EAAKmB,aAAenB,EAAKoB,KAAKC,U,KAI1EzB,EAAAW,UAAAe,OAAA,eAAAtB,EAAAH,KACE,IAAM0B,EAAU,CACd,wBAAyB,KACzB,+BAAgC1B,KAAK2B,MACrC,8BAA+B3B,KAAK4B,KACpC,gCAAiC5B,KAAK6B,OACtC,iCAAkC7B,KAAK8B,QACvC,8BAA+B9B,KAAK+B,KACpC,gCAAiC/B,KAAKgC,OACtC,oCAAqChC,KAAKiC,KAC1C,qCAAsCjC,KAAKkC,UAG7C,IAAMF,EACJG,EAAA,UACEC,MAAM,gCACNnC,QAASD,KAAKgB,eAEdmB,EAAA,aAAWC,MAAM,qCAAqCC,KAAK,qBAI/D,OACEF,EAACG,KAAI,CAACC,KAAK,YACTJ,EAAA,OAAKC,MAAOV,GACT1B,KAAK4B,MAAQ5B,KAAKgC,QAAUA,EAC7BG,EAAA,UACEK,IAAK,SAACC,GAAE,OAAMtC,EAAKiB,OAASqB,CAApB,EACRL,MAAM,gCAA+B,eACvBpC,KAAK8B,QAAU,OAAS,QACtCI,SAAWlC,KAAKgC,QAAUhC,KAAK2B,OAAU3B,KAAKkC,SAC9CjC,QAASD,KAAKC,SAEdkC,EAAA,QAAMC,MAAM,uCACTpC,KAAKiC,KAEJE,EAAA,aAAWC,MAAM,mCAAmCC,KAAMrC,KAAKiC,OAE/DE,EAACO,SAAQ,KACPP,EAAA,QAAMC,MAAM,iCAAiCpC,KAAK2C,MACjD3C,KAAK6B,QACJM,EAAA,aAAWC,MAAM,8BAA8BC,KAAK,gBAK5DF,EAAA,QACEK,IAAK,SAACC,GAAE,OAAMtC,EAAKoB,KAAOkB,CAAlB,EACRL,MAAM,sCAELpC,KAAK4C,MAAQ5C,KAAK4C,MAAQT,EAAA,eAG9BnC,KAAK2B,OAAS3B,KAAKgC,QAAUA,G,qIAlHR,G"}
+{"version":3,"names":["stzhProgressbarItemCss","StzhProgressbarItem","this","onClick","event","_this","stzhClick","emit","component","originalEvent","index","Array","prototype","indexOf","call","element","parentNode","children","onDottedClick","stzhDottedClick","componentDidRender","requestAnimationFrame","_a","button","setAttribute","analyticsId","text","innerText","render","classes","first","last","passed","current","hide","dotted","icon","disabled","h","class","name","Host","role","ref","el","Fragment","step","label"],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n  text-align: center;\n\n  &__button {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimary8;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font('heavy');\n    @include fontCurve('p1');\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $progressbarItemSize;\n    height: $progressbarItemSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: $progressbarItemSmallUp / 2;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorGrey55;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $progressbarItemSmallUp;\n      height: $progressbarItemSmallUp;\n      margin-bottom: space('large');\n    }\n\n\t\t// set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: '';\n      position: absolute;\n      top: 16px;\n      right: $progressbarItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      background-color: $baseBorderColor;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $progressbarItemSmallUp - 1px;\n      }\n    }\n  }\n\n  &__number-block,\n  &__dotted {\n    &::after {\n      content: '';\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      border-radius: $progressbarItemSmallUp / 2;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey55;\n    padding: space('xxsmall') space('small');\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize('xsmall')};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize('small')};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: 50%;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorPrimary8;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n    @include mq($from: small) {\n      right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n\t\t@include font('heavy');\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorWhite;\n    border: solid 1px $colorPrimary;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  &--passed &__number-block,\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed &__user-icon {\n    color: $colorPrimary;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font('heavy');\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    border: none;\n    background-color: transparent;\n\n    // change dimensions to be still hidden\n    @include mq($from: small) {\n      top: 8px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n\n    // realign white line\n    &::before {\n      top: 12px;\n      right: 26px;\n\n      @include mq($from: small) {\n        top: 13px;\n        right: 30px;\n      }\n    }\n  }\n\n  &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  // &--is-disabled &__number-block {\n  //   background-color: $baseBorderColor;\n  // }\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorGrey55;\n    border-color: $baseBorderColor;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey55;\n\n    @include highContrast() {\n      color: GrayText;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarItemClickEvent,\n  StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-progressbar-item\",\n  styleUrl: \"stzh-progressbar-item.scss\",\n  scoped: true\n})\nexport class StzhProgressbarItem {\n  @Prop({ reflect: true }) label: string;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) first: boolean = false;\n\n  @Prop({ reflect: true }) last: boolean = false;\n\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  @Prop({ reflect: true }) current: boolean = false;\n\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  @Prop({ reflect: true }) step: number = 1;\n\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhProgressbarItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\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 classes = {\n      \"stzh-progressbar-item\": true,\n      \"stzh-progressbar-item--first\": this.first,\n      \"stzh-progressbar-item--last\": this.last,\n      \"stzh-progressbar-item--passed\": this.passed,\n      \"stzh-progressbar-item--current\": this.current,\n      \"stzh-progressbar-item--hide\": this.hide,\n      \"stzh-progressbar-item--dotted\": this.dotted,\n      \"stzh-progressbar-item--has-icon\": !!this.icon,\n      \"stzh-progressbar-item--is-disabled\": this.disabled\n    };\n\n    const dotted = (\n      <button\n        class=\"stzh-progressbar-item__dotted\"\n        onClick={this.onDottedClick}\n      >\n        <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n      </button>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          <button\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            class=\"stzh-progressbar-item__button\"\n            aria-pressed={this.current ? \"true\" : \"false\"}\n            disabled={(this.dotted && this.first) || this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-progressbar-item__number-block\">\n              {this.icon\n                ?\n                <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n                :\n                <Fragment>\n                  <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                  {this.passed &&\n                    <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n                  }\n                </Fragment>\n              }\n            </span>\n            <span\n              ref={(el) => (this.text = el as HTMLElement)}\n              class=\"stzh-progressbar-item__label-block\"\n            >\n              {this.label ? this.label : <slot></slot>}\n            </span>\n          </button>\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kHAAA,IAAMA,uBAAyB,++qB,ICwBlBC,oBAAmB,W,4JAuCtBC,KAAAC,QAAU,SAACC,GACjBC,EAAKC,UAAUC,KAAK,CAClBC,UAAW,wBACXC,cAAeL,EACfM,MAAOC,MAAMC,UAAUC,QAAQC,KAAKT,EAAKU,QAAQC,WAAWC,SAAUZ,EAAKU,U,EAIvEb,KAAAgB,cAAgB,SAACd,GACvBC,EAAKc,gBAAgBZ,KAAK,CACxBC,UAAW,wBACXC,cAAeL,EACfM,MAAOC,MAAMC,UAAUC,QAAQC,KAAKT,EAAKU,QAAQC,WAAWC,SAAUZ,EAAKU,U,qCAhDlC,M,WAEH,M,UAED,M,YAEE,M,aAEC,M,UAEH,M,YAEE,M,UAEH,E,UAEA,G,2BAoCxCd,EAAAW,UAAAQ,mBAAA,eAAAf,EAAAH,KACEmB,uBAAsB,W,OACpBC,EAAAjB,EAAKkB,UAAM,MAAAD,SAAA,SAAAA,EAAEE,aAAa,cAAenB,EAAKoB,aAAepB,EAAKqB,KAAKC,U,KAI3E1B,EAAAW,UAAAgB,OAAA,eAAAvB,EAAAH,KACE,IAAM2B,EAAU,CACd,wBAAyB,KACzB,+BAAgC3B,KAAK4B,MACrC,8BAA+B5B,KAAK6B,KACpC,gCAAiC7B,KAAK8B,OACtC,iCAAkC9B,KAAK+B,QACvC,8BAA+B/B,KAAKgC,KACpC,gCAAiChC,KAAKiC,OACtC,oCAAqCjC,KAAKkC,KAC1C,qCAAsClC,KAAKmC,UAG7C,IAAMF,EACJG,EAAA,UACEC,MAAM,gCACNpC,QAASD,KAAKgB,eAEdoB,EAAA,aAAWC,MAAM,qCAAqCC,KAAK,qBAI/D,OACEF,EAACG,KAAI,CAACC,KAAK,YACTJ,EAAA,OAAKC,MAAOV,GACT3B,KAAK6B,MAAQ7B,KAAKiC,QAAUA,EAC7BG,EAAA,UACEK,IAAK,SAACC,GAAE,OAAMvC,EAAKkB,OAASqB,CAApB,EACRL,MAAM,gCAA+B,eACvBrC,KAAK+B,QAAU,OAAS,QACtCI,SAAWnC,KAAKiC,QAAUjC,KAAK4B,OAAU5B,KAAKmC,SAC9ClC,QAASD,KAAKC,SAEdmC,EAAA,QAAMC,MAAM,uCACTrC,KAAKkC,KAEJE,EAAA,aAAWC,MAAM,mCAAmCC,KAAMtC,KAAKkC,OAE/DE,EAACO,SAAQ,KACPP,EAAA,QAAMC,MAAM,iCAAiCrC,KAAK4C,MACjD5C,KAAK8B,QACJM,EAAA,aAAWC,MAAM,8BAA8BC,KAAK,gBAK5DF,EAAA,QACEK,IAAK,SAACC,GAAE,OAAMvC,EAAKqB,KAAOkB,CAAlB,EACRL,MAAM,sCAELrC,KAAK6C,MAAQ7C,KAAK6C,MAAQT,EAAA,eAG9BpC,KAAK4B,OAAS5B,KAAKiC,QAAUA,G,qIAlHR,G"}

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhSkiplinkCss=".sc-stzh-skiplink-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-skiplink-h{display:none}.sc-stzh-skiplink-h *.sc-stzh-skiplink,.sc-stzh-skiplink-h *.sc-stzh-skiplink::before,.sc-stzh-skiplink-h *.sc-stzh-skiplink::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-skiplink-h .has-focus.sc-stzh-skiplink{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink{outline-style:none !important}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink::-moz-focus-inner{border:0 !important}.sc-stzh-skiplink-h:not([focused]){padding:0 !important;margin:0 !important}.stzh-skiplink.sc-stzh-skiplink{display:inline-block;right:0;top:0;white-space:nowrap;padding:var(--stzh-space-large) var(--stzh-space-xxlarge);border:solid 0.0625rem var(--stzh-color-grey40);border-radius:0.125rem;background:var(--stzh-color-white);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-skiplink.sc-stzh-skiplink:not(:focus):not(:active){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-skiplink.sc-stzh-skiplink:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";var StzhSkiplink=function(){function t(t){var s=this;registerInstance(this,t);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!s.focusedByInput){s.link.focus()}s.focusedByInput=false};this.onFocus=function(t){s.focusedByInput=true;var e=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(e);s.stzhFocus.emit({component:"stzh-skiplink",originalEvent:t})};this.onBlur=function(t){var e=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(e);s.stzhBlur.emit({component:"stzh-skiplink",originalEvent:t})};this.label="";this.href=undefined;this.linkAccesskey=undefined;this.linkTitle=undefined;this.analyticsId=undefined;this.focused=false}t.prototype.focusinHandler=function(){this.focused=true};t.prototype.focusoutHandler=function(){this.focused=false};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.link.setAttribute("s-object-id",t.analyticsId||t.label||t.text.innerText)}))};t.prototype.render=function(){var t=this;return h(Host,{focused:this.focused,tabindex:"-1",onFocus:this.onRootFocus},h("a",{ref:function(s){return t.link=s},class:"stzh-skiplink",href:this.href,accessKey:this.linkAccesskey,title:this.linkTitle,onFocus:this.onFocus,onBlur:this.onBlur},h("div",{ref:function(s){return t.text=s}},this.label?this.label:h("slot",null))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhSkiplink.style=stzhSkiplinkCss;export{StzhSkiplink as stzh_skiplink};
+import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhSkiplinkCss=".sc-stzh-skiplink-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-skiplink-h{display:none}.sc-stzh-skiplink-h *.sc-stzh-skiplink,.sc-stzh-skiplink-h *.sc-stzh-skiplink::before,.sc-stzh-skiplink-h *.sc-stzh-skiplink::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-skiplink-h .has-focus.sc-stzh-skiplink{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink{outline-style:none !important}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink::-moz-focus-inner{border:0 !important}.sc-stzh-skiplink-h:not([focused]){padding:0 !important;margin:0 !important}.stzh-skiplink.sc-stzh-skiplink{display:inline-block;right:0;top:0;white-space:nowrap;padding:var(--stzh-space-large) var(--stzh-space-xxlarge);border:solid 0.0625rem var(--stzh-color-grey40);border-radius:0.125rem;background:var(--stzh-color-white);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-skiplink.sc-stzh-skiplink:not(:focus):not(:active){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-skiplink.sc-stzh-skiplink:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";var StzhSkiplink=function(){function t(t){var s=this;registerInstance(this,t);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!s.focusedByInput){s.link.focus()}s.focusedByInput=false};this.onFocus=function(t){s.focusedByInput=true;var i=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(i);s.stzhFocus.emit({component:"stzh-skiplink",originalEvent:t})};this.onBlur=function(t){var i=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(i);s.stzhBlur.emit({component:"stzh-skiplink",originalEvent:t})};this.label="";this.href=undefined;this.linkAccesskey=undefined;this.linkTitle=undefined;this.analyticsId=undefined;this.focused=false}t.prototype.focusinHandler=function(){this.focused=true};t.prototype.focusoutHandler=function(){this.focused=false};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){var s;(s=t.link)===null||s===void 0?void 0:s.setAttribute("s-object-id",t.analyticsId||t.label||t.text.innerText)}))};t.prototype.render=function(){var t=this;return h(Host,{focused:this.focused,tabindex:"-1",onFocus:this.onRootFocus},h("a",{ref:function(s){return t.link=s},class:"stzh-skiplink",href:this.href,accessKey:this.linkAccesskey,title:this.linkTitle,onFocus:this.onFocus,onBlur:this.onBlur},h("div",{ref:function(s){return t.text=s}},this.label?this.label:h("slot",null))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhSkiplink.style=stzhSkiplinkCss;export{StzhSkiplink as stzh_skiplink};
 //# sourceMappingURL=stzh-skiplink.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["stzhSkiplinkCss","StzhSkiplink","this","focusedByInput","onRootFocus","_this","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","prototype","focusinHandler","focused","focusoutHandler","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","label","text","innerText","render","h","Host","tabindex","ref","el","class","href","accessKey","linkAccesskey","title","linkTitle"],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n  // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n  // so the host element won't take up any space when link inside is not focuseds\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n.stzh-skiplink {\n  @include visuallyhiddenFocusable;\n  display: inline-block;\n  right: 0;\n  top: 0;\n  white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n  color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n  text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n  Component,\n  Host,\n  Listen,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  StzhSkiplinkFocusEvent,\n  StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-skiplink\",\n  styleUrl: \"stzh-skiplink.scss\",\n  scoped: true\n})\nexport class StzhSkiplink {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** href for linking to e.g. id of an element to skip to */\n  @Prop() href: string;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Link title for description e.g. how to use skiplink with access key ([ALT + 1]) */\n  @Prop() linkTitle: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Whether the skiplink is currently focused */\n  @State() focused: boolean = false;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n  @Element() element: HTMLStzhSkiplinkElement;\n\n  @Listen('focusin')\n  focusinHandler() {\n    this.focused = true;\n  }\n\n  @Listen('focusout')\n  focusoutHandler() {\n    this.focused = false;\n  }\n\n  private link: HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    // dispatch native focus event\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n\n    // dispatch own focus event for updating flyingfocus position correctly\n    this.stzhFocus.emit({\n      component: \"stzh-skiplink\",\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\n    this.stzhBlur.emit({\n      component: \"stzh-skiplink\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link.setAttribute(\"s-object-id\", this.analyticsId || this.label || this.text.innerText);\n    });\n  }\n\n  render() {\n    return (\n      <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <a\n          ref={(el) => (this.link = el as HTMLAnchorElement)}\n          class=\"stzh-skiplink\"\n          href={this.href}\n          accessKey={this.linkAccesskey}\n          title={this.linkTitle}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <div ref={(el) => (this.text = el as HTMLDivElement)}>\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,IAAMA,gBAAkB,+xD,ICyBXC,aAAY,W,8IA2CfC,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,WACpB,IAAKC,EAAKF,eAAgB,CACxBE,EAAKC,KAAKC,O,CAGZF,EAAKF,eAAiB,K,EAGhBD,KAAAM,QAAU,SAACC,GACjBJ,EAAKF,eAAiB,KAGtB,IAAMO,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcP,GAG3BL,EAAKa,UAAUC,KAAK,CAClBC,UAAW,gBACXC,cAAeZ,G,EAIXP,KAAAoB,OAAS,SAACb,GAChB,IAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcM,GAE3BlB,EAAKmB,SAASL,KAAK,CACjBC,UAAW,gBACXC,cAAeZ,G,aAjFK,G,kHAmBI,K,CAW5BR,EAAAwB,UAAAC,eAAA,WACExB,KAAKyB,QAAU,I,EAIjB1B,EAAAwB,UAAAG,gBAAA,WACE1B,KAAKyB,QAAU,K,EAiDjB1B,EAAAwB,UAAAI,mBAAA,eAAAxB,EAAAH,KACE4B,uBAAsB,WACpBzB,EAAKC,KAAKyB,aAAa,cAAe1B,EAAK2B,aAAe3B,EAAK4B,OAAS5B,EAAK6B,KAAKC,U,KAItFlC,EAAAwB,UAAAW,OAAA,eAAA/B,EAAAH,KACE,OACEmC,EAACC,KAAI,CAACX,QAASzB,KAAKyB,QAASY,SAAS,KAAK/B,QAASN,KAAKE,aACvDiC,EAAA,KACEG,IAAK,SAACC,GAAE,OAAMpC,EAAKC,KAAOmC,CAAlB,EACRC,MAAM,gBACNC,KAAMzC,KAAKyC,KACXC,UAAW1C,KAAK2C,cAChBC,MAAO5C,KAAK6C,UACZvC,QAASN,KAAKM,QACdc,OAAQpB,KAAKoB,QAEbe,EAAA,OAAKG,IAAK,SAACC,GAAE,OAAMpC,EAAK6B,KAAOO,CAAlB,GACVvC,KAAK+B,MAAQ/B,KAAK+B,MAAQI,EAAA,e,qIA1Gd,G"}
+{"version":3,"names":["stzhSkiplinkCss","StzhSkiplink","this","focusedByInput","onRootFocus","_this","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","prototype","focusinHandler","focused","focusoutHandler","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","label","text","innerText","render","h","Host","tabindex","ref","el","class","href","accessKey","linkAccesskey","title","linkTitle"],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n  // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n  // so the host element won't take up any space when link inside is not focuseds\n  padding: 0 !important;\n  margin: 0 !important;\n}\n\n.stzh-skiplink {\n  @include visuallyhiddenFocusable;\n  display: inline-block;\n  right: 0;\n  top: 0;\n  white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n  color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n  text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n  Component,\n  Host,\n  Listen,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  StzhSkiplinkFocusEvent,\n  StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-skiplink\",\n  styleUrl: \"stzh-skiplink.scss\",\n  scoped: true\n})\nexport class StzhSkiplink {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** href for linking to e.g. id of an element to skip to */\n  @Prop() href: string;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Link title for description e.g. how to use skiplink with access key ([ALT + 1]) */\n  @Prop() linkTitle: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Whether the skiplink is currently focused */\n  @State() focused: boolean = false;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n  @Element() element: HTMLStzhSkiplinkElement;\n\n  @Listen('focusin')\n  focusinHandler() {\n    this.focused = true;\n  }\n\n  @Listen('focusout')\n  focusoutHandler() {\n    this.focused = false;\n  }\n\n  private link: HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    // dispatch native focus event\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n\n    // dispatch own focus event for updating flyingfocus position correctly\n    this.stzhFocus.emit({\n      component: \"stzh-skiplink\",\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\n    this.stzhBlur.emit({\n      component: \"stzh-skiplink\",\n      originalEvent: event\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.label || this.text.innerText);\n    });\n  }\n\n  render() {\n    return (\n      <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <a\n          ref={(el) => (this.link = el as HTMLAnchorElement)}\n          class=\"stzh-skiplink\"\n          href={this.href}\n          accessKey={this.linkAccesskey}\n          title={this.linkTitle}\n          onFocus={this.onFocus}\n          onBlur={this.onBlur}\n        >\n          <div ref={(el) => (this.text = el as HTMLDivElement)}>\n            {this.label ? this.label : <slot></slot>}\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,IAAMA,gBAAkB,+xD,ICyBXC,aAAY,W,8IA2CfC,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,WACpB,IAAKC,EAAKF,eAAgB,CACxBE,EAAKC,KAAKC,O,CAGZF,EAAKF,eAAiB,K,EAGhBD,KAAAM,QAAU,SAACC,GACjBJ,EAAKF,eAAiB,KAGtB,IAAMO,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcP,GAG3BL,EAAKa,UAAUC,KAAK,CAClBC,UAAW,gBACXC,cAAeZ,G,EAIXP,KAAAoB,OAAS,SAACb,GAChB,IAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcM,GAE3BlB,EAAKmB,SAASL,KAAK,CACjBC,UAAW,gBACXC,cAAeZ,G,aAjFK,G,kHAmBI,K,CAW5BR,EAAAwB,UAAAC,eAAA,WACExB,KAAKyB,QAAU,I,EAIjB1B,EAAAwB,UAAAG,gBAAA,WACE1B,KAAKyB,QAAU,K,EAiDjB1B,EAAAwB,UAAAI,mBAAA,eAAAxB,EAAAH,KACE4B,uBAAsB,W,OACpBC,EAAA1B,EAAKC,QAAI,MAAAyB,SAAA,SAAAA,EAAEC,aAAa,cAAe3B,EAAK4B,aAAe5B,EAAK6B,OAAS7B,EAAK8B,KAAKC,U,KAIvFnC,EAAAwB,UAAAY,OAAA,eAAAhC,EAAAH,KACE,OACEoC,EAACC,KAAI,CAACZ,QAASzB,KAAKyB,QAASa,SAAS,KAAKhC,QAASN,KAAKE,aACvDkC,EAAA,KACEG,IAAK,SAACC,GAAE,OAAMrC,EAAKC,KAAOoC,CAAlB,EACRC,MAAM,gBACNC,KAAM1C,KAAK0C,KACXC,UAAW3C,KAAK4C,cAChBC,MAAO7C,KAAK8C,UACZxC,QAASN,KAAKM,QACdc,OAAQpB,KAAKoB,QAEbgB,EAAA,OAAKG,IAAK,SAACC,GAAE,OAAMrC,EAAK8B,KAAOO,CAAlB,GACVxC,KAAKgC,MAAQhC,KAAKgC,MAAQI,EAAA,e,qIA1Gd,G"}