@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/collection/components/stzh-pi-teaser/stzh-pi-teaser.js

@@ -0,0 +1,234 @@
+import { h, Host } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot heading - Heading text (alternative for heading property)
+ * @slot lead - Lead text (alternative for lead property)
+ * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)
+ */
+export class StzhPiTeaser {
+  constructor() {
+    this.handleCardClick = (originalEvent) => {
+      this.stzhClick.emit({
+        component: "stzh-pi-teaser",
+        originalEvent,
+        href: this.href,
+      });
+    };
+    this.href = undefined;
+    this.target = undefined;
+    this.analyticsId = undefined;
+    this.dateline = "";
+    this.heading = "";
+    this.headingLevel = "3";
+    this.lead = "";
+    this.date = "";
+  }
+  componentDidRender() {
+    requestAnimationFrame(() => {
+      var _a, _b;
+      const objectId = this.analyticsId || ((_a = this.headingTextElement) === null || _a === void 0 ? void 0 : _a.innerText);
+      if (objectId) {
+        (_b = this.titleLinkElement) === null || _b === void 0 ? void 0 : _b.setAttribute("s-object-id", objectId);
+      }
+    });
+  }
+  renderHeading() {
+    const Heading = `h${this.headingLevel}`;
+    const TitleLink = this.href ? "a" : "button";
+    return (h("div", { class: "stzh-pi-teaser__title-wrapper" }, this.dateline && h("p", { class: "stzh-pi-teaser__dateline" }, this.dateline), h(Heading, { class: "stzh-pi-teaser__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))));
+  }
+  render() {
+    const hasLead = !!this.lead || hasSlot(this.element, "lead");
+    const hasImageSlot = hasSlot(this.element, "image");
+    const shouldRenderTitleRatio = !hasImageSlot;
+    const classes = {
+      "stzh-pi-teaser": true,
+      "stzh-pi-teaser--has-lead": hasLead,
+      "stzh-pi-teaser--has-image": hasImageSlot,
+    };
+    return (h(Host, { "has-lead": hasLead }, h("article", { class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { class: "stzh-pi-teaser__image" }, h("stzh-ratio", { ratio: "2:1" }, h("slot", { name: "image" }))), shouldRenderTitleRatio && (h("stzh-ratio", { class: "stzh-pi-teaser__title-ratio", ratio: "2:1" }, this.renderHeading())), h("div", { class: "stzh-pi-teaser__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), h("div", { class: "stzh-pi-teaser__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })), this.date && h("div", { class: "stzh-pi-teaser__date" }, this.date)))));
+  }
+  static get is() { return "stzh-pi-teaser"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-pi-teaser.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-pi-teaser.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href of card"
+        },
+        "attribute": "href",
+        "reflect": true
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "target if the button is used as link (if href used)"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
+      "analyticsId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "For Adobe Analytics.\nWill be rendered as value of `s-object-id` attribute to the link elements.\nDefault value will be taken from `heading` prop/slot."
+        },
+        "attribute": "analytics-id",
+        "reflect": false
+      },
+      "dateline": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Dateline"
+        },
+        "attribute": "dateline",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading (alternative for heading slot)"
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "headingLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "resolved": "\"1\" | \"2\" | \"3\" | \"4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading level"
+        },
+        "attribute": "heading-level",
+        "reflect": false,
+        "defaultValue": "\"3\""
+      },
+      "lead": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Lead text (alternative for lead slot)"
+        },
+        "attribute": "lead",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "date": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date"
+        },
+        "attribute": "date",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhClick",
+        "name": "stzhClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Click event (if href is used)"
+        },
+        "complexType": {
+          "original": "StzhPiTeaserClickEvent",
+          "resolved": "{ component: \"stzh-pi-teaser\"; originalEvent: MouseEvent; href: string; }",
+          "references": {
+            "StzhPiTeaserClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhPiTeaserClickEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=stzh-pi-teaser.js.map

package/dist/collection/components/stzh-pi-teaser/stzh-pi-teaser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-pi-teaser.js","sourceRoot":"","sources":["../../../../src/components/stzh-pi-teaser/stzh-pi-teaser.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../index\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const shouldRenderTitleRatio = !hasImageSlot;\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImageSlot,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-teaser__image\">\n            <stzh-ratio ratio=\"2:1\">\n              <slot name={\"image\"}></slot>\n            </stzh-ratio>\n          </div>\n          {shouldRenderTitleRatio && (\n            <stzh-ratio class=\"stzh-pi-teaser__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-teaser__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-teaser__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n            {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-pi-teaser/stzh-pi-teaser.stories.js

@@ -0,0 +1,66 @@
+import { createComponentStory } from '../../utils/story-utils';
+import { withActions } from '@storybook/addon-actions/decorator';
+import readme from './readme.md?raw';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+const COMPONENT_NAME = 'stzh-pi-teaser';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-pi-teaser>
+  <img slot="image" src="media/images/example2.jpg" alt="Example image" />
+</stzh-pi-teaser>
+`;
+
+const TEMPLATE_WITHOUT_IMAGE = `
+<stzh-pi-teaser>
+</stzh-pi-teaser>
+`;
+
+export default {
+  title: 'Components/PublizistischeInhalte/PiTeaser',
+  component: COMPONENT_NAME,
+  parameters: {
+    stzh: {
+      activeTheme: 'stzh-theme-pi-lemongrass'
+    },
+    layout: 'padded',
+    actions: {
+      handles: ['stzhClick']
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('7980-306604'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [withActions, withDesign]
+};
+
+export const WithImage = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    href: '#',
+    dateline: 'Lorem ipsum',
+    heading: 'Lorem ipsum dolor si amet',
+    lead: 'Lorem ipsum dolor si amet, consectetur adipiscing elit',
+    date: '09.04.2024'
+  }
+};
+
+export const WithoutImage = {
+  render: (args) => story(args, TEMPLATE_WITHOUT_IMAGE),
+  args: {
+    href: '#',
+    dateline: 'Lorem ipsum',
+    heading: 'Lorem ipsum dolor si amet',
+    lead: 'Lorem ipsum dolor si amet, consectetur adipiscing elit',
+    date: '09.04.2024'
+  }
+};

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */

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

@@ -30,6 +30,7 @@ export class StzhProgressbar {
     this.stepsMedium = 0;
     this.stepsLarge = 0;
     this.stepsUltra = 0;
+    this.clickDisabled = false;
     this.currentSteps = undefined;
   }
   /**
@@ -115,7 +116,7 @@ export class StzhProgressbar {
     };
     return (h(Host, { style: {
         '--steps': this.currentSteps ? this.currentSteps.toString() : null,
-      } }, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, class: "stzh-progressbar__item" })))))));
+      } }, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": this.clickDisabled, class: "stzh-progressbar__item" })))))));
   }
   static get is() { return "stzh-progressbar"; }
   static get encapsulation() { return "scoped"; }
@@ -283,6 +284,24 @@ export class StzhProgressbar {
         "attribute": "steps-ultra",
         "reflect": false,
         "defaultValue": "0"
+      },
+      "clickDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether all the progressbar-items are clickable."
+        },
+        "attribute": "click-disabled",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-progressbar.js","sourceRoot":"","sources":["../../../../src/components/stzh-progressbar/stzh-progressbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n    /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  /**\n   * Return infos about rendered progressbar items.\n   * Array of objects including: hide (whether step is hidden)\n   * / passed (whether step has been passed)\n   * / current (whether step is currently active)\n   * / dotted (whether step has dotted style active)\n   * / first|last (whether step is first or last)\n   * / label\n   */\n  @Method()\n  async getItemData() {\n    return this._data.map((step, index) => {\n      return {\n        ...step,\n        ...this.getItemAttributes(index)\n      }\n    });\n  }\n\n  @Watch(\"steps\")\n  @Watch(\"stepsSmall\")\n  @Watch(\"stepsMedium\")\n  @Watch(\"stepsLarge\")\n  @Watch(\"stepsUltra\")\n  stepsWatcher() {\n    this.setCurrentSteps();\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host\n        style={{\n          '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-progressbar.js","sourceRoot":"","sources":["../../../../src/components/stzh-progressbar/stzh-progressbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop() index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n    /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  /**\n   * Whether all the progressbar-items are clickable.\n   */\n  @Prop() clickDisabled: boolean = false;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  /**\n   * Return infos about rendered progressbar items.\n   * Array of objects including: hide (whether step is hidden)\n   * / passed (whether step has been passed)\n   * / current (whether step is currently active)\n   * / dotted (whether step has dotted style active)\n   * / first|last (whether step is first or last)\n   * / label\n   */\n  @Method()\n  async getItemData() {\n    return this._data.map((step, index) => {\n      return {\n        ...step,\n        ...this.getItemAttributes(index)\n      }\n    });\n  }\n\n  @Watch(\"steps\")\n  @Watch(\"stepsSmall\")\n  @Watch(\"stepsMedium\")\n  @Watch(\"stepsLarge\")\n  @Watch(\"stepsUltra\")\n  stepsWatcher() {\n    this.setCurrentSteps();\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host\n        style={{\n          '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                click-disabled={this.clickDisabled}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -180,3 +180,12 @@ export const WithIcons = {
     ]
   }
 };
+
+export const Unclickable = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    data: oversixStepsData,
+    index: 1,
+    "click-disabled": true
+  }
+}

package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.css

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */
@@ -177,16 +180,22 @@
   /* Dotted */
   /* Disabled */
 }
-.stzh-progressbar-item__button {
+.stzh-progressbar-item__button, .stzh-progressbar-item__unclickable {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   font-family: inherit;
   background-color: transparent;
   border: none;
-  cursor: pointer;
   border-radius: var(--stzh-form-input-border-radius);
 }
+.stzh-progressbar-item__button {
+  cursor: pointer;
+}
+.stzh-progressbar-item__unclickable {
+  cursor: default;
+  pointer-events: none;
+}
 .stzh-progressbar-item__button:hover .stzh-progressbar-item__number-block, .stzh-progressbar-item__button:focus .stzh-progressbar-item__number-block {
   color: var(--stzh-color-primary-hover);
   border-color: var(--stzh-color-primary-hover);

package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.js

@@ -28,6 +28,7 @@ export class StzhProgressbarItem {
     this.dotted = false;
     this.step = 1;
     this.icon = "";
+    this.clickDisabled = false;
     this.analyticsId = undefined;
   }
   componentDidRender() {
@@ -49,12 +50,15 @@ export class StzhProgressbarItem {
       "stzh-progressbar-item--is-disabled": this.disabled
     };
     const dotted = (h("button", { class: "stzh-progressbar-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-progressbar-item__dotted-icon", name: "more-horizontal" })));
-    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.last && this.dotted && dotted, h("button", { ref: (el) => (this.button = el), class: "stzh-progressbar-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
+    const content = (h("span", null, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
+      ? h("stzh-icon", { class: "stzh-progressbar-item__user-icon", name: this.icon })
+      : (h("span", null, h("span", { class: "stzh-progressbar-item__number" }, this.step), this.passed && h("stzh-icon", { class: "stzh-progressbar-item__icon", name: "checkmark" })))), h("span", { ref: (el) => (this.text = el), class: "stzh-progressbar-item__label-block" }, this.label ? this.label : h("slot", null))));
+    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-progressbar-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: (el) => (this.button = el), class: "stzh-progressbar-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
       ?
         h("stzh-icon", { class: "stzh-progressbar-item__user-icon", name: this.icon })
       :
         h(Fragment, null, h("span", { class: "stzh-progressbar-item__number" }, this.step), this.passed &&
-          h("stzh-icon", { class: "stzh-progressbar-item__icon", name: "checkmark" }))), h("span", { ref: (el) => (this.text = el), class: "stzh-progressbar-item__label-block" }, this.label ? this.label : h("slot", null))), this.first && this.dotted && dotted)));
+          h("stzh-icon", { class: "stzh-progressbar-item__icon", name: "checkmark" }))), h("span", { ref: (el) => (this.text = el), class: "stzh-progressbar-item__label-block" }, this.label ? this.label : h("slot", null)))), this.first && this.dotted && dotted)));
   }
   static get is() { return "stzh-progressbar-item"; }
   static get encapsulation() { return "scoped"; }
@@ -249,6 +253,24 @@ export class StzhProgressbarItem {
         "reflect": true,
         "defaultValue": "\"\""
       },
+      "clickDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the progressbar-item is clickable."
+        },
+        "attribute": "click-disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "analyticsId": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-progressbar-item.js","sourceRoot":"","sources":["../../../../src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarItemClickEvent,\n  StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-progressbar-item\",\n  styleUrl: \"stzh-progressbar-item.scss\",\n  scoped: true\n})\nexport class StzhProgressbarItem {\n  @Prop({ reflect: true }) label: string;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) first: boolean = false;\n\n  @Prop({ reflect: true }) last: boolean = false;\n\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  @Prop({ reflect: true }) current: boolean = false;\n\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  @Prop({ reflect: true }) step: number = 1;\n\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhProgressbarItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar-item\": true,\n      \"stzh-progressbar-item--first\": this.first,\n      \"stzh-progressbar-item--last\": this.last,\n      \"stzh-progressbar-item--passed\": this.passed,\n      \"stzh-progressbar-item--current\": this.current,\n      \"stzh-progressbar-item--hide\": this.hide,\n      \"stzh-progressbar-item--dotted\": this.dotted,\n      \"stzh-progressbar-item--has-icon\": !!this.icon,\n      \"stzh-progressbar-item--is-disabled\": this.disabled\n    };\n\n    const dotted = (\n      <button\n        class=\"stzh-progressbar-item__dotted\"\n        onClick={this.onDottedClick}\n      >\n        <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n      </button>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          <button\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            class=\"stzh-progressbar-item__button\"\n            aria-pressed={this.current ? \"true\" : \"false\"}\n            disabled={(this.dotted && this.first) || this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-progressbar-item__number-block\">\n              {this.icon\n                ?\n                <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n                :\n                <Fragment>\n                  <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                  {this.passed &&\n                    <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n                  }\n                </Fragment>\n              }\n            </span>\n            <span\n              ref={(el) => (this.text = el as HTMLElement)}\n              class=\"stzh-progressbar-item__label-block\"\n            >\n              {this.label ? this.label : <slot></slot>}\n            </span>\n          </button>\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-progressbar-item.js","sourceRoot":"","sources":["../../../../src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarItemClickEvent,\n  StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-progressbar-item\",\n  styleUrl: \"stzh-progressbar-item.scss\",\n  scoped: true\n})\nexport class StzhProgressbarItem {\n  @Prop({ reflect: true }) label: string;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) first: boolean = false;\n\n  @Prop({ reflect: true }) last: boolean = false;\n\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  @Prop({ reflect: true }) current: boolean = false;\n\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  @Prop({ reflect: true }) step: number = 1;\n\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /**\n   * Whether the progressbar-item is clickable.\n   */\n  @Prop() clickDisabled: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhProgressbarItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar-item\": true,\n      \"stzh-progressbar-item--first\": this.first,\n      \"stzh-progressbar-item--last\": this.last,\n      \"stzh-progressbar-item--passed\": this.passed,\n      \"stzh-progressbar-item--current\": this.current,\n      \"stzh-progressbar-item--hide\": this.hide,\n      \"stzh-progressbar-item--dotted\": this.dotted,\n      \"stzh-progressbar-item--has-icon\": !!this.icon,\n      \"stzh-progressbar-item--is-disabled\": this.disabled\n    };\n\n    const dotted = (\n      <button\n        class=\"stzh-progressbar-item__dotted\"\n        onClick={this.onDottedClick}\n      >\n        <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n      </button>\n    );\n\n    const content = (\n      <span>\n        <span class=\"stzh-progressbar-item__number-block\">\n          {this.icon\n            ? <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n            : (\n              <span>\n                <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                {this.passed && <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>}\n              </span>\n            )\n          }\n        </span>\n        <span\n          ref={(el) => (this.text = el as HTMLElement)}\n          class=\"stzh-progressbar-item__label-block\"\n        >\n          {this.label ? this.label : <slot></slot>}\n        </span>\n      </span>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          {this.clickDisabled ? (\n            <div class=\"stzh-progressbar-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n              {content}\n            </div>\n          ) : (\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class=\"stzh-progressbar-item__button\"\n              aria-pressed={this.current ? \"true\" : \"false\"}\n              disabled={(this.dotted && this.first) || this.disabled}\n              onClick={this.onClick}\n            >\n              <span class=\"stzh-progressbar-item__number-block\">\n                {this.icon\n                  ?\n                  <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n                  :\n                  <Fragment>\n                    <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                    {this.passed &&\n                      <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n                    }\n                  </Fragment>\n                }\n              </span>\n              <span\n                ref={(el) => (this.text = el as HTMLElement)}\n                class=\"stzh-progressbar-item__label-block\"\n              >\n                {this.label ? this.label : <slot></slot>}\n              </span>\n            </button>\n          )}\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.stories.js

@@ -41,3 +41,19 @@ export const Default = {
     index: 1
   }
 };
+
+export const Unclickable = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    index: 1,
+    "click-disabled": true,
+  }
+};
+
+export const Disabled = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    index: 1,
+    disabled: true
+  }
+};

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

@@ -81,6 +81,9 @@
 /**
  * Pagetitle
  */
+/**
+ * TopnewsMostsearched
+ */
 /**
  * Calendar
  */