@duetds/components 6.8.8 → 6.9.0

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -53,15 +53,19 @@ export class DuetRangeStepper {
   watchStepIndexStateHandler(newValue) {
     if (this.leftBnRef && this.rightBnRef) {
       if (newValue <= 1) {
+        if (this.element === document.activeElement) {
+          this.rightBnRef.setFocus();
+        }
         this.leftBnRef.setAttribute("disabled", "");
-        this.rightBnRef.setFocus();
       }
       else {
         this.leftBnRef.removeAttribute("disabled");
       }
       if (newValue >= this.total / this.stepSize) {
+        if (this.element === document.activeElement) {
+          this.leftBnRef.setFocus();
+        }
         this.rightBnRef.setAttribute("disabled", "");
-        this.leftBnRef.setFocus();
       }
       else {
         this.rightBnRef.removeAttribute("disabled");
@@ -73,7 +77,7 @@ export class DuetRangeStepper {
       if (this.stepIndex * newValue > this.total) {
         this.stepIndex = Math.ceil(this.total / newValue);
       }
-      // trigger handler in case a button needs to be disabled or enabled but stepSize did not change
+      // trigger handler in case a button needs to be disabled or enabled but stepIndex did not change
       this.watchStepIndexStateHandler(this.stepIndex);
     }
   }
@@ -119,6 +123,24 @@ export class DuetRangeStepper {
       .replace("{1}", String(this.getTo()))
       .replace("{2}", String(this.total));
   }
+  generatePreviousIncrementLabel() {
+    if (this.getFrom() === 1) {
+      return "";
+    }
+    return this.ariaLabels.x_of_y
+      .replace("{0}", String(Math.max(this.getFrom() - this.stepSize, 1)))
+      .replace("{1}", String(Math.min(this.getFrom() - 1, this.total)))
+      .replace("{2}", String(this.total));
+  }
+  generateNextIncrementLabel() {
+    if (this.getTo() === this.total) {
+      return "";
+    }
+    return this.ariaLabels.x_of_y
+      .replace("{0}", String(this.getTo() + 1))
+      .replace("{1}", String(Math.min(this.getTo() + this.stepSize, this.total)))
+      .replace("{2}", String(this.total));
+  }
   //handle a11y keyboard navigation events
   async onKeyboardDown(e) {
     // handle a11y based keyboard navigation for left/right/up/down
@@ -127,7 +149,7 @@ export class DuetRangeStepper {
     if (isArrowLeftKey(e) || isArrowUpKey(e) || isMinusKey(e)) {
       next--;
       dir = -1;
-      this.leftBnRef.focus();
+      this.leftBnRef.setFocus();
     }
     if (isArrowRightKey(e) || isArrowDownKey(e) || isPlusKey(e)) {
       next++;
@@ -150,7 +172,7 @@ export class DuetRangeStepper {
     return (h("div", { class: {
         "duet-range-stepper": true,
         "duet-theme-turva": this.theme === "turva",
-      }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": this.ariaLabels.previous_increment, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small" }), h("duet-action-button", { class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": this.ariaLabels.next_increment, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small" })));
+      }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small" }), h("duet-action-button", { class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small" })));
   }
   static get is() { return "duet-range-stepper"; }
   static get encapsulation() { return "shadow"; }
@@ -335,7 +357,7 @@ export class DuetRangeStepper {
           "references": {
             "DuetRangeStepperUpdateEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
             }
           }
         }

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

@@ -170,7 +170,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -465,7 +465,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -614,7 +614,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -634,7 +634,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -654,7 +654,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }

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

@@ -233,7 +233,7 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx"
             }
           }
         }

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

@@ -49,7 +49,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },
@@ -95,7 +95,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },

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

@@ -95,7 +95,7 @@ export class DuetSpinner {
           "references": {
             "DuetSpinnerSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spinner/duet-spinner.tsx"
             }
           }
         },

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

