@oiz/stzh-components 2.2.0 → 2.3.0-alpha

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

@@ -22,17 +22,29 @@ export class StzhDatalistItem {
     this.target = undefined;
     this.download = undefined;
     this.icon = undefined;
-    this.label = undefined;
-    this.value = undefined;
-    this.meta = undefined;
+    this.label = "";
+    this.value = "";
+    this.meta = "";
     this.hideBorder = false;
     this.a11yExpanded = undefined;
     this.a11yControls = undefined;
   }
   renderInner(isButton) {
     const Item = isButton ? "button" : (this.href ? "a" : "div");
-    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__label", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: "stzh-datalist-item__value", href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__meta", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.meta)));
+    return (h(Fragment, null, h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__label": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.label), h(Item, { class: {
+        "stzh-datalist-item__value": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download, "aria-label": `${this.label}, ${this.value}, ${this.meta}`, "aria-controls": this.a11yControls, "aria-expanded": typeof this.a11yExpanded !== "undefined"
+        ? (this.a11yExpanded ? "true" : "false") : null }, this.value), h(Item, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__meta": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.meta)));
   }
   async connectedCallback() {
     this.datalist = this.element.closest("stzh-datalist");
@@ -66,13 +78,20 @@ export class StzhDatalistItem {
     return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.direction === "horizontal" ?
       this.renderInner(isButton)
       :
-        h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton)), h(Action, { "aria-hidden": "true", tabindex: "-1", class: "stzh-datalist-item__action-list", href: this.href, rel: this.rel, target: this.target, download: this.download }, this.href &&
+        h("div", { class: "stzh-datalist-item__wrapper" }, this.renderInner(isButton)), h(Action, { "aria-hidden": "true", tabindex: "-1", class: {
+        "stzh-datalist-item__action-list": true,
+        "is-button": isButton,
+        "is-link": !!this.href
+      }, href: this.href, rel: this.rel, target: this.target, download: this.download }, this.href &&
       (this.download ?
-        h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" })
+        h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon", name: this.icon ? this.icon : "download" }))
         :
-          h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
-      h(Fragment, null, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
-      h("stzh-button", { class: "stzh-datalist-item__action", variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
+          h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-internal", name: this.icon ? this.icon : "arrow-right" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-external", name: this.icon ? this.icon : "external-link" }))), isButton &&
+      h("div", { class: "stzh-datalist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datalist-item__icon is-closed", name: this.icon ? this.icon : "plus" }), h("stzh-icon", { class: "stzh-datalist-item__icon is-open", name: this.icon ? this.icon : "minus" })), !this.href && this.icon &&
+      h("stzh-button", { class: {
+          "stzh-datalist-item__action": true,
+          "is-button": true
+        }, variant: "tertiary", size: "tiny", "aria-label": this.value, iconOnly: true, icon: this.icon, onClick: this.actionClick }))), h("div", { class: "stzh-datalist-item__nested" }, h("div", { class: "stzh-datalist-item__nested-inner" }, h("slot", null)))));
   }
   static get is() { return "stzh-datalist-item"; }
   static get encapsulation() { return "scoped"; }
