npm - @oiz/stzh-components - Versions diffs - 4.3.0 → 4.3.1 - Mend

@oiz/stzh-components 4.3.0 → 4.3.1

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

package/dist/components/{p-8054dcb8.js → p-c8b4046a.js} RENAMED Viewed

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-f4adb3cd.js';
-import { d as defineCustomElement$8 } from './p-fb02e9f7.js';
-import { d as defineCustomElement$7 } from './p-55350e52.js';
+import { d as defineCustomElement$8 } from './p-652ae542.js';
+import { d as defineCustomElement$7 } from './p-bd503085.js';
 import { d as defineCustomElement$6 } from './p-4d57271c.js';
 import { d as defineCustomElement$5 } from './p-bc4d67fa.js';
-import { d as defineCustomElement$4 } from './p-fc1aafb5.js';
+import { d as defineCustomElement$4 } from './p-3c92a168.js';
 import { d as defineCustomElement$3 } from './p-7c23f23e.js';
 import { d as defineCustomElement$2 } from './p-9b5c568d.js';
 import { d as defineCustomElement$1 } from './p-d2f9a11a.js';
@@ -132,7 +132,7 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class StzhActionset exten
             "stzh-actionset--has-collapsed-items": this.actionsCollapsed.length > 0,
             [`stzh-actionset--${this.variant}`]: !!this.variant
         };
-        const Action = (action, disableTabbing) => (h("stzh-button", { key: 'f6340f82b621bea452323b5fb3b77d8e73daa419', a11yTabindex: disableTabbing ? "-1" : null, class: {
+        const Action = (action, disableTabbing) => (h("stzh-button", { key: '2397d5f1ac9b33777a6f9abbc5c48ad8b788eede', a11yTabindex: disableTabbing ? "-1" : null, class: {
                 "stzh-actionset__action": true,
                 "is-button": true
             }, label: action.label, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
@@ -140,7 +140,7 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class StzhActionset exten
                 : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
                 ? action.size
                 : (this.variant === "stack" ? "small" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }));
-        return (h(Host, { key: 'dc433c2f3d9b50dcbe38856a9350d5f43b0039e7', "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { key: '015810c00e4b173726a680b2a2de7226b1764300', class: classes }, h("div", { key: '861acb3025044202b99545e714d8b12cf811b0b7', class: "stzh-actionset__actions", role: "group" }, h("div", { key: '54d2901933fb57aed73ac8e24748857262ca50ed', ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
+        return (h(Host, { key: 'bc7eedb7e34b63625b1b31e67a512e16d0cd6ef1', "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { key: '88a948febbe5ccfa2dc336926ea1064571797c3b', class: classes }, h("div", { key: '0ad9a554da91561f695f1fc3ffc8f8747b616308', class: "stzh-actionset__actions", role: "group" }, h("div", { key: '9de772d0bc60f83c6d1071e9019933b23a75a9f3', ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
             || (!this.dynamicActions &&
                 this.actionsCollapsed.indexOf(action) === -1))
             &&
@@ -148,15 +148,15 @@ const StzhActionset = /*@__PURE__*/ proxyCustomElement(class StzhActionset exten
                     ?
                         h("stzh-tooltip", { strategy: "fixed", content: action.tooltipContent }, Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))
                     :
-                        Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))))), h("div", { key: '8d9e67ec27d04f9a974d05d9d17bf1212d432447', class: "stzh-actionset__action-popover-wrapper" }, h("stzh-popover", { key: '51d1686ae773c5264a7fcaf622ffd841ce81ac07', label: this.variant === "stack"
+                        Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1))))), h("div", { key: '1f60df5fd4c399a9466577c537890ba86d2b6907', class: "stzh-actionset__action-popover-wrapper" }, h("stzh-popover", { key: '8604dae463d92ce1b2e9b9c58a04d6303467eb11', label: this.variant === "stack"
                 ? this.localization.furtherActions
-                : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { key: '5a8fa9b52129d2f70088d40acdd8dd5867ac989e', fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
+                : (!this.isMedium ? this.localization.actions : ""), strategy: "fixed", placement: this.popoverPlacement, class: "stzh-actionset__action-popover" }, h("stzh-button", { key: '3adae7941f1a7872b32a7a03458f0c4e5290d8be', fullwidth: true, disabled: this.actionsCollapsed.length === 0, class: "stzh-actionset__action is-further", variant: this.popoverButtonVariant !== ""
                 ? this.popoverButtonVariant
                 : (this.variant === "stack" ? "secondary" : "tertiary"), size: this.popoverButtonSize !== ""
                 ? this.popoverButtonSize
                 : (this.variant === "stack" ? "small" : "tiny"), icon: this.variant === "stack" ? "angle-down" : "more-vertical", iconOnly: this.variant === "overflow" && this.isMedium, iconPosition: "right", label: this.variant === "stack"
                 ? this.localization.furtherActions
-                : (!this.isMedium ? this.localization.actions : ""), a11yLabel: this.variant === "overflow" && this.localization.actions }), h("stzh-menu", { key: '4b3acf5168c020daac317febd032b521d754bde4', slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
+                : (!this.isMedium ? this.localization.actions : ""), a11yLabel: this.variant === "overflow" && this.localization.actions }), h("stzh-menu", { key: 'a1b64371b2f294de441bba73b2b65c41701c3176', slot: "content" }, this.actionsCollapsed.map(action => (h("stzh-menu-item", {
             // class="hide-medium show-when-collapsed"
             icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => { this.actionClick(action, e); }
         }, action.label))))))))));
