@oiz/stzh-components 1.4.0-npmjstest → 2.0.0-beta

package/dist/collection/components/stzh-portal-mitwirken/stzh-portal-mitwirken.css

@@ -645,16 +645,9 @@ the .has-focus class is used by the focus target */
 }
 
 .stzh-theme-ma {
-  background-color: var(--stzh-color-grey5);
+  --stzh-section-highlight-background-color: var(--stzh-color-white);
 
-  /* overwrite p1 and p2 font curves to be always the same size */
-  --stzh-font-curve-p1-medium-font-size: var(--stzh-font-milli-font-size);
-  --stzh-font-curve-p1-medium-text-line-height: var(--stzh-font-milli-text-line-height);
-  --stzh-font-curve-p1-medium-heading-line-height: var(--stzh-font-milli-heading-line-height);
-  --stzh-font-curve-p2-medium-font-size: var(--stzh-font-micro-font-size);
-  --stzh-font-curve-p2-medium-text-line-height: var(--stzh-font-micro-text-line-height);
-  --stzh-font-curve-p2-medium-heading-line-height: var(--stzh-font-micro-heading-line-height);
-  --stzh-font-curve-p2-medium-heading-letter-spacing: var(--stzh-font-micro-heading-letter-spacing);
+  background-color: var(--stzh-color-grey5);
 }
 
 :host {
@@ -747,6 +740,7 @@ main {
   /* Lists */
   /* Figure */
   /* Blockquote */
+  /* Table */
   /* Links */
   /* Process Header */
   /* Links */
@@ -1336,6 +1330,150 @@ main blockquote footer::before {
   display: inline-block;
   margin-right: var(--stzh-space-xxxsmall);
 }
+main table {
+  --min-width: none;
+  --cell-padding: var(--stzh-table-cell-padding);
+  width: 100%;
+  border-spacing: 0;
+  min-width: var(--min-width);
+}
+main thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+main tr:hover td,
+main tr:hover th {
+  background-color: var(--stzh-color-grey5);
+}
+main td,
+main th {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  text-align: left;
+  border: none;
+  vertical-align: top;
+  border: none;
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+  background-color: var(--stzh-color-white);
+  transition: background-color var(--stzh-base-transition-animation-speed);
+  padding: var(--cell-padding);
+  /* Horizontal alignment */
+  /* Vertical alignment */
+  /* Nowrap */
+  /* Sticky */
+}
+main td a,
+main th a {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+main td a:hover, main td a:focus,
+main th a:hover,
+main th a:focus {
+  color: var(--stzh-link-hover-color);
+}
+main td b, main td strong,
+main th b,
+main th strong {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+}
+main td i, main td em,
+main th i,
+main th em {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+main td.align-left,
+main th.align-left {
+  text-align: left;
+}
+main td.align-right,
+main th.align-right {
+  text-align: right;
+}
+main td.align-center,
+main th.align-center {
+  text-align: center;
+}
+main td.valign-auto,
+main th.valign-auto {
+  vertical-align: auto;
+}
+main td.valign-middle,
+main th.valign-middle {
+  vertical-align: middle;
+}
+main td.valign-bottom,
+main th.valign-bottom {
+  vertical-align: bottom;
+}
+main td.nowrap,
+main th.nowrap {
+  white-space: nowrap;
+}
+main td.is-sticky-left, main td.is-sticky-right,
+main th.is-sticky-left,
+main th.is-sticky-right {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+}
+main td.has-sticked,
+main th.has-sticked {
+  z-index: 2;
+}
+main td.is-sticky-left,
+main th.is-sticky-left {
+  left: 0;
+}
+main td.is-sticky-right,
+main th.is-sticky-right {
+  right: 0;
+}
+main td.is-sticky-left::after, main td.is-sticky-right::after,
+main th.is-sticky-left::after,
+main th.is-sticky-right::after {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0.375rem;
+  transform: translate(100%);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+main td.is-sticky-left::after,
+main th.is-sticky-left::after {
+  right: 0;
+}
+main td.is-sticky-right::after,
+main th.is-sticky-right::after {
+  left: 0;
+  transform: rotate(-180deg) translate(100%);
+}
+main td.has-sticked.is-sticky-left::after, main td.has-sticked.is-sticky-right::after,
+main th.has-sticked.is-sticky-left::after,
+main th.has-sticked.is-sticky-right::after {
+  opacity: 1;
+}
+main th {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+main th.is-sortable {
+  padding: 0;
+}
 main a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);
@@ -2644,6 +2782,7 @@ main .ql-editor {
   /* Lists */
   /* Figure */
   /* Blockquote */
+  /* Table */
   /* Links */
 }
 main .ql-editor h1, main .ql-editor h2, main .ql-editor h3, main .ql-editor h4 {
@@ -3210,6 +3349,150 @@ main .ql-editor blockquote footer::before {
   display: inline-block;
   margin-right: var(--stzh-space-xxxsmall);
 }
+main .ql-editor table {
+  --min-width: none;
+  --cell-padding: var(--stzh-table-cell-padding);
+  width: 100%;
+  border-spacing: 0;
+  min-width: var(--min-width);
+}
+main .ql-editor thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+main .ql-editor tr:hover td,
+main .ql-editor tr:hover th {
+  background-color: var(--stzh-color-grey5);
+}
+main .ql-editor td,
+main .ql-editor th {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  text-align: left;
+  border: none;
+  vertical-align: top;
+  border: none;
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+  background-color: var(--stzh-color-white);
+  transition: background-color var(--stzh-base-transition-animation-speed);
+  padding: var(--cell-padding);
+  /* Horizontal alignment */
+  /* Vertical alignment */
+  /* Nowrap */
+  /* Sticky */
+}
+main .ql-editor td a,
+main .ql-editor th a {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+main .ql-editor td a:hover, main .ql-editor td a:focus,
+main .ql-editor th a:hover,
+main .ql-editor th a:focus {
+  color: var(--stzh-link-hover-color);
+}
+main .ql-editor td b, main .ql-editor td strong,
+main .ql-editor th b,
+main .ql-editor th strong {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+}
+main .ql-editor td i, main .ql-editor td em,
+main .ql-editor th i,
+main .ql-editor th em {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+main .ql-editor td.align-left,
+main .ql-editor th.align-left {
+  text-align: left;
+}
+main .ql-editor td.align-right,
+main .ql-editor th.align-right {
+  text-align: right;
+}
+main .ql-editor td.align-center,
+main .ql-editor th.align-center {
+  text-align: center;
+}
+main .ql-editor td.valign-auto,
+main .ql-editor th.valign-auto {
+  vertical-align: auto;
+}
+main .ql-editor td.valign-middle,
+main .ql-editor th.valign-middle {
+  vertical-align: middle;
+}
+main .ql-editor td.valign-bottom,
+main .ql-editor th.valign-bottom {
+  vertical-align: bottom;
+}
+main .ql-editor td.nowrap,
+main .ql-editor th.nowrap {
+  white-space: nowrap;
+}
+main .ql-editor td.is-sticky-left, main .ql-editor td.is-sticky-right,
+main .ql-editor th.is-sticky-left,
+main .ql-editor th.is-sticky-right {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+}
+main .ql-editor td.has-sticked,
+main .ql-editor th.has-sticked {
+  z-index: 2;
+}
+main .ql-editor td.is-sticky-left,
+main .ql-editor th.is-sticky-left {
+  left: 0;
+}
+main .ql-editor td.is-sticky-right,
+main .ql-editor th.is-sticky-right {
+  right: 0;
+}
+main .ql-editor td.is-sticky-left::after, main .ql-editor td.is-sticky-right::after,
+main .ql-editor th.is-sticky-left::after,
+main .ql-editor th.is-sticky-right::after {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0.375rem;
+  transform: translate(100%);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+main .ql-editor td.is-sticky-left::after,
+main .ql-editor th.is-sticky-left::after {
+  right: 0;
+}
+main .ql-editor td.is-sticky-right::after,
+main .ql-editor th.is-sticky-right::after {
+  left: 0;
+  transform: rotate(-180deg) translate(100%);
+}
+main .ql-editor td.has-sticked.is-sticky-left::after, main .ql-editor td.has-sticked.is-sticky-right::after,
+main .ql-editor th.has-sticked.is-sticky-left::after,
+main .ql-editor th.has-sticked.is-sticky-right::after {
+  opacity: 1;
+}
+main .ql-editor th {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+main .ql-editor th.is-sortable {
+  padding: 0;
+}
 main .ql-editor a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);

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

@@ -219,8 +219,8 @@
 .stzh-radio__check {
   background-color: currentColor;
   color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  width: 0.375rem;
-  height: 0.375rem;
+  width: 0.5rem;
+  height: 0.5rem;
   border-radius: 50%;
   opacity: 0;
 }

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

@@ -3,9 +3,10 @@ import { hasSlot } from "../../utils/utils";
 import { camelCase } from "../../utils/string-utils";
 import { fetchTranslations } from "../../utils/translation-utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
+const SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';
 let radiogroupCounter = 0;
 /**
- * @slot - Slot for `stzh-radio` elements
+ * @slot - Slot for `stzh-radio`, `stzh-button[type="radio"]` or `stzh-card` elements
  * @slot description - Slot for description
  * @slot description-long - Slot for long description (in popover)
  * @slot error - Slot for error
@@ -32,7 +33,7 @@ export class StzhRadiogroup {
     this.preventUpdateProperties = [];
     this.init = () => {
       // update radios
-      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
+      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
       this.updateRadiosProperty("show-marker", false);
       this.updateRadiosProperty("a11y-describedby", `${this.radiogroupId}-description`);
       this.watchValue(this.value);
@@ -84,9 +85,7 @@ export class StzhRadiogroup {
   }
   updateRadiosProperty(prop, value) {
     this.radios.forEach((radio) => {
-      if (prop === "name"
-        || (this.preventUpdateProperties.indexOf(prop) === -1
-          && radio.getAttribute(prop) === null)) {
+      if (prop === "name" || (this.preventUpdateProperties.indexOf(prop) === -1)) {
         radio[camelCase(prop)] = value;
       }
     });
@@ -121,7 +120,7 @@ export class StzhRadiogroup {
   }
   connectedCallback() {
     if (!this.value) {
-      this.radios = Array.from(this.element.querySelectorAll("stzh-radio"));
+      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));
       // try to find a checkbox that might has checked set to true
       const checkedRadio = this.radios.find(radio => radio.checked);
       if (checkedRadio) {

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

@@ -7,6 +7,9 @@ export default {
   title: 'Components/Radiogroup',
   component: 'stzh-radiogroup',
   parameters: {
+    actions: {
+      handles: ['stzhChange', 'stzhFocus', 'stzhBlur']
+    },
     docs: {
       description: {
         component: readme

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

@@ -102,6 +102,7 @@
   /* Lists */
   /* Figure */
   /* Blockquote */
+  /* Table */
   /* Links */
 }
 :host ::slotted(*) h1, :host ::slotted(*) h2, :host ::slotted(*) h3, :host ::slotted(*) h4 {
@@ -699,6 +700,150 @@
   display: inline-block;
   margin-right: var(--stzh-space-xxxsmall);
 }
+:host ::slotted(*) table {
+  --min-width: none;
+  --cell-padding: var(--stzh-table-cell-padding);
+  width: 100%;
+  border-spacing: 0;
+  min-width: var(--min-width);
+}
+:host ::slotted(*) thead {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+:host ::slotted(*) tr:hover td,
+:host ::slotted(*) tr:hover th {
+  background-color: var(--stzh-color-grey5);
+}
+:host ::slotted(*) td,
+:host ::slotted(*) th {
+  font-size: var(--stzh-font-milli-font-size);
+  line-height: var(--stzh-font-milli-text-line-height);
+  letter-spacing: var(--stzh-font-curve---text-letter-spacing);
+  text-align: left;
+  border: none;
+  vertical-align: top;
+  border: none;
+  border-bottom: 0.0625rem solid var(--stzh-base-border-color);
+  background-color: var(--stzh-color-white);
+  transition: background-color var(--stzh-base-transition-animation-speed);
+  padding: var(--cell-padding);
+  /* Horizontal alignment */
+  /* Vertical alignment */
+  /* Nowrap */
+  /* Sticky */
+}
+:host ::slotted(*) td a,
+:host ::slotted(*) th a {
+  color: var(--stzh-link-color);
+  transition: color var(--stzh-base-transition-animation-speed);
+  border-radius: var(--stzh-button-border-radius);
+}
+:host ::slotted(*) td a:hover, :host ::slotted(*) td a:focus,
+:host ::slotted(*) th a:hover,
+:host ::slotted(*) th a:focus {
+  color: var(--stzh-link-hover-color);
+}
+:host ::slotted(*) td b, :host ::slotted(*) td strong,
+:host ::slotted(*) th b,
+:host ::slotted(*) th strong {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+}
+:host ::slotted(*) td i, :host ::slotted(*) td em,
+:host ::slotted(*) th i,
+:host ::slotted(*) th em {
+  font-family: var(--stzh-font-family-regular);
+  font-weight: var(--stzh-font-weight-regular);
+  font-style: normal;
+}
+:host ::slotted(*) td.align-left,
+:host ::slotted(*) th.align-left {
+  text-align: left;
+}
+:host ::slotted(*) td.align-right,
+:host ::slotted(*) th.align-right {
+  text-align: right;
+}
+:host ::slotted(*) td.align-center,
+:host ::slotted(*) th.align-center {
+  text-align: center;
+}
+:host ::slotted(*) td.valign-auto,
+:host ::slotted(*) th.valign-auto {
+  vertical-align: auto;
+}
+:host ::slotted(*) td.valign-middle,
+:host ::slotted(*) th.valign-middle {
+  vertical-align: middle;
+}
+:host ::slotted(*) td.valign-bottom,
+:host ::slotted(*) th.valign-bottom {
+  vertical-align: bottom;
+}
+:host ::slotted(*) td.nowrap,
+:host ::slotted(*) th.nowrap {
+  white-space: nowrap;
+}
+:host ::slotted(*) td.is-sticky-left, :host ::slotted(*) td.is-sticky-right,
+:host ::slotted(*) th.is-sticky-left,
+:host ::slotted(*) th.is-sticky-right {
+  position: -webkit-sticky;
+  position: sticky;
+  z-index: 1;
+}
+:host ::slotted(*) td.has-sticked,
+:host ::slotted(*) th.has-sticked {
+  z-index: 2;
+}
+:host ::slotted(*) td.is-sticky-left,
+:host ::slotted(*) th.is-sticky-left {
+  left: 0;
+}
+:host ::slotted(*) td.is-sticky-right,
+:host ::slotted(*) th.is-sticky-right {
+  right: 0;
+}
+:host ::slotted(*) td.is-sticky-left::after, :host ::slotted(*) td.is-sticky-right::after,
+:host ::slotted(*) th.is-sticky-left::after,
+:host ::slotted(*) th.is-sticky-right::after {
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0.375rem;
+  transform: translate(100%);
+  opacity: 0;
+  transition: opacity var(--stzh-base-transition-animation-speed);
+}
+:host ::slotted(*) td.is-sticky-left::after,
+:host ::slotted(*) th.is-sticky-left::after {
+  right: 0;
+}
+:host ::slotted(*) td.is-sticky-right::after,
+:host ::slotted(*) th.is-sticky-right::after {
+  left: 0;
+  transform: rotate(-180deg) translate(100%);
+}
+:host ::slotted(*) td.has-sticked.is-sticky-left::after, :host ::slotted(*) td.has-sticked.is-sticky-right::after,
+:host ::slotted(*) th.has-sticked.is-sticky-left::after,
+:host ::slotted(*) th.has-sticked.is-sticky-right::after {
+  opacity: 1;
+}
+:host ::slotted(*) th {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: normal;
+  color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
+}
+:host ::slotted(*) th.is-sortable {
+  padding: 0;
+}
 :host ::slotted(*) a {
   color: var(--stzh-link-color);
   transition: color var(--stzh-base-transition-animation-speed);

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

@@ -71,6 +71,25 @@ const Template = (args) => (
     </blockquote>
 
     <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim.</p>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Column Head 1</th>
+          <th>Column Head 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Column Content 1</td>
+          <td>Column Content 2</td>
+        </tr>
+        <tr>
+          <td>Column Content 1</td>
+          <td>Column Content 2</td>
+        </tr>
+      </tbody>
+    </table>
   </stzh-richtext>
 );