@momentum-design/components 0.51.0 → 0.51.2

package/dist/components/select/select.component.d.ts

@@ -47,7 +47,7 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /** @internal */
     selectedValue: string;
     /** @internal */
-    showPopover: boolean;
+    displayPopover: boolean;
     /** @internal */
     activeDescendant: string;
     /**

package/dist/components/select/select.component.js

@@ -58,7 +58,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         /** @internal */
         this.selectedValue = '';
         /** @internal */
-        this.showPopover = false;
+        this.displayPopover = false;
         /** @internal */
         this.activeDescendant = '';
     }
@@ -197,7 +197,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
      * @param event - The keyboard event.
      */
     handleKeydown(event) {
-        if (this.showPopover) {
+        if (this.displayPopover) {
             this.handlePopoverOnOpen(event);
         }
         else {
@@ -341,11 +341,11 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         });
     }
     openPopover() {
-        this.showPopover = true;
+        this.displayPopover = true;
         this.resetActivedescendant();
     }
     closePopover() {
-        this.showPopover = false;
+        this.displayPopover = false;
         this.resetActivedescendant();
     }
     /**
@@ -392,7 +392,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         ?disabled="${this.disabled}"
         ?required="${!!this.requiredLabel}"
         aria-activedescendant="${this.activeDescendant}"
-        aria-expanded="${this.showPopover}"
+        aria-expanded="${this.displayPopover}"
         aria-haspopup="listbox"
         aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
         aria-labelledby="${this.label ? FORMFIELD_DEFAULTS.HEADING_ID : ''}"
@@ -443,7 +443,7 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         id="options-popover"
         triggerid="select-base-triggerid"
         interactive
-        ?visible="${this.showPopover}"
+        ?visible="${this.displayPopover}"
         hide-on-outside-click
         focus-back-to-trigger
         focus-trap
@@ -532,7 +532,7 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], Select.prototype, "showPopover", void 0);
+], Select.prototype, "displayPopover", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/dist/components/tab/tab.component.d.ts

@@ -7,6 +7,8 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  *
  * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
  *
+ * Pass attribute `tabid` when using inside of `tablist` component.
+ *
  * The `slot="badge"` can be used to add a badge to the tab.
  *
  * The `slot="chip"` can be used to add a chip to the tab.
@@ -23,6 +25,12 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
  * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
+ * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes
+ * <br />
+ * Event Data: `detail: { tabId: this.tabId, active }`
+ * <br />
+ * Note: the activechange event is used by the tab list component to react to the change in state of the tab,
+ * so this event won't be needed if the tab list is used.
  *
  * @tagname mdc-tab
  *
@@ -108,6 +116,13 @@ declare class Tab extends Tab_base {
      * @default pill
      */
     variant: Variant;
+    /**
+     * Id of the tab (used as a identificator when used in the tablist)
+     * Note: has to be unique!
+     *
+     * @default undefined
+     */
+    tabId?: string;
     /**
      * @internal
      */
