@duetds/components 8.0.0 → 8.0.1

package/hydrate/index.js

@@ -6138,15 +6138,6 @@ const disconnectLanguageChangeObserver = (component) => {
   languageChangeTargets.delete(component);
 };
 
-/**
- * This function is a workaround for a bug in Chromium-based browsers, where building the accessibility tree fails
- * with nested shadow roots. See https://atlassian.lahitapiola.fi/jira/browse/DUET-780
- */
-function nudge(_component) {
-  // eslint-disable-next-line
-  setTimeout(() => { }, 10);
-}
-
 const colorWarning = "rgb(247, 178, 40)";
 const colorGrayDarker = "rgb(101, 119, 135)";
 const colorGrayLighter = "rgb(245, 248, 250)";
@@ -6665,9 +6656,6 @@ class DuetActionButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelsDefaults" });
   }
@@ -6812,7 +6800,6 @@ class DuetAlert {
     if (this.autoDismiss) {
       this.timeoutID = setTimeout(() => this.handleDismiss(), this.autoDismiss);
     }
-    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
@@ -6855,11 +6842,10 @@ class DuetAlert {
    */
   render() {
     const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
-    const role = this.variation === "danger" || this.variation === "warning" ? "alert" : "status";
     return (hAsync(Host, { class: {
         "duet-theme-turva": this.theme === "turva",
         "duet-alert-is-dismissed": this.isDismissed,
-      }, role: this.announcements ? role : undefined }, hAsync("div", { class: {
+      }, role: this.announcements ? "alert" : undefined }, hAsync("div", { class: {
         "duet-alert": true,
         "duet-alert-has-icon": !!this.icon,
         "duet-alert-is-dismissible": this.dismissible,
@@ -6916,9 +6902,6 @@ class DuetBadge {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one of the class.
@@ -6974,9 +6957,6 @@ class DuetBanner {
     this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
     this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one of the class.
@@ -7040,9 +7020,6 @@ class DuetBreadcrumb {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -7216,9 +7193,6 @@ class DuetButton {
       console.warn("[DUET]: Button used as an external link will override any icon that is set");
     }
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     this.proxyButton = document.createElement("button");
     this.proxyButton.style.display = "none";
@@ -7402,9 +7376,6 @@ class DuetCallout {
     inheritGlobalTheme(this);
     this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -7451,9 +7422,6 @@ class DuetCaption {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -7541,9 +7509,6 @@ class DuetCard {
       ;
     this.hasFooter = !!this.element.querySelector("[slot='footer']");
   }
-  componentDidLoad() {
-    nudge();
-  }
   renderHeading() {
     const safeHeadingLevel = sanitizeString$1(this.headingLevel);
     const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";
@@ -7691,9 +7656,6 @@ class DuetCheckbox {
       this.value = this.identifier;
     }
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus on the specified `duet-checkbox`. Use this method instead of the global
    * `input.focus()`.
@@ -7947,9 +7909,6 @@ class DuetChip {
     inheritGlobalTheme(this);
     this.popupSetUp();
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -8168,9 +8127,6 @@ class DuetChoice {
     this.hasBeforeText = hasSlot(this.element, "before-text");
     this.duetChoiceReady.emit();
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
@@ -8409,9 +8365,6 @@ class DuetChoiceGroup {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Local methods
    */
@@ -9056,9 +9009,6 @@ class DuetCollapsible {
     inheritGlobalTheme(this);
     this.hasAfterHeading = hasSlot(this.element, "after-heading");
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
    * `collapsible.focus()`.
@@ -9538,9 +9488,6 @@ class DuetContactCard {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -9612,9 +9559,6 @@ class DuetCookieConsent {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function.
    * Always the last one in the class.
@@ -10198,9 +10142,6 @@ class DuetDatePicker {
     this.determineValidity(parseISODate(this.value));
     this.updateInternalValue();
   }
-  componentDidLoad() {
-    nudge();
-  }
   componentDidUpdate() {
     // we want to run this code _after_ render
     // to ensure all elements are visible (and thus focusable)
@@ -10538,9 +10479,6 @@ class DuetEditableTable {
     this.hasHeadSlotLast = !!this.element.querySelector("[slot='thead-last']");
     this.hasFootSlot = !!this.element.querySelector("[slot='tfoot']");
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -10681,9 +10619,6 @@ class DuetEmptyState {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -10743,9 +10678,6 @@ class DuetFieldset {
     inheritGlobalTheme(this);
     this.checkHasTooltip();
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -10879,9 +10811,6 @@ class DuetFooter {
     this.hasInfoSlot = Array.from(this.element.children).filter(el => el.matches("[slot='info']")).length > 0
       ;
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
       prop: "accessibleLabelExternal",
@@ -11725,9 +11654,6 @@ class DuetHeader {
     inheritGlobalTheme(this);
     this.refresh();
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     for (let i = 0; i < this.mql.length; i++) {
       // addEventListener is not available in Stencil hydrate
@@ -12075,9 +12001,6 @@ class DuetHeading {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -12189,9 +12112,6 @@ class DuetHero {
     this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
     this.refresh();
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
       prop: "accessibleLabelExternal",
@@ -12382,9 +12302,6 @@ class DuetIcon {
     }
     this.loadIcon();
   }
-  componentDidLoad() {
-    nudge();
-  }
   async loadIcon() {
     // static icon known at build-time, so we can set it synchronously
     if (this.icon) {
@@ -12743,7 +12660,6 @@ class DuetInput {
         this.isPasswordRevealed = false;
       });
     }
-    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
@@ -12923,9 +12839,6 @@ class DuetLabel {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -13073,9 +12986,6 @@ class DuetLink {
     inheritGlobalTheme(this);
     this.initMediaQuery();
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, {
       prop: "accessibleLabelExternal",
@@ -13595,9 +13505,6 @@ class DuetMenuBarButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     this.changeIconSize();
     for (let i = 0; i < this.mql.length; i++) {
@@ -13714,9 +13621,6 @@ class DuetMenuBarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     this.changeIconSize();
     for (let i = 0; i < this.mql.length; i++) {
@@ -13812,9 +13716,6 @@ class DuetMenuBarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       const dropdown = this.element.closest("duet-menu-bar-dropdown");
@@ -13881,9 +13782,6 @@ class DuetMenuBarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     this.changeIconSize();
     for (let i = 0; i < this.mql.length; i++) {
@@ -14139,7 +14037,6 @@ class DuetModal {
       this.open = true;
       this.modalEl.classList.add("duet-disable-transitions");
     }
-    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" });
@@ -14421,9 +14318,6 @@ class DuetMultiselect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -14569,9 +14463,6 @@ class DuetNotification {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabelUnread", defaults: "accessibleLabelUnreadDefaults" });
   }
@@ -14659,9 +14550,6 @@ class DuetNotificationDrawer {
     inheritGlobalTheme(this);
     this.updateNotificationState();
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     this.observer = new MutationObserver(this.updateNotificationState);
     this.observer.observe(this.element, { childList: true });
@@ -15058,9 +14946,6 @@ class DuetNumberInput {
       this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
     }
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleLive", defaults: "accessibleLiveDefaults" },
@@ -15180,9 +15065,6 @@ class DuetPageHeading {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -15360,7 +15242,6 @@ class DuetPagination {
   }
   componentDidLoad() {
     this.firstRenderDone = true;
-    nudge();
   }
   componentWillRender() {
     if (this.internalSectionIndex !== 0 && this.internalSectionIndex !== this.totalPages) {
@@ -15624,9 +15505,6 @@ class DuetParagraph {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -17121,9 +16999,6 @@ class DuetPopupMenuItem {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -17202,9 +17077,6 @@ class DuetProgress {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleLabelUpload", defaults: "accessibleLabelUploadDefaults" });
   }
@@ -17273,9 +17145,6 @@ class DuetPromoCard {
     this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
     this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one of the class.
@@ -17515,9 +17384,6 @@ class DuetRadioGroup {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Local methods.
    */
@@ -17667,9 +17533,6 @@ class DuetRangeSlider {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus on the specified `duet-range-slider`. Use this method instead of the global
    * `input.focus()`.
@@ -17825,7 +17688,6 @@ class DuetRangeStepper {
   }
   componentDidLoad() {
     this.watchStepIndexStateHandler(this.stepIndex);
-    nudge();
   }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "ariaLabels", defaults: "ariaLabelsDefaults" });
@@ -17980,7 +17842,6 @@ class DuetScrollable {
   }
   componentDidLoad() {
     this.resizeObserver.observe(this.tabListElement);
-    nudge();
   }
   disconnectedCallback() {
     this.resizeObserver.disconnect();
@@ -18263,9 +18124,6 @@ class DuetSelect {
     this.isCaptionVisible = !!this.caption;
     this.refresh();
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus on the specified `duet-select`. Use this method instead of the global
    * `select.focus()`.
@@ -18477,9 +18335,6 @@ class DuetShowMore {
     inheritGlobalTheme(this);
     this.buttonAriaOpen = this.open;
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "showMoreLabel", defaults: "showMoreLabelDefaults" },
@@ -18746,9 +18601,6 @@ class DuetSlideoutLang {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -18799,9 +18651,6 @@ class DuetSlideoutLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -18893,9 +18742,6 @@ class DuetSlideoutPanel {
     inheritGlobalTheme(this);
     this.updateLabel();
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this);
   }
@@ -18999,9 +18845,6 @@ class DuetSlideoutPanelDropdown {
       link.menuItem = true;
     });
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus. Use this method instead of the global focus().
    */
@@ -19178,9 +19021,6 @@ class DuetStep {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Programmatically shift focus to the step's heading.
    */
@@ -19287,9 +19127,6 @@ class DuetStepper {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   async connectedCallback() {
     this.updateStepState();
   }
@@ -19431,9 +19268,6 @@ class DuetSubmenuBar {
       child.setAttribute("role", "listitem");
     }
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     this.nav = document.querySelector("duet-nav > [slot='mobile']");
     this.hasItems = this.checkIfHasItems();
@@ -19554,9 +19388,6 @@ class DuetSubmenuBarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     this.checkIsDesktop();
     for (let i = 0; i < this.mql.length; i++) {
@@ -19651,9 +19482,6 @@ class DuetSubmenuBarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       const dropdown = this.element.closest("duet-submenu-bar-dropdown");
@@ -19722,9 +19550,6 @@ class DuetSubmenuBarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     this.changeIconSize();
     for (let i = 0; i < this.mql.length; i++) {
@@ -19794,9 +19619,6 @@ class DuetTab {
   /**
    * Component lifecycle events.
    */
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
   }
@@ -19945,7 +19767,6 @@ class DuetTabGroup {
   }
   componentDidLoad() {
     this.scrollToActive();
-    nudge();
   }
   /**
    * This method allows you to open any of the tabs by calling the method and
@@ -20336,9 +20157,6 @@ class DuetTextarea {
       console.warn("[DUET WARNING]: counter requires counter-label to be set");
     }
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus on the specified `duet-textarea`. Use this method instead of the global
    * `textarea.focus()`.
@@ -20467,9 +20285,6 @@ class DuetToggle {
       this.value = this.identifier;
     }
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * Sets focus on the specified `duet-toggle`. Use this method instead of the global
    * `input.focus()`.
@@ -20604,9 +20419,6 @@ class DuetToolbarDropdown {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       this.open = false;
@@ -20677,9 +20489,6 @@ class DuetToolbarDropdownLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   handleEscape(e) {
     if (isEscapeKey(e)) {
       const dropdown = this.element.closest("duet-toolbar-dropdown");
@@ -20734,9 +20543,6 @@ class DuetToolbarLink {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -20861,7 +20667,6 @@ class DuetTooltip {
     }
     this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
     this.intersectionObserver.observe(this.element);
-    nudge();
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
@@ -21008,9 +20813,6 @@ class DuetTooltipButton {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   async setFocus(options) {
     if (this.buttonElement) {
       this.buttonElement.focus(options);
@@ -21081,9 +20883,6 @@ class DuetTooltipPopup {
     inheritGlobalTheme(this);
     this.teleport = new Teleport(this.element);
   }
-  componentDidLoad() {
-    nudge();
-  }
   async getArrowElement() {
     return this.arrowEl;
   }
@@ -21178,9 +20977,6 @@ class DuetTray {
     inheritGlobalTheme(this);
     this.hasAdditionalContent = !!this.element.querySelector("[slot='additional']");
   }
-  componentDidLoad() {
-    nudge();
-  }
   connectedCallback() {
     connectLanguageChangeObserver(this, [
       { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },
@@ -22243,9 +22039,6 @@ class DuetUpload {
     this.onReady();
     this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
   }
-  componentDidLoad() {
-    nudge();
-  }
   componentWillRender() {
     // listen to the events from the component
     this.verifyValidity();
@@ -22594,12 +22387,6 @@ class DuetUploadAriaStatus {
       this.getStatusMessage();
     }
   }
-  /**
-   * Component lifecycle events.
-   */
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.
@@ -22680,9 +22467,6 @@ class DuetUploadItem {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * focusActionButton.
    */
@@ -22748,9 +22532,6 @@ class DuetVisuallyHidden {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
-  componentDidLoad() {
-    nudge();
-  }
   /**
    * render() function
    * Always the last one in the class.