@momentum-design/components 0.46.1 → 0.47.1

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

@@ -0,0 +1,7 @@
+import ScreenreaderAnnouncer from './screenreaderannouncer.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-screenreaderannouncer']: ScreenreaderAnnouncer;
+    }
+}
+export default ScreenreaderAnnouncer;

package/dist/components/screenreaderannouncer/index.js

@@ -0,0 +1,4 @@
+import ScreenreaderAnnouncer from './screenreaderannouncer.component';
+import { TAG_NAME } from './screenreaderannouncer.constants';
+ScreenreaderAnnouncer.register(TAG_NAME);
+export default ScreenreaderAnnouncer;

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

@@ -0,0 +1,110 @@
+import type { CSSResult, PropertyValueMap } from 'lit';
+import { Component } from '../../models';
+import { AriaLive } from './screenreaderannouncer.types';
+/**
+ * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.
+ *
+ * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.
+ *
+ * **Internal logic**
+ *
+ * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not
+ * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created
+ * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element
+ * is created in the DOM.
+ *
+ * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with
+ * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.
+ * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.
+ *
+ * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.
+ *
+ * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and
+ * all the announcement elements added are removed from the DOM and timeouts cleared.
+ *
+ * **Note**
+ * 1. The default delay of 150 miliseconds is used as we dynamically generate the
+ * aria-live region in the DOM and add the announcement text to it.
+ * 3. If no `identity` is provided, all the screen reader components will create and use only one
+ * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.
+ *
+ * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/
+ *
+ * @tagname mdc-screenreaderannouncer
+ */
+declare class ScreenreaderAnnouncer extends Component {
+    /**
+     * The announcement attribute is a string that is used to announce messages to the screen reader.
+     * The announcement is made when the announcement attribute is set to a non-empty string.
+     *
+     * @default ''
+     */
+    announcement: string;
+    /**
+     * The id of the element in the light dom, to which announcement elements will be appended.
+     *
+     * If id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and
+     * a div element with this id will be created in the light dom.
+     */
+    identity: string;
+    /**
+     * Aria live value for announcement.
+     *
+     * @default 'polite'
+     */
+    dataAriaLive: AriaLive;
+    /**
+     * Milliseconds to wait before adding the announcement to the identiy region in
+     * DOM, which will announce the message to the screen reader.
+     *
+     * @default 150
+     */
+    delay: number;
+    /**
+     * Milliseconds to wait after which the announcement element will be removed from
+     * identity region in DOM, causing the screen reader to not announcing the message.
+     * @default 20_000
+     */
+    timeout: number;
+    /**
+     * Array to store timeOutIds for clearing timeouts later.
+     * @internal
+     */
+    private timeOutIds;
+    /**
+     * Array to store the ids of the announcement elements.
+     * @internal
+     */
+    private ariaLiveAnnouncementIds;
+    /**
+     * Announces the given announcement to the screen reader.
+     *
+     * A div element with aria-live attribute set to the given ariaLive value is created
+     * and a p element with the announcement text is appended to it.
+     *
+     * The div element is appended to the element in the DOM identified with id as
+     * identity attribute.
+     *
+     * @param announcement - The announcement to be made.
+     * @param delay - The delay in milliseconds before announcing the message.
+     * @param timeout - The timeout in milliseconds before removing the announcement.
+     * @param ariaLive - The aria live value for the announcement.
+     */
+    announce(announcement: string, delay: number, timeout: number, ariaLive: AriaLive): void;
+    /**
+     * Clears all timeouts and removes all announcements from the screen reader.
+     */
+    private clearTimeOutsAndAnnouncements;
+    /**
+     * Creates a div element with id as identity attribute in the DOM.
+     *
+     * If the identity attribute is not provided, it is set internally to
+     * `mdc-screenreaderannouncer-identity`.
+     */
+    private createAnnouncementAriaLiveRegion;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    static styles: Array<CSSResult>;
+}
+export default ScreenreaderAnnouncer;

package/dist/components/screenreaderannouncer/screenreaderannouncer.component.js

