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

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-datamessagelist-item {
@@ -126,6 +128,12 @@
     padding-right: var(--stzh-space-xlarge);
   }
 }
+.stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action.is-non-interactive {
+  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
+.stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action-popover-button {
+  --color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
+}
 .stzh-datamessagelist-item__vhidden {
   border: 0;
   clip: rect(0 0 0 0);
@@ -170,16 +178,14 @@
 }
 .stzh-datamessagelist-item__heading-link {
   color: inherit;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   transition: color var(--stzh-base-transition-animation-speed);
   border-radius: var(--stzh-button-border-radius);
 }
 .stzh-datamessagelist-item__heading-link:hover, .stzh-datamessagelist-item__heading-link:focus {
   color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
 }
-.stzh-datamessagelist-item__heading-link::before {
-  transition: all var(--stzh-base-transition-animation-speed);
-}
 .stzh-datamessagelist-item__heading-link::before, .stzh-datamessagelist-item__heading-link::after {
   content: "";
   display: block;
@@ -189,6 +195,12 @@
   width: 100%;
   height: 100%;
 }
+.stzh-datamessagelist-item__heading-link::before {
+  transition: all var(--stzh-base-transition-animation-speed);
+}
+.stzh-datamessagelist-item__heading-link::after {
+  z-index: 1;
+}
 .stzh-datamessagelist-item__heading-link:hover::before, .stzh-datamessagelist-item__heading-link:focus::before {
   background-color: var(--stzh-color-primary4);
 }
@@ -307,10 +319,22 @@
     justify-content: center;
   }
 }
+.stzh-datamessagelist-item__action.is-non-interactive {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--stzh-form-input-tiny-height);
+  height: var(--stzh-form-input-tiny-height);
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
 .stzh-datamessagelist-item__action-popover {
   --width: auto;
   --min-width: 12.5rem;
 }
+.stzh-datamessagelist-item__action-popover-button {
+  position: relative;
+  z-index: 2;
+}
 .stzh-datamessagelist-item--is-unread .stzh-datamessagelist-item__heading-link {
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
 }

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

@@ -21,12 +21,18 @@ export class StzhDatamessagelistItem {
     this.heading = "";
     this.unread = false;
     this.href = "";
+    this.rel = undefined;
+    this.target = undefined;
     this.description = "";
-    this.externalHref = "";
+    this.icon = undefined;
     this.loadingStatus = undefined;
     this.meta = undefined;
     this.actions = undefined;
     this.tags = undefined;
+    this.external = false;
+  }
+  externalWatcher() {
+    this.external = this.rel && this.rel.includes("external");
   }
   loadingStatusWatcher(newValue) {
     if (typeof newValue === "string") {
@@ -65,6 +71,7 @@ export class StzhDatamessagelistItem {
     this.metaWatcher(this.meta);
     this.actionsWatcher(this.actions);
     this.tagsWatcher(this.tags);
+    this.externalWatcher();
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "datamessagelist-item");
     }
@@ -74,14 +81,15 @@ export class StzhDatamessagelistItem {
       "stzh-datamessagelist-item": true,
       "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.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, rel: this.rel, target: this.target, onClick: this.itemClick }, this.unread &&
       h("span", { class: "stzh-datamessagelist-item__vhidden" }, this.localization.unread, ","), this.heading)), this.description &&
       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 &&
-      h("stzh-button", { href: this.externalHref, variant: "tertiary", icon: "external-link", size: "tiny", iconOnly: true }), this._actions && this._actions.length > 0 &&
-      h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-datamessagelist-item__action-popover" }, h("stzh-button", { variant: "tertiary", size: "tiny", icon: "more-horizontal", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._actions.map((action) => h("stzh-menu-item", { icon: action.icon, badge: action.badge, onClick: (event) => { this.actionClick(action, event); } }, action.label))))))));
+      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._actions && this._actions.length > 0) ?
+      h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-datamessagelist-item__action-popover" }, h("stzh-button", { class: "stzh-datamessagelist-item__action-popover-button", variant: "tertiary", size: "tiny", icon: "more-horizontal", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._actions.map((action) => h("stzh-menu-item", { icon: action.icon, badge: action.badge, onClick: (event) => { this.actionClick(action, event); } }, action.label))))
+      :
+        h("div", { class: "stzh-datamessagelist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datamessagelist-item__action-icon", name: this.icon ? this.icon : (this.external ? "external-link" : "arrow-right") }))))));
   }
   static get is() { return "stzh-datamessagelist-item"; }
   static get encapsulation() { return "scoped"; }
