@oiz/stzh-components 2.6.0 → 2.7.0-beta

package/dist/cjs/stzh-monthyearpicker.cjs.entry.js

@@ -0,0 +1,191 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-bf651831.js');
+const translationUtils = require('./translation-utils-73073e44.js');
+
+const stzhMonthyearpickerCss = ".sc-stzh-monthyearpicker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-monthyearpicker-h{display:none}.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker,.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker::before,.sc-stzh-monthyearpicker-h *.sc-stzh-monthyearpicker::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-monthyearpicker-h{width:100%;--separator-height:var(--stzh-form-input-height)}[size=small].sc-stzh-monthyearpicker-h{--separator-height:var(--stzh-form-input-small-height)}.stzh-monthyearpicker__wrapper.sc-stzh-monthyearpicker{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-monthyearpicker__separator.sc-stzh-monthyearpicker{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);height:var(--separator-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
+
+const StzhMonthyearpicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.stzhChange = index.createEvent(this, "stzhChange", 7);
+    this.onRootFocus = () => {
+      if (this.monthsDropdown) {
+        this.monthsDropdown.setFocus();
+      }
+    };
+    this.onMonthsDropdownChange = (event) => {
+      const year = this.value.split("-")[0] || "0000";
+      const month = event.detail.value || "00";
+      this.onChange(year, month);
+    };
+    this.onYearsDropdownChange = (event) => {
+      const year = event.detail.value || "0000";
+      const month = this.value.split("-")[1] || "00";
+      this.onChange(year, month);
+    };
+    this.months = undefined;
+    this.years = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.minYear = undefined;
+    this.maxYear = undefined;
+    this.format = "default";
+    this.name = "";
+    this.value = "0000-00";
+    this.popoverPlacement = "bottom";
+    this.monthLabel = "";
+    this.yearLabel = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.required = false;
+    this.showMarker = false;
+    this.size = "default";
+    this.descriptionMonth = undefined;
+    this.descriptionYear = undefined;
+    this.descriptionLongMonth = undefined;
+    this.descriptionLongYear = undefined;
+    this.errorMonth = undefined;
+    this.errorYear = undefined;
+    this.invalidMonth = false;
+    this.invalidYear = false;
+    this.a11yDescribedbyMonth = "";
+    this.a11yDescribedbyYear = "";
+    this.localization = undefined;
+  }
+  monthsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._months = JSON.parse(newValue);
+    }
+    else {
+      this._months = newValue;
+    }
+    this.updateMonthOptions();
+  }
+  yearsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._years = JSON.parse(newValue);
+    }
+    else {
+      this._years = newValue;
+    }
+    this.updateYearOptions();
+  }
+  minMaxWatcher() {
+    this.updateMonthOptions();
+    this.updateYearOptions();
+  }
+  onChange(year, month) {
+    this.value = `${year}-${month}`;
+    this.stzhChange.emit({
+      component: "stzh-monthyearpicker",
+      value: this.value,
+      valueMonth: month,
+      valueYear: year
+    });
+  }
+  updateMonthOptions() {
+    const options = [];
+    let months = [];
+    if (this._months) {
+      months = this._months;
+    }
+    else {
+      const currentYear = Number(this.value.split("-")[0] || "0000");
+      let minMonth = 1;
+      let maxMonth = 12;
+      if (this.min) {
+        const minDate = new Date(this.min);
+        if (currentYear === minDate.getFullYear()) {
+          minMonth = minDate.getMonth() + 1;
+        }
+      }
+      if (this.max) {
+        const maxDate = new Date(this.max);
+        if (currentYear === maxDate.getFullYear()) {
+          maxMonth = maxDate.getMonth() + 1;
+        }
+      }
+      for (let i = minMonth; i <= maxMonth; i++) {
+        months.push(i);
+      }
+    }
+    months.forEach((month) => {
+      const paddedMonth = ("00" + month).slice(-2);
+      const monthName = this.localization.$globals.monthNames[month - 1];
+      options.push({
+        text: this.format === "creditcard"
+          ? `${paddedMonth} (${monthName})`
+          : monthName,
+        value: paddedMonth
+      });
+    });
+    this.dropdownMonthOptions = options;
+  }
+  updateYearOptions() {
+    const options = [];
+    let years = [];
+    if (this._years) {
+      years = this._years;
+    }
+    else {
+      const currentMonth = Number(this.value.split("-")[1] || "00");
+      const yearNow = new Date().getFullYear();
+      let minYear = this.minYear || (yearNow - 10);
+      let maxYear = this.maxYear || (yearNow + 10);
+      if (this.min) {
+        const minDate = new Date(this.min);
+        if (currentMonth && currentMonth < minDate.getMonth() + 1) {
+          minYear = minDate.getFullYear() + 1;
+        }
+        else {
+          minYear = minDate.getFullYear();
+        }
+      }
+      if (this.max) {
+        const maxDate = new Date(this.max);
+        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {
+          maxYear = maxDate.getFullYear() - 1;
+        }
+        else {
+          maxYear = maxDate.getFullYear();
+        }
+      }
+      for (let i = minYear; i <= maxYear; i++) {
+        years.push(i);
+      }
+    }
+    years.forEach((year) => {
+      options.push({ text: year, value: year });
+    });
+    this.dropdownYearOptions = options;
+  }
+  async componentWillLoad() {
+    if (!this.localization) {
+      this.localization = await translationUtils.fetchTranslations(this.element, "monthyearpicker");
+    }
+    this.monthsWatcher(this.months);
+    this.yearsWatcher(this.years);
+  }
+  render() {
+    const classes = {
+      "stzh-monthyearpicker": true
+    };
+    return (index.h(index.Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { class: classes }, index.h("input", { type: "hidden", name: this.name, value: this.value }), index.h("div", { class: "stzh-monthyearpicker__wrapper" }, index.h("stzh-dropdown", { name: `${this.name}-month`, class: "stzh-monthyearpicker__months-dropdown", label: this.monthLabel || this.localization.monthLabel, ref: (el) => (this.monthsDropdown = el), onStzhChange: this.onMonthsDropdownChange, options: this.dropdownMonthOptions, items: [this.value.split("-")[1]], required: this.required, disabled: this.disabled, size: this.size, showMarker: this.showMarker, popoverPlacement: this.popoverPlacement, description: this.descriptionMonth, descriptionLong: this.descriptionLongMonth, error: this.errorMonth, a11yDescribedby: this.a11yDescribedbyMonth, invalid: this.invalidMonth }), index.h("div", { class: "stzh-monthyearpicker__separator" }, "/"), index.h("stzh-dropdown", { name: `${this.name}-year`, class: "stzh-monthyearpicker__years-dropdown", label: this.yearLabel || this.localization.yearLabel, onStzhChange: this.onYearsDropdownChange, options: this.dropdownYearOptions, items: [this.value.split("-")[0]], required: this.required, disabled: this.disabled, size: this.size, showMarker: this.showMarker, popoverPlacement: this.popoverPlacement, description: this.descriptionYear, descriptionLong: this.descriptionLongYear, error: this.errorYear, a11yDescribedby: this.a11yDescribedbyYear, invalid: this.invalidYear })))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "months": ["monthsWatcher"],
+    "years": ["yearsWatcher"],
+    "value": ["minMaxWatcher"],
+    "min": ["minMaxWatcher"],
+    "max": ["minMaxWatcher"]
+  }; }
+};
+StzhMonthyearpicker.style = stzhMonthyearpickerCss;
+
+exports.stzh_monthyearpicker = StzhMonthyearpicker;
+
+//# sourceMappingURL=stzh-monthyearpicker.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"stzh-monthyearpicker.entry.cjs.js","mappings":"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","names":["fetchTranslations","h","Host"],"sources":["./src/components/stzh-monthyearpicker/stzh-monthyearpicker.scss?tag=stzh-monthyearpicker&encapsulation=scoped","./src/components/stzh-monthyearpicker/stzh-monthyearpicker.tsx"],"sourcesContent":[":host {\n  width: 100%;\n  --separator-height: #{$formInputHeight};\n\n  &[size=\"small\"] {\n    --separator-height: #{$formInputHeightSmall};\n  }\n}\n\n.stzh-monthyearpicker {\n  &__wrapper {\n    display: flex;\n    align-items: flex-start;\n  }\n\n  &__separator {\n    @include fontSize('milli');\n    margin-left: space('medium');\n    margin-right: space('medium');\n    height: var(--separator-height);\n    display: flex;\n    align-items: center;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhDropdownChangeEvent,\n  StzhMonthyearpickerChangeEvent\n} from \"../../index\";\n\nimport { fetchTranslations } from \"../../utils/translation-utils\";\nimport { StzhMonthyearpickerLocalizedText } from \"./stzh-monthyearpicker.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-monthyearpicker\",\n  styleUrl: \"stzh-monthyearpicker.scss\",\n  scoped: true\n})\nexport class StzhMonthyearpicker {\n  /** Set which months to show (overwrites months from min/max) */\n  @Prop() months: number[] | string;\n  private _months: number[];\n\n  /** Set which years to show (overwrites years from min/max) */\n  @Prop() years: number[] | string;\n  private _years: number[];\n\n  /**\n   * Minimum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `max` property.\n   */\n  @Prop() min: string;\n\n  /**\n   * Maximum month and year allowed to be picked in `YYYY-MM` format.\n   * This setting can be used alone or together with the `min` property.\n   */\n  @Prop() max: string;\n\n  /**\n   * Minimum year (will be overwritten if `min` is used).\n   * This setting can be used alone or together with the `maxYear` property.\n   */\n  @Prop() minYear: number;\n\n  /**\n   * Maximum year (will be overwritten if `max` is used).\n   * This setting can be used alone or together with the `minYear` property.\n   */\n  @Prop() maxYear: number;\n\n  /** Picker format. */\n  @Prop({ reflect: true }) format: \"default\" | \"creditcard\" = \"default\";\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden input (current selected year and month YYYY-MM). */\n  @Prop({ mutable: true }) value: string = \"0000-00\";\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Month dropdown label */\n  @Prop() monthLabel: string = \"\";\n\n  /** Year dropdown label */\n  @Prop() yearLabel: string = \"\";\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Description message for month */\n  @Prop() descriptionMonth: string;\n\n  /** Description message for year */\n  @Prop() descriptionYear: string;\n\n  /** Long description message appearing in a popover for month */\n  @Prop() descriptionLongMonth: string;\n\n  /** Long description message appearing in a popover for year */\n  @Prop() descriptionLongYear: string;\n\n  /** One or multiple error message for month */\n  @Prop() errorMonth: string | string[];\n\n  /** One or multiple error message for year */\n  @Prop() errorYear: string | string[];\n\n  /** Invalid status for month */\n  @Prop({ reflect: true }) invalidMonth: boolean = false;\n\n  /** Invalid status for year */\n  @Prop({ reflect: true }) invalidYear: boolean = false;\n\n  /** Id of the element which describes the month dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyMonth: string = \"\";\n\n  /** Id of the element which describes the year dropdown */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedbyYear: string = \"\";\n\n  /**  Translation strings. */\n  @Prop() localization: StzhMonthyearpickerLocalizedText;\n\n  /** Monthyearpicker change event */\n  @Event() stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;\n\n  @Element() element: HTMLStzhMonthyearpickerElement;\n\n  @Watch(\"months\")\n  monthsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._months = JSON.parse(newValue);\n    } else {\n      this._months = newValue;\n    }\n\n    this.updateMonthOptions();\n  }\n\n  @Watch(\"years\")\n  yearsWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._years = JSON.parse(newValue);\n    } else {\n      this._years = newValue;\n    }\n\n    this.updateYearOptions();\n  }\n\n  @Watch(\"value\")\n  @Watch(\"min\")\n  @Watch(\"max\")\n  minMaxWatcher() {\n    this.updateMonthOptions();\n    this.updateYearOptions();\n  }\n\n  private monthsDropdown: HTMLStzhDropdownElement;\n  private dropdownMonthOptions: StzhDropdownOption[];\n  private dropdownYearOptions: StzhDropdownOption[];\n\n  private onRootFocus = () => {\n    if (this.monthsDropdown) {\n      this.monthsDropdown.setFocus();\n    }\n  }\n\n  private onMonthsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = this.value.split(\"-\")[0] || \"0000\";\n    const month = event.detail.value || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onYearsDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const year = event.detail.value || \"0000\";\n    const month = this.value.split(\"-\")[1] || \"00\";\n    this.onChange(year, month);\n  }\n\n  private onChange(year, month) {\n    this.value = `${year}-${month}`;\n    this.stzhChange.emit({\n      component: \"stzh-monthyearpicker\",\n      value: this.value,\n      valueMonth: month,\n      valueYear: year\n    });\n  }\n\n  private updateMonthOptions() {\n    const options = [];\n    let months = [];\n\n    if (this._months) {\n      months = this._months;\n    } else {\n      const currentYear = Number(this.value.split(\"-\")[0] || \"0000\");\n\n      let minMonth = 1;\n      let maxMonth = 12;\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentYear === minDate.getFullYear()) {\n          minMonth = minDate.getMonth() + 1;\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentYear === maxDate.getFullYear()) {\n          maxMonth = maxDate.getMonth() + 1;\n        }\n      }\n\n      for (let i = minMonth; i <= maxMonth; i++) {\n        months.push(i);\n      }\n    }\n\n    months.forEach((month) => {\n      const paddedMonth = (\"00\" + month).slice(-2);\n      const monthName = this.localization.$globals.monthNames[month - 1];\n\n      options.push({\n        text: this.format === \"creditcard\"\n          ? `${paddedMonth} (${monthName})`\n          : monthName,\n        value: paddedMonth\n      });\n    });\n\n    this.dropdownMonthOptions = options;\n  }\n\n  private updateYearOptions(): void {\n    const options = [];\n    let years = [];\n\n    if (this._years) {\n      years = this._years;\n    } else {\n      const currentMonth = Number(this.value.split(\"-\")[1] || \"00\");\n\n      const yearNow = new Date().getFullYear();\n      let minYear = this.minYear || (yearNow - 10);\n      let maxYear = this.maxYear || (yearNow + 10);\n\n      if (this.min) {\n        const minDate = new Date(this.min);\n\n        if (currentMonth && currentMonth < minDate.getMonth() + 1) {\n          minYear = minDate.getFullYear() + 1;\n        } else {\n          minYear = minDate.getFullYear();\n        }\n      }\n\n      if (this.max) {\n        const maxDate = new Date(this.max);\n\n        if (currentMonth && currentMonth > maxDate.getMonth() + 1) {\n          maxYear = maxDate.getFullYear() - 1;\n        } else {\n          maxYear = maxDate.getFullYear();\n        }\n      }\n\n      for (let i = minYear; i <= maxYear; i++) {\n        years.push(i);\n      }\n    }\n\n    years.forEach((year) => {\n      options.push({ text: year, value: year });\n    });\n\n    this.dropdownYearOptions = options;\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"monthyearpicker\");\n    }\n\n    this.monthsWatcher(this.months);\n    this.yearsWatcher(this.years);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-monthyearpicker\": true\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          <div class=\"stzh-monthyearpicker__wrapper\">\n            <stzh-dropdown\n              name={`${this.name}-month`}\n              class=\"stzh-monthyearpicker__months-dropdown\"\n              label={this.monthLabel || this.localization.monthLabel}\n              ref={(el) => (this.monthsDropdown = el as HTMLStzhDropdownElement)}\n              onStzhChange={this.onMonthsDropdownChange}\n              options={this.dropdownMonthOptions}\n              items={[this.value.split(\"-\")[1]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              showMarker={this.showMarker}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionMonth}\n              descriptionLong={this.descriptionLongMonth}\n              error={this.errorMonth}\n              a11yDescribedby={this.a11yDescribedbyMonth}\n              invalid={this.invalidMonth}\n            ></stzh-dropdown>\n\n            <div class=\"stzh-monthyearpicker__separator\">/</div>\n\n            <stzh-dropdown\n              name={`${this.name}-year`}\n              class=\"stzh-monthyearpicker__years-dropdown\"\n              label={this.yearLabel || this.localization.yearLabel}\n              onStzhChange={this.onYearsDropdownChange}\n              options={this.dropdownYearOptions}\n              items={[this.value.split(\"-\")[0]]}\n              required={this.required}\n              disabled={this.disabled}\n              size={this.size}\n              showMarker={this.showMarker}\n              popoverPlacement={this.popoverPlacement}\n              description={this.descriptionYear}\n              descriptionLong={this.descriptionLongYear}\n              error={this.errorYear}\n              a11yDescribedby={this.a11yDescribedbyYear}\n              invalid={this.invalidYear}\n            ></stzh-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-pagetitle.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-bf651831.js');
 const utils = require('./utils-a2ff9f84.js');
 
