@oiz/stzh-components 2.0.0 → 2.1.0-beta

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

@@ -0,0 +1,279 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Link
+ */
+/**
+ * Text
+ */
+/**
+ * Richtext
+ */
+/**
+ * Section
+ */
+/**
+ * Header
+ */
+/**
+ * Appnav
+ */
+/**
+ * Progressbar
+ */
+/**
+ * Loader
+ */
+/**
+ * Table
+ */
+/**
+ * Heading
+ */
+/**
+ * Menu (Item)
+ */
+/**
+ * Form Elements (Input / Checkbox / Radio / Select / Datepicker)
+ */
+/**
+ * Popover
+ */
+/**
+ * Tooltips
+ */
+/**
+ * Accordions
+ */
+/**
+ * Buttons
+ */
+/**
+ * Box Shadows
+ */
+/**
+ * Z-Indexes
+ * Inspired by https://www.duetds.com/tokens/#z-index
+ */
+/**
+ * Icon sizes
+ */
+/**
+ * Grid
+ */
+/**
+ * Breakpoints
+ */
+/**
+ * Container
+ */
+/**
+ * Spaces
+ */
+/**
+ * Fonts
+ */
+:host {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+  color: var(--stzh-base-color);
+  box-sizing: border-box;
+  display: block;
+}
+:host[hidden] {
+  display: none;
+}
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --lines: 1;
+  width: 100%;
+  color: inherit;
+}
+
+:host([lines="1"]) {
+  --lines: 1;
+}
+
+:host([lines="2"]) {
+  --lines: 2;
+}
+
+:host([lines="3"]) {
+  --lines: 3;
+}
+
+:host([lines="4"]) {
+  --lines: 4;
+}
+
+:host([lines="5"]) {
+  --lines: 5;
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([lines-small="5"]) {
+    --lines: 5;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 800px) {
+  :host([lines-smallheader="5"]) {
+    --lines: 5;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([lines-medium="5"]) {
+    --lines: 5;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([lines-large="5"]) {
+    --lines: 5;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="1"]) {
+    --lines: 1;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="2"]) {
+    --lines: 2;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="3"]) {
+    --lines: 3;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="4"]) {
+    --lines: 4;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([lines-ultra="5"]) {
+    --lines: 5;
+  }
+}
+
+.stzh-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lines);
+  line-clamp: var(--lines);
+  overflow: hidden;
+}

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