@@ -193,7 +193,7 @@ export class DuetStep {
           "references": {
             "DuetStepState": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         },
@@ -270,7 +270,7 @@ export class DuetStep {
           "references": {
             "DuetStepClickEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         }

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

@@ -223,7 +223,7 @@ export class DuetStepper {
           "references": {
             "DuetStepChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-stepper/duet-stepper.tsx"
             }
           }
         }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css

@@ -50,6 +50,26 @@
   position: relative;
   background: rgb(243, 249, 252);
 }
+.duet-submenu-bar .shadow-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.duet-submenu-bar .shadow-container .top-shadow {
+  position: absolute;
+  top: -52px;
+  width: 100%;
+  height: 52px;
+  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar .shadow-container .top-shadow {
+    top: -80px;
+    height: 80px;
+    box-shadow: 0 3px 6px rgba(0, 41, 77, 0.1);
+  }
+}
 @media (min-width: 62em) {
   .duet-submenu-bar {
     border-bottom: 1px solid rgb(205, 229, 241);

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -65,7 +65,7 @@ export class DuetSubmenuBar {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+    return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, h("div", { class: "shadow-container", role: "presentation" }, h("div", { class: "top-shadow" })), h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
       }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
         items: true,

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -294,7 +294,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         },
@@ -512,7 +512,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -532,7 +532,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -553,7 +553,7 @@ export class DuetTabGroup {
             },
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           },
           "return": "Promise<void>"

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

@@ -5,7 +5,7 @@ import { sizeHeader, sizeNavigation } from "@duetds/tokens";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { debounce } from "../../utils/js-utils";
-import { breakpointToToken } from "../../utils/token-utils";
+import { breakpointTokensUpTo, breakpointToToken } from "../../utils/token-utils";
 const stickyTopValues = {
   none: 0,
   "with-links": parseFloat(sizeNavigation) * 16,
@@ -20,7 +20,7 @@ export class DuetTable {
   constructor() {
     this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
     this.handleMediaQueryChange = (mq) => {
-      this.matchesBreakpoint = mq.matches;
+      this.matchesBreakpoint = breakpointTokensUpTo.includes(this.breakpoint) ? !mq.matches : mq.matches;
     };
     this.matchesBreakpoint = true;
     this.theme = undefined;
@@ -230,7 +230,7 @@ export class DuetTable {
         "mutable": false,
         "complexType": {
           "original": "DuetTableBreakpoint",
-          "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"xx-large\" | \"xxx-large\"",
+          "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
           "references": {
             "DuetTableBreakpoint": {
               "location": "import",

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

@@ -715,7 +715,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -735,7 +735,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -755,7 +755,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -775,7 +775,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }

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

@@ -432,7 +432,7 @@ export class DuetToggle {
           "references": {
             "DuetToggleChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-toggle/duet-toggle.tsx"
             }
           }
         }

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

@@ -400,7 +400,7 @@ export class DuetTooltip {
           "references": {
             "DuetTooltipBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
             }
           }
         },

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

@@ -99,10 +99,6 @@
 .duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button), .duet-upload-editable-table duet-editable-table .duet-editable-table-row-pending duet-action-button::part(button) {
   border: 0;
 }
-.duet-upload-editable-table .duet-upload-item-name duet-icon {
-  position: relative;
-  top: 2px;
-}
 
 duet-paragraph::part(duet-paragraph) {
   word-break: break-word;
@@ -113,19 +109,89 @@ duet-editable-table tfoot {
 }
 
 .upload-bottom-caption {
-  margin-bottom: 12px;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 
-.test {
-  display: flex;
+.items-header {
+  display: none;
   flex-direction: row;
 }
-.test .item-categories {
-  flex-grow: 1;
+@media (min-width: 36em) {
+  .items-header {
+    display: flex;
+  }
+}
+.items-header:not(:last-child), .items-header:not(:first-child) {
+  margin-top: 12px;
+}
+.items-header .category-header {
+  width: 35%;
 }
-.test .item-label {
-  flex-grow: 2;
+.items-header .filename-header {
+  width: 65%;
 }
-.test .item-actions {
-  flex-grow: 1;
+.items-header .filename-header.no-category {
+  width: 100%;
+}
+
+.upload-item-row {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-content: center;
+  align-items: center;
+  padding: 16px 0 16px 0;
+  border-bottom: 1px solid rgb(225, 227, 230);
+}
+@media (min-width: 36em) {
+  .upload-item-row {
+    flex-direction: row;
+  }
+}
+.upload-item-row .item-categories {
+  width: 100%;
+  margin-bottom: 8px;
+}
+@media (min-width: 36em) {
+  .upload-item-row .item-categories {
+    width: 35%;
+  }
+}
+.upload-item-row .item-label {
+  width: 100%;
+  margin-bottom: 8px;
+  text-align: left;
+}
+@media (min-width: 36em) {
+  .upload-item-row .item-label {
+    width: 50%;
+  }
+  .upload-item-row .item-label.no-category {
+    width: 85%;
+  }
+}
+.upload-item-row .item-categories .heading,
+.upload-item-row .item-label .heading {
+  display: block;
+}
+@media (min-width: 36em) {
+  .upload-item-row .item-categories .heading,
+  .upload-item-row .item-label .heading {
+    display: none;
+  }
+}
+.upload-item-row .item-actions {
+  width: 100%;
+  text-align: left;
+}
+@media (min-width: 36em) {
+  .upload-item-row .item-actions {
+    width: 15%;
+    text-align: right;
+  }
+}
+.upload-item-row .duet-upload-item-name duet-icon {
+  position: relative;
+  top: 4px;
 }