@oiz/stzh-components 2.10.0-beta → 2.10.0

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

@@ -18,57 +18,57 @@ const SUBTEMPLATE_CARD = `
 `
 
 const TEMPLATE = `
-  <stzh-container>
-    <stzh-vspace curve="big"></stzh-vspace>
-    <stzh-carousel>
-      <stzh-ratio slot="actions">
-        <stzh-hspace justify="end" items="end" size="none">
-          <stzh-show small>
-            <stzh-buttongroup>
-              <stzh-button
-                data-stzh-carousel-previous
-                variant="secondary"
-                size="small"
-                icon="angle-left"
-                label="Previous slide"
-                icon-only
-              ></stzh-button>
-              <stzh-button
-                data-stzh-carousel-next
-                variant="secondary"
-                size="small"
-                icon="angle-right"
-                label="Next slide"
-                icon-only
-              ></stzh-button>
-            </stzh-buttongroup>
-          </stzh-show>
-        </stzh-hspace>
-      </stzh-ratio>
+<stzh-container>
+  <stzh-vspace curve="big"></stzh-vspace>
+  <stzh-carousel>
+    <stzh-ratio slot="actions">
+      <stzh-hspace justify="end" items="end" size="none">
+        <stzh-show small>
+          <stzh-buttongroup>
+            <stzh-button
+              data-stzh-carousel-previous
+              variant="secondary"
+              size="small"
+              icon="angle-left"
+              label="Previous slide"
+              icon-only
+            ></stzh-button>
+            <stzh-button
+              data-stzh-carousel-next
+              variant="secondary"
+              size="small"
+              icon="angle-right"
+              label="Next slide"
+              icon-only
+            ></stzh-button>
+          </stzh-buttongroup>
+        </stzh-show>
+      </stzh-hspace>
+    </stzh-ratio>
 
-      <stzh-figure caption="Lorem ipsum">
-        <stzh-ratio>
-          <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
-        </stzh-ratio>
-      </stzh-figure>
-      <stzh-figure caption="Lorem ipsum">
-        <stzh-ratio>
-          <img src="media/images/example2.jpg" loading="lazy" alt="Example image" />
-        </stzh-ratio>
-      </stzh-figure>
-      <stzh-figure caption="Lorem ipsum">
-        <stzh-ratio>
-          <img src="media/images/example3.png" loading="lazy" alt="Example image" />
-        </stzh-ratio>
-      </stzh-figure>
-      <stzh-figure caption="Lorem ipsum">
-        <stzh-ratio>
-          <img src="media/images/example4.png" loading="lazy" alt="Example image" />
-        </stzh-ratio>
-      </stzh-figure>
-    </stzh-carousel>
-    <stzh-vspace curve="big"></stzh-vspace>
-  </stzh-container>
+    <stzh-figure caption="Lorem ipsum">
+      <stzh-ratio>
+        <img src="media/images/example.jpg" loading="lazy" alt="Example image" />
+      </stzh-ratio>
+    </stzh-figure>
+    <stzh-figure caption="Lorem ipsum">
+      <stzh-ratio>
+        <img src="media/images/example2.jpg" loading="lazy" alt="Example image" />
+      </stzh-ratio>
+    </stzh-figure>
+    <stzh-figure caption="Lorem ipsum">
+      <stzh-ratio>
+        <img src="media/images/example3.png" loading="lazy" alt="Example image" />
+      </stzh-ratio>
+    </stzh-figure>
+    <stzh-figure caption="Lorem ipsum">
+      <stzh-ratio>
+        <img src="media/images/example4.png" loading="lazy" alt="Example image" />
+      </stzh-ratio>
+    </stzh-figure>
+  </stzh-carousel>
+  <stzh-vspace curve="big"></stzh-vspace>
+</stzh-container>
 `
 
 const TEMPLATE_CARDS = `

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

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */
@@ -123,29 +126,18 @@
   flex-shrink: 0;
 }
 
-/* Justify self variants */
-:host([justify-self=start]) {
-  justify-self: flex-start;
-}
-
-:host([justify-self=end]) {
-  justify-self: flex-end;
-}
-
-:host([justify-self=center]) {
-  justify-self: center;
-}
-
-:host([justify-self=between]) {
-  justify-self: space-between;
+/* Align variants */
+:host([align=left]) {
+  margin-right: auto;
 }
 
-:host([justify-self=around]) {
-  justify-self: space-around;
+:host([align=right]) {
+  margin-left: auto;
 }
 
-:host([justify-self=evenly]) {
-  justify-self: space-evenly;
+:host([align=middle]) {
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /* Align self variants */

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

@@ -9,7 +9,7 @@ export class StzhCell {
     this.spanMedium = 0;
     this.spanLarge = 0;
     this.spanUltra = 0;
-    this.justifySelf = "auto";
+    this.align = "none";
     this.alignSelf = "auto";
   }
   render() {
@@ -121,29 +121,23 @@ export class StzhCell {
         "reflect": false,
         "defaultValue": "0"
       },
-      "justifySelf": {
+      "align": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Layout.JustifySelf",
-          "resolved": "\"around\" | \"auto\" | \"between\" | \"center\" | \"end\" | \"evenly\" | \"start\"",
-          "references": {
-            "Layout": {
-              "location": "import",
-              "path": "../../index",
-              "id": "src/index.ts::Layout"
-            }
-          }
+          "original": "\"none\" | \"left\" | \"right\" | \"middle\"",
+          "resolved": "\"left\" | \"middle\" | \"none\" | \"right\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controlling how cells are positioned along a container's main axis"
+          "text": "Controlling how cell is aligned in main axis (sets margin: auto to left/right side)"
         },
-        "attribute": "justify-self",
+        "attribute": "align",
         "reflect": true,
-        "defaultValue": "\"auto\""
+        "defaultValue": "\"none\""
       },
       "alignSelf": {
         "type": "string",

package/dist/collection/components/stzh-cell/stzh-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-cell.js","sourceRoot":"","sources":["../../../src/components/stzh-cell/stzh-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,QAAQ;;gBAEI,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;uBAG8B,MAAM;qBAGV,MAAM;;EAE7D,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,WAAW,EAAE,IAAI;SAClB;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justifySelf: Layout.JustifySelf = \"auto\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-cell.js","sourceRoot":"","sources":["../../../src/components/stzh-cell/stzh-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAIvB;;GAEG;AAMH,MAAM,OAAO,QAAQ;;gBAEI,EAAE;qBAEG,CAAC;sBAEA,CAAC;qBAEF,CAAC;qBAED,CAAC;iBAG0C,MAAM;qBAGtB,MAAM;;EAE7D,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,WAAW,EAAE,IAAI;SAClB;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -79,6 +79,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

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

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

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

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

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

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

package/dist/collection/components/stzh-chip-select/stzh-chip-select.css

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

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

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

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

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */

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

@@ -78,6 +78,9 @@
 /**
  * Container
  */
+/**
+ * Ratios
+ */
 /**
  * Spaces
  */
@@ -196,26 +199,40 @@
 }
 
 .stzh-container {
-  margin: 0 1.25rem;
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
 }
 @media screen and (min-width: 600px) {
   .stzh-container {
-    margin: 0 2rem;
+    margin-left: 2rem;
+    margin-right: 2rem;
   }
 }
 @media screen and (min-width: 1024px) {
   .stzh-container {
-    margin: 0 2.5rem;
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
   }
 }
 @media screen and (min-width: 1260px) {
   .stzh-container {
-    margin: 0 5.5rem;
+    margin-left: 5.5rem;
+    margin-right: 5.5rem;
   }
 }
 @media screen and (min-width: 1440px) {
   .stzh-container {
-    margin: 0 auto;
+    margin-left: auto;
+    margin-right: auto;
     width: 78.75rem;
   }
+}
+@media screen and (min-width: 1440px) {
+  .stzh-container--size-big {
+    width: 90rem;
+  }
+}
+.stzh-container--has-no-margin {
+  margin-left: auto;
+  margin-right: auto;
 }

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

@@ -1,10 +1,19 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 /**
  * @slot - Slot for any content
  */
 export class StzhContainer {
+  constructor() {
+    this.size = "default";
+    this.noMargin = false;
+  }
   render() {
-    return (h(Host, null, h("div", { class: "stzh-container" }, h("slot", null))));
+    const classes = {
+      "stzh-container": true,
+      "stzh-container--has-no-margin": this.noMargin,
+      [`stzh-container--size-${this.size}`]: !!this.size,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("slot", null))));
   }
   static get is() { return "stzh-container"; }
   static get encapsulation() { return "scoped"; }
@@ -18,5 +27,45 @@ export class StzhContainer {
       "$": ["stzh-container.css"]
     };
   }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"big\"",
+          "resolved": "\"big\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether to prevent side margins"
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
 }
 //# sourceMappingURL=stzh-container.js.map

package/dist/collection/components/stzh-container/stzh-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-container.js","sourceRoot":"","sources":["../../../src/components/stzh-container/stzh-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACF,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,aAAa;EACxB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,gBAAgB;QACzB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true\n})\nexport class StzhContainer {\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-container.js","sourceRoot":"","sources":["../../../src/components/stzh-container/stzh-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,aAAa;;gBAEU,SAAS;oBAGf,KAAK;;EAEjC,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,gBAAgB,EAAE,IAAI;MACtB,+BAA+B,EAAE,IAAI,CAAC,QAAQ;MAC9C,CAAC,wBAAwB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;KACnD,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-container\",\n  styleUrl: \"stzh-container.scss\",\n  scoped: true\n})\nexport class StzhContainer {\n  /** Size variant */\n  @Prop() size: \"default\" | \"big\" = \"default\";\n\n  /** Whether to prevent side margins */\n  @Prop() noMargin: boolean = false;\n\n  render() {\n    const classes = {\n      \"stzh-container\": true,\n      \"stzh-container--has-no-margin\": this.noMargin,\n      [`stzh-container--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}