@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

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

@@ -0,0 +1,256 @@
+/**
+ * Colors
+ */
+/* Signal colors */
+/* Old colors (TODO: cleanup when not needed anymore) */
+/**
+ * Base
+ */
+/**
+ * Selection
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * Icons
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Fieldset
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Text
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Header
+ */
+/**
+ * Dialogs / Popover
+ */
+/**
+ * Overlays
+ */
+/**
+ * Accordions
+ */
+/**
+ * Timeline
+ */
+/**
+ * Buttons
+ */
+/**
+ * Ratios
+ */
+/**
+ * Pagetitle
+ */
+/**
+ * Calendar
+ */
+/**
+ * Cta
+ */
+/**
+ * Toasts
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Container
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Ratios
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-medium);
+  font-weight: var(--stzh-font-weight-medium);
+  font-style: var(--stzh-font-style-medium);
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+  /* default outline value, which will be applied to all elements receiving focus
+  the .has-focus class is used by the focus target */
+}
+:host[hidden] {
+  display: none;
+}
+:host::-moz-selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host::selection {
+  color: var(--stzh-selection-color);
+  background-color: var(--stzh-selection-background-color);
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
+  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);
+}
+:host .has-focus {
+  outline: var(--stzh-flyingfocus-color) solid 0.125rem;
+  outline-offset: 0.125rem;
+}
+:host .stzh-fylingfocus-focused {
+  outline-style: none !important;
+}
+:host .stzh-fylingfocus-focused::-moz-focus-inner {
+  border: 0 !important;
+}
+
+:host {
+  --grid-template-areas: var(
+    --stzh-daterange-grid-template-areas,
+    "datefrom datefrom datefrom datefrom"
+    "dateto dateto dateto dateto"
+    "links links links links"
+  );
+  --grid-template-columns: var(
+    --stzh-daterange-grid-template-columns,
+    repeat(4, minmax(0, 1fr))
+  );
+}
+@media screen and (min-width: 600px) {
+  :host {
+    --grid-template-areas: var(
+      --stzh-daterange-grid-template-areas,
+      "datefrom datefrom dateto dateto"
+      "links links links links"
+    );
+  }
+}
+@media screen and (min-width: 900px) {
+  :host {
+    --grid-template-areas: var(
+      --stzh-daterange-grid-template-areas,
+      "datefrom datefrom dateto dateto links links links links"
+    );
+    --grid-template-columns: var(
+      --stzh-daterange-grid-template-columns,
+      repeat(8, minmax(0, 1fr))
+    );
+  }
+}
+
+.stzh-daterange {
+  --stzh-description-min-height: var(--stzh-fieldset-description-min-height);
+  -moz-column-gap: var(--stzh-grid-gutter);
+       column-gap: var(--stzh-grid-gutter);
+  display: grid;
+  align-items: center;
+  grid-template-areas: var(--grid-template-areas);
+  grid-template-columns: var(--grid-template-columns);
+  align-items: start;
+  border: none;
+  padding: 0;
+}
+@media screen and (min-width: 600px) {
+  .stzh-daterange {
+    -moz-column-gap: var(--stzh-grid-gutter-small);
+         column-gap: var(--stzh-grid-gutter-small);
+  }
+}
+@media screen and (min-width: 900px) {
+  .stzh-daterange {
+    -moz-column-gap: var(--stzh-grid-gutter-medium);
+         column-gap: var(--stzh-grid-gutter-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-daterange {
+    -moz-column-gap: var(--stzh-grid-gutter-large);
+         column-gap: var(--stzh-grid-gutter-large);
+  }
+}
+@media screen and (min-width: 1600px) {
+  .stzh-daterange {
+    -moz-column-gap: var(--stzh-grid-gutter-ultra);
+         column-gap: var(--stzh-grid-gutter-ultra);
+  }
+}
+.stzh-daterange__legend {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.stzh-daterange__datefrom {
+  grid-area: datefrom;
+}
+.stzh-daterange__dateto {
+  grid-area: dateto;
+}
+.stzh-daterange__links {
+  grid-area: links;
+  align-self: center;
+}
+.stzh-daterange__links {
+  display: flex;
+  gap: var(--stzh-space-large);
+}

package/dist/collection/components/stzh-daterange/stzh-daterange.e2e.js

@@ -0,0 +1,18 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-daterange";
+const STORIES = [
+  "default",
+];
+test.describe("daterange", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-daterange.e2e.js.map

package/dist/collection/components/stzh-daterange/stzh-daterange.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-daterange.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-daterange/stzh-daterange.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,sBAAsB,CAAC;AAEnC,MAAM,OAAO,GAAG;EACd,SAAS;CACV,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EAC9B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-daterange\";\n\nconst STORIES = [\n  \"default\",\n];\n\ntest.describe(\"daterange\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n"]}

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

@@ -0,0 +1,178 @@
+import { Host, h, } from "@stencil/core";
+import { setPropsIfNull } from "../../utils/utils";
+/**
+ * @slot from - Slot for datepicker
+ * @slot to - Slot for datepicker
+ */
+export class StzhDaterange {
+  constructor() {
+    this._rangeLinks = [];
+    this.handleRangeClick = (type) => {
+      let start = new Date();
+      let end = new Date();
+      if (type === "tomorrow") {
+        start.setDate(start.getDate() + 1);
+        end.setDate(end.getDate() + 1);
+      }
+      else if (type === "next7days") {
+        start.setDate(start.getDate());
+        end.setDate(end.getDate() + 7);
+      }
+      const fromDatepicker = this.datefromElement.querySelector('stzh-datepicker');
+      const toDatepicker = this.datetoElement.querySelector('stzh-datepicker');
+      fromDatepicker === null || fromDatepicker === void 0 ? void 0 : fromDatepicker.setDate(start);
+      toDatepicker === null || toDatepicker === void 0 ? void 0 : toDatepicker.setDate(end);
+    };
+    this.init = () => {
+      const fromDatepicker = this.element.querySelector('stzh-datepicker[slot="from"], [slot="from"] stzh-datepicker');
+      const toDatepicker = this.element.querySelector('stzh-datepicker[slot="to"], [slot="to"] stzh-datepicker');
+      if (fromDatepicker && this.localization) {
+        setPropsIfNull(fromDatepicker, {
+          label: this.localization.labelFrom,
+          hideOptional: true
+        });
+      }
+      if (toDatepicker && this.localization) {
+        setPropsIfNull(toDatepicker, {
+          label: this.localization.labelTo,
+          hideOptional: true
+        });
+      }
+    };
+    this.localization = undefined;
+    this.legend = undefined;
+    this.rangeLinks = undefined;
+  }
+  rangeLinksWatcher(newValue) {
+    if (!newValue) {
+      this._rangeLinks = [];
+    }
+    else if (typeof newValue === "string") {
+      try {
+        this._rangeLinks = JSON.parse(newValue);
+      }
+      catch (e) {
+        this._rangeLinks = [];
+      }
+    }
+    else {
+      this._rangeLinks = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.rangeLinksWatcher(this.rangeLinks);
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "daterange");
+    }
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-daterange": true,
+      "stzh-daterange--has-links": this._rangeLinks.length > 0
+    };
+    const translations = {
+      "today": this.localization.rangeToday,
+      "tomorrow": this.localization.rangeTomorrow,
+      "next7days": this.localization.rangeNextSevenDays
+    };
+    return (h(Host, null, h("fieldset", { class: classes }, h("legend", { class: "stzh-daterange__legend" }, this.legend || this.localization.legend), h("div", { class: "stzh-daterange__datefrom", ref: (el) => (this.datefromElement = el) }, h("slot", { name: "from" })), h("div", { class: "stzh-daterange__dateto", ref: (el) => (this.datetoElement = el) }, h("slot", { name: "to" })), h("div", { class: "stzh-daterange__links" }, this._rangeLinks.map((type) => h("stzh-link", { label: translations[type], onClick: () => this.handleRangeClick(type) }))))));
+  }
+  static get is() { return "stzh-daterange"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-daterange.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-daterange.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhDaterangeLocalizedText",
+          "resolved": "StzhLocaleComponent & { legend: string; labelFrom: string; labelTo: string; rangeToday: string; rangeTomorrow: string; rangeNextSevenDays: string; }",
+          "references": {
+            "StzhDaterangeLocalizedText": {
+              "location": "import",
+              "path": "./stzh-daterange.localization",
+              "id": "src/components/stzh-daterange/stzh-daterange.localization.ts::StzhDaterangeLocalizedText"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "legend": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Legend"
+        },
+        "attribute": "legend",
+        "reflect": false
+      },
+      "rangeLinks": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StzhDaterangeRanges[]",
+          "resolved": "StzhDaterangeRanges[] | string",
+          "references": {
+            "StzhDaterangeRanges": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhDaterangeRanges"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Range links (current predefined available ranges: \"today\", \"tomorrow\", \"next7days\")"
+        },
+        "attribute": "range-links",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "rangeLinks",
+        "methodName": "rangeLinksWatcher"
+      }];
+  }
+}
+//# sourceMappingURL=stzh-daterange.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-daterange.js","sourceRoot":"","sources":["../../../../src/components/stzh-daterange/stzh-daterange.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n} from \"@stencil/core\";\n\nimport { StzhDaterangeRanges } from \"../../index\";\n\nimport { StzhDaterangeLocalizedText } from \"./stzh-daterange.localization\";\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot from - Slot for datepicker\n * @slot to - Slot for datepicker\n */\n@Component({\n  tag: \"stzh-daterange\",\n  styleUrl: \"stzh-daterange.scss\",\n  scoped: true\n})\nexport class StzhDaterange {\n  /** Translation strings */\n  @Prop() localization: StzhDaterangeLocalizedText;\n\n  /** Legend */\n  @Prop() legend: string;\n\n  /** Range links (current predefined available ranges: \"today\", \"tomorrow\", \"next7days\") */\n  @Prop() rangeLinks: string | StzhDaterangeRanges[];\n  private _rangeLinks: StzhDaterangeRanges[] = [];\n\n  @Element() element: HTMLStzhDaterangeElement;\n\n  @Watch(\"rangeLinks\")\n  rangeLinksWatcher(newValue: StzhDaterangeRanges[] | string) {\n    if (!newValue) {\n      this._rangeLinks = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._rangeLinks = JSON.parse(newValue);\n      } catch (e) {\n        this._rangeLinks = [];\n      }\n    } else {\n      this._rangeLinks = newValue;\n    }\n  }\n\n  private observer: MutationObserver;\n  private datefromElement: HTMLElement;\n  private datetoElement: HTMLElement;\n\n  private handleRangeClick = (type: StzhDaterangeRanges) => {\n    let start = new Date();\n    let end = new Date();\n\n    if (type === \"tomorrow\") {\n      start.setDate(start.getDate() + 1);\n      end.setDate(end.getDate() + 1);\n    } else if (type === \"next7days\") {\n      start.setDate(start.getDate());\n      end.setDate(end.getDate() + 7);\n    }\n\n    const fromDatepicker = this.datefromElement.querySelector('stzh-datepicker');\n    const toDatepicker = this.datetoElement.querySelector('stzh-datepicker');\n\n    fromDatepicker?.setDate(start);\n    toDatepicker?.setDate(end);\n  }\n\n  async componentWillLoad() {\n    this.rangeLinksWatcher(this.rangeLinks);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"daterange\");\n    }\n  }\n\n  private init = () => {\n    const fromDatepicker = this.element.querySelector(\n      'stzh-datepicker[slot=\"from\"], [slot=\"from\"] stzh-datepicker'\n    );\n\n    const toDatepicker = this.element.querySelector(\n      'stzh-datepicker[slot=\"to\"], [slot=\"to\"] stzh-datepicker'\n    );\n\n    if (fromDatepicker && this.localization) {\n      setPropsIfNull(fromDatepicker, {\n        label: this.localization.labelFrom,\n        hideOptional: true\n      } as HTMLStzhDatepickerElement)\n    }\n\n    if (toDatepicker&& this.localization) {\n      setPropsIfNull(toDatepicker, {\n        label: this.localization.labelTo,\n        hideOptional: true\n      } as HTMLStzhDatepickerElement)\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-daterange\": true,\n      \"stzh-daterange--has-links\": this._rangeLinks.length > 0\n    };\n\n    const translations = {\n      \"today\": this.localization.rangeToday,\n      \"tomorrow\": this.localization.rangeTomorrow,\n      \"next7days\": this.localization.rangeNextSevenDays\n    }\n\n    return (\n      <Host>\n        <fieldset class={classes}>\n          <legend class=\"stzh-daterange__legend\">\n            {this.legend || this.localization.legend}\n          </legend>\n\n          <div\n            class=\"stzh-daterange__datefrom\"\n            ref={(el) => (this.datefromElement = el as HTMLDivElement)}\n          >\n            <slot name=\"from\"></slot>\n          </div>\n          <div\n            class=\"stzh-daterange__dateto\"\n            ref={(el) => (this.datetoElement = el as HTMLDivElement)}\n          >\n            <slot name=\"to\"></slot>\n          </div>\n          <div class=\"stzh-daterange__links\">\n            {this._rangeLinks.map((type) =>\n              <stzh-link\n                label={translations[type]}\n                onClick={() => this.handleRangeClick(type)}\n              ></stzh-link>\n            )}\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-daterange/stzh-daterange.localization.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-daterange.localization.js.map

package/dist/collection/components/stzh-daterange/stzh-daterange.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-daterange.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-daterange/stzh-daterange.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhDaterangeLocalizedText = StzhLocaleComponent & {\n  legend: string\n  labelFrom: string\n  labelTo: string\n  rangeToday: string\n  rangeTomorrow: string\n  rangeNextSevenDays: string\n}\n"]}

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

@@ -0,0 +1,51 @@
+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-daterange';
+const story = createComponentStory(COMPONENT_NAME);
+
+const TEMPLATE = `
+<stzh-daterange>
+  <stzh-datepicker slot="from" name="date-start"></stzh-datepicker>
+  <stzh-datepicker slot="to" name="date-end"></stzh-datepicker>
+</stzh-daterange>
+`;
+
+export default {
+  title: 'Components/Daterange',
+  component: COMPONENT_NAME,
+  parameters: {
+    layout: 'padded',
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('daterange'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withActions,
+    withDesign
+  ]
+};
+
+export const Default = {
+  render: (args) => story(args, TEMPLATE),
+  args: {
+    'range-links': [
+      "today",
+      "tomorrow",
+      "next7days"
+    ]
+  }
+}

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

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

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */