npm - @oiz/stzh-components - Versions diffs - 4.9.0-beta2 → 4.9.0-beta4 - Mend

@oiz/stzh-components 4.9.0-beta2 → 4.9.0-beta4

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

package/dist/components/p-D7CIAwx_.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-D7CIAwx_.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx"],"sourcesContent":["/**\n * @prop --content-min-height: Min height of content\n */\n\n:host {\n // --box-shadow: none;\n --border-radius: 0px;\n\n --content-min-height: 120px;\n\n --dnd-visibility: hidden;\n --dnd-opacity: 0;\n\n display: flex;\n flex-direction: column;\n position: relative;\n border-radius: var(--border-radius);\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n &[collapsed]:not([collapsed=\"false\"]) {\n --content-min-height: none;\n }\n\n &[checked]:not([checked=\"false\"]) {\n outline: 3px solid $colorPrimary;\n }\n\n &.is-ghost::after,\n .is-ghost &::after {\n border-radius: var(--border-radius);\n }\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n // --box-shadow: #{$boxShadowOverlay};\n }\n\n &.is-ghost,\n .is-ghost & {\n // --box-shadow: none;\n overflow: hidden;\n }\n\n &.is-drag,\n &.is-chosen,\n &.is-ghost,\n &.is-selected,\n .is-drag &,\n .is-chosen &,\n .is-ghost &,\n .is-selected &,\n &[is-sortable]:hover {\n --dnd-visibility: visible;\n --dnd-opacity: 1;\n }\n\n ::slotted([slot=\"image\"]) {\n width: 100%;\n max-width: 100%;\n }\n\n ::slotted(img[slot=\"image\"]) {\n display: block;\n }\n\n ::slotted(table) {\n border: 0;\n border-spacing: 0;\n\n th {\n @include font;\n }\n\n td,\n th {\n padding: 0;\n }\n\n td {\n color: $colorBlack;\n padding-left: space(\"xsmall\");\n }\n }\n}\n\n.stzh-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n background-color: $colorGrey10;\n border-radius: var(--border-radius);\n // box-shadow: var(--box-shadow);\n // transition: box-shadow $baseTransitionAnimationSpeed;\n\n // .vshow-medium {\n // @include mq($to: medium) {\n // @include visuallyhidden;\n // }\n // }\n\n // .show-medium {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n // .hide-medium {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n &--background-grey {\n background-color: $colorGrey10;\n }\n\n &--background-white {\n background-color: $colorWhite;\n }\n\n &--background-grey &__card-action-popover {\n --stzh-popover-background: #{$colorGrey20};\n --stzh-popover-item-hover-bg: #{$colorGrey30};\n }\n\n &__content-wrapper {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: var(--content-min-height);\n }\n\n &__dnd {\n --size: #{iconSize(\"xsmall\")};\n position: absolute;\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 3px;\n top: 23px;\n display: flex;\n visibility: var(--dnd-visibility);\n opacity: var(--dnd-opacity);\n transition: all $baseTransitionAnimationSpeed;\n display: none;\n\n @include mq($from: medium) {\n display: block;\n }\n\n @include mq($from: large) {\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 4px;\n top: 27px;\n }\n }\n\n &__header-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n }\n\n &__header-meta {\n &:not(:empty) {\n display: inline-flex;\n margin-top: space(\"xsmall\");\n gap: space(\"xsmall\");\n }\n }\n\n &__header-left,\n &__header-right {\n display: flex;\n }\n\n &__header-right {\n @include spaceCurve(\"padding-left\", \"tiny\");\n }\n\n &__left {\n align-self: center;\n }\n\n &__title-area {\n @include wordWrap;\n overflow: hidden;\n }\n\n &__title,\n &__subtitle {\n margin: 0;\n }\n\n &__title-link {\n color: inherit;\n text-decoration-line: none;\n }\n\n &__title {\n @include font(\"title\");\n @include fontSize(\"milli\");\n }\n\n &__image-link {\n display: block;\n }\n\n &__subtitle {\n @include fontSize(\"milli\");\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n text-decoration-line: none;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n margin-left: -0.5625em;\n }\n\n &__subtitle-text {\n position: relative;\n display: inline-flex;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n padding-left: 0.5625em;\n\n &::after {\n content: \",\";\n position: absolute;\n left: 0;\n }\n }\n\n &__content {\n @include fontSize(\"milli\");\n flex-grow: 1;\n }\n\n // &__footer-meta {\n // @include fontSize('micro');\n // display: flex;\n // flex-wrap: wrap;\n // gap: space('xsmall');\n // color: $colorGrey80;\n // }\n\n // &__footer-meta-separator {\n // width: 1px;\n // background-color: currentColor;\n // flex-shrink: 0;\n // }\n\n &__card-actions {\n display: inline-flex;\n white-space: nowrap;\n }\n\n &__card-action {\n @include mq($to: medium) {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$baseColor};\n }\n\n &.is-button {\n --icon-size: #{iconSize(\"small\")};\n }\n\n &.is-placeholder {\n width: space(\"xxlarge\");\n height: space(\"xxlarge\");\n }\n\n &.is-star {\n }\n }\n\n &__card-action-popover {\n --width: auto;\n }\n\n /* Service */\n\n &--service &__subtitle {\n @include fontCurve(\"p1\");\n }\n\n &--service &__subtitle {\n @include fontCurve(\"p1\");\n }\n\n &--service &__title {\n @include fontCurve(\"h3\", \"heading\");\n }\n\n /* Has content */\n\n &--has-content &__content {\n @include spaceCurve(\"padding-bottom\", \"large\");\n padding-top: space(\"xlarge\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n\n @include mq($from: medium) {\n @include spaceCurve(\"padding-bottom\", \"medium\");\n }\n }\n\n &--has-content#{&}--service &__content {\n @include spaceCurve(\"padding\", \"regular\");\n }\n\n /* Has header */\n\n &--has-header &__header {\n padding-top: space(\"xlarge\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n }\n\n &--has-header#{&}--has-content &__content {\n padding-top: space(\"xsmall\");\n }\n\n &--has-header#{&}--service &__header {\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-left\", \"regular\");\n @include spaceCurve(\"padding-right\", \"regular\");\n }\n\n &--has-header#{&}--has-content#{&}--service &__content {\n @include spaceCurve(\"padding-top\", \"regular\");\n }\n\n /* Has footer */\n\n &--has-footer &__footer {\n @include spaceCurve(\"padding-bottom\", \"medium\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n }\n\n &--has-footer#{&}--has-content &__content {\n padding-bottom: space(\"medium\");\n }\n\n &--has-footer#{&}--service &__footer {\n @include spaceCurve(\"padding-bottom\", \"regular\");\n @include spaceCurve(\"padding-left\", \"regular\");\n @include spaceCurve(\"padding-right\", \"regular\");\n }\n\n &--has-footer#{&}--has-content#{&}--service &__content {\n @include spaceCurve(\"padding-bottom\", \"regular\");\n }\n\n /* Has tag */\n\n &--has-tag#{&}--has-header &__header {\n padding-top: space(\"xxxlarge\");\n }\n\n /* Has Link */\n\n &--has-link &__title-link,\n &--has-link &__content {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &--has-link &__title-link {\n color: $colorPrimary;\n text-decoration-line: none;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\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\n &--has-link &__header-meta,\n &--has-link &__footer-actionset,\n &--has-link &__footer-select-button {\n position: relative;\n z-index: 2;\n }\n\n &--has-link:has(#{&}__image-link:hover) &__title-link,\n &--has-link:has(#{&}__image-link:hover) &__content,\n &--has-link:has(#{&}__title-link:hover) &__title-link,\n &--has-link:has(#{&}__title-link:hover) &__content {\n color: $colorSecondary60;\n\n // &::before,\n // &::before {\n // background-color: $colorPrimary20;\n // }\n }\n\n // &__footer-arrow {\n // color: $colorPrimary;\n // }\n\n // &--has-link:hover &__footer-arrow {\n // color: $colorSecondary60;\n // }\n\n /* Interactive Subtitle */\n\n &--has-subtitle-interactive &__subtitle {\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n appearance: none;\n background: none;\n border: none;\n transition: color $baseTransitionAnimationSpeed;\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n /* Is collapsible */\n\n &--is-collapsible &__header {\n cursor: pointer;\n }\n\n /* Collapsed (Header) */\n\n &--is-collapsed,\n &--has-collapsed-header &__header {\n // .vhide-when-collapsed {\n // @include visuallyhidden;\n // }\n\n .hide-when-collapsed {\n display: none;\n }\n\n // .show-when-collapsed {\n // display: block;\n // }\n }\n\n &--is-collapsed &__header {\n // border-bottom: none;\n padding-bottom: space(\"xlarge\");\n }\n\n &--is-collapsed#{&}--service &__header {\n // border-bottom: none;\n @include spaceCurve(\"padding-bottom\", \"regular\");\n }\n\n &--is-collapsed &__card-action,\n &--has-collapsed-header &__card-action {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n /* Starred */\n\n &--is-starred &__card-action.is-star {\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n /* Hyphens */\n &--hyphens &__heading,\n &--hyphens &__title {\n hyphens: auto;\n }\n}\n\n.stzh-card__header {\n position: relative;\n}\n\n.stzh-card__badge {\n position: absolute;\n left: -5px;\n top: -5px;\n z-index: 1;\n}\n","import { Component, Element, Event, EventEmitter, forceUpdate, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhButtonChangeEvent,\n StzhCardClickEvent,\n StzhCardCollapseEvent,\n StzhCardHeaderAction,\n StzhCardHeaderActionClickEvent,\n StzhCardStarClickEvent,\n StzhCardSubtitleClickEvent,\n StzhBadgeType,\n} from \"../../index\";\n\nimport { formatHeadingForHyphenation, hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { StzhCardLocalizedText } from \"./stzh-card.localization\";\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions` and `selectable` button are not shown anymore)\n */\n@Component({\n tag: \"stzh-card\",\n styleUrl: \"stzh-card.scss\",\n scoped: true,\n})\nexport class StzhCard {\n /** Translation strings */\n @Prop() localization: StzhCardLocalizedText;\n\n /** Whether background should be grey (default) or white */\n @Prop({ reflect: true }) backgroundColor: \"grey\" | \"white\" = \"grey\";\n\n /** Variant */\n @Prop({ reflect: true }) variant: \"default\" | \"service\" = \"default\";\n\n /** Whether card is collapsed or not */\n @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n /** Whether card was starred */\n @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n /**\n * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n */\n @Prop({ reflect: true }) starrable: boolean = false;\n\n /** Whether card is selectable */\n @Prop({ reflect: true }) selectable: boolean = false;\n\n /** Whether card is checked (if card is selectable) */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** The name of the input element (if card is selectable) */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** Href of card */\n @Prop({ reflect: true }) href: string;\n\n /** target if the button is used as link (if href used) */\n @Prop() target: string;\n\n /** The value of the input element (if card is selectable) */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** Whether the element is disabled or not (if card is selectable) */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Automatic Hyphens */\n @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n /** Heading (or use heading slot instead) */\n @Prop() heading: string = \"\";\n\n /** Heading level */\n @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n /** Subtitle */\n @Prop() subtitle: string | string[] = \"\";\n private _subtitles = [];\n\n /** Card header actions */\n @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n private _headerActions: StzhCardHeaderAction[];\n\n /**\n * Set a badge text if header action badge exists (see headerActionsBadgeType for more info).\n */\n @Prop() headerActionsBadge: string;\n\n /**\n * If a header action with a badge exists inside `headerActions`, the more actions popover will automatically have a empty badge.\n * By default, it takes the badge type from the first one. With this property you can overwrite it.\n */\n @Prop() headerActionsBadgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n /**\n * Card footer actions.\n * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n * You can listen to clicks with the `stzhActionClick` event.\n */\n @Prop() footerActions: string | StzhActionsetItem[] = [];\n private _footerActions: StzhActionsetItem[];\n\n /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n @Prop() subtitleInteractive: boolean = false;\n\n /**\n * Whether sorting should be disabled.\n * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n */\n @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n /** Whether card is collapsible (only effective if href is not set) */\n @Prop({ reflect: true }) collapsible: boolean = false;\n\n /**\n * Whether movement menu items should be shown.\n * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n */\n @Prop() hideMovementActions: boolean = false;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n */\n @Prop() analyticsId: string;\n\n /** Badge */\n @Prop() badge: string = \"\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n @Element() element: HTMLStzhCardElement;\n\n /** Click event */\n @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n /** Collapse event */\n @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n /** Subtitle click event */\n @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n /** Star click event */\n @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n /** Header action click event */\n @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n @Watch(\"subtitle\")\n subtitleWatcher(newValue: string[] | string) {\n if (typeof newValue === \"string\") {\n if (newValue === \"\") {\n this._subtitles = [];\n } else {\n try {\n this._subtitles = JSON.parse(newValue);\n } catch (err) {\n this._subtitles = [newValue];\n }\n }\n } else {\n this._subtitles = newValue;\n }\n }\n\n @Watch(\"headerActions\")\n headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n if (typeof newValue === \"string\") {\n this._headerActions = JSON.parse(newValue);\n } else {\n this._headerActions = newValue;\n }\n }\n\n @Watch(\"footerActions\")\n footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._footerActions = JSON.parse(newValue);\n } else {\n this._footerActions = newValue;\n }\n }\n\n private observer: MutationObserver;\n\n private nodeChange = entries => {\n let changeInSlot = false;\n\n entries.forEach(entry => {\n if (entry.target.closest(\"[slot]\") || entry.target.hasAttribute(\"slot\")) {\n changeInSlot = true;\n }\n });\n\n if (changeInSlot) {\n forceUpdate(this.element);\n }\n };\n\n private imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\n \"stzh-popover\",\n \"stzh-tooltip\",\n \"button\",\n \"stzh-badge\",\n \"a\",\n \"input\",\n \"select\",\n \"textarea\",\n \"iframe\",\n \"details\",\n \"label\",\n \"area\",\n ];\n const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n const found = composedPathTags.some(r => filterTags.includes(r));\n\n if (!found) {\n this.collapsed = !this.collapsed;\n\n this.stzhCollapse.emit({\n component: \"stzh-card\",\n collapsed: this.collapsed,\n });\n }\n };\n\n private subtitleClick = (event: MouseEvent) => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\",\n originalEvent: event,\n });\n }\n };\n\n private starToggleClick = (event: MouseEvent) => {\n this.starred = !this.starred;\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred,\n originalEvent: event,\n });\n };\n\n private actionClick = (event: MouseEvent, action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action,\n originalEvent: event,\n });\n };\n\n private arrowUpClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"up\");\n }\n };\n\n private arrowDownClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"down\");\n }\n };\n\n private updateElementInsideSortable = () => {\n const currentSortable = this.element.closest(\"stzh-sortable\");\n\n // check if element is still inside sortable\n if (!currentSortable) {\n this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable);\n return;\n }\n\n if (this.element) {\n forceUpdate(this.element);\n }\n };\n\n private init = () => {\n const chips = this.element.querySelectorAll('stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip');\n\n const texts = this.element.querySelectorAll('stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text');\n\n chips.forEach(chip => {\n setPropsIfNull(chip, {\n size: \"small\",\n } as HTMLStzhChipElement);\n });\n\n texts.forEach(text => {\n setPropsIfNull(text, {\n size: \"inherit\",\n } as HTMLStzhTextElement);\n });\n };\n\n private handleMutation = entries => {\n this.init();\n this.nodeChange(entries);\n };\n\n private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n this.checked = event.detail.checked;\n };\n\n private handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent,\n ...(this.href ? { href: this.href } : {}),\n });\n };\n\n private findSortableChildElement(): HTMLElement | undefined {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n let element: HTMLElement = this.element;\n let sortableContainer = null;\n\n if (typeof sortable.container === \"function\") {\n sortableContainer = sortable.container();\n } else {\n sortableContainer = sortable.container;\n }\n\n while (element.parentElement && element.parentElement !== sortableContainer) {\n element = element.parentElement;\n }\n\n return element;\n }\n }\n\n async componentWillLoad() {\n this.subtitleWatcher(this.subtitle);\n this.headerActionsWatcher(this.headerActions);\n this.footerActionsWatcher(this.footerActions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n }\n }\n\n componentDidLoad() {\n this.sortable = this.element.closest(\"stzh-sortable\");\n\n if (this.sortable) {\n this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable);\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n if (objectId) {\n this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.handleMutation);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const imageUsed: boolean = hasSlot(this.element, \"image\");\n const headingUsed: boolean = hasSlot(this.element, \"heading\");\n const footerUsed: boolean = hasSlot(this.element, \"footer\");\n const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n const Heading = `h${this.headingLevel}`;\n const Subtitle = `${this.subtitleInteractive ? \"button\" : \"span\"}`;\n\n const sortableChildElement = this.findSortableChildElement();\n\n const isFirstItemInSortable =\n sortableChildElement?.parentElement &&\n Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable =\n sortableChildElement?.parentElement &&\n Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) ===\n sortableChildElement?.parentElement?.children.length - 1;\n\n const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n const hasHeading = !!this.heading || headingUsed;\n\n const hasHeader =\n hasHeading ||\n this._subtitles.length > 0 ||\n this._headerActions.length > 0 ||\n this.starrable ||\n sortableActionsEnabled ||\n !!this.badge ||\n this.badgeEmpty;\n\n const hasFooter = footerUsed || this._footerActions.length > 0 || this.selectable;\n\n const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);\n\n const uniqueId = `--is-described-${Math.random().toString(36).slice(2, 9)}`;\n const descriptionId = `stzh-card${uniqueId}`;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--background-grey\": this.backgroundColor === \"grey\",\n \"stzh-card--background-white\": this.backgroundColor === \"white\",\n \"stzh-card--has-link\": !!this.href,\n \"stzh-card--has-image\": imageUsed,\n \"stzh-card--has-content\": contentUsed,\n \"stzh-card--has-subtitle\": !!this.subtitle,\n \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n \"stzh-card--has-header\": hasHeader,\n \"stzh-card--has-footer\": hasFooter,\n \"stzh-card--is-collapsible\": this.collapsible,\n \"stzh-card--is-collapsed\": this.collapsed,\n \"stzh-card--is-starred\": this.starred,\n \"stzh-card--is-checked\": this.checked,\n \"stzh-card--is-sortable\": sortableEnabled,\n [`stzh-card--${this.variant}`]: !!this.variant,\n \"stzh-card--hyphens\": this.hyphensEnabled,\n };\n\n return (\n <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n <article\n // ref={(el) => (this.mainElement = el as HTMLElement)}\n class={classes}\n onClick={!this.href ? this.handleCardClick : null}\n >\n <a\n ref={el => (this.imageLinkElement = el as HTMLAnchorElement)}\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class=\"stzh-card__image-link\"\n href={this.href ?? null}\n target={this.target}\n onClick={this.href ? this.handleCardClick : null}\n >\n <slot name=\"image\"></slot>\n </a>\n <div class=\"stzh-card__content-wrapper\">\n <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n <header class=\"stzh-card__header\" onClick={this.headerClick}>\n {(this.badge || this.badgeEmpty) && (\n <stzh-badge class=\"stzh-card__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n )}\n <div class=\"stzh-card__header-top\">\n <div class=\"stzh-card__header-left\">\n <div class=\"stzh-card__title-area\">\n {hasHeading && (\n <Heading class=\"stzh-card__title\">\n <a\n ref={el => (this.titleLinkElement = el as HTMLAnchorElement)}\n class=\"stzh-card__title-link\"\n href={this.href ?? null}\n target={this.target}\n onClick={this.href ? this.handleCardClick : null}\n aria-describedby={descriptionId}\n >\n <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? formatHeadingForHyphenation(this.heading) : <slot name=\"heading\"></slot>}\n </div>\n </a>\n </Heading>\n )}\n <span id={descriptionId} hidden>\n {this.localization?.clickTitle}\n </span>\n {this._subtitles.length > 0 && (\n <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n {this._subtitles.map(subtitle => (\n <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n ))}\n </Subtitle>\n )}\n </div>\n </div>\n <div class=\"stzh-card__header-right\">\n <div class=\"stzh-card__card-actions\" onClick={e => e.stopPropagation()}>\n {this.starrable && (\n <stzh-tooltip>\n <stzh-button\n class=\"stzh-card__card-action is-star\"\n icon={this.starred ? \"star-filled\" : \"star\"}\n variant=\"tertiary\"\n size=\"tiny\"\n iconOnly={true}\n onClick={this.starToggleClick}\n ></stzh-button>\n <div slot=\"content\">\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </div>\n </stzh-tooltip>\n )}\n\n {(this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class={{\n \"stzh-card__card-action-popover\": true,\n // \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n }}\n >\n <stzh-button\n class=\"stzh-card__card-action is-further\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-vertical\"\n iconOnly={true}\n badge={this.headerActionsBadge}\n badgeEmpty={headerActionsWithBadge.length > 0}\n badgePosition=\"icon\"\n badgeType={this.headerActionsBadgeType || headerActionsWithBadge[0]?.badgeType || \"default\"}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this._headerActions.map(action => (\n <stzh-menu-item\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e: MouseEvent) => {\n this.actionClick(e, action);\n }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n\n {sortableActionsEnabled && (\n <Fragment>\n {!isFirstItemInSortable && (\n <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n {this.localization.actionMoveUp}\n </stzh-menu-item>\n )}\n {!isLastItemInSortable && (\n <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n {this.localization.actionMoveDown}\n </stzh-menu-item>\n )}\n </Fragment>\n )}\n\n {this.starrable && (\n <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </stzh-menu-item>\n )}\n </stzh-menu>\n </stzh-popover>\n )}\n </div>\n </div>\n </div>\n\n <div class=\"stzh-card__header-meta\">\n <slot name=\"meta\"></slot>\n </div>\n </header>\n\n <div class=\"stzh-card__content hide-when-collapsed\">\n <slot name=\"content\"></slot>\n </div>\n\n <div class=\"stzh-card__footer hide-when-collapsed\">\n <slot name=\"footer\">\n {this._footerActions.length > 0 && (\n <stzh-actionset class=\"stzh-card__footer-actionset\" actions={this._footerActions}></stzh-actionset>\n )}\n\n {this.selectable && (\n <stzh-button\n class=\"stzh-card__footer-select-button\"\n fullwidth\n type=\"radio\"\n variant=\"secondary\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n label={this.localization.select}\n onStzhChange={this.handleSelectionChange}\n ></stzh-button>\n )}\n </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/p-D992C4UI.js ADDED Viewed

@@ -0,0 +1,131 @@
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { S as StzhSocialmediastreamItemActionVariant } from './p-uD4ilJut.js';
+import { d as defineCustomElement$3 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$2 } from './p-tjDhZ0rK.js';
+import { d as defineCustomElement$1 } from './p-CEPvA7qH.js';
+const stzhSocialmediastreamItemCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}: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-socialmediastream-item{display:block;background-color:var(--stzh-color-grey10);text-decoration:none;color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:visited{color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover{background-color:var(--stzh-color-secondary10);color:var(--stzh-color-black)}.stzh-socialmediastream-item__image{position:relative}.stzh-socialmediastream-item__ratio{--background-color:var(--image-background-color)}.stzh-socialmediastream-item__image-inner-wrapper{background-color:var(--image-background-color);position:absolute;inset:0;height:100%}.stzh-socialmediastream-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-head{display:flex;align-items:center}.stzh-socialmediastream-item__content-head stzh-icon{--color:var(--stzh-color-primary)}.stzh-socialmediastream-item__content-title{width:100%;--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover .stzh-socialmediastream-item__content-title{--color:var(--stzh-color-black)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-body{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item__content-body a{word-wrap:break-word;color:var(--stzh-link-color)}.stzh-socialmediastream-item__content-body a:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__content-body a+a{margin-left:var(--stzh-space-xxsmall)}.stzh-socialmediastream-item{}.stzh-socialmediastream-item__content-footer{display:flex;align-items:center;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__action{text-decoration:none;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);color:var(--stzh-link-color);display:flex;align-items:center;gap:var(--stzh-space-xxsmall);line-height:1}.stzh-socialmediastream-item__action:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__action stzh-icon{--size:1rem}`;
+const StzhSocialmediastreamItem = /*@__PURE__*/ proxyCustomElement(class StzhSocialmediastreamItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Socialmediastream item */
+        this.item = "";
+        this.init = () => {
+            this.itemWatcher(this.item);
+        };
+    }
+    itemWatcher(newValue) {
+        if (!newValue) {
+            this._item = undefined;
+        }
+        else if (typeof newValue === "string") {
+            try {
+                this._item = JSON.parse(newValue);
+            }
+            catch (e) {
+                this._item = undefined;
+            }
+        }
+        else {
+            this._item = newValue;
+        }
+    }
+    getIconName(item) {
+        switch (item.channel) {
+            case "facebook":
+                return "facebook";
+            case "twitter":
+            case "x":
+                return "twitter";
+            case "instagram":
+                return "instagram";
+            case "youtube":
+                return "youtube";
+            default:
+                return "warning";
+        }
+    }
+    getActionIconName(variant) {
+        switch (variant) {
+            case StzhSocialmediastreamItemActionVariant.comments:
+                return "facebook-comment";
+            case StzhSocialmediastreamItemActionVariant.likes:
+                return "like-hand";
+            case StzhSocialmediastreamItemActionVariant.shares:
+                return "share";
+        }
+    }
+    getParsedDate(dateStr) {
+        const parsedDate = new Date(dateStr);
+        if (isNaN(parsedDate.getTime())) {
+            return null;
+        }
+        return parsedDate;
+    }
+    connectedCallback() {
+        this.init();
+    }
+    async componentWillLoad() {
+        if (!this.localization) {
+            this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "socialmediastream-item");
+        }
+        if (!this.dateAdapter) {
+            this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats, this.localization.$globals);
+        }
+    }
+    render() {
+        const classes = {
+            "stzh-socialmediastream-item": true,
+        };
+        return (h(Host, { key: '02b47c31655dd17c6780e55f89c03174a6cd0fbe' }, h("a", { key: '553c292938e7d92b5873fc6414e2bb6752e069a2', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: 'db0c76e030975c54cc36bd69ac83ea95f6aafd99', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: 'd1e215ae2901aaae74363b7dd0253885785a0758', ratio: "1:1" }), h("div", { key: 'c5ea2339d50b35ca58229e52b6dc44ecc1ec1ab1', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: '61295cf0f2698761a789cecdf6f25fb985f850bd', src: this._item.image, alt: this._item.account.title })))), h("div", { key: 'd74367bd383159e4716dd16ee81b46f75b3d6da5', class: "stzh-socialmediastream-item__content" }, h("div", { key: 'b606e796d7c2fa3c65c03748dae6a281396b1d1c', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: 'c7cebb08c95143b926bd32742d4238cb1fb1d313', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: 'cbd78e538569210632a4e2e162d1c9b8ea2b0938' }, this._item.account.title), h("br", { key: '4fba40b9f76f714030da1a6ea0495415c16fb61e' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: 'd399eda087aa0bd0b068a2fe022533fd988a4532', name: this.getIconName(this._item) })), h("div", { key: '35696be54d46e0d93f151618f2cdf9c6ffebc8e7', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: 'cb3daf025779fde58c3c70c0bdfabc9675088ee5', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
+            this._item.actions.map(action => (h("a", { href: action.url, title: action.title, class: "stzh-socialmediastream-item__action", target: "_blank" }, h("stzh-icon", { name: this.getActionIconName(action.variant) }), action.count))))))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "item": ["itemWatcher"]
+    }; }
+    static get style() { return stzhSocialmediastreamItemCss(); }
+}, [256, "stzh-socialmediastream-item", {
+        "item": [1],
+        "localization": [16],
+        "dateAdapter": [16]
+    }, undefined, {
+        "item": ["itemWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-socialmediastream-item", "stzh-icon", "stzh-ratio", "stzh-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-socialmediastream-item":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhSocialmediastreamItem);
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-ratio":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { StzhSocialmediastreamItem as S, defineCustomElement as d };
+//# sourceMappingURL=p-D992C4UI.js.map
+//# sourceMappingURL=p-D992C4UI.js.map

package/dist/components/p-D992C4UI.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-D992C4UI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/CMS/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n display: block;\n background-color: var(--stzh-color-grey10);\n text-decoration: none;\n color: var(--stzh-color-grey80);\n\n &:visited {\n color: var(--stzh-color-grey80);\n }\n\n &:hover {\n background-color: var(--stzh-color-secondary10);\n color: var(--stzh-color-black);\n }\n\n &__image {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n }\n\n &__image img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* Content */\n\n &__content {\n padding: var(--stzh-space-xsmall) var(--stzh-space-medium)\n var(--stzh-space-small);\n display: flex;\n flex-direction: column;\n gap: var(--stzh-space-small);\n }\n\n /* Content head */\n\n &__content-head {\n display: flex;\n align-items: center;\n }\n\n &__content-head stzh-icon {\n --color: var(--stzh-color-primary);\n }\n\n &__content-title {\n width: 100%;\n --color: var(--stzh-color-grey80);\n }\n\n &:hover &__content-title {\n --color: var(--stzh-color-black);\n }\n\n /* Content Body */\n\n &__content-body {\n @include font(medium);\n @include fontSize(micro);\n --color: var(--stzh-color-grey80);\n }\n\n &__content-body a {\n word-wrap: break-word;\n color: var(--stzh-link-color);\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__content-body a + a {\n margin-left: space(xxsmall);\n }\n\n /* Content Footer and Actions */\n\n &__content-footer {\n display: flex;\n align-items: center;\n gap: var(--stzh-space-small);\n }\n\n &__action {\n text-decoration: none;\n @include fontSize(pico);\n color: var(--stzh-link-color);\n display: flex;\n align-items: center;\n gap: var(--stzh-space-xxsmall);\n line-height: 1;\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__action stzh-icon {\n --size: 16px;\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n StzhLocaleAdapter,\n StzhLocaleComponent,\n StzhSocialmediastreamItemActionVariant,\n StzhSocialmediastreamItemData,\n} from \"../../../index\";\n\n@Component({\n tag: \"stzh-socialmediastream-item\",\n styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n /** Socialmediastream item */\n @Prop() item: StzhSocialmediastreamItemData | string = \"\";\n private _item: StzhSocialmediastreamItemData | undefined;\n\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /**\n * Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n */\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n @Watch(\"item\")\n itemWatcher(newValue: StzhSocialmediastreamItemData | string) {\n if (!newValue) {\n this._item = undefined;\n } else if (typeof newValue === \"string\") {\n try {\n this._item = JSON.parse(newValue);\n } catch (e) {\n this._item = undefined;\n }\n } else {\n this._item = newValue;\n }\n }\n\n private init = () => {\n this.itemWatcher(this.item);\n };\n\n private getIconName(item: StzhSocialmediastreamItemData) {\n switch (item.channel) {\n case \"facebook\":\n return \"facebook\";\n case \"twitter\":\n case \"x\":\n return \"twitter\";\n case \"instagram\":\n return \"instagram\";\n case \"youtube\":\n return \"youtube\";\n default:\n return \"warning\";\n }\n }\n\n private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n switch (variant) {\n case StzhSocialmediastreamItemActionVariant.comments:\n return \"facebook-comment\";\n case StzhSocialmediastreamItemActionVariant.likes:\n return \"like-hand\";\n case StzhSocialmediastreamItemActionVariant.shares:\n return \"share\";\n }\n }\n\n private getParsedDate(dateStr: string): Date | null {\n const parsedDate = new Date(dateStr);\n if (isNaN(parsedDate.getTime())) {\n return null;\n }\n return parsedDate;\n }\n\n connectedCallback() {\n this.init();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n }\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals,\n );\n }\n }\n\n render() {\n const classes = {\n \"stzh-socialmediastream-item\": true,\n };\n\n return (\n <Host>\n <a class={classes} href={this._item.link} target=\"_blank\">\n {this._item.image && (\n <div class=\"stzh-socialmediastream-item__image\">\n <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n <img src={this._item.image} alt={this._item.account.title} />\n </div>\n </div>\n )}\n <div class=\"stzh-socialmediastream-item__content\">\n <div class=\"stzh-socialmediastream-item__content-head\">\n <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n <strong>{this._item.account.title}</strong>\n <br />\n {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n </stzh-text>\n <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n </div>\n <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n {this._item.actions &&\n this._item.actions.map(action => (\n <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n {action.count}\n </a>\n ))}\n </div>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/p-DDCDc_xz.js ADDED Viewed

@@ -0,0 +1,288 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BOU3cRYl.js';
+import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-CUGRmgip.js';
+import { d as defineCustomElement$7 } from './p-6ax-mKBx.js';
+import { d as defineCustomElement$6 } from './p-8LohUgRI.js';
+import { d as defineCustomElement$5 } from './p-CjpVcYf4.js';
+import { d as defineCustomElement$4 } from './p-DkuigYKB.js';
+import { d as defineCustomElement$3 } from './p-CphAvN9z.js';
+import { d as defineCustomElement$2 } from './p-CEPvA7qH.js';
+import { d as defineCustomElement$1 } from './p-Drej3tyF.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,[stzh-hidden].sc-stzh-datalist-h{display:none}.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(
+    --stzh-datalist-grid-template-areas,
+    "list list list list"
+  );--grid-template-columns:var(
+    --stzh-datalist-grid-template-columns,
+    repeat(4, minmax(0, 1fr))
+  );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(
+      --stzh-datalist-grid-template-areas,
+      "list list list list"
+    )}}@media screen and (min-width: 900px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-medium);--grid-template-areas:var(
+      --stzh-datalist-grid-template-areas,
+      "list list list list list list list list"
+    );--grid-template-columns:var(
+      --stzh-datalist-grid-template-columns,
+      repeat(8, minmax(0, 1fr))
+    )}}@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>.layout_column>*:not([class*=cq-]),.sc-stzh-datalist-h.sc-stzh-datalist-s>*: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)
+  )}[vertical-gap=small].sc-stzh-datalist-h .stzh-datalist__list.sc-stzh-datalist{grid-template-rows:auto}@media screen and (max-width: 899px){[vertical-gap=small].sc-stzh-datalist-h .stzh-datalist__list.sc-stzh-datalist{row-gap:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){[vertical-gap=small].sc-stzh-datalist-h .stzh-datalist__list.sc-stzh-datalist{row-gap:var(--stzh-space-xxsmall)}}.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);column-gap:var(--stzh-grid-gutter)}@media screen and (min-width: 600px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-datalist.sc-stzh-datalist{display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}.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}@media screen and (max-width: 599px){.stzh-datalist--table.stzh-datalist--big-label.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{--list-display:flex;flex-direction:column;gap:var(--stzh-space-xxxsmall)}}`;
+const StzhDatalist = /*@__PURE__*/ proxyCustomElement(class StzhDatalist extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.stzhVariantChange = createEvent(this, "stzhVariantChange");
+        this.stzhBigLabelChange = createEvent(this, "stzhBigLabelChange");
+        this.stzhDirectionChange = createEvent(this, "stzhDirectionChange");
+        /** Variant */
+        this.variant = "default";
+        /** With big label */
+        this.bigLabel = false;
+        /** Columns */
+        this.columns = 1;
+        /** Direction */
+        this.direction = "vertical";
+        /**Vertical Gap between items */
+        this.verticalGap = "default";
+        /**
+         * Whether to disable min-width of datalist item label for the `horizontal` variant.
+         *
+         * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).
+         * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.
+         *
+         * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.
+         */
+        // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;
+        /**
+         * Items in datalist
+         * Array of objects that must at least include `value` attribute.
+         * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:
+         * `[{"value":"Value 1", "label": "Label 1"}, {"value":"Value 2", "label": "Label 2", "items": [...]}]`
+         */
+        this.items = [];
+        this._items = [];
+        this.currentColumns = 1;
+        this.setCurrentDirection = () => {
+            if (media("ultra").matches && this.directionUltra) {
+                this.currentDirection = this.directionUltra;
+            }
+            else if (media("large").matches && this.directionLarge) {
+                this.currentDirection = this.directionLarge;
+            }
+            else if (media("medium").matches && this.directionMedium) {
+                this.currentDirection = this.directionMedium;
+            }
+            else if (media("small").matches && this.directionSmall) {
+                this.currentDirection = this.directionSmall;
+            }
+            else {
+                this.currentDirection = this.direction;
+            }
+        };
+        this.setCurrentColumns = () => {
+            if (media("ultra").matches && this.columnsUltra) {
+                this.currentColumns = this.columnsUltra;
+            }
+            else if (media("large").matches && this.columnsLarge) {
+                this.currentColumns = this.columnsLarge;
+            }
+            else if (media("medium").matches && this.columnsMedium) {
+                this.currentColumns = this.columnsMedium;
+            }
+            else if (media("small").matches && this.columnsSmall) {
+                this.currentColumns = this.columnsSmall;
+            }
+            else {
+                this.currentColumns = this.columns;
+            }
+        };
+        this.resizeHandler = () => {
+            this.setCurrentDirection();
+            this.setCurrentColumns();
+        };
+    }
+    directionWatcher() {
+        this.setCurrentDirection();
+    }
+    columnsWatcher() {
+        this.setCurrentColumns();
+    }
+    currentDirectionWatcher(newValue) {
+        this.stzhDirectionChange.emit({
+            component: "stzh-datalist",
+            value: newValue,
+        });
+    }
+    variantWatcher(newValue) {
+        this.stzhVariantChange.emit({
+            component: "stzh-datalist",
+            value: newValue,
+        });
+    }
+    bigLabelWatcher(newValue) {
+        this.stzhBigLabelChange.emit({
+            component: "stzh-datalist",
+            value: newValue,
+        });
+    }
+    itemsWatcher(newValue) {
+        if (typeof newValue === "string") {
+            this._items = JSON.parse(newValue);
+        }
+        else {
+            this._items = newValue;
+        }
+    }
+    /** Get current direction */
+    async getCurrentDirection() {
+        return this.currentDirection;
+    }
+    async componentWillLoad() {
+        this.itemsWatcher(this.items);
+        this.bigLabelWatcher(this.bigLabel);
+        this.resizeHandler();
+    }
+    connectedCallback() {
+        addMediaChangeListener(this.resizeHandler);
+    }
+    disconnectedCallback() {
+        removeMediaChangeListener(this.resizeHandler);
+    }
+    render() {
+        const classes = {
+            "stzh-datalist": true,
+            "stzh-datalist--has-multiple-columns": this.currentColumns > 1,
+            "stzh-datalist--big-label": this.bigLabel,
+            [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,
+            [`stzh-datalist--${this.variant}`]: !!this.variant,
+            [`stzh-datalist--vertical-gap-${this.verticalGap}`]: !!this.verticalGap,
+        };
+        return (h(Host, { key: 'f55bf6edb128f70d0472e60d678d2d1bf6886063', "is-direction": this.currentDirection, "vertical-gap": this.verticalGap, style: {
+                "--columns": this.currentColumns ? this.currentColumns.toString() : null,
+            } }, h("div", { key: '15956b8fc489b222fd25bacaa54a27a0e55c556c', class: classes }, h("div", { key: 'd79210ec8fb288e7c91b68777ad58a0dfbb7f3c3', class: "stzh-datalist__wrapper" }, h("div", { key: '3f29eb25cd39c0981f2f665595615ebc689ec638', class: "stzh-datalist__list", role: "list" }, this._items.map(item => (h("stzh-datalist-item", Object.assign({}, item, { hasNested: !!item.items }), item.items && item.items.length > 0 && h("stzh-datalist", { items: item.items })))), h("slot", { key: 'e92b5ca486764202c52ea32f7aec53e456e0c606' }))))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "direction": ["directionWatcher"],
+        "directionSmall": ["directionWatcher"],
+        "directionMedium": ["directionWatcher"],
+        "directionLarge": ["directionWatcher"],
+        "directionUltra": ["directionWatcher"],
+        "columns": ["columnsWatcher"],
+        "columnsSmall": ["columnsWatcher"],
+        "columnsMedium": ["columnsWatcher"],
+        "columnsLarge": ["columnsWatcher"],
+        "columnsUltra": ["columnsWatcher"],
+        "currentDirection": ["currentDirectionWatcher"],
+        "variant": ["variantWatcher"],
+        "bigLabel": ["bigLabelWatcher"],
+        "items": ["itemsWatcher"]
+    }; }
+    static get style() { return stzhDatalistCss(); }
+}, [262, "stzh-datalist", {
+        "variant": [513],
+        "bigLabel": [516, "big-label"],
+        "columns": [514],
+        "columnsSmall": [514, "columns-small"],
+        "columnsMedium": [514, "columns-medium"],
+        "columnsLarge": [514, "columns-large"],
+        "columnsUltra": [514, "columns-ultra"],
+        "direction": [513],
+        "directionSmall": [513, "direction-small"],
+        "directionMedium": [513, "direction-medium"],
+        "directionLarge": [513, "direction-large"],
+        "directionUltra": [513, "direction-ultra"],
+        "verticalGap": [513, "vertical-gap"],
+        "items": [1],
+        "currentColumns": [32],
+        "currentDirection": [32],
+        "getCurrentDirection": [64]
+    }, undefined, {
+        "direction": ["directionWatcher"],
+        "directionSmall": ["directionWatcher"],
+        "directionMedium": ["directionWatcher"],
+        "directionLarge": ["directionWatcher"],
+        "directionUltra": ["directionWatcher"],
+        "columns": ["columnsWatcher"],
+        "columnsSmall": ["columnsWatcher"],
+        "columnsMedium": ["columnsWatcher"],
+        "columnsLarge": ["columnsWatcher"],
+        "columnsUltra": ["columnsWatcher"],
+        "currentDirection": ["currentDirectionWatcher"],
+        "variant": ["variantWatcher"],
+        "bigLabel": ["bigLabelWatcher"],
+        "items": ["itemsWatcher"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["stzh-datalist", "stzh-badge", "stzh-button", "stzh-datalist", "stzh-datalist-item", "stzh-icon", "stzh-status", "stzh-text", "stzh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "stzh-datalist":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), StzhDatalist);
+            }
+            break;
+        case "stzh-badge":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "stzh-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "stzh-datalist":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement();
+            }
+            break;
+        case "stzh-datalist-item":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "stzh-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "stzh-status":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "stzh-text":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "stzh-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { StzhDatalist as S, defineCustomElement as d };
+//# sourceMappingURL=p-DDCDc_xz.js.map
+//# sourceMappingURL=p-DDCDc_xz.js.map

package/dist/components/p-DDCDc_xz.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DDCDc_xz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\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(\n var(--columns),\n auto minmax(auto, 1fr) auto var(--columns-gap)\n );\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 // 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 &[is-direction=\"horizontal\"] {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto minmax(auto, 1fr) auto auto var(--columns-gap)\n );\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(\n var(--columns),\n auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap)\n );\n }\n }\n\n &[variant=\"table\"] {\n --list-grid-template-columns: repeat(\n var(--columns),\n auto auto minmax(auto, 1fr) auto auto var(--columns-gap)\n );\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(\n var(--columns),\n auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap)\n );\n }\n }\n\n &[vertical-gap=\"small\"] {\n .stzh-datalist__list {\n grid-template-rows: auto;\n @include mq($to: medium) {\n row-gap: space(\"xsmall\");\n }\n @include mq($from: medium) {\n row-gap: space(\"xxsmall\");\n }\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 /* Table variant with big label */\n\n &--table#{&}--big-label &__list {\n @include mq($to: small) {\n --list-display: flex;\n flex-direction: column;\n gap: space(\"xxxsmall\");\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhDatalistBigLabelChangeEvent,\n StzhDatalistDirection,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistItemEntry,\n StzhDatalistVariant,\n StzhDatalistVariantChangeEvent,\n} from \"../../index\";\n\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/**\n * @slot - Slot for any content\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 /** With big label */\n @Prop({ reflect: true }) bigLabel: boolean = false;\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 /**Vertical Gap between items */\n @Prop({ reflect: true }) verticalGap: \"default\" | \"small\" = \"default\";\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 /** Big label attribute change event */\n @Event() stzhBigLabelChange: EventEmitter<StzhDatalistBigLabelChangeEvent>;\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(\"bigLabel\")\n bigLabelWatcher(newValue: boolean) {\n this.stzhBigLabelChange.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.bigLabelWatcher(this.bigLabel);\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--big-label\": this.bigLabel,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n [`stzh-datalist--${this.variant}`]: !!this.variant,\n [`stzh-datalist--vertical-gap-${this.verticalGap}`]: !!this.verticalGap,\n };\n\n return (\n <Host\n is-direction={this.currentDirection}\n vertical-gap={this.verticalGap}\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} hasNested={!!item.items}>\n {item.items && item.items.length > 0 && <stzh-datalist items={item.items}></stzh-datalist>}\n </stzh-datalist-item>\n ))}\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}