-const stzhPagetitleCss = ".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-xlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__actions.sc-stzh-pagetitle{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}";
+const stzhPagetitleCss = ".sc-stzh-pagetitle-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-pagetitle-h{display:none}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=heading]{margin-bottom:var(--stzh-space-xxxlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{margin-top:var(--stzh-space-xlarge)}}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=lead]{margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__actions.sc-stzh-pagetitle{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.stzh-pagetitle__actions.sc-stzh-pagetitle:empty{display:none}";
 
 const StzhPagetitle = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"stzh-pagetitle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,wvDAAwvD;;MCqBpwD,aAAa;EAL1B;;IAUU,SAAI,GAAG;MACb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,6DAA6D,CAAC,CAAC;MAC9G,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iDAAiD,CAAC,CAAC;MAC/F,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,gIAAgI,CAAC,CAAC;MAChL,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iEAAiE,CAAC,CAAC;;;;MAKtH,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO;QACvBA,oBAAc,CAAC,OAAO,EAAE;UACtB,UAAU,EAAE,IAAI;SACS,CAAC,CAAA;OAC7B,CAAC,CAAC;MAEH,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,IAAI;SACY,CAAC,CAAA;OAC1B,CAAC,CAAC;MAEH,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI;QACxBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,UAAU;SACM,CAAC,CAAA;OAC1B,CAAC,CAAC;MAEH,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI;QACnBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,OAAO;SACS,CAAC,CAAA;OAC1B,CAAC,CAAC;;;;;;KAOJ,CAAA;GAuDF;EArDC,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAGC,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,aAAa,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACrD,MAAM,YAAY,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,kBAAkB,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,mBAAmB,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IAElE,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,6BAA6B,EAAE,eAAe;MAC9C,2BAA2B,EAAE,aAAa;MAC1C,0BAA0B,EAAE,YAAY;MACxC,4BAA4B,EAAE,kBAAkB,IAAI,mBAAmB;MACvE,iCAAiC,EAAE,kBAAkB;MACrD,kCAAkC,EAAE,mBAAmB;KACxD,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IAKjBA,kBAAM,IAAI,EAAC,SAAS,GAAQ,EAE5BA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,kBAAM,IAAI,EAAC,aAAa,GAAQ,EAChCA,kBAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EAENA,kBAAM,IAAI,EAAC,OAAO,GAAQ,EAC1BA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACD,EACP;GACH;;;;;;;","names":["setPropsIfNull","hasSlot","h","Host"],"sources":["./src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","./src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"heading\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted([slot=\"image\"]) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  ::slotted([slot=\"lead\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  // ::slotted([slot=\"meta\"]) {\n  //   margin: calc(#{space('xxsmall')} / 2);\n  // }\n}\n\n.stzh-pagetitle {\n  &__actions {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  // &__meta {\n  //   display: flex;\n\n  //   &:not(:empty) {\n  //     margin: calc(#{space('xxsmall')} / -2);\n  //     margin-bottom: calc(#{space('xxsmall')} / -2 + #{space('xxsmall')});\n  //   }\n  // }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot action-left - Slot e.g. for `stzh-readspeaker` or `stzh-link` element\n * @slot action-right - Slot e.g. for `stzh-readspeaker` or `stzh-link` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const headings = this.element.querySelectorAll('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const actions = this.element.querySelectorAll('stzh-link[slot=\"action-left\"], stzh-link[slot=\"action-right\"], [slot=\"action-left\"] stzh-link, [slot=\"action-right\"] stzh-link');\n    const actionsRight = this.element.querySelectorAll('stzh-link[slot=\"action-right\"], [slot=\"action-right\"] stzh-link');\n    // const chips = this.element.querySelectorAll(\n    //   'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n    // );\n\n    headings.forEach((heading) => {\n      setPropsIfNull(heading, {\n        withBorder: true\n      } as HTMLStzhHeadingElement)\n    });\n\n    leads.forEach((lead) => {\n      setPropsIfNull(lead, {\n        lead: true\n      } as HTMLStzhTextElement)\n    });\n\n    actionsRight.forEach((link) => {\n      setPropsIfNull(link, {\n        icon: \"web-link\"\n      } as HTMLStzhLinkElement)\n    });\n\n    actions.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"small\"\n      } as HTMLStzhLinkElement)\n    });\n\n    // chips.forEach((chip) => {\n    //   setPropsIfNull(chip, {\n    //     size: \"small\"\n    //   } as HTMLStzhChipElement)\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 headingSlotUsed = hasSlot(this.element, 'heading');\n    const imageSlotUsed = hasSlot(this.element, 'image');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n    const actionLeftSlotUsed = hasSlot(this.element, 'action-left');\n    const actionRightSlotUsed = hasSlot(this.element, 'action-right');\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-heading\": headingSlotUsed,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-action\": actionLeftSlotUsed || actionRightSlotUsed,\n      \"stzh-pagetitle--has-action-left\": actionLeftSlotUsed,\n      \"stzh-pagetitle--has-action-right\": actionRightSlotUsed,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {/* <div class=\"stzh-pagetitle__meta\">\n            <slot name=\"meta\"></slot>\n          </div> */}\n\n          <slot name=\"heading\"></slot>\n\n          <div class=\"stzh-pagetitle__actions\">\n            <slot name=\"action-left\"></slot>\n            <slot name=\"action-right\"></slot>\n          </div>\n\n          <slot name=\"image\"></slot>\n          <slot name=\"lead\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pagetitle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,szDAAszD;;MCqBl0D,aAAa;EAL1B;;IAUU,SAAI,GAAG;MACb,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,6DAA6D,CAAC,CAAC;MAC9G,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iDAAiD,CAAC,CAAC;MAC/F,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,gIAAgI,CAAC,CAAC;MAChL,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iEAAiE,CAAC,CAAC;;;;MAKtH,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO;QACvBA,oBAAc,CAAC,OAAO,EAAE;UACtB,UAAU,EAAE,IAAI;SACS,CAAC,CAAA;OAC7B,CAAC,CAAC;MAEH,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,IAAI;SACY,CAAC,CAAA;OAC1B,CAAC,CAAC;MAEH,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI;QACxBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,UAAU;SACM,CAAC,CAAA;OAC1B,CAAC,CAAC;MAEH,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI;QACnBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,OAAO;SACS,CAAC,CAAA;OAC1B,CAAC,CAAC;;;;;;KAOJ,CAAA;GAuDF;EArDC,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,eAAe,GAAGC,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,aAAa,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACrD,MAAM,YAAY,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,kBAAkB,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAChE,MAAM,mBAAmB,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IAElE,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,6BAA6B,EAAE,eAAe;MAC9C,2BAA2B,EAAE,aAAa;MAC1C,0BAA0B,EAAE,YAAY;MACxC,4BAA4B,EAAE,kBAAkB,IAAI,mBAAmB;MACvE,iCAAiC,EAAE,kBAAkB;MACrD,kCAAkC,EAAE,mBAAmB;KACxD,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,IAKjBA,kBAAM,IAAI,EAAC,SAAS,GAAQ,EAE5BA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,kBAAM,IAAI,EAAC,aAAa,GAAQ,EAChCA,kBAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EAENA,kBAAM,IAAI,EAAC,OAAO,GAAQ,EAC1BA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACD,EACP;GACH;;;;;;;","names":["setPropsIfNull","hasSlot","h","Host"],"sources":["./src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","./src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"heading\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  ::slotted([slot=\"image\"]) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  ::slotted([slot=\"lead\"]) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  // ::slotted([slot=\"meta\"]) {\n  //   margin: calc(#{space('xxsmall')} / 2);\n  // }\n}\n\n.stzh-pagetitle {\n  &__actions {\n    display: flex;\n    justify-content: space-between;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  // &__meta {\n  //   display: flex;\n\n  //   &:not(:empty) {\n  //     margin: calc(#{space('xxsmall')} / -2);\n  //     margin-bottom: calc(#{space('xxsmall')} / -2 + #{space('xxsmall')});\n  //   }\n  // }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot action-left - Slot e.g. for `stzh-readspeaker` or `stzh-link` element\n * @slot action-right - Slot e.g. for `stzh-readspeaker` or `stzh-link` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const headings = this.element.querySelectorAll('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const actions = this.element.querySelectorAll('stzh-link[slot=\"action-left\"], stzh-link[slot=\"action-right\"], [slot=\"action-left\"] stzh-link, [slot=\"action-right\"] stzh-link');\n    const actionsRight = this.element.querySelectorAll('stzh-link[slot=\"action-right\"], [slot=\"action-right\"] stzh-link');\n    // const chips = this.element.querySelectorAll(\n    //   'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n    // );\n\n    headings.forEach((heading) => {\n      setPropsIfNull(heading, {\n        withBorder: true\n      } as HTMLStzhHeadingElement)\n    });\n\n    leads.forEach((lead) => {\n      setPropsIfNull(lead, {\n        lead: true\n      } as HTMLStzhTextElement)\n    });\n\n    actionsRight.forEach((link) => {\n      setPropsIfNull(link, {\n        icon: \"web-link\"\n      } as HTMLStzhLinkElement)\n    });\n\n    actions.forEach((link) => {\n      setPropsIfNull(link, {\n        size: \"small\"\n      } as HTMLStzhLinkElement)\n    });\n\n    // chips.forEach((chip) => {\n    //   setPropsIfNull(chip, {\n    //     size: \"small\"\n    //   } as HTMLStzhChipElement)\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 headingSlotUsed = hasSlot(this.element, 'heading');\n    const imageSlotUsed = hasSlot(this.element, 'image');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n    const actionLeftSlotUsed = hasSlot(this.element, 'action-left');\n    const actionRightSlotUsed = hasSlot(this.element, 'action-right');\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-heading\": headingSlotUsed,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-action\": actionLeftSlotUsed || actionRightSlotUsed,\n      \"stzh-pagetitle--has-action-left\": actionLeftSlotUsed,\n      \"stzh-pagetitle--has-action-right\": actionRightSlotUsed,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {/* <div class=\"stzh-pagetitle__meta\">\n            <slot name=\"meta\"></slot>\n          </div> */}\n\n          <slot name=\"heading\"></slot>\n\n          <div class=\"stzh-pagetitle__actions\">\n            <slot name=\"action-left\"></slot>\n            <slot name=\"action-right\"></slot>\n          </div>\n\n          <slot name=\"image\"></slot>\n          <slot name=\"lead\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}