npm - @oiz/stzh-components - Versions diffs - 4.1.0 → 4.1.1-beta - Mend

@oiz/stzh-components 4.1.0 → 4.1.1-beta

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 (556) hide show

package/dist/components/{p-d5254d48.js.map → p-d1badd5b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-d5254d48.js","mappings":"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","names":[],"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 --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n \n @prop --stzh-link-color: Global: Color of link\n * @prop --stzh-link-hover-color: Global: Hover color of link\n * @prop --stzh-link-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-icon-size: Global: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: Global: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: Global: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: Global: Text underline offset\n /\n\n@mixin link--size-default() {\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --letter-spacing: normal;\n\n @include mq($from: medium) {\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n }\n}\n\n@mixin link--size-small() {\n --font-size: var(--stzh-font-micro-font-size);\n --line-height: var(--stzh-font-micro-text-line-height);\n --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n --font-size: inherit;\n --line-height: inherit;\n --letter-spacing: inherit;\n}\n\n:host {\n //@include link--size-default;\n --color: #{$linkColor};\n --text-decoration-line: #{$linkTextDecorationLine};\n --icon-wrapper-height: #{$linkIconWrapperHeight};\n --icon-size: #{$linkIconSize};\n --height: var(--stzh-link-height, 40px);\n\n --hover-color: #{$linkHoverColor};\n --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n @include mq($from: medium) {\n --height: var(--stzh-link-height, auto);\n }\n\n color: var(--color);\n display: inline-grid;\n width: auto;\n min-height: var(--height);\n pointer-events: var(--stzh-link-pointer-events, auto);\n\n &[height=\"auto\"] {\n --height: var(--stzh-link-auto-height, auto);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[variant=\"secondary\"] {\n --color: #{$linkSecondaryColor};\n --hover-color: #{$linkSecondaryHoverColor};\n }\n\n &[variant=\"back\"] {\n --text-decoration-line: none;\n --hover-color: var(--color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--hover-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey60};\n --hover-color: #{$colorGrey60};\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n @include link--size-inherit;\n}\n\n//@each $breakpoint, $size in $breakpoints {\n// @include mq($from: $breakpoint) {\n// :host(:where([size-#{$breakpoint}=\"default\"])) {\n// @include link--size-default;\n// }\n//\n// :host(:where([size-#{$breakpoint}=\"small\"])) {\n// @include link--size-small;\n// }\n//\n// :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n// @include link--size-inherit;\n// }\n// }\n//}\n\n.stzh-link {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\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 @media (hover: none) {\n color: inherit;\n }\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 --stzh-icon-size: var(--icon-size);\n\n display: none;\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 --stzh-base-color: initial;\n\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 &--has-icon &__icon-wrapper {\n display: inline-flex;\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 /* 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 Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent,\n StzhLinkSize,\n StzhBadgeType,\n StzhLinkClickEvent\n} from \"../../index\";\n\nimport { StzhLinkLocalizedText } from \"./stzh-link.localization\";\nimport { hasSlot, addWordBreakToLinks } from \"../../utils/utils\";\n\n/\n @slot icon - Slot for icon element\n * @slot - Slot for label/text content\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: StzhLinkLocalizedText;\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 /* Height variant (none prevent setting min-height for mikro and small breakpoint) /\n @Prop({ reflect: true }) height: \"default\" \| \"auto\" = \"default\";\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\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\" \| \"back\" = \"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: StzhBadgeType = \"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 /* ID of link element /\n @Prop() linkId: 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 /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: 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 /* Click event /\n @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\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 async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\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 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 onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-link\",\n originalEvent: event,\n href: this.href\n });\n }\n\n private addWordBreakToLinks() {\n const links = Array.from(\n this.element?.getElementsByClassName(\"stzh-link\") \|\| []\n );\n addWordBreakToLinks(links as HTMLElement[]);\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 componentDidLoad() {\n this.addWordBreakToLinks();\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--${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 id={this.linkId}\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 aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\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 id={this.linkId}\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 aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-d1badd5b.js","mappings":"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","names":[],"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 --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n \n @prop --stzh-link-color: Global: Color of link\n * @prop --stzh-link-hover-color: Global: Hover color of link\n * @prop --stzh-link-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-icon-size: Global: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: Global: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: Global: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: Global: Text underline offset\n /\n\n@mixin link--size-default() {\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --letter-spacing: normal;\n\n @include mq($from: medium) {\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n }\n}\n\n@mixin link--size-small() {\n --font-size: var(--stzh-font-micro-font-size);\n --line-height: var(--stzh-font-micro-text-line-height);\n --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n --font-size: inherit;\n --line-height: inherit;\n --letter-spacing: inherit;\n}\n\n:host {\n //@include link--size-default;\n --color: #{$linkColor};\n --text-decoration-line: #{$linkTextDecorationLine};\n --icon-wrapper-height: #{$linkIconWrapperHeight};\n --icon-size: #{$linkIconSize};\n --height: var(--stzh-link-height, 40px);\n\n --hover-color: #{$linkHoverColor};\n --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n @include mq($from: medium) {\n --height: var(--stzh-link-height, auto);\n }\n\n color: var(--color);\n display: inline-grid;\n width: auto;\n min-height: var(--height);\n pointer-events: var(--stzh-link-pointer-events, auto);\n\n &[height=\"auto\"] {\n --height: var(--stzh-link-auto-height, auto);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[variant=\"secondary\"] {\n --color: #{$linkSecondaryColor};\n --hover-color: #{$linkSecondaryHoverColor};\n }\n\n &[variant=\"back\"] {\n --text-decoration-line: none;\n --hover-color: var(--color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--hover-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey60};\n --hover-color: #{$colorGrey60};\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n @include link--size-inherit;\n}\n\n//@each $breakpoint, $size in $breakpoints {\n// @include mq($from: $breakpoint) {\n// :host(:where([size-#{$breakpoint}=\"default\"])) {\n// @include link--size-default;\n// }\n//\n// :host(:where([size-#{$breakpoint}=\"small\"])) {\n// @include link--size-small;\n// }\n//\n// :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n// @include link--size-inherit;\n// }\n// }\n//}\n\n.stzh-link {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\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 @media (hover: none) {\n color: inherit;\n }\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 --stzh-icon-size: var(--icon-size);\n\n display: none;\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 --stzh-base-color: initial;\n\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 &--has-icon &__icon-wrapper {\n display: inline-flex;\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 /* 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 Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent,\n StzhLinkSize,\n StzhBadgeType,\n StzhLinkClickEvent\n} from \"../../index\";\n\nimport { StzhLinkLocalizedText } from \"./stzh-link.localization\";\nimport { hasSlot, addWordBreakToLinks } from \"../../utils/utils\";\n\n/\n @slot icon - Slot for icon element\n * @slot - Slot for label/text content\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: StzhLinkLocalizedText;\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 /* Height variant (none prevent setting min-height for mikro and small breakpoint) /\n @Prop({ reflect: true }) height: \"default\" \| \"auto\" = \"default\";\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\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\" \| \"back\" = \"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: StzhBadgeType = \"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 /* ID of link element /\n @Prop() linkId: 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 /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: 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 /* Click event /\n @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\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 async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\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 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 onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-link\",\n originalEvent: event,\n href: this.href\n });\n }\n\n private addWordBreakToLinks() {\n const links = Array.from(\n this.element?.getElementsByClassName(\"stzh-link\") \|\| []\n );\n addWordBreakToLinks(links as HTMLElement[]);\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 componentDidLoad() {\n this.addWordBreakToLinks();\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--${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 id={this.linkId}\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 aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\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 id={this.linkId}\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 aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-7de53368.js → p-d99aa7e6.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { S as StzhInputDescription } from './p-6393ca35.js';
 import { d as defineCustomElement$7 } from './p-486f6cb3.js';
-import { d as defineCustomElement$6 } from './p-d0b793f2.js';
-import { d as defineCustomElement$5 } from './p-4c350868.js';
+import { d as defineCustomElement$6 } from './p-3a5a5b65.js';
+import { d as defineCustomElement$5 } from './p-a46dcfa3.js';
 import { d as defineCustomElement$4 } from './p-0300f421.js';
-import { d as defineCustomElement$3 } from './p-d5254d48.js';
-import { d as defineCustomElement$2 } from './p-b3ca3adb.js';
-import { d as defineCustomElement$1 } from './p-71668a26.js';
+import { d as defineCustomElement$3 } from './p-d1badd5b.js';
+import { d as defineCustomElement$2 } from './p-a8384df3.js';
+import { d as defineCustomElement$1 } from './p-839b43f8.js';
 const stzhChipselectCss = ".sc-stzh-chipselect-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipselect-h,[stzh-hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__label.sc-stzh-chipselect{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-heading-color);display:block;margin-bottom:var(--stzh-space-xsmall)}.stzh-chipselect__label.sc-stzh-chipselect:empty{display:none}.stzh-chipselect__marker.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;border-radius:var(--stzh-button-border-radius);gap:var(--stzh-space-medium)}.stzh-chipselect__chips.sc-stzh-chipselect:focus-within .is-focused[active].sc-stzh-chipselect{--background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chips.sc-stzh-chipselect:focus-within .is-focused[active].sc-stzh-chipselect{--background-color:Canvas}}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect{--background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect{--background-color:Highlight}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}.stzh-chipselect--has-label-hidden.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__chips.sc-stzh-chipselect,.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{cursor:not-allowed}";
 const StzhChipselectStyle0 = stzhChipselectCss;
@@ -318,4 +318,4 @@ function defineCustomElement() {
 export { StzhChipselect as S, defineCustomElement as d };
-//# sourceMappingURL=p-7de53368.js.map
+//# sourceMappingURL=p-d99aa7e6.js.map

package/dist/components/{p-7de53368.js.map → p-d99aa7e6.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-7de53368.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-chipselect {\n @include input-description;\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n color: $headingColor;\n display: block;\n margin-bottom: space('xsmall');\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-radius: $buttonBorderRadius;\n gap: space('medium');\n\n &:focus-within {\n .is-focused[active] {\n --background-color: #{$colorPrimary90};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n }\n\n &__chip {\n &.is-focused {\n --background-color: #{$colorSecondary40};\n\n @include highContrast() {\n --background-color: Highlight;\n }\n }\n }\n\n // &__dropdown {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n // &__description-wrapper {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space('xsmall');\n }\n\n /* Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Disabled /\n\n &--is-disabled &__chips,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n if (Array.isArray(parsedValue)) {\n this._value = parsedValue;\n }\n else {\n this._value = newValue ? [newValue] : [];\n }\n } catch (ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n this._data.map((dataEntry) => {\n if (typeof dataEntry.value !== \"string\"){\n throw new TypeError(`${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`);\n }\n });\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = data.value;\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value : this._value[0]\n });\n }\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n if (this.multiple) {\n if (this._data[activeOptionIndex].value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (this._data[activeOptionIndex].value !== \"\") {\n this.value = this._value.includes(this._data[activeOptionIndex].value)\n ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n : [...this._value, this._data[activeOptionIndex].value];\n }\n } else {\n this.value = this._data[activeOptionIndex].value; //HERE\n }\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple\n ?\n <Fragment>\n {this._value.map((value) =>\n <input type=\"hidden\" name={this.name} value={value} />\n )}\n </Fragment>\n :\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n />\n }\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\" : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-d99aa7e6.js","mappings":"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","names":[],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-chipselect {\n @include input-description;\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n color: $headingColor;\n display: block;\n margin-bottom: space('xsmall');\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n &__chips {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n border-radius: $buttonBorderRadius;\n gap: space('medium');\n\n &:focus-within {\n .is-focused[active] {\n --background-color: #{$colorPrimary90};\n\n @include highContrast() {\n --background-color: Canvas;\n }\n }\n }\n }\n\n &__chip {\n &.is-focused {\n --background-color: #{$colorSecondary40};\n\n @include highContrast() {\n --background-color: Highlight;\n }\n }\n }\n\n // &__dropdown {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n // &__description-wrapper {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n &--has-error &__error,\n &--has-description &__description {\n margin-top: space('xsmall');\n }\n\n /* Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Disabled /\n\n &--is-disabled &__chips,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State,\n Fragment,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhChipselectItem,\n StzhChipselectChangeEvent,\n // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/\n @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n /\n@Component({\n tag: \"stzh-chipselect\",\n styleUrl: \"stzh-chipselect.scss\",\n scoped: true\n})\nexport class StzhChipselect {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* The list of chips /\n @Prop() data: string \| StzhChipselectItem[] = [];\n private _data: StzhChipselectItem[] = [];\n // private _dataDropdown: any[] = [];\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label is hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Multiple /\n @Prop({ mutable: true }) multiple: boolean = false;\n\n /* Value /\n @Prop({ mutable: true }) value: string \| string[] = \"\";\n private _value: string[] = [];\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string \| string[] = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /\n Do not use this property. It will be deprecated with the next major release.\n * Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /* Whether all chips are disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @State() activeFocusOptionIndex: number = 0;\n\n @Element() element: HTMLStzhChipselectElement;\n\n /* Change event /\n @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n if (Array.isArray(parsedValue)) {\n this._value = parsedValue;\n }\n else {\n this._value = newValue ? [newValue] : [];\n }\n } catch (ex) {\n this._value = newValue ? [newValue] : [];\n }\n } else {\n this._value = newValue ? newValue : [];\n }\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: StzhChipselectItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n } else {\n this._data = newValue;\n }\n\n this._data.map((dataEntry) => {\n if (typeof dataEntry.value !== \"string\"){\n throw new TypeError(`${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`);\n }\n });\n // this._dataDropdown = this._data.map((data) => {\n // return {\n // text: data.counter\n // ? `${data.label} (${data.counter})`\n // : data.label,\n // value: data.value\n // }\n // });\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n private id: string;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // });\n }\n\n private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n if (this.multiple) {\n if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (data.value !== \"\") {\n this.value = this._value.includes(data.value)\n ? this._value.filter(value => value !== data.value)\n : [...this._value, data.value];\n }\n } else {\n this.value = data.value;\n }\n\n this.activeFocusOptionIndex = index;\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.multiple ? this._value : this._value[0]\n });\n }\n\n // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n // this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n // this.activeFocusOptionIndex = this._data.findIndex(data => {\n // return data.value === this.value;\n // });\n\n // await this.waitForNextRender();\n\n // this.stzhChange.emit({\n // component: \"stzh-chipselect\",\n // value: this.value\n // })\n // }\n\n private handleKeydown = (event: KeyboardEvent) => {\n let newActiveIndex: number = null;\n const activeOptionIndex = this.activeFocusOptionIndex;\n\n if (event.key === \"ArrowUp\" \|\| event.key === \"ArrowLeft\") {\n event.preventDefault();\n\n if (activeOptionIndex > 0) {\n newActiveIndex = activeOptionIndex - 1;\n }\n } else if (event.key === \"ArrowDown\" \|\| event.key === \"ArrowRight\") {\n event.preventDefault();\n\n if (activeOptionIndex < this._data.length - 1) {\n newActiveIndex = activeOptionIndex + 1;\n }\n } else if (event.key === \" \" \|\| event.key === \"Enter\") {\n event.preventDefault();\n if (this.multiple) {\n if (this._data[activeOptionIndex].value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n this.value = [];\n } else if (this._data[activeOptionIndex].value !== \"\") {\n this.value = this._value.includes(this._data[activeOptionIndex].value)\n ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n : [...this._value, this._data[activeOptionIndex].value];\n }\n } else {\n this.value = this._data[activeOptionIndex].value; //HERE\n }\n this.stzhChange.emit({\n component: \"stzh-chipselect\",\n value: this.value\n });\n }\n\n if (newActiveIndex !== null) {\n this.activeFocusOptionIndex = newActiveIndex;\n }\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n this.dataWatcher(this.data);\n this.errorWatcher(this.error);\n this.valueWatcher(this.value);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n }\n }\n\n render() {\n const descriptionUsed = !!this.description;\n const descriptionLongUsed = !!this.descriptionLong;\n const errorUsed = !!this.error;\n\n const classes = {\n \"stzh-chipselect\": true,\n \"stzh-chipselect--has-description\": descriptionUsed,\n \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n \"stzh-chipselect--has-error\": errorUsed,\n \"stzh-chipselect--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-chipselect--is-disabled\": this.disabled,\n \"stzh-chipselect--is-required\": this.required,\n \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n };\n\n return (\n <Host is-invalid={this.invalid \|\| errorUsed}>\n <div class={classes}>\n {this.multiple\n ?\n <Fragment>\n {this._value.map((value) =>\n <input type=\"hidden\" name={this.name} value={value} />\n )}\n </Fragment>\n :\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n />\n }\n\n <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-chipselect__marker\">\n <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-chipselect__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n\n {this._data.length > 0 &&\n <Fragment>\n <div\n id={this.id}\n class=\"stzh-chipselect__chips\"\n role=\"listbox\"\n tabindex=\"0\"\n aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n onKeyDown={this.handleKeydown}\n >\n {this._data.map((data, index) => (\n <stzh-chip\n role=\"option\"\n class={{\n \"stzh-chipselect__chip\": true,\n \"is-focused\": this.activeFocusOptionIndex === index\n }}\n label={data.label}\n counter={data.counter}\n icon={data.icon}\n type={data.type}\n inverted={data.inverted}\n variant={data.variant}\n size={data.size \|\| \"small\"}\n disabled={this.disabled \|\| data.disabled}\n active={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n }\n aria-selected={\n this._value.includes(data.value)\n \|\| (!this.multiple && !data.value && (this._value.length === 0 \|\| this._value[0] === \"\"))\n \|\| (!data.value && this.multiple && (this._value.length === 0 \|\| (this._value.length === 1 && this._value[0] === \"\")))\n ? \"true\" : \"false\"\n }\n id={`${this.id}-option-${index}`}\n a11yTabindex=\"-1\"\n onClick={() => this.handleChipClick(data, index)}\n ></stzh-chip>\n ))}\n </div>\n\n <StzhInputDescription\n classPrefix=\"stzh-chipselect\"\n id={`${this.id}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n\n {/ <stzh-dropdown\n class=\"stzh-chipselect__dropdown\"\n multiple={this.multiple}\n disabled={this.disabled}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n required={this.required}\n invalid={this.invalid}\n items={[this.value]}\n label={this.label}\n labelHidden={this.labelHidden}\n options={this._dataDropdown}\n hideOptional={this.hideOptional}\n onStzhChange={this.handleDropdownChange}\n ></stzh-dropdown> */}\n </Fragment>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-93c4bf04.js → p-e4568321.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { s as setPropsIfNull, h as hasSlot } from './p-d1f98854.js';
+import { s as setPropsIfNull, h as hasSlot } from './p-1c261255.js';
 import { w as waitForEvent } from './p-70ec7e79.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-2c0bec3e.js';
 import { d as defineCustomElement$3 } from './p-486f6cb3.js';
-import { d as defineCustomElement$2 } from './p-c522aec2.js';
+import { d as defineCustomElement$2 } from './p-8063d484.js';
 import { d as defineCustomElement$1 } from './p-0300f421.js';
 const stzhToastCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{pointer-events:all;--label-font-family:var(--stzh-toast-label-font-family);--label-font-weight:var(--stzh-toast-label-font-weight);--label-font-style:var(--stzh-toast-label-font-style);--label-color:var(--stzh-toast-label-color);--background-color:var(--stzh-toast-background-color);--close-color:var(--stzh-toast-close-color);--button-color:var(--stzh-toast-button-color);--icon-color:var(--stzh-toast-icon-color)}:host([type=success]){--icon-color:var(--stzh-toast-success-icon-color)}:host([type=warning]){--icon-color:var(--stzh-toast-warning-icon-color)}:host([type=error]){--icon-color:var(--stzh-toast-error-icon-color)}.stzh-toast{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius);transition:background-color var(--stzh-base-transition-animation-speed);}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-toast{border:0.0625rem solid Highlight}}.stzh-toast__content{flex-grow:1;display:flex;gap:var(--stzh-space-small);padding:var(--stzh-space-medium)}.stzh-toast__icon-wrapper{flex-shrink:0;display:flex}.stzh-toast__icon{color:var(--icon-color)}.stzh-toast__text-wrapper{flex-grow:1}.stzh-toast__label{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--label-color);font-family:var(--label-font-family);font-weight:var(--label-font-weight);font-style:var(--label-font-style);transition:color var(--stzh-base-transition-animation-speed);padding-right:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.stzh-toast__label{padding-right:var(--stzh-space-xxxlarge)}}.stzh-toast__close-wrapper{flex-shrink:0}.stzh-toast__link{--stzh-button-tertiary-color:var(--button-color);display:flex;justify-content:flex-end}.stzh-toast__close[variant=tertiary]{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-toast--has-link .stzh-toast__label:not(:empty)+.stzh-toast__link{margin-top:var(--stzh-space-xsmall)}";
@@ -230,4 +230,4 @@ function defineCustomElement() {
 export { StzhToast as S, defineCustomElement as d };
-//# sourceMappingURL=p-93c4bf04.js.map
+//# sourceMappingURL=p-e4568321.js.map

package/dist/components/{p-93c4bf04.js.map → p-e4568321.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-93c4bf04.js","mappings":"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","names":[],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/*\n @prop --background-color: Background color of toast\n /\n\n:host {\n pointer-events: all;\n\n --label-font-family: #{$toastLabelFontFamily};\n --label-font-weight: #{$toastLabelFontWeight};\n --label-font-style: #{$toastLabelFontStyle};\n\n --label-color: #{$toastLabelColor};\n --background-color: #{$toastBackgroundColor};\n --close-color: #{$toastCloseColor};\n --button-color: #{$toastButtonColor};\n --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n position: relative;\n display: flex;\n box-shadow: $boxShadowMessage;\n background-color: var(--background-color);\n border-radius: #{$buttonBorderRadius};\n transition: background-color $baseTransitionAnimationSpeed;\n\n @include highContrast() {\n border: 1px solid Highlight;\n }\n\n &__content {\n flex-grow: 1;\n display: flex;\n gap: space('small');\n padding: space('medium');\n }\n\n &__icon-wrapper {\n flex-shrink: 0;\n display: flex;\n }\n\n &__icon {\n color: var(--icon-color);\n }\n\n &__text-wrapper {\n flex-grow: 1;\n }\n\n &__label {\n @include fontSize('milli');\n color: var(--label-color);\n font-family: var(--label-font-family);\n font-weight: var(--label-font-weight);\n font-style: var(--label-font-style);\n transition: color $baseTransitionAnimationSpeed;\n padding-right: space('xxlarge');\n\n @include mq($from: small) {\n padding-right: space('xxxlarge');\n }\n }\n\n &__close-wrapper {\n flex-shrink: 0;\n }\n\n &__link {\n --stzh-button-tertiary-color: var(--button-color);\n \n display: flex;\n justify-content: flex-end;\n }\n\n &__close[variant=\"tertiary\"] {\n --color: var(--close-color);\n\n position: absolute;\n top: 0;\n right: 0;\n }\n\n / Has link /\n\n &--has-link &__label:not(:empty) + &__link {\n margin-top: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhToastOpenEvent,\n StzhToastOpenedEvent,\n StzhToastCloseEvent,\n StzhToastClosedEvent,\n StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\"\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n ],\n options: {\n duration: 300,\n easing: \"ease-out\"\n }\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: 'auto' },\n { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n ],\n options: {\n duration: 300,\n easing: \"ease-in\"\n }\n};\n\n/\n @slot link - Slot for optional stzh-link element\n /\n@Component({\n tag: \"stzh-toast\",\n styleUrl: \"stzh-toast.scss\",\n shadow: true\n})\nexport class StzhToast {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Type /\n @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n /* Whether to hide close button /\n @Prop({ reflect: true }) hideClose: boolean = false;\n\n /* Open state /\n @Prop({ reflect: true }) open: boolean = true;\n\n /* Whether open animation should be played initially. /\n @Prop() initialOpenAnimation = false;\n\n /* Translation strings. /\n @Prop() localization: StzhToastLocalizedText;\n\n /* Toast open event /\n @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n /* Toast opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n /* Toast close event /\n @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n /* Toast closed event (after animation) */\n @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n @Element() element: HTMLStzhToastElement;\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.rootElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-toast\",\n });\n }\n\n await stopAnimations(this.element);\n\n // this.element.style.willChange = \"transform, opacity, height\";\n this.element.hidden = false;\n\n const computedStyle = getComputedStyle(this.element, null);\n\n await animateTo(\n this.element,\n shimKeyframesAutoValues(ANIMATION_SHOW.keyframes,{\n height: this.element.scrollHeight,\n marginTop: parseInt(computedStyle['margin-top']),\n marginBottom: parseInt(computedStyle['margin-bottom']),\n }),\n ANIMATION_SHOW.options\n );\n\n this.element.style.height = \"auto\";\n this.element.style.opacity = \"1\";\n // this.element.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-toast\"\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-toast\",\n });\n }\n\n await stopAnimations(this.element);\n\n // this.element.style.willChange = \"transform, opacity, height\";\n\n const computedStyle = getComputedStyle(this.element, null);\n\n await animateTo(\n this.element,\n shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n height: this.element.scrollHeight,\n marginTop: parseInt(computedStyle['margin-top']),\n marginBottom: parseInt(computedStyle['margin-bottom']),\n }),\n ANIMATION_HIDE.options\n );\n\n this.element.style.height = \"0px\";\n this.element.style.opacity = \"0\";\n this.element.hidden = true;\n // this.element.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-toast\"\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n // private observer: MutationObserver;\n private toggledByMethod: boolean;\n private rootElement: HTMLElement;\n\n private handleLinkSlotchange = () => {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n const buttons = host.querySelectorAll(\n 'stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button'\n );\n\n buttons.forEach((link) => {\n setPropsIfNull(link, {\n size: \"small\",\n variant: \"tertiary\"\n } as HTMLStzhButtonElement)\n });\n }\n\n private onCloseButtonClick = () => {\n this.hide();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n }\n }\n\n componentDidLoad() {\n if (this.initialOpenAnimation && this.open) {\n // hide first so the open animation will be shown\n this.element.hidden = true;\n this.element.style.height = \"0px\";\n this.element.style.opacity = \"0\";\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.openWatcher(true);\n });\n });\n } else {\n this.element.hidden = !this.open;\n this.element.style.height = this.open ? \"auto\" : \"0px\";\n this.element.style.opacity = this.open ? \"1\" : \"0\";\n }\n }\n\n // connectedCallback() {\n // this.init();\n\n // this.observer = new MutationObserver(this.init);\n // this.observer.observe(this.element, {\n // childList: true,\n // subtree: true\n // });\n // }\n\n // disconnectedCallback() {\n // if (this.observer) {\n // this.observer.disconnect();\n // }\n // }\n\n render() {\n const linkUsed = hasSlot(this.element, \"link\");\n\n const classes = {\n \"stzh-toast\": true,\n \"stzh-toast--has-link\": linkUsed,\n \"stzh-toast--has-close-hidden\": this.hideClose,\n [`stzh-toast--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host>\n <div\n ref={(el) => (this.rootElement = el as HTMLElement)}\n class={classes}\n >\n <div class=\"stzh-toast__content\">\n <div class=\"stzh-toast__icon-wrapper\">\n <stzh-icon\n class=\"stzh-toast__icon\"\n name={\n this.type === 'info' && \"info-help-filled\"\n \|\| this.type === 'success' && \"checkmark-circle-filled\"\n \|\| this.type === 'warning' && \"important-warning-filled\"\n \|\| this.type === 'error' && \"warning-filled\"\n }\n ></stzh-icon>\n </div>\n <div class=\"stzh-toast__text-wrapper\">\n <div class=\"stzh-toast__label\">\n {this.label}\n </div>\n <div class=\"stzh-toast__link\">\n <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n </div>\n </div>\n </div>\n\n {!this.hideClose &&\n <div class=\"stzh-toast__close-wrapper\">\n <stzh-button\n class=\"stzh-toast__close\"\n onClick={this.onCloseButtonClick}\n label={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close-big\"\n ></stzh-button>\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-e4568321.js","mappings":"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","names":[],"sources":["src/components/stzh-toast/stzh-toast.scss?tag=stzh-toast&encapsulation=shadow","src/components/stzh-toast/stzh-toast.tsx"],"sourcesContent":["/*\n @prop --background-color: Background color of toast\n /\n\n:host {\n pointer-events: all;\n\n --label-font-family: #{$toastLabelFontFamily};\n --label-font-weight: #{$toastLabelFontWeight};\n --label-font-style: #{$toastLabelFontStyle};\n\n --label-color: #{$toastLabelColor};\n --background-color: #{$toastBackgroundColor};\n --close-color: #{$toastCloseColor};\n --button-color: #{$toastButtonColor};\n --icon-color: #{$toastIconColor};\n}\n\n:host([type=\"success\"]) {\n --icon-color: #{$toastSuccessIconColor};\n}\n\n:host([type=\"warning\"]) {\n --icon-color: #{$toastWarningIconColor};\n}\n\n:host([type=\"error\"]) {\n --icon-color: #{$toastErrorIconColor};\n}\n\n.stzh-toast {\n position: relative;\n display: flex;\n box-shadow: $boxShadowMessage;\n background-color: var(--background-color);\n border-radius: #{$buttonBorderRadius};\n transition: background-color $baseTransitionAnimationSpeed;\n\n @include highContrast() {\n border: 1px solid Highlight;\n }\n\n &__content {\n flex-grow: 1;\n display: flex;\n gap: space('small');\n padding: space('medium');\n }\n\n &__icon-wrapper {\n flex-shrink: 0;\n display: flex;\n }\n\n &__icon {\n color: var(--icon-color);\n }\n\n &__text-wrapper {\n flex-grow: 1;\n }\n\n &__label {\n @include fontSize('milli');\n color: var(--label-color);\n font-family: var(--label-font-family);\n font-weight: var(--label-font-weight);\n font-style: var(--label-font-style);\n transition: color $baseTransitionAnimationSpeed;\n padding-right: space('xxlarge');\n\n @include mq($from: small) {\n padding-right: space('xxxlarge');\n }\n }\n\n &__close-wrapper {\n flex-shrink: 0;\n }\n\n &__link {\n --stzh-button-tertiary-color: var(--button-color);\n \n display: flex;\n justify-content: flex-end;\n }\n\n &__close[variant=\"tertiary\"] {\n --color: var(--close-color);\n\n position: absolute;\n top: 0;\n right: 0;\n }\n\n / Has link /\n\n &--has-link &__label:not(:empty) + &__link {\n margin-top: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhToastOpenEvent,\n StzhToastOpenedEvent,\n StzhToastCloseEvent,\n StzhToastClosedEvent,\n StzhToastType,\n} from \"../../index\";\n\nimport { StzhToastLocalizedText } from \"./stzh-toast.localization\"\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { transform: \"translateY(100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n ],\n options: {\n duration: 300,\n easing: \"ease-out\"\n }\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { transform: \"translateX(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n { transform: \"translateX(-100%)\", opacity: \"0\", height: \"auto\", marginBottom: 'auto' },\n { transform: \"translateX(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n // { transform: \"translateY(0px)\", opacity: \"1\", height: \"auto\", marginBottom: 'auto' },\n // { transform: \"translateY(-100%)\", opacity: \"0\", height: \"0\", marginBottom: '0' },\n ],\n options: {\n duration: 300,\n easing: \"ease-in\"\n }\n};\n\n/\n @slot link - Slot for optional stzh-link element\n /\n@Component({\n tag: \"stzh-toast\",\n styleUrl: \"stzh-toast.scss\",\n shadow: true\n})\nexport class StzhToast {\n /* Label /\n @Prop() label: string = \"\";\n\n /* Type /\n @Prop({ reflect: true }) type: StzhToastType = \"info\";\n\n /* Whether to hide close button /\n @Prop({ reflect: true }) hideClose: boolean = false;\n\n /* Open state /\n @Prop({ reflect: true }) open: boolean = true;\n\n /* Whether open animation should be played initially. /\n @Prop() initialOpenAnimation = false;\n\n /* Translation strings. /\n @Prop() localization: StzhToastLocalizedText;\n\n /* Toast open event /\n @Event() stzhOpen: EventEmitter<StzhToastOpenEvent>;\n\n /* Toast opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhToastOpenedEvent>;\n\n /* Toast close event /\n @Event() stzhClose: EventEmitter<StzhToastCloseEvent>;\n\n /* Toast closed event (after animation) */\n @Event() stzhClosed: EventEmitter<StzhToastClosedEvent>;\n\n @Element() element: HTMLStzhToastElement;\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.rootElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-toast\",\n });\n }\n\n await stopAnimations(this.element);\n\n // this.element.style.willChange = \"transform, opacity, height\";\n this.element.hidden = false;\n\n const computedStyle = getComputedStyle(this.element, null);\n\n await animateTo(\n this.element,\n shimKeyframesAutoValues(ANIMATION_SHOW.keyframes,{\n height: this.element.scrollHeight,\n marginTop: parseInt(computedStyle['margin-top']),\n marginBottom: parseInt(computedStyle['margin-bottom']),\n }),\n ANIMATION_SHOW.options\n );\n\n this.element.style.height = \"auto\";\n this.element.style.opacity = \"1\";\n // this.element.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-toast\"\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-toast\",\n });\n }\n\n await stopAnimations(this.element);\n\n // this.element.style.willChange = \"transform, opacity, height\";\n\n const computedStyle = getComputedStyle(this.element, null);\n\n await animateTo(\n this.element,\n shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n height: this.element.scrollHeight,\n marginTop: parseInt(computedStyle['margin-top']),\n marginBottom: parseInt(computedStyle['margin-bottom']),\n }),\n ANIMATION_HIDE.options\n );\n\n this.element.style.height = \"0px\";\n this.element.style.opacity = \"0\";\n this.element.hidden = true;\n // this.element.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-toast\"\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n // private observer: MutationObserver;\n private toggledByMethod: boolean;\n private rootElement: HTMLElement;\n\n private handleLinkSlotchange = () => {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n const buttons = host.querySelectorAll(\n 'stzh-button[slot=\"link\"], [slot=\"link\"] stzh-button'\n );\n\n buttons.forEach((link) => {\n setPropsIfNull(link, {\n size: \"small\",\n variant: \"tertiary\"\n } as HTMLStzhButtonElement)\n });\n }\n\n private onCloseButtonClick = () => {\n this.hide();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toast\");\n }\n }\n\n componentDidLoad() {\n if (this.initialOpenAnimation && this.open) {\n // hide first so the open animation will be shown\n this.element.hidden = true;\n this.element.style.height = \"0px\";\n this.element.style.opacity = \"0\";\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.openWatcher(true);\n });\n });\n } else {\n this.element.hidden = !this.open;\n this.element.style.height = this.open ? \"auto\" : \"0px\";\n this.element.style.opacity = this.open ? \"1\" : \"0\";\n }\n }\n\n // connectedCallback() {\n // this.init();\n\n // this.observer = new MutationObserver(this.init);\n // this.observer.observe(this.element, {\n // childList: true,\n // subtree: true\n // });\n // }\n\n // disconnectedCallback() {\n // if (this.observer) {\n // this.observer.disconnect();\n // }\n // }\n\n render() {\n const linkUsed = hasSlot(this.element, \"link\");\n\n const classes = {\n \"stzh-toast\": true,\n \"stzh-toast--has-link\": linkUsed,\n \"stzh-toast--has-close-hidden\": this.hideClose,\n [`stzh-toast--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host>\n <div\n ref={(el) => (this.rootElement = el as HTMLElement)}\n class={classes}\n >\n <div class=\"stzh-toast__content\">\n <div class=\"stzh-toast__icon-wrapper\">\n <stzh-icon\n class=\"stzh-toast__icon\"\n name={\n this.type === 'info' && \"info-help-filled\"\n \|\| this.type === 'success' && \"checkmark-circle-filled\"\n \|\| this.type === 'warning' && \"important-warning-filled\"\n \|\| this.type === 'error' && \"warning-filled\"\n }\n ></stzh-icon>\n </div>\n <div class=\"stzh-toast__text-wrapper\">\n <div class=\"stzh-toast__label\">\n {this.label}\n </div>\n <div class=\"stzh-toast__link\">\n <slot name=\"link\" onSlotchange={this.handleLinkSlotchange}></slot>\n </div>\n </div>\n </div>\n\n {!this.hideClose &&\n <div class=\"stzh-toast__close-wrapper\">\n <stzh-button\n class=\"stzh-toast__close\"\n onClick={this.onCloseButtonClick}\n label={this.localization.close}\n variant=\"tertiary\"\n size=\"small\"\n iconOnly={true}\n icon=\"close-big\"\n ></stzh-button>\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-d2858a06.js → p-e973d4dc.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$1 } from './p-bcc02189.js';
+import { d as defineCustomElement$1 } from './p-b51c7e54.js';
 const stzhAccordionCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px;--margin-left:inherit;--margin-right:inherit}.stzh-accordion{display:grid;gap:var(--stzh-space-xsmall);margin-left:var(--margin-left);margin-right:var(--margin-left);}.stzh-accordion__heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-accordion__heading{margin-bottom:var(--stzh-space-xlarge)}}.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-medium) * -1);margin-right:calc(var(--stzh-space-medium) * -1)}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-left:calc(var(--stzh-space-xxlarge) * -1)}}@media screen and (min-width: 600px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-large) * -1)}}@media screen and (min-width: 900px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xlarge) * -1)}}@media screen and (min-width: 1260px){.stzh-accordion--is-nested{margin-right:calc(var(--stzh-space-xxlarge) * -1)}}";
 const StzhAccordionStyle0 = stzhAccordionCss;
