@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

package/lib/esm/duet-tooltip.entry.js

@@ -1,18 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { m as media_query_medium, a as media_query_large } from './tokens-84fb2357.js';
-import { c as computePosition, f as flip, s as shift, a as arrow, b as autoUpdate } from './floating-ui.dom.esm-ebc91b33.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { f as isEscapeKey } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import { a as cloneDefaultSlotContent } from './slot-utils-4096ff0d.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { m as media_query_medium, a as media_query_large } from './tokens-DkXykZBx.js';
+import { M, z, f as flip, s as shift, a as arrow } from './floating-ui.dom.browser.min-B_NkY9T0.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { a as isEscapeKey } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-BxXgd2r7.js';
+import { a as cloneDefaultSlotContent } from './slot-utils-B1zQ6tzO.js';
+import './string-utils-C6E9F6QT.js';
 
 const duetTooltipCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;z-index:200;display:inline-flex;width:auto;margin-top:-16px !important;margin-left:-3px !important;-webkit-tap-highlight-color:transparent}duet-tooltip-button{position:relative}duet-tooltip-popup{position:absolute}";
-const DuetTooltipStyle0 = duetTooltipCss;
 
 const DuetTooltip = class {
     constructor(hostRef) {
@@ -31,6 +30,84 @@ const DuetTooltip = class {
             en: "about",
             sv: "om",
         };
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.placement = "bottom";
+        /**
+         * Theme of the tooltip.
+         */
+        this.theme = "";
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Default language strings for the accessibleLabel
+         * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+         */
+        this.accessibleLabelDefault = {
+            fi: "Näytä lisätietoja",
+            en: "Show more information",
+            sv: "Visa mer tilläggsuppgifter",
+        };
+        /**
+         * Adds accessible label for the info icon that is only shown for screen
+         * readers. This property is always required to create an accessible interface!
+         * @default {fi: "Näytä lisätietoja", en: "See more information", sv: "Se mer information"}
+         */
+        this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
+        /**
+         * Default language strings for the accessibleCloseLabel
+         * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+         */
+        this.accessibleCloseLabelDefault = {
+            fi: "Sulje lisätiedot",
+            en: "Close details",
+            sv: "Stäng tilläggsuppgifter",
+        };
+        /**
+         * Adds accessible label for the close icon that is only shown for screen
+         * readers. This property is always required to create an accessibly interface!
+         * @default {fi: "Sulje lisätiedot", en: "Close details", sv: "Stäng detaljer"}
+         */
+        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
+        /**
+         * Label of the tooltip.
+         */
+        this.label = "";
+        /**
+         * Adjust the responsive breakpoint where tooltip starts opening towards left.
+         */
+        this.breakpoint = "medium";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.direction = "auto";
+        /**
+         * Adjust the vertical positioning of the tooltip toggle in pixels. Can be a
+         * negative value as well. E.g. "-13px".
+         */
+        this.positionVertical = "0";
+        /**
+         * Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a
+         * negative value as well. E.g. "-13px".
+         */
+        this.positionHorizontal = "0";
+        /**
+         * Toggle whether the tooltip is initially visible or not. This property should
+         * not be used in production in most cases.
+         */
+        this.active = false;
+        /**
+         * Negative variation for tooltip button on dark background
+         */
+        this.negative = false;
         /**
          * Local methods
          */
@@ -74,7 +151,7 @@ const DuetTooltip = class {
             else if (this.direction === "right") {
                 placement = "top-start";
             }
-            const position = await computePosition(this.buttonEl, this.popupElement, {
+            const position = await M(this.buttonEl, this.popupElement, {
                 placement,
                 middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
             });
@@ -84,35 +161,6 @@ const DuetTooltip = class {
             this.arrowY = (_a = position.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.y;
             this.arrowX = (_b = position.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
         };
-        this.placement = "bottom";
-        this.tooltipY = undefined;
-        this.tooltipX = undefined;
-        this.arrowX = undefined;
-        this.arrowY = undefined;
-        this.buttonActive = undefined;
-        this.theme = "";
-        this.language = getLanguage();
-        this.accessibleLabelDefault = {
-            fi: "Näytä lisätietoja",
-            en: "Show more information",
-            sv: "Visa mer tilläggsuppgifter",
-        };
-        this.accessibleLabel = getLocaleString(this.accessibleLabelDefault, this.language);
-        this.accessibleAboutLabel = undefined;
-        this.accessibleInputLabel = undefined;
-        this.accessibleCloseLabelDefault = {
-            fi: "Sulje lisätiedot",
-            en: "Close details",
-            sv: "Stäng tilläggsuppgifter",
-        };
-        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefault, this.language);
-        this.label = "";
-        this.breakpoint = "medium";
-        this.direction = "auto";
-        this.positionVertical = "0";
-        this.positionHorizontal = "0";
-        this.active = false;
-        this.negative = false;
     }
     /**
      * Component lifecycle events.
@@ -179,7 +227,7 @@ const DuetTooltip = class {
     }
     async handleActiveChange(newActiveValue) {
         if (newActiveValue) {
-            this.autoUpdateCleanup = autoUpdate(this.buttonEl, this.popupElement, this.updatePlacement);
+            this.autoUpdateCleanup = z(this.buttonEl, this.popupElement, this.updatePlacement);
         }
         else {
             this.autoUpdateCleanup();
@@ -220,6 +268,6 @@ const DuetTooltip = class {
         "active": ["handleActiveChange"]
     }; }
 };
-DuetTooltip.style = DuetTooltipStyle0;
+DuetTooltip.style = duetTooltipCss;
 
 export { DuetTooltip as duet_tooltip };

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

@@ -1,16 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, F as Fragment, g as getElement } from './index-a830b2de.js';
-import { s as sizeHeader } from './tokens.module-2d02f5ff.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, F as Fragment, g as getElement } from './index-BGuG-JHD.js';
+import { s as sizeHeader } from './tokens.module-UQH7pb1d.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-BxXgd2r7.js';
+import './string-utils-C6E9F6QT.js';
 
 const duetTrayCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-tray{position:fixed;top:4rem;right:0;left:0;z-index:399;display:flex;flex-direction:column;max-height:calc(100% - 8rem);padding:16px 20px 16px 24px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);visibility:hidden;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:opacity 600ms ease, visibility 600ms ease, transform 600ms ease;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray{padding:16px 36px}}@media (min-width: 106.25em){.duet-tray{padding:16px 52px 16px 60px}}.duet-tray:focus{outline:0}:host(.user-is-tabbing) .duet-tray:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray.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);background:rgb(245, 247, 250);border-color:rgb(222, 224, 228)}.duet-tray.duet-tray-is-active{visibility:visible;opacity:1;transform:translateY(0)}.duet-tray.duet-tray-is-hidden{visibility:hidden;opacity:0;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray.duet-tray-is-responsive{display:none !important}}.duet-tray.duet-tray-is-expandable{padding-right:66px}@media (min-width: 62em){.duet-tray.duet-tray-is-expandable{padding-right:78px}}@media (min-width: 106.25em){.duet-tray.duet-tray-is-expandable{padding-right:94px}}.duet-tray-expandable{position:relative;z-index:100;width:calc(100% + 46px);max-height:0;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;scrollbar-width:none}.duet-tray-expandable::-webkit-scrollbar{display:none}.duet-tray-expandable.active{max-height:500px;visibility:visible;opacity:1}.duet-tray-expandable-content{width:100%;margin-top:16px;border-top:1px solid rgb(212, 223, 229)}.duet-theme-turva .duet-tray-expandable-content{border-color:rgb(222, 224, 228)}.duet-tray-button{-webkit-user-select:none;user-select:none;padding:20px !important;position:absolute;top:-2px;right:0;z-index:200;color:rgb(8, 42, 77);text-align:center;cursor:pointer;border-radius:4px;transition:transform 300ms ease;-webkit-tap-highlight-color:transparent}@media (min-width: 62em){.duet-tray-button{margin-right:16px}}@media (min-width: 106.25em){.duet-tray-button{margin-right:36px}}.duet-theme-turva .duet-tray-button{color:rgb(23, 28, 58)}.duet-tray-button.duet-tray-is-expanded{transform:rotate(-180deg)}.duet-tray-button:focus{outline:0}:host(.user-is-tabbing) .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray-button:active{box-shadow:none;opacity:0.75}";
-const DuetTrayStyle0 = duetTrayCss;
 
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 const DuetTray = class {
@@ -21,36 +20,78 @@ const DuetTray = class {
          */
         this.isTicking = false;
         this.expandableId = createID("DuetTray");
+        this.expanded = false;
         /**
-         * Local methods.
+         * The state of the info panel.
          */
-        this.animationLoop = () => {
-            this.hiddenState = window.pageYOffset < topOffset;
-            this.isTicking = false;
-        };
-        this.toggleExpandable = ev => {
-            ev.preventDefault();
-            this.expanded = !this.expanded;
-        };
-        this.expanded = false;
         this.hiddenState = false;
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * Defaults for accessibleCloseLabel
+         * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+         */
         this.accessibleCloseLabelDefaults = {
             fi: "Sulje",
             en: "Close",
             sv: "Stäng",
         };
+        /**
+         * Accessible label that is shown for screen reader users in the expandable
+         * close toggle. Not visible for normal users.
+         * @default {fi: "Sulje", en: "Close", sv: "Stänga"}
+         */
         this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
+        /**
+         * Defaults for accessibleOpenLabel
+         * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+         */
         this.accessibleOpenLabelDefaults = {
             fi: "Avaa",
             en: "Open",
             sv: "Öppna",
         };
+        /**
+         * Accessible label that is shown for screen reader users in the expandable
+         * open toggle. Not visible for normal users.
+         * @default {fi: "Avaa", en: "Open", sv: "Öppen"}
+         */
         this.accessibleOpenLabel = getLocaleString(this.accessibleOpenLabelDefaults, this.language);
+        /**
+         * Theme of the info panel.
+         */
         this.theme = "";
+        /**
+         * Toggle whether the info panel is visible or not. You can use this
+         * property e.g. when pricing information is revealed to the user.
+         */
         this.active = false;
+        /**
+         * Hide the info panel when user scrolls back to the top of the viewport.
+         */
         this.autoHide = true;
+        /**
+         * Enable or disable the automatic responsive behaviour which
+         * makes the info panel hide on larger viewports. Settings this to
+         * "false" means that the header panel is visible on all device sizes.
+         */
         this.responsive = true;
+        /**
+         * Local methods.
+         */
+        this.animationLoop = () => {
+            this.hiddenState = window.pageYOffset < topOffset;
+            this.isTicking = false;
+        };
+        this.toggleExpandable = ev => {
+            ev.preventDefault();
+            this.expanded = !this.expanded;
+        };
     }
     /**
      * Component lifecycle events.
@@ -100,6 +141,6 @@ const DuetTray = class {
     }
     get element() { return getElement(this); }
 };
-DuetTray.style = DuetTrayStyle0;
+DuetTray.style = duetTrayCss;
 
 export { DuetTray as duet_tray };

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

@@ -1,11 +1,39 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
 
 const DuetUploadAriaStatus = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * State() variables
+         */
+        this.statusMessage = null;
+        /**
+         * Status labels used in the component
+         */
+        this.statusMessageLabel = null;
+        /**
+         * Adds accessible label that is read aloud
+         */
+        this.accessibleAriaLive = "polite";
+        /**
+         * valid file amount
+         */
+        this.valid = undefined;
+        /**
+         * total files
+         */
+        this.total = undefined;
+        /**
+         * invalid file amount
+         */
+        this.invalid = undefined;
+        /**
+         * valid file amount
+         */
+        this.inprogress = undefined;
         /**
          * Private functions
          */
@@ -44,13 +72,6 @@ const DuetUploadAriaStatus = class {
             }
             return;
         };
-        this.statusMessage = null;
-        this.statusMessageLabel = null;
-        this.accessibleAriaLive = "polite";
-        this.valid = undefined;
-        this.total = undefined;
-        this.invalid = undefined;
-        this.inprogress = undefined;
     }
     watchHandler(newValue, oldValue) {
         if (newValue !== oldValue) {

package/lib/esm/duet-upload-item.entry.js

@@ -1,11 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { g as getLocaleString } from './language-utils-40caac4f.js';
-import { a as getI18nError } from './errorcodes.utils-86af68b7.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { g as getLocaleString } from './language-utils-BxXgd2r7.js';
+import { g as getI18nError } from './errorcodes.utils-BgVG3eUP.js';
+import './string-utils-C6E9F6QT.js';
 
 const formatBytes = (bytes, decimals = 2) => {
     if (bytes === 0) {
@@ -19,11 +19,14 @@ const formatBytes = (bytes, decimals = 2) => {
 };
 
 const duetUploadItemCss = ".file-link::part(duet-link){text-decoration:none}";
-const DuetUploadItemStyle0 = duetUploadItemCss;
 
 const DuetUploadItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * theme.
+         */
+        this.theme = "";
         this.fileUploadingInfo = {
             fi: "Tiedosto latautuu",
             sv: "Filen laddas upp",
@@ -39,17 +42,6 @@ const DuetUploadItem = class {
                 });
             }
         };
-        this.theme = "";
-        this.data = undefined;
-        this.type = undefined;
-        this.showLinks = undefined;
-        this.actions = undefined;
-        this.buttonTitles = undefined;
-        this.label = undefined;
-        this.categoryLabel = undefined;
-        this.errorCodes = undefined;
-        this.showCategory = undefined;
-        this.linkClickEvent = undefined;
     }
     /**
      * Component lifecycle events.
@@ -100,6 +92,6 @@ const DuetUploadItem = class {
     }
     get element() { return getElement(this); }
 };
-DuetUploadItem.style = DuetUploadItemStyle0;
+DuetUploadItem.style = duetUploadItemCss;
 
 export { DuetUploadItem as duet_upload_item };

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

@@ -1,10 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.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}";
-const DuetVisuallyHiddenStyle0 = duetVisuallyHiddenCss;
 
 const DuetVisuallyHidden = class {
     constructor(hostRef) {
@@ -19,6 +18,6 @@ const DuetVisuallyHidden = class {
     }
     get element() { return getElement(this); }
 };
-DuetVisuallyHidden.style = DuetVisuallyHiddenStyle0;
+DuetVisuallyHidden.style = duetVisuallyHiddenCss;
 
 export { DuetVisuallyHidden as duet_visually_hidden };