@@ -130,6 +145,12 @@ declare class Tab extends Tab_base {
      * @param variant - The variant to set.
      */
     private setVariant;
+    /**
+     * Dispatch the activechange event.
+     *
+     * @param active - The active state of the tab.
+     */
+    private handleTabActiveChange;
     /**
      * Sets the aria-selected attribute based on the active state of the Tab.
      * If the tab is active, the filled version of the icon is displayed,

package/dist/components/tab/tab.component.js

@@ -20,6 +20,8 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
  *
  * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.
  *
+ * Pass attribute `tabid` when using inside of `tablist` component.
+ *
  * The `slot="badge"` can be used to add a badge to the tab.
  *
  * The `slot="chip"` can be used to add a chip to the tab.
@@ -36,6 +38,12 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
  * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.
  * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.
  * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.
+ * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes
+ * <br />
+ * Event Data: `detail: { tabId: this.tabId, active }`
+ * <br />
+ * Note: the activechange event is used by the tab list component to react to the change in state of the tab,
+ * so this event won't be needed if the tab list is used.
  *
  * @tagname mdc-tab
  *
@@ -117,6 +125,18 @@ class Tab extends IconNameMixin(Buttonsimple) {
          * @default pill
          */
         this.variant = DEFAULTS.VARIANT;
+        /**
+         * Dispatch the activechange event.
+         *
+         * @param active - The active state of the tab.
+         */
+        this.handleTabActiveChange = (active) => {
+            const event = new CustomEvent('activechange', {
+                detail: { tabId: this.tabId, active },
+                bubbles: true,
+            });
+            this.dispatchEvent(event);
+        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -124,6 +144,9 @@ class Tab extends IconNameMixin(Buttonsimple) {
         this.softDisabled = undefined;
         this.size = undefined;
         this.type = undefined;
+        if (!this.tabId && this.onerror) {
+            this.onerror('tab id is required');
+        }
     }
     /**
      * Modifies the icon name based on the active state.
@@ -168,7 +191,7 @@ class Tab extends IconNameMixin(Buttonsimple) {
     }
     executeAction() {
         // Toggle the active state of the tab.
-        this.active = !this.active;
+        this.handleTabActiveChange(this.active);
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -207,4 +230,8 @@ __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Tab.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'tab-id' }),
+    __metadata("design:type", String)
+], Tab.prototype, "tabId", void 0);
 export default Tab;

package/dist/components/tab/tab.styles.js

@@ -72,6 +72,7 @@ const styles = [hostFitContentStyles, css `
     --mdc-tab-pill-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
 
     flex-direction: column;
+    flex-shrink: 0;
     height: var(--mdc-tab-height);
     padding-left: var(--mdc-tab-padding-left);
     padding-right: var(--mdc-tab-padding-right);

package/dist/components/tablist/index.d.ts

@@ -0,0 +1,9 @@
+import Tablist from './tablist.component';
+import '../button';
+import '../tab';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-tablist']: Tablist;
+    }
+}
+export default Tablist;

package/dist/components/tablist/index.js

@@ -0,0 +1,6 @@
+import Tablist from './tablist.component';
+import { TAG_NAME } from './tablist.constants';
+import '../button';
+import '../tab';
+Tablist.register(TAG_NAME);
+export default Tablist;

package/dist/components/tablist/tablist.component.d.ts

@@ -0,0 +1,230 @@
+import { CSSResult } from 'lit';
+import type { PropertyValues } from 'lit';
+import { Component } from '../../models';
+/**
+ * Tab list organizes tabs into a container.
+ *
+ * Children of the tab list are `mdc-tab` elements, sent to the default slot.
+ *
+ * The tabs can be navigated using the left/right arrow keys, and selected by clicking,
+ *  or pressing the Enter and Space keys.
+ *
+ * **Implicit accessibility rules**
+ *
+ * - The element that serves as the container for the set of tabs has role `tablist`.
+ * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.
+ * - The active tab element has the state `aria-selected` set to `true`
+ *   and all other tab elements have it set to `false`.
+ *
+ *
+ * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**
+ *
+ * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.
+ * - If the tab list has a visible label,
+ *   the element with role `tablist` has `aria-labelledby` needs to be a value that refers to the labelling element.
+ *   Otherwise, the `tablist` element needs to have a label provided by `aria-label`.
+ * - Each element with role `tab` has the property `aria-controls`
+ *  that should refer to its associated `tabpanel` element.
+ * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.
+ * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.
+ *
+ * @tagname mdc-tablist
+ *
+ * @dependency mdc-tab
+ * @dependency mdc-button
+ *
+ * @event change - (React: onChange) This event is dispatched when the tab is selected.
+ * Event that fires when user changes the active tab.
+ *     The function sent as the argument will receive the fired event
+ *      and the new tab id can be fetched from event.detail.tabId.
+ *
+ *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`
+ *
+ * @slot Default slot for mdc-tab elements.
+ *
+ * @cssproperty --mdc-tablist-gap - Gap between tabs
+ * @cssproperty --mdc-tablist-width - Width of the tablist
+ * @cssproperty  --mdc-tablist-arrow-button-margin - Margin value for the arrow button
+ */
+declare class TabList extends Component {
+    /**
+     * ID of the active tab, defaults to the first tab if not provided
+     */
+    activeTabId?: string;
+    /**
+     * Selector for the element that provides a label for the tablist.
+     */
+    dataAriaLabelledby?: string;
+    /**
+     * Label for the tablist in case aria-labelledby is not provided.
+     * This is used when the tablist does not have a visible label.
+     * Defaults to 'Tab List'.
+     * <br/>
+     * Note: If both `data-aria-labelledby` and `data-aria-label` are provided,
+     * the `data-aria-labelledby` will be used.
+     */
+    dataAriaLabel?: string;
+    /**
+     * The tab container element.
+     * Has the role of `tablist`.
+     * @internal
+     */
+    private tabsContainer?;
+    /**
+     * Arrow button that is not focused.
+     * @internal
+     */
+    private notFocusedArrowButton?;
+    /**
+     * Children of the tablist, elements of type `mdc-tab`.
+     * @internal
+     */
+    private tabs?;
+    /**
+     * Instead of using 'left' and 'right' for notation of the arrow buttons, we use 'forward' and 'backward'.
+     * Since the elements of the tablist gets flipped in RTL layouts, the arrow buttons also flip.
+     * For both RTL and LTR layouts, the forward arrow button moves the tabs in the forward direction.
+     * i.e. the forward arrow button moves the tabs to the right in LTR layouts and to the left in RTL layouts.
+     */
+    /**
+     * @internal
+     */
+    private showForwardArrowButton;
+    /**
+     * @internal
+     */
+    private showBackwardArrowButton;
+    /**
+     * @internal
+     */
+    private isRtl;
+    constructor();
+    /**
+     * Set the initial active tab after firstUpdated,
+     * since this.tabs (=slot) are only available after
+     * the first update
+     *
+     * Also set up the event listeners.
+     */
+    protected firstUpdated(): Promise<void>;
+    /**
+     * Observe the tablist element for changes in the activeTabId attribute.
+     * Find the new tab with the new activeTabId.
+     * If the new tab is not found, then do nothing.
+     *
+     * If the new tab exists:
+     * Set the new tab as active.
+     *
+     * Fire the tab change event.
+     *
+     * @param changedProperties - Map of changed properties with old values.
+     */
+    update(changedProperties: PropertyValues<this>): Promise<void>;
+    /**
+     * Set aria-labelledby attribute on the tablist element.
+     * If it does not exist, set aria-label attribute.
+     * As fallback, set aria-label to 'Tab List'.
+     *
+     * @internal
+     */
+    private setAriaLabelledByOrAriaLabel;
+    /**
+     * Dispatch the change event.
+     *
+     * @internal
+     *
+     * @param newTab - the new tab that is active.
+     */
+    private fireTabChangeEvent;
+    /**
+     * When the tablist receives focus, then focus the active tab.
+     *
+     * @internal
+     *
+     * @param event - Focus event.
+     */
+    private handleFocus;
+    /**
+     * Prevent the mousedown event from triggering a focus event before the click event.
+     *
+     * @internal
+     *
+     * @param event - Mouse event.
+     */
+    private handleMousedown;
+    /**
+     * Handle the tab active change event fired from the nested tab.
+     *
+     * @internal
+     *
+     * @param event - Custom Event fired from the nested tab.
+     */
+    private handleNestedTabActiveChange;
+    /**
+     * Resets all tabs' tabindex to -1 and sets the tabindex of the
+     * given tab to 0.
+     * This is used when navigating the tabs via keyboard.
+     *
+     * @internal
+     *
+     * @param tabId - The id of the new active tab in the tabs.
+     */
+    private resetTabIndexAndSetNewTabIndex;
+    /**
+     * Removes active attribute from all tabs and sets active on the new tab.
+     *
+     * @internal
+     *
+     * @param tabId - The id of the new active tab.
+     */
+    private setActiveTab;
+    /**
+     * Set focus on the new tab, then scroll it into view.
+     *
+     * @internal
+     *
+     * @param tab - Tab to set focus on.
+     */
+    private focusTab;
+    /**
+     * Handle the keydown event. The arrow keys, Home, End, Enter, and Space keys are supported.
+     *
+     * @internal
+     *
+     * @param event - HTML Keyboard Event.
+     */
+    private handleKeydown;
+    /**
+     * Should the arrow button be shown.
+     *
+     * @internal
+     *
+     * @param direction - The direction of the arrow button.
+     */
+    private shouldShowArrowButton;
+    /**
+     * If an arrow button is in focus and it gets removed, switch focus to the opposite arrow button.
+     * If both arrow buttons are removed, switch focus to the active tab.
+     *
+     * @internal
+     */
+    private switchFocus;
+    /**
+     * Show or hide the arrow buttons based on the position of the tabs
+     * corresponding to the tab list.
+     *
+     * @internal
+     */
+    private handleArrowButtonVisibility;
+    /**
+     * Scroll tabs forward or backward.
+     *
+     * @internal
+     *
+     * @param direction - The direction to scroll the tabs in.
+     */
+    private scrollTabs;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default TabList;