@@ -171,6 +179,40 @@ export class StzhDatamessagelistItem {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rel (if href is used)"
+        },
+        "attribute": "rel",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target (if href is used)"
+        },
+        "attribute": "target",
+        "reflect": false
+      },
       "description": {
         "type": "string",
         "mutable": false,
@@ -189,7 +231,7 @@ export class StzhDatamessagelistItem {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "externalHref": {
+      "icon": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -201,11 +243,10 @@ export class StzhDatamessagelistItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "External href"
+          "text": "Icon (`arrow-right` by default or `external-link` if rel=\"*external*\" is used)"
         },
-        "attribute": "external-href",
-        "reflect": false,
-        "defaultValue": "\"\""
+        "attribute": "icon",
+        "reflect": false
       },
       "loadingStatus": {
         "type": "string",
@@ -297,6 +338,11 @@ export class StzhDatamessagelistItem {
       }
     };
   }
+  static get states() {
+    return {
+      "external": {}
+    };
+  }
   static get events() {
     return [{
         "method": "stzhClick",
@@ -343,6 +389,9 @@ export class StzhDatamessagelistItem {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "rel",
+        "methodName": "externalWatcher"
+      }, {
         "propName": "loadingStatus",
         "methodName": "loadingStatusWatcher"
       }, {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 stzh-datatable {
@@ -116,6 +118,8 @@ stzh-datatable *,
 stzh-datatable *::before,
 stzh-datatable *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
   --min-width: none;

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -7,6 +7,11 @@ import { createGlobalAdapter } from "../../utils/date-adapter";
  */
 export class StzhDatepicker {
   constructor() {
+    this.onRootFocus = () => {
+      if (this.input) {
+        this.input.setFocus();
+      }
+    };
     this.onInputChange = () => {
       const parsedDate = this.dateAdapter.parse(this.input.value, "inputdate");
       if (this.input.value === "" || parsedDate) {
@@ -116,7 +121,7 @@ export class StzhDatepicker {
       "stzh-datepicker": true,
       "stzh-datepicker--inline": this.inline
     };
-    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), this.inline &&
       h(Fragment, null, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))), !this.inline &&
       h("stzh-input", { label: this.label, ref: (el) => (this.input = el), noAutocomplete: true, onStzhChange: this.onInputChange, readonly: this.readonly, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, required: this.required, showMarker: this.showMarker, size: this.size }, h("stzh-popover", { ref: (el) => (this.popover = el), class: "stzh-datepicker__popover", slot: "button-right", placement: "bottom-end", label: this.label }, h("stzh-button", { variant: "input", "icon-only": true, icon: "calendar", disabled: this.disabled, a11yLabel: this.buttonLabel }), h("div", { slot: "content" }, h("stzh-calendar", { ref: (el) => (this.calendar = el), isDateDisabled: this.calendarIsDateDisabled, min: this.calendarMin, max: this.calendarMax, onStzhChange: this.onCalendarChange }), h("div", { class: "stzh-datepicker__actions" }, h("slot", { name: "action" }))))))));
   }

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host {

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

@@ -1,6 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { setPropsIfNull } from "../../utils/utils";
 import { fetchTranslations } from "../../utils/translation-utils";
+import { createBaseFocusTrapOptions } from "../../utils/overlay-utils";
 import { createFocusTrap } from 'focus-trap';
 const keyCode = {
   ESC: 27
@@ -136,10 +137,7 @@ export class StzhDialog {
     this.trap.updateContainerElements(this.element);
   }
   componentDidLoad() {
-    this.trap = createFocusTrap(this.element, {
-      fallbackFocus: this.dialogElement,
-      returnFocusOnDeactivate: true
-    });
+    this.trap = createFocusTrap(this.element, Object.assign({ fallbackFocus: this.dialogElement }, createBaseFocusTrapOptions()));
     if (this.open) {
       this.dialogShown();
     }

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 stzh-dropdown {
@@ -129,6 +131,8 @@ stzh-dropdown *,
 stzh-dropdown *::before,
 stzh-dropdown *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 stzh-dropdown[variant=plain] {
   --background-color: transparent;
@@ -281,7 +285,6 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
 }
 .stzh-dropdown .ts-control:hover, .stzh-dropdown .ts-control:focus-within {
   border-color: var(--hover-border-color);
-  outline: none;
 }
 .stzh-dropdown .ts-control > * {
   vertical-align: baseline;
@@ -443,7 +446,8 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
      -moz-appearance: none;
           appearance: none;
   font-family: inherit;
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   outline: none;
   border: none;
   padding: var(--stzh-space-xsmall) var(--stzh-space-medium);
@@ -614,7 +618,8 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   top: 50%;
   right: -0.0625rem;
   transform: translateY(-50%);
-  text-decoration: none;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 1.5rem;

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

@@ -31,6 +31,13 @@ let dropdownCounter = 0;
  */
 export class StzhDropdown {
   constructor() {
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.setFocus();
+      }
+      this.focusedByInput = false;
+    };
     this.options = undefined;
     this.optgroups = undefined;
     this.items = undefined;
@@ -352,6 +359,7 @@ export class StzhDropdown {
         });
       },
       onFocus: () => {
+        this.focusedByInput = true;
         if (this.tomSelect.load && this.preload === "focus") {
           // to be able to execute load function again, we reset loaded searches
           this.resetLoadedSearches();
@@ -370,7 +378,10 @@ export class StzhDropdown {
         });
         this.element.dispatchEvent(focusEvent);
         this.stzhFocus.emit({
-          component: "stzh-dropdown"
+          component: "stzh-dropdown",
+          originalEvent: {
+            target: this.tomSelect.control
+          }
         });
       },
       onBlur: () => {
@@ -440,7 +451,7 @@ export class StzhDropdown {
       [`stzh-dropdown--size-${this.size}`]: !!this.size,
       [`stzh-dropdown--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, h("slot", null)), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
+    return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { class: classes, ref: (el) => (this.rootElement = el) }, h("div", { class: "stzh-dropdown__field-wrapper" }, h("select", { id: this.dropdownId, class: "stzh-dropdown__select", ref: (el) => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-invalid": this.invalid ? "true" : "false", "aria-describedby": `${this.dropdownId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false" }, h("slot", null)), h("stzh-icon", { name: "angle-down", class: "stzh-dropdown__angle-icon" }), h("div", { class: "stzh-dropdown__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })
       :
         h("slot", { name: "icon" })), h("label", { class: "stzh-dropdown__label", htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), this.showMarker &&
@@ -1299,7 +1310,7 @@ export class StzhDropdown {
         },
         "complexType": {
           "original": "StzhDropdownFocusEvent",
-          "resolved": "{ component: \"stzh-dropdown\"; }",
+          "resolved": "{ component: \"stzh-dropdown\"; originalEvent: { target: Element; }; }",
           "references": {
             "StzhDropdownFocusEvent": {
               "location": "import",

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted(stzh-input),

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 :host ::slotted(*) {

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-flyingfocus {

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

@@ -55,7 +55,9 @@ export class StzhFlyingfocus {
     this.disableFloatingFocus();
   }
   handleFocus(e) {
-    let target = e.target;
+    var _a;
+    const detail = e.detail;
+    let target = (((_a = detail === null || detail === void 0 ? void 0 : detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target) || e.target);
     if (!this.container) {
       return;
     }
@@ -230,6 +232,12 @@ export class StzhFlyingfocus {
         "target": "document",
         "capture": true,
         "passive": false
+      }, {
+        "name": "stzhFocus",
+        "method": "handleFocus",
+        "target": "document",
+        "capture": true,
+        "passive": false
       }, {
         "name": "blur",
         "method": "handleBlur",

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

@@ -95,6 +95,8 @@
 :host *::before,
 :host *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 
 .stzh-footer {
@@ -118,6 +120,8 @@
 .stzh-footer *::before,
 .stzh-footer *::after {
   box-sizing: border-box;
+  text-underline-offset: var(--stzh-link-text-underline-offset);
+  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);
 }
 .stzh-footer [slot=logo],
 .stzh-footer [slot=logo] img {
@@ -132,7 +136,7 @@
 .stzh-footer stzh-link[slot=social-link],
 .stzh-footer stzh-link.stzh-footer__link {
   --color: var(--stzh-base-color);
-  --text-decoration: none;
+  --text-decoration-line: none;
   --icon-wrapper-height: auto;
   --icon-size: var(--stzh-icon-size-large);
 }