@oiz/stzh-components 3.2.0-beta1 → 3.2.0

package/dist/collection/components/stzh-datatable/stzh-datatable.stories.js

@@ -46,46 +46,79 @@ export default {
       allowFullscreen: true
     }
   },
-  decorators: [
-    withActions,
-    withDesign
-  ]
+  decorators: [withActions, withDesign]
 };
 
 const rows = [
-  { "id": { "value": 1 }, "theme": "AOZ", "text": "Laboris <strong>laborum</strong> aute id laboris", "text2": "Laboris <strong>laborum</strong> aute id laboris" },
-  { "id": { "value": 2 }, "theme": "PKZH", "text": "Culpa esse <em>aliquip</em> nisi anim velit", "text2": "Culpa esse <em>aliquip</em> nisi anim velit" },
-  { "id": { "value": 3 }, "theme": "VBZ", "text": "Minim sunt <a href='#'>eiusmod</a> do laborum amet", "text2": "Minim sunt <a href='#'>eiusmod</a> do laborum amet" },
-  { "id": { "value": 4 }, "theme": "UVZ", "text": "Labore dolore id nostrud enim", "text2": "Labore dolore id nostrud enim" },
-  { "id": { "value": 5 }, "theme": "Microsite", "text": "Labore dolore id nostrud enim", "text2": "Right aligned text", "align": "right" },
+  {
+    id: { value: 1 },
+    theme: 'AOZ',
+    text: 'Laboris <strong>laborum</strong> aute id laboris',
+    text2: 'Laboris <strong>laborum</strong> aute id laboris'
+  },
+  {
+    id: { value: 2 },
+    theme: 'PKZH',
+    text: 'Culpa esse <em>aliquip</em> nisi anim velit',
+    text2: 'Culpa esse <em>aliquip</em> nisi anim velit'
+  },
+  {
+    id: { value: 3 },
+    theme: 'VBZ',
+    text: "Minim sunt <a href='#'>eiusmod</a> do laborum amet",
+    text2: "Minim sunt <a href='#'>eiusmod</a> do laborum amet"
+  },
+  { id: { value: 4 }, theme: 'UVZ', text: 'Labore dolore id nostrud enim', text2: 'Labore dolore id nostrud enim' },
+  {
+    id: { value: 5 },
+    theme: 'Microsite',
+    text: 'Labore dolore id nostrud enim',
+    text2: 'Right aligned text',
+    align: 'right'
+  }
 ];
 
 const rowsMatrix = [
   [
-    { "value": 1 }, { "value": "AOZ" }, { "value": "Laboris <strong>laborum</strong> aute id laboris" }, { "value": "Laboris <strong>laborum</strong> aute id laboris" }
+    { value: 1 },
+    { value: 'AOZ' },
+    { value: 'Laboris <strong>laborum</strong> aute id laboris' },
+    { value: 'Laboris <strong>laborum</strong> aute id laboris' }
   ],
   [
-    { "value": 2 }, { "value": "PKZH" }, { "value": "Culpa esse <em>aliquip</em> nisi anim velit" }, { "value": "Culpa esse <em>aliquip</em> nisi anim velit" }
+    { value: 2 },
+    { value: 'PKZH' },
+    { value: 'Culpa esse <em>aliquip</em> nisi anim velit' },
+    { value: 'Culpa esse <em>aliquip</em> nisi anim velit' }
   ],
   [
-    { "value": 3 }, { "value": "VBZ" }, { "value": "Minim sunt <a href='#'>eiusmod</a> do laborum amet" }, { "value": "Minim sunt <a href='#'>eiusmod</a> do laborum amet" }
+    { value: 3 },
+    { value: 'VBZ' },
+    { value: "Minim sunt <a href='#'>eiusmod</a> do laborum amet" },
+    { value: "Minim sunt <a href='#'>eiusmod</a> do laborum amet" }
   ],
   [
-    { "value": 4 }, { "value": "UVZ" }, { "value": "Labore dolore id nostrud enim" }, { "value": "Labore dolore id nostrud enim" }
+    { value: 4 },
+    { value: 'UVZ' },
+    { value: 'Labore dolore id nostrud enim' },
+    { value: 'Labore dolore id nostrud enim' }
   ],
   [
-    { "value": 5 }, { "value": "Microsite" }, { "value": "Labore dolore id nostrud enim" }, { "value": "Right aligned text", "align": "right" }
-  ],
+    { value: 5 },
+    { value: 'Microsite' },
+    { value: 'Labore dolore id nostrud enim' },
+    { value: 'Right aligned text', align: 'right' }
+  ]
 ];
 
 export const Default = {
   render: (args) => story(args, TEMPLATE),
   args: {
     columns: [
-      { "key": "id", "text": "ID", "align": "right", "sort": { type: 'numerical', field: 'id' } },
-      { "key": "theme", "text": "Theme", "sort": true },
-      { "key": "text", "text": "Text" },
-      { "key": "text2", "text": "Text 2" }
+      { key: 'id', text: 'ID', align: 'right', sort: { type: 'numerical', field: 'id' } },
+      { key: 'theme', text: 'Theme', sort: true },
+      { key: 'text', text: 'Text' },
+      { key: 'text2', text: 'Text 2' }
     ],
     rows
   }
@@ -95,10 +128,10 @@ export const FixedCols = {
   render: (args) => story(args, TEMPLATE),
   args: {
     columns: [
-      { "key": "id", "text": "ID", "align": "right" },
-      { "key": "theme", "text": "Theme", "sort": true, "fixed": "left" },
-      { "key": "text", "text": "Text" },
-      { "key": "text2", "text": "Text 2", "fixed": "right" }
+      { key: 'id', text: 'ID', align: 'right' },
+      { key: 'theme', text: 'Theme', sort: true, fixed: 'left' },
+      { key: 'text', text: 'Text' },
+      { key: 'text2', text: 'Text 2', fixed: 'right' }
     ],
     rows
   }
@@ -109,10 +142,10 @@ export const WithList = {
   args: {
     'show-list': true,
     columns: [
-      { "key": "id", "text": "ID", "align": "right" },
-      { "key": "theme", "text": "Theme", "sort": true, "fixed": "left", "isHeader": true },
-      { "key": "text", "text": "Text" },
-      { "key": "text2", "text": "Text 2" }
+      { key: 'id', text: 'ID', align: 'right' },
+      { key: 'theme', text: 'Theme', sort: true, fixed: 'left', isHeader: true },
+      { key: 'text', text: 'Text' },
+      { key: 'text2', text: 'Text 2' }
     ],
     rows
   }
@@ -125,10 +158,15 @@ export const WithPagination = {
     page: 1,
     'page-size': 2,
     columns: [
-      { "key": "id", "text": "ID", "align": "right", style: { width: "53px" } },
-      { "key": "theme", "text": "Theme", "sort": true, style: { width: "100px", maxWidth: "100px", overflow: "hidden", textOverflow: "ellipsis" } },
-      { "key": "text", "text": "Text", style: { width: "50%" } },
-      { "key": "text2", "text": "Text 2", style: { width: "50%" } }
+      { key: 'id', text: 'ID', align: 'right', style: { width: '53px' } },
+      {
+        key: 'theme',
+        text: 'Theme',
+        sort: true,
+        style: { width: '100px', maxWidth: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }
+      },
+      { key: 'text', text: 'Text', style: { width: '50%' } },
+      { key: 'text2', text: 'Text 2', style: { width: '50%' } }
     ],
     rows
   }
@@ -141,10 +179,10 @@ export const WithCellHeading = {
     'hide-search': true,
     'row-header-field': 'theme',
     columns: [
-      { "key": "id", "text": "ID", "align": "right", "hideColumnHeading": true },
-      { "key": "theme", "text": "Theme", "fixed": "left", "isHeader": true },
-      { "key": "text", "text": "Text" },
-      { "key": "text2", "text": "Text 2" }
+      { key: 'id', text: 'ID', align: 'right', hideColumnHeading: true },
+      { key: 'theme', text: 'Theme', fixed: 'left', isHeader: true },
+      { key: 'text', text: 'Text' },
+      { key: 'text2', text: 'Text 2' }
     ],
     rows: rowsMatrix
   }
@@ -155,10 +193,43 @@ export const DataFromCSV = {
   args: {
     'csv-url': 'media/samples/datatable.csv',
     columns: [
-      { "key": "id", "text": "ID", "align": "right", "sort": { type: 'numerical', field: 'id' } },
-      { "key": "theme", "text": "Theme", "sort": true },
-      { "key": "text", "text": "Text" },
-      { "key": "text2", "text": "Text 2" }
+      { key: 'id', text: 'ID', align: 'right', sort: { type: 'numerical', field: 'id' } },
+      { key: 'theme', text: 'Theme', sort: true },
+      { key: 'text', text: 'Text' },
+      { key: 'text2', text: 'Text 2' }
+    ]
+  }
+};
+
+export const WithStylesColspanAndRowspan = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    columns: [
+      { key: 'id', text: 'ID', align: 'right', sort: { type: 'numerical', field: 'id' } },
+      {
+        key: 'theme',
+        text: 'Theme',
+        sort: true,
+        style: {
+          width: '300px',
+          height: '100px'
+        },
+        colspan: 2
+      },
+      { key: 'text', text: '' },
+      { key: 'text2', text: 'Text 2' }
+    ],
+    rows: [
+      ...rowsMatrix,
+      [{ value: 6 }, { value: 'Colspan of 3', colspan: '3' }, { value: '' }, { value: '', align: 'right' }],
+      [
+        { value: 7 },
+        { value: 'Rowspan of 2<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum', rowspan: '2' },
+        { value: 'Lorem' },
+        { value: 'Ipsum', align: 'right' }
+      ],
+      [{ value: 8 }, { value: '' }, { value: 'Ipsum' }, { value: 'Lorem', align: 'right' }],
+      [{ value: 9 }, { value: 'Lorem Ipsum' }, { value: 'Culpa' }, { value: 'Velit', align: 'right' }]
     ]
   }
 };

package/dist/collection/components/stzh-dialog/stzh-dialog.js

@@ -6,6 +6,7 @@ const CLASS_BODY_OPEN = "stzh-dialog-open";
 let activeDialog = null;
 let dialogCounter = 0;
 /**
+ * @slot actions - Slot for actions element
  * @slot - Slot for any content inside the dialog
  */
 export class StzhDialog {

package/dist/collection/components/stzh-dialog/stzh-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-dialog.js","sourceRoot":"","sources":["../../../../src/components/stzh-dialog/stzh-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.key === \"Escape\"\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\"\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"stzh-dialog.js","sourceRoot":"","sources":["../../../../src/components/stzh-dialog/stzh-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.key === \"Escape\"\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\"\n      } as HTMLStzhActionsElement)\n    }\n  }\n\n  private getSiblings() {\n    if (!this.parentElement) {\n      return [];\n    }\n\n    return Array.from(this.parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/stzh-disturber/stzh-disturber.css

@@ -174,6 +174,7 @@
   display: flex;
   background-color: var(--background-color);
   transition: background-color var(--stzh-base-transition-animation-speed);
+  z-index: var(--stzh-z-index-masked);
 }
 .stzh-disturber::before {
   content: "";

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.js

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { setPropsIfNull } from "../../utils/utils";
 /**
  * @slot - Slot for description content (use instead of description property)
+ * @slot button - Slot for button element
  */
 export class StzhGhettobox {
   constructor() {

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-ghettobox.js","sourceRoot":"","sources":["../../../../src/components/stzh-ghettobox/stzh-ghettobox.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { StzhGhettoboxOpenEvent, StzhGhettoboxCloseEvent } from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\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-ghettobox\"\n    })\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\"\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\"\n      } as HTMLStzhButtonElement)\n    }\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">\n              {this.hiddenTitle || this.localization.hiddenTitle}\n            </h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">\n                  {this.mainTitle}\n                </h2>\n                <div class=\"stzh-ghettobox__description\">\n                  {this.description ? this.description : <slot></slot>}\n                </div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose &&\n              <stzh-button\n                class=\"stzh-ghettobox__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        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-ghettobox.js","sourceRoot":"","sources":["../../../../src/components/stzh-ghettobox/stzh-ghettobox.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { StzhGhettoboxOpenEvent, StzhGhettoboxCloseEvent } from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhGhettoboxLocalizedText } from \"./stzh-ghettobox.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot button - Slot for button element\n */\n@Component({\n  tag: \"stzh-ghettobox\",\n  styleUrl: \"stzh-ghettobox.scss\",\n  scoped: true\n})\nexport class StzhGhettobox {\n  /** Overwrite hidden h1 title */\n  @Prop() hiddenTitle: string = \"\";\n\n  /** Main title */\n  @Prop() mainTitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings */\n  @Prop() localization: StzhGhettoboxLocalizedText;\n\n  /** Ghettobox open event */\n  @Event() stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;\n\n  /** Ghettobox close event */\n  @Event() stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;\n\n  @Element() element: HTMLStzhGhettoboxElement;\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-ghettobox\"\n    })\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-ghettobox\"\n    });\n  }\n\n  private observer: MutationObserver;\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const button = this.element.querySelector('stzh-button[slot=\"button\"]');\n\n    if (button) {\n      setPropsIfNull(button, {\n        size: \"small\",\n        sizeMedium: \"default\",\n        variant: \"secondary\",\n        effect: \"cta\",\n        icon: \"arrow-right\",\n        iconPosition: \"right\"\n      } as HTMLStzhButtonElement)\n    }\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"ghettobox\");\n    }\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-ghettobox\": true,\n      \"stzh-ghettobox--has-close-button\": !this.hideClose\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-ghettobox__container\">\n            <h1 class=\"stzh-ghettobox__hidden-title\">\n              {this.hiddenTitle || this.localization.hiddenTitle}\n            </h1>\n            <div class=\"stzh-ghettobox__message\">\n              <div class=\"stzh-ghettobox__text\">\n                <h2 class=\"stzh-ghettobox__main-title\">\n                  {this.mainTitle}\n                </h2>\n                <div class=\"stzh-ghettobox__description\">\n                  {this.description ? this.description : <slot></slot>}\n                </div>\n              </div>\n              <div class=\"stzh-ghettobox__button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n            {!this.hideClose &&\n              <stzh-button\n                class=\"stzh-ghettobox__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        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-header/stzh-header.js

@@ -12,6 +12,7 @@ const CLASS_BODY_OPEN = "stzh-header-open";
  * @slot menu-after - Slot for custom elements after other menu elements
  * @slot metanav-before - Slot for custom elements before other metanav elements
  * @slot metanav-after - Slot for custom elements after other metanav elements
+ * @slot search - Slot for search element
  */
 export class StzhHeader {
   constructor() {