@@ -206,7 +225,8 @@ export class StzhDatalistItem {
           "text": "Label"
         },
         "attribute": "label",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "value": {
         "type": "string",
@@ -223,7 +243,8 @@ export class StzhDatalistItem {
           "text": "Value"
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "meta": {
         "type": "string",
@@ -240,7 +261,8 @@ export class StzhDatalistItem {
           "text": "Meta"
         },
         "attribute": "meta",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "hideBorder": {
         "type": "boolean",

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

@@ -117,6 +117,9 @@ stzh-datatable *::before,
 stzh-datatable *::after {
   box-sizing: border-box;
 }
+stzh-datatable[disable-min-width]:not([disable-min-width=false]) {
+  --min-width: none;
+}
 
 .stzh-datatable {
   /* Has sorted */

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { Document } from 'flexsearch';
+import { Document } from 'flexsearch/dist/flexsearch.bundle.js';
 import { fetchTranslations } from "../../utils/translation-utils";
 /**
  *
@@ -54,6 +54,7 @@ export class StzhDatatable {
     this.sortDirection = "asc";
     this.tokenize = "forward";
     this.idField = "id";
+    this.disableMinWidth = false;
     this.rows = [];
     this.columns = [];
     this.query = "";
@@ -314,6 +315,24 @@ export class StzhDatatable {
         "reflect": false,
         "defaultValue": "\"id\""
       },
+      "disableMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to disable min-width of table"
+        },
+        "attribute": "disable-min-width",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "rows": {
         "type": "string",
         "mutable": false,

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

@@ -7,12 +7,13 @@ import TomSelectRemoveButton from "tom-select/dist/js/plugins/remove_button.js";
 import TomSelectCheckboxOptions from "tom-select/dist/js/plugins/checkbox_options.js";
 import TomSelectInputAutogrow from "tom-select/dist/js/plugins/input_autogrow.js";
 import TomSelectNoBackspaceDelete from "tom-select/dist/js/plugins/no_backspace_delete.js";
-const TomSelectInputHide = function (_plugin_options) {
-  // const self = this;
-  // self.on("initialize", () => {
-  //   const input = self.control_input as HTMLInputElement;
-  //   if (input) input.disabled = true;
-  // })
+const TomSelectInputReadonly = function (_plugin_options) {
+  const self = this;
+  self.on("initialize", () => {
+    const input = self.control_input;
+    if (input)
+      input.readOnly = true;
+  });
 };
 const CLASS_FILLED = "stzh-dropdown--is-filled";
 const CLASS_FOCUS = "stzh-dropdown--has-focus";
@@ -20,7 +21,7 @@ TomSelect.define("remove_button", TomSelectRemoveButton);
 TomSelect.define("checkbox_options", TomSelectCheckboxOptions);
 TomSelect.define("input_autogrow", TomSelectInputAutogrow);
 TomSelect.define("no_backspace_delete", TomSelectNoBackspaceDelete);
-TomSelect.define("input_hide", TomSelectInputHide);
+TomSelect.define("input_readonly", TomSelectInputReadonly);
 let dropdownCounter = 0;
 /**
  * @slot label - Slot for label content
@@ -182,7 +183,7 @@ export class StzhDropdown {
     }
     const plugins = {};
     if (this.noSearch) {
-      plugins["input_hide"] = {};
+      plugins["input_readonly"] = {};
     }
     else {
       plugins["input_autogrow"] = {};

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

@@ -120,6 +120,7 @@
   margin: 0;
   padding: 0;
   border: none;
+  min-inline-size: auto;
 }
 .stzh-fieldset__legend {
   font-family: var(--stzh-font-family-title);

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

@@ -98,14 +98,18 @@
 }
 
 :host ::slotted(*) {
-  width: 100%;
   max-width: 100%;
 }
 
+:host([fullwidth]:not([fullwidth=false])) ::slotted(*) {
+  width: 100%;
+}
+
 .stzh-figure {
   display: flex;
   flex-direction: column;
   margin: 0;
+  /* Has caption content */
 }
 .stzh-figure__element {
   display: flex;
@@ -113,7 +117,6 @@
 .stzh-figure__caption {
   font-size: var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));
   line-height: var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));
-  margin-top: var(--stzh-space-small);
 }
 @media screen and (min-width: 1024px) {
   .stzh-figure__caption {
@@ -121,9 +124,6 @@
     line-height: var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height));
   }
 }
