@oiz/stzh-components 2.1.0-alpha → 2.1.0

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

@@ -0,0 +1,153 @@
+/**
+ * Colors
+ */
+/*
+ * Base
+ */
+/**
+ * Flyingfocus
+ */
+/**
+ * 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;
+}
+
+.stzh-contactaddress {
+  font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
+  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);
+  /* Has border */
+}
+@media screen and (min-width: 1024px) {
+  .stzh-contactaddress {
+    font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
+    letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
+  }
+}
+.stzh-contactaddress__pobox {
+  margin-top: var(--stzh-space-small);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-contactaddress__pobox {
+    margin-top: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-contactaddress__pobox {
+    margin-top: var(--stzh-space-large);
+  }
+}
+.stzh-contactaddress__company, .stzh-contactaddress__heading {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  font-size: var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));
+  line-height: var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));
+  letter-spacing: var(--stzh-font-curve-h4-default-heading-letter-spacing);
+  margin: 0;
+}
+@media screen and (min-width: 1024px) {
+  .stzh-contactaddress__company, .stzh-contactaddress__heading {
+    font-size: var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));
+    line-height: var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));
+    letter-spacing: var(--stzh-font-curve-h4-medium-heading-letter-spacing);
+  }
+}
+.stzh-contactaddress__number-link {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+.stzh-contactaddress__number-link:hover, .stzh-contactaddress__number-link:focus {
+  color: var(--stzh-link-hover-color);
+}
+.stzh-contactaddress--has-border {
+  padding-bottom: var(--stzh-space-xlarge);
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+}

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

@@ -0,0 +1,321 @@
+import { Host, h, Fragment } from "@stencil/core";
+function formatTel(tel) {
+  return tel.replace(/\s/g, '');
+}
+/**
+ */
+export class StzhContactaddress {
+  constructor() {
+    this._numbers = [];
+    this.type = "Organization";
+    this.heading = undefined;
+    this.company = undefined;
+    this.name = undefined;
+    this.street = undefined;
+    this.streetInfo = undefined;
+    this.postalCode = undefined;
+    this.location = undefined;
+    this.numbers = [];
+    this.poBoxHeading = undefined;
+    this.poboxTitle = undefined;
+    this.poboxPostalCode = undefined;
+    this.poboxLocation = undefined;
+    this.withBorder = false;
+  }
+  numbersWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._numbers = JSON.parse(newValue);
+    }
+    else {
+      this._numbers = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.numbersWatcher(this.numbers);
+  }
+  render() {
+    const classes = {
+      "stzh-contactaddress": true,
+      "stzh-contactaddress--has-border": this.withBorder
+    };
+    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, this.heading &&
+      h("h4", { class: "stzh-contactaddress__heading" }, this.heading), this.company &&
+      h("div", { class: "stzh-contactaddress__company", itemprop: "name", innerHTML: this.company }), this.name &&
+      h("div", { class: "stzh-contactaddress__name", itemprop: "name" }, this.name), (this.street || this.postalCode || this.location) &&
+      h("div", { class: "stzh-contactaddress__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress" }, this.street &&
+        h("div", { class: "stzh-contactaddress__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
+          h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
+        h("span", { class: "stzh-contactaddress__postal-code", itemprop: "postalCode" }, this.postalCode, "\u00A0"), this.location &&
+        h("span", { class: "stzh-contactaddress__locality", itemprop: "addressLocality" }, this.location)), this._numbers.map((number) => h("div", { class: "stzh-contactaddress__number" }, h("span", null, number.label, "\u00A0"), h("span", { itemprop: number.type === "fax" ? "faxNumber" : "telephone" }, h("a", { class: "stzh-contactaddress__number-link", href: `${number.type}:${formatTel(number.number)}` }, number.number)))), (this.poBoxHeading || this.poboxTitle || this.poboxPostalCode || this.poboxLocation) &&
+      h("div", { class: "stzh-contactaddress__pobox" }, h("div", { class: "stzh-contactaddress__pobox-heading" }, this.poBoxHeading), h("div", { class: "stzh-contactaddress__pobox-title" }, this.poboxTitle), h("span", { class: "stzh-contactaddress__pobox-postal-code" }, this.poboxPostalCode, "\u00A0"), h("span", { class: "stzh-contactaddress__pobox-locality" }, this.poboxLocation)))));
+  }
+  static get is() { return "stzh-contactaddress"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-contactaddress.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-contactaddress.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"Organization\" | \"Person\"",
+          "resolved": "\"Organization\" | \"Person\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"Organization\""
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "company": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Company Title"
+        },
+        "attribute": "company",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "street": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Street"
+        },
+        "attribute": "street",
+        "reflect": false
+      },
+      "streetInfo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Additional street info"
+        },
+        "attribute": "street-info",
+        "reflect": false
+      },
+      "postalCode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Postal code"
+        },
+        "attribute": "postal-code",
+        "reflect": false
+      },
+      "location": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Location / city"
+        },
+        "attribute": "location",
+        "reflect": false
+      },
+      "numbers": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ContactaddressNumber[] | string",
+          "resolved": "ContactaddressNumber[] | string",
+          "references": {
+            "ContactaddressNumber": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Numbers\nArray of objects that can include the attributes `type` = `tel`|`fax`, `label` and `number`."
+        },
+        "attribute": "numbers",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "poBoxHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Post office box heading"
+        },
+        "attribute": "po-box-heading",
+        "reflect": false
+      },
+      "poboxTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Post office box title"
+        },
+        "attribute": "pobox-title",
+        "reflect": false
+      },
+      "poboxPostalCode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Post office box postal code"
+        },
+        "attribute": "pobox-postal-code",
+        "reflect": false
+      },
+      "poboxLocation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Post office box location / city"
+        },
+        "attribute": "pobox-location",
+        "reflect": false
+      },
+      "withBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to display border or not"
+        },
+        "attribute": "with-border",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "numbers",
+        "methodName": "numbersWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,100 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Contactaddress',
+  component: 'stzh-contactaddress',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('contactaddress'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-contactaddress {...args}></stzh-contactaddress>
+);
+
+const numbers = `[
+  {
+    "type": "tel",
+    "label": "Phone",
+    "number": "+41 44 412 91 11"
+  },
+  {
+    "type": "fax",
+    "label": "Fax",
+    "number": "+41 44 412 91 11"
+  },
+  {
+    "type": "tel",
+    "label": "Service Desk",
+    "number": "+41 44 412 90 00"
+  }
+]`;
+
+export const OrganizationWithPobox = Template.bind({});
+OrganizationWithPobox.args = {
+  'with-border': true,
+  type: 'Organization',
+  company: 'City Zürich<br> Organisation and IT',
+  street: 'Musterstrasse 1',
+  'postal-code': '8000',
+  location: 'Zürich',
+  'pobox-heading': 'Postadresse:',
+  'pobox-title': 'Postfach',
+  'pobox-postal-code': '8022',
+  'pobox-location': 'Zürich',
+  numbers
+};
+
+export const FurtherContactPerson = Template.bind({});
+FurtherContactPerson.args = {
+  'with-border': true,
+  heading: 'Further Contact',
+  type: 'Person',
+  name: 'Hans Muster',
+  street: 'Musterstrasse 12',
+  'postal-code': '9000',
+  'location': 'Muster'
+}
+
+export const FurtherContactOrganization = Template.bind({});
+FurtherContactOrganization.args = {
+  'with-border': true,
+  heading: 'Further Contact',
+  type: 'Organization',
+  street: 'Musterstrasse 12',
+  'postal-code': '9000',
+  'location': 'Muster'
+}
+
+export const MinimalOrganization = Template.bind({});
+MinimalOrganization.args = {
+  'with-border': true,
+  type: 'Organization',
+  company: 'City Zürich<br> Organisation and IT',
+  street: 'Musterstrasse 12',
+  'postal-code': '8000',
+  location: 'Zürich',
+  numbers: `[
+    {
+      "type": "tel",
+      "label": "Phone",
+      "number": "+41 44 412 91 11"
+    }
+  ]`
+}
+

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -98,6 +101,14 @@
   border-bottom: 0.0625rem solid var(--stzh-base-border-color);
 }
 
-.stzh-datamessagelist {
-  border: 0.0625rem solid var(--stzh-base-border-color);
+@media screen and (max-width: 599px) {
+  .stzh-datamessagelist {
+    margin-left: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);
+    margin-right: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);
+  }
+}
+@media screen and (min-width: 600px) {
+  .stzh-datamessagelist {
+    border: 0.0625rem solid var(--stzh-base-border-color);
+  }
 }

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */
@@ -183,11 +186,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 +194,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

@@ -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.css

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */

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

@@ -4,6 +4,9 @@
 /*
  * Base
  */
+/**
+ * Flyingfocus
+ */
 /**
  * Link
  */