@oiz/stzh-components 3.0.0-beta5 → 3.0.0

package/dist/types/components/stzh-checkboxgroup/stzh-checkboxgroup.d.ts

@@ -48,7 +48,6 @@ export declare class StzhCheckboxgroup {
   element: HTMLElement;
   watchName(newValue: string): void;
   watchDisabled(newValue: boolean): void;
-  watchInvalid(newValue: boolean): void;
   watchHideOptional(newValue: boolean): void;
   watchValue(newValue: string[] | string): void;
   errorWatcher(newValue: string | string[]): void;
@@ -57,6 +56,7 @@ export declare class StzhCheckboxgroup {
   stzhChange: EventEmitter<StzhCheckboxgroupChangeEvent>;
   resetListener(event: Event): void;
   onChange(event: CustomEvent<StzhCheckboxChangeEvent>): void;
+  private get errorUsed();
   /** Checkbox elements */
   private checkboxes;
   private checkboxgroupId;

package/dist/types/components/stzh-eventdata/stzh-eventdata.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @slot - Slot for multiple elements
+ * @slot label - Slot for label (alternative for label property)
+ */
+export declare class StzhEventdata {
+  /** Label (use label slot as alternative) */
+  label: string;
+  element: HTMLStzhEventdataElement;
+  render(): any;
+}

package/dist/types/components/stzh-eventinfo/stzh-eventinfo.d.ts

@@ -1,12 +1,22 @@
 import { StzhEventinfoItemInput, StzhLocaleAdapter } from "../../index";
 import { StzhEventinfoLocalizedText } from './stzh-eventinfo.localization';
 /**
+ * @slot location - stzh-text for location
+ * @slot additional-info - stzh-text for additional info
  */
 export declare class StzhEventinfo {
   /** Translation strings */
   localization: StzhEventinfoLocalizedText;
   /** Month heading level */
   monthHeadingLevel: "1" | "2" | "3" | "4";
+  /** Start date */
+  start: Date | string;
+  /** End date */
+  end: Date | string;
+  /** Calendar URL */
+  calendarUrl: string;
+  /** Calendar label */
+  calendarLabel: string;
   /** Event dates */
   items: StzhEventinfoItemInput[] | string;
   private _items;
@@ -17,8 +27,12 @@ export declare class StzhEventinfo {
    */
   dateAdapter: StzhLocaleAdapter;
   element: HTMLStzhEventinfoElement;
-  private _itemsGroupedByMonth;
   itemsWatcher(): void;
+  private _itemsGroupedByMonth;
+  private observer;
+  private init;
   componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): any;
 }

package/dist/types/components/stzh-eventinfo/stzh-eventinfo.localization.d.ts

@@ -1,4 +1,6 @@
 import { StzhLocaleComponent } from "../../utils/translation-utils";
 export type StzhEventinfoLocalizedText = StzhLocaleComponent & {
   addToCalendar: string;
+  expandMoreDates: string;
+  collapseMoreDates: string;
 };

package/dist/types/components/stzh-monthyearpicker/stzh-monthyearpicker.d.ts

@@ -1,8 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { StzhDropdownChangeEvent, StzhMonthyearpickerChangeEvent } from "../../index";
 import { StzhMonthyearpickerLocalizedText } from "./stzh-monthyearpicker.localization";
-/**
- */
 export declare class StzhMonthyearpicker {
   /** Initial open state of month dropdown */
   monthOpen: boolean;
@@ -14,6 +12,8 @@ export declare class StzhMonthyearpicker {
   /** Set which years to show (overwrites years from min/max) */
   years: number[] | string;
   private _years;
+  /** Sort direction */
+  yearSortDirection: "asc" | "desc";
   /**
    * Minimum month and year allowed to be picked in `YYYY-MM` format.
    * This setting can be used alone or together with the `max` property.
@@ -93,6 +93,7 @@ export declare class StzhMonthyearpicker {
   private onYearsDropdownChange;
   private onChange;
   private updateMonthOptions;
+  private initializeYears;
   private updateYearOptions;
   componentWillLoad(): Promise<void>;
   render(): any;

package/dist/types/components/stzh-pagebottom/stzh-pagebottom.d.ts

@@ -1,7 +1,6 @@
 import { ShareService } from "../../index";
 import { StzhPagebottomLocalizedText } from "./stzh-pagebottom.localization";
 /**
- * @slot logo - Slot for a logo image
  */
 export declare class StzhPagebottom {
   /**  Translation strings. */

package/dist/types/components/stzh-radiogroup/stzh-radiogroup.d.ts

@@ -48,7 +48,6 @@ export declare class StzhRadiogroup {
   element: HTMLElement;
   watchName(newValue: string): void;
   watchDisabled(newValue: boolean): void;
-  watchInvalid(newValue: boolean): void;
   watchRequired(newValue: boolean): void;
   watchValue(newValue: string): void;
   errorWatcher(newValue: string | string[]): void;
@@ -60,6 +59,7 @@ export declare class StzhRadiogroup {
   private radiogroupId;
   private observer;
   private updateRadiosProperty;
+  private get errorUsed();
   private updateCheckedRadioByValue;
   private uncheckRadios;
   private handleReset;

package/dist/types/components.d.ts

@@ -2317,11 +2317,29 @@ export namespace Components {
          */
         "localization": StzhEditorLocalizedText;
     }
+    interface StzhEventdata {
+        /**
+          * Label (use label slot as alternative)
+         */
+        "label": string;
+    }
     interface StzhEventinfo {
+        /**
+          * Calendar label
+         */
+        "calendarLabel": string;
+        /**
+          * Calendar URL
+         */
+        "calendarUrl": string;
         /**
           * Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`.
          */
         "dateAdapter": StzhLocaleAdapter1;
+        /**
+          * End date
+         */
+        "end": Date | string;
         /**
           * Event dates
          */
@@ -2334,6 +2352,10 @@ export namespace Components {
           * Month heading level
          */
         "monthHeadingLevel": "1" | "2" | "3" | "4";
+        /**
+          * Start date
+         */
+        "start": Date | string;
     }
     interface StzhFieldset {
         /**
@@ -3286,6 +3308,10 @@ export namespace Components {
           * Initial open state of year dropdown
          */
         "yearOpen": boolean;
+        /**
+          * Sort direction
+         */
+        "yearSortDirection": "asc" | "desc";
         /**
           * Set which years to show (overwrites years from min/max)
          */
@@ -5567,6 +5593,12 @@ declare global {
         prototype: HTMLStzhEditorElement;
         new (): HTMLStzhEditorElement;
     };
+    interface HTMLStzhEventdataElement extends Components.StzhEventdata, HTMLStencilElement {
+    }
+    var HTMLStzhEventdataElement: {
+        prototype: HTMLStzhEventdataElement;
+        new (): HTMLStzhEventdataElement;
+    };
     interface HTMLStzhEventinfoElement extends Components.StzhEventinfo, HTMLStencilElement {
     }
     var HTMLStzhEventinfoElement: {
@@ -6098,6 +6130,7 @@ declare global {
         "stzh-disturber": HTMLStzhDisturberElement;
         "stzh-dropdown": HTMLStzhDropdownElement;
         "stzh-editor": HTMLStzhEditorElement;
+        "stzh-eventdata": HTMLStzhEventdataElement;
         "stzh-eventinfo": HTMLStzhEventinfoElement;
         "stzh-fieldset": HTMLStzhFieldsetElement;
         "stzh-figure": HTMLStzhFigureElement;
@@ -8626,11 +8659,29 @@ declare namespace LocalJSX {
          */
         "localization"?: StzhEditorLocalizedText;
     }
+    interface StzhEventdata {
+        /**
+          * Label (use label slot as alternative)
+         */
+        "label"?: string;
+    }
     interface StzhEventinfo {
+        /**
+          * Calendar label
+         */
+        "calendarLabel"?: string;
+        /**
+          * Calendar URL
+         */
+        "calendarUrl"?: string;
         /**
           * Date adapter, for custom parsing/formatting. Must be object with a `parse` function which accepts a `string` and returns a `Date`, and a `format` function which accepts a `Date` and returns a `string`.
          */
         "dateAdapter"?: StzhLocaleAdapter1;
+        /**
+          * End date
+         */
+        "end"?: Date | string;
         /**
           * Event dates
          */
@@ -8643,6 +8694,10 @@ declare namespace LocalJSX {
           * Month heading level
          */
         "monthHeadingLevel"?: "1" | "2" | "3" | "4";
+        /**
+          * Start date
+         */
+        "start"?: Date | string;
     }
     interface StzhFieldset {
         /**
@@ -9674,6 +9729,10 @@ declare namespace LocalJSX {
           * Initial open state of year dropdown
          */
         "yearOpen"?: boolean;
+        /**
+          * Sort direction
+         */
+        "yearSortDirection"?: "asc" | "desc";
         /**
           * Set which years to show (overwrites years from min/max)
          */
@@ -11626,6 +11685,7 @@ declare namespace LocalJSX {
         "stzh-disturber": StzhDisturber;
         "stzh-dropdown": StzhDropdown;
         "stzh-editor": StzhEditor;
+        "stzh-eventdata": StzhEventdata;
         "stzh-eventinfo": StzhEventinfo;
         "stzh-fieldset": StzhFieldset;
         "stzh-figure": StzhFigure;
@@ -11758,6 +11818,7 @@ declare module "@stencil/core" {
             "stzh-disturber": LocalJSX.StzhDisturber & JSXBase.HTMLAttributes<HTMLStzhDisturberElement>;
             "stzh-dropdown": LocalJSX.StzhDropdown & JSXBase.HTMLAttributes<HTMLStzhDropdownElement>;
             "stzh-editor": LocalJSX.StzhEditor & JSXBase.HTMLAttributes<HTMLStzhEditorElement>;
+            "stzh-eventdata": LocalJSX.StzhEventdata & JSXBase.HTMLAttributes<HTMLStzhEventdataElement>;
             "stzh-eventinfo": LocalJSX.StzhEventinfo & JSXBase.HTMLAttributes<HTMLStzhEventinfoElement>;
             "stzh-fieldset": LocalJSX.StzhFieldset & JSXBase.HTMLAttributes<HTMLStzhFieldsetElement>;
             "stzh-figure": LocalJSX.StzhFigure & JSXBase.HTMLAttributes<HTMLStzhFigureElement>;

package/dist/vscode-data.json

@@ -3217,6 +3217,19 @@
         }
       ]
     },
+    {
+      "name": "stzh-eventdata",
+      "description": {
+        "kind": "markdown",
+        "value": "The STZH eventdata component."
+      },
+      "attributes": [
+        {
+          "name": "label",
+          "description": "Label (use label slot as alternative)"
+        }
+      ]
+    },
     {
       "name": "stzh-eventinfo",
       "description": {
@@ -3224,6 +3237,18 @@
         "value": "The STZH eventinfo component."
       },
       "attributes": [
+        {
+          "name": "calendar-label",
+          "description": "Calendar label"
+        },
+        {
+          "name": "calendar-url",
+          "description": "Calendar URL"
+        },
+        {
+          "name": "end",
+          "description": "End date"
+        },
         {
           "name": "items",
           "description": "Event dates"
@@ -3245,6 +3270,10 @@
               "name": "4"
             }
           ]
+        },
+        {
+          "name": "start",
+          "description": "Start date"
         }
       ]
     },
@@ -5211,6 +5240,18 @@
           "name": "year-open",
           "description": "Initial open state of year dropdown"
         },
+        {
+          "name": "year-sort-direction",
+          "description": "Sort direction",
+          "values": [
+            {
+              "name": "asc"
+            },
+            {
+              "name": "desc"
+            }
+          ]
+        },
         {
           "name": "years",
           "description": "Set which years to show (overwrites years from min/max)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oiz/stzh-components",
-  "version": "3.0.0-beta5",
+  "version": "3.0.0",
   "description": "STZH Web Components Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/cjs/stzh-details_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"stzh-details.stzh-message.entry.cjs.js","mappings":"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","names":["isStzhElement","stopAnimations","animateTo","shimKeyframesAutoValues","waitForEvent","h","Host"],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx","src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(--stzh-details-content-padding-top, #{space('medium')});\n  --content-padding-bottom: 0;\n\n  // @include mq($from: medium) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'medium')});\n  // }\n\n  // @include mq($from: large) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'large')});\n  // }\n\n  // &[no-padding-top]:not([no-padding-top=\"false\"]) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, 0px);\n  // }\n\n  // &[no-padding-bottom]:not([no-padding-bottom=\"false\"]) {\n  //   --content-padding-bottom: var(--stzh-details-content-padding-bottom, 0px);\n  // }\n}\n\n.stzh-details {\n  &,\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild\n        .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", newValue ? \"true\" : \"false\");\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  }\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.detailsId}-content`);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n    }\n  }\n\n  connectedCallback() {\n    let trigger = this.triggerElement?.firstElementChild;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !(child as HTMLElement).hasAttribute(\"slot\")) as HTMLElement\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.triggerElement && this.triggerElement.firstElementChild) {\n      this.triggerElement.firstElementChild.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n            class=\"stzh-details__trigger\"\n          >\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={(el) => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo70};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess70};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning90};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError70};\n    --background-color: #{$colorError20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-right', 'medium');\n    @include spaceCurve('gap', 'small');\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space('medium');\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-bottom: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-details_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"stzh-details.stzh-message.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx","src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(--stzh-details-content-padding-top, #{space('medium')});\n  --content-padding-bottom: 0;\n\n  // @include mq($from: medium) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'medium')});\n  // }\n\n  // @include mq($from: large) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'large')});\n  // }\n\n  // &[no-padding-top]:not([no-padding-top=\"false\"]) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, 0px);\n  // }\n\n  // &[no-padding-bottom]:not([no-padding-bottom=\"false\"]) {\n  //   --content-padding-bottom: var(--stzh-details-content-padding-bottom, 0px);\n  // }\n}\n\n.stzh-details {\n  &,\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild\n        .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", newValue ? \"true\" : \"false\");\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  }\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.detailsId}-content`);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n    }\n  }\n\n  connectedCallback() {\n    let trigger = this.triggerElement?.firstElementChild;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !(child as HTMLElement).hasAttribute(\"slot\")) as HTMLElement\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.triggerElement && this.triggerElement.firstElementChild) {\n      this.triggerElement.firstElementChild.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n            class=\"stzh-details__trigger\"\n          >\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={(el) => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo70};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess70};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning90};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError70};\n    --background-color: #{$colorError20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-right', 'medium');\n    @include spaceCurve('gap', 'small');\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space('medium');\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-bottom: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/stzh-components/p-05e8c18d.js

@@ -1,2 +0,0 @@
-const t="@oiz/stzh-components";const n="3.0.0-beta5";const o=t.substring(t.indexOf("/")+1);const e=t=>{const n=document.querySelector("[autofocus]");if(window.stzhComponents.fixAutofocus&&!document.location.hash&&n&&t.detail.namespace===o&&n.tagName.toLowerCase().indexOf("stzh-")===0&&"focus"in n){n.focus()}else if(window.stzhComponents.fixHashfocus&&document.location.hash){const t=document.querySelector(document.location.hash);if(t){t.scrollIntoView()}}};function s(){window.addEventListener("appload",e)}function i(){const t={threshold:1};const n=t=>{t.forEach((t=>{let n=0;if(t.intersectionRatio<1){n=window.innerWidth-document.documentElement.clientWidth}document.documentElement.style.setProperty("--stzh-scrollbar-width",n+"px");document.documentElement.style.setProperty("--stzh-scrollbar-active",n>0?"1":"0")}))};const o=new IntersectionObserver(n,t);o.observe(document.body)}function a(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.format(t,n)}function r(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.parse(t,n)}function c(t,n,o="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:e,$globals:s}=window.stzhComponents.translations;const i=f(e,s);return i.formatSpan(t,n,o)}function l(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.parseSpan(t,n)}function f(t,n){const o=function(t,o){if(!o||!(o instanceof Date)||isNaN(o.getTime())){return""}let e=o.getDate().toString(10);let s=e;let i=(o.getMonth()+1).toString(10);let a=i;let r=o.getFullYear().toString(10);let c=o.getHours().toString(10);let l=c;let f=o.getMinutes().toString(10);let u=n.monthNames[o.getMonth()];let d=n.monthNamesShort[o.getMonth()];let w=n.dayNames[o.getDay()];let m=n.dayNamesShort[o.getDay()];if(o.getMonth()<9){a=`0${a}`}if(o.getDate()<10){s=`0${s}`}if(o.getHours()<10){l=`0${l}`}if(o.getMinutes()<10){f=`0${f}`}return t.replace(/\{j\}/g,e).replace(/\{d\}/g,s).replace(/\{D\}/g,m).replace(/\{l\}/g,w).replace(/\{n\}/g,i).replace(/\{m\}/g,a).replace(/\{F\}/g,u).replace(/\{M\}/g,d).replace(/\{Y\}/g,r).replace(/\{H\}/g,l).replace(/\{G\}/g,c).replace(/\{i\}/g,f)};const e=function(t,n){if(!n){return}const o=new RegExp(t);const e=n.match(o);if(e){const{groups:t}=e;const n=parseInt(t.Y||"",10);const o=parseInt(t.n||t.m||"",10);const s=parseInt(t.j||t.d||"",10);const i=parseInt(t.G||t.H||"",10);const a=parseInt(t.i||"",10);if(!isNaN(n)&&(n<1e3||n>9999)){return}if(!isNaN(o)&&(o<1||o>12)){return}if(!isNaN(s)&&(s<1||s>31)){return}if(!isNaN(i)&&(i<0||i>23)){return}if(!isNaN(a)&&(a<0||a>59)){return}const r=new Date(!isNaN(n)?n:null,!isNaN(o)?o-1:null,!isNaN(s)?s:null,!isNaN(i)?i:null,!isNaN(a)?a:null);if(r.getMonth()+1!==o){return}return r}};const s={format:function(n,e="datetime"){const s={...t[e],...window.stzhComponents?.formats[e]||{}};if(typeof s.format==="string"){return o(s.format,n)}else{return s.format(n)}},parse:function(n,o="datetime"){const s={...t[o],...window.stzhComponents?.formats[o]||{}};if(typeof s.parse==="string"){return e(s.parse,n)}else{return s.parse(n)}},formatSpan:function(t,o,e="datetime"){let s=t;let i=o;if(t instanceof Date&&!isNaN(t.getTime())){s=this.format(t,e)}if(o instanceof Date&&!isNaN(o.getTime())){i=this.format(o,e)}let a=n.dateRange;if(e.startsWith("time")){a=n.timeRange}return s+(i&&(!(i instanceof Date)||i instanceof Date&&!isNaN(t.getTime()))?a+i:"")},parseSpan:function(t,o){let e=n.dateRange;if(o.startsWith("time")){e=n.timeRange}const s=t.split(e);const i=this.parse(s[0],o);const a=this.parse(s[1],o);return[i,a,e]}};return s}function u(t){const n=t.closest("[lang]");const o=n&&n.lang.split("-")[0];if(window.stzhComponents.supportedLocales.indexOf(o)===-1||!o){return window.stzhComponents.defaultLocale}else{return o}}async function d(t,n){const o=u(t);const e=JSON.parse(sessionStorage.getItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${o}`));if(window.stzhComponents.cacheTranslations&&window.stzhComponents.version.match(/-dev-snapshot/i)===null&&e&&Object.keys(e).length>0){return{...e[n]||{},$globals:e.$globals,$locale:e.$code,$formats:e.$formats,$formatsIso:e.$formatsIso,$formatsLegacy:e.$formatsLegacy}}try{const t=await fetch(`${window.stzhComponents.pathTranslations}/${o}.json`);if(t.ok){const e=await t.json();sessionStorage.setItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${o}`,JSON.stringify(e));return{...e[n]||{},$globals:e.$globals,$locale:e.$code,$formats:e.$formats,$formatsIso:e.$formatsIso,$formatsLegacy:e.$formatsLegacy}}}catch(t){console.error(`Error loading locale: ${o}`,t)}}const w=Object.freeze({__proto__:null,format:a,parse:r,formatSpan:c,parseSpan:l,createFormatParseAdapter:f,getLocale:u,fetchTranslations:d});function m(){window.stzhComponents=Object.assign(Object.assign({defaultLocale:"de",pathMedia:"/",pathTranslations:"/",cacheTranslations:true,formats:{},translations:null,fixAutofocus:true,fixHashfocus:true},window.stzhComponents||{}),{version:n,supportedLocales:["de","en"],utils:w});if(window.stzhComponents.translations===null){window.stzhComponents.translationsLoading=d(document.documentElement).then((t=>{window.stzhComponents.translations=t})).catch((t=>{console.error("Translations couldn't load:",t)}))}s();i()}const p=m;export{p as g};
-//# sourceMappingURL=p-05e8c18d.js.map

package/dist/stzh-components/p-0aabd857.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDatalistCss","StzhDatalist","this","_items","setCurrentDirection","media","matches","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","setCurrentColumns","columnsUltra","currentColumns","columnsLarge","columnsMedium","columnsSmall","columns","resizeHandler","directionWatcher","columnsWatcher","currentDirectionWatcher","newValue","stzhDirectionChange","emit","component","value","variantWatcher","stzhVariantChange","itemsWatcher","JSON","parse","getCurrentDirection","componentWillLoad","items","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","variant","h","Host","style","toString","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","_meta","external","isPhone","onActionClick","originalEvent","stzhItemActionClick","onClick","event","stzhClick","href","handleDirectionChange","detail","handleVariantChange","metaWatcher","ex","externalWatcher","rel","includes","hrefWatcher","startsWith","renderInner","isButton","hasActionButton","Item","Icon","Fragment","icon","name","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","iconPosition","curve","innerHTML","statusLabel","type","statusType","meta","index","renderLeadingIcon","leadingIcon","componentDidLoad","window","stzhComponents","utils","fetchTranslations","element","datalist","closest","_a","addEventListener","_b","removeEventListener","iconHref","iconTooltip","ActionItem","ActionButton","size","iconLabel","iconOnly","content"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  // @prop --item-label-min-width: Min width of label\n  // --item-label-min-width: 120px;\n  --columns: 1;\n  --columns-gap: #{$gridGutter};\n  --list-display: grid;\n  --list-margin-right: calc(var(--columns-gap) / -1);\n  --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n  --full-grid-column: 1 / 5;\n  --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n  --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n  --grid-template-areas: var(\n    --stzh-datalist-grid-template-areas,\n    \"list list list list\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-datalist-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  margin-left: var(--nested-margin-left);\n\n  @include mq($from: small) {\n    --columns-gap: #{$gridGutterSmall};\n\n    --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --columns-gap: #{$gridGutterMedium};\n\n    --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list list list list list\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-datalist-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --columns-gap: #{$gridGutterLarge};\n  }\n\n  @include mq($from: ultra) {\n    --columns-gap: #{$gridGutterUltra};\n  }\n\n  // @include mq($from: medium) { // was smallheader before\n  //   --item-label-min-width: 144px;\n  // }\n\n  // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n  //   --item-label-min-width: none;\n  // }\n\n  // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n  // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n  ::slotted(.layout_column) > *:not([class*=\"cq-\"]),\n  ::slotted(*:not([class*=\"cq-\"])) {\n    display: contents;\n  }\n\n  // ::slotted(.layout_column) {\n  //   display: contents;\n\n  //   .section {\n  //     display: contents;\n  //   }\n  // }\n\n  &[is-direction=\"horizontal\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 6;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n\n  &[variant=\"table\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 7;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks */\n\n:host(:has([class*=\"cq-\"])) {\n  --stzh-datalist-item-wrapper-display: flex;\n\n  --list-display: block;\n  --list-margin-right: 0;\n}\n\n.stzh-datalist {\n  // offset margin of nested datalist\n  --stzh-datalist-nested-margin-left: #{space('large')};\n  // details grid columns\n  --stzh-details-content-grid-column: var(--full-grid-column);\n  --stzh-details-content-padding-right: var(--columns-gap);\n  --stzh-details-content-width: var(--details-content-width);\n\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: list;\n    overflow: visible;\n  }\n\n  &__list {\n    display: var(--list-display);\n    border-collapse: collapse;\n    grid-template-columns: var(--list-grid-template-columns);\n    align-items: stretch;\n    margin-right: var(--list-margin-right);\n  }\n\n  /* Multiple Columns */\n\n  &--has-multiple-columns {\n    // display of nested datalist\n    --stzh-datalist-item-nested-display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemEntry,\n  StzhDatalistDirection,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true\n})\nexport class StzhDatalist {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n \n  /** Columns */\n  @Prop({ reflect: true }) columns: number = 1;\n\n  /** Columns above small breakpoint */\n  @Prop({ reflect: true }) columnsSmall: number;\n\n  /** Columns above medium breakpoint  */\n  @Prop({ reflect: true }) columnsMedium: number;\n\n  /** Columns above large breakpoint  */\n  @Prop({ reflect: true }) columnsLarge: number;\n\n  /** Columns above ultra breakpoint  */\n  @Prop({ reflect: true }) columnsUltra: number;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n  /**\n   * Whether to disable min-width of datalist item label for the `horizontal` variant.\n   *\n   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n   *\n   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n   */\n  // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n  /**\n   * Items in datalist\n   * Array of objects that must at least include `value` attribute.\n   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n   * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n   */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n  private _items: StzhDatalistItemEntry[] = [];\n\n  /** Variant attribute change event */\n  @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.setCurrentDirection();\n  }\n\n  @Watch(\"columns\")\n  @Watch(\"columnsSmall\")\n  @Watch(\"columnsMedium\")\n  @Watch(\"columnsLarge\")\n  @Watch(\"columnsUltra\")\n  columnsWatcher() {\n    this.setCurrentColumns();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: StzhDatalistDirection) {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhDatalistVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  /** Get current direction */\n  @Method()\n  async getCurrentDirection() {\n    return this.currentDirection;\n  }\n\n  @State() currentColumns: number = 1;\n  @State() currentDirection: StzhDatalistDirection;\n\n  private setCurrentDirection = () => {\n    if (media(\"ultra\").matches && this.directionUltra) {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge) {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium) {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall) {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  }\n\n  private setCurrentColumns = () => {\n    if (media(\"ultra\").matches && this.columnsUltra) {\n      this.currentColumns = this.columnsUltra;\n    } else if (media(\"large\").matches && this.columnsLarge) {\n      this.currentColumns = this.columnsLarge;\n    } else if (media(\"medium\").matches && this.columnsMedium) {\n      this.currentColumns = this.columnsMedium;\n    } else if (media(\"small\").matches && this.columnsSmall) {\n      this.currentColumns = this.columnsSmall;\n    } else {\n      this.currentColumns = this.columns;\n    }\n  }\n\n  resizeHandler = () => {\n    this.setCurrentDirection();\n    this.setCurrentColumns();\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.resizeHandler();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.resizeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.resizeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datalist\": true,\n      \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n      [`stzh-datalist--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host\n        is-direction={this.currentDirection}\n        style={{\n          '--columns': this.currentColumns ? this.currentColumns.toString() : null\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-datalist__wrapper\">\n            <div class=\"stzh-datalist__list\" role=\"list\">\n              {this._items.map((item) =>\n                <stzh-datalist-item {...item}>\n                  {item.items && item.items.length > 0 &&\n                    <stzh-datalist items={item.items}></stzh-datalist>\n                  }\n                </stzh-datalist-item>\n              )}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --value-font-family: var(--stzh-font-family-medium);\n  --value-font-weight: var(--stzh-font-weight-medium);\n  --value-color: inherit;\n  --action-display: flex;\n  // --label-min-width: var(--item-label-min-width, none);\n  // --leading-icon-background-color: transparent;\n  --leading-icon-color: #{$colorGrey90};\n  --nested-display: var(--stzh-datalist-item-nested-display, block);\n  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n  // --hover-leading-icon-background-color: var(--leading-icon-background-color);\n  // --hover-leading-icon-color: var(--leading-icon-color);\n\n  // --horizontal-min-height: 48px;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --value-color: #{$linkColor};\n    --value-hover-color: #{$linkHoverColor};\n  }\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n  display: var(--wrapper-display);\n  align-items: center;\n\n  &__nested {\n    display: contents;\n  }\n\n  &__nested-inner {\n    display: var(--nested-display);\n    grid-column: var(--full-grid-column);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: grid;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    text-align: left;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space('xsmall');\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    // background-color: var(--leading-icon-background-color);\n    // display: flex;\n    // justify-content: center;\n    // align-items: center;\n    // border-radius: 50%;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space('xsmall');\n    color: var(--value-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    flex-grow: 1;\n    flex-direction: column;\n  }\n\n  &__value-text {\n    --color: initial;\n\n    @include fontCurve('p1');\n    font-family: var(--value-font-family);\n    font-weight: var(--value-font-weight);\n    width: auto;\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve('caption');\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__meta-text {\n    display: flex;\n    gap: space('xsmall');\n    color: $colorGrey70;\n  }\n\n  &__label {\n    color: $colorGrey90;\n  }\n\n  &__label-icon {\n\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightSmall;\n      height: $formInputHeightSmall;\n    }\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive &__value-text {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__value-wrapper {\n    color: var(--value-hover-color);\n  }\n\n  // &--is-interactive:hover &__leading-icon-container,\n  // &--is-interactive:focus-within &__leading-icon-container {\n  //   color: var(--hover-leading-icon-color);\n  //   background-color: var(--hover-leading-icon-background-color);\n  // }\n\n  /* Vertical Variant */\n\n  &--direction-vertical &__leading,\n  &--direction-vertical &__wrapper,\n  &--direction-vertical &__action-list {\n    &:not(:empty) {\n      @include spaceCurve('padding-top', 'tiny');\n      @include spaceCurve('padding-bottom', 'tiny');\n    }\n  }\n\n  // &--direction-vertical &__leading-icon-container {\n  //   width: 40px;\n  //   height: 40px;\n  // }\n\n  // &--direction-vertical &__leading-icon {\n  //   --size: #{iconSize('medium')};\n  // }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  /* Horizontal / Table Variant */\n\n  // &--direction-horizontal &__leading,\n  // &--direction-horizontal &__value,\n  // // &--direction-horizontal &__label,\n  // &--direction-horizontal &__meta,\n  // &--direction-horizontal &__action-list {\n  //   min-height: var(--horizontal-min-height);\n  // }\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  // &--direction-horizontal &__label,\n  &--direction-horizontal &__action-list {\n    &:not(:empty) {\n      @include spaceCurve('padding-top', 'tiny');\n      @include spaceCurve('padding-bottom', 'tiny');\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    @include spaceCurve('padding-bottom', 'tiny');\n    padding-top: calc(#{spaceCurveValue('tiny')} + 12px);\n\n    @include mq($from: medium) {\n      padding-top: calc(#{spaceCurveValue('tiny', 'medium')} + 12px);\n    }\n\n    @include mq($from: large) {\n      padding-top: calc(#{spaceCurveValue('tiny', 'large')} + 12px);\n    }\n  }\n\n  // &--direction-horizontal &__label {\n  //   &:not(:empty) {\n  //     min-width: var(--label-min-width);\n  //     padding-right: space('xsmall');\n  //   }\n  // }\n\n  // &--direction-horizontal &__label:not(:empty) + &__value {\n  //   &:not(:empty) {\n  //     padding-left: space('xsmall');\n  //   }\n  // }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  // &--direction-horizontal &__leading-icon-container {\n  //   width: 24px;\n  //   height: 24px;\n  // }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space('xsmall');\n  }\n\n  /** Table Variant */\n\n  &--table &__label,\n  &--table &__meta {\n    @include fontSize('nano');\n  }\n\n  &--table &__label {\n    color: $colorGrey70;\n  }\n\n  &--table &__value-text {\n    @include fontSize('milli');\n  }\n\n  &--table &__leading,\n  &--table &__value,\n  &--table &__label,\n  &--table &__meta,\n  &--table &__action-list {\n    &:not(:empty) {\n      padding-top: space('xsmall');\n      padding-bottom: space('small');\n    }\n  }\n\n  &--table &__label:not(:empty) + &__value {\n    padding-left: space('medium');\n  }\n\n  &--table &__meta {\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistVariant,\n  StzhDatalistDirection,\n  StzhStatusType,\n  StzhDatalistItemClickEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton &&\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n              ? this.icon\n              : (this.isPhone\n                ? \"phone\"\n                : (this.external && \"external-link\")\n              )}\n            ></stzh-icon>\n          </div>\n        }\n\n        {isButton &&\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        }\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" &&\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        }\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" &&\n            <div class=\"stzh-datalist-item__label\">{this.label}</div>\n          }\n\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value\n              ?\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n              :\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            }\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel &&\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          }\n          {this._meta.length > 0 &&\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) =>\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length &&\n                    <span class=\"stzh-datalist-item__meta-separator\">|</span>\n                  }\n                </Fragment>\n              )}\n            </span>\n          }\n        </Item>\n      </Fragment>\n    )\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon &&\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        }\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant\n    };\n\n    let ActionItem = isButton\n      ? \"button\"\n      : (hasActionButton\n        ? \"div\"\n        : \"a\"\n        );\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton, hasActionButton)}\n              </div>\n            </Fragment>\n          }\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {/* {this.href && !this.iconHref &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            } */}\n\n            {/* {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            } */}\n\n            {hasActionButton &&\n              (\n                this.iconTooltip\n                ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton()\n              )\n            }\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}