@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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

@@ -98,6 +98,11 @@
   box-sizing: border-box;
 }
 
+:host {
+  --richtext-blockquote-color: var(--stzh-richtext-blockquote-color);
+  --richtext-blockquote-line-color: var(--stzh-richtext-blockquote-line-color);
+  --richtext-blockquote-footer-color: var(--stzh-richtext-blockquote-footer-color);
+}
 :host ::slotted(*) {
   /* Font weights */
   /* Coloring */
@@ -566,7 +571,7 @@
   padding-left: var(--stzh-space-medium);
   padding-right: var(--stzh-space-medium);
   margin: var(--stzh-space-xxlarge);
-  color: var(--stzh-richttext-blockquote-color);
+  color: var(--richtext-blockquote-color);
   position: relative;
   overflow: hidden;
 }
@@ -615,7 +620,7 @@
   }
 }
 :host ::slotted(*) blockquote:before {
-  background: var(--stzh-richttext-blockquote-line-color);
+  background: var(--richtext-blockquote-line-color);
   height: calc(100% - var(--stzh-space-xsmall) * 2);
   width: 0.1875rem;
   content: " ";
@@ -650,7 +655,7 @@
 :host ::slotted(*) blockquote footer {
   font-size: var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));
   line-height: var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));
-  color: var(--stzh-richttext-blockquote-footer-color);
+  color: var(--richtext-blockquote-footer-color);
 }
 @media screen and (min-width: 1024px) {
   :host ::slotted(*) blockquote footer {
@@ -837,8 +842,8 @@
   height: var(--stzh-icon-size-default);
 }
 :host ::slotted(*:first-child) {
-  margin-top: 0;
+  margin-top: 0 !important;
 }
 :host ::slotted(*:last-child) {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }

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

@@ -0,0 +1,165 @@
+/**
+ * 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 {
+  --show-display: block;
+  --hide-display: none;
+  display: var(--hide-display);
+}
+
+/* Mikro */
+:host([mikro]) {
+  display: var(--show-display);
+}
+
+:host([mikro=false]) {
+  display: var(--hide-display);
+}
+
+/* Small */
+@media screen and (min-width: 600px) {
+  :host([small]) {
+    display: var(--show-display);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  :host([small=false]) {
+    display: var(--hide-display);
+  }
+}
+
+/* Medium */
+@media screen and (min-width: 1024px) {
+  :host([medium]) {
+    display: var(--show-display);
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  :host([medium=false]) {
+    display: var(--hide-display);
+  }
+}
+
+/* Large */
+@media screen and (min-width: 1260px) {
+  :host([large]) {
+    display: var(--show-display);
+  }
+}
+
+@media screen and (min-width: 1260px) {
+  :host([large=false]) {
+    display: var(--hide-display);
+  }
+}
+
+/* Ultra */
+@media screen and (min-width: 1440px) {
+  :host([ultra]) {
+    display: var(--show-display);
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  :host([ultra=false]) {
+    display: var(--hide-display);
+  }
+}

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

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+import { parseISODate } from "../../utils/date-utils";
+/**
+ * @slot - Slot for any content
+ */
+export class StzhShow {
+  constructor() {
+    this.mikro = undefined;
+    this.small = undefined;
+    this.medium = undefined;
+    this.large = undefined;
+    this.ultra = undefined;
+    this.hideFromDate = undefined;
+  }
+  hideFromDateWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._hideFromDate = parseISODate(newValue);
+    }
+    else {
+      this._hideFromDate = newValue;
+    }
+  }
+  componentWillLoad() {
+    this.hideFromDateWatcher(this.hideFromDate);
+  }
+  render() {
+    return (h(Host, { hidden: this._hideFromDate && Date.now() >= this._hideFromDate.getTime() }, h("slot", null)));
+  }
+  static get is() { return "stzh-show"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-show.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-show.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mikro": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mikro"
+        },
+        "attribute": "mikro",
+        "reflect": false
+      },
+      "small": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Small"
+        },
+        "attribute": "small",
+        "reflect": false
+      },
+      "medium": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Medium"
+        },
+        "attribute": "medium",
+        "reflect": false
+      },
+      "large": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Large"
+        },
+        "attribute": "large",
+        "reflect": false
+      },
+      "ultra": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Ultra"
+        },
+        "attribute": "ultra",
+        "reflect": false
+      },
+      "hideFromDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | string",
+          "resolved": "Date | string",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide from date"
+        },
+        "attribute": "hide-from-date",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "hideFromDate",
+        "methodName": "hideFromDateWatcher"
+      }];
+  }
+}

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

@@ -0,0 +1,52 @@
+import { h } from '../../utils/h';
+import readme from './readme.md';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../../figma';
+
+export default {
+  title: 'Components/Show',
+  component: 'stzh-show',
+  parameters: {
+    docs: {
+      description: {
+        component: readme
+      }
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('show'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-richtext>
+    <p>Content before <code>stzh-show</code></p>
+    <stzh-show {...args}>
+      <p><mark>Content inside <code>stzh-show</code></mark></p>
+    </stzh-show>
+    <p>Content after <code>stzh-show</code></p>
+  </stzh-richtext>
+);
+
+export const ShowOnlyMikro = Template.bind({});
+ShowOnlyMikro.args = {
+  mikro: true,
+  small: false
+};
+
+export const ShowAboveSmall = Template.bind({});
+ShowAboveSmall.args = {
+  small: true
+};
+
+export const HideFromDate = Template.bind({});
+HideFromDate.args = {
+  mikro: true,
+  'hide-from-date': '2022-01-29'
+};
+

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

@@ -99,7 +99,7 @@
 
 .stzh-sitemap stzh-datalist-item[href]:not([href=""]) {
   --font-family: var(--stzh-font-family-heavy);
-  --font-weight: var( --stzh-font-weight-heavy);
+  --font-weight: var(--stzh-font-weight-heavy);
   --color: var(--stzh-base-color);
   --action-display: none;
 }

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

@@ -50,11 +50,12 @@ export class StzhSortable {
     this.onKeydown = (event) => {
       const currentTarget = event.currentTarget;
       const target = event.target;
-      if (!this.getContainer() || this.disabled) {
+      if (!this.getContainer() || this.disabled || currentTarget !== target) {
         return;
       }
-      const isFilteredElement = target.matches(this._filterElements.join(', '));
-      if (event.key === " " && !isFilteredElement) {
+      // const isFilteredElement = target.matches(this._filterElements.join(', '));
+      // if (event.key === " " && !isFilteredElement) {
+      if (event.key === " ") {
         event.preventDefault();
         if (!this.selectedItem) {
           this.selectedItem = currentTarget;
@@ -80,6 +81,7 @@ export class StzhSortable {
         this.resetActiveItem(true);
       }
       else if (event.key === "ArrowUp") {
+        event.preventDefault();
         if (this.selectedItem) {
           this.moveItem(this.selectedItem, "up");
         }
@@ -88,6 +90,7 @@ export class StzhSortable {
         }
       }
       else if (event.key === "ArrowDown") {
+        event.preventDefault();
         if (this.selectedItem) {
           this.moveItem(this.selectedItem, "down");
         }