@@ -126,4 +126,4 @@ function defineCustomElement() {
 export { StzhAccordion as S, defineCustomElement as d };
-//# sourceMappingURL=p-d2858a06.js.map
+//# sourceMappingURL=p-e973d4dc.js.map

package/dist/components/{p-d2858a06.js.map → p-e973d4dc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~d2858a06~~.js","mappings":"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","names":[],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n // disable section paddings and margins\n --stzh-section-padding-top: 0px;\n --stzh-section-padding-bottom: 0px;\n --stzh-section-margin-top: 0px;\n --stzh-section-margin-bottom: 0px;\n\n --margin-left: inherit;\n --margin-right: inherit;\n}\n\n.stzh-accordion {\n display: grid;\n gap: space('xsmall');\n margin-left: var(--margin-left);\n margin-right: var(--margin-left);\n\n &__heading {\n @include spaceCurve('margin-bottom', 'small');\n }\n\n /* is nested within another accordion /\n\n &--is-nested {\n @include spaceCurve('margin-left', 'regular', true);\n @include spaceCurve('margin-right', 'regular', true);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/\n @slot - Slot for `stzh-accordion-item` elements\n /\n@Component({\n tag: \"stzh-accordion\",\n styleUrl: \"stzh-accordion.scss\",\n shadow: true,\n})\nexport class StzhAccordion {\n /* Variant /\n @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n /* Heading /\n @Prop({ reflect: true }) heading: string = \"\";\n\n /* Whether folds are collapsible /\n @Prop() collapsible: boolean = true;\n\n /* Whether multiple folds can be opened at once /\n @Prop() multiselectable: boolean = true;\n\n @Element() element: HTMLStzhAccordionElement;\n\n /* Variant change event /\n @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n @State() isNested: boolean;\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhAccordionVariant) {\n this.stzhVariantChange.emit({\n component: \"stzh-accordion\",\n value: newValue,\n });\n }\n\n @Listen(\"stzhOpen\")\n openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n if (\n this.multiselectable \|\|\n (event.detail && event.detail.component !== \"stzh-accordion-item\") \|\|\n accordionOpened !== this.element\n ) {\n return;\n }\n\n const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n items.forEach(item => {\n if (item !== accordionItemOpened) {\n item.hide();\n }\n });\n }\n\n /* Set focus to accordion item */\n @Method()\n async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n const accordion = accordionItem.closest(\"stzh-accordion\");\n\n if (accordion !== this.element) {\n return;\n }\n\n const items = (\n Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n ).filter(item => !item.disabled);\n\n const currentIndex = items.indexOf(accordionItem);\n\n if ((action === \"prev\" \|\| action === \"next\") && currentIndex === null) {\n action = action === \"prev\" ? \"last\" : \"first\";\n }\n\n if (action === \"prev\" && currentIndex === 0) {\n action = \"last\";\n }\n\n if (action === \"next\" && currentIndex === items.length - 1) {\n action = \"first\";\n }\n\n if (action === \"prev\") {\n items[currentIndex - 1].focus();\n } else if (action === \"next\") {\n items[currentIndex + 1].focus();\n } else if (action === \"last\") {\n items[items.length - 1].focus();\n } else if (action === \"first\") {\n items[0].focus();\n } else {\n accordionItem.focus();\n }\n }\n\n private checkIfNested() {\n let parentElement = this.element.parentElement;\n\n while (parentElement) {\n if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n this.isNested = true;\n break;\n }\n parentElement = parentElement.parentElement;\n }\n }\n\n componentDidLoad() {\n this.checkIfNested();\n }\n\n render() {\n const classes = {\n \"stzh-accordion\": true,\n \"stzh-accordion--is-nested\": this.isNested,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.heading && (\n <div class=\"stzh-accordion__heading\">\n <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n </div>\n )}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-e973d4dc.js","mappings":"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","names":[],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx"],"sourcesContent":[":host {\n // disable section paddings and margins\n --stzh-section-padding-top: 0px;\n --stzh-section-padding-bottom: 0px;\n --stzh-section-margin-top: 0px;\n --stzh-section-margin-bottom: 0px;\n\n --margin-left: inherit;\n --margin-right: inherit;\n}\n\n.stzh-accordion {\n display: grid;\n gap: space('xsmall');\n margin-left: var(--margin-left);\n margin-right: var(--margin-left);\n\n &__heading {\n @include spaceCurve('margin-bottom', 'small');\n }\n\n /* is nested within another accordion /\n\n &--is-nested {\n @include spaceCurve('margin-left', 'regular', true);\n @include spaceCurve('margin-right', 'regular', true);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhAccordionItemOpenEvent, StzhAccordionVariant, StzhAccordionVariantChangeEvent } from \"../../index\";\n\n/\n @slot - Slot for `stzh-accordion-item` elements\n /\n@Component({\n tag: \"stzh-accordion\",\n styleUrl: \"stzh-accordion.scss\",\n shadow: true,\n})\nexport class StzhAccordion {\n /* Variant /\n @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n /* Heading /\n @Prop({ reflect: true }) heading: string = \"\";\n\n /* Whether folds are collapsible /\n @Prop() collapsible: boolean = true;\n\n /* Whether multiple folds can be opened at once /\n @Prop() multiselectable: boolean = true;\n\n @Element() element: HTMLStzhAccordionElement;\n\n /* Variant change event /\n @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n @State() isNested: boolean;\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhAccordionVariant) {\n this.stzhVariantChange.emit({\n component: \"stzh-accordion\",\n value: newValue,\n });\n }\n\n @Listen(\"stzhOpen\")\n openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n if (\n this.multiselectable \|\|\n (event.detail && event.detail.component !== \"stzh-accordion-item\") \|\|\n accordionOpened !== this.element\n ) {\n return;\n }\n\n const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n items.forEach(item => {\n if (item !== accordionItemOpened) {\n item.hide();\n }\n });\n }\n\n /* Set focus to accordion item */\n @Method()\n async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n const accordion = accordionItem.closest(\"stzh-accordion\");\n\n if (accordion !== this.element) {\n return;\n }\n\n const items = (\n Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as HTMLStzhAccordionItemElement[]\n ).filter(item => !item.disabled);\n\n const currentIndex = items.indexOf(accordionItem);\n\n if ((action === \"prev\" \|\| action === \"next\") && currentIndex === null) {\n action = action === \"prev\" ? \"last\" : \"first\";\n }\n\n if (action === \"prev\" && currentIndex === 0) {\n action = \"last\";\n }\n\n if (action === \"next\" && currentIndex === items.length - 1) {\n action = \"first\";\n }\n\n if (action === \"prev\") {\n items[currentIndex - 1].focus();\n } else if (action === \"next\") {\n items[currentIndex + 1].focus();\n } else if (action === \"last\") {\n items[items.length - 1].focus();\n } else if (action === \"first\") {\n items[0].focus();\n } else {\n accordionItem.focus();\n }\n }\n\n private checkIfNested() {\n let parentElement = this.element.parentElement;\n\n while (parentElement) {\n if (parentElement.tagName.toLowerCase() === \"stzh-accordion\") {\n this.isNested = true;\n break;\n }\n parentElement = parentElement.parentElement;\n }\n }\n\n componentDidLoad() {\n this.checkIfNested();\n }\n\n render() {\n const classes = {\n \"stzh-accordion\": true,\n \"stzh-accordion--is-nested\": this.isNested,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.heading && (\n <div class=\"stzh-accordion__heading\">\n <stzh-heading level=\"2\">{this.heading}</stzh-heading>\n </div>\n )}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-cd56033a.js → p-ea55bd3b.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
-import { h as hasSlot } from './p-d1f98854.js';
+import { h as hasSlot } from './p-1c261255.js';
 const stzhFigureCss = ".sc-stzh-figure-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-figure-h,[stzh-hidden].sc-stzh-figure-h{display:none}.sc-stzh-figure-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-figure-h *.sc-stzh-figure,.sc-stzh-figure-h *.sc-stzh-figure::before,.sc-stzh-figure-h *.sc-stzh-figure::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-figure-h .has-focus.sc-stzh-figure{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-figure-h .stzh-fylingfocus-focused.sc-stzh-figure{outline-style:none !important}.sc-stzh-figure-h .stzh-fylingfocus-focused.sc-stzh-figure::-moz-focus-inner{border:0 !important}.sc-stzh-figure-h{--caption-opacity:1}.sc-stzh-figure-h.sc-stzh-figure-s>*,.sc-stzh-figure-h .sc-stzh-figure-s>*{max-width:100%}.sc-stzh-figure-h[fullwidth]:not([fullwidth=false]).sc-stzh-figure-s>:not(map),.sc-stzh-figure-h[fullwidth]:not([fullwidth=false]) .sc-stzh-figure-s>:not(map){width:100%}.stzh-figure.sc-stzh-figure{display:flex;flex-direction:column;margin:0}.stzh-figure__element.sc-stzh-figure{display:flex}@media print{.stzh-figure__element.sc-stzh-figure{page-break-inside:avoid;break-inside:avoid}}.stzh-figure__caption-wrapper.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:flex;flex-direction:column;opacity:var(--caption-opacity);transition:opacity var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-figure__caption-wrapper.sc-stzh-figure{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-figure__heading-wrapper.sc-stzh-figure{display:flow-root}.stzh-figure__counter.sc-stzh-figure{float:left;color:var(--stzh-color-secondary60)}.stzh-figure__counter.sc-stzh-figure:not(:empty){margin-right:var(--stzh-space-xsmall)}.stzh-figure__counter.sc-stzh-figure,.stzh-figure__heading.sc-stzh-figure{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);display:block}.stzh-figure__copyright.sc-stzh-figure{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-figure__copyright.sc-stzh-figure:not(:empty){margin-top:var(--stzh-space-xxsmall)}.stzh-figure--has-caption.sc-stzh-figure .stzh-figure__caption-wrapper.sc-stzh-figure{margin-top:var(--stzh-space-small)}";
 const StzhFigureStyle0 = stzhFigureCss;
@@ -53,4 +53,4 @@ function defineCustomElement() {
 export { StzhFigure as S, defineCustomElement as d };
-//# sourceMappingURL=p-cd56033a.js.map
+//# sourceMappingURL=p-ea55bd3b.js.map

package/dist/components/{p-cd56033a.js.map → p-ea55bd3b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~cd56033a~~.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,ouGAAouG,CAAC;AAC3vG,yBAAe,aAAa;;MCqBf,UAAU;;;;uBAEK,EAAE;yBAGA,EAAE;uBAGJ,EAAE;uBAGF,EAAE;yBAGkB,IAAI;;IAIlD,MAAM;QACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QACzD,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC7D,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QACzD,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAEzD,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,0BAA0B,EACxB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;mBAC9B,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB;mBACrC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;mBACjC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;SACvC,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,+DAAQ,KAAK,EAAE,OAAO,IACpB,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,8DAAa,CACT,EACN,mEAAY,KAAK,EAAC,8BAA8B,IAC9C,4DAAK,KAAK,EAAC,8BAA8B,IACvC,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACF,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,4DAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC7D,CACF,CACK,CACN,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-figure/stzh-figure.scss?tag=stzh-figure&encapsulation=scoped","src/components/stzh-figure/stzh-figure.tsx"],"sourcesContent":[":host {\n --caption-opacity: 1;\n\n ::slotted() {\n max-width: 100%;\n }\n}\n\n:host([fullwidth]:not([fullwidth=\"false\"])) ::slotted(:not(map)) {\n width: 100%;\n}\n\n.stzh-figure {\n display: flex;\n flex-direction: column;\n margin: 0;\n\n &__element {\n display: flex;\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n }\n\n &__caption-wrapper {\n @include fontCurve('caption');\n display: flex;\n flex-direction: column;\n opacity: var(--caption-opacity);\n transition: opacity $baseTransitionAnimationSpeed;\n }\n\n &__heading-wrapper {\n display: flow-root;\n }\n\n &__counter {\n float: left;\n color: $colorSecondary60;\n\n &:not(:empty) {\n margin-right: space('xsmall');\n }\n }\n\n &__counter,\n &__heading {\n @include font('heavy');\n display: block;\n }\n\n &__copyright {\n @include font;\n @include fontSize('femto');\n color: $colorGrey80;\n\n &:not(:empty) {\n margin-top: space('xxsmall');\n }\n }\n\n / Has caption content /\n\n &--has-caption &__caption-wrapper {\n margin-top: space('small');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n /\n@Component({\n tag: \"stzh-figure\",\n styleUrl: \"stzh-figure.scss\",\n scoped: true\n})\nexport class StzhFigure {\n /* Caption /\n @Prop() caption: string = \"\";\n\n /* Copyright /\n @Prop() copyright: string = \"\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Whether to stretch slotted content to fullwidth */\n @Prop({ reflect: true }) fullwidth: boolean = true;\n\n @Element() element: HTMLStzhFigureElement;\n\n render() {\n const captionSlotUsed = hasSlot(this.element, 'caption');\n const copyrightSlotUsed = hasSlot(this.element, 'copyright');\n const counterSlotUsed = hasSlot(this.element, 'counter');\n const headingSlotUsed = hasSlot(this.element, 'heading');\n\n const classes = {\n \"stzh-figure\": true,\n \"stzh-figure--has-caption\":\n !!this.caption \|\| captionSlotUsed\n \|\| !!this.copyright \|\| copyrightSlotUsed\n \|\| !!this.counter \|\| counterSlotUsed\n \|\| !!this.heading \|\| headingSlotUsed\n };\n\n return (\n <Host>\n <figure class={classes}>\n <div class=\"stzh-figure__element\">\n <slot></slot>\n </div>\n <figcaption class=\"stzh-figure__caption-wrapper\">\n <div class=\"stzh-figure__heading-wrapper\">\n <div class=\"stzh-figure__counter\">\n {this.counter ? this.counter : <slot name=\"counter\"></slot>}\n </div>\n <div class=\"stzh-figure__heading\">\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </div>\n <div class=\"stzh-figure__caption\">\n <div class=\"stzh-figure__caption-text\">\n {this.caption ? this.caption : <slot name=\"caption\"></slot>}\n </div>\n <div class=\"stzh-figure__copyright\">\n {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n </div>\n </div>\n </figcaption>\n </figure>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-ea55bd3b.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,ouGAAouG,CAAC;AAC3vG,yBAAe,aAAa;;MCqBf,UAAU;;;;uBAEK,EAAE;yBAGA,EAAE;uBAGJ,EAAE;uBAGF,EAAE;yBAGkB,IAAI;;IAIlD,MAAM;QACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QACzD,MAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC7D,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QACzD,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAEzD,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;YACnB,0BAA0B,EACxB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;mBAC9B,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,iBAAiB;mBACrC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;mBACjC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe;SACvC,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,+DAAQ,KAAK,EAAE,OAAO,IACpB,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,8DAAa,CACT,EACN,mEAAY,KAAK,EAAC,8BAA8B,IAC9C,4DAAK,KAAK,EAAC,8BAA8B,IACvC,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACF,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,4DAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC7D,CACF,CACK,CACN,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-figure/stzh-figure.scss?tag=stzh-figure&encapsulation=scoped","src/components/stzh-figure/stzh-figure.tsx"],"sourcesContent":[":host {\n --caption-opacity: 1;\n\n ::slotted() {\n max-width: 100%;\n }\n}\n\n:host([fullwidth]:not([fullwidth=\"false\"])) ::slotted(:not(map)) {\n width: 100%;\n}\n\n.stzh-figure {\n display: flex;\n flex-direction: column;\n margin: 0;\n\n &__element {\n display: flex;\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n }\n\n &__caption-wrapper {\n @include fontCurve('caption');\n display: flex;\n flex-direction: column;\n opacity: var(--caption-opacity);\n transition: opacity $baseTransitionAnimationSpeed;\n }\n\n &__heading-wrapper {\n display: flow-root;\n }\n\n &__counter {\n float: left;\n color: $colorSecondary60;\n\n &:not(:empty) {\n margin-right: space('xsmall');\n }\n }\n\n &__counter,\n &__heading {\n @include font('heavy');\n display: block;\n }\n\n &__copyright {\n @include font;\n @include fontSize('femto');\n color: $colorGrey80;\n\n &:not(:empty) {\n margin-top: space('xxsmall');\n }\n }\n\n / Has caption content /\n\n &--has-caption &__caption-wrapper {\n margin-top: space('small');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot - Slot for e.g. image or video\n * @slot caption - Slot for a caption as alternative for attribute\n * @slot copyright - Slot for a copyright as alternative for attribute\n * @slot counter - Slot for a counter as alternative for attribute\n * @slot heading - Slot for a heading as alternative for attribute\n /\n@Component({\n tag: \"stzh-figure\",\n styleUrl: \"stzh-figure.scss\",\n scoped: true\n})\nexport class StzhFigure {\n /* Caption /\n @Prop() caption: string = \"\";\n\n /* Copyright /\n @Prop() copyright: string = \"\";\n\n /* Counter /\n @Prop() counter: string = \"\";\n\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Whether to stretch slotted content to fullwidth */\n @Prop({ reflect: true }) fullwidth: boolean = true;\n\n @Element() element: HTMLStzhFigureElement;\n\n render() {\n const captionSlotUsed = hasSlot(this.element, 'caption');\n const copyrightSlotUsed = hasSlot(this.element, 'copyright');\n const counterSlotUsed = hasSlot(this.element, 'counter');\n const headingSlotUsed = hasSlot(this.element, 'heading');\n\n const classes = {\n \"stzh-figure\": true,\n \"stzh-figure--has-caption\":\n !!this.caption \|\| captionSlotUsed\n \|\| !!this.copyright \|\| copyrightSlotUsed\n \|\| !!this.counter \|\| counterSlotUsed\n \|\| !!this.heading \|\| headingSlotUsed\n };\n\n return (\n <Host>\n <figure class={classes}>\n <div class=\"stzh-figure__element\">\n <slot></slot>\n </div>\n <figcaption class=\"stzh-figure__caption-wrapper\">\n <div class=\"stzh-figure__heading-wrapper\">\n <div class=\"stzh-figure__counter\">\n {this.counter ? this.counter : <slot name=\"counter\"></slot>}\n </div>\n <div class=\"stzh-figure__heading\">\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </div>\n <div class=\"stzh-figure__caption\">\n <div class=\"stzh-figure__caption-text\">\n {this.caption ? this.caption : <slot name=\"caption\"></slot>}\n </div>\n <div class=\"stzh-figure__copyright\">\n {this.copyright ? this.copyright : <slot name=\"copyright\"></slot>}\n </div>\n </div>\n </figcaption>\n </figure>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-e9c5a9aa.js → p-ee40eddf.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { b as isVisible, o as offset } from './p-d1f98854.js';
+import { b as isVisible, o as offset } from './p-1c261255.js';
 import { d as debounce_1, i as isObject_1 } from './p-6997324b.js';
 var debounce = debounce_1,
@@ -417,4 +417,4 @@ function defineCustomElement() {
 export { StzhSticky as S, defineCustomElement as d, throttle_1 as t };
-//# sourceMappingURL=p-e9c5a9aa.js.map
+//# sourceMappingURL=p-ee40eddf.js.map