@duetds/components 10.0.0-alpha.9 → 10.1.0

package/lib/collection/components/duet-table/duet-table.js

@@ -21,18 +21,47 @@ const stickyTopValues = {
 export class DuetTable {
     constructor() {
         this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
-        this.handleMediaQueryChange = (mq) => {
-            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
-        };
+        /**
+         * Tracks whether the breakpoint is matched. This is set to true by default so that JavaScript disabled in SSR mode we get accessible table data first.
+         */
         this.matchesBreakpoint = true;
+        /**
+         * While table itself does not use language, the copyHeadingsToCells() method needs to be triggered when language changes.
+         */
         this.language = getLanguage();
-        this.theme = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Style variation of the table.
+         */
         this.variation = "striped";
+        /**
+         * Controls whether the table has a sticky header.
+         * Sticky headers are not compatible with breakpoint="none-scrollable".
+         */
         this.sticky = false;
+        /**
+         * Adjust the distance from top of the viewport (in pixels) when the
+         * table header becomes sticky.
+         */
         this.stickyDistance = "with-links";
+        /**
+         * By default the table is responsive - it will be flattened at narrow viewport widths.
+         * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+         * Set to "none" to disable the responsive functionality.
+         * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+         * this is useful for comparison tables where it's important to maintain column and row layout.
+         */
         this.breakpoint = "small";
+        /**
+         * Hide a thead section visually. The content is still available to screen readers.
+         */
         this.hideHeadVisually = false;
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
+        };
     }
     watchLanguageStateHandler(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -91,7 +120,7 @@ export class DuetTable {
      * Local methods.
      */
     copyHeadingsToCells() {
-        if (Build.isServer) {
+        if (Build.isServer || ["none", "none-scrollable"].includes(this.breakpoint)) {
             return;
         }
         const headingElements = this.element.querySelectorAll(this.headingSelector);
@@ -115,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: '06ccaf0fc2d8586bc16b3a6c4c7a7a11de2c10ed', class: {
+        return (h(Host, { key: '02ed0a7f4b3c7504b0f6df2ee9e923f5afbca106', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -124,7 +153,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '81e3f8cfbcabec7c35c1d878df37e147112379db' })));
+            } }, h("slot", { key: '946a620f959caf19dc712844d81ebc345870757d' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }
@@ -132,6 +161,7 @@ export class DuetTable {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -152,11 +182,11 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -177,12 +207,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableVariant",
@@ -203,12 +233,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"striped\""
             },
             "sticky": {
                 "type": "boolean",
+                "attribute": "sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -223,12 +253,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "stickyDistance": {
                 "type": "string",
+                "attribute": "sticky-distance",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableStickyDistance",
@@ -249,12 +279,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky-distance",
                 "reflect": false,
                 "defaultValue": "\"with-links\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableBreakpoint",
@@ -275,12 +305,12 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "hideHeadVisually": {
                 "type": "boolean",
+                "attribute": "hide-head-visually",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -295,7 +325,6 @@ export class DuetTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-head-visually",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-textarea/duet-textarea.css

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   position: relative;
   z-index: 100;
@@ -63,7 +63,7 @@
 }
 .duet-internal-label.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: rgb(23, 28, 58);
+  color: rgb(23, 42, 59);
 }
 
 *,
@@ -72,22 +72,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 16px !important;
   margin-bottom: 12px !important;
   display: block;
@@ -98,6 +98,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 16px !important;
+}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);
@@ -177,6 +180,16 @@ duet-tooltip,
   border-radius: 4px;
   transition: 150ms ease;
 }
+.duet-textarea:focus {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva, .duet-theme-turva2 .duet-textarea:focus, .duet-textarea:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-theme-turva .duet-textarea {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
@@ -188,6 +201,9 @@ duet-tooltip,
 .duet-theme-turva.has-error .duet-textarea {
   border-color: rgb(214, 28, 82) !important;
 }
+.duet-textarea[rows] {
+  min-height: auto;
+}
 .duet-textarea::-webkit-input-placeholder {
   color: rgb(98, 121, 138);
   opacity: 1 !important;
@@ -260,35 +276,32 @@ duet-tooltip,
   color: rgb(23, 28, 58);
 }
 .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #909599;
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #747475;
+.duet-theme-turva .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva, .duet-theme-turva2 .duet-textarea:hover:not(:disabled), .duet-textarea:hover:not(:disabled).duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .has-error .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-textarea:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-textarea:focus {
   border-color: rgb(0, 119, 179);
-  outline: 0;
-  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
 .duet-theme-turva .duet-textarea:focus {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .has-error .duet-textarea:focus {
-  box-shadow: 0 0 0 1px #de2362;
-}
-.duet-theme-turva.has-error .duet-textarea:focus {
-  box-shadow: 0 0 0 1px #e55039;
+  outline: 1px solid;
+  outline-color: rgb(214, 28, 82);
+  outline-offset: -1px;
 }
 .duet-textarea:not(:focus):not(:hover):invalid {
-  box-shadow: none;
+  outline: none;
 }
 
 .duet-textarea-help {
@@ -318,11 +331,43 @@ duet-tooltip,
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
 }
 
 .duet-character-count {
   display: block;
   margin: 8px 0 0 auto;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus {
+  border-color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled] {
+  background: rgb(245, 246, 247) !important;
+  border-color: rgb(245, 246, 247) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:-webkit-input-placeholder {
+  color: rgb(120, 145, 164);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-webkit-input-placeholder {
+  color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus::-moz-placeholder {
+  color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea:focus:-ms-input-placeholder {
+  color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-webkit-input-placeholder {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]::-moz-placeholder {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-textarea[disabled]:-ms-input-placeholder {
+  color: rgb(23, 42, 59);
 }