@@ -0,0 +1,125 @@
+import { Host, h } from "@stencil/core";
+/**
+ *
+ */
+export class StzhClamp {
+  constructor() {
+    this.lines = 1;
+    this.linesSmall = 0;
+    this.linesMedium = 0;
+    this.linesLarge = 0;
+    this.linesUltra = 0;
+  }
+  render() {
+    const classes = {
+      "stzh-clamp": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
+  }
+  static get is() { return "stzh-clamp"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-clamp.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-clamp.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "lines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number"
+        },
+        "attribute": "lines",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "linesSmall": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number above small breakpoint"
+        },
+        "attribute": "lines-small",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "linesMedium": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number above medium breakpoint"
+        },
+        "attribute": "lines-medium",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "linesLarge": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number above large breakpoint"
+        },
+        "attribute": "lines-large",
+        "reflect": true,
+        "defaultValue": "0"
+      },
+      "linesUltra": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Line number above ultra breakpoint"
+        },
+        "attribute": "lines-ultra",
+        "reflect": true,
+        "defaultValue": "0"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,41 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { fullwidthCentered } from '../../utils/decorators';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Clamp',
+  component: 'stzh-clamp',
+  parameters: {
+    actions: {
+      handles: []
+    },
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('clamp'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    fullwidthCentered,
+    withDesign
+  ]
+}
+
+const Template = (args) => (
+  <stzh-text>
+    <stzh-clamp {...args}>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    </stzh-clamp>
+  </stzh-text>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

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

@@ -3,25 +3,6 @@ import { Host, h } from "@stencil/core";
  */
 export class StzhDatalist {
   constructor() {
-    /** Direction */
-    this.direction = "vertical";
-    /** Direction above small breakpoint */
-    this.directionSmall = "horizontal";
-    /** Direction above medium breakpoint  */
-    this.directionMedium = "inherit";
-    /** Direction above large breakpoint  */
-    this.directionLarge = "inherit";
-    /** Direction above ultra breakpoint  */
-    this.directionUltra = "inherit";
-    /** Hide border lines between items */
-    this.hideBorder = false;
-    /**
-     * Items in datalist
-     * Array of objects that must at least include `value` attribute.
-     * Can optionally contain `label`, `meta`, `icon`, `href` attribute:
-     * `[{"value":"Value 1", "label": "Label 1"}, {"value":"Value 2", "label": "Label 2"}]`
-     */
-    this.items = [];
     this._items = [];
     this.actionClick = (originalEvent, item) => {
       this.stzhItemActionClick.emit({
@@ -30,6 +11,13 @@ export class StzhDatalist {
         item
       });
     };
+    this.direction = "vertical";
+    this.directionSmall = "horizontal";
+    this.directionMedium = "inherit";
+    this.directionLarge = "inherit";
+    this.directionUltra = "inherit";
+    this.hideBorder = false;
+    this.items = [];
   }
   itemsWatcher(newValue) {
     if (typeof newValue === "string") {

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

@@ -183,11 +183,6 @@
   line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
   letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   color: var(--stzh-base-lead-color);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  overflow: hidden;
 }
 @media screen and (min-width: 1024px) {
   .stzh-datamessagelist-item__description {
@@ -196,12 +191,6 @@
     letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
-@media screen and (min-width: 1024px) {
-  .stzh-datamessagelist-item__description {
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-  }
-}
 .stzh-datamessagelist-item__meta-wrapper {
   margin-top: var(--stzh-space-small);
 }

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

@@ -4,16 +4,6 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhDatamessagelistItem {
   constructor() {
-    /** Heading */
-    this.heading = "";
-    /** Whether item should be displayed in unread state */
-    this.unread = false;
-    /** URL the item should link to */
-    this.href = "";
-    /** Description */
-    this.description = "";
-    /** External href */
-    this.externalHref = "";
     this.actionClick = (action, originalEvent) => {
       this.stzhActionClick.emit({
         component: "stzh-datamessagelist-item",
@@ -27,6 +17,16 @@ export class StzhDatamessagelistItem {
         originalEvent
       });
     };
+    this.localization = undefined;
+    this.heading = "";
+    this.unread = false;
+    this.href = "";
+    this.description = "";
+    this.externalHref = "";
+    this.loadingStatus = undefined;
+    this.meta = undefined;
+    this.actions = undefined;
+    this.tags = undefined;
   }
   loadingStatusWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -75,7 +75,7 @@ export class StzhDatamessagelistItem {
       "stzh-datamessagelist-item--is-unread": this.unread
     };
     return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.heading)), this.description &&
-      h("div", { class: "stzh-datamessagelist-item__description" }, this.description), this._meta && this._meta.length > 0 &&
+      h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
       h("stzh-status", { class: "stzh-datamessagelist-item__status", label: this._loadingStatus.label, percent: this._loadingStatus.percent, type: this._loadingStatus.type, withLoadingbar: true }), this._tags && this._tags.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__tags-wrapper" }, h("div", { class: "stzh-datamessagelist-item__tags" }, this._tags.map((tag) => h("stzh-chip", { class: "stzh-datamessagelist-item__tag", variant: "tag", size: "small", type: tag.type, icon: tag.icon, label: tag.label }))))), h("div", { class: "stzh-datamessagelist-item__actions" }, this.externalHref &&

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

@@ -6,26 +6,6 @@ import { fetchTranslations } from "../../utils/translation-utils";
  */
 export class StzhDatatable {
   constructor() {
-    /** Label */
-    this.label = "";
-    /** Sort by given column key */
-    this.sortBy = "";
-    /** Sort direction */
-    this.sortDirection = "asc";
-    /** Tokenize type */
-    this.tokenize = "forward";
-    /** ID field */
-    this.idField = "id";
-    /** Rows */
-    this.rows = [];
-    /** Columns */
-    this.columns = [];
-    this.query = "";
-    this.hasScrollLeft = false;
-    this.hasScrollRight = false;
-    this.isScrollable = false;
-    this.cellsStickyLeft = [];
-    this.cellsStickyRight = [];
     this.updateScrollStates = () => {
       if (!this.tableWrapper) {
         return;
@@ -68,6 +48,20 @@ export class StzhDatatable {
     this.onInputChange = () => {
       this.query = this.input.value;
     };
+    this.localization = undefined;
+    this.label = "";
+    this.sortBy = "";
+    this.sortDirection = "asc";
+    this.tokenize = "forward";
+    this.idField = "id";
+    this.rows = [];
+    this.columns = [];
+    this.query = "";
+    this.hasScrollLeft = false;
+    this.hasScrollRight = false;
+    this.isScrollable = false;
+    this.cellsStickyLeft = [];
+    this.cellsStickyRight = [];
   }
   /** Toggle sort by a given column key like when clicking on a column header */
   async toggleSort(columnKey) {

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

@@ -7,41 +7,6 @@ import { createGlobalAdapter } from "../../utils/date-adapter";
  */
 export class StzhDatepicker {
   constructor() {
-    /**
-     * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the max property.
-     */
-    this.calendarMin = "";
-    /**
-     * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
-     * This setting can be used alone or together with the min property.
-     */
-    this.calendarMax = "";
-    /**
-     * Controls which days are disabled and therefore disallowed.
-     * For example, this can be used to disallow selection of weekends.
-     */
-    this.calendarIsDateDisabled = () => false;
-    /** Name of the hidden date picker input. */
-    this.name = "";
-    /** Value of hidden date picker input (current selected date in ISO format). */
-    this.value = "";
-    /** Label for input field and popover */
-    this.label = "";
-    /** Whether the element is readonly or not */
-    this.readonly = false;
-    /** Whether the element is disabled or not */
-    this.disabled = false;
-    /** Invalid status */
-    this.invalid = false;
-    /** Required status */
-    this.required = false;
-    /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
-    this.showMarker = false;
-    /** Size variant */
-    this.size = "default";
-    /** Show calendar inline */
-    this.inline = false;
     this.onInputChange = () => {
       const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
       if (this.input.value === "" || parsedDate) {
@@ -72,6 +37,25 @@ export class StzhDatepicker {
         this.popover.hide();
       }
     };
+    this.calendarMin = "";
+    this.calendarMax = "";
+    this.calendarIsDateDisabled = () => false;
+    this.name = "";
+    this.value = "";
+    this.label = "";
+    this.readonly = false;
+    this.disabled = false;
+    this.description = undefined;
+    this.descriptionLong = undefined;
+    this.error = undefined;
+    this.invalid = false;
+    this.required = false;
+    this.showMarker = false;
+    this.size = "default";
+    this.inline = false;
+    this.dateAdapter = undefined;
+    this.localization = undefined;
+    this.buttonLabel = undefined;
   }
   createDateFormatters() {
     if (this.localization) {

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

@@ -14,24 +14,6 @@ let dialogCounter = 0;
  */
 export class StzhDialog {
   constructor() {
-    /** Close dialog when pressing ESC */
-    this.closeOnEscapeKey = false;
-    /** Close dialog when clicking outside of it */
-    this.closeOnBackdropClick = false;
-    /** Open status */
-    this.open = false;
-    /** Stay in original position (true) or move to body (false) */
-    this.stay = true;
-    /** Size */
-    this.size = "default";
-    /** Whether to hide close button */
-    this.hideClose = false;
-    /** Heading text */
-    this.heading = "";
-    /** Accessibility role */
-    this.a11yRole = "alertdialog";
-    /** Accessible label for dialog (use if no heading is used) */
-    this.a11yLabel = "";
     this.handleDialogClick = (event) => {
       const target = event.target;
       if (target.dataset.stzhDialogClose) {
@@ -56,6 +38,16 @@ export class StzhDialog {
         });
       }
     };
+    this.localization = undefined;
+    this.closeOnEscapeKey = false;
+    this.closeOnBackdropClick = false;
+    this.open = false;
+    this.stay = true;
+    this.size = "default";
+    this.hideClose = false;
+    this.heading = "";
+    this.a11yRole = "alertdialog";
+    this.a11yLabel = "";
   }
   handleOutsideClick(event) {
     if (!this.open || !this.closeOnBackdropClick) {