@oiz/stzh-components 3.3.0-beta5 → 3.3.0-beta6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/cjs/{app-globals-95815145.js → app-globals-2cd4f46b.js} +2 -2
  2. package/dist/cjs/{app-globals-95815145.js.map → app-globals-2cd4f46b.js.map} +1 -1
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/stzh-badge_3.cjs.entry.js +1 -1
  5. package/dist/cjs/stzh-badge_3.cjs.entry.js.map +1 -1
  6. package/dist/cjs/stzh-components.cjs.js +2 -2
  7. package/dist/cjs/stzh-header.cjs.entry.js +23 -13
  8. package/dist/cjs/stzh-header.cjs.entry.js.map +1 -1
  9. package/dist/collection/components/stzh-button/stzh-button.css +3 -2
  10. package/dist/collection/components/stzh-header/stzh-header.js +34 -20
  11. package/dist/collection/components/stzh-header/stzh-header.js.map +1 -1
  12. package/dist/collection/components/stzh-header/stzh-header.stories.js +7 -7
  13. package/dist/components/index.js +1 -1
  14. package/dist/components/stzh-button2.js +1 -1
  15. package/dist/components/stzh-button2.js.map +1 -1
  16. package/dist/components/stzh-header.js +27 -16
  17. package/dist/components/stzh-header.js.map +1 -1
  18. package/dist/esm/{app-globals-10ef946d.js → app-globals-0aad39a2.js} +2 -2
  19. package/dist/esm/{app-globals-10ef946d.js.map → app-globals-0aad39a2.js.map} +1 -1
  20. package/dist/esm/loader.js +2 -2
  21. package/dist/esm/stzh-badge_3.entry.js +1 -1
  22. package/dist/esm/stzh-badge_3.entry.js.map +1 -1
  23. package/dist/esm/stzh-components.js +2 -2
  24. package/dist/esm/stzh-header.entry.js +23 -13
  25. package/dist/esm/stzh-header.entry.js.map +1 -1
  26. package/dist/stzh-components/{p-4f7f4362.entry.js → p-16581003.entry.js} +2 -2
  27. package/dist/stzh-components/p-16581003.entry.js.map +1 -0
  28. package/dist/stzh-components/{p-45be0b3e.js → p-49fcbbfb.js} +2 -2
  29. package/dist/stzh-components/p-ecbac5ca.entry.js +2 -0
  30. package/dist/stzh-components/p-ecbac5ca.entry.js.map +1 -0
  31. package/dist/stzh-components/stzh-components.esm.js +1 -1
  32. package/dist/stzh-components/stzh-components.esm.js.map +1 -1
  33. package/dist/types/components/stzh-header/stzh-header.d.ts +7 -5
  34. package/dist/types/components.d.ts +12 -12
  35. package/dist/vscode-data.json +9 -5
  36. package/package.json +1 -1
  37. package/dist/stzh-components/p-4f7f4362.entry.js.map +0 -1
  38. package/dist/stzh-components/p-f0887c02.entry.js +0 -2
  39. package/dist/stzh-components/p-f0887c02.entry.js.map +0 -1
  40. /package/dist/stzh-components/{p-45be0b3e.js.map → p-49fcbbfb.js.map} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","filled","label","class","stzhButtonCss","StzhButton","focusedByInput","handleReset","async","checked","defaultChecked","onInput","event","input","stzhChange","emit","component","originalEvent","value","onRootFocus","button","focus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","stzhClick","href","resetListener","target","contains","requestAnimationFrame","renderIcon","iconUsed","icon","name","showToggleIcon","badge","badgeEmpty","badgePosition","badgeType","renderContent","ref","el","text","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","_a","setAttribute","analyticsId","innerText","hasSlot","iconOnly","rounded","fullwidth","a11yDisabled","active","a11yExpanded","effect","textAlign","variant","tabindex","a11yLabel","a11yDescribedby","a11yControls","a11yCurrent","id","buttonId","accessKey","buttonAccesskey","a11yTabindex","stzhIconCss","iconCounter","iconCache","Map","StzhIcon","nameWatcher","iconDisplay","has","svgHtml","get","updateAccessibilityAttributes","showIcon","fetchSvgPromise","fetch","pathMedia","then","response","status","Error","svgString","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","classList","add","outerHTML","set","a11yTitleWatcher","a11yTitle","iconId","title","querySelector","document","createElement","appendChild","innerHTML","setTimeout","style","display"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey90};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorSuccess70};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorBlack};\n --background-color: #{$colorWarning60};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError60};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorPrimary70};\n }\n\n &[filled][type=\"error\"] {\n --background-color: #{$colorError70};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /** Text content of the badge */\n @Prop() label: string = \"\";\n\n /** Type */\n @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host filled={!!this.label}>\n <div class={classes}>\n {this.label || <slot></slot>}\n </div>\n </Host>\n );\n }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n --height: #{$formInputHeight};\n --padding-top: calc(#{space('xsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n --padding-left: #{space('xlarge')};\n --padding-right: #{space('xlarge')};\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n --icon-size: #{iconSize('medium')};\n --icon-toggle-size: 14.5px;\n\n &:where([icon-only]:not([icon-only=\"false\"])) {\n --icon-size: #{iconSize('large')};\n }\n}\n\n@mixin button--size-small() {\n --height: #{$formInputHeightSmall};\n --padding-left: #{space('large')};\n --padding-right: #{space('large')};\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n --height: #{$formInputHeightTiny};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n:host {\n @include button--size-default;\n --color: var(--stzh-button-color, #{$colorWhite});\n --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n --border-width: 0px;\n --border-color: transparent;\n --border-radius: 0px;\n --icon-text-margin: #{space('xsmall')};\n --icon-toggle-color: currentColor;\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --white-space: var(--stzh-button-white-space, normal);\n --box-shadow: none;\n --cursor: pointer;\n\n --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n --hover-border-color: transparent;\n\n display: inline-grid;\n width: auto;\n min-width: var(--height);\n min-height: var(--height);\n pointer-events: var(--stzh-button-pointer-events, auto);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &[icon-only]:not([icon-only=\"false\"]) {\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: 0;\n --padding-right: 0;\n\n width: var(--height);\n height: var(--height);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[no-padding-left]:not([no-padding-left=\"false\"]) {\n --padding-left: 0px;\n }\n\n &[no-padding-right]:not([no-padding-right=\"false\"]) {\n --padding-right: 0px;\n }\n\n &[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n }\n\n &[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: transparent;\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--background-color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--stzh-button-active-color, #{$colorWhite});\n --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --color: var(--stzh-button-disabled-color, #{$colorWhite});\n --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include button--size-default;\n }\n\n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include button--size-small;\n }\n\n :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n @include button--size-tiny;\n }\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n @include font('heavy');\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: var(--cursor);\n text-decoration-line: none;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius);\n text-align: left;\n box-shadow: var(--box-shadow);\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper,\n &__toggle-icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n width: auto;\n height: 1em;\n }\n\n &__toggle-icon-wrapper {\n width: var(--icon-size);\n height: var(--icon-size);\n }\n\n &__toggle-icon {\n position: relative;\n display: block;\n width: var(--icon-toggle-size);\n height: var(--icon-toggle-size);\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: '';\n display: block;\n width: var(--icon-toggle-size);\n height: 2px;\n transition-property: transform, background-color;\n transition-duration: 500ms;\n transform-origin: top left;\n background-color: var(--icon-toggle-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n /* Hover / Focus / Checked / Disabled of Radio Type */\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorSecondary60;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorSecondary60;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n /* Is expanded */\n\n &--is-expanded &__toggle-icon {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n /* Badge positioning variants */\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon */\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n /* Effect */\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n /* Alignment variants */\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n /* Disabled variant */\n\n &--is-disabled {\n cursor: not-allowed;\n }\n\n /* Default */\n\n &--default.has-focus {\n outline: var(--stzh-flyingfocus-color) solid 3px;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhBadgeType,\n StzhButtonClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Display a badge aligned to button or icons */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /** Badge position */\n @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Whether the button is full width */\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /** Whether the button is rounded */\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /** Size variant (above small breakpoint) */\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /** Size variant (above medium breakpoint) */\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /** Size variant (above large breakpoint) */\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /** Size variant (above ultra breakpoint) */\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n /** Text alignment */\n @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n /** Variant style */\n @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n /** Icon (use instead of icon slot) */\n @Prop() icon: string = \"\";\n\n /** Icon Position */\n @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n /** Checked status (if type is radio) */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Default checked (used by reset, if type is radio) */\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /** The name of the input element (if type is button or radio) */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** The value of the input element (if type is button or radio) */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** `href` if the button should be used as link */\n @Prop() href: string = \"\";\n\n /** Rel (if href is used) */\n @Prop() rel: string;\n\n /** Target if the button is used as link (if `href` used) */\n @Prop() target: string = \"\";\n\n /** Download attribute of link (if `href` used) */\n @Prop() download: string;\n\n /** Type of the button */\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n /** Whether the button is disabled */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether the button is active */\n @Prop({ reflect: true }) active: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Effect/Animation used */\n @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n /** Whether only an icon is used inside the button */\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /** Whether padding left should be removed */\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /** Whether padding right should be removed */\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /** Access key of button (usually a number e.g. 1) */\n @Prop() buttonAccesskey: string;\n\n /** ID of button element */\n @Prop() buttonId: string;\n\n /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\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 /** Aria current of link/button */\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /** Tabindex of link/button */\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /** Blur event */\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /** Change event (only called if type is radio) */\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n /** Click event */\n @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n else {\n this.stzhClick.emit({\n component: \"stzh-button\",\n originalEvent: event,\n href: this.href\n });\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon &&\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n }\n {!this.icon && this.showToggleIcon &&\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n }\n {!this.icon && !this.showToggleIcon &&\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n class=\"stzh-button__text\"\n ref={(el) => (this.text = el as HTMLDivElement)}\n >\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-button__inner\">\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n \"stzh-button--is-expanded\": this.a11yExpanded,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel || 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 aria-current={this.a11yCurrent || null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n defaultChecked={this.defaultChecked}\n checked={this.checked}\n disabled={this.disabled}\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 aria-current={this.a11yCurrent || null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\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 aria-current={this.a11yCurrent || null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n --size: #{iconSize()};\n --color: #{$iconColor};\n --vertical-align: #{$iconVerticalAlign};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n vertical-align: var(--vertical-align);\n width: var(--size);\n height: var(--size);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n\n.stzh-icon {\n display: none;\n\n &__svg {\n width: var(--size);\n height: var(--size);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Watch,\n State,\n Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n shadow: true\n})\nexport class StzhIcon {\n /**\n * Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n */\n @Prop() name: string = \"\";\n\n /**\n * Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n @Element() element: HTMLStzhIconElement;\n\n @State() svgHtml: string = \"\";\n @State() iconDisplay: string = \"none\";\n\n @Watch(\"name\")\n async nameWatcher(name: string) {\n this.iconDisplay = \"none\";\n\n if (name) {\n if (iconCache.has(name)) {\n this.svgHtml = await iconCache.get(name)!;\n this.updateAccessibilityAttributes();\n this.showIcon();\n } else {\n const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n .then(response => {\n if (response.status === 200) {\n return response.text();\n }\n throw new Error('Failed to fetch icon');\n })\n .then(svgString => {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n const svgElement = svgDoc.documentElement as unknown as SVGElement;\n svgElement.classList.add('stzh-icon__svg');\n\n return svgElement.outerHTML;\n });\n\n iconCache.set(name, fetchSvgPromise);\n\n this.svgHtml = await fetchSvgPromise;\n this.updateAccessibilityAttributes();\n this.showIcon();\n }\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n }\n\n @Watch(\"a11yTitle\")\n a11yTitleWatcher(a11yTitle: string) {\n if (!this.svgElement) return;\n\n this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n let title = this.svgElement.querySelector('title');\n\n if (!title) {\n title = document.createElement('title');\n title.id = `${this.iconId}-title`;\n this.svgElement.appendChild(title);\n }\n\n title.innerHTML = a11yTitle;\n this.svgHtml = this.svgElement.outerHTML;\n }\n\n private svgElement: SVGElement | null;\n private iconId: string;\n\n async componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n await this.nameWatcher(this.name);\n }\n\n private updateAccessibilityAttributes() {\n this.a11yTitleWatcher(this.a11yTitle);\n }\n\n private showIcon() {\n // for some obscure reason we need to delay showing the icon in safari,\n // otherwise the icon doesn't show up randomly\n // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n window.setTimeout(() => {\n this.iconDisplay = \"contents\";\n }, 0);\n }\n\n render() {\n return (\n <Host>\n <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}