npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta4 → 3.0.0-beta5 - Mend

@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

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

package/dist/components/stzh-datalist-item2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datalist-item2.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n --value-font-family: var(--stzh-font-family-medium);\n --value-font-weight: var(--stzh-font-weight-medium);\n --value-color: inherit;\n --action-display: flex;\n // --label-min-width: var(--item-label-min-width, none);\n // --leading-icon-background-color: transparent;\n --leading-icon-color: #{$colorGrey90};\n --nested-display: var(--stzh-datalist-item-nested-display, block);\n\n // --hover-leading-icon-background-color: var(--leading-icon-background-color);\n // --hover-leading-icon-color: var(--leading-icon-color);\n\n // --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --value-color: #{$linkColor};\n --value-hover-color: #{$linkHoverColor};\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n display: contents;\n\n &__nested {\n display: contents;\n }\n\n &__nested-inner {\n display: var(--nested-display);\n grid-column: var(--full-grid-column);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: grid;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n text-align: left;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n // background-color: var(--leading-icon-background-color);\n // display: flex;\n // justify-content: center;\n // align-items: center;\n // border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value-wrapper {\n display: flex;\n align-items: center;\n gap: space('xsmall');\n color: var(--value-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__value {\n flex-grow: 1;\n flex-direction: column;\n }\n\n &__value-text {\n --color: initial;\n\n @include fontCurve('p1');\n font-family: var(--value-font-family);\n font-weight: var(--value-font-weight);\n width: auto;\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__meta-text {\n display: flex;\n gap: space('xsmall');\n color: $colorGrey70;\n }\n\n &__label {\n color: $colorGrey90;\n }\n\n &__label-icon {\n\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n }\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n /* Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive &__value-text {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__value-wrapper {\n color: var(--value-hover-color);\n }\n\n // &--is-interactive:hover &__leading-icon-container,\n // &--is-interactive:focus-within &__leading-icon-container {\n // color: var(--hover-leading-icon-color);\n // background-color: var(--hover-leading-icon-background-color);\n // }\n\n / Vertical Variant /\n\n &--direction-vertical &__leading,\n &--direction-vertical &__wrapper,\n &--direction-vertical &__action-list {\n &:not(:empty) {\n @include spaceCurve('padding-top', 'tiny');\n @include spaceCurve('padding-bottom', 'tiny');\n }\n }\n\n // &--direction-vertical &__leading-icon-container {\n // width: 40px;\n // height: 40px;\n // }\n\n // &--direction-vertical &__leading-icon {\n // --size: #{iconSize('medium')};\n // }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n align-items: flex-start;\n }\n\n / Horizontal / Table Variant /\n\n // &--direction-horizontal &__leading,\n // &--direction-horizontal &__value,\n // // &--direction-horizontal &__label,\n // &--direction-horizontal &__meta,\n // &--direction-horizontal &__action-list {\n // min-height: var(--horizontal-min-height);\n // }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n // &--direction-horizontal &__label,\n &--direction-horizontal &__action-list {\n &:not(:empty) {\n @include spaceCurve('padding-top', 'tiny');\n @include spaceCurve('padding-bottom', 'tiny');\n }\n }\n\n &--direction-horizontal &__meta {\n @include spaceCurve('padding-bottom', 'tiny');\n padding-top: calc(#{spaceCurveValue('tiny')} + 12px);\n\n @include mq($from: medium) {\n padding-top: calc(#{spaceCurveValue('tiny', 'medium')} + 12px);\n }\n\n @include mq($from: large) {\n padding-top: calc(#{spaceCurveValue('tiny', 'large')} + 12px);\n }\n }\n\n // &--direction-horizontal &__label {\n // &:not(:empty) {\n // min-width: var(--label-min-width);\n // padding-right: space('xsmall');\n // }\n // }\n\n // &--direction-horizontal &__label:not(:empty) + &__value {\n // &:not(:empty) {\n // padding-left: space('xsmall');\n // }\n // }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n // &--direction-horizontal &__leading-icon-container {\n // width: 24px;\n // height: 24px;\n // }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n\n /* Table Variant /\n\n &--table &__label,\n &--table &__meta {\n @include fontSize('nano');\n }\n\n &--table &__label {\n color: $colorGrey70;\n }\n\n &--table &__value-text {\n @include fontSize('milli');\n }\n\n &--table &__leading,\n &--table &__value,\n &--table &__label,\n &--table &__meta,\n &--table &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('small');\n }\n }\n\n &--table &__label:not(:empty) + &__value {\n padding-left: space('medium');\n }\n\n &--table &__meta {\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistVariantChangeEvent,\n StzhDatalistVariant,\n StzhDatalistDirection,\n StzhStatusType\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation) /\n @Prop() icon: string;\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Href of action button /\n @Prop() iconHref: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Meta /\n @Prop({ reflect: true }) meta: string \| string[] = \"\";\n private _meta: string[] = [];\n\n /* Status Label /\n @Prop({ reflect: true }) statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: StzhStatusType = \"default\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Item action click event /\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (ex) {\n this._meta = newValue === \"\" ? [] : [newValue];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"href\")\n hrefWatcher() {\n this.isPhone = this.href && (this.href.startsWith(\"tel:\") \|\| this.href.startsWith(\"fax:\"));\n }\n\n @State() direction: StzhDatalistDirection = \"vertical\";\n @State() variant: StzhDatalistVariant = \"default\";\n\n private external: boolean = false;\n private isPhone: boolean = false;\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private actionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n this.variant = event.detail.value;\n }\n\n private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Fragment>\n {this.variant === \"table\" &&\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.label}\n </Item>\n }\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n >\n {this.variant === \"default\" &&\n <div class=\"stzh-datalist-item__label\">{this.label}</div>\n }\n\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n <div class=\"stzh-datalist-item__value-wrapper\">\n {this.value\n ?\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n :\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n <slot name=\"value\"></slot>\n </stzh-text>\n }\n\n {(this.href \|\| this.icon) && !hasActionButton && !isButton &&\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n ? this.icon\n : (this.isPhone\n ? \"phone\"\n : (this.external && \"external-link\")\n )}\n ></stzh-icon>\n </div>\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n </div>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this._meta.length > 0 ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this._meta.length > 0 &&\n <span class=\"stzh-datalist-item__meta-text\">\n {this._meta.map((meta, index) =>\n <Fragment>\n <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n {index + 1 !== this._meta.length &&\n <span class=\"stzh-datalist-item__meta-separator\">\|</span>\n }\n </Fragment>\n )}\n </span>\n }\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async componentDidLoad() {\n // execute connectedCallbck again, because sometimes has problem rendering\n this.connectedCallback();\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.metaWatcher(this.meta);\n this.externalWatcher();\n this.hrefWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.variant = this.datalist.variant;\n this.direction = await this.datalist.getCurrentDirection();\n\n this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.datalist = null;\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !!((!this.href \|\| this.iconHref \|\| this.iconTooltip) && this.icon);\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n [`stzh-datalist-item--${this.variant}`]: !!this.variant\n };\n\n let ActionItem = isButton\n ? \"button\"\n : (hasActionButton\n ? \"div\"\n : \"a\"\n );\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"small\"\n aria-label={this.iconLabel}\n iconOnly={true}\n href={this.iconHref}\n icon={this.icon}\n onClick={this.actionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" \|\| this.variant === \"table\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton, hasActionButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton, hasActionButton)}\n </div>\n </Fragment>\n }\n <ActionItem\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href && !this.iconHref\n }}\n href={!this.iconHref ? this.href : null}\n rel={!this.iconHref ? this.rel : null}\n target={!this.iconHref ? this.target : null}\n download={!this.iconHref ? this.download : null}\n >\n {/ {this.href && !this.iconHref &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n } /}\n\n {/ {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n } */}\n\n {hasActionButton &&\n (\n this.iconTooltip\n ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton()\n )\n }\n </ActionItem>\n\n <div class=\"stzh-datalist-item__spacer\"></div>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datalist-item2.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n --value-font-family: var(--stzh-font-family-medium);\n --value-font-weight: var(--stzh-font-weight-medium);\n --value-color: inherit;\n --action-display: flex;\n // --label-min-width: var(--item-label-min-width, none);\n // --leading-icon-background-color: transparent;\n --leading-icon-color: #{$colorGrey90};\n --nested-display: var(--stzh-datalist-item-nested-display, block);\n --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n // --hover-leading-icon-background-color: var(--leading-icon-background-color);\n // --hover-leading-icon-color: var(--leading-icon-color);\n\n // --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --value-color: #{$linkColor};\n --value-hover-color: #{$linkHoverColor};\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n display: var(--wrapper-display);\n align-items: center;\n\n &__nested {\n display: contents;\n }\n\n &__nested-inner {\n display: var(--nested-display);\n grid-column: var(--full-grid-column);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: grid;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n text-align: left;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n // background-color: var(--leading-icon-background-color);\n // display: flex;\n // justify-content: center;\n // align-items: center;\n // border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value-wrapper {\n display: flex;\n align-items: center;\n gap: space('xsmall');\n color: var(--value-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__value {\n flex-grow: 1;\n flex-direction: column;\n }\n\n &__value-text {\n --color: initial;\n\n @include fontCurve('p1');\n font-family: var(--value-font-family);\n font-weight: var(--value-font-weight);\n width: auto;\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__meta-text {\n display: flex;\n gap: space('xsmall');\n color: $colorGrey70;\n }\n\n &__label {\n color: $colorGrey90;\n }\n\n &__label-icon {\n\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n }\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n /* Button variant /\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n / Interactive variant /\n\n &--is-interactive &__value-text {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__value-wrapper {\n color: var(--value-hover-color);\n }\n\n // &--is-interactive:hover &__leading-icon-container,\n // &--is-interactive:focus-within &__leading-icon-container {\n // color: var(--hover-leading-icon-color);\n // background-color: var(--hover-leading-icon-background-color);\n // }\n\n / Vertical Variant /\n\n &--direction-vertical &__leading,\n &--direction-vertical &__wrapper,\n &--direction-vertical &__action-list {\n &:not(:empty) {\n @include spaceCurve('padding-top', 'tiny');\n @include spaceCurve('padding-bottom', 'tiny');\n }\n }\n\n // &--direction-vertical &__leading-icon-container {\n // width: 40px;\n // height: 40px;\n // }\n\n // &--direction-vertical &__leading-icon {\n // --size: #{iconSize('medium')};\n // }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n align-items: flex-start;\n }\n\n / Horizontal / Table Variant /\n\n // &--direction-horizontal &__leading,\n // &--direction-horizontal &__value,\n // // &--direction-horizontal &__label,\n // &--direction-horizontal &__meta,\n // &--direction-horizontal &__action-list {\n // min-height: var(--horizontal-min-height);\n // }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n // &--direction-horizontal &__label,\n &--direction-horizontal &__action-list {\n &:not(:empty) {\n @include spaceCurve('padding-top', 'tiny');\n @include spaceCurve('padding-bottom', 'tiny');\n }\n }\n\n &--direction-horizontal &__meta {\n @include spaceCurve('padding-bottom', 'tiny');\n padding-top: calc(#{spaceCurveValue('tiny')} + 12px);\n\n @include mq($from: medium) {\n padding-top: calc(#{spaceCurveValue('tiny', 'medium')} + 12px);\n }\n\n @include mq($from: large) {\n padding-top: calc(#{spaceCurveValue('tiny', 'large')} + 12px);\n }\n }\n\n // &--direction-horizontal &__label {\n // &:not(:empty) {\n // min-width: var(--label-min-width);\n // padding-right: space('xsmall');\n // }\n // }\n\n // &--direction-horizontal &__label:not(:empty) + &__value {\n // &:not(:empty) {\n // padding-left: space('xsmall');\n // }\n // }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n // &--direction-horizontal &__leading-icon-container {\n // width: 24px;\n // height: 24px;\n // }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n\n /* Table Variant /\n\n &--table &__label,\n &--table &__meta {\n @include fontSize('nano');\n }\n\n &--table &__label {\n color: $colorGrey70;\n }\n\n &--table &__value-text {\n @include fontSize('milli');\n }\n\n &--table &__leading,\n &--table &__value,\n &--table &__label,\n &--table &__meta,\n &--table &__action-list {\n &:not(:empty) {\n padding-top: space('xsmall');\n padding-bottom: space('small');\n }\n }\n\n &--table &__label:not(:empty) + &__value {\n padding-left: space('medium');\n }\n\n &--table &__meta {\n &:not(:empty) {\n padding-left: space('medium');\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistVariantChangeEvent,\n StzhDatalistVariant,\n StzhDatalistDirection,\n StzhStatusType,\n StzhDatalistItemClickEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/\n @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n /\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Link /\n @Prop({ reflect: true }) href: string;\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* Leading icon /\n @Prop() leadingIcon: string;\n\n /* Icon of action button (if href is used, will only be for presentation) /\n @Prop() icon: string;\n\n /* Icon position /\n @Prop() iconPosition: \"left\" \| \"right\" = \"right\";\n\n /* Overwrite aria-label of action button (default aria label is `label` and `value`). /\n @Prop() iconLabel: string;\n\n /* Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. /\n @Prop() iconTooltip: string;\n\n /* Href of action button /\n @Prop() iconHref: string;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Value (or use value slot instead) /\n @Prop() value: string = \"\";\n\n /* Meta /\n @Prop({ reflect: true }) meta: string \| string[] = \"\";\n private _meta: string[] = [];\n\n /* Status Label /\n @Prop({ reflect: true }) statusLabel: string = \"\";\n\n /* Status Type /\n @Prop() statusType: StzhStatusType = \"default\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Item action click event /\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n /* Item click event /\n @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"meta\")\n metaWatcher(newValue: string[] \| string) {\n if (typeof newValue === \"string\") {\n try {\n this._meta = JSON.parse(newValue);\n } catch (ex) {\n this._meta = newValue === \"\" ? [] : [newValue];\n }\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"href\")\n hrefWatcher() {\n this.isPhone = this.href && (this.href.startsWith(\"tel:\") \|\| this.href.startsWith(\"fax:\"));\n }\n\n @State() direction: StzhDatalistDirection = \"vertical\";\n @State() variant: StzhDatalistVariant = \"default\";\n\n private external: boolean = false;\n private isPhone: boolean = false;\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private onActionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent: event,\n href: this.href\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n this.variant = event.detail.value;\n }\n\n private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const Icon = () => (\n <Fragment>\n {(this.href \|\| this.icon) && !hasActionButton && !isButton &&\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n ? this.icon\n : (this.isPhone\n ? \"phone\"\n : (this.external && \"external-link\")\n )}\n ></stzh-icon>\n </div>\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__label-icon\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n </Fragment>\n );\n\n return (\n <Fragment>\n {this.variant === \"table\" &&\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.label}\n </Item>\n }\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls \|\| null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n onClick={this.onClick}\n >\n {this.variant === \"default\" &&\n <div class=\"stzh-datalist-item__label\">{this.label}</div>\n }\n\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n <div class=\"stzh-datalist-item__value-wrapper\">\n {this.iconPosition === \"left\" && <Icon></Icon>}\n {this.value\n ?\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n :\n <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n <slot name=\"value\"></slot>\n </stzh-text>\n }\n {this.iconPosition === \"right\" && <Icon></Icon>}\n </div>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel \|\| this._meta.length > 0 ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this._meta.length > 0 &&\n <span class=\"stzh-datalist-item__meta-text\">\n {this._meta.map((meta, index) =>\n <Fragment>\n <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n {index + 1 !== this._meta.length &&\n <span class=\"stzh-datalist-item__meta-separator\">\|</span>\n }\n </Fragment>\n )}\n </span>\n }\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n onClick={this.onClick}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async componentDidLoad() {\n // execute connectedCallbck again, because sometimes has problem rendering\n this.connectedCallback();\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.metaWatcher(this.meta);\n this.externalWatcher();\n this.hrefWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.variant = this.datalist.variant;\n this.direction = await this.datalist.getCurrentDirection();\n\n this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.datalist = null;\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n \|\| typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !!((!this.href \|\| this.iconHref \|\| this.iconTooltip) && this.icon);\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href \|\| isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n [`stzh-datalist-item--${this.variant}`]: !!this.variant\n };\n\n let ActionItem = isButton\n ? \"button\"\n : (hasActionButton\n ? \"div\"\n : \"a\"\n );\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"small\"\n aria-label={this.iconLabel}\n iconOnly={true}\n href={this.iconHref}\n icon={this.icon}\n onClick={this.onActionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" \|\| this.variant === \"table\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton, hasActionButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton, hasActionButton)}\n </div>\n </Fragment>\n }\n <ActionItem\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href && !this.iconHref\n }}\n href={!this.iconHref ? this.href : null}\n rel={!this.iconHref ? this.rel : null}\n target={!this.iconHref ? this.target : null}\n download={!this.iconHref ? this.download : null}\n >\n {/ {this.href && !this.iconHref &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n } /}\n\n {/ {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n } */}\n\n {hasActionButton &&\n (\n this.iconTooltip\n ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton()\n )\n }\n </ActionItem>\n\n <div class=\"stzh-datalist-item__spacer\"></div>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-datalist2.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './stzh-status2.js';
 import { d as defineCustomElement$2 } from './stzh-text2.js';
 import { d as defineCustomElement$1 } from './stzh-tooltip2.js';