@@ -0,0 +1,212 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+import { v4 as uuidv4 } from 'uuid';
+import { Component } from '../../models';
+import { DEFAULTS } from './screenreaderannouncer.constants';
+import styles from './screenreaderannouncer.styles';
+/**
+ * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.
+ *
+ * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.
+ *
+ * **Internal logic**
+ *
+ * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not
+ * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created
+ * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element
+ * is created in the DOM.
+ *
+ * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with
+ * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.
+ * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.
+ *
+ * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.
+ *
+ * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and
+ * all the announcement elements added are removed from the DOM and timeouts cleared.
+ *
+ * **Note**
+ * 1. The default delay of 150 miliseconds is used as we dynamically generate the
+ * aria-live region in the DOM and add the announcement text to it.
+ * 3. If no `identity` is provided, all the screen reader components will create and use only one
+ * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.
+ *
+ * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/
+ *
+ * @tagname mdc-screenreaderannouncer
+ */
+class ScreenreaderAnnouncer extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The announcement attribute is a string that is used to announce messages to the screen reader.
+         * The announcement is made when the announcement attribute is set to a non-empty string.
+         *
+         * @default ''
+         */
+        this.announcement = '';
+        /**
+         * The id of the element in the light dom, to which announcement elements will be appended.
+         *
+         * If id is not provided, it will be set to `mdc-screenreaderannouncer-identity` and
+         * a div element with this id will be created in the light dom.
+         */
+        this.identity = '';
+        /**
+         * Aria live value for announcement.
+         *
+         * @default 'polite'
+         */
+        this.dataAriaLive = DEFAULTS.ARIA_LIVE;
+        /**
+         * Milliseconds to wait before adding the announcement to the identiy region in
+         * DOM, which will announce the message to the screen reader.
+         *
+         * @default 150
+         */
+        this.delay = DEFAULTS.DELAY;
+        /**
+         * Milliseconds to wait after which the announcement element will be removed from
+         * identity region in DOM, causing the screen reader to not announcing the message.
+         * @default 20_000
+         */
+        this.timeout = DEFAULTS.TIMEOUT;
+        /**
+         * Array to store timeOutIds for clearing timeouts later.
+         * @internal
+         */
+        this.timeOutIds = [];
+        /**
+         * Array to store the ids of the announcement elements.
+         * @internal
+         */
+        this.ariaLiveAnnouncementIds = [];
+    }
+    /**
+     * Announces the given announcement to the screen reader.
+     *
+     * A div element with aria-live attribute set to the given ariaLive value is created
+     * and a p element with the announcement text is appended to it.
+     *
+     * The div element is appended to the element in the DOM identified with id as
+     * identity attribute.
+     *
+     * @param announcement - The announcement to be made.
+     * @param delay - The delay in milliseconds before announcing the message.
+     * @param timeout - The timeout in milliseconds before removing the announcement.
+     * @param ariaLive - The aria live value for the announcement.
+     */
+    announce(announcement, delay, timeout, ariaLive) {
+        var _a;
+        if (announcement.length > 0) {
+            const announcementId = `mdc-screenreaderannouncer-announcement-${uuidv4()}`;
+            const announcementContainer = document.createElement('div');
+            announcementContainer.id = announcementId;
+            announcementContainer.ariaLive = ariaLive;
+            (_a = document.getElementById(this.identity)) === null || _a === void 0 ? void 0 : _a.appendChild(announcementContainer);
+            const timeOutId = window.setTimeout(() => {
+                const announcementElement = document.createElement('p');
+                announcementElement.textContent = announcement;
+                announcementContainer.appendChild(announcementElement);
+                this.ariaLiveAnnouncementIds.push(announcementId);
+                const timeOutId = window.setTimeout(() => {
+                    var _a;
+                    (_a = document.getElementById(announcementId)) === null || _a === void 0 ? void 0 : _a.remove();
+                }, timeout);
+                this.timeOutIds.push(timeOutId);
+            }, delay);
+            this.timeOutIds.push(timeOutId);
+        }
+    }
+    /**
+     * Clears all timeouts and removes all announcements from the screen reader.
+     */
+    clearTimeOutsAndAnnouncements() {
+        this.timeOutIds.forEach((timeOutId) => {
+            window.clearTimeout(timeOutId);
+        });
+        this.ariaLiveAnnouncementIds.forEach((announcementId) => {
+            var _a;
+            (_a = document.getElementById(announcementId)) === null || _a === void 0 ? void 0 : _a.remove();
+        });
+    }
+    /**
+     * Creates a div element with id as identity attribute in the DOM.
+     *
+     * If the identity attribute is not provided, it is set internally to
+     * `mdc-screenreaderannouncer-identity`.
+     */
+    createAnnouncementAriaLiveRegion() {
+        let liveRegionLightDom = document.getElementById(this.identity);
+        if (!liveRegionLightDom) {
+            liveRegionLightDom = document.createElement('div');
+            liveRegionLightDom.id = this.identity;
+            const styleElement = document.createElement('style');
+            styleElement.textContent = `
+        .mdc-screenreaderannouncer__visually-hidden {
+          clip: rect(0 0 0 0);
+          clip-path: inset(50%);
+          height: 1px;
+          overflow: hidden;
+          position: absolute;
+          white-space: nowrap;
+          width: 1px;
+        }
+      `;
+            liveRegionLightDom.appendChild(styleElement);
+            liveRegionLightDom.classList.add('mdc-screenreaderannouncer__visually-hidden');
+            document.body.appendChild(liveRegionLightDom);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.identity.length === 0) {
+            this.identity = DEFAULTS.IDENTITY;
+        }
+        this.createAnnouncementAriaLiveRegion();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.clearTimeOutsAndAnnouncements();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('identity') && this.identity.length === 0) {
+            this.identity = DEFAULTS.IDENTITY;
+            this.createAnnouncementAriaLiveRegion();
+        }
+        if (changedProperties.has('announcement') && this.announcement.length > 0) {
+            this.announce(this.announcement, this.delay, this.timeout, this.dataAriaLive);
+            this.announcement = '';
+        }
+    }
+}
+ScreenreaderAnnouncer.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ScreenreaderAnnouncer.prototype, "announcement", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], ScreenreaderAnnouncer.prototype, "identity", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-aria-live' }),
+    __metadata("design:type", String)
+], ScreenreaderAnnouncer.prototype, "dataAriaLive", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], ScreenreaderAnnouncer.prototype, "delay", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], ScreenreaderAnnouncer.prototype, "timeout", void 0);
+export default ScreenreaderAnnouncer;

