@oiz/stzh-components 2.1.0-beta → 2.2.0-beta

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

@@ -0,0 +1,232 @@
+/**
+ * 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;
+}
+
+:host ::slotted([slot=image]) {
+  width: 5.5rem;
+  height: 5.5rem;
+  top: 0;
+  left: 0;
+  border-radius: 50%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  margin-bottom: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 800px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xlarge);
+    margin-bottom: 0;
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1024px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    margin-right: var(--stzh-space-xxxlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host ::slotted([slot=image]) {
+    width: 12.25rem;
+    height: 12.25rem;
+  }
+}
+
+.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, .stzh-contactaddress__inner-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress, .stzh-contactaddress__inner-wrapper {
+    flex-direction: row;
+  }
+}
+.stzh-contactaddress__wrapper {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.stzh-contactaddress__image {
+  display: flex;
+  flex-shrink: 0;
+}
+.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__main-heading {
+  margin-bottom: var(--stzh-space-small);
+}
+@media screen and (min-width: 1024px) {
+  .stzh-contactaddress__main-heading {
+    margin-bottom: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1260px) {
+  .stzh-contactaddress__main-heading {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+.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__info {
+  flex-grow: 1;
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress__info {
+    flex-basis: 45%;
+  }
+}
+.stzh-contactaddress__availability-title {
+  margin-bottom: var(--stzh-space-xsmall);
+}
+.stzh-contactaddress__availability {
+  margin-top: var(--stzh-space-xlarge);
+}
+@media screen and (min-width: 800px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xlarge);
+    margin-top: 0;
+    flex-basis: 55%;
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1024px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 800px) and (min-width: 1260px) {
+  .stzh-contactaddress__availability {
+    margin-left: var(--stzh-space-xxxlarge);
+  }
+}
+.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,388 @@
+import { Host, h, Fragment } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+function formatTel(tel) {
+  return tel.replace(/\s/g, '');
+}
+/**
+ */
+export class StzhContactaddress {
+  constructor() {
+    this._numbers = [];
+    this._availability = [];
+    this.availabilityDataItems = [];
+    this.type = "Organization";
+    this.heading = undefined;
+    this.mainHeading = 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.availabilityTitle = undefined;
+    this.availability = undefined;
+    this.withBorder = false;
+  }
+  availabilityWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._availability = JSON.parse(newValue);
+    }
+    else {
+      this._availability = newValue;
+    }
+    if (this._availability) {
+      this.availabilityDataItems = this._availability.map((item) => ({
+        value: item.hours.join(' | '),
+        label: item.weekday
+      }));
+    }
+  }
+  numbersWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._numbers = JSON.parse(newValue);
+    }
+    else {
+      this._numbers = newValue;
+    }
+  }
+  async componentWillLoad() {
+    this.numbersWatcher(this.numbers);
+    this.availabilityWatcher(this.availability);
+  }
+  render() {
+    const hasImage = hasSlot(this.element, "image");
+    const classes = {
+      "stzh-contactaddress": true,
+      "stzh-contactaddress--has-image": hasImage,
+      "stzh-contactaddress--has-border": this.withBorder
+    };
+    return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contactaddress__image" }, h("slot", { name: "image" })), h("div", { class: "stzh-contactaddress__wrapper" }, this.mainHeading &&
+      h("stzh-heading", { level: "3", class: "stzh-contactaddress__main-heading", itemprop: (this.type === "Organization" && !this.heading
+          || this.type === "Person" && !this.name) ? "name" : null, innerHTML: this.mainHeading }), h("div", { class: "stzh-contactaddress__inner-wrapper" }, h("div", { class: "stzh-contactaddress__info" }, this.heading &&
+      h("stzh-heading", { level: "4", class: "stzh-contactaddress__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
+      h("div", { class: "stzh-contactaddress__name", itemprop: this.type === "Person" ? "name" : null }, 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))), this.availability &&
+      h("div", { class: "stzh-contactaddress__availability" }, this.availabilityTitle &&
+        h("stzh-heading", { level: "4", class: "stzh-contactaddress__availability-title" }, this.availabilityTitle), h("stzh-datalist", { hideBorder: true, directionSmall: "vertical", items: this.availabilityDataItems })))))));
+  }
+  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
+      },
+      "mainHeading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Main heading"
+        },
+        "attribute": "main-heading",
+        "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
+      },
+      "availabilityTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Availability title"
+        },
+        "attribute": "availability-title",
+        "reflect": false
+      },
+      "availability": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | StzhContactaddressAvailabilityItem[]",
+          "resolved": "StzhContactaddressAvailabilityItem[] | string",
+          "references": {
+            "StzhContactaddressAvailabilityItem": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Availability times"
+        },
+        "attribute": "availability",
+        "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": "availability",
+        "methodName": "availabilityWatcher"
+      }, {
+        "propName": "numbers",
+        "methodName": "numbersWatcher"
+      }];
+  }
+}