@oiz/stzh-components 2.4.0 → 2.5.0-alpha-carousel

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

@@ -105,6 +105,12 @@ export class StzhCard {
         });
       });
     };
+    this.handleResize = () => {
+      if (this.debounceResize) {
+        window.cancelAnimationFrame(this.debounceResize);
+      }
+      this.debounceResize = requestAnimationFrame(this.update);
+    };
     this.handleMutation = (entries) => {
       this.init();
       this.nodeChange(entries);
@@ -139,14 +145,9 @@ export class StzhCard {
     this.collapsible = false;
     this.hideHeaderBorder = false;
     this.hideFooterBorder = false;
+    this.hideElevation = false;
     this.hideMovementActions = false;
   }
-  handleResize() {
-    if (this.debounceResize) {
-      window.cancelAnimationFrame(this.debounceResize);
-    }
-    this.debounceResize = requestAnimationFrame(this.update);
-  }
   subtitleWatcher(newValue) {
     if (typeof newValue === "string") {
       try {
@@ -218,9 +219,16 @@ export class StzhCard {
       childList: true,
       subtree: true
     });
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.element);
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
   render() {
     var _a, _b, _c;
@@ -275,8 +283,8 @@ export class StzhCard {
         h(Fragment, null, !isFirstItemInSortable &&
           h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
           h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
-      h("stzh-actionset", { actions: this._footerActions }), this.selectable &&
-      h("stzh-button", { fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
+      h("stzh-actionset", { class: "stzh-card__footer-actionset", actions: this._footerActions }), this.selectable &&
+      h("stzh-button", { class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
       h("stzh-icon", { class: "stzh-card__footer-arrow", name: "arrow-right-long" })))))));
   }
   static get is() { return "stzh-card"; }
@@ -681,6 +689,24 @@ export class StzhCard {
         "reflect": true,
         "defaultValue": "false"
       },
+      "hideElevation": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether card elevation should be hidden"
+        },
+        "attribute": "hide-elevation",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "hideMovementActions": {
         "type": "boolean",
         "mutable": false,
@@ -820,31 +846,4 @@ export class StzhCard {
         "methodName": "collapsedWatcher"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "appload",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "DOMContentLoaded",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "load",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -0,0 +1,253 @@
+/**
+ * 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 {
+  --peek: calc(var(--peek-in, 0px) + var(--peek-out, 0px));
+  --peek-out: 1.25rem;
+  --padding-top: 0px;
+  --padding-bottom: 0px;
+  --gutter: var(--stzh-space-xxxsmall);
+  --snap-stop: always;
+  --slides: 1;
+  --slide-size: calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides));
+}
+@media screen and (min-width: 600px) {
+  :host {
+    --peek-out: 0px;
+  }
+}
+:host[variant=cards] {
+  --padding-top: 0.25rem;
+  --padding-bottom: 0.25rem;
+  --gutter: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 600px) {
+  :host[variant=cards] {
+    --peek-out: 2rem;
+  }
+}
+@media screen and (min-width: 1024px) {
+  :host[variant=cards] {
+    --peek-out: 2.5rem;
+    --gutter: var(--stzh-space-small);
+  }
+}
+@media screen and (min-width: 1260px) {
+  :host[variant=cards] {
+    --peek-out: 5.5rem;
+    --gutter: var(--stzh-space-medium);
+  }
+}
+@media screen and (min-width: 1440px) {
+  :host[variant=cards] {
+    --peek-out: calc((100vw - 78.75rem - var(--stzh-scrollbar-width, 0px)) / 2);
+  }
+}
+:host ::slotted(*) {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: var(--snap-stop);
+}
+:host ::slotted(*) img {
+  -webkit-user-drag: none;
+  user-drag: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+:host ::slotted([slot=actions]) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+  padding: 0 var(--peek);
+}
+:host ::slotted([slot=actions]) stzh-text {
+  width: auto;
+}
+:host ::slotted([slot=actions]) stzh-button {
+  pointer-events: all;
+}
+:host ::slotted([slot=actions]) stzh-button[data-stzh-carousel-previous] {
+  --border-radius: var(--stzh-button-border-radius) 0 0 var(--stzh-button-border-radius);
+  --border-width: 0.0625rem 0 0.0625rem 0.0625rem;
+}
+:host ::slotted([slot=actions]) stzh-button[data-stzh-carousel-next] {
+  --border-radius: 0 var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0;
+}
+:host ::slotted(stzh-ratio[slot=actions]) stzh-space,
+:host ::slotted(stzh-ratio[slot=actions]) stzh-hspace,
+:host ::slotted(stzh-ratio[slot=actions]) stzh-vspace {
+  padding: var(--stzh-space-xsmall);
+}
+:host ::slotted(stzh-ratio[slot=actions]) {
+  --background-color: transparent;
+}
+:host[variant=cards] ::slotted([slot=actions]) {
+  position: relative;
+  order: 1;
+  margin-top: calc(var(--stzh-space-medium) - var(--padding-bottom));
+}
+
+.stzh-carousel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% + var(--peek-out) * 2);
+  margin-left: calc(var(--peek-out) / -1);
+  margin-right: calc(var(--peek-out) / -1);
+}
+.stzh-carousel__vhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+.stzh-carousel__scroll {
+  position: relative;
+  grid-area: slides;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  overflow-x: auto;
+  overflow-y: visible;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--slide-size);
+  grid-auto-rows: 100%;
+  -moz-column-gap: var(--gutter);
+       column-gap: var(--gutter);
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+  overscroll-behavior-x: contain;
+  -webkit-scroll-snap-type: x mandatory;
+          scroll-snap-type: x mandatory;
+  scroll-padding: 0 var(--peek);
+  padding: var(--padding-top) var(--peek) var(--padding-bottom);
+}
+@media (prefers-reduced-motion: reduce) {
+  .stzh-carousel__scroll {
+    scroll-behavior: auto;
+  }
+}
+.stzh-carousel__scroll::-webkit-scrollbar {
+  display: none;
+}
+.stzh-carousel--is-draggable .stzh-carousel__scroll {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+.stzh-carousel--is-dragging .stzh-carousel__scroll {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+.stzh-carousel--is-disabled .stzh-carousel__scroll {
+  cursor: not-allowed;
+  overflow: hidden;
+}