@duetds/components 5.4.0 → 6.0.0

package/lib/cjs/duet-tray.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-63f324e3.js');
+const index = require('./index-b5a163e2.js');
 const tokens_module = require('./tokens.module-ef598645.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

package/lib/cjs/duet-upload-aria-status.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-63f324e3.js');
+const index = require('./index-b5a163e2.js');
 
 const DuetUploadAriaStatus = class {
   constructor(hostRef) {

package/lib/cjs/duet-visually-hidden.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-63f324e3.js');
+const index = require('./index-b5a163e2.js');
 
 const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}";
 

package/lib/cjs/duet.cjs.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-63f324e3.js');
+const index = require('./index-b5a163e2.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

package/lib/cjs/{focus-utils-7c1832b2.js → focus-utils-fed98b6a.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-63f324e3.js');
+const index = require('./index-b5a163e2.js');
 
 const focusElement = (element) => {
   if ("setFocus" in element) {

package/lib/cjs/{index-63f324e3.js → index-b5a163e2.js}

@@ -24,7 +24,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.5.0"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.0"};
 
 let scopeId;
 let contentRef;
@@ -2124,7 +2124,14 @@ const flush = () => {
 };
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
+const Build = {
+    isDev: false,
+    isBrowser: true,
+    isServer: false,
+    isTesting: false,
+};
 
+exports.Build = Build;
 exports.Env = Env;
 exports.Fragment = Fragment;
 exports.Host = Host;

package/lib/cjs/{js-utils-be1d29ae.js → js-utils-134e0318.js}

@@ -12,6 +12,17 @@ const debounce = (func, timeout = 250) => {
     }, timeout);
   };
 };
+/**
+ * The fieldSorter function is a helper function that takes an array of objects and returns
+ * a function that can be used to sort those objects. The returned sorting function takes two
+ * parameters, which are compared using the field values in the object. If one object's field value is greater than another's, then 1 is returned; if they're equal, 0 is returned; and if one object's field value is less than another's, - 1 will be returned. This allows for easy sorting by multiple fields in any order desired (e.g., first by name ascending and then by age descending).
+ *
+ *
+ * @param fields Sort the table
+ *
+ * @return A function that takes two objects and returns an integer
+ *
+ */
 function fieldSorter(fields) {
   return function (a, b) {
     return fields

package/lib/cjs/loader.cjs.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-63f324e3.js');
+const index = require('./index-b5a163e2.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
+import { Build, Component, Element, h, Host, Prop, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 export class DuetChoiceGroup {
@@ -69,6 +69,9 @@ export class DuetChoiceGroup {
    * Component lifecycle events.
    */
   async connectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
     const el = this.element;
     if (this.value === undefined) {
       const choice = findCheckedOption(el, ":scope > duet-choice");
@@ -92,6 +95,9 @@ export class DuetChoiceGroup {
     this.updateChoices();
   }
   disconnectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
     if (this.mutationO) {
       this.mutationO.disconnect();
       this.mutationO = undefined;

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

@@ -94,6 +94,13 @@ export class DuetFooter {
       this.handleClick(e);
       this.duetItemClick.emit(e);
     };
+    this.emitDuetEvent = (ev, data) => {
+      this.duetEvent.emit({
+        component: "duet-footer",
+        data,
+        originalEvent: ev,
+      });
+    };
   }
   /**
    * Component lifecycle events.
@@ -127,7 +134,7 @@ export class DuetFooter {
           this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })),
           this.processedItems &&
             this.variation !== "simple" &&
-            this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
+            this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) },
               h("div", { class: "duet-footer-icon" },
                 h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })),
               h("span", null, item.label),
@@ -138,7 +145,7 @@ export class DuetFooter {
         h("slot", { name: "extra" }),
         h("p", { class: "duet-footer-menu", part: "menu" },
           h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`),
-          h("div", { class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, null, this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) },
+          h("div", { class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, null, this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) },
             item.label,
             item.external && (h(Fragment, null,
               h("duet-visually-hidden", null,
@@ -458,6 +465,25 @@ export class DuetFooter {
           }
         }
       }
+    }, {
+      "method": "duetEvent",
+      "name": "duetEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "General event stream for the following events:\nitem: onMouseEnter, onTouchDown;\nmenuItem: onMouseEnter, onTouchDown;.\nYou can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**."
+      },
+      "complexType": {
+        "original": "DuetFooterChangeEvent",
+        "resolved": "{ component: \"duet-footer\"; data: DuetFooterItem | DuetFooterIconItem; originalEvent: Event; }",
+        "references": {
+          "DuetFooterChangeEvent": {
+            "location": "local"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{

package/lib/collection/components/duet-header/duet-header-icon.js

@@ -4,6 +4,6 @@
 import { h } from "@stencil/core";
 export const DuetHeaderIcon = (props, _children) => {
   const iconSize = props.iconSize ? props.iconSize : "x-small";
-  return (h("span", { class: "duet-header-icon" },
+  return (h("span", { class: `duet-header-icon ${props.class ? props.class : ""}` },
     h("duet-icon", { margin: "none", size: iconSize, icon: props.icon, color: "currentColor" })));
 };

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

@@ -39,12 +39,12 @@
 }
 
 @supports (position: -webkit-sticky) {
-  :host(.duet-header-multi-level-desktop-variation) {
+  :host(.duet-header-multi-level-variation) {
     top: 0;
   }
 }
 @supports (position: sticky) {
-  :host(.duet-header-multi-level-desktop-variation) {
+  :host(.duet-header-multi-level-variation) {
     top: 0;
   }
 }
@@ -578,6 +578,20 @@ button {
     color: #c60c30;
   }
 }
+.duet-header-button.duet-header-logout .duet-header-icon.mobile {
+  display: block;
+}
+.duet-header-button.duet-header-logout .duet-header-icon.desktop {
+  display: none;
+}
+@media (min-width: 62em) {
+  .duet-header-button.duet-header-logout .duet-header-icon.mobile {
+    display: none;
+  }
+  .duet-header-button.duet-header-logout .duet-header-icon.desktop {
+    display: block;
+  }
+}
 .duet-header-utils .duet-header-button.duet-header-logout {
   align-self: center;
   justify-content: center;
@@ -1011,61 +1025,73 @@ button {
   opacity: 1;
 }
 
-.duet-header-multi-level-desktop {
+@media (min-width: 62em) {
+  .duet-header-items-have-sub-items {
+    display: none;
+  }
+}
+
+.duet-header-multi-level {
+  display: none;
   height: 6rem;
 }
-.duet-header-multi-level-desktop .duet-header-top {
+@media (min-width: 62em) {
+  .duet-header-multi-level {
+    display: block;
+  }
+}
+.duet-header-multi-level .duet-header-top {
   justify-content: space-between;
   height: 6rem;
 }
-.duet-header-multi-level-desktop .duet-header-button {
+.duet-header-multi-level .duet-header-button {
   height: 6rem;
 }
-.duet-header-multi-level-desktop .logo-and-segment {
+.duet-header-multi-level .logo-and-segment {
   display: flex;
   flex-basis: 0;
   flex-direction: column;
   flex-grow: 1;
   padding-top: 1rem;
 }
-.duet-header-multi-level-desktop .logo-and-segment .duet-header-dropdown {
+.duet-header-multi-level .logo-and-segment .duet-header-dropdown {
   z-index: 400;
   margin-left: 2rem;
 }
-.duet-header-multi-level-desktop .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
   background: #f3f9fc;
 }
-.duet-header-multi-level-desktop .logo-and-segment button {
+.duet-header-multi-level .logo-and-segment button {
   align-items: flex-start;
   height: 2rem;
   font-weight: 600;
   line-height: 1rem;
 }
-.duet-header-multi-level-desktop .logo-and-segment button::before {
+.duet-header-multi-level .logo-and-segment button::before {
   display: none;
 }
-.duet-header-multi-level-desktop .logo-and-segment .duet-header-caret {
+.duet-header-multi-level .logo-and-segment .duet-header-caret {
   top: 25%;
 }
-.duet-header-multi-level-desktop-nav {
+.duet-header-multi-level-nav {
   display: flex;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown {
+.duet-header-multi-level-nav .duet-header-dropdown {
   position: static;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-toggle {
   z-index: 400;
   padding-right: 1rem;
   font-size: 1rem;
   font-weight: 600;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
   color: #0077b3;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active:not(.open) .duet-header-caret {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-toggle.active:not(.open) .duet-header-caret {
   transform: translateY(-50%) rotate(0deg);
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content {
   z-index: 399;
   display: flex;
   justify-content: center;
@@ -1078,7 +1104,7 @@ button {
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
   transition: none;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -1090,7 +1116,7 @@ button {
   padding: 0 1rem !important;
   font-weight: 600;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
   position: absolute;
   top: auto;
   bottom: 0;
@@ -1103,82 +1129,82 @@ button {
   transition: 300ms ease;
   transform: translateY(3px);
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
   font-weight: 600;
   color: #0077b3;
   background: none;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active::after {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a.active::after {
   transform: translateY(0);
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a .duet-header-icon {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a .duet-header-icon {
   margin: 0;
 }
-.duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content .duet-header-badge {
+.duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content .duet-header-badge {
   position: absolute;
   margin-top: -2rem;
   margin-right: -2.25rem;
 }
-.duet-header-multi-level-desktop-nav button::before {
+.duet-header-multi-level-nav button::before {
   display: none;
 }
-.duet-header-multi-level-desktop-nav .duet-header-caret {
+.duet-header-multi-level-nav .duet-header-caret {
   right: 1%;
 }
-.duet-header-multi-level-desktop-utils {
+.duet-header-multi-level-utils {
   display: flex;
   flex-basis: 0;
   flex-grow: 1;
   justify-content: flex-end;
 }
-.duet-header-multi-level-desktop-utils > :last-child::before {
+.duet-header-multi-level-utils > :last-child::before {
   display: none;
 }
-.duet-header-multi-level-desktop-utils > :last-child.duet-header-dropdown .duet-header-button::before {
+.duet-header-multi-level-utils > :last-child.duet-header-dropdown .duet-header-button::before {
   display: none;
 }
-.duet-header-multi-level-desktop-utils .duet-header-dropdown {
+.duet-header-multi-level-utils .duet-header-dropdown {
   z-index: 400;
 }
-.duet-header-multi-level-desktop-utils .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level-utils .duet-header-dropdown .duet-header-dropdown-content {
   background: #f3f9fc;
 }
-.duet-header-multi-level-desktop-utils .duet-header-button-label,
-.duet-header-multi-level-desktop-utils .duet-header-dropdown-label {
+.duet-header-multi-level-utils .duet-header-button-label,
+.duet-header-multi-level-utils .duet-header-dropdown-label {
   display: none;
 }
 @media (min-width: 64.0625em) {
-  .duet-header-multi-level-desktop-utils .duet-header-button-label,
-.duet-header-multi-level-desktop-utils .duet-header-dropdown-label {
+  .duet-header-multi-level-utils .duet-header-button-label,
+.duet-header-multi-level-utils .duet-header-dropdown-label {
     display: initial;
   }
 }
-.duet-header-multi-level-desktop .duet-theme-turva .logo-and-segment .duet-header-dropdown {
+.duet-header-multi-level .duet-theme-turva .logo-and-segment .duet-header-dropdown {
   margin-left: 0;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .logo-and-segment .duet-header-dropdown-toggle {
+.duet-header-multi-level .duet-theme-turva .logo-and-segment .duet-header-dropdown-toggle {
   padding-left: 0.5rem;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level .duet-theme-turva .logo-and-segment .duet-header-dropdown .duet-header-dropdown-content {
   background: #f5f5f7;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-utils > :nth-last-child(2).duet-header-dropdown .duet-header-button::before {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-utils > :nth-last-child(2).duet-header-dropdown .duet-header-button::before {
   display: none;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-toggle.active {
   color: #c60c30;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content {
   background: #f5f5f7;
   border-color: #e4e4e6;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a::after {
   background: #c60c30;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-nav .duet-header-dropdown .duet-header-dropdown-content a.active {
   color: #c60c30;
   background: none;
 }
-.duet-header-multi-level-desktop .duet-theme-turva .duet-header-multi-level-desktop-utils .duet-header-dropdown .duet-header-dropdown-content {
+.duet-header-multi-level .duet-theme-turva .duet-header-multi-level-utils .duet-header-dropdown .duet-header-dropdown-content {
   background: #f5f5f7;
 }