@@ -236,4 +236,4 @@ function defineCustomElement() {
 export { StzhActionset as S, defineCustomElement as d };
-//# sourceMappingURL=p-8054dcb8.js.map
+//# sourceMappingURL=p-c8b4046a.js.map

package/dist/components/{p-8054dcb8.js.map → p-c8b4046a.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-8054dcb8.js","mappings":"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","names":[],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-actionset {\n &__actions {\n display: flex;\n align-items: center;\n }\n\n &__actions-wrapper {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n overflow: hidden;\n }\n\n &__action {\n &:not(:last-child) {\n margin-right: space('xsmall');\n }\n }\n\n &__action-popover-wrapper {\n opacity: 0;\n }\n\n &--has-collapsed-items &__action-popover-wrapper {\n opacity: 1;\n }\n\n &--has-collapsed-items &__action-popover {\n --width: auto;\n }\n\n /* Overflow variant /\n\n &--overflow &__action {\n @include mq($from: medium) {\n --white-space: nowrap;\n }\n }\n\n / Stack variant /\n\n &--stack &__actions {\n @include mq($to: small) {\n flex-direction: column;\n align-items: stretch;\n }\n }\n\n &--stack &__actions-wrapper { \n @include mq($to: small) {\n flex-direction: column;\n align-items: stretch;\n }\n }\n\n &--stack &__action {\n @include mq($from: small) {\n --white-space: nowrap;\n }\n\n &:not(:last-child) {\n @include mq($to: small) {\n margin-bottom: space('xsmall');\n margin-right: 0;\n }\n }\n }\n\n &--stack &__action-popover-wrapper {\n @include mq($to: small) {\n margin-top: space('xsmall');\n }\n }\n\n // Hide more action popover on small if it has no collapsed items\n\n &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n @include mq($to: small) {\n display: none;\n }\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n Placement,\n} from \"@floating-ui/dom\";\n\n/\n /\n@Component({\n tag: \"stzh-actionset\",\n styleUrl: \"stzh-actionset.scss\",\n scoped: true\n})\nexport class StzhActionset {\n /** Translation strings /\n @Prop() localization: StzhActionsetLocalizedText;\n\n /* Variant determining what position the action buttons are /\n @Prop({ reflect: true }) variant: \"stack\" \| \"overflow\" = \"stack\";\n\n /* Button variant of popover button (button thats holds collapsed actions) /\n @Prop({ reflect: true }) popoverButtonVariant: \"\" \| \"default\" \| \"secondary\" \| \"tertiary\" = \"\";\n\n /* Button size of popover button (button that holds collapsed actions) /\n @Prop({ reflect: true }) popoverButtonSize: \"\" \| \"default\" \| \"small\" \| \"tiny\" = \"\";\n\n /* Popover placement of button that holds collapsed actions /\n @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n /\n Card header actions.\n * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n /\n @Prop() actions: StzhActionsetItem[] \| string = [];\n private _actions: StzhActionsetItem[] = [];\n\n /* Header action click event */\n @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n @Element() element: HTMLStzhActionsetElement;\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhActionsetItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @State() actionsCollapsed: StzhActionsetItem[] = [];\n @State() dynamicActions: boolean;\n @State() isSmall: boolean;\n @State() isMedium: boolean;\n\n private actionsElement: HTMLElement;\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-actionset\",\n action,\n originalEvent\n });\n }\n\n private update = () => {\n this.isSmall = media(\"small\").matches;\n this.isMedium = media(\"medium\").matches;\n\n if (!this.actionsElement) {\n return;\n }\n\n Object.assign(this.actionsElement.style, {\n width: null,\n height: null\n });\n\n let newActionsVisible = 0;\n\n if (\n this.variant === \"overflow\" && this.isMedium\n \|\| this.variant === \"stack\" && this.isSmall\n ) {\n this.dynamicActions = true;\n\n let newActionsHeight = 0;\n let newActionsWidth = 0;\n\n // update height and width\n Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n // check which item is visible and\n if (child.offsetTop === 0) {\n newActionsVisible++;\n\n const { width, height } = child.getBoundingClientRect();\n\n const style = getComputedStyle(child);\n const marginLeft = parseInt(style.marginLeft);\n const marginRight = parseInt(style.marginRight);\n const marginTop = parseInt(style.marginTop);\n const marginBottom = parseInt(style.marginBottom);\n\n const childWidth = width + marginLeft + marginRight;\n const childHeight = height + marginTop + marginBottom;\n\n if (newActionsHeight < childHeight) {\n newActionsHeight = childHeight;\n }\n\n newActionsWidth = newActionsWidth + childWidth;\n }\n });\n\n Object.assign(this.actionsElement.style, {\n width: `${newActionsWidth}px`,\n height: `${newActionsHeight}px`\n });\n } else {\n this.dynamicActions = false;\n\n if (this.variant === \"overflow\") {\n newActionsVisible = 0;\n } else if (this.variant === \"stack\") {\n newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n }\n }\n\n this.actionsCollapsed = this._actions.slice(newActionsVisible);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private mediaChangeHandler = () => {\n this.actionsCollapsed = [];\n requestAnimationFrame(this.update);\n }\n\n async componentWillLoad() {\n this.actionsWatcher(this.actions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n }\n }\n\n connectedCallback() {\n addMediaChangeListener(this.mediaChangeHandler);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentDidLoad() {\n this.update();\n }\n\n render() {\n const classes = {\n \"stzh-actionset\": true,\n // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n [`stzh-actionset--${this.variant}`]: !!this.variant\n };\n\n const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n <stzh-button\n a11yTabindex={disableTabbing ? \"-1\" : null}\n class={{\n \"stzh-actionset__action\": true,\n \"is-button\": true\n }}\n label={action.label}\n icon={action.icon}\n iconPosition={action.iconPosition}\n iconOnly={action.iconOnly}\n badge={action.badge}\n variant={action.variant\n ? action.variant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={action.size\n ? action.size\n : (this.variant === \"stack\" ? \"small\" : \"tiny\")}\n badgePosition=\"icon\"\n onClick={(e) => { this.actionClick(action, e) }}\n ></stzh-button>\n );\n\n return (\n <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n <div class={classes}>\n <div class=\"stzh-actionset__actions\" role=\"group\">\n <div\n ref={(el) => (this.actionsElement = el as HTMLElement)}\n class=\"stzh-actionset__actions-wrapper\"\n >\n {this._actions.map(action => (\n (this.dynamicActions\n \|\| (!this.dynamicActions &&\n this.actionsCollapsed.indexOf(action) === -1))\n &&\n (action.tooltipContent\n ?\n <stzh-tooltip\n strategy=\"fixed\"\n content={action.tooltipContent}\n >\n {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n </stzh-tooltip>\n :\n Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n )\n ))}\n </div>\n\n <div class=\"stzh-actionset__action-popover-wrapper\">\n <stzh-popover\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n strategy=\"fixed\"\n placement={this.popoverPlacement}\n class=\"stzh-actionset__action-popover\"\n >\n <stzh-button\n fullwidth\n disabled={this.actionsCollapsed.length === 0}\n class=\"stzh-actionset__action is-further\"\n variant={this.popoverButtonVariant !== \"\"\n ? this.popoverButtonVariant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={this.popoverButtonSize !== \"\"\n ? this.popoverButtonSize\n : (this.variant === \"stack\" ? \"small\" : \"tiny\")}\n icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n iconOnly={this.variant === \"overflow\" && this.isMedium}\n iconPosition=\"right\"\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this.actionsCollapsed.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e) => { this.actionClick(action, e) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-c8b4046a.js","mappings":"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","names":[],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-actionset {\n &__actions {\n display: flex;\n align-items: center;\n }\n\n &__actions-wrapper {\n position: relative;\n display: flex;\n flex-wrap: wrap;\n overflow: hidden;\n }\n\n &__action {\n &:not(:last-child) {\n margin-right: space('xsmall');\n }\n }\n\n &__action-popover-wrapper {\n opacity: 0;\n }\n\n &--has-collapsed-items &__action-popover-wrapper {\n opacity: 1;\n }\n\n &--has-collapsed-items &__action-popover {\n --width: auto;\n }\n\n /* Overflow variant /\n\n &--overflow &__action {\n @include mq($from: medium) {\n --white-space: nowrap;\n }\n }\n\n / Stack variant /\n\n &--stack &__actions {\n @include mq($to: small) {\n flex-direction: column;\n align-items: stretch;\n }\n }\n\n &--stack &__actions-wrapper { \n @include mq($to: small) {\n flex-direction: column;\n align-items: stretch;\n }\n }\n\n &--stack &__action {\n @include mq($from: small) {\n --white-space: nowrap;\n }\n\n &:not(:last-child) {\n @include mq($to: small) {\n margin-bottom: space('xsmall');\n margin-right: 0;\n }\n }\n }\n\n &--stack &__action-popover-wrapper {\n @include mq($to: small) {\n margin-top: space('xsmall');\n }\n }\n\n // Hide more action popover on small if it has no collapsed items\n\n &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n @include mq($to: small) {\n display: none;\n }\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n Placement,\n} from \"@floating-ui/dom\";\n\n/\n /\n@Component({\n tag: \"stzh-actionset\",\n styleUrl: \"stzh-actionset.scss\",\n scoped: true\n})\nexport class StzhActionset {\n /** Translation strings /\n @Prop() localization: StzhActionsetLocalizedText;\n\n /* Variant determining what position the action buttons are /\n @Prop({ reflect: true }) variant: \"stack\" \| \"overflow\" = \"stack\";\n\n /* Button variant of popover button (button thats holds collapsed actions) /\n @Prop({ reflect: true }) popoverButtonVariant: \"\" \| \"default\" \| \"secondary\" \| \"tertiary\" = \"\";\n\n /* Button size of popover button (button that holds collapsed actions) /\n @Prop({ reflect: true }) popoverButtonSize: \"\" \| \"default\" \| \"small\" \| \"tiny\" = \"\";\n\n /* Popover placement of button that holds collapsed actions /\n @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n /\n Card header actions.\n * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n /\n @Prop() actions: StzhActionsetItem[] \| string = [];\n private _actions: StzhActionsetItem[] = [];\n\n /* Header action click event */\n @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n @Element() element: HTMLStzhActionsetElement;\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhActionsetItem[] \| string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @State() actionsCollapsed: StzhActionsetItem[] = [];\n @State() dynamicActions: boolean;\n @State() isSmall: boolean;\n @State() isMedium: boolean;\n\n private actionsElement: HTMLElement;\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-actionset\",\n action,\n originalEvent\n });\n }\n\n private update = () => {\n this.isSmall = media(\"small\").matches;\n this.isMedium = media(\"medium\").matches;\n\n if (!this.actionsElement) {\n return;\n }\n\n Object.assign(this.actionsElement.style, {\n width: null,\n height: null\n });\n\n let newActionsVisible = 0;\n\n if (\n this.variant === \"overflow\" && this.isMedium\n \|\| this.variant === \"stack\" && this.isSmall\n ) {\n this.dynamicActions = true;\n\n let newActionsHeight = 0;\n let newActionsWidth = 0;\n\n // update height and width\n Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n // check which item is visible and\n if (child.offsetTop === 0) {\n newActionsVisible++;\n\n const { width, height } = child.getBoundingClientRect();\n\n const style = getComputedStyle(child);\n const marginLeft = parseInt(style.marginLeft);\n const marginRight = parseInt(style.marginRight);\n const marginTop = parseInt(style.marginTop);\n const marginBottom = parseInt(style.marginBottom);\n\n const childWidth = width + marginLeft + marginRight;\n const childHeight = height + marginTop + marginBottom;\n\n if (newActionsHeight < childHeight) {\n newActionsHeight = childHeight;\n }\n\n newActionsWidth = newActionsWidth + childWidth;\n }\n });\n\n Object.assign(this.actionsElement.style, {\n width: `${newActionsWidth}px`,\n height: `${newActionsHeight}px`\n });\n } else {\n this.dynamicActions = false;\n\n if (this.variant === \"overflow\") {\n newActionsVisible = 0;\n } else if (this.variant === \"stack\") {\n newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n }\n }\n\n this.actionsCollapsed = this._actions.slice(newActionsVisible);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private mediaChangeHandler = () => {\n this.actionsCollapsed = [];\n requestAnimationFrame(this.update);\n }\n\n async componentWillLoad() {\n this.actionsWatcher(this.actions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n }\n }\n\n connectedCallback() {\n addMediaChangeListener(this.mediaChangeHandler);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentDidLoad() {\n this.update();\n }\n\n render() {\n const classes = {\n \"stzh-actionset\": true,\n // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n [`stzh-actionset--${this.variant}`]: !!this.variant\n };\n\n const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n <stzh-button\n a11yTabindex={disableTabbing ? \"-1\" : null}\n class={{\n \"stzh-actionset__action\": true,\n \"is-button\": true\n }}\n label={action.label}\n icon={action.icon}\n iconPosition={action.iconPosition}\n iconOnly={action.iconOnly}\n badge={action.badge}\n variant={action.variant\n ? action.variant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={action.size\n ? action.size\n : (this.variant === \"stack\" ? \"small\" : \"tiny\")}\n badgePosition=\"icon\"\n onClick={(e) => { this.actionClick(action, e) }}\n ></stzh-button>\n );\n\n return (\n <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n <div class={classes}>\n <div class=\"stzh-actionset__actions\" role=\"group\">\n <div\n ref={(el) => (this.actionsElement = el as HTMLElement)}\n class=\"stzh-actionset__actions-wrapper\"\n >\n {this._actions.map(action => (\n (this.dynamicActions\n \|\| (!this.dynamicActions &&\n this.actionsCollapsed.indexOf(action) === -1))\n &&\n (action.tooltipContent\n ?\n <stzh-tooltip\n strategy=\"fixed\"\n content={action.tooltipContent}\n >\n {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n </stzh-tooltip>\n :\n Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n )\n ))}\n </div>\n\n <div class=\"stzh-actionset__action-popover-wrapper\">\n <stzh-popover\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n strategy=\"fixed\"\n placement={this.popoverPlacement}\n class=\"stzh-actionset__action-popover\"\n >\n <stzh-button\n fullwidth\n disabled={this.actionsCollapsed.length === 0}\n class=\"stzh-actionset__action is-further\"\n variant={this.popoverButtonVariant !== \"\"\n ? this.popoverButtonVariant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={this.popoverButtonSize !== \"\"\n ? this.popoverButtonSize\n : (this.variant === \"stack\" ? \"small\" : \"tiny\")}\n icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n iconOnly={this.variant === \"overflow\" && this.isMedium}\n iconPosition=\"right\"\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this.actionsCollapsed.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e) => { this.actionClick(action, e) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-273d413c.js → p-dbe86180.js} RENAMED Viewed

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { s as setPropsIfNull, h as hasSlot } from './p-1c261255.js';
-import { d as defineCustomElement$9 } from './p-8054dcb8.js';
-import { d as defineCustomElement$8 } from './p-fb02e9f7.js';
-import { d as defineCustomElement$7 } from './p-55350e52.js';
+import { d as defineCustomElement$9 } from './p-c8b4046a.js';
+import { d as defineCustomElement$8 } from './p-652ae542.js';
+import { d as defineCustomElement$7 } from './p-bd503085.js';
 import { d as defineCustomElement$6 } from './p-4d57271c.js';
 import { d as defineCustomElement$5 } from './p-bc4d67fa.js';
-import { d as defineCustomElement$4 } from './p-fc1aafb5.js';
+import { d as defineCustomElement$4 } from './p-3c92a168.js';
 import { d as defineCustomElement$3 } from './p-7c23f23e.js';
 import { d as defineCustomElement$2 } from './p-9b5c568d.js';
 import { d as defineCustomElement$1 } from './p-d2f9a11a.js';
@@ -153,13 +153,7 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
             this.checked = event.detail.checked;
         };
         this.handleCardClick = (originalEvent) => {
-            var _a, _b;
-            const interactiveTags = ["a", "button", "input", "select", "textarea", "label"];
-            const path = ((_b = (_a = originalEvent.composedPath) === null || _a === void 0 ? void 0 : _a.call(originalEvent)) !== null && _b !== void 0 ? _b : []);
-            if (path.some(el => { var _a, _b; return interactiveTags.includes((_b = (_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)); })) {
-                return;
-            }
-            this.stzhClick.emit(Object.assign({ component: "stzh-card", originalEvent }, (this.href != null && { href: this.href })));
+            this.stzhClick.emit(Object.assign({ component: "stzh-card", originalEvent }, (this.href ? { href: this.href } : {})));
         };
         this.localization = undefined;
         this.backgroundColor = "grey";
@@ -246,12 +240,6 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
         if (!this.localization) {
             this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "card");
         }
-        // if (!this.dateAdapter) {
-        //   this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(
-        //     this.localization.$formats,
-        //     this.localization.$globals
-        //   );
-        // }
     }
     componentDidLoad() {
         this.sortable = this.element.closest("stzh-sortable");
@@ -289,7 +277,7 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
         // }
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         const imageUsed = hasSlot(this.element, "image");
         const headingUsed = hasSlot(this.element, "heading");
         const footerUsed = hasSlot(this.element, "footer");
@@ -316,8 +304,6 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
             this.starrable ||
             sortableActionsEnabled;
         const hasFooter = footerUsed || this._footerActions.length > 0 || this.selectable;
-        // || !!this.author
-        // || !!this.date;
         const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);
         const uniqueId = `--is-described-${Math.random().toString(36).slice(2, 9)}`;
         const descriptionId = `stzh-card${uniqueId}`;
@@ -332,7 +318,6 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
             "stzh-card--has-subtitle-interactive": !!this.subtitle && this.subtitleInteractive,
             "stzh-card--has-header": hasHeader,
             "stzh-card--has-footer": hasFooter,
-            // "stzh-card--has-tag": !!this.tag,
             "stzh-card--is-collapsible": this.collapsible,
             "stzh-card--is-collapsed": this.collapsed,
             "stzh-card--is-starred": this.starred,
@@ -341,23 +326,23 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
             [`stzh-card--${this.variant}`]: !!this.variant,
             "stzh-card--hyphens": this.hyphensEnabled,
         };