-const stzhDatalistCss = ".sc-stzh-datalist-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--columns:1;--columns-gap:var(--stzh-grid-gutter);--list-display:grid;--list-margin-right:calc(var(--columns-gap) / -1);--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));--full-grid-column:1 / 5;--nested-margin-left:var(--stzh-datalist-nested-margin-left, 0px);--details-content-width:var(--stzh-datalist-details-content-width, 100%);--grid-template-areas:var(\n    --stzh-datalist-grid-template-areas,\n    \"list list list list\"\n  );--grid-template-columns:var(\n    --stzh-datalist-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  );margin-left:var(--nested-margin-left)}@media screen and (min-width: 600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-small);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n    )}}@media screen and (min-width: 900px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-medium);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list list list list list\"\n    );--grid-template-columns:var(\n      --stzh-datalist-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-ultra)}}.sc-stzh-datalist-h .sc-stzh-datalist-s>*:not([class*=cq-]){display:contents}[is-direction=horizontal].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 6}[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}[variant=table].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 7}[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}.sc-stzh-datalist-h:has([class*=cq-]){--list-display:block;--list-margin-right:0}.stzh-datalist.sc-stzh-datalist{--stzh-datalist-nested-margin-left:var(--stzh-space-large);--stzh-details-content-grid-column:var(--full-grid-column);--stzh-details-content-padding-right:var(--columns-gap);--stzh-details-content-width:var(--details-content-width);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-datalist__wrapper.sc-stzh-datalist{grid-area:list;overflow:visible}.stzh-datalist__list.sc-stzh-datalist{display:var(--list-display);border-collapse:collapse;grid-template-columns:var(--list-grid-template-columns);align-items:stretch;margin-right:var(--list-margin-right)}.stzh-datalist--has-multiple-columns.sc-stzh-datalist{--stzh-datalist-item-nested-display:none}";
+const stzhDatalistCss = ".sc-stzh-datalist-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--columns:1;--columns-gap:var(--stzh-grid-gutter);--list-display:grid;--list-margin-right:calc(var(--columns-gap) / -1);--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));--full-grid-column:1 / 5;--nested-margin-left:var(--stzh-datalist-nested-margin-left, 0px);--details-content-width:var(--stzh-datalist-details-content-width, 100%);--grid-template-areas:var(\n    --stzh-datalist-grid-template-areas,\n    \"list list list list\"\n  );--grid-template-columns:var(\n    --stzh-datalist-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  );margin-left:var(--nested-margin-left)}@media screen and (min-width: 600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-small);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n    )}}@media screen and (min-width: 900px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-medium);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list list list list list\"\n    );--grid-template-columns:var(\n      --stzh-datalist-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-ultra)}}.sc-stzh-datalist-h .sc-stzh-datalist-s>.layout_column>*:not([class*=cq-]),.sc-stzh-datalist-h .sc-stzh-datalist-s>*:not([class*=cq-]){display:contents}[is-direction=horizontal].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 6}[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}[variant=table].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 7}[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}.sc-stzh-datalist-h:has([class*=cq-]){--stzh-datalist-item-wrapper-display:flex;--list-display:block;--list-margin-right:0}.stzh-datalist.sc-stzh-datalist{--stzh-datalist-nested-margin-left:var(--stzh-space-large);--stzh-details-content-grid-column:var(--full-grid-column);--stzh-details-content-padding-right:var(--columns-gap);--stzh-details-content-width:var(--details-content-width);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-datalist.sc-stzh-datalist{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-datalist__wrapper.sc-stzh-datalist{grid-area:list;overflow:visible}.stzh-datalist__list.sc-stzh-datalist{display:var(--list-display);border-collapse:collapse;grid-template-columns:var(--list-grid-template-columns);align-items:stretch;margin-right:var(--list-margin-right)}.stzh-datalist--has-multiple-columns.sc-stzh-datalist{--stzh-datalist-item-nested-display:none}";
 const StzhDatalist = /*@__PURE__*/ proxyCustomElement(class StzhDatalist extends HTMLElement {
   constructor() {

package/dist/components/stzh-datalist2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datalist2.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\n // @prop --item-label-min-width: Min width of label\n // --item-label-min-width: 120px;\n --columns: 1;\n --columns-gap: #{$gridGutter};\n --list-display: grid;\n --list-margin-right: calc(var(--columns-gap) / -1);\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n --full-grid-column: 1 / 5;\n --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumns}\n );\n\n margin-left: var(--nested-margin-left);\n\n @include mq($from: small) {\n --columns-gap: #{$gridGutterSmall};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n }\n\n @include mq($from: medium) {\n --columns-gap: #{$gridGutterMedium};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --columns-gap: #{$gridGutterLarge};\n }\n\n @include mq($from: ultra) {\n --columns-gap: #{$gridGutterUltra};\n }\n\n // @include mq($from: medium) { // was smallheader before\n // --item-label-min-width: 144px;\n // }\n\n // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n // --item-label-min-width: none;\n // }\n\n // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n ::slotted(:not([class=\"cq-\"])) {\n display: contents;\n }\n\n &[is-direction=\"horizontal\"] {\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n --full-grid-column: 1 / 6;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n --full-grid-column: 1 / 7;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks /\n\n:host(:has([class=\"cq-\"])) {\n --list-display: block;\n --list-margin-right: 0;\n}\n\n.stzh-datalist {\n // offset margin of nested datalist\n --stzh-datalist-nested-margin-left: #{space('large')};\n // details grid columns\n --stzh-details-content-grid-column: var(--full-grid-column);\n --stzh-details-content-padding-right: var(--columns-gap);\n --stzh-details-content-width: var(--details-content-width);\n\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: list;\n overflow: visible;\n }\n\n &__list {\n display: var(--list-display);\n border-collapse: collapse;\n grid-template-columns: var(--list-grid-template-columns);\n align-items: stretch;\n margin-right: var(--list-margin-right);\n }\n\n /* Multiple Columns /\n\n &--has-multiple-columns {\n // display of nested datalist\n --stzh-datalist-item-nested-display: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Watch,\n Prop,\n Event,\n EventEmitter,\n State,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemEntry,\n StzhDatalistDirection,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/\n /\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true\n})\nexport class StzhDatalist {\n /** Variant /\n @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n \n /* Columns /\n @Prop({ reflect: true }) columns: number = 1;\n\n /* Columns above small breakpoint /\n @Prop({ reflect: true }) columnsSmall: number;\n\n /* Columns above medium breakpoint /\n @Prop({ reflect: true }) columnsMedium: number;\n\n /* Columns above large breakpoint /\n @Prop({ reflect: true }) columnsLarge: number;\n\n /* Columns above ultra breakpoint /\n @Prop({ reflect: true }) columnsUltra: number;\n\n /* Direction /\n @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n /* Direction above small breakpoint /\n @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n /* Direction above medium breakpoint /\n @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n /* Direction above large breakpoint /\n @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n /* Direction above ultra breakpoint /\n @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n /\n Whether to disable min-width of datalist item label for the `horizontal` variant.\n \n If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n \n You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n /\n // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n /\n @Prop() items: StzhDatalistItemEntry[] \| string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n /* Variant attribute change event /\n @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n /* Direction attribute change event /\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.setCurrentDirection();\n }\n\n @Watch(\"columns\")\n @Watch(\"columnsSmall\")\n @Watch(\"columnsMedium\")\n @Watch(\"columnsLarge\")\n @Watch(\"columnsUltra\")\n columnsWatcher() {\n this.setCurrentColumns();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: StzhDatalistDirection) {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhDatalistVariant) {\n this.stzhVariantChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n /* Get current direction */\n @Method()\n async getCurrentDirection() {\n return this.currentDirection;\n }\n\n @State() currentColumns: number = 1;\n @State() currentDirection: StzhDatalistDirection;\n\n private setCurrentDirection = () => {\n if (media(\"ultra\").matches && this.directionUltra) {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge) {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium) {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall) {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n }\n\n private setCurrentColumns = () => {\n if (media(\"ultra\").matches && this.columnsUltra) {\n this.currentColumns = this.columnsUltra;\n } else if (media(\"large\").matches && this.columnsLarge) {\n this.currentColumns = this.columnsLarge;\n } else if (media(\"medium\").matches && this.columnsMedium) {\n this.currentColumns = this.columnsMedium;\n } else if (media(\"small\").matches && this.columnsSmall) {\n this.currentColumns = this.columnsSmall;\n } else {\n this.currentColumns = this.columns;\n }\n }\n\n resizeHandler = () => {\n this.setCurrentDirection();\n this.setCurrentColumns();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n [`stzh-datalist--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host\n is-direction={this.currentDirection}\n style={{\n '--columns': this.currentColumns ? this.currentColumns.toString() : null\n }}\n >\n <div class={classes}>\n <div class=\"stzh-datalist__wrapper\">\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map((item) =>\n <stzh-datalist-item {...item}>\n {item.items && item.items.length > 0 &&\n <stzh-datalist items={item.items}></stzh-datalist>\n }\n </stzh-datalist-item>\n )}\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datalist2.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\n // @prop --item-label-min-width: Min width of label\n // --item-label-min-width: 120px;\n --columns: 1;\n --columns-gap: #{$gridGutter};\n --list-display: grid;\n --list-margin-right: calc(var(--columns-gap) / -1);\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n --full-grid-column: 1 / 5;\n --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumns}\n );\n\n margin-left: var(--nested-margin-left);\n\n @include mq($from: small) {\n --columns-gap: #{$gridGutterSmall};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list\"\n );\n }\n\n @include mq($from: medium) {\n --columns-gap: #{$gridGutterMedium};\n\n --grid-template-areas: var(\n --stzh-datalist-grid-template-areas,\n \"list list list list list list list list\"\n );\n\n --grid-template-columns: var(\n --stzh-datalist-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --columns-gap: #{$gridGutterLarge};\n }\n\n @include mq($from: ultra) {\n --columns-gap: #{$gridGutterUltra};\n }\n\n // @include mq($from: medium) { // was smallheader before\n // --item-label-min-width: 144px;\n // }\n\n // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n // --item-label-min-width: none;\n // }\n\n // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n ::slotted(.layout_column) > :not([class=\"cq-\"]),\n ::slotted(:not([class=\"cq-\"])) {\n display: contents;\n }\n\n // ::slotted(.layout_column) {\n // display: contents;\n\n // .section {\n // display: contents;\n // }\n // }\n\n &[is-direction=\"horizontal\"] {\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n --full-grid-column: 1 / 6;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n --full-grid-column: 1 / 7;\n\n &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n }\n }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks /\n\n:host(:has([class=\"cq-\"])) {\n --stzh-datalist-item-wrapper-display: flex;\n\n --list-display: block;\n --list-margin-right: 0;\n}\n\n.stzh-datalist {\n // offset margin of nested datalist\n --stzh-datalist-nested-margin-left: #{space('large')};\n // details grid columns\n --stzh-details-content-grid-column: var(--full-grid-column);\n --stzh-details-content-padding-right: var(--columns-gap);\n --stzh-details-content-width: var(--details-content-width);\n\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: list;\n overflow: visible;\n }\n\n &__list {\n display: var(--list-display);\n border-collapse: collapse;\n grid-template-columns: var(--list-grid-template-columns);\n align-items: stretch;\n margin-right: var(--list-margin-right);\n }\n\n /* Multiple Columns /\n\n &--has-multiple-columns {\n // display of nested datalist\n --stzh-datalist-item-nested-display: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Watch,\n Prop,\n Event,\n EventEmitter,\n State,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemEntry,\n StzhDatalistDirection,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/\n /\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true\n})\nexport class StzhDatalist {\n /** Variant /\n @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n \n /* Columns /\n @Prop({ reflect: true }) columns: number = 1;\n\n /* Columns above small breakpoint /\n @Prop({ reflect: true }) columnsSmall: number;\n\n /* Columns above medium breakpoint /\n @Prop({ reflect: true }) columnsMedium: number;\n\n /* Columns above large breakpoint /\n @Prop({ reflect: true }) columnsLarge: number;\n\n /* Columns above ultra breakpoint /\n @Prop({ reflect: true }) columnsUltra: number;\n\n /* Direction /\n @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n /* Direction above small breakpoint /\n @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n /* Direction above medium breakpoint /\n @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n /* Direction above large breakpoint /\n @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n /* Direction above ultra breakpoint /\n @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n /\n Whether to disable min-width of datalist item label for the `horizontal` variant.\n \n If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n \n You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n /\n // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /\n Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n /\n @Prop() items: StzhDatalistItemEntry[] \| string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n /* Variant attribute change event /\n @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n /* Direction attribute change event /\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.setCurrentDirection();\n }\n\n @Watch(\"columns\")\n @Watch(\"columnsSmall\")\n @Watch(\"columnsMedium\")\n @Watch(\"columnsLarge\")\n @Watch(\"columnsUltra\")\n columnsWatcher() {\n this.setCurrentColumns();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: StzhDatalistDirection) {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhDatalistVariant) {\n this.stzhVariantChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n /* Get current direction */\n @Method()\n async getCurrentDirection() {\n return this.currentDirection;\n }\n\n @State() currentColumns: number = 1;\n @State() currentDirection: StzhDatalistDirection;\n\n private setCurrentDirection = () => {\n if (media(\"ultra\").matches && this.directionUltra) {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge) {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium) {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall) {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n }\n\n private setCurrentColumns = () => {\n if (media(\"ultra\").matches && this.columnsUltra) {\n this.currentColumns = this.columnsUltra;\n } else if (media(\"large\").matches && this.columnsLarge) {\n this.currentColumns = this.columnsLarge;\n } else if (media(\"medium\").matches && this.columnsMedium) {\n this.currentColumns = this.columnsMedium;\n } else if (media(\"small\").matches && this.columnsSmall) {\n this.currentColumns = this.columnsSmall;\n } else {\n this.currentColumns = this.columns;\n }\n }\n\n resizeHandler = () => {\n this.setCurrentDirection();\n this.setCurrentColumns();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n [`stzh-datalist--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host\n is-direction={this.currentDirection}\n style={{\n '--columns': this.currentColumns ? this.currentColumns.toString() : null\n }}\n >\n <div class={classes}>\n <div class=\"stzh-datalist__wrapper\">\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map((item) =>\n <stzh-datalist-item {...item}>\n {item.items && item.items.length > 0 &&\n <stzh-datalist items={item.items}></stzh-datalist>\n }\n </stzh-datalist-item>\n )}\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-datamessagelist-item.js CHANGED Viewed

@@ -28,7 +28,8 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class StzhDat
     this.itemClick = (originalEvent) => {
       this.stzhClick.emit({
         component: "stzh-datamessagelist-item",
-        originalEvent
+        originalEvent,
+        href: this.href
       });
     };
     this.localization = undefined;

package/dist/components/stzh-datamessagelist-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datamessagelist-item.js","mappings":"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","names":["StzhDatamessagelistItem"],"sources":["src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.scss?tag=stzh-datamessagelist-item&encapsulation=scoped","src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-datamessagelist-item {\n @include spaceCurve('padding-left', 'medium');\n @include spaceCurve('padding-right', 'regular');\n display: flex;\n position: relative;\n padding: space('medium');\n background-color: $colorWhite;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n @include mq($from: medium) {\n flex-direction: row;\n align-items: center;\n }\n }\n\n &__text {\n flex-grow: 1;\n }\n\n &__heading {\n @include font('title');\n @include fontCurve('h4', 'heading');\n color: $baseLeadColor;\n margin: 0;\n }\n\n &__heading-link {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n padding: 0;\n border: none;\n background-color: transparent;\n appearance: none;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n &::before {\n transition: all $baseTransitionAnimationSpeed;\n }\n\n &::after {\n z-index: 1;\n }\n }\n\n &__description {\n @include fontCurve('p1');\n color: $baseLeadColor;\n }\n\n // Meta\n\n &__meta-wrapper {\n margin-top: space('small');\n\n @include mq($from: small) {\n margin-top: space('xxsmall');\n }\n }\n\n &__meta {\n @include fontCurve('caption');\n display: table;\n list-style: none;\n margin: 0;\n padding: 0;\n\n @include mq($from: small) {\n display: flex;\n flex-wrap: wrap;\n margin: 0 calc(#{space('xsmall')} / -1);\n }\n }\n\n &__meta-item {\n display: table-row;\n\n @include mq($from: small) {\n display: flex;\n margin: 0 space('xsmall');\n }\n }\n\n &__meta-item-label,\n &__meta-item-value {\n display: table-cell;\n\n @include mq($from: small) {\n display: inline-block;\n }\n }\n\n &__meta-item-label {\n padding-right: space('xsmall');\n }\n\n &__meta-item-value {\n color: $colorBlack;\n }\n\n // Status / Tags\n\n &__status {\n width: 160px;\n }\n\n &__status,\n &__tags-wrapper {\n margin-top: space('medium');\n\n @include mq($from: medium) {\n margin-top: 0;\n margin-left: space('xxlarge');\n }\n }\n\n &__tags-wrapper {\n @include mq($from: medium) {\n flex-shrink: 0;\n }\n }\n\n &__tags {\n display: flex;\n flex-wrap: wrap;\n margin: calc(#{space('xxsmall')} / -1);\n\n @include mq($from: medium) {\n flex-wrap: nowrap;\n }\n }\n\n &__tag {\n margin: space('xxsmall');\n\n @include mq($from: medium) {\n flex-shrink: 0;\n }\n }\n\n // Actions\n\n &__actions {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n\n &:not(:empty) {\n margin-left: space('medium');\n\n @include mq($from: medium) {\n margin-left: space('xxlarge');\n justify-content: center;\n }\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n color: $colorPrimary;\n }\n }\n\n &__action-popover {\n --width: auto;\n --min-width: 200px;\n }\n\n &__action-popover-button {\n position: relative;\n z-index: 2;\n }\n\n /* Is interactive variant /\n\n &--is-interactive:hover &__action {\n &.is-non-interactive {\n color: $colorPrimaryHover;\n }\n }\n\n &--is-interactive:hover &__action-popover-button {\n --color: #{$colorPrimaryHover};\n }\n\n &--is-interactive &__heading-link {\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n\n &:hover::before,\n &:focus::before {\n background-color: $colorOldPrimary4;\n }\n }\n\n / Unread variant /\n\n &--is-unread &__heading-link {\n color: $colorPrimary;\n\n &::before {\n border-left: 5px solid $colorPrimary;\n }\n }\n\n &--is-unread#{&}--is-interactive &__heading-link {\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n\n &:hover::before,\n &:focus::before {\n border-left-color: $colorPrimaryHover;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhDatamessagelistItemEntryLoadingStatus,\n StzhDatamessagelistItemEntryMeta,\n StzhDatamessagelistItemEntryAction,\n StzhDatamessagelistItemEntryTag,\n StzhDatamessagelistItemClickEvent,\n StzhDatamessagelistItemActionClickEvent\n} from \"../../index\";\n\nimport { StzhDatamessagelistItemLocalizedText } from './stzh-datamessagelist-item.localization';\n\n/\n /\n@Component({\n tag: \"stzh-datamessagelist-item\",\n styleUrl: \"stzh-datamessagelist-item.scss\",\n scoped: true\n})\nexport class StzhDatamessagelistItem {\n /** Translation strings /\n @Prop() localization: StzhDatamessagelistItemLocalizedText;\n\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Whether item should be displayed in unread state /\n @Prop() unread: boolean = false;\n\n /* URL the item should link to /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Icon (`arrow-right` by default or `external-link` if rel=\"external\" is used) /\n @Prop() icon: string;\n\n /* Whether item is not interactive (arrow icon and hover effect will disappear) /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Loading status /\n @Prop() loadingStatus: StzhDatamessagelistItemEntryLoadingStatus \| string;\n private _loadingStatus: StzhDatamessagelistItemEntryLoadingStatus;\n\n /* Meta /\n @Prop() meta: StzhDatamessagelistItemEntryMeta[] \| string;\n private _meta: StzhDatamessagelistItemEntryMeta[];\n\n /* Actions /\n @Prop() actions: StzhDatamessagelistItemEntryAction[] \| string;\n private _actions: StzhDatamessagelistItemEntryAction[];\n\n /* Tags /\n @Prop() tags: StzhDatamessagelistItemEntryTag[] \| string;\n private _tags: StzhDatamessagelistItemEntryTag[];\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `heading` prop.\n /\n @Prop() analyticsId: string;\n\n /* Whether rel contains external /\n @State() external: boolean = false;\n\n @Element() element: HTMLStzhDatamessagelistItemElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhDatamessagelistItemClickEvent>;\n\n /* Action click event */\n @Event() stzhActionClick: EventEmitter<StzhDatamessagelistItemActionClickEvent>;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"loadingStatus\")\n loadingStatusWatcher(newValue: StzhDatamessagelistItemEntryLoadingStatus \| string) {\n if (typeof newValue === \"string\") {\n this._loadingStatus = JSON.parse(newValue);\n } else {\n this._loadingStatus = newValue;\n }\n }\n\n @Watch(\"meta\")\n metaWatcher(newValue: StzhDatamessagelistItemEntryMeta[] \| string) {\n if (typeof newValue === \"string\") {\n this._meta = JSON.parse(newValue);\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhDatamessagelistItemEntryAction[] \| string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @Watch(\"tags\")\n tagsWatcher(newValue: StzhDatamessagelistItemEntryTag[] \| string) {\n if (typeof newValue === \"string\") {\n this._tags = JSON.parse(newValue);\n } else {\n this._tags = newValue;\n }\n }\n\n private actionClick = (action: StzhDatamessagelistItemEntryAction, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-datamessagelist-item\",\n action,\n originalEvent\n });\n }\n\n private itemClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datamessagelist-item\",\n originalEvent\n });\n }\n\n async componentWillLoad() {\n this.loadingStatusWatcher(this.loadingStatus);\n this.metaWatcher(this.meta);\n this.actionsWatcher(this.actions);\n this.tagsWatcher(this.tags);\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datamessagelist-item\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-datamessagelist-item\": true,\n \"stzh-datamessagelist-item--is-unread\": this.unread,\n \"stzh-datamessagelist-item--is-interactive\": !this.nonInteractive,\n };\n\n const HeadingLink = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host role=\"listitem\">\n <article class={classes}>\n <div class=\"stzh-datamessagelist-item__content\">\n <div class=\"stzh-datamessagelist-item__text\">\n <h3 class=\"stzh-datamessagelist-item__heading\">\n <HeadingLink\n class=\"stzh-datamessagelist-item__heading-link\"\n href={this.href}\n rel={this.rel}\n target={this.target}\n onClick={this.itemClick}\n s-object-id={this.analyticsId \|\| this.heading}\n >\n {this.unread &&\n <span class=\"stzh-datamessagelist-item__vhidden\">\n {this.localization.unread},\n </span>\n }\n {this.heading}\n </HeadingLink>\n </h3>\n\n {this.description &&\n <div class=\"stzh-datamessagelist-item__description\">\n <stzh-clamp lines={2} linesMedium={1}>\n {this.description}\n </stzh-clamp>\n </div>\n }\n\n {this._meta && this._meta.length > 0 &&\n <div class=\"stzh-datamessagelist-item__meta-wrapper\">\n <ul class=\"stzh-datamessagelist-item__meta\">\n {this._meta.map((meta) =>\n <li class=\"stzh-datamessagelist-item__meta-item\">\n <span class=\"stzh-datamessagelist-item__meta-item-label\">{meta.label}</span>\n <span class=\"stzh-datamessagelist-item__meta-item-value\">{meta.value}</span>\n </li>\n )}\n </ul>\n </div>\n }\n </div>\n\n {this._loadingStatus &&\n <stzh-status\n class=\"stzh-datamessagelist-item__status\"\n label={this._loadingStatus.label}\n percent={this._loadingStatus.percent}\n type={this._loadingStatus.type}\n withLoadingbar={true}\n ></stzh-status>\n }\n\n {this._tags && this._tags.length > 0 &&\n <div class=\"stzh-datamessagelist-item__tags-wrapper\">\n <div class=\"stzh-datamessagelist-item__tags\">\n {this._tags.map((tag) =>\n <stzh-chip\n class=\"stzh-datamessagelist-item__tag\"\n variant=\"tag\"\n size=\"small\"\n nonInteractive={true}\n inverted={tag.inverted}\n type={tag.type}\n icon={tag.icon}\n label={tag.label}\n ></stzh-chip>\n )}\n </div>\n </div>\n }\n </div>\n\n <div class=\"stzh-datamessagelist-item__actions\">\n {(this._actions && this._actions.length > 0) ?\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class=\"stzh-datamessagelist-item__action-popover\"\n >\n <stzh-button\n class=\"stzh-datamessagelist-item__action-popover-button\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-horizontal\"\n iconOnly={true}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this._actions.map((action) =>\n <stzh-menu-item\n icon={action.icon}\n badge={action.badge}\n onClick={(event) => { this.actionClick(action, event) }}\n >\n {action.label}\n </stzh-menu-item>\n )}\n </stzh-menu>\n </stzh-popover>\n :\n (\n !this.nonInteractive &&\n <div class=\"stzh-datamessagelist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datamessagelist-item__action-icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n </div>\n\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datamessagelist-item.js","mappings":"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","names":["StzhDatamessagelistItem"],"sources":["src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.scss?tag=stzh-datamessagelist-item&encapsulation=scoped","src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-datamessagelist-item {\n @include spaceCurve('padding-left', 'medium');\n @include spaceCurve('padding-right', 'regular');\n display: flex;\n position: relative;\n padding: space('medium');\n background-color: $colorWhite;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n @include mq($from: medium) {\n flex-direction: row;\n align-items: center;\n }\n }\n\n &__text {\n flex-grow: 1;\n }\n\n &__heading {\n @include font('title');\n @include fontCurve('h4', 'heading');\n color: $baseLeadColor;\n margin: 0;\n }\n\n &__heading-link {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n padding: 0;\n border: none;\n background-color: transparent;\n appearance: none;\n\n &::before,\n &::after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n &::before {\n transition: all $baseTransitionAnimationSpeed;\n }\n\n &::after {\n z-index: 1;\n }\n }\n\n &__description {\n @include fontCurve('p1');\n color: $baseLeadColor;\n }\n\n // Meta\n\n &__meta-wrapper {\n margin-top: space('small');\n\n @include mq($from: small) {\n margin-top: space('xxsmall');\n }\n }\n\n &__meta {\n @include fontCurve('caption');\n display: table;\n list-style: none;\n margin: 0;\n padding: 0;\n\n @include mq($from: small) {\n display: flex;\n flex-wrap: wrap;\n margin: 0 calc(#{space('xsmall')} / -1);\n }\n }\n\n &__meta-item {\n display: table-row;\n\n @include mq($from: small) {\n display: flex;\n margin: 0 space('xsmall');\n }\n }\n\n &__meta-item-label,\n &__meta-item-value {\n display: table-cell;\n\n @include mq($from: small) {\n display: inline-block;\n }\n }\n\n &__meta-item-label {\n padding-right: space('xsmall');\n }\n\n &__meta-item-value {\n color: $colorBlack;\n }\n\n // Status / Tags\n\n &__status {\n width: 160px;\n }\n\n &__status,\n &__tags-wrapper {\n margin-top: space('medium');\n\n @include mq($from: medium) {\n margin-top: 0;\n margin-left: space('xxlarge');\n }\n }\n\n &__tags-wrapper {\n @include mq($from: medium) {\n flex-shrink: 0;\n }\n }\n\n &__tags {\n display: flex;\n flex-wrap: wrap;\n margin: calc(#{space('xxsmall')} / -1);\n\n @include mq($from: medium) {\n flex-wrap: nowrap;\n }\n }\n\n &__tag {\n margin: space('xxsmall');\n\n @include mq($from: medium) {\n flex-shrink: 0;\n }\n }\n\n // Actions\n\n &__actions {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n\n &:not(:empty) {\n margin-left: space('medium');\n\n @include mq($from: medium) {\n margin-left: space('xxlarge');\n justify-content: center;\n }\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n color: $colorPrimary;\n }\n }\n\n &__action-popover {\n --width: auto;\n --min-width: 200px;\n }\n\n &__action-popover-button {\n position: relative;\n z-index: 2;\n }\n\n /* Is interactive variant /\n\n &--is-interactive:hover &__action {\n &.is-non-interactive {\n color: $colorPrimaryHover;\n }\n }\n\n &--is-interactive:hover &__action-popover-button {\n --color: #{$colorPrimaryHover};\n }\n\n &--is-interactive &__heading-link {\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n\n &:hover::before,\n &:focus::before {\n background-color: $colorOldPrimary4;\n }\n }\n\n / Unread variant /\n\n &--is-unread &__heading-link {\n color: $colorPrimary;\n\n &::before {\n border-left: 5px solid $colorPrimary;\n }\n }\n\n &--is-unread#{&}--is-interactive &__heading-link {\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n\n &:hover::before,\n &:focus::before {\n border-left-color: $colorPrimaryHover;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhDatamessagelistItemEntryLoadingStatus,\n StzhDatamessagelistItemEntryMeta,\n StzhDatamessagelistItemEntryAction,\n StzhDatamessagelistItemEntryTag,\n StzhDatamessagelistItemClickEvent,\n StzhDatamessagelistItemActionClickEvent\n} from \"../../index\";\n\nimport { StzhDatamessagelistItemLocalizedText } from './stzh-datamessagelist-item.localization';\n\n/\n /\n@Component({\n tag: \"stzh-datamessagelist-item\",\n styleUrl: \"stzh-datamessagelist-item.scss\",\n scoped: true\n})\nexport class StzhDatamessagelistItem {\n /** Translation strings /\n @Prop() localization: StzhDatamessagelistItemLocalizedText;\n\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Whether item should be displayed in unread state /\n @Prop() unread: boolean = false;\n\n /* URL the item should link to /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Icon (`arrow-right` by default or `external-link` if rel=\"external\" is used) /\n @Prop() icon: string;\n\n /* Whether item is not interactive (arrow icon and hover effect will disappear) /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Loading status /\n @Prop() loadingStatus: StzhDatamessagelistItemEntryLoadingStatus \| string;\n private _loadingStatus: StzhDatamessagelistItemEntryLoadingStatus;\n\n /* Meta /\n @Prop() meta: StzhDatamessagelistItemEntryMeta[] \| string;\n private _meta: StzhDatamessagelistItemEntryMeta[];\n\n /* Actions /\n @Prop() actions: StzhDatamessagelistItemEntryAction[] \| string;\n private _actions: StzhDatamessagelistItemEntryAction[];\n\n /* Tags /\n @Prop() tags: StzhDatamessagelistItemEntryTag[] \| string;\n private _tags: StzhDatamessagelistItemEntryTag[];\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `heading` prop.\n /\n @Prop() analyticsId: string;\n\n /* Whether rel contains external /\n @State() external: boolean = false;\n\n @Element() element: HTMLStzhDatamessagelistItemElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhDatamessagelistItemClickEvent>;\n\n /* Action click event */\n @Event() stzhActionClick: EventEmitter<StzhDatamessagelistItemActionClickEvent>;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"loadingStatus\")\n loadingStatusWatcher(newValue: StzhDatamessagelistItemEntryLoadingStatus \| string) {\n if (typeof newValue === \"string\") {\n this._loadingStatus = JSON.parse(newValue);\n } else {\n this._loadingStatus = newValue;\n }\n }\n\n @Watch(\"meta\")\n metaWatcher(newValue: StzhDatamessagelistItemEntryMeta[] \| string) {\n if (typeof newValue === \"string\") {\n this._meta = JSON.parse(newValue);\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhDatamessagelistItemEntryAction[] \| string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @Watch(\"tags\")\n tagsWatcher(newValue: StzhDatamessagelistItemEntryTag[] \| string) {\n if (typeof newValue === \"string\") {\n this._tags = JSON.parse(newValue);\n } else {\n this._tags = newValue;\n }\n }\n\n private actionClick = (action: StzhDatamessagelistItemEntryAction, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-datamessagelist-item\",\n action,\n originalEvent\n });\n }\n\n private itemClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datamessagelist-item\",\n originalEvent,\n href: this.href\n });\n }\n\n async componentWillLoad() {\n this.loadingStatusWatcher(this.loadingStatus);\n this.metaWatcher(this.meta);\n this.actionsWatcher(this.actions);\n this.tagsWatcher(this.tags);\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datamessagelist-item\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-datamessagelist-item\": true,\n \"stzh-datamessagelist-item--is-unread\": this.unread,\n \"stzh-datamessagelist-item--is-interactive\": !this.nonInteractive,\n };\n\n const HeadingLink = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host role=\"listitem\">\n <article class={classes}>\n <div class=\"stzh-datamessagelist-item__content\">\n <div class=\"stzh-datamessagelist-item__text\">\n <h3 class=\"stzh-datamessagelist-item__heading\">\n <HeadingLink\n class=\"stzh-datamessagelist-item__heading-link\"\n href={this.href}\n rel={this.rel}\n target={this.target}\n onClick={this.itemClick}\n s-object-id={this.analyticsId \|\| this.heading}\n >\n {this.unread &&\n <span class=\"stzh-datamessagelist-item__vhidden\">\n {this.localization.unread},\n </span>\n }\n {this.heading}\n </HeadingLink>\n </h3>\n\n {this.description &&\n <div class=\"stzh-datamessagelist-item__description\">\n <stzh-clamp lines={2} linesMedium={1}>\n {this.description}\n </stzh-clamp>\n </div>\n }\n\n {this._meta && this._meta.length > 0 &&\n <div class=\"stzh-datamessagelist-item__meta-wrapper\">\n <ul class=\"stzh-datamessagelist-item__meta\">\n {this._meta.map((meta) =>\n <li class=\"stzh-datamessagelist-item__meta-item\">\n <span class=\"stzh-datamessagelist-item__meta-item-label\">{meta.label}</span>\n <span class=\"stzh-datamessagelist-item__meta-item-value\">{meta.value}</span>\n </li>\n )}\n </ul>\n </div>\n }\n </div>\n\n {this._loadingStatus &&\n <stzh-status\n class=\"stzh-datamessagelist-item__status\"\n label={this._loadingStatus.label}\n percent={this._loadingStatus.percent}\n type={this._loadingStatus.type}\n withLoadingbar={true}\n ></stzh-status>\n }\n\n {this._tags && this._tags.length > 0 &&\n <div class=\"stzh-datamessagelist-item__tags-wrapper\">\n <div class=\"stzh-datamessagelist-item__tags\">\n {this._tags.map((tag) =>\n <stzh-chip\n class=\"stzh-datamessagelist-item__tag\"\n variant=\"tag\"\n size=\"small\"\n nonInteractive={true}\n inverted={tag.inverted}\n type={tag.type}\n icon={tag.icon}\n label={tag.label}\n ></stzh-chip>\n )}\n </div>\n </div>\n }\n </div>\n\n <div class=\"stzh-datamessagelist-item__actions\">\n {(this._actions && this._actions.length > 0) ?\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class=\"stzh-datamessagelist-item__action-popover\"\n >\n <stzh-button\n class=\"stzh-datamessagelist-item__action-popover-button\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-horizontal\"\n iconOnly={true}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this._actions.map((action) =>\n <stzh-menu-item\n icon={action.icon}\n badge={action.badge}\n onClick={(event) => { this.actionClick(action, event) }}\n >\n {action.label}\n </stzh-menu-item>\n )}\n </stzh-menu>\n </stzh-popover>\n :\n (\n !this.nonInteractive &&\n <div class=\"stzh-datamessagelist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datamessagelist-item__action-icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n </div>\n\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-datatable.js CHANGED Viewed

@@ -73,7 +73,7 @@ License: MIT
 !function(e,t){module.exports=t();}(commonjsGlobal,function s(){var f="undefined"!=typeof self?self:"undefined"!=typeof window?window:void 0!==f?f:{};var n=!f.document&&!!f.postMessage,o=f.IS_PAPA_WORKER||!1,a={},u=0,b={parse:function(e,t){var r=(t=t||{}).dynamicTyping||!1;J(r)&&(t.dynamicTypingFunction=r,r={});if(t.dynamicTyping=r,t.transform=!!J(t.transform)&&t.transform,t.worker&&b.WORKERS_SUPPORTED){var i=function(){if(!b.WORKERS_SUPPORTED)return !1;var e=(r=f.URL||f.webkitURL||null,i=s.toString(),b.BLOB_URL||(b.BLOB_URL=r.createObjectURL(new Blob(["var global = (function() { if (typeof self !== 'undefined') { return self; } if (typeof window !== 'undefined') { return window; } if (typeof global !== 'undefined') { return global; } return {}; })(); global.IS_PAPA_WORKER=true; ","(",i,")();"],{type:"text/javascript"})))),t=new f.Worker(e);var r,i;return t.onmessage=_,t.id=u++,a[t.id]=t}();return i.userStep=t.step,i.userChunk=t.chunk,i.userComplete=t.complete,i.userError=t.error,t.step=J(t.step),t.chunk=J(t.chunk),t.complete=J(t.complete),t.error=J(t.error),delete t.worker,void i.postMessage({input:e,config:t,workerId:i.id})}var n=null;"string"==typeof e?(e=function(e){if(65279===e.charCodeAt(0))return e.slice(1);return e}(e),n=t.download?new l(t):new p(t)):!0===e.readable&&J(e.read)&&J(e.on)?n=new g(t):(f.File&&e instanceof File||e instanceof Object)&&(n=new c(t));return n.stream(e)},unparse:function(e,t){var n=!1,_=!0,m=",",y="\r\n",s='"',a=s+s,r=!1,i=null,o=!1;!function(){if("object"!=typeof t)return;"string"!=typeof t.delimiter||b.BAD_DELIMITERS.filter(function(e){return -1!==t.delimiter.indexOf(e)}).length||(m=t.delimiter);("boolean"==typeof t.quotes||"function"==typeof t.quotes||Array.isArray(t.quotes))&&(n=t.quotes);"boolean"!=typeof t.skipEmptyLines&&"string"!=typeof t.skipEmptyLines||(r=t.skipEmptyLines);"string"==typeof t.newline&&(y=t.newline);"string"==typeof t.quoteChar&&(s=t.quoteChar);"boolean"==typeof t.header&&(_=t.header);if(Array.isArray(t.columns)){if(0===t.columns.length)throw new Error("Option columns is empty");i=t.columns;}void 0!==t.escapeChar&&(a=t.escapeChar+s);("boolean"==typeof t.escapeFormulae||t.escapeFormulae instanceof RegExp)&&(o=t.escapeFormulae instanceof RegExp?t.escapeFormulae:/^[=+\-@\t\r].*$/);}();var u=new RegExp(Q(s),"g");"string"==typeof e&&(e=JSON.parse(e));if(Array.isArray(e)){if(!e.length||Array.isArray(e[0]))return h(null,e,r);if("object"==typeof e[0])return h(i||Object.keys(e[0]),e,r)}else if("object"==typeof e)return "string"==typeof e.data&&(e.data=JSON.parse(e.data)),Array.isArray(e.data)&&(e.fields||(e.fields=e.meta&&e.meta.fields||i),e.fields||(e.fields=Array.isArray(e.data[0])?e.fields:"object"==typeof e.data[0]?Object.keys(e.data[0]):[]),Array.isArray(e.data[0])||"object"==typeof e.data[0]||(e.data=[e.data])),h(e.fields||[],e.data||[],r);throw new Error("Unable to serialize unrecognized input");function h(e,t,r){var i="";"string"==typeof e&&(e=JSON.parse(e)),"string"==typeof t&&(t=JSON.parse(t));var n=Array.isArray(e)&&0<e.length,s=!Array.isArray(t[0]);if(n&&_){for(var a=0;a<e.length;a++)0<a&&(i+=m),i+=v(e[a],a);0<t.length&&(i+=y);}for(var o=0;o<t.length;o++){var u=n?e.length:t[o].length,h=!1,f=n?0===Object.keys(t[o]).length:0===t[o].length;if(r&&!n&&(h="greedy"===r?""===t[o].join("").trim():1===t[o].length&&0===t[o][0].length),"greedy"===r&&n){for(var d=[],l=0;l<u;l++){var c=s?e[l]:l;d.push(t[o][c]);}h=""===d.join("").trim();}if(!h){for(var p=0;p<u;p++){0<p&&!f&&(i+=m);var g=n&&s?e[p]:p;i+=v(t[o][g],p);}o<t.length-1&&(!r||0<u&&!f)&&(i+=y);}}return i}function v(e,t){if(null==e)return "";if(e.constructor===Date)return JSON.stringify(e).slice(1,25);var r=!1;o&&"string"==typeof e&&o.test(e)&&(e="'"+e,r=!0);var i=e.toString().replace(u,a);return (r=r||!0===n||"function"==typeof n&&n(e,t)||Array.isArray(n)&&n[t]||function(e,t){for(var r=0;r<t.length;r++)if(-1<e.indexOf(t[r]))return !0;return !1}(i,b.BAD_DELIMITERS)||-1<i.indexOf(m)||" "===i.charAt(0)||" "===i.charAt(i.length-1))?s+i+s:i}}};if(b.RECORD_SEP=String.fromCharCode(30),b.UNIT_SEP=String.fromCharCode(31),b.BYTE_ORDER_MARK="\ufeff",b.BAD_DELIMITERS=["\r","\n",'"',b.BYTE_ORDER_MARK],b.WORKERS_SUPPORTED=!n&&!!f.Worker,b.NODE_STREAM_INPUT=1,b.LocalChunkSize=10485760,b.RemoteChunkSize=5242880,b.DefaultDelimiter=",",b.Parser=E,b.ParserHandle=r,b.NetworkStreamer=l,b.FileStreamer=c,b.StringStreamer=p,b.ReadableStreamStreamer=g,f.jQuery){var d=f.jQuery;d.fn.parse=function(o){var r=o.config||{},u=[];return this.each(function(e){if(!("INPUT"===d(this).prop("tagName").toUpperCase()&&"file"===d(this).attr("type").toLowerCase()&&f.FileReader)||!this.files||0===this.files.length)return !0;for(var t=0;t<this.files.length;t++)u.push({file:this.files[t],inputElem:this,instanceConfig:d.extend({},r)});}),e(),this;function e(){if(0!==u.length){var e,t,r,i,n=u[0];if(J(o.before)){var s=o.before(n.file,n.inputElem);if("object"==typeof s){if("abort"===s.action)return e="AbortError",t=n.file,r=n.inputElem,i=s.reason,void(J(o.error)&&o.error({name:e},t,r,i));if("skip"===s.action)return void h();"object"==typeof s.config&&(n.instanceConfig=d.extend(n.instanceConfig,s.config));}else if("skip"===s)return void h()}var a=n.instanceConfig.complete;n.instanceConfig.complete=function(e){J(a)&&a(e,n.file,n.inputElem),h();},b.parse(n.file,n.instanceConfig);}else J(o.complete)&&o.complete();}function h(){u.splice(0,1),e();}};}function h(e){this._handle=null,this._finished=!1,this._completed=!1,this._halted=!1,this._input=null,this._baseIndex=0,this._partialLine="",this._rowCount=0,this._start=0,this._nextChunk=null,this.isFirstChunk=!0,this._completeResults={data:[],errors:[],meta:{}},function(e){var t=w(e);t.chunkSize=parseInt(t.chunkSize),e.step||e.chunk||(t.chunkSize=null);this._handle=new r(t),(this._handle.streamer=this)._config=t;}.call(this,e),this.parseChunk=function(e,t){if(this.isFirstChunk&&J(this._config.beforeFirstChunk)){var r=this._config.beforeFirstChunk(e);void 0!==r&&(e=r);}this.isFirstChunk=!1,this._halted=!1;var i=this._partialLine+e;this._partialLine="";var n=this._handle.parse(i,this._baseIndex,!this._finished);if(!this._handle.paused()&&!this._handle.aborted()){var s=n.meta.cursor;this._finished||(this._partialLine=i.substring(s-this._baseIndex),this._baseIndex=s),n&&n.data&&(this._rowCount+=n.data.length);var a=this._finished||this._config.preview&&this._rowCount>=this._config.preview;if(o)f.postMessage({results:n,workerId:b.WORKER_ID,finished:a});else if(J(this._config.chunk)&&!t){if(this._config.chunk(n,this._handle),this._handle.paused()||this._handle.aborted())return void(this._halted=!0);n=void 0,this._completeResults=void 0;}return this._config.step||this._config.chunk||(this._completeResults.data=this._completeResults.data.concat(n.data),this._completeResults.errors=this._completeResults.errors.concat(n.errors),this._completeResults.meta=n.meta),this._completed||!a||!J(this._config.complete)||n&&n.meta.aborted||(this._config.complete(this._completeResults,this._input),this._completed=!0),a||n&&n.meta.paused||this._nextChunk(),n}this._halted=!0;},this._sendError=function(e){J(this._config.error)?this._config.error(e):o&&this._config.error&&f.postMessage({workerId:b.WORKER_ID,error:e,finished:!1});};}function l(e){var i;(e=e||{}).chunkSize||(e.chunkSize=b.RemoteChunkSize),h.call(this,e),this._nextChunk=n?function(){this._readChunk(),this._chunkLoaded();}:function(){this._readChunk();},this.stream=function(e){this._input=e,this._nextChunk();},this._readChunk=function(){if(this._finished)this._chunkLoaded();else {if(i=new XMLHttpRequest,this._config.withCredentials&&(i.withCredentials=this._config.withCredentials),n||(i.onload=v(this._chunkLoaded,this),i.onerror=v(this._chunkError,this)),i.open(this._config.downloadRequestBody?"POST":"GET",this._input,!n),this._config.downloadRequestHeaders){var e=this._config.downloadRequestHeaders;for(var t in e)i.setRequestHeader(t,e[t]);}if(this._config.chunkSize){var r=this._start+this._config.chunkSize-1;i.setRequestHeader("Range","bytes="+this._start+"-"+r);}try{i.send(this._config.downloadRequestBody);}catch(e){this._chunkError(e.message);}n&&0===i.status&&this._chunkError();}},this._chunkLoaded=function(){4===i.readyState&&(i.status<200||400<=i.status?this._chunkError():(this._start+=this._config.chunkSize?this._config.chunkSize:i.responseText.length,this._finished=!this._config.chunkSize||this._start>=function(e){var t=e.getResponseHeader("Content-Range");if(null===t)return -1;return parseInt(t.substring(t.lastIndexOf("/")+1))}(i),this.parseChunk(i.responseText)));},this._chunkError=function(e){var t=i.statusText||e;this._sendError(new Error(t));};}function c(e){var i,n;(e=e||{}).chunkSize||(e.chunkSize=b.LocalChunkSize),h.call(this,e);var s="undefined"!=typeof FileReader;this.stream=function(e){this._input=e,n=e.slice||e.webkitSlice||e.mozSlice,s?((i=new FileReader).onload=v(this._chunkLoaded,this),i.onerror=v(this._chunkError,this)):i=new FileReaderSync,this._nextChunk();},this._nextChunk=function(){this._finished||this._config.preview&&!(this._rowCount<this._config.preview)||this._readChunk();},this._readChunk=function(){var e=this._input;if(this._config.chunkSize){var t=Math.min(this._start+this._config.chunkSize,this._input.size);e=n.call(e,this._start,t);}var r=i.readAsText(e,this._config.encoding);s||this._chunkLoaded({target:{result:r}});},this._chunkLoaded=function(e){this._start+=this._config.chunkSize,this._finished=!this._config.chunkSize||this._start>=this._input.size,this.parseChunk(e.target.result);},this._chunkError=function(){this._sendError(i.error);};}function p(e){var r;h.call(this,e=e||{}),this.stream=function(e){return r=e,this._nextChunk()},this._nextChunk=function(){if(!this._finished){var e,t=this._config.chunkSize;return t?(e=r.substring(0,t),r=r.substring(t)):(e=r,r=""),this._finished=!r,this.parseChunk(e)}};}function g(e){h.call(this,e=e||{});var t=[],r=!0,i=!1;this.pause=function(){h.prototype.pause.apply(this,arguments),this._input.pause();},this.resume=function(){h.prototype.resume.apply(this,arguments),this._input.resume();},this.stream=function(e){this._input=e,this._input.on("data",this._streamData),this._input.on("end",this._streamEnd),this._input.on("error",this._streamError);},this._checkIsFinished=function(){i&&1===t.length&&(this._finished=!0);},this._nextChunk=function(){this._checkIsFinished(),t.length?this.parseChunk(t.shift()):r=!0;},this._streamData=v(function(e){try{t.push("string"==typeof e?e:e.toString(this._config.encoding)),r&&(r=!1,this._checkIsFinished(),this.parseChunk(t.shift()));}catch(e){this._streamError(e);}},this),this._streamError=v(function(e){this._streamCleanUp(),this._sendError(e);},this),this._streamEnd=v(function(){this._streamCleanUp(),i=!0,this._streamData("");},this),this._streamCleanUp=v(function(){this._input.removeListener("data",this._streamData),this._input.removeListener("end",this._streamEnd),this._input.removeListener("error",this._streamError);},this);}function r(m){var a,o,u,i=Math.pow(2,53),n=-i,s=/^\s*-?(\d+\.?|\.\d+|\d+\.\d+)([eE][-+]?\d+)?\s*$/,h=/^((\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z))|(\d{4}-[01]\d-[0-3]\dT[0-2]\d:[0-5]\d([+-][0-2]\d:[0-5]\d|Z)))$/,t=this,r=0,f=0,d=!1,e=!1,l=[],c={data:[],errors:[],meta:{}};if(J(m.step)){var p=m.step;m.step=function(e){if(c=e,_())g();else {if(g(),0===c.data.length)return;r+=e.data.length,m.preview&&r>m.preview?o.abort():(c.data=c.data[0],p(c,t));}};}function y(e){return "greedy"===m.skipEmptyLines?""===e.join("").trim():1===e.length&&0===e[0].length}function g(){return c&&u&&(k("Delimiter","UndetectableDelimiter","Unable to auto-detect delimiting character; defaulted to '"+b.DefaultDelimiter+"'"),u=!1),m.skipEmptyLines&&(c.data=c.data.filter(function(e){return !y(e)})),_()&&function(){if(!c)return;function e(e,t){J(m.transformHeader)&&(e=m.transformHeader(e,t)),l.push(e);}if(Array.isArray(c.data[0])){for(var t=0;_()&&t<c.data.length;t++)c.data[t].forEach(e);c.data.splice(0,1);}else c.data.forEach(e);}(),function(){if(!c||!m.header&&!m.dynamicTyping&&!m.transform)return c;function e(e,t){var r,i=m.header?{}:[];for(r=0;r<e.length;r++){var n=r,s=e[r];m.header&&(n=r>=l.length?"__parsed_extra":l[r]),m.transform&&(s=m.transform(s,n)),s=v(n,s),"__parsed_extra"===n?(i[n]=i[n]||[],i[n].push(s)):i[n]=s;}return m.header&&(r>l.length?k("FieldMismatch","TooManyFields","Too many fields: expected "+l.length+" fields but parsed "+r,f+t):r<l.length&&k("FieldMismatch","TooFewFields","Too few fields: expected "+l.length+" fields but parsed "+r,f+t)),i}var t=1;!c.data.length||Array.isArray(c.data[0])?(c.data=c.data.map(e),t=c.data.length):c.data=e(c.data,0);m.header&&c.meta&&(c.meta.fields=l);return f+=t,c}()}function _(){return m.header&&0===l.length}function v(e,t){return r=e,m.dynamicTypingFunction&&void 0===m.dynamicTyping[r]&&(m.dynamicTyping[r]=m.dynamicTypingFunction(r)),!0===(m.dynamicTyping[r]||m.dynamicTyping)?"true"===t||"TRUE"===t||"false"!==t&&"FALSE"!==t&&(function(e){if(s.test(e)){var t=parseFloat(e);if(n<t&&t<i)return !0}return !1}(t)?parseFloat(t):h.test(t)?new Date(t):""===t?null:t):t;var r;}function k(e,t,r,i){var n={type:e,code:t,message:r};void 0!==i&&(n.row=i),c.errors.push(n);}this.parse=function(e,t,r){var i=m.quoteChar||'"';if(m.newline||(m.newline=function(e,t){e=e.substring(0,1048576);var r=new RegExp(Q(t)+"([^]*?)"+Q(t),"gm"),i=(e=e.replace(r,"")).split("\r"),n=e.split("\n"),s=1<n.length&&n[0].length<i[0].length;if(1===i.length||s)return "\n";for(var a=0,o=0;o<i.length;o++)"\n"===i[o][0]&&a++;return a>=i.length/2?"\r\n":"\r"}(e,i)),u=!1,m.delimiter)J(m.delimiter)&&(m.delimiter=m.delimiter(e),c.meta.delimiter=m.delimiter);else {var n=function(e,t,r,i,n){var s,a,o,u;n=n||[",","\t","|",";",b.RECORD_SEP,b.UNIT_SEP];for(var h=0;h<n.length;h++){var f=n[h],d=0,l=0,c=0;o=void 0;for(var p=new E({comments:i,delimiter:f,newline:t,preview:10}).parse(e),g=0;g<p.data.length;g++)if(r&&y(p.data[g]))c++;else {var _=p.data[g].length;l+=_,void 0!==o?0<_&&(d+=Math.abs(_-o),o=_):o=_;}0<p.data.length&&(l/=p.data.length-c),(void 0===a||d<=a)&&(void 0===u||u<l)&&1.99<l&&(a=d,s=f,u=l);}return {successful:!!(m.delimiter=s),bestDelimiter:s}}(e,m.newline,m.skipEmptyLines,m.comments,m.delimitersToGuess);n.successful?m.delimiter=n.bestDelimiter:(u=!0,m.delimiter=b.DefaultDelimiter),c.meta.delimiter=m.delimiter;}var s=w(m);return m.preview&&m.header&&s.preview++,a=e,o=new E(s),c=o.parse(a,t,r),g(),d?{meta:{paused:!0}}:c||{meta:{paused:!1}}},this.paused=function(){return d},this.pause=function(){d=!0,o.abort(),a=J(m.chunk)?"":a.substring(o.getCharIndex());},this.resume=function(){t.streamer._halted?(d=!1,t.streamer.parseChunk(a,!0)):setTimeout(t.resume,3);},this.aborted=function(){return e},this.abort=function(){e=!0,o.abort(),c.meta.aborted=!0,J(m.complete)&&m.complete(c),a="";};}function Q(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function E(j){var z,M=(j=j||{}).delimiter,P=j.newline,U=j.comments,q=j.step,N=j.preview,B=j.fastMode,K=z=void 0===j.quoteChar||null===j.quoteChar?'"':j.quoteChar;if(void 0!==j.escapeChar&&(K=j.escapeChar),("string"!=typeof M||-1<b.BAD_DELIMITERS.indexOf(M))&&(M=","),U===M)throw new Error("Comment character same as delimiter");!0===U?U="#":("string"!=typeof U||-1<b.BAD_DELIMITERS.indexOf(U))&&(U=!1),"\n"!==P&&"\r"!==P&&"\r\n"!==P&&(P="\n");var W=0,H=!1;this.parse=function(i,t,r){if("string"!=typeof i)throw new Error("Input must be a string");var n=i.length,e=M.length,s=P.length,a=U.length,o=J(q),u=[],h=[],f=[],d=W=0;if(!i)return L();if(j.header&&!t){var l=i.split(P)[0].split(M),c=[],p={},g=!1;for(var _ in l){var m=l[_];J(j.transformHeader)&&(m=j.transformHeader(m,_));var y=m,v=p[m]||0;for(0<v&&(g=!0,y=m+"_"+v),p[m]=v+1;c.includes(y);)y=y+"_"+v;c.push(y);}if(g){var k=i.split(P);k[0]=c.join(M),i=k.join(P);}}if(B||!1!==B&&-1===i.indexOf(z)){for(var b=i.split(P),E=0;E<b.length;E++){if(f=b[E],W+=f.length,E!==b.length-1)W+=P.length;else if(r)return L();if(!U||f.substring(0,a)!==U){if(o){if(u=[],I(f.split(M)),F(),H)return L()}else I(f.split(M));if(N&&N<=E)return u=u.slice(0,N),L(!0)}}return L()}for(var w=i.indexOf(M,W),R=i.indexOf(P,W),C=new RegExp(Q(K)+Q(z),"g"),S=i.indexOf(z,W);;)if(i[W]!==z)if(U&&0===f.length&&i.substring(W,W+a)===U){if(-1===R)return L();W=R+s,R=i.indexOf(P,W),w=i.indexOf(M,W);}else if(-1!==w&&(w<R||-1===R))f.push(i.substring(W,w)),W=w+e,w=i.indexOf(M,W);else {if(-1===R)break;if(f.push(i.substring(W,R)),D(R+s),o&&(F(),H))return L();if(N&&u.length>=N)return L(!0)}else for(S=W,W++;;){if(-1===(S=i.indexOf(z,S+1)))return r||h.push({type:"Quotes",code:"MissingQuotes",message:"Quoted field unterminated",row:u.length,index:W}),T();if(S===n-1)return T(i.substring(W,S).replace(C,z));if(z!==K||i[S+1]!==K){if(z===K||0===S||i[S-1]!==K){-1!==w&&w<S+1&&(w=i.indexOf(M,S+1)),-1!==R&&R<S+1&&(R=i.indexOf(P,S+1));var O=A(-1===R?w:Math.min(w,R));if(i.substr(S+1+O,e)===M){f.push(i.substring(W,S).replace(C,z)),i[W=S+1+O+e]!==z&&(S=i.indexOf(z,W)),w=i.indexOf(M,W),R=i.indexOf(P,W);break}var x=A(R);if(i.substring(S+1+x,S+1+x+s)===P){if(f.push(i.substring(W,S).replace(C,z)),D(S+1+x+s),w=i.indexOf(M,W),S=i.indexOf(z,W),o&&(F(),H))return L();if(N&&u.length>=N)return L(!0);break}h.push({type:"Quotes",code:"InvalidQuotes",message:"Trailing quote on quoted field is malformed",row:u.length,index:W}),S++;}}else S++;}return T();function I(e){u.push(e),d=W;}function A(e){var t=0;if(-1!==e){var r=i.substring(S+1,e);r&&""===r.trim()&&(t=r.length);}return t}function T(e){return r||(void 0===e&&(e=i.substring(W)),f.push(e),W=n,I(f),o&&F()),L()}function D(e){W=e,I(f),f=[],R=i.indexOf(P,W);}function L(e){return {data:u,errors:h,meta:{delimiter:M,linebreak:P,aborted:H,truncated:!!e,cursor:d+(t||0)}}}function F(){q(L()),u=[],h=[];}},this.abort=function(){H=!0;},this.getCharIndex=function(){return W};}function _(e){var t=e.data,r=a[t.workerId],i=!1;if(t.error)r.userError(t.error,t.file);else if(t.results&&t.results.data){var n={abort:function(){i=!0,m(t.workerId,{data:[],errors:[],meta:{aborted:!0}});},pause:y,resume:y};if(J(r.userStep)){for(var s=0;s<t.results.data.length&&(r.userStep({data:t.results.data[s],errors:t.results.errors,meta:t.results.meta},n),!i);s++);delete t.results;}else J(r.userChunk)&&(r.userChunk(t.results,n,t.file),delete t.results);}t.finished&&!i&&m(t.workerId,t.results);}function m(e,t){var r=a[e];J(r.userComplete)&&r.userComplete(t),r.terminate(),delete a[e];}function y(){throw new Error("Not implemented.")}function w(e){if("object"!=typeof e||null===e)return e;var t=Array.isArray(e)?[]:{};for(var r in e)t[r]=w(e[r]);return t}function v(e,t){return function(){e.apply(t,arguments);}}function J(e){return "function"==typeof e}return o&&(f.onmessage=function(e){var t=e.data;void 0===b.WORKER_ID&&t&&(b.WORKER_ID=t.workerId);if("string"==typeof t.input)f.postMessage({workerId:b.WORKER_ID,results:b.parse(t.input,t.config),finished:!0});else if(f.File&&t.input instanceof File||t.input instanceof Object){var r=b.parse(t.input,t.config);r&&f.postMessage({workerId:b.WORKER_ID,results:r,finished:!0});}}),(l.prototype=Object.create(h.prototype)).constructor=l,(c.prototype=Object.create(h.prototype)).constructor=c,(p.prototype=Object.create(p.prototype)).constructor=p,(g.prototype=Object.create(h.prototype)).constructor=g,b});
 });
-const stzhDatatableCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-datatable{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--stzh-list-font-size:\"\";--stzh-list-line-height:\"\";--stzh-list-letter-spacing:\"\";--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--search-input-width:var(--stzh-table-search-input-width)}stzh-datatable[hidden]{display:none}stzh-datatable::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-datatable::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-datatable *,stzh-datatable *::before,stzh-datatable *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-datatable .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-datatable .stzh-fylingfocus-focused{outline-style:none !important}stzh-datatable .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-datatable[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-datatable{}.stzh-datatable__sub-header{display:flex;align-items:flex-end;justify-content:space-between}.stzh-datatable__header .stzh-datatable__search{flex-grow:1;margin-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-datatable__header .stzh-datatable__search{width:var(--search-input-width);flex-grow:0}}.stzh-datatable__action-button{flex-shrink:0;margin-left:auto}.stzh-datatable__outer-wrapper{position:relative}.stzh-datatable__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-datatable__pagination-wrapper{display:flex;justify-content:flex-end}.stzh-datatable__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-datatable__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-datatable__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-datatable__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-datatable__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:inline-flex;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding);gap:var(--stzh-space-xxsmall)}.stzh-datatable__sort-button:hover,.stzh-datatable__sort-button:focus{color:var(--stzh-color-primary-hover)}.stzh-datatable__list-sort-wrapper{display:flex;flex-direction:column;align-items:flex-start}.stzh-datatable__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-datatable__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-datatable__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-datatable__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}.stzh-datatable__list-sort-wrapper stzh-dropdown+stzh-dropdown{margin-top:calc(var(--stzh-space-xsmall) / -1)}.stzh-datatable stzh-icon.stzh-datatable__sort-icon{display:none}.stzh-datatable__table{width:100%;border-spacing:0;min-width:var(--min-width);}.stzh-datatable__table.has-layout-fixed{table-layout:fixed}.stzh-datatable__thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-datatable__tbody .stzh-datatable__row:nth-child(even) .stzh-datatable__cell{background-color:var(--stzh-color-grey10)}.stzh-datatable__cell{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;border:none;vertical-align:top;border:none;background-color:var(--stzh-color-white);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-datatable__cell a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.stzh-datatable__cell a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}.stzh-datatable__cell b,.stzh-datatable__cell strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-datatable__cell i,.stzh-datatable__cell em{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-datatable__cell.align-left{text-align:left}.stzh-datatable__cell.align-right{text-align:right}.stzh-datatable__cell.align-center{text-align:center}.stzh-datatable__cell.valign-auto{vertical-align:auto}.stzh-datatable__cell.valign-middle{vertical-align:middle}.stzh-datatable__cell.valign-bottom{vertical-align:bottom}.stzh-datatable__cell.valign-top{vertical-align:top}.stzh-datatable__cell.nowrap{white-space:nowrap}.stzh-datatable__cell.is-head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-datatable__cell.is-sticky-left,.stzh-datatable__cell.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-datatable__cell.has-sticked{z-index:2}.stzh-datatable__cell.is-sticky-left{left:0}.stzh-datatable__cell.is-sticky-right{right:0}.stzh-datatable__cell.is-sticky-left::after,.stzh-datatable__cell.is-sticky-right::after{background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;transform:translate(100%);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-datatable__cell.is-sticky-left::after{right:0}.stzh-datatable__cell.is-sticky-right::after{left:0;transform:rotate(-180deg) translate(100%)}.stzh-datatable__cell.has-sticked.is-sticky-left::after,.stzh-datatable__cell.has-sticked.is-sticky-right::after{opacity:1}.stzh-datatable__cell--head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}.stzh-datatable__cell--head.is-sortable{padding:0}.stzh-datatable__cell.has-sorted .stzh-datatable__sort-icon{display:inline-flex}.stzh-datatable__cell.has-sorted-desc .stzh-datatable__sort-icon{transform:rotate(180deg)}.stzh-datatable.has-header .stzh-datatable__header{margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-datatable.has-header .stzh-datatable__header{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-datatable.has-header .stzh-datatable__header{margin-bottom:var(--stzh-space-large)}}.stzh-datatable.has-action-or-search .stzh-datatable__heading:not(:empty){margin-bottom:var(--stzh-space-xlarge)}.stzh-datatable.has-list .stzh-datatable__outer-wrapper{display:none}@media screen and (min-width: 1260px){.stzh-datatable.has-list .stzh-datatable__outer-wrapper{display:block}}@media screen and (min-width: 1260px){.stzh-datatable.has-list .stzh-datatable__list-wrapper{display:none}}";
+const stzhDatatableCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-datatable{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--stzh-list-font-size:\"\";--stzh-list-line-height:\"\";--stzh-list-letter-spacing:\"\";--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--search-input-width:var(--stzh-table-search-input-width)}stzh-datatable[hidden]{display:none}stzh-datatable::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-datatable::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-datatable *,stzh-datatable *::before,stzh-datatable *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-datatable .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-datatable .stzh-fylingfocus-focused{outline-style:none !important}stzh-datatable .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-datatable[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-datatable{}.stzh-datatable__sub-header{display:flex;align-items:flex-end;justify-content:space-between}.stzh-datatable__header .stzh-datatable__search{flex-grow:1;margin-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-datatable__header .stzh-datatable__search{width:var(--search-input-width);flex-grow:0}}.stzh-datatable__action-button{flex-shrink:0;margin-left:auto}.stzh-datatable__outer-wrapper{position:relative}.stzh-datatable__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-datatable__pagination-wrapper{display:flex;justify-content:flex-end}.stzh-datatable__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-datatable__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-datatable__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-datatable__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-datatable__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:inline-flex;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding);gap:var(--stzh-space-xxsmall)}.stzh-datatable__sort-button:hover,.stzh-datatable__sort-button:focus{color:var(--stzh-color-primary-hover)}.stzh-datatable__list-sort-wrapper{display:flex;flex-direction:column;align-items:flex-start}.stzh-datatable__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-datatable__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-datatable__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-datatable__list-sort-wrapper:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}.stzh-datatable__list-sort-wrapper stzh-dropdown+stzh-dropdown{margin-top:calc(var(--stzh-space-xsmall) / -1)}.stzh-datatable stzh-icon.stzh-datatable__sort-icon{display:none}.stzh-datatable__table{width:100%;border-spacing:0;min-width:var(--min-width);}.stzh-datatable__table.has-layout-fixed{table-layout:fixed}.stzh-datatable__thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-datatable__tbody .stzh-datatable__row:nth-child(even) .stzh-datatable__cell{background-color:var(--stzh-color-grey10)}.stzh-datatable__cell{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;border:none;vertical-align:top;border:none;background-color:var(--stzh-color-white);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-datatable__cell a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.stzh-datatable__cell a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}.stzh-datatable__cell b,.stzh-datatable__cell strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-datatable__cell i,.stzh-datatable__cell em{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.stzh-datatable__cell.align-left{text-align:left}.stzh-datatable__cell.align-right{text-align:right}.stzh-datatable__cell.align-center{text-align:center}.stzh-datatable__cell.valign-auto{vertical-align:auto}.stzh-datatable__cell.valign-middle{vertical-align:middle}.stzh-datatable__cell.valign-bottom{vertical-align:bottom}.stzh-datatable__cell.valign-top{vertical-align:top}.stzh-datatable__cell.nowrap{white-space:nowrap}.stzh-datatable__cell.is-head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-datatable__cell.is-sticky-left,.stzh-datatable__cell.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-datatable__cell.has-sticked{z-index:2}.stzh-datatable__cell.is-sticky-left{left:0}.stzh-datatable__cell.is-sticky-right{right:0}.stzh-datatable__cell.is-sticky-left::after,.stzh-datatable__cell.is-sticky-right::after{background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:\"\";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;transform:translate(100%);opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-datatable__cell.is-sticky-left::after{right:0}.stzh-datatable__cell.is-sticky-right::after{left:0;transform:rotate(-180deg) translate(100%)}.stzh-datatable__cell.has-sticked.is-sticky-left::after,.stzh-datatable__cell.has-sticked.is-sticky-right::after{opacity:1}.stzh-datatable__cell--head{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}.stzh-datatable__cell--head.is-sortable{padding:0}.stzh-datatable__cell.has-sorted .stzh-datatable__sort-icon{display:inline-flex}.stzh-datatable__cell.has-sorted-desc .stzh-datatable__sort-icon{transform:rotate(180deg)}.stzh-datatable.has-header .stzh-datatable__header{margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-datatable.has-header .stzh-datatable__header{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-datatable.has-header .stzh-datatable__header{margin-bottom:var(--stzh-space-large)}}.stzh-datatable.has-action-or-search .stzh-datatable__heading:not(:empty){margin-bottom:var(--stzh-space-xlarge)}.stzh-datatable.has-list .stzh-datatable__outer-wrapper{display:none}@media screen and (min-width: 1260px){.stzh-datatable.has-list .stzh-datatable__outer-wrapper{display:block}}@media screen and (min-width: 1260px){.stzh-datatable.has-list .stzh-datatable__list-wrapper{display:none}}";
 const StzhDatatable$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatatable extends HTMLElement {
   constructor() {