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

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
  */