package/dist/components/screenreaderannouncer/screenreaderannouncer.constants.d.ts

@@ -0,0 +1,13 @@
+declare const TAG_NAME: "mdc-screenreaderannouncer";
+declare const ARIA_LIVE_VALUES: {
+    readonly ASSERTIVE: "assertive";
+    readonly POLITE: "polite";
+    readonly OFF: "off";
+};
+declare const DEFAULTS: {
+    readonly ARIA_LIVE: "polite";
+    readonly DELAY: 150;
+    readonly IDENTITY: "mdc-screenreaderannouncer-identity";
+    readonly TIMEOUT: 20000;
+};
+export { ARIA_LIVE_VALUES, DEFAULTS, TAG_NAME };

package/dist/components/screenreaderannouncer/screenreaderannouncer.constants.js

@@ -0,0 +1,14 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('screenreaderannouncer');
+const ARIA_LIVE_VALUES = {
+    ASSERTIVE: 'assertive',
+    POLITE: 'polite',
+    OFF: 'off',
+};
+const DEFAULTS = {
+    ARIA_LIVE: ARIA_LIVE_VALUES.POLITE,
+    DELAY: 150,
+    IDENTITY: 'mdc-screenreaderannouncer-identity',
+    TIMEOUT: 20000,
+};
+export { ARIA_LIVE_VALUES, DEFAULTS, TAG_NAME };

package/dist/components/screenreaderannouncer/screenreaderannouncer.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/screenreaderannouncer/screenreaderannouncer.styles.js

@@ -0,0 +1,8 @@
+import { css } from 'lit';
+const styles = [css `
+  :host {
+    display: none;
+    visibility: hidden;
+  }
+`];
+export default styles;

package/dist/components/screenreaderannouncer/screenreaderannouncer.types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '../../utils/types';
+import { ARIA_LIVE_VALUES } from './screenreaderannouncer.constants';
+export type AriaLive = ValueOf<typeof ARIA_LIVE_VALUES>;

package/dist/components/screenreaderannouncer/screenreaderannouncer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/searchfield/searchfield.component.js

@@ -78,7 +78,11 @@ class Searchfield extends Input {
         })}" part="input-container">
     ${this.renderLeadingIcon()}
       <div part='scrollable-container'>
-      <div part="filters-container"><slot name="filters" @slotchange=${this.renderInputChips}></slot></div>
+      <div part="filters-container" 
+      @click=${() => this.inputElement.focus()} 
+      @keydown=${(e) => e.key === 'Enter' ? this.inputElement.focus() : null} 
+      @keyup=${(e) => e.key === ' ' ? this.inputElement.focus() : null}>
+        <slot name="filters" @slotchange=${this.renderInputChips}></slot></div>
       ${this.renderInputElement(DEFAULTS.TYPE)}
       </div>
       ${this.renderTrailingButton()}