-        return (h(Host, { key: 'f12e5bf3662ab92e229e0fae1fa7f33ec6c4034d', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: 'fe84a422228741f619053d5abc3a90a1b5cb68c2',
+        return (h(Host, { key: '922f987148e4ccb577f79940a11a8bcc6908fda5', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: '5600fecaf5d108d39d0cea8846e1974692930bd9',
             // ref={(el) => (this.mainElement = el as HTMLElement)}
-            class: classes, onClick: this.handleCardClick }, h("a", { key: '79ef4ad083e5a12676b63a0432525eb47e9da542', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("slot", { key: '12d45ee99aa2d7358ffe1089b8d88ddb796df322', name: "image" })), h("div", { key: 'af6a4c08c1eb417562db0f660bc0b5f45c0634cd', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: '76e930250139a82475685f72637678cbac1eb9bb', class: "stzh-card__dnd", name: "drag" }), h("header", { key: 'a3c6143b2294b2fa3723c16db0ab54ecdea6ae08',
+            class: classes, onClick: !this.href ? this.handleCardClick : null }, h("a", { key: '2e9ea16df018852b32b983c68a768d94a4aeea5e', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: (_d = this.href) !== null && _d !== void 0 ? _d : null, target: this.target, onClick: this.href ? this.handleCardClick : null }, h("slot", { key: 'ff2e8855e23d38efd06efdcc624f84abd34baf57', name: "image" })), h("div", { key: '3baa166a8f1658908690cef584a7ee32a8a7fa31', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: '67db0ab767f4acbc0976c8f0caccb6046f06d0e2', class: "stzh-card__dnd", name: "drag" }), h("header", { key: '67ca4a8181eedf6727940f7627d3da3dd1817284',
             // ref={(el) => (this.headerElement = el as HTMLElement)}
-            class: "stzh-card__header", onClick: this.headerClick }, h("div", { key: 'b77e0684ad66884b1b5f3945de1e2449ac5fc195', class: "stzh-card__header-top" }, h("div", { key: 'ff3d157a02fec0def1a89fd84f2be0733dac9b67',
+            class: "stzh-card__header", onClick: this.headerClick }, h("div", { key: '7238054dfd81b7c020730102af3e61f1757d9b77', class: "stzh-card__header-top" }, h("div", { key: '8ca56343d74ffd7cc87a5f1add4c1566cfdc056a',
             // ref={(el) => (this.headerLeftElement = el as HTMLElement)}
-            class: "stzh-card__header-left" }, h("div", { key: 'a95336559d67df0af0fe7fa6c491215eec8614c4', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: 'acf7ddc256ee55f7c87ce0c2fc1db50012124688', class: "stzh-card__title" }, h("a", { key: 'c78954b5d2cd8d0ef28e61cf378328d5b4b0622a', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.handleCardClick, "aria-describedby": descriptionId }, h("div", { key: '03d2e56d174b8db303f5c967ed1a38ab9714f69a', ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("span", { key: '288bec17a54762f3ef19d9426a0ddc29f928f40b', id: descriptionId, hidden: true }, (_d = this.localization) === null || _d === void 0 ? void 0 : _d.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: 'ad1f68ffda8f881800c89d2521041d67269f917d', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: '08f6d82a17e6440a8e13d1f27c2aabce92236314',
+            class: "stzh-card__header-left" }, h("div", { key: '0704e9ab1152376286ce4d114f6d6b23fdac1e30', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: '357e18961d51c8bca8a372d564a26ea6094746d2', class: "stzh-card__title" }, h("a", { key: '2f437251dbdae6f0b84714d93cf3317134a60c1d', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: (_e = this.href) !== null && _e !== void 0 ? _e : null, target: this.target, onClick: this.href ? this.handleCardClick : null, "aria-describedby": descriptionId }, h("div", { key: 'abb5f10c7a8d84447d480feaa317565c1abc3599', ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("span", { key: '85be1f1124a353e24d2977b363b9d77287ea8aea', id: descriptionId, hidden: true }, (_f = this.localization) === null || _f === void 0 ? void 0 : _f.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: '0f878f3957db379505bcad15110bbf03dc029bc6', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: '854ee9d5862d19a0550a6e42c828279056452b3e',
             // ref={(el) => (this.headerRightElement = el as HTMLElement)}
-            class: "stzh-card__header-right" }, h("div", { key: 'c04ede54509224a99724abdece109c4c0839b143', class: "stzh-card__card-actions" }, this.starrable && (h("stzh-tooltip", { key: 'f2eef3b763e504c9777b830d43e06fde4199e0ad' }, h("stzh-button", { key: 'c018ee29547eb28a3c569d3c78ae6c05a2d34dcf', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: 'f6eae1c6d864de5087b9c6f7b1e5815d9c111589', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: '5b815659fe2ce19955451fec718efc9cf0767b47', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
+            class: "stzh-card__header-right" }, h("div", { key: '16214110431e4da74dced1069febb7a43932521a', class: "stzh-card__card-actions", onClick: (e) => e.stopPropagation() }, this.starrable && (h("stzh-tooltip", { key: '3452d5c59ca8fda3c3a86f157b372ddb87608096' }, h("stzh-button", { key: '5386e42f00042f511139124115223e8462c4d5ea', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: '0bc8331caa19054c583687071690a85c79cdef49', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: '462fb709e0a21d1f1824f217f1569e99912e2592', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
                 "stzh-card__card-action-popover": true,
                 // "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
-            } }, h("stzh-button", { key: '2dd95b3454a199e22be9fc5151d130edf4a92820', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_e = headerActionsWithBadge[0]) === null || _e === void 0 ? void 0 : _e.badgeType) || "default" }), h("stzh-menu", { key: 'b09c49cfa3ed63d3b70c86e964f71839e67dbe28', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
+            } }, h("stzh-button", { key: 'fd100d9640d1bcb222f93d6f366ac3c5879d83a2', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_g = headerActionsWithBadge[0]) === null || _g === void 0 ? void 0 : _g.badgeType) || "default" }), h("stzh-menu", { key: 'dcbc2cc31b779d610cab7bfe4016117935c3680f', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
             // class="hide-medium show-when-collapsed"
             icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => {
                 this.actionClick(e, action);
             }
-        }, action.label))), sortableActionsEnabled && (h(Fragment, { key: 'cf124d2d2deebbb1a2ac64574e70215546dbe8e7' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: '6599c1a97808115a420bb0af876b15fd0d8149c7', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: 'c3f1c4889c2469ae6811aeb9db7277ff9124c721', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: '9ca6937d27cd44e37db74449c94f0aa594412d3b', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: 'c47010ee74412ffcc53b2d30a7322ea0ed70056a', class: "stzh-card__header-meta" }, h("slot", { key: 'b5cad0cfd6f17d27fafc261baaa7655dd44f3f84', name: "meta" }))), h("div", { key: '57d6f99e8f6b6b583b57b8d2bbfa06480591d266', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: '43c829fb027cddfd7999510b9c792edd8c48256a', name: "content" })), h("div", { key: '4a841d8b0e151d6f7288ea9c782dfc9d1231758e', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: '71321ffd2f932cbcd42a4ee256c76bcf4163d464', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: 'e4fc09fe97e65b91c6b67288b7aaa9ed4da7d8d5', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: '66244d180b0987381ada039b1b5740221b691989', class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))))));
+        }, action.label))), sortableActionsEnabled && (h(Fragment, { key: '4eea115a3af86b156cf0134f18466cf8c44a2c22' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: 'c9fb0af14f38a595518f1df9e2b6acbabf6b5674', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: '803db727cc6aa181d41e6f8f589c233dfed02bac', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: '480a574ac381c9ff09627c2a113cbfa3ed5b660d', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: '35d5788c10e7857518cf19afb582cacadcbad246', class: "stzh-card__header-meta" }, h("slot", { key: 'd2bed706d62c0489f255e67e554ef16604832590', name: "meta" }))), h("div", { key: '787bb810e536ce36d91e36580a617aec4f053cd9', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: '30baef4b60ffbec432c1cd733ea3698ee7d32a0e', name: "content" })), h("div", { key: '0ac10fda538807e4025d9452fa5d52409bec181e', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: '0e3b50709c30dd462a26a107ea3334fc58de45c5', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: 'b421cf253e2910514d5db956586d8407efcda2a5', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: '07e7831924896c28a95ea350106ab76db80da474', class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }))))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -459,4 +444,4 @@ function defineCustomElement() {
 export { StzhCard as S, defineCustomElement as d };
-//# sourceMappingURL=p-273d413c.js.map
+//# sourceMappingURL=p-dbe86180.js.map

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

@@ -0,0 +1 @@

+ {"file":"p-dbe86180.js","mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,6qoBAA6qoB,CAAC;AAClsoB,uBAAe,WAAW;;MC2Bb,QAAQ;;;;;;;;;QAsDX,eAAU,GAAG,EAAE,CAAC;QA6GhB,eAAU,GAAG,OAAO;YAC1B,IAAI,YAAY,GAAG,KAAK,CAAC;YAEzB,OAAO,CAAC,OAAO,CAAC,KAAK;gBACnB,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;oBACvE,YAAY,GAAG,IAAI,CAAC;iBACrB;aACF,CAAC,CAAC;YAEH,IAAI,YAAY,EAAE;gBAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC3B;SACF,CAAC;;;;;;;;;;;;;;;;;QAgCM,gBAAW,GAAG,CAAC,KAAiB;YACtC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACrB,OAAO;aACR;YAED,MAAM,UAAU,GAAG;gBACjB,cAAc;gBACd,cAAc;gBACd,QAAQ;gBACR,GAAG;gBACH,OAAO;gBACP,QAAQ;gBACR,UAAU;gBACV,QAAQ;gBACR,SAAS;gBACT,OAAO;gBACP,MAAM;aACP,CAAC;YACF,MAAM,gBAAgB,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,OAAO,cAAI,OAAA,MAAC,OAAuB,CAAC,OAAO,0CAAE,WAAW,EAAE,CAAA,EAAA,CAAC,CAAC;YAC9G,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YAEjE,IAAI,CAAC,KAAK,EAAE;gBACV,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;gBAEjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACrB,SAAS,EAAE,WAAW;oBACtB,SAAS,EAAE,IAAI,CAAC,SAAS;iBAC1B,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAiB;YACxC,IAAI,IAAI,CAAC,mBAAmB,EAAE;gBAC5B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;oBAC1B,SAAS,EAAE,WAAW;oBACtB,aAAa,EAAE,KAAK;iBACrB,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,SAAS,EAAE,WAAW;gBACtB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,MAA4B;YACpE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;gBAC9B,SAAS,EAAE,WAAW;gBACtB,MAAM;gBACN,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG;YACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;YAEvD,IAAI,QAAQ,EAAE;gBACZ,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChD,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;aAClC;SACF,CAAC;QAEM,mBAAc,GAAG;YACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;YAEvD,IAAI,QAAQ,EAAE;gBACZ,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChD,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;aACpC;SACF,CAAC;QAEM,gCAA2B,GAAG;YACpC,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;;YAG9D,IAAI,CAAC,eAAe,EAAE;gBACpB,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;gBAClF,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;gBACnF,OAAO;aACR;YAED,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC3B;SACF,CAAC;QAEM,SAAI,GAAG;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iDAAiD,CAAC,CAAC;YAE/F,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,oDAAoD,CAAC,CAAC;YAElG,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,OAAO;iBACS,CAAC,CAAC;aAC3B,CAAC,CAAC;YAEH,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,SAAS;iBACO,CAAC,CAAC;aAC3B,CAAC,CAAC;SACJ,CAAC;;;;;;;QAUM,mBAAc,GAAG,OAAO;YAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAC1B,CAAC;QAEM,0BAAqB,GAAG,CAAC,KAAyC;YACxE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;SACrC,CAAC;QAEM,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,iBACjB,SAAS,EAAE,WAAW,EACtB,aAAa,KACT,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,GACxC,CAAC;SACJ,CAAC;;+BA5U2D,MAAM;uBAGT,SAAS;yBAGN,KAAK;uBAGP,KAAK;yBAMlB,KAAK;0BAGJ,KAAK;uBAGR,KAAK;oBAGT,EAAE;;;qBASD,EAAE;wBAGE,KAAK;8BAGC,KAAK;uBAG9B,EAAE;4BAGmC,GAAG;wBAG5B,EAAE;6BAIiB,EAAE;;;6BAmBL,EAAE;mCAIjB,KAAK;gCAMS,KAAK;2BAGV,KAAK;mCAMd,KAAK;;;IA2B5C,eAAe,CAAC,QAA2B;QACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,QAAQ,KAAK,EAAE,EAAE;gBACnB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;aACtB;iBAAM;gBACL,IAAI;oBACF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;iBACxC;gBAAC,OAAO,GAAG,EAAE;oBACZ,IAAI,CAAC,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC;iBAC9B;aACF;SACF;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;SAC5B;KACF;IAGD,oBAAoB,CAAC,QAAyC;QAC5D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;IAGD,oBAAoB,CAAC,QAAsC;QACzD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;IAyLO,wBAAwB;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAEvD,IAAI,QAAQ,EAAE;YACZ,IAAI,OAAO,GAAgB,IAAI,CAAC,OAAO,CAAC;YACxC,IAAI,iBAAiB,GAAG,IAAI,CAAC;YAE7B,IAAI,OAAO,QAAQ,CAAC,SAAS,KAAK,UAAU,EAAE;gBAC5C,iBAAiB,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;aAC1C;iBAAM;gBACL,iBAAiB,GAAG,QAAQ,CAAC,SAAS,CAAC;aACxC;YAED,OAAO,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,aAAa,KAAK,iBAAiB,EAAE;gBAC3E,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;aACjC;YAED,OAAO,OAAO,CAAC;SAChB;KACF;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE9C,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SAC/F;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAEtD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;YAC/E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;SACjF;KACF;IAED,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;gBAC7D,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;;;KAIJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;;;;KAKF;IAED,MAAM;;QACJ,MAAM,SAAS,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC1D,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAC9D,MAAM,UAAU,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC5D,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAE9D,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,mBAAmB,GAAG,QAAQ,GAAG,MAAM,EAAE,CAAC;QAEnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAE7D,MAAM,qBAAqB,GACzB,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa;YACnC,KAAK,CAAC,IAAI,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAEhG,MAAM,oBAAoB,GACxB,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa;YACnC,KAAK,CAAC,IAAI,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC;gBACrF,CAAA,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,MAAM,IAAG,CAAC,CAAC;QAE7D,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC3F,MAAM,sBAAsB,GAAG,eAAe,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC;;;;;QAQ5E,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC;QAEjD,MAAM,SAAS,GACb,UAAU;YACV,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;YAC1B,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;;YAE9B,IAAI,CAAC,SAAS;YACd,sBAAsB,CAAC;QAEzB,MAAM,SAAS,GAAG,UAAU,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC;QAElF,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;QAEzG,MAAM,QAAQ,GAAG,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC5E,MAAM,aAAa,GAAG,YAAY,QAAQ,EAAE,CAAC;QAE7C,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,4BAA4B,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YAC7D,6BAA6B,EAAE,IAAI,CAAC,eAAe,KAAK,OAAO;YAC/D,qBAAqB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;YAClC,sBAAsB,EAAE,SAAS;YACjC,wBAAwB,EAAE,WAAW;YACrC,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;YAC1C,qCAAqC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB;YAClF,uBAAuB,EAAE,SAAS;YAClC,uBAAuB,EAAE,SAAS;YAClC,2BAA2B,EAAE,IAAI,CAAC,WAAW;YAC7C,yBAAyB,EAAE,IAAI,CAAC,SAAS;YACzC,uBAAuB,EAAE,IAAI,CAAC,OAAO;YACrC,uBAAuB,EAAE,IAAI,CAAC,OAAO;YACrC,wBAAwB,EAAE,eAAe;YACzC,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,cAAc;SAC1C,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,OAAO,iBAAe,eAAe,IAC1E;;YAEE,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,IAEjD,0DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAuB,CAAC,iBAChD,MAAM,EAClB,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,IAEhD,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,EACJ,4DAAK,KAAK,EAAC,4BAA4B,IACrC,kEAAW,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,GAAa,EAC1D;;YAEE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,4DAAK,KAAK,EAAC,uBAAuB,IAChC;;YAEE,KAAK,EAAC,wBAAwB,IAE9B,4DAAK,KAAK,EAAC,uBAAuB,IAC/B,UAAU,KACT,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,IAC/B,0DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAuB,CAAC,EAC5D,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,sBAC9B,aAAa,IAE/B,4DAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACJ,CACI,CACX,EACD,6DAAM,EAAE,EAAE,aAAa,EAAE,MAAM,UAC5B,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CACzB,EACN,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,KACzB,EAAC,QAAQ,qDAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC9D,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,KAC3B,YAAM,KAAK,EAAC,0BAA0B,IAAE,QAAQ,CAAQ,CACzD,CAAC,CACO,CACZ,CACG,CACF,EACN;;YAEE,KAAK,EAAC,yBAAyB,IAE/B,4DAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,IA8BrE,IAAI,CAAC,SAAS,KACb,uEACE,oEACE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,MAAM,EAC3C,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,eAAe,GAChB,EACf,4DAAK,IAAI,EAAC,SAAS,IAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CACxE,CACO,CAChB,EAIA,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,sBAAsB,MAC1E,qEACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAC5C,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;gBACL,gCAAgC,EAAE,IAAI;;aAEvC,IAED,oEACE,KAAK,EAAC,mCAAmC,EACzC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,eAAe,EACpB,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,UAAU,EAAE,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAC7C,aAAa,EAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,sBAAsB,KAAI,MAAA,sBAAsB,CAAC,CAAC,CAAC,0CAAE,SAAS,CAAA,IAAI,SAAS,GAC9E,EACf,kEAAW,IAAI,EAAC,SAAS,IAEtB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,KAC7B;;YAEE,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;aAC7B;WAEA,MAAM,CAAC,KAAK,CACE,CAClB,CAAC,EAED,sBAAsB,KACrB,EAAC,QAAQ,uDACN,CAAC,qBAAqB,KACrB,uEAAgB,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACvD,IAAI,CAAC,YAAY,CAAC,YAAY,CAChB,CAClB,EACA,CAAC,oBAAoB,KACpB,uEAAgB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC3D,IAAI,CAAC,YAAY,CAAC,cAAc,CAClB,CAClB,CACQ,CACZ,EAEA,IAAI,CAAC,SAAS,KACb,uEAAgB,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACvF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAC7D,CAClB,CACS,CACC,CAChB,CACG,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACC,EAET,4DAAK,KAAK,EAAC,wCAAwC,IACjD,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EAEN,4DAAK,KAAK,EAAC,uCAAuC,IAChD,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,KAC7B,uEAAgB,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,GAAmB,CACpG,EAEA,IAAI,CAAC,UAAU,KACd,oEACE,KAAK,EAAC,iCAAiC,EACvC,SAAS,QACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAC/B,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAC3B,CAChB,CACI,CACH,CACF,CACE,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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, 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 &__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","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} from \"../../index\";\n\nimport { 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 @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 // @Watch(\"collapsed\")\n // collapsedWatcher() {\n // this.handleResize();\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 mainElement: HTMLElement;\n // private headerElement: HTMLElement;\n // private headerLeftElement: HTMLElement;\n // private headerRightElement: HTMLElement;\n private imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n // private debounceResize: number;\n // private resizeObserver: ResizeObserver;\n\n // private update = () => {\n // if (!this.mainElement) {\n // return;\n // }\n\n // this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n // if (media('medium').matches) {\n // const headerWidth = this.headerElement.clientWidth;\n // const leftWidth = this.headerLeftElement.clientWidth;\n // const rightWidth = this.headerRightElement.clientWidth;\n\n // if (headerWidth - leftWidth <= rightWidth) {\n // this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n // }\n // }\n // }\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 \"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.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 handleResize = () => {\n // if (this.debounceResize) {\n // window.cancelAnimationFrame(this.debounceResize);\n // }\n\n // this.debounceResize = requestAnimationFrame(this.update);\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 // this.resizeObserver = new ResizeObserver(this.handleResize);\n // this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n // if (this.resizeObserver) {\n // this.resizeObserver.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 nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n // const headerActions = [\n // ...this._headerActions\n // ];\n\n const hasHeading = !!this.heading || headingUsed;\n\n const hasHeader =\n hasHeading ||\n this._subtitles.length > 0 ||\n this._headerActions.length > 0 ||\n // || nonCollapsingTextHeaderActions.length > 0\n this.starrable ||\n sortableActionsEnabled;\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\n // ref={(el) => (this.headerElement = el as HTMLElement)}\n class=\"stzh-card__header\"\n onClick={this.headerClick}\n >\n <div class=\"stzh-card__header-top\">\n <div\n // ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n class=\"stzh-card__header-left\"\n >\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 ? 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\n // ref={(el) => (this.headerRightElement = el as HTMLElement)}\n class=\"stzh-card__header-right\"\n >\n <div class=\"stzh-card__card-actions\" onClick={(e) => e.stopPropagation()}>\n {/* {this._headerActions.map(action => (\n <stzh-button\n class={{\n \"stzh-card__card-action\": true,\n \"is-button\": true,\n \"show-medium\": !action.onlyCollapseText,\n \"hide-when-collapsed\": !action.onlyCollapseText,\n \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n variant=\"tertiary\"\n size=\"tiny\"\n badgePosition=\"icon\"\n onClick={(e: MouseEvent) => { this.actionClick(e, action) }}\n >\n <span\n class={{\n \"vshow-medium\": action.onlyCollapseText,\n \"vhide-when-collapsed\": action.onlyCollapseText\n }}\n >\n {action.label}\n </span>\n </stzh-button>\n ))} */}\n\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 {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n {/* {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) && */}\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 {/* {nonCollapsingTextHeaderActions.map(action => ( */}\n {this._headerActions.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\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-aa78661e.js → p-dd7410cb.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$3 } from './p-fb02e9f7.js';
+import { d as defineCustomElement$3 } from './p-652ae542.js';
 import { d as defineCustomElement$2 } from './p-4d57271c.js';
-import { d as defineCustomElement$1 } from './p-61e8a4c8.js';
+import { d as defineCustomElement$1 } from './p-26475e68.js';
 const stzhAppNavCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-app-nav{background-color:var(--stzh-color-coolgrey10)}@media screen and (max-width: 899px){.stzh-app-nav{height:var(--stzh-app-nav-height)}}.stzh-app-nav__links{display:flex;flex-direction:row;justify-content:space-between;padding:var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-app-nav__links{padding:0;align-items:center}}.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{--text-decoration-line:none;--hover-text-decoration-line:none;color:var(--stzh-color-coolgrey90)}@media screen and (min-width: 900px){.stzh-app-nav__link,.stzh-app-nav .stzh-app-nav__link a{margin-right:var(--stzh-space-xlarge)}}.stzh-app-nav__link:last-child,.stzh-app-nav .stzh-app-nav__link a:last-child{margin-right:0}.stzh-app-nav__link:hover,.stzh-app-nav .stzh-app-nav__link a:hover{color:var(--stzh-color-primary60)}.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{text-decoration:none;color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-app-nav__link a.stzh-link--is-active,.stzh-app-nav .stzh-app-nav__link.stzh-link--is-active{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}}.stzh-app-nav .stzh-link__inner{flex-direction:column}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__inner{flex-direction:row}}.stzh-app-nav .stzh-link__text{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-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__text{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);font-weight:var(--stzh-font-weight-medium)}}.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-left:0}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xsmall);margin-top:0}}";
 const StzhAppNavStyle0 = stzhAppNavCss;
@@ -31,7 +31,7 @@ const StzhAppNav = /*@__PURE__*/ proxyCustomElement(class StzhAppNav extends H {
         const classes = {
             "stzh-app-nav": true,
         };
-        return (h(Host, { key: 'c9bdfee898b5de6ae6c13736cbfa3ff36bb08613' }, h("nav", { key: '7580c2f6e66b7e5f38606ff5b21c48f03147826d', role: "navigation", class: classes, "aria-label": this.localization.title, id: this.appNavId || null }, h("div", { key: 'fbef6a44d4e892992bb05222f1ddeeb709f1cbfe', class: "stzh-app-nav__links", role: "list" }, this.items.map((item) => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, "link-id": item.id, onClick: (e) => { this.handleAppNavItemClick(e, item); } }, item.text)))))));
+        return (h(Host, { key: '8573745e125b58540549d0af2cdac4f1b6bf5e2f' }, h("nav", { key: '48c2916bca9148fadb006f9310fa600b96ddf3b0', role: "navigation", class: classes, "aria-label": this.localization.title, id: this.appNavId || null }, h("div", { key: 'cf5d22c667a83bacac694c6ea05e4116ce2ea910', class: "stzh-app-nav__links", role: "list" }, this.items.map((item) => (h("stzh-link", { class: "stzh-app-nav__link", active: item.active, role: "listitem", "a11y-current": item.a11yCurrent, href: item.href, badge: item.badge, badgeType: item.badgeType, icon: item.icon, "link-id": item.id, onClick: (e) => { this.handleAppNavItemClick(e, item); } }, item.text)))))));
     }
     get element() { return this; }
     static get style() { return StzhAppNavStyle0; }
@@ -71,4 +71,4 @@ function defineCustomElement() {
 export { StzhAppNav as S, defineCustomElement as d };
-//# sourceMappingURL=p-aa78661e.js.map
+//# sourceMappingURL=p-dd7410cb.js.map

package/dist/components/{p-aa78661e.js.map → p-dd7410cb.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~aa78661e~~.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,i4GAAi4G,CAAC;AACx5G,yBAAe,aAAa;;MCUf,UAAU;;;;;QAqBb,0BAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB;YACtE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;gBAC5B,SAAS,EAAE,cAAc;gBACzB,IAAI;gBACJ,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;;qBAtBgC,EAAE;;;IAUpC,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;SACjG;KACF;IAUD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;SACrB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,IACnG,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,OAAO,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA,EAAE,IACjE,IAAI,CAAC,IAAI,CACD,CACb,CAAC,CACI,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n background-color: var(--stzh-color-coolgrey10);\n\n @include mq($to: medium) {\n height: var(--stzh-app-nav-height);\n }\n\n &__links {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: space('medium') space('large') space('xlarge');\n\n @include mq($from: medium) {\n padding: 0;\n align-items: center;\n }\n }\n\n &__link, .stzh-app-nav__link a {\n --text-decoration-line: none;\n --hover-text-decoration-line: none;\n color: var(--stzh-color-coolgrey90);\n\n @include mq($from: medium) {\n margin-right: space('xlarge');\n }\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n color: var(--stzh-color-primary60);\n }\n }\n\n .stzh-app-nav__link a.stzh-link--is-active,\n .stzh-app-nav__link.stzh-link--is-active {\n text-decoration: none;\n color: var(--stzh-color-primary70);\n\n @include mq($from: medium) {\n @include font('heavy');\n }\n }\n\n .stzh-link__inner {\n flex-direction: column;\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n .stzh-link__text {\n @include font('medium');\n @include fontSize('pico');\n\n @include mq($from: medium) {\n @include fontSize('milli');\n font-weight: var(--stzh-font-weight-medium);\n }\n }\n\n .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) + .stzh-link__text.sc-stzh-link:not(:empty), .stzh-link__text.sc-stzh-link:not(:empty) + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n margin-top: space('xxsmall');\n margin-left: 0;\n\n @include mq($from: medium) {\n margin-left: space('xsmall');\n margin-top: 0;\n }\n }\n}\n","import {Component, Prop, h, Host, Element, Event, EventEmitter} from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport {StzhAppNavItem, StzhAppNavItemClickEvent} from \"../../index\";\n\n@Component({\n tag: \"stzh-app-nav\",\n styleUrl: \"stzh-app-nav.scss\",\n})\n\nexport class StzhAppNav {\n /** Translation strings /\n @Prop() localization: StzhAppNavLocalizedText;\n\n /* AppNav menu items /\n @Prop() items: StzhAppNavItem[] = [];\n\n /* AppNav element ID /\n @Prop() appNavId: string;\n\n @Element() element: HTMLStzhAppNavElement;\n\n /* AppNav item click event */\n @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n }\n }\n\n private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n this.stzhAppNavItemClick.emit({\n component: \"stzh-app-nav\",\n item,\n originalEvent: event,\n });\n };\n\n render() {\n const classes = {\n \"stzh-app-nav\": true,\n };\n\n return (\n <Host>\n <nav role=\"navigation\" class={classes} aria-label={this.localization.title} id={this.appNavId \|\| null}>\n <div class=\"stzh-app-nav__links\" role=\"list\">\n {this.items.map((item) => (\n <stzh-link\n class=\"stzh-app-nav__link\"\n active={item.active}\n role=\"listitem\"\n a11y-current={item.a11yCurrent}\n href={item.href}\n badge={item.badge}\n badgeType={item.badgeType}\n icon={item.icon}\n link-id={item.id}\n onClick={(e: MouseEvent) => { this.handleAppNavItemClick(e, item) }}\n >{item.text}\n </stzh-link>\n ))}\n </div>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-dd7410cb.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,i4GAAi4G,CAAC;AACx5G,yBAAe,aAAa;;MCUf,UAAU;;;;;QAqBb,0BAAqB,GAAG,CAAC,KAAiB,EAAE,IAAoB;YACtE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;gBAC5B,SAAS,EAAE,cAAc;gBACzB,IAAI;gBACJ,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;;qBAtBgC,EAAE;;;IAUpC,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;SACjG;KACF;IAUD,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;SACrB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,IACnG,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IAC3C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACnB,iBACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,UAAU,kBACD,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,aACN,IAAI,CAAC,EAAE,EAChB,OAAO,EAAE,CAAC,CAAa,OAAO,IAAI,CAAC,qBAAqB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA,EAAE,IACjE,IAAI,CAAC,IAAI,CACD,CACb,CAAC,CACI,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":[".stzh-app-nav {\n background-color: var(--stzh-color-coolgrey10);\n\n @include mq($to: medium) {\n height: var(--stzh-app-nav-height);\n }\n\n &__links {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: space('medium') space('large') space('xlarge');\n\n @include mq($from: medium) {\n padding: 0;\n align-items: center;\n }\n }\n\n &__link, .stzh-app-nav__link a {\n --text-decoration-line: none;\n --hover-text-decoration-line: none;\n color: var(--stzh-color-coolgrey90);\n\n @include mq($from: medium) {\n margin-right: space('xlarge');\n }\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n color: var(--stzh-color-primary60);\n }\n }\n\n .stzh-app-nav__link a.stzh-link--is-active,\n .stzh-app-nav__link.stzh-link--is-active {\n text-decoration: none;\n color: var(--stzh-color-primary70);\n\n @include mq($from: medium) {\n @include font('heavy');\n }\n }\n\n .stzh-link__inner {\n flex-direction: column;\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n .stzh-link__text {\n @include font('medium');\n @include fontSize('pico');\n\n @include mq($from: medium) {\n @include fontSize('milli');\n font-weight: var(--stzh-font-weight-medium);\n }\n }\n\n .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) + .stzh-link__text.sc-stzh-link:not(:empty), .stzh-link__text.sc-stzh-link:not(:empty) + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n margin-top: space('xxsmall');\n margin-left: 0;\n\n @include mq($from: medium) {\n margin-left: space('xsmall');\n margin-top: 0;\n }\n }\n}\n","import {Component, Prop, h, Host, Element, Event, EventEmitter} from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport {StzhAppNavItem, StzhAppNavItemClickEvent} from \"../../index\";\n\n@Component({\n tag: \"stzh-app-nav\",\n styleUrl: \"stzh-app-nav.scss\",\n})\n\nexport class StzhAppNav {\n /** Translation strings /\n @Prop() localization: StzhAppNavLocalizedText;\n\n /* AppNav menu items /\n @Prop() items: StzhAppNavItem[] = [];\n\n /* AppNav element ID /\n @Prop() appNavId: string;\n\n @Element() element: HTMLStzhAppNavElement;\n\n /* AppNav item click event */\n @Event() stzhAppNavItemClick: EventEmitter<StzhAppNavItemClickEvent>;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n }\n }\n\n private handleAppNavItemClick = (event: MouseEvent, item: StzhAppNavItem) => {\n this.stzhAppNavItemClick.emit({\n component: \"stzh-app-nav\",\n item,\n originalEvent: event,\n });\n };\n\n render() {\n const classes = {\n \"stzh-app-nav\": true,\n };\n\n return (\n <Host>\n <nav role=\"navigation\" class={classes} aria-label={this.localization.title} id={this.appNavId \|\| null}>\n <div class=\"stzh-app-nav__links\" role=\"list\">\n {this.items.map((item) => (\n <stzh-link\n class=\"stzh-app-nav__link\"\n active={item.active}\n role=\"listitem\"\n a11y-current={item.a11yCurrent}\n href={item.href}\n badge={item.badge}\n badgeType={item.badgeType}\n icon={item.icon}\n link-id={item.id}\n onClick={(e: MouseEvent) => { this.handleAppNavItemClick(e, item) }}\n >{item.text}\n </stzh-link>\n ))}\n </div>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-8b1537d5.js → p-f4ff43ee.js} RENAMED Viewed

@@ -154,7 +154,7 @@ const StzhBreadcrumb = /*@__PURE__*/ proxyCustomElement(class StzhBreadcrumb ext
             [`stzh-breadcrumb--${this.variant}`]: !!this.variant,
             "rs_skip": true // will prevent component being read by readspeaker
         };
-        return (h(Host, { key: '94e2c29dac3b984c04d7034f0e3db24a9d9b5dc9' }, h("div", { key: '08fc0a3b21a2ab1387d465f888babf4aec32d9d3', class: classes }, h("nav", { key: '4b7df97b6699e7d9834ffc6e4e2674e355187fff', ref: (el) => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, h("ol", { key: 'b61255f4433045b2c7521a8f59325f8953b08e6b', class: "stzh-breadcrumb__list" }, this._items.map((item, index) => h(Fragment, null, h("li", { class: {
+        return (h(Host, { key: 'f9543487d5c613df43dcabbb930e4ae0d4d59776' }, h("div", { key: '8f2920f5c137596a1092e3991a3ab060ad9648a7', class: classes }, h("nav", { key: '3e2b4c1d82b92499fb4c0b7d1d9b468d68207221', ref: (el) => (this.navElement = el), class: "stzh-breadcrumb__nav", role: "navigation", "aria-label": this.localization.title }, h("ol", { key: 'fba9ce0dbeb3d63997ba3a129a1b6a9f5218a561', class: "stzh-breadcrumb__list" }, this._items.map((item, index) => h(Fragment, null, h("li", { class: {
                 "stzh-breadcrumb__item": true,
                 "is-last": index + 1 === this._items.length,
                 "is-first": index === 0,
@@ -204,4 +204,4 @@ function defineCustomElement() {
 export { StzhBreadcrumb as S, defineCustomElement as d };
-//# sourceMappingURL=p-8b1537d5.js.map
+//# sourceMappingURL=p-f4ff43ee.js.map

package/dist/components/{p-8b1537d5.js.map → p-f4ff43ee.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-8b1537d5.js","mappings":"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","names":[],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n overflow: hidden;\n --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n @media print {\n display: none;\n }\n\n &[variant=\"teaser\"] {\n --color: #{$colorGrey80};\n }\n}\n\n.stzh-breadcrumb {\n @include fontSize('milli');\n color: var(--color);\n\n &__list,\n &__item,\n &__item-link {\n display: flex;\n align-items: center;\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n }\n\n &__item.is-expand &__item-link {\n cursor: pointer;\n }\n\n &__item.is-hidden {\n position: absolute;\n visibility: hidden;\n }\n\n &__item.is-last &__item-link {\n @include font('heavy');\n }\n\n &__item.is-first &__item-label {\n @include visuallyhidden;\n }\n\n &__item-link {\n appearance: none;\n background-color: transparent;\n border: none;\n text-decoration: none;\n color: inherit;\n }\n\n &__item-link.is-link {\n cursor: pointer;\n transition: color $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $colorPrimary90;\n }\n }\n\n &__item-icon {\n margin-right: space('xxsmall');\n\n &.is-separator {\n --size: #{iconSize('small')};\n }\n }\n\n &__item-label-hidden {\n @include visuallyhidden;\n }\n\n /* Expanded variant /\n\n &--is-expanded &__list {\n flex-wrap: wrap;\n white-space: initial;\n }\n\n &--is-expanded .is-expand {\n position: absolute;\n }\n\n / Teaser variant /\n\n &--teaser {\n @include fontSize('micro');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Fragment, Event, EventEmitter,\n} from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/\n \n /\n@Component({\n tag: \"stzh-breadcrumb\",\n styleUrl: \"stzh-breadcrumb.scss\",\n scoped: true\n})\nexport class StzhBreadcrumb {\n /* Translation strings /\n @Prop() localization: StzhBreadcrumbLocalizedText;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"teaser\" = \"default\";\n\n /* Breadcrumb items /\n @Prop() items: StzhBreadcrumbItem[] \| string = [];\n private _items: StzhBreadcrumbItem[];\n\n /* Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n @Element() element: HTMLStzhBreadcrumbElement;\n\n @Watch(\"items\")\n itemsWatcher(newValue: StzhBreadcrumbItem[] \| string) {\n if (!newValue) {\n this._items = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._items = JSON.parse(newValue);\n } catch (e) {\n this._items = [];\n }\n } else {\n this._items = newValue;\n }\n }\n\n @Watch(\"expanded\")\n expandedWatcher() {\n this.updateContainer();\n }\n\n /* Item click event */\n @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n @State() hasHiddenItems: boolean = false;\n\n private navElement: HTMLElement;\n private itemSizes: [HTMLElement, number][];\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private debounceResizeItems: number;\n private resizeItemsObserver: ResizeObserver;\n\n private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n this.stzhItemClick.emit({\n component: \"stzh-breadcrumb\",\n item,\n originalEvent\n })\n }\n\n private updateContainer = () => {\n if (!this.navElement \|\| !this.itemSizes) {\n return;\n }\n\n const containerWidth = this.navElement.clientWidth;\n\n const totalItemsWidthWithoutExpandItem = this.itemSizes\n .reduce((previous, item, index) => {\n if (index === ITEM_EXPAND_INDEX) {\n return previous;\n } else {\n return previous + item[1];\n }\n }, 0);\n\n if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n const hideItems = [];\n\n const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n do {\n const current = this.itemSizes[currentIndexToHide];\n hideItems.push(current[0]);\n totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n } while (\n totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth\n && currentIndexToHide < this.itemSizes.length\n );\n\n this.hasHiddenItems = true;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.remove('is-hidden');\n } else {\n item.classList.toggle('is-hidden', hideItems.includes(item));\n }\n });\n } else {\n this.hasHiddenItems = false;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.add('is-hidden');\n } else {\n item.classList.remove('is-hidden');\n }\n });\n }\n }\n\n private updateItems = () => {\n if (!this.navElement) {\n return;\n }\n\n // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n const items = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item')) as HTMLElement[];\n this.itemSizes = [];\n\n items.forEach((item) => {\n const { width } = item.getBoundingClientRect();\n this.itemSizes.push([item, width]);\n })\n\n this.updateContainer();\n }\n\n private handleContainerResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateContainer);\n }\n\n private handleItemResize = () => {\n if (this.debounceResizeItems) {\n window.cancelAnimationFrame(this.debounceResizeItems);\n }\n\n this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n }\n\n private handleExpandClick = () => {\n this.expanded = true;\n\n const itemLinks = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item-link')) as HTMLElement[];\n itemLinks[2].focus();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n }\n }\n\n componentDidRender() {\n this.resizeObserver.observe(this.navElement);\n\n const items = this.navElement.querySelectorAll('.stzh-breadcrumb__item');\n items.forEach((item) => {\n this.resizeItemsObserver.observe(item);\n });\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.resizeItemsObserver) {\n this.resizeItemsObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-breadcrumb\": true,\n \"stzh-breadcrumb--is-expanded\": this.expanded,\n \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <nav\n ref={(el) => (this.navElement = el as HTMLElement)}\n class=\"stzh-breadcrumb__nav\"\n role=\"navigation\"\n aria-label={this.localization.title}\n >\n <ol class=\"stzh-breadcrumb__list\">\n {this._items.map((item, index) =>\n <Fragment>\n <li\n class={{\n \"stzh-breadcrumb__item\": true,\n \"is-last\": index + 1 === this._items.length,\n \"is-first\": index === 0,\n }}\n >\n <a\n aria-current={index + 1 === this._items.length ? \"page\" : null}\n href={item.href}\n onClick={(e) => this.handleClick(item, e)}\n class={{\n \"stzh-breadcrumb__item-link\": true,\n \"is-link\": !!item.href\n }}\n >\n {index === 0 ?\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon\"\n name=\"home\"\n ></stzh-icon>\n :\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n }\n <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n </a>\n </li>\n {index === 0 &&\n <li class=\"stzh-breadcrumb__item is-expand\">\n <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">\n {this.localization.expandLabel}\n </span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">\n {this.localization.expandHiddenLabel}\n </span>\n </span>\n </button>\n </li>\n }\n </Fragment>\n )}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-f4ff43ee.js","mappings":"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","names":[],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx"],"sourcesContent":[":host {\n overflow: hidden;\n --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n @media print {\n display: none;\n }\n\n &[variant=\"teaser\"] {\n --color: #{$colorGrey80};\n }\n}\n\n.stzh-breadcrumb {\n @include fontSize('milli');\n color: var(--color);\n\n &__list,\n &__item,\n &__item-link {\n display: flex;\n align-items: center;\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n white-space: nowrap;\n }\n\n &__item.is-expand &__item-link {\n cursor: pointer;\n }\n\n &__item.is-hidden {\n position: absolute;\n visibility: hidden;\n }\n\n &__item.is-last &__item-link {\n @include font('heavy');\n }\n\n &__item.is-first &__item-label {\n @include visuallyhidden;\n }\n\n &__item-link {\n appearance: none;\n background-color: transparent;\n border: none;\n text-decoration: none;\n color: inherit;\n }\n\n &__item-link.is-link {\n cursor: pointer;\n transition: color $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $colorPrimary90;\n }\n }\n\n &__item-icon {\n margin-right: space('xxsmall');\n\n &.is-separator {\n --size: #{iconSize('small')};\n }\n }\n\n &__item-label-hidden {\n @include visuallyhidden;\n }\n\n /* Expanded variant /\n\n &--is-expanded &__list {\n flex-wrap: wrap;\n white-space: initial;\n }\n\n &--is-expanded .is-expand {\n position: absolute;\n }\n\n / Teaser variant /\n\n &--teaser {\n @include fontSize('micro');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n State,\n Fragment, Event, EventEmitter,\n} from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/\n \n /\n@Component({\n tag: \"stzh-breadcrumb\",\n styleUrl: \"stzh-breadcrumb.scss\",\n scoped: true\n})\nexport class StzhBreadcrumb {\n /* Translation strings /\n @Prop() localization: StzhBreadcrumbLocalizedText;\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"teaser\" = \"default\";\n\n /* Breadcrumb items /\n @Prop() items: StzhBreadcrumbItem[] \| string = [];\n private _items: StzhBreadcrumbItem[];\n\n /* Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n @Element() element: HTMLStzhBreadcrumbElement;\n\n @Watch(\"items\")\n itemsWatcher(newValue: StzhBreadcrumbItem[] \| string) {\n if (!newValue) {\n this._items = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._items = JSON.parse(newValue);\n } catch (e) {\n this._items = [];\n }\n } else {\n this._items = newValue;\n }\n }\n\n @Watch(\"expanded\")\n expandedWatcher() {\n this.updateContainer();\n }\n\n /* Item click event */\n @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n @State() hasHiddenItems: boolean = false;\n\n private navElement: HTMLElement;\n private itemSizes: [HTMLElement, number][];\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private debounceResizeItems: number;\n private resizeItemsObserver: ResizeObserver;\n\n private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n this.stzhItemClick.emit({\n component: \"stzh-breadcrumb\",\n item,\n originalEvent\n })\n }\n\n private updateContainer = () => {\n if (!this.navElement \|\| !this.itemSizes) {\n return;\n }\n\n const containerWidth = this.navElement.clientWidth;\n\n const totalItemsWidthWithoutExpandItem = this.itemSizes\n .reduce((previous, item, index) => {\n if (index === ITEM_EXPAND_INDEX) {\n return previous;\n } else {\n return previous + item[1];\n }\n }, 0);\n\n if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n const hideItems = [];\n\n const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n do {\n const current = this.itemSizes[currentIndexToHide];\n hideItems.push(current[0]);\n totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n } while (\n totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth\n && currentIndexToHide < this.itemSizes.length\n );\n\n this.hasHiddenItems = true;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.remove('is-hidden');\n } else {\n item.classList.toggle('is-hidden', hideItems.includes(item));\n }\n });\n } else {\n this.hasHiddenItems = false;\n\n this.itemSizes.forEach(([item], index) => {\n if (index === ITEM_EXPAND_INDEX) {\n item.classList.add('is-hidden');\n } else {\n item.classList.remove('is-hidden');\n }\n });\n }\n }\n\n private updateItems = () => {\n if (!this.navElement) {\n return;\n }\n\n // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n const items = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item')) as HTMLElement[];\n this.itemSizes = [];\n\n items.forEach((item) => {\n const { width } = item.getBoundingClientRect();\n this.itemSizes.push([item, width]);\n })\n\n this.updateContainer();\n }\n\n private handleContainerResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateContainer);\n }\n\n private handleItemResize = () => {\n if (this.debounceResizeItems) {\n window.cancelAnimationFrame(this.debounceResizeItems);\n }\n\n this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n }\n\n private handleExpandClick = () => {\n this.expanded = true;\n\n const itemLinks = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item-link')) as HTMLElement[];\n itemLinks[2].focus();\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n }\n }\n\n componentDidRender() {\n this.resizeObserver.observe(this.navElement);\n\n const items = this.navElement.querySelectorAll('.stzh-breadcrumb__item');\n items.forEach((item) => {\n this.resizeItemsObserver.observe(item);\n });\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.resizeItemsObserver) {\n this.resizeItemsObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-breadcrumb\": true,\n \"stzh-breadcrumb--is-expanded\": this.expanded,\n \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <nav\n ref={(el) => (this.navElement = el as HTMLElement)}\n class=\"stzh-breadcrumb__nav\"\n role=\"navigation\"\n aria-label={this.localization.title}\n >\n <ol class=\"stzh-breadcrumb__list\">\n {this._items.map((item, index) =>\n <Fragment>\n <li\n class={{\n \"stzh-breadcrumb__item\": true,\n \"is-last\": index + 1 === this._items.length,\n \"is-first\": index === 0,\n }}\n >\n <a\n aria-current={index + 1 === this._items.length ? \"page\" : null}\n href={item.href}\n onClick={(e) => this.handleClick(item, e)}\n class={{\n \"stzh-breadcrumb__item-link\": true,\n \"is-link\": !!item.href\n }}\n >\n {index === 0 ?\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon\"\n name=\"home\"\n ></stzh-icon>\n :\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n }\n <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n </a>\n </li>\n {index === 0 &&\n <li class=\"stzh-breadcrumb__item is-expand\">\n <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n <stzh-icon\n class=\"stzh-breadcrumb__item-icon is-separator\"\n name=\"angle-right\"\n ></stzh-icon>\n <span class=\"stzh-breadcrumb__item-label\">\n <span aria-hdiden=\"true\">\n {this.localization.expandLabel}\n </span>\n <span class=\"stzh-breadcrumb__item-label-hidden\">\n {this.localization.expandHiddenLabel}\n </span>\n </span>\n </button>\n </li>\n }\n </Fragment>\n )}\n </ol>\n </nav>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-e6d206c1.js → p-fcde2fcb.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { d as abbreviateText, e as getMeta } from './p-1c261255.js';
-import { d as defineCustomElement$5 } from './p-fb02e9f7.js';
-import { d as defineCustomElement$4 } from './p-55350e52.js';
+import { d as defineCustomElement$5 } from './p-652ae542.js';
+import { d as defineCustomElement$4 } from './p-bd503085.js';
 import { d as defineCustomElement$3 } from './p-4d57271c.js';
 import { d as defineCustomElement$2 } from './p-9b5c568d.js';
 import { d as defineCustomElement$1 } from './p-d2f9a11a.js';
@@ -147,4 +147,4 @@ function defineCustomElement() {
 export { StzhShare as S, defineCustomElement as d };
-//# sourceMappingURL=p-e6d206c1.js.map
+//# sourceMappingURL=p-fcde2fcb.js.map