npm - @oiz/stzh-components - Versions diffs - 3.2.0-beta1 → 3.2.0 - Mend

@oiz/stzh-components 3.2.0-beta1 → 3.2.0

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

package/dist/esm/stzh-link.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-link.entry.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\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: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: var(--icon-wrapper-height);\n }\n\n &__text {\n --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 / 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 { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot - Slot for text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* 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 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 renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge \|\| this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--${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":"stzh-link.entry.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\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: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: var(--icon-wrapper-height);\n }\n\n &__text {\n --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 / 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 { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-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: StzhLocaleComponent;\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* 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 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 renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge \|\| this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--${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/esm/stzh-pagebottom.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-pagebottom.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,8uHAA8uH;;~~MCoB3vH~~,cAAc;;;;sBAKI,EAAE;;;;;;oBAqBJ,8BAA8B;;;;EAoBzD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;GACF;EAED,MAAM;;;IAIJ,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;MACvB,SAAS,EAAE,IAAI;KAChB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,0BAA0B,IACnC,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,SAAS;MACb,WAAK,KAAK,EAAC,wBAAwB,IACjC,sBACE,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACnC,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,EACpB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GACrB,CACJ,CACT,EAGP,CAAC,IAAI,CAAC,aAAa;MAClB,WAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,UAAU;QACd,WAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,UAAU,CAAO,EAEnE,kBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,aAAa,GAChB,CACV,CAEJ,EAEN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CAaF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pagebottom/stzh-pagebottom.scss?tag=stzh-pagebottom&encapsulation=scoped","src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"sourcesContent":[":host {\n @media print {\n display: none;\n }\n\n // ::slotted([slot=\"logo\"]) {\n // height: 38px;\n // }\n}\n\n.stzh-pagebottom {\n &__wrapper {\n display: grid;\n }\n\n &__left {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n row-gap: space('xsmall');\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n &__share-title {\n @include fontCurve('caption');\n\t\tmargin-bottom: space('small');\n }\n\n &__sticky-actions {\n margin-left: auto;\n margin-top: space('medium');\n\n --stzh-button-white-space: nowrap;\n\n @include mq($from: small) {\n margin-top: 0;\n }\n }\n\n &__print,\n &__share-wrapper {\n flex-shrink: 0;\n }\n\n &__share-wrapper {\n margin-left: -10px;\n\n @include mq($from: medium) {\n margin-left: 0;\n }\n }\n\n &__print {\n @include mq($from: small) {\n margin-right: space('xxlarge');\n }\n\n @include mq($from: medium) {\n @include spaceCurve('margin-right', 'big');\n }\n }\n\n // &__logo {\n // @include mq($from: small) {\n // margin-left: auto;\n // }\n // }\n\n // &__logo-link {\n // &:not(:empty) {\n // display: block;\n // margin-top: space('xlarge');\n\n // @include mq($from: small) {\n // margin-top: 0;\n // margin-left: space('xlarge');\n // }\n // }\n // }\n\n &:has(#{&}__sticky-actions:not(:empty)) &__wrapper {\n grid-template-columns: auto;\n\n @include mq($from: small) {\n grid-template-columns: minmax(0, 1fr) calc(110px + 44px + #{space('small')} + #{space('medium')});\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/*\n /\n@Component({\n tag: \"stzh-pagebottom\",\n styleUrl: \"stzh-pagebottom.scss\",\n scoped: true\n})\nexport class StzhPagebottom {\n /** Translation strings. /\n @Prop() localization: StzhPagebottomLocalizedText;\n\n /* Share Title /\n @Prop() shareTitle: string = \"\";\n\n /* URL of current site (uses full URL by default) /\n @Prop() shareUrl: string;\n\n /\n Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n /\n @Prop() shareServices: ShareService[] \| string;\n\n /* Whether to show share /\n @Prop({ reflect: true }) shareDisabled: boolean;\n\n /* Overwrite share mail subject translation /\n @Prop() shareMailSubject: string;\n\n /* Overwrite share mail body translation /\n @Prop() shareMailBody: string;\n\n /* Logo href /\n @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n /* Whether to show print button /\n @Prop({ reflect: true }) withPrint: boolean;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute of the print button element.\n /\n @Prop() printAnalyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the logo link element.\n * Default value will be \"Footer Logo\"\n /\n // @Prop() logoAnalyticsId: string;\n\n @Element() element: HTMLStzhPagebottomElement;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n }\n }\n\n render() {\n // const printUsed: boolean = hasSlot(this.element, \"print\");\n // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n const classes = {\n \"stzh-pagebottom\": true,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagebottom__wrapper\">\n <div class=\"stzh-pagebottom__left\">\n {this.withPrint &&\n <div class=\"stzh-pagebottom__print\">\n <stzh-print>\n <stzh-button\n label={this.localization.printLabel}\n variant=\"tertiary-plain\"\n size=\"small\"\n noPaddingLeft={true}\n noPaddingRight={true}\n analyticsId={this.printAnalyticsId}\n ></stzh-button>\n </stzh-print>\n </div>\n }\n\n {!this.shareDisabled &&\n <div class=\"stzh-pagebottom__share-wrapper\">\n {this.shareTitle &&\n <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n }\n <stzh-share\n url={this.shareUrl}\n services={this.shareServices}\n mailSubject={this.shareMailSubject}\n mailBody={this.shareMailBody}\n ></stzh-share>\n </div>\n }\n </div>\n\n <div class=\"stzh-pagebottom__sticky-actions\">\n <slot name=\"sticky-actions\"></slot>\n </div>\n </div>\n\n {/ {logoUsed &&\n <div class=\"stzh-pagebottom__logo\">\n <a\n href={this.logoHref}\n class=\"stzh-pagebottom__logo-link\"\n s-object-id={this.logoAnalyticsId \|\| \"Footer Logo\"}\n >\n <slot name=\"logo\"></slot>\n </a>\n </div>\n } */}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-pagebottom.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,8uHAA8uH;;MCqB3vH,cAAc;;;;sBAKI,EAAE;;;;;;oBAqBJ,8BAA8B;;;;EAoBzD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;GACF;EAED,MAAM;;;IAIJ,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;MACvB,SAAS,EAAE,IAAI;KAChB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,0BAA0B,IACnC,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,SAAS;MACb,WAAK,KAAK,EAAC,wBAAwB,IACjC,sBACE,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACnC,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,EACpB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GACrB,CACJ,CACT,EAGP,CAAC,IAAI,CAAC,aAAa;MAClB,WAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,UAAU;QACd,WAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,UAAU,CAAO,EAEnE,kBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,aAAa,GAChB,CACV,CAEJ,EAEN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CAaF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pagebottom/stzh-pagebottom.scss?tag=stzh-pagebottom&encapsulation=scoped","src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"sourcesContent":[":host {\n @media print {\n display: none;\n }\n\n // ::slotted([slot=\"logo\"]) {\n // height: 38px;\n // }\n}\n\n.stzh-pagebottom {\n &__wrapper {\n display: grid;\n }\n\n &__left {\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n row-gap: space('xsmall');\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n &__share-title {\n @include fontCurve('caption');\n\t\tmargin-bottom: space('small');\n }\n\n &__sticky-actions {\n margin-left: auto;\n margin-top: space('medium');\n\n --stzh-button-white-space: nowrap;\n\n @include mq($from: small) {\n margin-top: 0;\n }\n }\n\n &__print,\n &__share-wrapper {\n flex-shrink: 0;\n }\n\n &__share-wrapper {\n margin-left: -10px;\n\n @include mq($from: medium) {\n margin-left: 0;\n }\n }\n\n &__print {\n @include mq($from: small) {\n margin-right: space('xxlarge');\n }\n\n @include mq($from: medium) {\n @include spaceCurve('margin-right', 'big');\n }\n }\n\n // &__logo {\n // @include mq($from: small) {\n // margin-left: auto;\n // }\n // }\n\n // &__logo-link {\n // &:not(:empty) {\n // display: block;\n // margin-top: space('xlarge');\n\n // @include mq($from: small) {\n // margin-top: 0;\n // margin-left: space('xlarge');\n // }\n // }\n // }\n\n &:has(#{&}__sticky-actions:not(:empty)) &__wrapper {\n grid-template-columns: auto;\n\n @include mq($from: small) {\n grid-template-columns: minmax(0, 1fr) calc(110px + 44px + #{space('small')} + #{space('medium')});\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/*\n @slot sticky-actions - Slot for sticky actions\n /\n@Component({\n tag: \"stzh-pagebottom\",\n styleUrl: \"stzh-pagebottom.scss\",\n scoped: true\n})\nexport class StzhPagebottom {\n /* Translation strings. /\n @Prop() localization: StzhPagebottomLocalizedText;\n\n /* Share Title /\n @Prop() shareTitle: string = \"\";\n\n /* URL of current site (uses full URL by default) /\n @Prop() shareUrl: string;\n\n /\n Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n /\n @Prop() shareServices: ShareService[] \| string;\n\n /* Whether to show share /\n @Prop({ reflect: true }) shareDisabled: boolean;\n\n /* Overwrite share mail subject translation /\n @Prop() shareMailSubject: string;\n\n /* Overwrite share mail body translation /\n @Prop() shareMailBody: string;\n\n /* Logo href /\n @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n /* Whether to show print button /\n @Prop({ reflect: true }) withPrint: boolean;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute of the print button element.\n /\n @Prop() printAnalyticsId: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the logo link element.\n * Default value will be \"Footer Logo\"\n /\n // @Prop() logoAnalyticsId: string;\n\n @Element() element: HTMLStzhPagebottomElement;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n }\n }\n\n render() {\n // const printUsed: boolean = hasSlot(this.element, \"print\");\n // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n const classes = {\n \"stzh-pagebottom\": true,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagebottom__wrapper\">\n <div class=\"stzh-pagebottom__left\">\n {this.withPrint &&\n <div class=\"stzh-pagebottom__print\">\n <stzh-print>\n <stzh-button\n label={this.localization.printLabel}\n variant=\"tertiary-plain\"\n size=\"small\"\n noPaddingLeft={true}\n noPaddingRight={true}\n analyticsId={this.printAnalyticsId}\n ></stzh-button>\n </stzh-print>\n </div>\n }\n\n {!this.shareDisabled &&\n <div class=\"stzh-pagebottom__share-wrapper\">\n {this.shareTitle &&\n <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n }\n <stzh-share\n url={this.shareUrl}\n services={this.shareServices}\n mailSubject={this.shareMailSubject}\n mailBody={this.shareMailBody}\n ></stzh-share>\n </div>\n }\n </div>\n\n <div class=\"stzh-pagebottom__sticky-actions\">\n <slot name=\"sticky-actions\"></slot>\n </div>\n </div>\n\n {/ {logoUsed &&\n <div class=\"stzh-pagebottom__logo\">\n <a\n href={this.logoHref}\n class=\"stzh-pagebottom__logo-link\"\n s-object-id={this.logoAnalyticsId \|\| \"Footer Logo\"}\n >\n <slot name=\"logo\"></slot>\n </a>\n </div>\n } */}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-pagecontent.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-pagecontent.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,yhKAAyhK;;~~MCkBviK~~,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAExD,MAAM,OAAO,GAAG;MACd,kBAAkB,EAAE,IAAI;MACxB,kCAAkC,EAAE,YAAY,IAAI,YAAY;MAChE,qCAAqC,EAAE,CAAC,YAAY,IAAI,CAAC,YAAY;KACtE,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,aAAO,KAAK,EAAC,8BAA8B,IACzC,WAAK,KAAK,EAAC,6BAA6B,IACtC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CACzB,EACR,WAAK,KAAK,EAAC,2BAA2B,IACpC,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pagecontent/stzh-pagecontent.scss?tag=stzh-pagecontent&encapsulation=scoped","src/components/stzh-pagecontent/stzh-pagecontent.tsx"],"sourcesContent":[".stzh-pagecontent {\n @include grid;\n\n grid-template-areas:\n \"aside-left aside-left aside-left aside-left\"\n \"content content content content\";\n\n @include mq($from: medium) {\n grid-template-areas:\n \"aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left\"\n \"content content content content content content content content\";\n }\n\n @include mq($from: large) {\n grid-template-areas:\n \"aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left\"\n \"content content content content content content content content content content content content\";\n }\n\n &__aside-left {\n grid-area: aside-left;\n }\n\n &__content {\n grid-area: content;\n }\n\n &__anchornav {\n @include mq($to: large) {\n position: relative;\n top: 0px;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n }\n\n @include mq($from: large) {\n position: sticky;\n top: calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + #{space('medium')});\n transition: top $baseTransitionAnimationSpeed;\n width: calc(100% + #{$gridGutterLarge} - #{spaceCurveValue('large', 'large')});\n }\n\n @include mq($from: ultra) {\n width: calc(100% + #{$gridGutterUltra} - #{spaceCurveValue('large', 'large')});\n }\n }\n\n /* Has aside content /\n\n &--has-aside-left {\n @include mq($from: large) {\n // --stzh-textandimage-grid-template-columns: repeat(8, minmax(0, 1fr));\n // --stzh-textandimage-grid-template-areas:\n // \"text text text text image image image image\";\n // --stzh-textandimage-small-grid-template-areas:\n // \"text text text text text image image image\";\n // --stzh-textandimage-large-grid-template-areas:\n // \"text text text text text text . .\"\n // \"image image image image image image image image\";\n\n --stzh-content-grid-template-areas:\n \"content content content content content content content content content content content content\";\n\n grid-template-areas:\n \"aside-left aside-left aside-left aside-left content content content content content content content content\";\n }\n }\n\n &--has-aside-left &__aside-left {\n @include spaceCurve('margin-bottom', 'section-inner');\n }\n\n / Has no aside content /\n\n &--has-no-aside-left {\n }\n}\n","import {\n Component,\n Host,\n h,\n Element\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot anchornav - Slot for anchornav\n * @slot - Slot for content\n */\n@Component({\n tag: \"stzh-pagecontent\",\n styleUrl: \"stzh-pagecontent.scss\",\n scoped: true\n})\nexport class StzhPagecontent {\n @Element() element: HTMLStzhPagecontentElement;\n\n render() {\n const hasAsideLeft = hasSlot(this.element, \"aside-left\");\n const hasAnchornav = hasSlot(this.element, \"anchornav\");\n\n const classes = {\n \"stzh-pagecontent\": true,\n \"stzh-pagecontent--has-aside-left\": hasAsideLeft \|\| hasAnchornav,\n \"stzh-pagecontent--has-no-aside-left\": !hasAsideLeft && !hasAnchornav,\n };\n\n return (\n <Host>\n <div class={classes}>\n <aside class=\"stzh-pagecontent__aside-left\">\n <div class=\"stzh-pagecontent__anchornav\">\n <slot name=\"anchornav\"></slot>\n </div>\n <slot slot=\"aside-left\"></slot>\n </aside>\n <div class=\"stzh-pagecontent__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-pagecontent.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,yhKAAyhK;;MCmBviK,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAExD,MAAM,OAAO,GAAG;MACd,kBAAkB,EAAE,IAAI;MACxB,kCAAkC,EAAE,YAAY,IAAI,YAAY;MAChE,qCAAqC,EAAE,CAAC,YAAY,IAAI,CAAC,YAAY;KACtE,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,aAAO,KAAK,EAAC,8BAA8B,IACzC,WAAK,KAAK,EAAC,6BAA6B,IACtC,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CACzB,EACR,WAAK,KAAK,EAAC,2BAA2B,IACpC,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pagecontent/stzh-pagecontent.scss?tag=stzh-pagecontent&encapsulation=scoped","src/components/stzh-pagecontent/stzh-pagecontent.tsx"],"sourcesContent":[".stzh-pagecontent {\n @include grid;\n\n grid-template-areas:\n \"aside-left aside-left aside-left aside-left\"\n \"content content content content\";\n\n @include mq($from: medium) {\n grid-template-areas:\n \"aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left\"\n \"content content content content content content content content\";\n }\n\n @include mq($from: large) {\n grid-template-areas:\n \"aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left aside-left\"\n \"content content content content content content content content content content content content\";\n }\n\n &__aside-left {\n grid-area: aside-left;\n }\n\n &__content {\n grid-area: content;\n }\n\n &__anchornav {\n @include mq($to: large) {\n position: relative;\n top: 0px;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n }\n\n @include mq($from: large) {\n position: sticky;\n top: calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + #{space('medium')});\n transition: top $baseTransitionAnimationSpeed;\n width: calc(100% + #{$gridGutterLarge} - #{spaceCurveValue('large', 'large')});\n }\n\n @include mq($from: ultra) {\n width: calc(100% + #{$gridGutterUltra} - #{spaceCurveValue('large', 'large')});\n }\n }\n\n /* Has aside content /\n\n &--has-aside-left {\n @include mq($from: large) {\n // --stzh-textandimage-grid-template-columns: repeat(8, minmax(0, 1fr));\n // --stzh-textandimage-grid-template-areas:\n // \"text text text text image image image image\";\n // --stzh-textandimage-small-grid-template-areas:\n // \"text text text text text image image image\";\n // --stzh-textandimage-large-grid-template-areas:\n // \"text text text text text text . .\"\n // \"image image image image image image image image\";\n\n --stzh-content-grid-template-areas:\n \"content content content content content content content content content content content content\";\n\n grid-template-areas:\n \"aside-left aside-left aside-left aside-left content content content content content content content content\";\n }\n }\n\n &--has-aside-left &__aside-left {\n @include spaceCurve('margin-bottom', 'section-inner');\n }\n\n / Has no aside content /\n\n &--has-no-aside-left {\n }\n}\n","import {\n Component,\n Host,\n h,\n Element\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot anchornav - Slot for anchornav\n * @slot aside-left - Slot for aside left content\n * @slot - Slot for content\n */\n@Component({\n tag: \"stzh-pagecontent\",\n styleUrl: \"stzh-pagecontent.scss\",\n scoped: true\n})\nexport class StzhPagecontent {\n @Element() element: HTMLStzhPagecontentElement;\n\n render() {\n const hasAsideLeft = hasSlot(this.element, \"aside-left\");\n const hasAnchornav = hasSlot(this.element, \"anchornav\");\n\n const classes = {\n \"stzh-pagecontent\": true,\n \"stzh-pagecontent--has-aside-left\": hasAsideLeft \|\| hasAnchornav,\n \"stzh-pagecontent--has-no-aside-left\": !hasAsideLeft && !hasAnchornav,\n };\n\n return (\n <Host>\n <div class={classes}>\n <aside class=\"stzh-pagecontent__aside-left\">\n <div class=\"stzh-pagecontent__anchornav\">\n <slot name=\"anchornav\"></slot>\n </div>\n <slot slot=\"aside-left\"></slot>\n </aside>\n <div class=\"stzh-pagecontent__content\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-pagetitle-hero.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-pagetitle-hero.entry.js","mappings":"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","names":["Fitty"],"sources":["node_modules/fitty/dist/fitty.module.js","src/components/stzh-pagetitle-hero/stzh-pagetitle-hero.scss?tag=stzh-pagetitle-hero&encapsulation=scoped","src/components/stzh-pagetitle-hero/stzh-pagetitle-hero.tsx"],"sourcesContent":["/*\n fitty v2.4.2 - Snugly resizes text to fit its parent container\n * Copyright (c) 2023 Rik Schennink <rik@pqina.nl> (https://pqina.nl/)\n /\n\nvar e=function(e){if(e){var t=function(e){return[].slice.call(e)},n=0,i=1,r=2,o=3,a=[],l=null,u=\"requestAnimationFrame\"in e?function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{sync:!1};e.cancelAnimationFrame(l);var n=function(){return s(a.filter((function(e){return e.dirty&&e.active})))};if(t.sync)return n();l=e.requestAnimationFrame(n)}:function(){},c=function(e){return function(t){a.forEach((function(t){return t.dirty=e})),u(t)}},s=function(e){e.filter((function(e){return!e.styleComputed})).forEach((function(e){e.styleComputed=m(e)})),e.filter(y).forEach(v);var t=e.filter(p);t.forEach(d),t.forEach((function(e){v(e),f(e)})),t.forEach(S)},f=function(e){return e.dirty=n},d=function(e){e.availableWidth=e.element.parentNode.clientWidth,e.currentWidth=e.element.scrollWidth,e.previousFontSize=e.currentFontSize,e.currentFontSize=Math.min(Math.max(e.minSize,e.availableWidth/e.currentWidthe.previousFontSize),e.maxSize),e.whiteSpace=e.multiLine&&e.currentFontSize===e.minSize?\"normal\":\"nowrap\"},p=function(e){return e.dirty!==r\|\|e.dirty===r&&e.element.parentNode.clientWidth!==e.availableWidth},m=function(t){var n=e.getComputedStyle(t.element,null);return t.currentFontSize=parseFloat(n.getPropertyValue(\"font-size\")),t.display=n.getPropertyValue(\"display\"),t.whiteSpace=n.getPropertyValue(\"white-space\"),!0},y=function(e){var t=!1;return!e.preStyleTestCompleted&&(/inline-/.test(e.display)\|\|(t=!0,e.display=\"inline-block\"),\"nowrap\"!==e.whiteSpace&&(t=!0,e.whiteSpace=\"nowrap\"),e.preStyleTestCompleted=!0,t)},v=function(e){e.element.style.whiteSpace=e.whiteSpace,e.element.style.display=e.display,e.element.style.fontSize=e.currentFontSize+\"px\"},S=function(e){e.element.dispatchEvent(new CustomEvent(\"fit\",{detail:{oldValue:e.previousFontSize,newValue:e.currentFontSize,scaleFactor:e.currentFontSize/e.previousFontSize}}))},h=function(e,t){return function(n){e.dirty=t,e.active&&u(n)}},w=function(e){return function(){a=a.filter((function(t){return t.element!==e.element})),e.observeMutations&&e.observer.disconnect(),e.element.style.whiteSpace=e.originalStyle.whiteSpace,e.element.style.display=e.originalStyle.display,e.element.style.fontSize=e.originalStyle.fontSize}},b=function(e){return function(){e.active\|\|(e.active=!0,u())}},z=function(e){return function(){return e.active=!1}},F=function(e){e.observeMutations&&(e.observer=new MutationObserver(h(e,i)),e.observer.observe(e.element,e.observeMutations))},g={minSize:16,maxSize:512,multiLine:!0,observeMutations:\"MutationObserver\"in e&&{subtree:!0,childList:!0,characterData:!0}},W=null,E=function(){e.clearTimeout(W),W=e.setTimeout(c(r),x.observeWindowDelay)},M=[\"resize\",\"orientationchange\"];return Object.defineProperty(x,\"observeWindow\",{set:function(t){var n=\"\".concat(t?\"add\":\"remove\",\"EventListener\");M.forEach((function(t){e[n](t,E)}))}}),x.observeWindow=!0,x.observeWindowDelay=100,x.fitAll=c(o),x}function C(e,t){var n=Object.assign({},g,t),i=e.map((function(e){var t=Object.assign({},n,{element:e,active:!0});return function(e){e.originalStyle={whiteSpace:e.element.style.whiteSpace,display:e.element.style.display,fontSize:e.element.style.fontSize},F(e),e.newbie=!0,e.dirty=!0,a.push(e)}(t),{element:e,fit:h(t,o),unfreeze:b(t),freeze:z(t),unsubscribe:w(t)}}));return u(),i}function x(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return\"string\"==typeof e?C(t(document.querySelectorAll(e)),n):C([e],n)[0]}}(\"undefined\"==typeof window?null:window);export default e;\n",":host {\n ::slotted(img[slot=\"image\"]),\n ::slotted([slot=\"image\"]) img {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n object-fit: cover;\n object-position: center;\n }\n}\n\n.stzh-pagetitle-hero {\n margin-bottom: calc(#{spaceCurveValue('small')} / -1);\n\n @include mq($from: medium) {\n margin-bottom: calc(#{spaceCurveValue('small', 'medium')} / -1);\n padding-top: space('xxlarge');\n }\n\n @include mq($from: large) {\n margin-bottom: calc(#{spaceCurveValue('small', 'large')} / -1);\n }\n\n &__tags {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n gap: space('xsmall');\n\n &:not(:empty) {\n margin-bottom: space('xlarge');\n }\n }\n\n &__back-link {\n @include mq($from: medium) {\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &:not(:empty) {\n @include mq($to: medium) {\n margin: space('xlarge') 0;\n }\n }\n }\n\n &__title-wrapper {\n @include base-invert;\n @include chip-invert;\n display: flex;\n justify-content: center;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n background-color: $colorPrimary;\n padding: space('xxxlarge') space('xlarge');\n margin-top: calc(#{space('xxxlarge')} * -1);\n\n @include mq($from: small) {\n padding: space('xxxxlarge') space('xxlarge');\n margin-top: calc(#{space('big')} * -1);\n }\n\n @include mq($from: medium) {\n padding: space('big');\n }\n\n @include mq($from: medium) {\n margin: space('big') 0;\n width: (6 / 12) * 100%;\n margin-left: -(1 / 12) * 100%;\n }\n\n @include mq($from: large) {\n padding: space('xbig');\n }\n }\n\n &__title {\n @include font('heavy');\n color: $colorWhite;\n margin: 0;\n font-size: 30px; // font size will be overwritten by js\n line-height: 1.107;\n\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: normal;\n word-break: normal;\n word-break: break-word;\n\n @include mq($from: small) {\n font-size: 45px; // font size will be overwritten by js\n }\n }\n\n &__subtitle {\n @include fontCurve('h3');\n @include spaceCurve('margin-top', 'medium');\n color: $colorWhite;\n }\n\n &__header {\n @include spaceCurve('margin-bottom', 'huge');\n display: flex;\n flex-direction: column;\n position: relative;\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__image-wrapper {\n position: relative;\n flex-shrink: 0;\n background-color: $colorOldGrey5;\n // for modern browsers (css variable is set via js)\n margin-left: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n margin-right: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n\n @include mq($from: medium) {\n width: (7 / 12) * 100%;\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n &__image-ratio {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: (3 / 4) * 100%;\n\n @include mq($from: small) {\n padding-bottom: (9 / 16) * 100%;\n }\n\n @include mq($from: medium) {\n padding-bottom: (3 / 4) * 100%;\n }\n }\n\n &__lead {\n margin: 0 auto;\n margin-bottom: space('large');\n\n @include mq($from: small) {\n margin-bottom: space('xxlarge');\n }\n\n @include mq($from: large) {\n margin-bottom: space('huge');\n max-width: 100% / 12 * 8;\n }\n }\n\n &__lead-author {\n @include fontCurve('p1');\n @include spaceCurve('margin-top', 'small');\n }\n\n /* Has back link variant /\n\n &--has-back-link &__header {\n @include mq($from: medium) {\n flex-direction: row-reverse;\n }\n }\n\n &--has-back-link &__title-wrapper {\n @include mq($from: medium) {\n margin-right: -(1 / 12) 100%;\n }\n }\n\n /* Has lead /\n\n &--has-no-lead {\n margin-bottom: calc(#{spaceCurveValue('large')} / -1);\n\n @include mq($from: small) {\n margin-bottom: calc(#{spaceCurveValue('large', 'small')} / -1);\n }\n\n @include mq($from: medium) {\n margin-bottom: calc(#{spaceCurveValue('large', 'medium')} / -1);\n }\n\n @include mq($from: large) {\n margin-bottom: calc(#{spaceCurveValue('large', 'large')} / -1);\n }\n }\n\n &--has-no-lead &__lead {\n display: none;\n }\n\n / No image variant /\n\n &--has-no-image &__image-wrapper {\n display: none;\n }\n\n &--has-no-image &__header {\n flex-direction: column;\n margin-top: 0;\n }\n\n &--has-no-image &__title-wrapper {\n width: 100%;\n margin: 0;\n }\n\n &--has-no-image &__back-link {\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n position: static;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\n\nimport Fitty from \"fitty\";\n\n/\n @slot image - Slot for `picture` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot back-link - Slot for `stzh-link` element\n /\n@Component({\n tag: \"stzh-pagetitle-hero\",\n styleUrl: \"stzh-pagetitle-hero.scss\",\n scoped: true\n})\nexport class StzhPagetitleHero {\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Heading ID /\n @Prop() headingId: string = \"anchorContent\";\n\n /* Lead author /\n @Prop() leadAuthor: string = \"\";\n\n /* Subtitle */\n @Prop() subtitle: string = \"\";\n\n @Element() element: HTMLStzhPagetitleHeroElement;\n\n private fitty: any;\n private mainTitleElement: HTMLHeadingElement;\n private observer: MutationObserver;\n\n private destroyFitty() {\n if (this.fitty) {\n this.fitty.unsubscribe();\n this.fitty = null;\n }\n }\n\n private init = () => {\n const backLink = this.element.querySelector('stzh-link[slot=\"back-link\"], [slot=\"back-link\"] stzh-link');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const tags = this.element.querySelectorAll('stzh-chip[slot=\"tag\"], [slot=\"tag\"] stzh-chip');\n\n if (backLink) {\n setPropsIfNull(backLink, {\n icon: \"angle-left\"\n } as HTMLStzhLinkElement)\n }\n\n leads.forEach((lead) => {\n setPropsIfNull(lead, {\n lead: true\n } as HTMLStzhTextElement)\n });\n\n tags.forEach((tag) => {\n setPropsIfNull(tag, {\n role: \"listitem\"\n })\n });\n }\n\n private reinitFitty = () => {\n this.destroyFitty();\n\n const isSmall = media(\"small\").matches;\n\n this.fitty = Fitty(this.mainTitleElement, {\n minSize: isSmall ? 45 : 32,\n maxSize: isSmall ? 96 : 64\n });\n }\n\n async componentWillUpdate() {\n this.destroyFitty();\n }\n\n async componentDidRender() {\n if (this.fitty) {\n return;\n }\n\n this.reinitFitty();\n }\n\n connectedCallback() {\n this.init();\n addMediaChangeListener(this.reinitFitty);\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 removeMediaChangeListener(this.reinitFitty);\n this.destroyFitty();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const backLinkSlotUsed = hasSlot(this.element, \"back-link\");\n\n const classes = {\n \"stzh-pagetitle-hero\": true,\n \"stzh-pagetitle-hero--has-no-image\": !imageSlotUsed,\n \"stzh-pagetitle-hero--has-no-lead\": !leadSlotUsed,\n \"stzh-pagetitle-hero--has-back-link\": backLinkSlotUsed,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagetitle-hero__header\">\n <div class=\"stzh-pagetitle-hero__back-link\">\n <slot name=\"back-link\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle-hero__image-wrapper\">\n <div class=\"stzh-pagetitle-hero__image-ratio\"></div>\n <slot name=\"image\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle-hero__title-wrapper\">\n <div class=\"stzh-pagetitle-hero__tags\" role=\"list\">\n <slot name=\"tag\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle-hero__title-parent\">\n <h1\n ref={(el) => (this.mainTitleElement = el as HTMLHeadingElement)}\n class=\"stzh-pagetitle-hero__title\"\n id={this.headingId}\n >\n {this.heading}\n </h1>\n </div>\n {this.subtitle &&\n <div class=\"stzh-pagetitle-hero__subtitle\">\n {this.subtitle}\n </div>\n }\n </div>\n </div>\n\n <div class=\"stzh-pagetitle-hero__lead\">\n <slot name=\"lead\"></slot>\n <div class=\"stzh-pagetitle-hero__lead-author\">\n {this.leadAuthor}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-pagetitle-hero.entry.js","mappings":"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","names":["Fitty"],"sources":["node_modules/fitty/dist/fitty.module.js","src/components/stzh-pagetitle-hero/stzh-pagetitle-hero.scss?tag=stzh-pagetitle-hero&encapsulation=scoped","src/components/stzh-pagetitle-hero/stzh-pagetitle-hero.tsx"],"sourcesContent":["/*\n fitty v2.4.2 - Snugly resizes text to fit its parent container\n * Copyright (c) 2023 Rik Schennink <rik@pqina.nl> (https://pqina.nl/)\n /\n\nvar e=function(e){if(e){var t=function(e){return[].slice.call(e)},n=0,i=1,r=2,o=3,a=[],l=null,u=\"requestAnimationFrame\"in e?function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{sync:!1};e.cancelAnimationFrame(l);var n=function(){return s(a.filter((function(e){return e.dirty&&e.active})))};if(t.sync)return n();l=e.requestAnimationFrame(n)}:function(){},c=function(e){return function(t){a.forEach((function(t){return t.dirty=e})),u(t)}},s=function(e){e.filter((function(e){return!e.styleComputed})).forEach((function(e){e.styleComputed=m(e)})),e.filter(y).forEach(v);var t=e.filter(p);t.forEach(d),t.forEach((function(e){v(e),f(e)})),t.forEach(S)},f=function(e){return e.dirty=n},d=function(e){e.availableWidth=e.element.parentNode.clientWidth,e.currentWidth=e.element.scrollWidth,e.previousFontSize=e.currentFontSize,e.currentFontSize=Math.min(Math.max(e.minSize,e.availableWidth/e.currentWidthe.previousFontSize),e.maxSize),e.whiteSpace=e.multiLine&&e.currentFontSize===e.minSize?\"normal\":\"nowrap\"},p=function(e){return e.dirty!==r\|\|e.dirty===r&&e.element.parentNode.clientWidth!==e.availableWidth},m=function(t){var n=e.getComputedStyle(t.element,null);return t.currentFontSize=parseFloat(n.getPropertyValue(\"font-size\")),t.display=n.getPropertyValue(\"display\"),t.whiteSpace=n.getPropertyValue(\"white-space\"),!0},y=function(e){var t=!1;return!e.preStyleTestCompleted&&(/inline-/.test(e.display)\|\|(t=!0,e.display=\"inline-block\"),\"nowrap\"!==e.whiteSpace&&(t=!0,e.whiteSpace=\"nowrap\"),e.preStyleTestCompleted=!0,t)},v=function(e){e.element.style.whiteSpace=e.whiteSpace,e.element.style.display=e.display,e.element.style.fontSize=e.currentFontSize+\"px\"},S=function(e){e.element.dispatchEvent(new CustomEvent(\"fit\",{detail:{oldValue:e.previousFontSize,newValue:e.currentFontSize,scaleFactor:e.currentFontSize/e.previousFontSize}}))},h=function(e,t){return function(n){e.dirty=t,e.active&&u(n)}},w=function(e){return function(){a=a.filter((function(t){return t.element!==e.element})),e.observeMutations&&e.observer.disconnect(),e.element.style.whiteSpace=e.originalStyle.whiteSpace,e.element.style.display=e.originalStyle.display,e.element.style.fontSize=e.originalStyle.fontSize}},b=function(e){return function(){e.active\|\|(e.active=!0,u())}},z=function(e){return function(){return e.active=!1}},F=function(e){e.observeMutations&&(e.observer=new MutationObserver(h(e,i)),e.observer.observe(e.element,e.observeMutations))},g={minSize:16,maxSize:512,multiLine:!0,observeMutations:\"MutationObserver\"in e&&{subtree:!0,childList:!0,characterData:!0}},W=null,E=function(){e.clearTimeout(W),W=e.setTimeout(c(r),x.observeWindowDelay)},M=[\"resize\",\"orientationchange\"];return Object.defineProperty(x,\"observeWindow\",{set:function(t){var n=\"\".concat(t?\"add\":\"remove\",\"EventListener\");M.forEach((function(t){e[n](t,E)}))}}),x.observeWindow=!0,x.observeWindowDelay=100,x.fitAll=c(o),x}function C(e,t){var n=Object.assign({},g,t),i=e.map((function(e){var t=Object.assign({},n,{element:e,active:!0});return function(e){e.originalStyle={whiteSpace:e.element.style.whiteSpace,display:e.element.style.display,fontSize:e.element.style.fontSize},F(e),e.newbie=!0,e.dirty=!0,a.push(e)}(t),{element:e,fit:h(t,o),unfreeze:b(t),freeze:z(t),unsubscribe:w(t)}}));return u(),i}function x(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return\"string\"==typeof e?C(t(document.querySelectorAll(e)),n):C([e],n)[0]}}(\"undefined\"==typeof window?null:window);export default e;\n",":host {\n ::slotted(img[slot=\"image\"]),\n ::slotted([slot=\"image\"]) img {\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n object-fit: cover;\n object-position: center;\n }\n}\n\n.stzh-pagetitle-hero {\n margin-bottom: calc(#{spaceCurveValue('small')} / -1);\n\n @include mq($from: medium) {\n margin-bottom: calc(#{spaceCurveValue('small', 'medium')} / -1);\n padding-top: space('xxlarge');\n }\n\n @include mq($from: large) {\n margin-bottom: calc(#{spaceCurveValue('small', 'large')} / -1);\n }\n\n &__tags {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n gap: space('xsmall');\n\n &:not(:empty) {\n margin-bottom: space('xlarge');\n }\n }\n\n &__back-link {\n @include mq($from: medium) {\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &:not(:empty) {\n @include mq($to: medium) {\n margin: space('xlarge') 0;\n }\n }\n }\n\n &__title-wrapper {\n @include base-invert;\n @include chip-invert;\n display: flex;\n justify-content: center;\n flex-direction: column;\n flex-shrink: 0;\n position: relative;\n z-index: 1;\n background-color: $colorPrimary;\n padding: space('xxxlarge') space('xlarge');\n margin-top: calc(#{space('xxxlarge')} * -1);\n\n @include mq($from: small) {\n padding: space('xxxxlarge') space('xxlarge');\n margin-top: calc(#{space('big')} * -1);\n }\n\n @include mq($from: medium) {\n padding: space('big');\n }\n\n @include mq($from: medium) {\n margin: space('big') 0;\n width: (6 / 12) * 100%;\n margin-left: -(1 / 12) * 100%;\n }\n\n @include mq($from: large) {\n padding: space('xbig');\n }\n }\n\n &__title {\n @include font('heavy');\n color: $colorWhite;\n margin: 0;\n font-size: 30px; // font size will be overwritten by js\n line-height: 1.107;\n\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: normal;\n word-break: normal;\n word-break: break-word;\n\n @include mq($from: small) {\n font-size: 45px; // font size will be overwritten by js\n }\n }\n\n &__subtitle {\n @include fontCurve('h3');\n @include spaceCurve('margin-top', 'medium');\n color: $colorWhite;\n }\n\n &__header {\n @include spaceCurve('margin-bottom', 'huge');\n display: flex;\n flex-direction: column;\n position: relative;\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__image-wrapper {\n position: relative;\n flex-shrink: 0;\n background-color: $colorOldGrey5;\n // for modern browsers (css variable is set via js)\n margin-left: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n margin-right: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n\n @include mq($from: medium) {\n width: (7 / 12) * 100%;\n margin-left: 0;\n margin-right: 0;\n }\n }\n\n &__image-ratio {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: (3 / 4) * 100%;\n\n @include mq($from: small) {\n padding-bottom: (9 / 16) * 100%;\n }\n\n @include mq($from: medium) {\n padding-bottom: (3 / 4) * 100%;\n }\n }\n\n &__lead {\n margin: 0 auto;\n margin-bottom: space('large');\n\n @include mq($from: small) {\n margin-bottom: space('xxlarge');\n }\n\n @include mq($from: large) {\n margin-bottom: space('huge');\n max-width: 100% / 12 * 8;\n }\n }\n\n &__lead-author {\n @include fontCurve('p1');\n @include spaceCurve('margin-top', 'small');\n }\n\n /* Has back link variant /\n\n &--has-back-link &__header {\n @include mq($from: medium) {\n flex-direction: row-reverse;\n }\n }\n\n &--has-back-link &__title-wrapper {\n @include mq($from: medium) {\n margin-right: -(1 / 12) 100%;\n }\n }\n\n /* Has lead /\n\n &--has-no-lead {\n margin-bottom: calc(#{spaceCurveValue('large')} / -1);\n\n @include mq($from: small) {\n margin-bottom: calc(#{spaceCurveValue('large', 'small')} / -1);\n }\n\n @include mq($from: medium) {\n margin-bottom: calc(#{spaceCurveValue('large', 'medium')} / -1);\n }\n\n @include mq($from: large) {\n margin-bottom: calc(#{spaceCurveValue('large', 'large')} / -1);\n }\n }\n\n &--has-no-lead &__lead {\n display: none;\n }\n\n / No image variant /\n\n &--has-no-image &__image-wrapper {\n display: none;\n }\n\n &--has-no-image &__header {\n flex-direction: column;\n margin-top: 0;\n }\n\n &--has-no-image &__title-wrapper {\n width: 100%;\n margin: 0;\n }\n\n &--has-no-image &__back-link {\n @include spaceCurve('margin-top', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n position: static;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\n\nimport Fitty from \"fitty\";\n\n/\n @slot image - Slot for `picture` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot back-link - Slot for `stzh-link` element\n * @slot tag - Slot for `stzh-tag` element\n /\n@Component({\n tag: \"stzh-pagetitle-hero\",\n styleUrl: \"stzh-pagetitle-hero.scss\",\n scoped: true\n})\nexport class StzhPagetitleHero {\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Heading ID /\n @Prop() headingId: string = \"anchorContent\";\n\n /* Lead author /\n @Prop() leadAuthor: string = \"\";\n\n /* Subtitle */\n @Prop() subtitle: string = \"\";\n\n @Element() element: HTMLStzhPagetitleHeroElement;\n\n private fitty: any;\n private mainTitleElement: HTMLHeadingElement;\n private observer: MutationObserver;\n\n private destroyFitty() {\n if (this.fitty) {\n this.fitty.unsubscribe();\n this.fitty = null;\n }\n }\n\n private init = () => {\n const backLink = this.element.querySelector('stzh-link[slot=\"back-link\"], [slot=\"back-link\"] stzh-link');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const tags = this.element.querySelectorAll('stzh-chip[slot=\"tag\"], [slot=\"tag\"] stzh-chip');\n\n if (backLink) {\n setPropsIfNull(backLink, {\n icon: \"angle-left\"\n } as HTMLStzhLinkElement)\n }\n\n leads.forEach((lead) => {\n setPropsIfNull(lead, {\n lead: true\n } as HTMLStzhTextElement)\n });\n\n tags.forEach((tag) => {\n setPropsIfNull(tag, {\n role: \"listitem\"\n })\n });\n }\n\n private reinitFitty = () => {\n this.destroyFitty();\n\n const isSmall = media(\"small\").matches;\n\n this.fitty = Fitty(this.mainTitleElement, {\n minSize: isSmall ? 45 : 32,\n maxSize: isSmall ? 96 : 64\n });\n }\n\n async componentWillUpdate() {\n this.destroyFitty();\n }\n\n async componentDidRender() {\n if (this.fitty) {\n return;\n }\n\n this.reinitFitty();\n }\n\n connectedCallback() {\n this.init();\n addMediaChangeListener(this.reinitFitty);\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 removeMediaChangeListener(this.reinitFitty);\n this.destroyFitty();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const backLinkSlotUsed = hasSlot(this.element, \"back-link\");\n\n const classes = {\n \"stzh-pagetitle-hero\": true,\n \"stzh-pagetitle-hero--has-no-image\": !imageSlotUsed,\n \"stzh-pagetitle-hero--has-no-lead\": !leadSlotUsed,\n \"stzh-pagetitle-hero--has-back-link\": backLinkSlotUsed,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagetitle-hero__header\">\n <div class=\"stzh-pagetitle-hero__back-link\">\n <slot name=\"back-link\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle-hero__image-wrapper\">\n <div class=\"stzh-pagetitle-hero__image-ratio\"></div>\n <slot name=\"image\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle-hero__title-wrapper\">\n <div class=\"stzh-pagetitle-hero__tags\" role=\"list\">\n <slot name=\"tag\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle-hero__title-parent\">\n <h1\n ref={(el) => (this.mainTitleElement = el as HTMLHeadingElement)}\n class=\"stzh-pagetitle-hero__title\"\n id={this.headingId}\n >\n {this.heading}\n </h1>\n </div>\n {this.subtitle &&\n <div class=\"stzh-pagetitle-hero__subtitle\">\n {this.subtitle}\n </div>\n }\n </div>\n </div>\n\n <div class=\"stzh-pagetitle-hero__lead\">\n <slot name=\"lead\"></slot>\n <div class=\"stzh-pagetitle-hero__lead-author\">\n {this.leadAuthor}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-pagetitle.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-pagetitle.entry.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,olWAAolW;;MCmBhmW,aAAa;;;IA4ChB,oBAAe,GAAY,KAAK,CAAC;IAEjC,WAAM,GAAG;;MACf,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;QAC1B,OAAO;OACR;MAED,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;MACzC,MAAM,eAAe,GAAG,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,KAAI,CAAC,CAAC;MACjE,MAAM,YAAY,GAAG,eAAe,IAAI,IAAI,CAAC,eAAe,CAAC;MAC7D,MAAM,OAAO,GAAG,YAAY,IAAI,CAAC,QAAQ,CAAC;MAE1C,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACxC,mCAAmC,EACnC,YAAY,GAAG,GAAG,eAAe,IAAI,GAAG,KAAK,CAC9C,CAAC;MACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CACxC,yCAAyC,EACzC,OAAO,GAAG,GAAG,eAAe,IAAI,GAAG,KAAK,CACzC,CAAC;MACF,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,qCAAqC,EAAE,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;MACvG,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,yCAAyC,EAAE,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;;KAG5G,CAAC;IAEM,SAAI,GAAG;MACb,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,6DAA6D,CAAC,CAAC;MAC1G,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,qEAAqE,CAAC,CAAC;MACpH,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iDAAiD,CAAC,CAAC;MAC/F,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,2DAA2D,CAAC,CAAC;MACrG,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAC;MACzF,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,6CAA6C,CAAC,CAAC;MAEtF,IAAI,OAAO,EAAE;QACX,cAAc,CAAC,OAAO,EAAE;UACtB,KAAK,EAAE,MAAM;UACb,KAAK,EAAE,GAAG;SACe,CAAC,CAAC;OAC9B;MAED,IAAI,SAAS,EAAE;QACb,cAAc,CAAC,SAAS,EAAE;UACxB,oBAAoB,EAAE,IAAI;SACC,CAAC,CAAC;OAChC;MAED,IAAI,IAAI,EAAE;QACR,cAAc,CAAC,IAAI,EAAE;UACnB,KAAK,EAAE,IAAI;SACW,CAAC,CAAC;OAC3B;MAED,IAAI,GAAG,EAAE;QACP,cAAc,CAAC,GAAG,EAAE;UAClB,IAAI,EAAE,WAAW;UACjB,IAAI,EAAE,OAAO;UACb,cAAc,EAAE,IAAI;SACC,CAAC,CAAC;OAC1B;MAED,IAAI,iBAAiB,EAAE;QACrB,cAAc,CAAC,iBAAiB,EAAE;UAChC,OAAO,EAAE,gBAAgB;UACzB,aAAa,EAAE,IAAI;UACnB,cAAc,EAAE,IAAI;UACpB,IAAI,EAAE,OAAO;UACb,UAAU,EAAE,MAAM;UAClB,eAAe,EAAE,GAAG;SACI,CAAC,CAAC;OAC7B;MAED,KAAK,CAAC,OAAO,CAAC,IAAI;QAChB,cAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,IAAI;SACY,CAAC,CAAC;OAC3B,CAAC,CAAC;KACJ,CAAC;sBArH+D,SAAS;0BAGvB,KAAK;;;EAMxD,YAAY;IACV,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAClD;IAED,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAC1D;EAGD,cAAc,CAAC,KAA0C;IACvD,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,KAAK,gBAAgB,EAAE;MAC/C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;MAC5B,qBAAqB,CAAC;QACpB,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;OACpC,CAAC,CAAC;KACJ;GACF;EAGD,eAAe,CAAC,KAA2C;IACzD,IAAI,KAAK,CAAC,MAAM,CAAC,SAAS,KAAK,gBAAgB,EAAE;MAC/C,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;MAC7B,qBAAqB,CAAC;QACpB,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;OACpC,CAAC,CAAC;KACJ;GACF;EAoFD,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpC,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,EAAE,CAAC;GAC7B;EAED,MAAM;IACJ,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACjD,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,2BAA2B,EAAE,aAAa;MAC1C,8BAA8B,EAAE,CAAC,aAAa;MAC9C,0BAA0B,EAAE,YAAY;MACxC,yBAAyB,EAAE,WAAW;MACtC,0BAA0B,EAAE,WAAW,IAAI,mBAAmB;MAC9D,yBAAyB,EAAE,IAAI,CAAC,cAAc;MAC9C,CAAC,8BAA8B,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;KACrE,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,2BAA2B,IACpC,WAAK,KAAK,EAAC,yBAAyB,IAClC,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,sBAAsB,IAC/B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,EAEN,WAAK,KAAK,EAAC,6BAA6B,IACtC,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,EAEL,IAAI,CAAC,QAAQ,IAAI,WAAK,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAO,EAE7E,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EAEN,WAAK,KAAK,EAAC,sBAAsB,IAC/B,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,EAEN,WAAK,KAAK,EAAC,+BAA+B,IACxC,kBACE,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,MAAM,EACnB,KAAK,EAAC,uBAAuB,GACjB,EACd,WAAK,KAAK,EAAC,qCAAqC,IAC9C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF,EAEN,WAAK,KAAK,EAAC,2BAA2B,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAoB,CAAC,IAC9F,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACF,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/*\n @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n \n @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: Global: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: Global: Whether disturber is currently not sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-background-color: Global: Background color of pagetitle.\n /\n\n:host {\n --background-color: var(--stzh-pagetitle-background-color, #{$pagetitleBackgroundColor});\n --image-background-color: #{$ratioBackgroundColor};\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &[background=\"default\"] {\n --stzh-readspeaker-background-color: var(--background-color);\n --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n }\n\n &[background=\"transparent\"] {\n --background-color: transparent;\n }\n}\n\n.stzh-pagetitle {\n background-color: var(--background-color);\n\n &__container {\n @include container;\n }\n\n &__wrapper {\n position: relative;\n display: grid;\n }\n\n &__text {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__image-wrapper {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n margin-left: calc(#{$containerMargin} / -1);\n margin-right: calc(#{$containerMargin} / -1);\n\n @include mq($from: small) {\n margin-left: calc(#{$containerMarginSmall} / -1);\n margin-right: calc(#{$containerMarginSmall} / -1);\n }\n\n @include mq($from: medium) {\n margin-left: 0;\n margin-right: 0;\n width: calc(100% + #{$containerMarginMedium});\n }\n\n @include mq($from: large) {\n width: calc(100% + #{$containerMarginLarge});\n }\n\n @include mq($from: ultra) {\n width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n }\n }\n\n &__meta {\n display: flex;\n flex-direction: column-reverse;\n row-gap: space('xsmall');\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__tag {\n &:not(:empty) {\n margin-right: auto;\n }\n }\n\n &__readspeaker {\n @include mq($from: small, $to: medium) {\n --stzh-readspeaker-dropdown-position: relative;\n --stzh-readspeaker-dropdown-top: auto;\n }\n }\n\n &__dateline {\n @include fontSize('milli');\n @include spaceCurve('margin-top', 'regular');\n color: $colorPrimary70;\n margin-bottom: space('xsmall');\n }\n\n &__lead {\n --stzh-base-lead-color: #{$headingColor};\n }\n\n &__heading:not(:empty) + &__lead:not(:empty) {\n @include spaceCurve('margin-top', 'medium');\n }\n\n &__disturber {\n z-index: $zIndexSticky;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n\n @include mq($from: medium) {\n z-index: initial;\n position: absolute;\n width: calc(((100% - 7 #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n left: auto;\n bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n }\n\n @include mq($from: large) {\n width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n }\n\n @include mq($from: ultra) {\n width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n }\n }\n\n /* Has no image variant /\n\n &--has-no-image &__ratio {\n display: none;\n }\n\n &--has-no-image &__text {\n @include grid;\n }\n\n &--has-no-image &__meta,\n &--has-no-image &__dateline,\n &--has-no-image &__heading,\n &--has-no-image &__lead {\n grid-column: 1 / span 4;\n }\n\n &--has-no-image &__meta,\n &--has-no-image &__dateline,\n &--has-no-image &__heading {\n @include mq($from: medium) {\n grid-column: 1 / span 8;\n }\n }\n\n &--has-no-image &__lead {\n @include mq($from: medium) {\n grid-column: 1 / span 6;\n }\n\n @include mq($from: large) {\n grid-column: 1 / span 7;\n }\n }\n\n / Has image variant /\n\n &--has-image &__wrapper {\n @include mq($from: medium) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: space('xxlarge');\n }\n }\n\n / Has meta /\n\n &--has-meta &__text {\n @include spaceCurve('padding-top', 'regular');\n }\n\n / Has tag /\n\n &--has-tag &__readspeaker {\n @include mq($from: medium) {\n --stzh-readspeaker-dropdown-left: auto;\n --stzh-readspeaker-dropdown-right: 0px;\n\n --stzh-readspeaker-dropdown-settings-left: auto;\n --stzh-readspeaker-dropdown-settings-right: 0px;\n }\n }\n\n / Default background /\n\n &--background-default &__text {\n --stzh-selection-background-color: #{$colorWhite};\n }\n\n / Transparent background /\n\n &--background-transparent &__text {\n @include spaceCurve('padding-bottom', 'large');\n }\n\n / Hyphens /\n &--hyphens &__heading {\n hyphens: auto;\n }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/\n @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n /\n@Component({\n tag: \"stzh-pagetitle\",\n styleUrl: \"stzh-pagetitle.scss\",\n scoped: true,\n})\nexport class StzhPagetitle {\n @Element() element: HTMLStzhPagetitleElement;\n\n /* Background color /\n @Prop({ reflect: true }) background: \"default\" \| \"transparent\" = \"default\";\n\n /* Background color /\n @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n /* Dateline */\n @Prop() dateline: string;\n\n @Listen(\"resize\", { target: \"window\" })\n handleResize() {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n @Listen(\"stzhOpen\")\n handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n if (event.detail.component === \"stzh-disturber\") {\n this.isDisturberOpen = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\n });\n }\n }\n\n @Listen(\"stzhClose\")\n handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n if (event.detail.component === \"stzh-disturber\") {\n this.isDisturberOpen = false;\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\n });\n }\n }\n\n private observer: MutationObserver;\n private debounceResize: number;\n private disturberElement: HTMLDivElement;\n private isDisturberOpen: boolean = false;\n\n private update = () => {\n if (!this.disturberElement) {\n return;\n }\n\n const isMedium = media(\"medium\").matches;\n const disturberHeight = this.disturberElement?.offsetHeight \|\| 0;\n const hasDisturber = disturberHeight && this.isDisturberOpen;\n const isStuck = hasDisturber && !isMedium;\n\n document.documentElement.style.setProperty(\n \"--stzh-pagetitle-disturber-height\",\n hasDisturber ? `${disturberHeight}px` : \"0px\"\n );\n document.documentElement.style.setProperty(\n \"--stzh-pagetitle-disturber-stuck-height\",\n isStuck ? `${disturberHeight}px` : \"0px\"\n );\n document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n };\n\n private init = () => {\n const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n if (heading) {\n setPropsIfNull(heading, {\n curve: \"hero\",\n level: \"1\",\n } as HTMLStzhHeadingElement);\n }\n\n if (disturber) {\n setPropsIfNull(disturber, {\n initialOpenAnimation: true,\n } as HTMLStzhDisturberElement);\n }\n\n if (show) {\n setPropsIfNull(show, {\n mikro: true,\n } as HTMLStzhShowElement);\n }\n\n if (tag) {\n setPropsIfNull(tag, {\n type: \"secondary\",\n size: \"large\",\n nonInteractive: true,\n } as HTMLStzhTagElement);\n }\n\n if (readspeakerButton) {\n setPropsIfNull(readspeakerButton, {\n variant: \"tertiary-plain\",\n noPaddingLeft: true,\n noPaddingRight: true,\n size: \"small\",\n sizeMedium: \"tiny\",\n buttonAccesskey: \"L\",\n } as HTMLStzhButtonElement);\n }\n\n leads.forEach(lead => {\n setPropsIfNull(lead, {\n lead: true,\n } as HTMLStzhTextElement);\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\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 this.observer?.disconnect();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const tagSlotUsed = hasSlot(this.element, \"tag\");\n const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n const classes = {\n \"stzh-pagetitle\": true,\n \"stzh-pagetitle--has-image\": imageSlotUsed,\n \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n \"stzh-pagetitle--has-lead\": leadSlotUsed,\n \"stzh-pagetitle--has-tag\": tagSlotUsed,\n \"stzh-pagetitle--has-meta\": tagSlotUsed \|\| readspeakerSlotUsed,\n \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagetitle__container\">\n <div class=\"stzh-pagetitle__wrapper\">\n <div class=\"stzh-pagetitle__text\">\n <div class=\"stzh-pagetitle__meta\">\n <div class=\"stzh-pagetitle__tag\">\n <slot name=\"tag\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle__readspeaker\">\n <slot name=\"readspeaker\"></slot>\n </div>\n </div>\n\n {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n <div class=\"stzh-pagetitle__heading\">\n <slot name=\"heading\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pagetitle__image-wrapper\">\n <stzh-ratio\n ratio={\"16:9\"}\n ratioSmall={\"3:2\"}\n ratioMedium={\"16:9\"}\n class=\"stzh-pagetitle__ratio\"\n ></stzh-ratio>\n <div class=\"stzh-pagetitle__image-inner-wrapper\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n <slot name=\"disturber\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-pagetitle.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/*\n @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n \n @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: Global: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: Global: Whether disturber is currently not sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-background-color: Global: Background color of pagetitle.\n /\n\n:host {\n --background-color: var(--stzh-pagetitle-background-color, #{$pagetitleBackgroundColor});\n --image-background-color: #{$ratioBackgroundColor};\n\n ::slotted([slot=\"image\"]) {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &[background=\"default\"] {\n --stzh-readspeaker-background-color: var(--background-color);\n --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n }\n\n &[background=\"transparent\"] {\n --background-color: transparent;\n }\n}\n\n.stzh-pagetitle {\n background-color: var(--background-color);\n\n &__container {\n @include container;\n }\n\n &__wrapper {\n position: relative;\n display: grid;\n }\n\n &__text {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__image-wrapper {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n margin-left: calc(#{$containerMargin} / -1);\n margin-right: calc(#{$containerMargin} / -1);\n\n @include mq($from: small) {\n margin-left: calc(#{$containerMarginSmall} / -1);\n margin-right: calc(#{$containerMarginSmall} / -1);\n }\n\n @include mq($from: medium) {\n margin-left: 0;\n margin-right: 0;\n width: calc(100% + #{$containerMarginMedium});\n }\n\n @include mq($from: large) {\n width: calc(100% + #{$containerMarginLarge});\n }\n\n @include mq($from: ultra) {\n width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n }\n }\n\n &__meta {\n display: flex;\n flex-direction: column-reverse;\n row-gap: space('xsmall');\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__tag {\n &:not(:empty) {\n margin-right: auto;\n }\n }\n\n &__readspeaker {\n @include mq($from: small, $to: medium) {\n --stzh-readspeaker-dropdown-position: relative;\n --stzh-readspeaker-dropdown-top: auto;\n }\n }\n\n &__dateline {\n @include fontSize('milli');\n @include spaceCurve('margin-top', 'regular');\n color: $colorPrimary70;\n margin-bottom: space('xsmall');\n }\n\n &__lead {\n --stzh-base-lead-color: #{$headingColor};\n }\n\n &__heading:not(:empty) + &__lead:not(:empty) {\n @include spaceCurve('margin-top', 'medium');\n }\n\n &__disturber {\n z-index: $zIndexSticky;\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n\n @include mq($from: medium) {\n z-index: initial;\n position: absolute;\n width: calc(((100% - 7 #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n left: auto;\n bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n }\n\n @include mq($from: large) {\n width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n }\n\n @include mq($from: ultra) {\n width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n }\n }\n\n /* Has no image variant /\n\n &--has-no-image &__ratio {\n display: none;\n }\n\n &--has-no-image &__text {\n @include grid;\n }\n\n &--has-no-image &__meta,\n &--has-no-image &__dateline,\n &--has-no-image &__heading,\n &--has-no-image &__lead {\n grid-column: 1 / span 4;\n }\n\n &--has-no-image &__meta,\n &--has-no-image &__dateline,\n &--has-no-image &__heading {\n @include mq($from: medium) {\n grid-column: 1 / span 8;\n }\n }\n\n &--has-no-image &__lead {\n @include mq($from: medium) {\n grid-column: 1 / span 6;\n }\n\n @include mq($from: large) {\n grid-column: 1 / span 7;\n }\n }\n\n / Has image variant /\n\n &--has-image &__wrapper {\n @include mq($from: medium) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: space('xxlarge');\n }\n }\n\n / Has meta /\n\n &--has-meta &__text {\n @include spaceCurve('padding-top', 'regular');\n }\n\n / Has tag /\n\n &--has-tag &__readspeaker {\n @include mq($from: medium) {\n --stzh-readspeaker-dropdown-left: auto;\n --stzh-readspeaker-dropdown-right: 0px;\n\n --stzh-readspeaker-dropdown-settings-left: auto;\n --stzh-readspeaker-dropdown-settings-right: 0px;\n }\n }\n\n / Default background /\n\n &--background-default &__text {\n --stzh-selection-background-color: #{$colorWhite};\n }\n\n / Transparent background /\n\n &--background-transparent &__text {\n @include spaceCurve('padding-bottom', 'large');\n }\n\n / Hyphens /\n &--hyphens &__heading {\n hyphens: auto;\n }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/\n @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n * @slot disturber - Slot for disturber content\n /\n@Component({\n tag: \"stzh-pagetitle\",\n styleUrl: \"stzh-pagetitle.scss\",\n scoped: true,\n})\nexport class StzhPagetitle {\n @Element() element: HTMLStzhPagetitleElement;\n\n /* Background color /\n @Prop({ reflect: true }) background: \"default\" \| \"transparent\" = \"default\";\n\n /* Automatic Hyphens /\n @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n /* Dateline */\n @Prop() dateline: string;\n\n @Listen(\"resize\", { target: \"window\" })\n handleResize() {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n @Listen(\"stzhOpen\")\n handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n if (event.detail.component === \"stzh-disturber\") {\n this.isDisturberOpen = true;\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\n });\n }\n }\n\n @Listen(\"stzhClose\")\n handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n if (event.detail.component === \"stzh-disturber\") {\n this.isDisturberOpen = false;\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\n });\n }\n }\n\n private observer: MutationObserver;\n private debounceResize: number;\n private disturberElement: HTMLDivElement;\n private isDisturberOpen: boolean = false;\n\n private update = () => {\n if (!this.disturberElement) {\n return;\n }\n\n const isMedium = media(\"medium\").matches;\n const disturberHeight = this.disturberElement?.offsetHeight \|\| 0;\n const hasDisturber = disturberHeight && this.isDisturberOpen;\n const isStuck = hasDisturber && !isMedium;\n\n document.documentElement.style.setProperty(\n \"--stzh-pagetitle-disturber-height\",\n hasDisturber ? `${disturberHeight}px` : \"0px\"\n );\n document.documentElement.style.setProperty(\n \"--stzh-pagetitle-disturber-stuck-height\",\n isStuck ? `${disturberHeight}px` : \"0px\"\n );\n document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n };\n\n private init = () => {\n const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n if (heading) {\n setPropsIfNull(heading, {\n curve: \"hero\",\n level: \"1\",\n } as HTMLStzhHeadingElement);\n }\n\n if (disturber) {\n setPropsIfNull(disturber, {\n initialOpenAnimation: true,\n } as HTMLStzhDisturberElement);\n }\n\n if (show) {\n setPropsIfNull(show, {\n mikro: true,\n } as HTMLStzhShowElement);\n }\n\n if (tag) {\n setPropsIfNull(tag, {\n type: \"secondary\",\n size: \"large\",\n nonInteractive: true,\n } as HTMLStzhTagElement);\n }\n\n if (readspeakerButton) {\n setPropsIfNull(readspeakerButton, {\n variant: \"tertiary-plain\",\n noPaddingLeft: true,\n noPaddingRight: true,\n size: \"small\",\n sizeMedium: \"tiny\",\n buttonAccesskey: \"L\",\n } as HTMLStzhButtonElement);\n }\n\n leads.forEach(lead => {\n setPropsIfNull(lead, {\n lead: true,\n } as HTMLStzhTextElement);\n });\n };\n\n componentDidRender() {\n requestAnimationFrame(() => {\n requestAnimationFrame(this.update);\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 this.observer?.disconnect();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const tagSlotUsed = hasSlot(this.element, \"tag\");\n const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n const classes = {\n \"stzh-pagetitle\": true,\n \"stzh-pagetitle--has-image\": imageSlotUsed,\n \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n \"stzh-pagetitle--has-lead\": leadSlotUsed,\n \"stzh-pagetitle--has-tag\": tagSlotUsed,\n \"stzh-pagetitle--has-meta\": tagSlotUsed \|\| readspeakerSlotUsed,\n \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-pagetitle__container\">\n <div class=\"stzh-pagetitle__wrapper\">\n <div class=\"stzh-pagetitle__text\">\n <div class=\"stzh-pagetitle__meta\">\n <div class=\"stzh-pagetitle__tag\">\n <slot name=\"tag\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle__readspeaker\">\n <slot name=\"readspeaker\"></slot>\n </div>\n </div>\n\n {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n <div class=\"stzh-pagetitle__heading\">\n <slot name=\"heading\"></slot>\n </div>\n\n <div class=\"stzh-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pagetitle__image-wrapper\">\n <stzh-ratio\n ratio={\"16:9\"}\n ratioSmall={\"3:2\"}\n ratioMedium={\"16:9\"}\n class=\"stzh-pagetitle__ratio\"\n ></stzh-ratio>\n <div class=\"stzh-pagetitle__image-inner-wrapper\">\n <slot name=\"image\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n <slot name=\"disturber\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-pi-pagetitle.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-pi-pagetitle.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.scss?tag=stzh-pi-pagetitle&encapsulation=scoped","src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-pagetitle-hero-background-color: Background color\n * @prop --stzh-pi-pagetitle-lead-background-color: Background of lead section\n /\n\n:host {\n --hero-background-color: var(--stzh-pi-pagetitle-hero-background-color, #{$colorPrimary10});\n --lead-background-color: var(--stzh-pi-pagetitle-lead-background-color, #{$colorPrimary40});\n --grid-template-areas: \"hero hero hero hero\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n\n @include mq($from: medium) {\n --grid-template-areas: \". . hero hero hero hero . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n }\n\n @include mq($from: large) {\n --grid-template-areas: \". . . hero hero hero hero hero hero . . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n }\n\n ::slotted([slot=\"dateline\"]) {\n @include fontSize('milli');\n @include font('heavy');\n --color: var(--stzh-color-black80op);\n }\n\n ::slotted([slot=\"heading\"]),\n ::slotted([slot=\"lead\"]) ,\n ::slotted([slot=\"breadcrumb\"]) {\n --color: var(--stzh-color-black);\n }\n\n ::slotted([slot=\"readspeaker\"]) * {\n --color: var(--stzh-color-coolgrey70);\n --hover-color: var(--stzh-color-coolgrey70);\n }\n\n ::slotted([slot=\"menu\"]) {\n --stzh-pi-menu-padding-left: #{$containerMargin};\n\n @include mq($from: small) {\n --stzh-pi-menu-padding-left: #{$containerMarginSmall};\n }\n\n @include mq($from: large) {\n --stzh-pi-menu-padding-left: #{$containerMarginLarge};\n }\n\n @include mq($from: ultra) {\n --stzh-pi-menu-padding-left: calc((100vw - #{$containerMaxWidth}) / 2);\n }\n }\n}\n\n.stzh-pi-pagetitle {\n @include spaceCurve('margin-bottom', 'large');\n\n\n /* Containers /\n\n &__hero-container {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n background-color: var(--hero-background-color);\n @include spaceCurve('padding-top', 'regular');\n @include containerPadding;\n }\n\n &__image-lead-menu-container {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n background-color: var(--hero-background-color);\n\n @include mq($from: medium) {\n @include containerPadding;\n }\n }\n\n &__lead-container {\n @include grid;\n grid-template-areas: \"lead lead lead lead\";\n background-color: var(--lead-background-color);\n @include containerPadding;\n\n @include mq($from: medium) {\n grid-template-areas: \". . lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . lead lead lead lead lead lead . . .\";\n }\n }\n\n &__image-lead-menu {\n grid-area: image-lead-menu;\n\n @include grid;\n grid-template-areas: \"image image image image\" \"lead lead lead lead\";\n\n @include mq($from: medium) {\n grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n }\n }\n\n / Elements /\n\n &__hero {\n grid-area: hero;\n }\n\n &__menu {\n display: none;\n grid-area: menu;\n }\n\n &__image {\n grid-area: image;\n\n @include mq($from: medium) {\n margin-right: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc((100vw - #{$containerMaxWidth}) / -2)\n }\n }\n\n &__lead {\n --stzh-base-lead-color: #{$headingColor};\n grid-area: lead;\n background-color: var(--lead-background-color);\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n &__text {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__meta {\n display: flex;\n flex-direction: column-reverse;\n row-gap: space('xsmall');\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__readspeaker {\n margin-bottom: space('medium');\n\n @include mq($from: small) {\n margin-bottom: space('large');\n }\n\n @include mq($from: small, $to: medium) {\n --stzh-readspeaker-dropdown-position: relative;\n --stzh-readspeaker-dropdown-top: auto;\n }\n }\n\n\n &__dateline {\n margin-bottom: space('xxsmall');\n\n @include mq($from: medium) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n\n &__breadcrumbs {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n &__heading {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n /\n Menu.\n /\n\n &__menu-inner {\n @include mq($from: medium) {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n }\n\n\n / Article Info /\n &__article-info-wrapper {\n @include container();\n @include spaceCurve('padding-top', 'large');\n @include grid;\n grid-template-areas: \"article-info article-info article-info article-info\";\n\n @include mq($from: medium) {\n grid-template-areas: \". . article-info article-info article-info article-info article-info article-info\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . article-info article-info article-info article-info article-info article-info article-info article-info article-info\";\n }\n }\n\n &__article-info {\n grid-area: article-info;\n }\n\n &__author {\n margin-top: 0;\n margin-bottom: var(--stzh-space-xxsmall);\n color: var(--stzh-color-coolgrey70);\n @include font('heavy');\n @include fontCurve('p1');\n }\n\n &__date {\n margin: 0;\n @include fontCurve('p1');\n }\n\n /\n Has menu.\n /\n &--has-menu &__image-lead-menu {\n grid-template-columns: auto repeat(3, minmax(0, 1fr));\n grid-template-areas: \"menu image image image\" \"menu lead lead lead\";\n\n @include mq($from: medium) {\n grid-template-columns: $gridColumnsMedium;\n grid-template-areas: \"menu menu image image image image image image\" \"menu menu lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-columns: $gridColumnsLarge;\n grid-template-areas: \"menu menu menu image image image image image image image image image\" \"menu menu menu lead lead lead lead lead lead lead lead lead\";\n }\n }\n\n &--has-menu &__image-lead-menu-container {\n background-color: var(--stzh-color-coolgrey10);\n }\n\n &--has-menu &__menu {\n position: relative;\n display: inherit;\n margin-right: calc(#{$gridGutter} -1);\n\n @include mq($from: small) {\n margin-right: calc(#{$gridGutterSmall} * -1);\n }\n\n @include mq($from: medium) {\n margin-right: calc(#{$gridGutterMedium} * -1);\n margin-left: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: calc(#{$gridGutterLarge} * -1);\n margin-left: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc(#{$gridGutterUltra} * -1);\n margin-left: calc((100vw - #{$containerMaxWidth}) / -2);\n }\n }\n\n &--has-menu &__lead {\n @include spaceCurve('padding-left', 'regular');\n\n @include mq($from: medium) {\n margin-right: -$containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: -$containerMarginLarge;\n padding-right: $containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n padding-right: calc((100vw - 84.25rem) / 2);\n }\n }\n\n /* Has meta /\n\n &--has-meta &__text {\n @include spaceCurve('padding-top', 'regular');\n }\n\n / Level 3-4 /\n &--level-3,\n &--level-4 {\n --hero-background-color: var(--stzh-color-coolgrey20);\n --lead-background-color: var(--stzh-color-coolgrey30);\n }\n}\n\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n /\n@Component({\n tag: \"stzh-pi-pagetitle\",\n styleUrl: \"stzh-pi-pagetitle.scss\",\n scoped: true,\n})\nexport class StzhPiPagetitle {\n /* Level /\n @Prop({ reflect: true }) level: 1 \| 2 \| 3 \| 4 = 1;\n\n /* Author of the content /\n @Prop({ reflect: true }) author: string = \"\";\n\n /* Date of the content */\n @Prop({ reflect: true }) date: string = \"\";\n\n @Element() element: HTMLStzhPiPagetitleElement;\n\n private init = () => {\n const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n if (heading) {\n setPropsIfNull(heading, {\n curve: \"hero\",\n level: \"1\",\n } as HTMLStzhHeadingElement);\n }\n\n if (readspeakerButton) {\n setPropsIfNull(readspeakerButton, {\n variant: \"tertiary-plain\",\n noPaddingLeft: true,\n noPaddingRight: true,\n size: \"small\",\n sizeMedium: \"tiny\",\n buttonAccesskey: \"L\",\n } as HTMLStzhButtonElement);\n }\n\n leads.forEach(lead => {\n setPropsIfNull(lead, {\n lead: true,\n } as HTMLStzhTextElement);\n });\n };\n\n @Watch(\"level\")\n handleLevelChange(level: number) {\n const menuElement = this.element.querySelector(\"stzh-pi-menu\");\n if (menuElement) {\n menuElement.breakout = level >= 3;\n }\n }\n\n async componentDidLoad() {\n this.handleLevelChange(this.level);\n }\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n const menuSlotUsed = hasSlot(this.element, \"menu\");\n const hasArticleInfo = !!this.author \|\| !!this.date;\n\n const classes = {\n \"stzh-pi-pagetitle\": true,\n \"stzh-pi-pagetitle--has-image\": imageSlotUsed,\n \"stzh-pi-pagetitle--has-no-image\": !imageSlotUsed,\n \"stzh-pi-pagetitle--has-lead\": leadSlotUsed,\n \"stzh-pi-pagetitle--has-meta\": readspeakerSlotUsed,\n \"stzh-pi-pagetitle--has-menu\": menuSlotUsed,\n \"stzh-pi-pagetitle--has-article-info\": hasArticleInfo,\n [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,\n };\n\n return (\n <Host has-menu={menuSlotUsed} has-article-info={hasArticleInfo}>\n <div class={classes}>\n <div class=\"stzh-pi-pagetitle__hero-container\">\n <div class=\"stzh-pi-pagetitle__hero\">\n <div class=\"stzh-pi-pagetitle__breadcrumbs\">\n <slot name=\"breadcrumb\"></slot>\n </div>\n\n <div class=\"stzh-pi-pagetitle__meta\">\n <div class=\"stzh-pi-pagetitle__readspeaker\">\n <slot name=\"readspeaker\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pi-pagetitle__dateline\">\n <slot name=\"dateline\"></slot>\n </div>\n\n <div class=\"stzh-pi-pagetitle__heading\">\n <slot name=\"heading\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-pi-pagetitle__image-lead-menu-container\">\n <div class=\"stzh-pi-pagetitle__image-lead-menu\">\n <div class=\"stzh-pi-pagetitle__menu\">\n {menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__menu-inner\">\n <slot name=\"menu\"></slot>\n </div>\n )}\n </div>\n\n <div class=\"stzh-pi-pagetitle__image\">\n {[1, 2].indexOf(this.level) > -1 && (\n <div class=\"stzh-pi-pagetitle__image-wrapper\">\n <stzh-ratio ratio={\"16:9\"} ratioSmall={\"21:9\"} class=\"stzh-pi-pagetitle__ratio\">\n <slot name={\"image\"}></slot>\n </stzh-ratio>\n </div>\n )}\n </div>\n\n {menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n )}\n </div>\n </div>\n\n {!menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__lead-container\">\n <div class=\"stzh-pi-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n </div>\n )}\n\n {hasArticleInfo && (\n <div class=\"stzh-pi-pagetitle__article-info-wrapper\">\n <div class=\"stzh-pi-pagetitle__article-info\">\n {this.author && <p class=\"stzh-pi-pagetitle__author\">{this.author}</p>}\n {this.date && <p class=\"stzh-pi-pagetitle__date\">{this.date}</p>}\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-pi-pagetitle.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,s6xBAAs6xB;;MCmBp7xB,eAAe;;;IAYlB,SAAI,GAAG;MACb,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,6DAA6D,CAAC,CAAC;MAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iDAAiD,CAAC,CAAC;MAC/F,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kCAAkC,CAAC,CAAC;MAEzF,IAAI,OAAO,EAAE;QACX,cAAc,CAAC,OAAO,EAAE;UACtB,KAAK,EAAE,MAAM;UACb,KAAK,EAAE,GAAG;SACe,CAAC,CAAC;OAC9B;MAED,IAAI,iBAAiB,EAAE;QACrB,cAAc,CAAC,iBAAiB,EAAE;UAChC,OAAO,EAAE,gBAAgB;UACzB,aAAa,EAAE,IAAI;UACnB,cAAc,EAAE,IAAI;UACpB,IAAI,EAAE,OAAO;UACb,UAAU,EAAE,MAAM;UAClB,eAAe,EAAE,GAAG;SACI,CAAC,CAAC;OAC7B;MAED,KAAK,CAAC,OAAO,CAAC,IAAI;QAChB,cAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,IAAI;SACY,CAAC,CAAC;OAC3B,CAAC,CAAC;KACJ,CAAC;iBAtC8C,CAAC;kBAGP,EAAE;gBAGJ,EAAE;;EAmC1C,iBAAiB,CAAC,KAAa;IAC7B,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC/D,IAAI,WAAW,EAAE;MACf,WAAW,CAAC,QAAQ,GAAG,KAAK,IAAI,CAAC,CAAC;KACnC;GACF;EAED,MAAM,gBAAgB;IACpB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GACpC;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EAED,MAAM;IACJ,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAEpD,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,8BAA8B,EAAE,aAAa;MAC7C,iCAAiC,EAAE,CAAC,aAAa;MACjD,6BAA6B,EAAE,YAAY;MAC3C,6BAA6B,EAAE,mBAAmB;MAClD,6BAA6B,EAAE,YAAY;MAC3C,qCAAqC,EAAE,cAAc;MACrD,CAAC,4BAA4B,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;KACzD,CAAC;IAEF,QACE,EAAC,IAAI,gBAAW,YAAY,sBAAoB,cAAc,IAC5D,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,mCAAmC,IAC5C,WAAK,KAAK,EAAC,yBAAyB,IAClC,WAAK,KAAK,EAAC,gCAAgC,IACzC,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,EAEN,WAAK,KAAK,EAAC,yBAAyB,IAClC,WAAK,KAAK,EAAC,gCAAgC,IACzC,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,EAEN,WAAK,KAAK,EAAC,6BAA6B,IACtC,YAAM,IAAI,EAAC,UAAU,GAAQ,CACzB,EAEN,WAAK,KAAK,EAAC,4BAA4B,IACrC,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,EACN,WAAK,KAAK,EAAC,8CAA8C,IACvD,WAAK,KAAK,EAAC,oCAAoC,IAC7C,WAAK,KAAK,EAAC,yBAAyB,IACjC,YAAY,KACX,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACP,CACG,EAEN,WAAK,KAAK,EAAC,0BAA0B,IAClC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAC9B,WAAK,KAAK,EAAC,kCAAkC,IAC3C,kBAAY,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAC,0BAA0B,IAC7E,YAAM,IAAI,EAAE,OAAO,GAAS,CACjB,CACT,CACP,CACG,EAEL,YAAY,KACX,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACP,CACG,CACF,EAEL,CAAC,YAAY,KACZ,WAAK,KAAK,EAAC,mCAAmC,IAC5C,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACP,EAEA,cAAc,KACb,WAAK,KAAK,EAAC,yCAAyC,IAClD,WAAK,KAAK,EAAC,iCAAiC,IACzC,IAAI,CAAC,MAAM,IAAI,SAAG,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,MAAM,CAAK,EACrE,IAAI,CAAC,IAAI,IAAI,SAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,IAAI,CAAK,CAC5D,CACF,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;","names":[],"sources":["src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.scss?tag=stzh-pi-pagetitle&encapsulation=scoped","src/components/stzh-pi-pagetitle/stzh-pi-pagetitle.tsx"],"sourcesContent":["/*\n @prop --stzh-pi-pagetitle-hero-background-color: Background color\n * @prop --stzh-pi-pagetitle-lead-background-color: Background of lead section\n /\n\n:host {\n --hero-background-color: var(--stzh-pi-pagetitle-hero-background-color, #{$colorPrimary10});\n --lead-background-color: var(--stzh-pi-pagetitle-lead-background-color, #{$colorPrimary40});\n --grid-template-areas: \"hero hero hero hero\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n\n @include mq($from: medium) {\n --grid-template-areas: \". . hero hero hero hero . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n }\n\n @include mq($from: large) {\n --grid-template-areas: \". . . hero hero hero hero hero hero . . .\" \"image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu image-lead-menu\";\n }\n\n ::slotted([slot=\"dateline\"]) {\n @include fontSize('milli');\n @include font('heavy');\n --color: var(--stzh-color-black80op);\n }\n\n ::slotted([slot=\"heading\"]),\n ::slotted([slot=\"lead\"]) ,\n ::slotted([slot=\"breadcrumb\"]) {\n --color: var(--stzh-color-black);\n }\n\n ::slotted([slot=\"readspeaker\"]) * {\n --color: var(--stzh-color-coolgrey70);\n --hover-color: var(--stzh-color-coolgrey70);\n }\n\n ::slotted([slot=\"menu\"]) {\n --stzh-pi-menu-padding-left: #{$containerMargin};\n\n @include mq($from: small) {\n --stzh-pi-menu-padding-left: #{$containerMarginSmall};\n }\n\n @include mq($from: large) {\n --stzh-pi-menu-padding-left: #{$containerMarginLarge};\n }\n\n @include mq($from: ultra) {\n --stzh-pi-menu-padding-left: calc((100vw - #{$containerMaxWidth}) / 2);\n }\n }\n}\n\n.stzh-pi-pagetitle {\n @include spaceCurve('margin-bottom', 'large');\n\n\n /* Containers /\n\n &__hero-container {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n background-color: var(--hero-background-color);\n @include spaceCurve('padding-top', 'regular');\n @include containerPadding;\n }\n\n &__image-lead-menu-container {\n @include grid;\n grid-template-areas: var(--grid-template-areas);\n background-color: var(--hero-background-color);\n\n @include mq($from: medium) {\n @include containerPadding;\n }\n }\n\n &__lead-container {\n @include grid;\n grid-template-areas: \"lead lead lead lead\";\n background-color: var(--lead-background-color);\n @include containerPadding;\n\n @include mq($from: medium) {\n grid-template-areas: \". . lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . lead lead lead lead lead lead . . .\";\n }\n }\n\n &__image-lead-menu {\n grid-area: image-lead-menu;\n\n @include grid;\n grid-template-areas: \"image image image image\" \"lead lead lead lead\";\n\n @include mq($from: medium) {\n grid-template-areas: \". . image image image image image image\" \"lead lead lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . image image image image image image image image image\" \"lead lead lead lead lead lead lead lead lead lead lead lead\";\n }\n }\n\n / Elements /\n\n &__hero {\n grid-area: hero;\n }\n\n &__menu {\n display: none;\n grid-area: menu;\n }\n\n &__image {\n grid-area: image;\n\n @include mq($from: medium) {\n margin-right: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc((100vw - #{$containerMaxWidth}) / -2)\n }\n }\n\n &__lead {\n --stzh-base-lead-color: #{$headingColor};\n grid-area: lead;\n background-color: var(--lead-background-color);\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n &__text {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n &__meta {\n display: flex;\n flex-direction: column-reverse;\n row-gap: space('xsmall');\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &__readspeaker {\n margin-bottom: space('medium');\n\n @include mq($from: small) {\n margin-bottom: space('large');\n }\n\n @include mq($from: small, $to: medium) {\n --stzh-readspeaker-dropdown-position: relative;\n --stzh-readspeaker-dropdown-top: auto;\n }\n }\n\n\n &__dateline {\n margin-bottom: space('xxsmall');\n\n @include mq($from: medium) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n\n &__breadcrumbs {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n &__heading {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n /\n Menu.\n /\n\n &__menu-inner {\n @include mq($from: medium) {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n }\n\n\n / Article Info /\n &__article-info-wrapper {\n @include container();\n @include spaceCurve('padding-top', 'large');\n @include grid;\n grid-template-areas: \"article-info article-info article-info article-info\";\n\n @include mq($from: medium) {\n grid-template-areas: \". . article-info article-info article-info article-info article-info article-info\";\n }\n\n @include mq($from: large) {\n grid-template-areas: \". . . article-info article-info article-info article-info article-info article-info article-info article-info article-info\";\n }\n }\n\n &__article-info {\n grid-area: article-info;\n }\n\n &__author {\n margin-top: 0;\n margin-bottom: var(--stzh-space-xxsmall);\n color: var(--stzh-color-coolgrey70);\n @include font('heavy');\n @include fontCurve('p1');\n }\n\n &__date {\n margin: 0;\n @include fontCurve('p1');\n }\n\n /\n Has menu.\n /\n &--has-menu &__image-lead-menu {\n grid-template-columns: auto repeat(3, minmax(0, 1fr));\n grid-template-areas: \"menu image image image\" \"menu lead lead lead\";\n\n @include mq($from: medium) {\n grid-template-columns: $gridColumnsMedium;\n grid-template-areas: \"menu menu image image image image image image\" \"menu menu lead lead lead lead lead lead\";\n }\n\n @include mq($from: large) {\n grid-template-columns: $gridColumnsLarge;\n grid-template-areas: \"menu menu menu image image image image image image image image image\" \"menu menu menu lead lead lead lead lead lead lead lead lead\";\n }\n }\n\n &--has-menu &__image-lead-menu-container {\n background-color: var(--stzh-color-coolgrey10);\n }\n\n &--has-menu &__menu {\n position: relative;\n display: inherit;\n margin-right: calc(#{$gridGutter} -1);\n\n @include mq($from: small) {\n margin-right: calc(#{$gridGutterSmall} * -1);\n }\n\n @include mq($from: medium) {\n margin-right: calc(#{$gridGutterMedium} * -1);\n margin-left: -$containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: calc(#{$gridGutterLarge} * -1);\n margin-left: -$containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc(#{$gridGutterUltra} * -1);\n margin-left: calc((100vw - #{$containerMaxWidth}) / -2);\n }\n }\n\n &--has-menu &__lead {\n @include spaceCurve('padding-left', 'regular');\n\n @include mq($from: medium) {\n margin-right: -$containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n margin-right: -$containerMarginLarge;\n padding-right: $containerMarginLarge;\n }\n\n @include mq($from: ultra) {\n margin-right: calc((100vw - #{$containerMaxWidth}) / -2);\n padding-right: calc((100vw - 84.25rem) / 2);\n }\n }\n\n /* Has meta /\n\n &--has-meta &__text {\n @include spaceCurve('padding-top', 'regular');\n }\n\n / Level 3-4 /\n &--level-3,\n &--level-4 {\n --hero-background-color: var(--stzh-color-coolgrey20);\n --lead-background-color: var(--stzh-color-coolgrey30);\n }\n}\n\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n * @slot breadcrumb - Slot for `stzh-link` element\n * @slot menu - Slot for `stzh-link` element\n * @slot dateline - Slot for date or meta information\n /\n@Component({\n tag: \"stzh-pi-pagetitle\",\n styleUrl: \"stzh-pi-pagetitle.scss\",\n scoped: true,\n})\nexport class StzhPiPagetitle {\n /* Level /\n @Prop({ reflect: true }) level: 1 \| 2 \| 3 \| 4 = 1;\n\n /* Author of the content /\n @Prop({ reflect: true }) author: string = \"\";\n\n /* Date of the content */\n @Prop({ reflect: true }) date: string = \"\";\n\n @Element() element: HTMLStzhPiPagetitleElement;\n\n private init = () => {\n const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n\n if (heading) {\n setPropsIfNull(heading, {\n curve: \"hero\",\n level: \"1\",\n } as HTMLStzhHeadingElement);\n }\n\n if (readspeakerButton) {\n setPropsIfNull(readspeakerButton, {\n variant: \"tertiary-plain\",\n noPaddingLeft: true,\n noPaddingRight: true,\n size: \"small\",\n sizeMedium: \"tiny\",\n buttonAccesskey: \"L\",\n } as HTMLStzhButtonElement);\n }\n\n leads.forEach(lead => {\n setPropsIfNull(lead, {\n lead: true,\n } as HTMLStzhTextElement);\n });\n };\n\n @Watch(\"level\")\n handleLevelChange(level: number) {\n const menuElement = this.element.querySelector(\"stzh-pi-menu\");\n if (menuElement) {\n menuElement.breakout = level >= 3;\n }\n }\n\n async componentDidLoad() {\n this.handleLevelChange(this.level);\n }\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const imageSlotUsed = hasSlot(this.element, \"image\");\n const leadSlotUsed = hasSlot(this.element, \"lead\");\n const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n const menuSlotUsed = hasSlot(this.element, \"menu\");\n const hasArticleInfo = !!this.author \|\| !!this.date;\n\n const classes = {\n \"stzh-pi-pagetitle\": true,\n \"stzh-pi-pagetitle--has-image\": imageSlotUsed,\n \"stzh-pi-pagetitle--has-no-image\": !imageSlotUsed,\n \"stzh-pi-pagetitle--has-lead\": leadSlotUsed,\n \"stzh-pi-pagetitle--has-meta\": readspeakerSlotUsed,\n \"stzh-pi-pagetitle--has-menu\": menuSlotUsed,\n \"stzh-pi-pagetitle--has-article-info\": hasArticleInfo,\n [`stzh-pi-pagetitle--level-${this.level}`]: !!this.level,\n };\n\n return (\n <Host has-menu={menuSlotUsed} has-article-info={hasArticleInfo}>\n <div class={classes}>\n <div class=\"stzh-pi-pagetitle__hero-container\">\n <div class=\"stzh-pi-pagetitle__hero\">\n <div class=\"stzh-pi-pagetitle__breadcrumbs\">\n <slot name=\"breadcrumb\"></slot>\n </div>\n\n <div class=\"stzh-pi-pagetitle__meta\">\n <div class=\"stzh-pi-pagetitle__readspeaker\">\n <slot name=\"readspeaker\"></slot>\n </div>\n </div>\n\n <div class=\"stzh-pi-pagetitle__dateline\">\n <slot name=\"dateline\"></slot>\n </div>\n\n <div class=\"stzh-pi-pagetitle__heading\">\n <slot name=\"heading\"></slot>\n </div>\n </div>\n </div>\n <div class=\"stzh-pi-pagetitle__image-lead-menu-container\">\n <div class=\"stzh-pi-pagetitle__image-lead-menu\">\n <div class=\"stzh-pi-pagetitle__menu\">\n {menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__menu-inner\">\n <slot name=\"menu\"></slot>\n </div>\n )}\n </div>\n\n <div class=\"stzh-pi-pagetitle__image\">\n {[1, 2].indexOf(this.level) > -1 && (\n <div class=\"stzh-pi-pagetitle__image-wrapper\">\n <stzh-ratio ratio={\"16:9\"} ratioSmall={\"21:9\"} class=\"stzh-pi-pagetitle__ratio\">\n <slot name={\"image\"}></slot>\n </stzh-ratio>\n </div>\n )}\n </div>\n\n {menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n )}\n </div>\n </div>\n\n {!menuSlotUsed && (\n <div class=\"stzh-pi-pagetitle__lead-container\">\n <div class=\"stzh-pi-pagetitle__lead\">\n <slot name=\"lead\"></slot>\n </div>\n </div>\n )}\n\n {hasArticleInfo && (\n <div class=\"stzh-pi-pagetitle__article-info-wrapper\">\n <div class=\"stzh-pi-pagetitle__article-info\">\n {this.author && <p class=\"stzh-pi-pagetitle__author\">{this.author}</p>}\n {this.date && <p class=\"stzh-pi-pagetitle__date\">{this.date}</p>}\n </div>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-pi-quote.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-pi-quote.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,isKAAisK;;~~MCO3sK~~,WAAW;;;gBAIC,EAAE;;EAEzB,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,kBAAY,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,IAAI,CAAc,CAC5D,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pi-quote/stzh-pi-quote.scss?tag=stzh-pi-quote&encapsulation=scoped","src/components/stzh-pi-quote/stzh-pi-quote.tsx"],"sourcesContent":[":host {\n --background-color: var(--stzh-pi-quote-background-color, #{$colorPrimary30});\n --color: var(--stzh-pi-quote-color, #{$colorPrimary50});\n}\n\n.stzh-pi-quote {\n position: relative;\n background-color: var(--background-color);\n @include spaceCurve('padding-top', medium);\n @include spaceCurve('padding-right', medium);\n @include spaceCurve('padding-bottom', medium);\n @include spaceCurve('padding-left', medium);\n\n @include mq($from: small) {\n padding-left: 87px;\n }\n\n @include mq($from: medium) {\n padding-left: 158px;\n }\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &__text {\n @include fontCurve('h3');\n @include font('heavy');\n margin: 0;\n padding: 0;\n display: flex;\n\n &::before,\n &::after {\n display: block;\n font-size: var(--stzh-font-mega-font-size);\n\n @include mq($from: large) {\n font-size: var(--stzh-font-hero-font-size);\n }\n }\n\n &::before {\n content: '\\00AB';\n color: var(--color);\n display: flex;\n align-items: flex-start;\n padding-right: var(--stzh-space-xsmall);\n line-height: 0;\n padding-top: var(--stzh-space-small);\n }\n\n &::after {\n content: '\\00BB';\n color: var(--color);\n display: flex;\n align-items: flex-end;\n padding-left: var(--stzh-space-xsmall);\n line-height: 0;\n padding-bottom: var(--stzh-space-medium);\n\n @include mq($from: large) {\n padding-bottom: var(--stzh-space-large);\n }\n }\n }\n}\n\n\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n tag: \"stzh-pi-quote\",\n styleUrl: \"stzh-pi-quote.scss\",\n scoped: true,\n})\nexport class StzhPiQuote {\n @Element() element: HTMLStzhListElement;\n\n /* Text for quote */\n @Prop() text: string = \"\";\n\n render() {\n const classes = {\n \"stzh-pi-quote\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <blockquote class=\"stzh-pi-quote__text\">{this.text}</blockquote>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-pi-quote.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,isKAAisK;;MCU3sK,WAAW;;;gBAIC,EAAE;;EAEzB,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;KACtB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,kBAAY,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,IAAI,CAAc,CAC5D,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-pi-quote/stzh-pi-quote.scss?tag=stzh-pi-quote&encapsulation=scoped","src/components/stzh-pi-quote/stzh-pi-quote.tsx"],"sourcesContent":[":host {\n --background-color: var(--stzh-pi-quote-background-color, #{$colorPrimary30});\n --color: var(--stzh-pi-quote-color, #{$colorPrimary50});\n}\n\n.stzh-pi-quote {\n position: relative;\n background-color: var(--background-color);\n @include spaceCurve('padding-top', medium);\n @include spaceCurve('padding-right', medium);\n @include spaceCurve('padding-bottom', medium);\n @include spaceCurve('padding-left', medium);\n\n @include mq($from: small) {\n padding-left: 87px;\n }\n\n @include mq($from: medium) {\n padding-left: 158px;\n }\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &__text {\n @include fontCurve('h3');\n @include font('heavy');\n margin: 0;\n padding: 0;\n display: flex;\n\n &::before,\n &::after {\n display: block;\n font-size: var(--stzh-font-mega-font-size);\n\n @include mq($from: large) {\n font-size: var(--stzh-font-hero-font-size);\n }\n }\n\n &::before {\n content: '\\00AB';\n color: var(--color);\n display: flex;\n align-items: flex-start;\n padding-right: var(--stzh-space-xsmall);\n line-height: 0;\n padding-top: var(--stzh-space-small);\n }\n\n &::after {\n content: '\\00BB';\n color: var(--color);\n display: flex;\n align-items: flex-end;\n padding-left: var(--stzh-space-xsmall);\n line-height: 0;\n padding-bottom: var(--stzh-space-medium);\n\n @include mq($from: large) {\n padding-bottom: var(--stzh-space-large);\n }\n }\n }\n}\n\n\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n/*\n \n /\n@Component({\n tag: \"stzh-pi-quote\",\n styleUrl: \"stzh-pi-quote.scss\",\n scoped: true,\n})\nexport class StzhPiQuote {\n @Element() element: HTMLStzhListElement;\n\n / Text for quote */\n @Prop() text: string = \"\";\n\n render() {\n const classes = {\n \"stzh-pi-quote\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <blockquote class=\"stzh-pi-quote__text\">{this.text}</blockquote>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-progressbar.entry.js CHANGED Viewed

@@ -117,7 +117,7 @@ const StzhProgressbar = class {
     };
     return (h(Host, { style: {
         '--steps': this.currentSteps ? this.currentSteps.toString() : null,
-      } }, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": this.clickDisabled, class: "stzh-progressbar__item" })))))));
+      } }, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": this.clickDisabled, class: "stzh-progressbar__item" }))), h("slot", null)))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/stzh-progressbar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-progressbar.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n @include mq($from: small) {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n }\n}\n\n.stzh-progressbar {\n position: relative;\n\toverflow: hidden;\n\n &__items {\n display: flex;\n flex-wrap: nowrap;\n }\n\n &__item {\n /* flex the bullets to always have the same size /\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-progressbar\",\n styleUrl: \"stzh-progressbar.scss\",\n scoped: true\n})\nexport class StzhProgressbar {\n /* Translation strings /\n @Prop() localization: StzhProgressbarLocalizedText;\n\n /\n Step data (JSON array with objects that have `label` attribute and optional:\n * - `disabled`, if step should be disabled\n * - `icon`, if icon instead of step number should be displayed):\n * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n \n ```\n * {\n * \"label\": \"Step Label\"\n * \"icon\": \"clock\",\n * \"disabled\": true\n * }\n * ```\n /\n @Prop() data: StzhProgressbarDataItem[] \| string = [];\n private _data: StzhProgressbarDataItem[];\n\n /* Index of the item that be active /\n @Prop() index: number = 0;\n\n /* Number of steps to show below small breakpoint /\n @Prop() steps: number = 5;\n\n /* Number of steps to show above small breakpoint /\n @Prop() stepsSmall: number = 6;\n\n /* Number of steps to show above medium breakpoint /\n @Prop() stepsMedium: number = 0;\n\n /* Number of steps to show above large breakpoint /\n @Prop() stepsLarge: number = 0;\n\n /* Number of steps to show above ultra breakpoint /\n @Prop() stepsUltra: number = 0;\n\n /\n Whether all the progressbar-items are clickable.\n /\n @Prop() clickDisabled: boolean = false;\n\n @State() currentSteps: number;\n\n @Element() element: HTMLStzhProgressbarElement;\n\n /\n Return infos about rendered progressbar items.\n * Array of objects including: hide (whether step is hidden)\n * / passed (whether step has been passed)\n * / current (whether step is currently active)\n * / dotted (whether step has dotted style active)\n * / first\|last (whether step is first or last)\n * / label\n */\n @Method()\n async getItemData() {\n return this._data.map((step, index) => {\n return {\n ...step,\n ...this.getItemAttributes(index)\n }\n });\n }\n\n @Watch(\"steps\")\n @Watch(\"stepsSmall\")\n @Watch(\"stepsMedium\")\n @Watch(\"stepsLarge\")\n @Watch(\"stepsUltra\")\n stepsWatcher() {\n this.setCurrentSteps();\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n }\n else {\n this._data = newValue;\n }\n\n this.lastItemIndex = this._data.length - 1;\n this.maxStepIndex = this.currentSteps - 1;\n this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n }\n\n private lastItemIndex: number;\n private maxStepIndex: number;\n private withinLastFewSteps: boolean;\n\n private getItemAttributes(itemIndex: number): any {\n const item = {} as HTMLStzhProgressbarItemElement;\n\n item.step = itemIndex + 1;\n item.first = itemIndex === 0;\n item.last = itemIndex === this.lastItemIndex;\n item.current = itemIndex === this.index;\n item.passed = itemIndex < this.index;\n\n // hide overflowings if more items than max steps in DOM\n if (this._data.length > this.currentSteps) {\n // add dots to last item if current index is below the last few items\n if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n item.dotted = true;\n }\n\n if (this.index < 2) {\n // hide overflowing items on the right\n item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n } else {\n // add dots to first item if current item is third or above\n if (itemIndex === 0) {\n item.dotted = true;\n }\n\n let substract = this.index;\n\n // if is within the last elements, calculate how much previous\n // should be shown to stay on 5 visible elements\n if (this.withinLastFewSteps) {\n substract = this._data.length - this.maxStepIndex;\n }\n\n // hide overflowing items on left and right side\n item.hide = itemIndex > 0 && itemIndex < substract\n \|\| itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n }\n }\n\n return item;\n }\n\n private setCurrentSteps = () => {\n if (media(\"ultra\").matches && this.stepsUltra) {\n this.currentSteps = this.stepsUltra;\n } else if (media(\"large\").matches && this.stepsLarge) {\n this.currentSteps = this.stepsLarge;\n } else if (media(\"medium\").matches && this.stepsMedium) {\n this.currentSteps = this.stepsMedium;\n } else if (media(\"small\").matches && this.stepsSmall) {\n this.currentSteps = this.stepsSmall;\n } else {\n this.currentSteps = this.steps;\n }\n }\n\n async componentWillLoad() {\n this.dataWatcher(this.data);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n }\n }\n\n connectedCallback() {\n this.setCurrentSteps();\n addMediaChangeListener(this.setCurrentSteps);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.setCurrentSteps);\n }\n\n render() {\n const classes = {\n \"stzh-progressbar\": true,\n [`stzh-progressbar--index-${this.index}`]: !!this.index\n };\n\n return (\n <Host\n style={{\n '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n }}\n >\n <div class={classes}>\n <div\n class=\"stzh-progressbar__items\"\n role=\"list\"\n aria-label={this.localization.label}\n >\n {this._data.map((step, index) =>\n <stzh-progressbar-item\n {...this.getItemAttributes(index)}\n icon={step.icon}\n disabled={step.disabled}\n label={step.label}\n click-disabled={this.clickDisabled}\n class=\"stzh-progressbar__item\"\n ></stzh-progressbar-item>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-progressbar.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n @include mq($from: small) {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n }\n}\n\n.stzh-progressbar {\n position: relative;\n\toverflow: hidden;\n\n &__items {\n display: flex;\n flex-wrap: nowrap;\n }\n\n &__item {\n /* flex the bullets to always have the same size /\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-progressbar\",\n styleUrl: \"stzh-progressbar.scss\",\n scoped: true\n})\nexport class StzhProgressbar {\n /* Translation strings /\n @Prop() localization: StzhProgressbarLocalizedText;\n\n /\n Step data (JSON array with objects that have `label` attribute and optional:\n * - `disabled`, if step should be disabled\n * - `icon`, if icon instead of step number should be displayed):\n * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n \n ```\n * {\n * \"label\": \"Step Label\"\n * \"icon\": \"clock\",\n * \"disabled\": true\n * }\n * ```\n /\n @Prop() data: StzhProgressbarDataItem[] \| string = [];\n private _data: StzhProgressbarDataItem[];\n\n /* Index of the item that be active /\n @Prop() index: number = 0;\n\n /* Number of steps to show below small breakpoint /\n @Prop() steps: number = 5;\n\n /* Number of steps to show above small breakpoint /\n @Prop() stepsSmall: number = 6;\n\n /* Number of steps to show above medium breakpoint /\n @Prop() stepsMedium: number = 0;\n\n /* Number of steps to show above large breakpoint /\n @Prop() stepsLarge: number = 0;\n\n /* Number of steps to show above ultra breakpoint /\n @Prop() stepsUltra: number = 0;\n\n /\n Whether all the progressbar-items are clickable.\n /\n @Prop() clickDisabled: boolean = false;\n\n @State() currentSteps: number;\n\n @Element() element: HTMLStzhProgressbarElement;\n\n /\n Return infos about rendered progressbar items.\n * Array of objects including: hide (whether step is hidden)\n * / passed (whether step has been passed)\n * / current (whether step is currently active)\n * / dotted (whether step has dotted style active)\n * / first\|last (whether step is first or last)\n * / label\n */\n @Method()\n async getItemData() {\n return this._data.map((step, index) => {\n return {\n ...step,\n ...this.getItemAttributes(index)\n }\n });\n }\n\n @Watch(\"steps\")\n @Watch(\"stepsSmall\")\n @Watch(\"stepsMedium\")\n @Watch(\"stepsLarge\")\n @Watch(\"stepsUltra\")\n stepsWatcher() {\n this.setCurrentSteps();\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n }\n else {\n this._data = newValue;\n }\n\n this.lastItemIndex = this._data.length - 1;\n this.maxStepIndex = this.currentSteps - 1;\n this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n }\n\n private lastItemIndex: number;\n private maxStepIndex: number;\n private withinLastFewSteps: boolean;\n\n private getItemAttributes(itemIndex: number): any {\n const item = {} as HTMLStzhProgressbarItemElement;\n\n item.step = itemIndex + 1;\n item.first = itemIndex === 0;\n item.last = itemIndex === this.lastItemIndex;\n item.current = itemIndex === this.index;\n item.passed = itemIndex < this.index;\n\n // hide overflowings if more items than max steps in DOM\n if (this._data.length > this.currentSteps) {\n // add dots to last item if current index is below the last few items\n if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n item.dotted = true;\n }\n\n if (this.index < 2) {\n // hide overflowing items on the right\n item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n } else {\n // add dots to first item if current item is third or above\n if (itemIndex === 0) {\n item.dotted = true;\n }\n\n let substract = this.index;\n\n // if is within the last elements, calculate how much previous\n // should be shown to stay on 5 visible elements\n if (this.withinLastFewSteps) {\n substract = this._data.length - this.maxStepIndex;\n }\n\n // hide overflowing items on left and right side\n item.hide = itemIndex > 0 && itemIndex < substract\n \|\| itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n }\n }\n\n return item;\n }\n\n private setCurrentSteps = () => {\n if (media(\"ultra\").matches && this.stepsUltra) {\n this.currentSteps = this.stepsUltra;\n } else if (media(\"large\").matches && this.stepsLarge) {\n this.currentSteps = this.stepsLarge;\n } else if (media(\"medium\").matches && this.stepsMedium) {\n this.currentSteps = this.stepsMedium;\n } else if (media(\"small\").matches && this.stepsSmall) {\n this.currentSteps = this.stepsSmall;\n } else {\n this.currentSteps = this.steps;\n }\n }\n\n async componentWillLoad() {\n this.dataWatcher(this.data);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n }\n }\n\n connectedCallback() {\n this.setCurrentSteps();\n addMediaChangeListener(this.setCurrentSteps);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.setCurrentSteps);\n }\n\n render() {\n const classes = {\n \"stzh-progressbar\": true,\n [`stzh-progressbar--index-${this.index}`]: !!this.index\n };\n\n return (\n <Host\n style={{\n '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n }}\n >\n <div class={classes}>\n <div\n class=\"stzh-progressbar__items\"\n role=\"list\"\n aria-label={this.localization.label}\n >\n {this._data.map((step, index) =>\n <stzh-progressbar-item\n {...this.getItemAttributes(index)}\n icon={step.icon}\n disabled={step.disabled}\n label={step.label}\n click-disabled={this.clickDisabled}\n class=\"stzh-progressbar__item\"\n ></stzh-progressbar-item>\n )}\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}