-.stzh-figure__caption:empty {
-  display: none;
-}
 .stzh-figure__copyright {
   font-family: var(--stzh-font-family-medium);
   font-weight: var(--stzh-font-weight-medium);
@@ -134,4 +134,7 @@
 }
 .stzh-figure__copyright:not(:empty) {
   margin-left: var(--stzh-space-xxsmall);
+}
+.stzh-figure--has-caption-or-copyright .stzh-figure__caption {
+  margin-top: var(--stzh-space-small);
 }

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

@@ -9,12 +9,14 @@ export class StzhFigure {
   constructor() {
     this.caption = "";
     this.copyright = "";
+    this.fullwidth = true;
   }
   render() {
     const captionSlotUsed = hasSlot(this.element, 'caption');
+    const copyrightSlotUsed = hasSlot(this.element, 'copyright');
     const classes = {
       "stzh-figure": true,
-      "stzh-figure--has-caption": captionSlotUsed
+      "stzh-figure--has-caption-or-copyright": !!this.caption || !!this.copyright || captionSlotUsed || copyrightSlotUsed
     };
     return (h(Host, null, h("figure", { class: classes }, h("div", { class: "stzh-figure__element" }, h("slot", null)), h("figcaption", { class: "stzh-figure__caption" }, this.caption ? this.caption : h("slot", { name: "caption" }), h("span", { class: "stzh-figure__copyright" }, this.copyright ? this.copyright : h("slot", { name: "copyright" }))))));
   }
@@ -67,6 +69,24 @@ export class StzhFigure {
         "attribute": "copyright",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "fullwidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to stretch slotted content to fullwidth"
+        },
+        "attribute": "fullwidth",
+        "reflect": true,
+        "defaultValue": "true"
       }
     };
   }

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

@@ -121,6 +121,7 @@
 }
 .stzh-footer [slot=logo],
 .stzh-footer [slot=logo] img {
+  display: block;
   height: 2.375rem;
 }
 .stzh-footer [slot=info] {

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

@@ -99,6 +99,12 @@
 
 :host {
   --stzh-flyingfocus-color: var(--stzh-base-invert-color);
+  --stzh-base-color: var(--stzh-base-invert-color);
+  --stzh-base-lead-color: var(--stzh-base-invert-color);
+  --stzh-base-border-color: var(--stzh-base-invert-color);
+  --stzh-heading-color: var(--stzh-base-invert-color);
+  --stzh-link-color: var(--stzh-base-invert-color);
+  --stzh-link-hover-color: var(--stzh-base-invert-color);
   --background-color: var(--stzh-color-error);
   --color: var(--stzh-base-invert-color);
   --close-color: var(--stzh-base-invert-color);
@@ -112,7 +118,12 @@
 :host ::slotted(stzh-button[slot=button]) {
   --stzh-base-invert-color: var(--button-color);
 }
-:host ::slotted(stzh-button[slot=button])[variant=secondary] {
+:host ::slotted(stzh-button[slot=button])[variant=default]:not([disabled]) {
+  --color: var(--button-hover-color);
+  --background-color: var(--stzh-base-invert-color);
+  --border-color: var(--stzh-base-invert-color);
+}
+:host ::slotted(stzh-button[slot=button])[variant=secondary]:not([disabled]) {
   --color: var(--stzh-base-invert-color);
   --background-color: transparent;
   --border-color: var(--stzh-base-invert-color);

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

@@ -164,6 +164,7 @@
 .header {
   /* Hide logo */
   /* Has empty metabar */
+  /* Has empty metabar */
   /* Metabar Stay */
   /* Sticky metabar */
   /* Sticky variant */
@@ -379,10 +380,13 @@
   opacity: 0;
 }
 @media screen and (max-width: 799px) {
-  .header--has-empty-metabar .header__metabar {
+  .header--has-empty-metabar-mobile .header__metabar {
     display: none;
   }
 }
+.header--has-empty-metabar .header__metabar {
+  display: none;
+}
 @media screen and (max-width: 799px) {
   .header--has-metabar-stay .header__metabar-langnav {
     display: inline-flex;

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

@@ -143,10 +143,10 @@ export class StzhHeader {
     this.appnavPlaceholderElement.parentElement.removeChild(this.appnavPlaceholderElement);
   }
   render() {
-    // const navSlotUsed: boolean = hasSlot(this.element, "nav");
+    const navSlotUsed = hasSlot(this.element, "nav");
     const loginSlotUsed = hasSlot(this.element, "login");
     const appnavSlotUsed = hasSlot(this.element, "appnav");
-    // const langNavSlotUsed = hasSlot(this.element, "langnav");
+    const langNavSlotUsed = hasSlot(this.element, "langnav");
     const classes = {
       "header": true,
       "header--is-sticky-disabled": this.stickyDisabled,
@@ -156,7 +156,8 @@ export class StzhHeader {
       "header--sticky-metabar": this.stickyMetabar,
       "header--sticky-metabar-end": this.stickyMetabarEnd,
       "header--has-metabar-stay": this.metabarStay,
-      "header--has-empty-metabar": !loginSlotUsed,
+      "header--has-empty-metabar-mobile": !loginSlotUsed,
+      "header--has-empty-metabar": !loginSlotUsed && !langNavSlotUsed && !navSlotUsed,
       "header--has-appnav": appnavSlotUsed
     };
     return (h(Host, null, h("div", { style: { paddingTop: `${this.paddingTop}px` }, class: classes }, h("div", { class: "header__inner", ref: (el) => (this.innerElement = el) }, h("div", { class: "header__main", ref: (el) => (this.mainElement = el) }, h("div", { class: "header__logobar", ref: (el) => (this.logobarElement = el) }, h("div", { class: "header__logobar-logo" }, h("a", { href: this.href, class: "header__logo-link" }, h("slot", { name: "logo" })))), h("div", { class: "header__metabar", style: { transform: this.metabarTransform }, ref: (el) => (this.metabarElement = el) }, h("div", { class: "header__metabar-inner" }, h("div", { class: "header__metabar-nav" }, h("slot", { name: "nav" })), h("div", { class: "header__metabar-login" }, h("slot", { name: "login" })), h("div", { class: "header__metabar-langnav" }, h("slot", { name: "langnav" }))))), h("div", { class: "header__appnav", ref: (el) => (this.appnavElement = el) }, h("div", { class: "header__appnav-inner" }, h("slot", { name: "appnav" })))))));

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

@@ -3,9 +3,9 @@ import readme from './readme.md';
 import { withDesign } from 'storybook-addon-designs';
 import { getFigmaLink } from '../../../figma';
 
-import { Default as Metanav } from '../stzh-metanav/stzh-metanav.stories';
-import { Default as Menu } from '../stzh-menu/stzh-menu.stories';
-import { Default as Langnav } from '../stzh-langnav/stzh-langnav.stories';
+import { Default as Metanav_Default } from '../stzh-metanav/stzh-metanav.stories';
+import { Default as Menu_Default } from '../stzh-menu/stzh-menu.stories';
+import { Default as Langnav_Default } from '../stzh-langnav/stzh-langnav.stories';
 
 export default {
   title: 'Components/Header',
@@ -32,8 +32,8 @@ export default {
   ]
 };
 
-const Popover = () => (
-  <stzh-popover label="My Account" placement="bottom-end">
+const Popover = (args) => (
+  <stzh-popover label="My Account" placement="bottom-end" {...args}>
     <stzh-button
       fullwidth
       text-align="space-between"
@@ -44,7 +44,7 @@ const Popover = () => (
       Full Name
     </stzh-button>
     <div slot="content">
-      <Menu></Menu>
+      {Menu_Default({})}
     </div>
     <stzh-button slot="action" variant="secondary" size="small">
       Logout
@@ -52,19 +52,20 @@ const Popover = () => (
   </stzh-popover>
 );
 
-const Logo = () => (
+const Logo = (args) => (
   <img
     src="media/logo/stzh-default.svg"
     alt="Logo City Zürich, go to homepage"
+    {...args}
   ></img>
 );
 
 const Header = (args) => (
   <stzh-header {...args}>
-    <Metanav slot="nav"></Metanav>
-    <Popover slot="login"></Popover>
-    <Logo slot="logo"></Logo>
-    <Langnav slot="langnav" {...Langnav.args}></Langnav>
+    {Metanav_Default({ ...Metanav_Default.args, slot: 'nav' })}
+    {Popover({ slot: 'login' })}
+    {Logo({ slot: 'logo' })}
+    {Langnav_Default({ ...Langnav_Default.args, slot: 'langnav' })}
   </stzh-header>
 );
 
@@ -102,24 +103,22 @@ const DummyText = () => (
 
 const Template = (args) => (
   <div>
-    <Header {...args}></Header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
+    {Header(args)}
+    {!args._hideText && (
+      <stzh-container>
+        <DummyText></DummyText>
+      </stzh-container>
+    )}
   </div>
 );
 
-const TemplateWithoutDummyText = (args) => (
-  <Header {...args}></Header>
-);
-
 const TemplateWithAppNavigation = (args) => (
   <div>
     <stzh-header {...args}>
-      <Metanav slot="nav"></Metanav>
-      <Popover slot="login"></Popover>
-      <Logo slot="logo"></Logo>
-      <Langnav slot="langnav" {...Langnav.args}></Langnav>
+      {Metanav_Default({ ...Metanav_Default.args, slot: 'nav' })}
+      {Popover({ slot: 'login' })}
+      {Logo({ slot: 'logo' })}
+      {Langnav_Default({ ...Langnav_Default.args, slot: 'langnav' })}
 
       <stzh-appnav slot="appnav" app-title="My Account" status="Preview" href="#">
         <stzh-link href="#" icon="services">
@@ -136,39 +135,47 @@ const TemplateWithAppNavigation = (args) => (
         </stzh-link>
       </stzh-appnav>
     </stzh-header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
+    {!args._hideText && (
+      <stzh-container>
+        <DummyText></DummyText>
+      </stzh-container>
+    )}
   </div>
 );
 
 const TemplateNestedInCointainer = (args) => (
   <stzh-container>
-    <Header {...args}></Header>
-    <DummyText></DummyText>
+    {Header(args)}
+    {!args._hideText && (
+      <DummyText></DummyText>
+    )}
   </stzh-container>
 );
 
 const TemplateWithEmptyNav = (args) => (
   <div>
     <stzh-header {...args}>
-      <Logo slot="logo"></Logo>
+      {Logo({ slot: 'logo' })}
     </stzh-header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
+    {!args._hideText && (
+      <stzh-container>
+        <DummyText></DummyText>
+      </stzh-container>
+    )}
   </div>
 );
 
 const TemplateOnlyLangnav = (args) => (
   <div>
     <stzh-header {...args}>
-      <Logo slot="logo"></Logo>
-      <Langnav slot="langnav" {...Langnav.args}></Langnav>
+      {Logo({ slot: 'logo' })}
+      {Langnav_Default({ ...Langnav_Default.args, slot: 'langnav' })}
     </stzh-header>
-    <stzh-container>
-      <DummyText></DummyText>
-    </stzh-container>
+    {!args._hideText && (
+      <stzh-container>
+        <DummyText></DummyText>
+      </stzh-container>
+    )}
   </div>
 );
 
@@ -176,8 +183,9 @@ export const Default = Template.bind({});
 Default.args = {
 };
 
-export const WithoutScrollbar = TemplateWithoutDummyText.bind({});
+export const WithoutScrollbar = Template.bind({});
 WithoutScrollbar.args = {
+  _hideText: true
 };
 
 export const WithAppNavigation = TemplateWithAppNavigation.bind({});