@dubai-design-system/components-js 4.1.0 → 5.0.0

package/dist/collection/components/dda-header/dda-header.stories.js

@@ -2,73 +2,151 @@ export default {
     title: 'Components/Header',
     tags: ['autodocs'],
     component: 'dda-header',
+    argTypes: {
+        hamburger_menu_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the hamburger menu button',
+        },
+        accessibility_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the accessibility button',
+        },
+        search_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the search button',
+        },
+        search_input_name: {
+            control: { type: 'text' },
+            description: 'Name for the search input',
+        },
+        language_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the language button',
+        },
+        language_text: {
+            control: { type: 'text' },
+            description: 'Text for the language button',
+        },
+        close_menu_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the close menu button',
+        },
+        close_accessibility_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the close accessibility button',
+        },
+        close_sidebar_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the close sidebar button',
+        },
+        toggle_accessibility_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the toggle accessibility button',
+        },
+    },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-header\` component, pass the following props:
-
-\`\`\`html
-<dda-header
-    first-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
-    first-logo-alt="undefined"
-    second-logo-src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg"
-    second-logo-alt="Dubai-Digital-Authority"
-    login-link="/login"
-    readSpeakerLink=""
-    languageswitch="() => console.log('Language Switcher')"
-    smtextsize="() => console.log('Small Text')"
-    basetextsize="() => console.log('Base Text')"
-    lgtextsize="() => console.log('Large Text')"
-    normalcontrast="() => console.log('Normal Text')"
-    blindcontrast="() => console.log('Blind Text')"
-    redcontrast="() => console.log('Red Text')"
-    greencontrast="() => console.log('Green Text')">
-</dda-header>
-  \`\`\`
+                component: `
+To use the \`dda-header\` component, pass the following props:
+
+\`\`\`html
+<dda-header
+    first-logo-src="assets/img/government-of-dubai.svg"
+    first-logo-white-src="assets/img/government-of-dubai-white.svg"
+    first-logo-alt="Dubai-Digital-Authority"
+    second-logo-src="digital-logo.svg"
+    second-logo-white-src="digital-logo-white.svg"
+    second-logo-alt="Dubai-Digital-Authority"
+    login-link="/login"
+    readSpeakerLink=""
+    language_text="العربية"
+    hamburger_menu_button_name="hamburger_menu_button_name"
+    accessibility_button_name="accessibility_button_name"
+    search_button_name="search_button_name"
+    search_input_name="search_input_name"
+    language_button_name="language_button_name"
+    close_menu_button_name="close_menu_button_name"
+    close_accessibility_button_name="close_accessibility_button_name"
+    close_sidebar_button_name="close_sidebar_button_name"
+    toggle_accessibility_button_name="toggle_accessibility_button_name"
+    languageswitch="() => console.log('Language Switcher')"
+    smtextsize="() => console.log('Small Text')"
+    basetextsize="() => console.log('Base Text')"
+    lgtextsize="() => console.log('Large Text')"
+    normalcontrast="() => console.log('Normal Text')"
+    blindcontrast="() => console.log('Blind Text')"
+    redcontrast="() => console.log('Red Text')"
+    greencontrast="() => console.log('Green Text')">
+</dda-header>
+  \`\`\`
 `,
             },
         },
     },
 };
-const Template = args => `
-    <dda-header 
-      first-logo-src="${args.firstlogoUrl}"
-      first-logo-alt="${args.firstLogoAlt}"
-      second-logo-src="${args.secondLogoUrl}"
-      second-logo-alt="${args.secondLogoAlt}"
-      login-link="${args.loginLink}"
-      readSpeakerLink="app-eu.readspeaker.com"
-      languageSwitch="() => console.log('Language Switcher')"
-      smTextSize="() => console.log('Small Text')"
-      baseTextSize="() => console.log('Base Text')"
-      lgTextSize="() => console.log('Large Text')"
-       normalContrast="() => console.log('Normal Text')"
-        blindContrast="() => console.log('Blind Text')"
-         redContrast="() => console.log('Red Text')"
-          greenContrast="() => console.log('Green Text')"
-      quick-links='${JSON.stringify(args.quickLinks)}'
-      side-menu-items='${JSON.stringify(args.sideMenuItems)}'
-    ></dda-header>
-        <script>
-      const header = document.querySelector('dda-header');
-      header.addEventListener('languageSwitch', ${args.languageSwitch});
-       header.addEventListener('smTextSize', ${args.smTextSize});
-              header.addEventListener('baseTextSize', ${args.baseTextSize});
-                     header.addEventListener('lgTextSize', ${args.lgTextSize});
-                      header.addEventListener('normalContrast', ${args.normalContrast});
-                       header.addEventListener('blindContrast', ${args.blindContrast});
-                        header.addEventListener('redContrast', ${args.redContrast});
-                         header.addEventListener('greenContrast', ${args.greenContrast});
-    </script>
+const Template = args => `
+    <dda-header 
+      first-logo-src="${args.firstlogoSrc}"
+      first-logo-white-src="${args.firstLogoWhiteSrc}"
+      first-logo-alt="${args.firstLogoAlt}"
+      second-logo-src="${args.secondLogoSrc}"
+      second-logo-white-src="${args.secondLogoWhiteSrc}"
+      second-logo-alt="${args.secondLogoAlt}"
+      login-link="${args.loginLink}"
+      language_text="${args.language_text}"
+      hamburger_menu_button_name="${args.hamburger_menu_button_name}"
+      accessibility_button_name="${args.accessibility_button_name}"
+      search_button_name="${args.search_button_name}"
+      search_input_name="${args.search_input_name}"
+      language_button_name="${args.language_button_name}"
+      close_menu_button_name="${args.close_menu_button_name}"
+      close_accessibility_button_name="${args.close_accessibility_button_name}"
+      close_sidebar_button_name="${args.close_sidebar_button_name}"
+      toggle_accessibility_button_name="${args.toggle_accessibility_button_name}"
+      readSpeakerLink="app-eu.readspeaker.com"
+      languageSwitch="() => console.log('Language Switcher')"
+      smTextSize="() => console.log('Small Text')"
+      baseTextSize="() => console.log('Base Text')"
+      lgTextSize="() => console.log('Large Text')"
+       normalContrast="() => console.log('Normal Text')"
+        blindContrast="() => console.log('Blind Text')"
+         redContrast="() => console.log('Red Text')"
+          greenContrast="() => console.log('Green Text')"
+      quick-links='${JSON.stringify(args.quickLinks)}'
+      side-menu-items='${JSON.stringify(args.sideMenuItems)}'
+    ></dda-header>
+        <script>
+      const header = document.querySelector('dda-header');
+      header.addEventListener('languageSwitch', ${args.languageSwitch});
+       header.addEventListener('smTextSize', ${args.smTextSize});
+              header.addEventListener('baseTextSize', ${args.baseTextSize});
+                     header.addEventListener('lgTextSize', ${args.lgTextSize});
+                      header.addEventListener('normalContrast', ${args.normalContrast});
+                       header.addEventListener('blindContrast', ${args.blindContrast});
+                        header.addEventListener('redContrast', ${args.redContrast});
+                         header.addEventListener('greenContrast', ${args.greenContrast});
+    </script>
   `;
 export const Default = Template.bind({});
 Default.args = {
-    firstlogoUrl: 'https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg',
-    firstlogoAlt: 'Dubai-Digital-Authority',
-    secondLogoUrl: 'https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg',
-    secondLogoAlt: 'Dubai-Digital-Authority',
-    loginLink: '/login',
+    firstlogoSrc: "https://www.dof.gov.ae/Style Library/img/gov-logo.svg",
+    firstLogoWhiteSrc: "https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg",
+    firstLogoAlt: "Dubai-Digital-Authority",
+    secondLogoSrc: "https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg",
+    secondLogoWhiteSrc: "https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg",
+    secondLogoAlt: "Dubai-Digital-Authority",
+    loginLink: "/login",
+    language_text: "العربية",
+    hamburger_menu_button_name: "hamburger_menu_button_name",
+    accessibility_button_name: "accessibility_button_name",
+    search_button_name: "search_button_name",
+    search_input_name: "search_input_name",
+    language_button_name: "language_button_name",
+    close_menu_button_name: "close_menu_button_name",
+    close_accessibility_button_name: "close_accessibility_button_name",
+    close_sidebar_button_name: "close_sidebar_button_name",
+    toggle_accessibility_button_name: "toggle_accessibility_button_name",
     languageSwitch: "() => console.log('Language Switcher')",
     smTextSize: "() => console.log('Small Text')",
     baseTextSize: "() => console.log('Base Text')",
@@ -82,6 +160,7 @@ Default.args = {
         { label: 'Home', href: '#', subMenu: [] },
         {
             label: 'Services',
+            menuLabel: 'Services',
             href: '#',
             subMenu: [
                 { title: 'Web Development', description: 'Build and maintain websites', icon: 'sentiment_satisfied', href: '#' },
@@ -97,11 +176,24 @@ Default.args = {
             label: 'Initiatives',
             href: '#',
             subMenu: [
-                { label: 'Submenu-1', href: '#' },
-                { label: 'Submenu-2', href: '#' },
+                { headerLabel: 'Initiatives', label: 'Submenu-1', href: '#', subMenu: [
+                        { headerLabel: 'Initiatives', label: 'Submenu-2', href: '#', subMenu: [
+                                { headerLabel: 'Initiatives', label: 'Submenu-4', href: '#' }
+                            ] },
+                        { headerLabel: 'Initiatives', label: 'Submenu-3', href: '#' }
+                    ] },
+                { headerLabel: 'Initiatives', label: 'Submenu-1', href: '#', subMenu: [
+                        { headerLabel: 'Initiatives', label: 'Submenu-2', href: '#', subMenu: [
+                                { headerLabel: 'Initiatives', label: 'Submenu-4', href: '#' }
+                            ] },
+                        { headerLabel: 'Initiatives', label: 'Submenu-3', href: '#' }
+                    ] },
             ],
         },
-        { label: 'Services', href: '#', subMenu: [] },
+        { label: 'Services', href: '#', subMenu: [
+                { headerLabel: 'Service', label: 'Service-1', href: '#' },
+                { headerLabel: 'Service', label: 'Service-2', href: '#' },
+            ] },
         { label: 'Data', href: '#', subMenu: [] },
         { label: 'Government Services', href: '#', subMenu: [] },
         { label: 'Investor Relations', href: '#', subMenu: [] },
@@ -110,4 +202,3 @@ Default.args = {
         { label: 'Contact Us', href: '#', subMenu: [] },
     ],
 };
-//# sourceMappingURL=dda-header.stories.js.map

package/dist/collection/components/dda-home-banner/dda-home-banner.js

@@ -0,0 +1,397 @@
+import { Host, h } from "@stencil/core";
+const MIN_INTERVAL = 1000;
+export class DdaHomeBanner {
+    constructor() {
+        /** Advance through the slides automatically. */
+        this.autoplay = false;
+        /** Milliseconds each slide is shown for when `autoplay` is on. Clamped to a 1000ms floor. */
+        this.interval = 5000;
+        /** Accessible name for the carousel region. */
+        this.aria_label = 'Highlights';
+        /** Accessible name for the previous-slide button. */
+        this.previous_button_label = 'Previous slide';
+        /** Accessible name for the next-slide button. */
+        this.next_button_label = 'Next slide';
+        /** Accessible name for the pause button shown while autoplay is running. */
+        this.pause_button_label = 'Pause slideshow';
+        /** Accessible name for the play button shown while autoplay is paused. */
+        this.play_button_label = 'Play slideshow';
+        /** Prefix for each slide dot's accessible name, e.g. "Go to slide 2". */
+        this.slide_button_label = 'Go to slide';
+        /** Template for the screen-reader slide announcement. `{current}` and `{total}` are substituted. */
+        this.slide_status_label = 'Slide {current} of {total}';
+        this.currentSlide = 0;
+        this.slides = [];
+        this.isPaused = false;
+        this.reducedMotion = false;
+        this.isHovered = false;
+        this.hasFocusWithin = false;
+        this.listening = false;
+        this.onMotionPreferenceChange = (event) => {
+            this.reducedMotion = event.matches;
+            this.startAutoplay();
+        };
+        this.onMouseEnter = () => {
+            this.isHovered = true;
+            this.stopAutoplay();
+        };
+        this.onMouseLeave = () => {
+            this.isHovered = false;
+            this.startAutoplay();
+        };
+        this.onFocusIn = () => {
+            this.hasFocusWithin = true;
+            this.stopAutoplay();
+        };
+        this.onFocusOut = (event) => {
+            // Moving between two controls inside the banner should not resume autoplay.
+            if (event.relatedTarget && this.el.contains(event.relatedTarget)) {
+                return;
+            }
+            this.hasFocusWithin = false;
+            this.startAutoplay();
+        };
+        this.resetScroll = () => {
+            if (this.el.scrollLeft !== 0 || this.el.scrollTop !== 0) {
+                this.el.scrollLeft = 0;
+                this.el.scrollTop = 0;
+            }
+        };
+        this.togglePause = () => {
+            this.isPaused = !this.isPaused;
+            this.startAutoplay();
+        };
+    }
+    connectedCallback() {
+        // Setup lives here, not in componentDidLoad, so that a reparented banner
+        // (modal, keep-alive, re-slotting) gets its observer and listeners back.
+        if (this.listening) {
+            return;
+        }
+        this.listening = true;
+        this.el.addEventListener('mouseenter', this.onMouseEnter);
+        this.el.addEventListener('mouseleave', this.onMouseLeave);
+        this.el.addEventListener('focusin', this.onFocusIn);
+        this.el.addEventListener('focusout', this.onFocusOut);
+        // Focusing an offscreen slide makes the browser scroll the overflow:hidden
+        // host; that scrollLeft would stack with the `left` offset and skew the track.
+        this.el.addEventListener('scroll', this.resetScroll);
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            this.motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            this.reducedMotion = this.motionQuery.matches;
+            this.motionQuery.addEventListener('change', this.onMotionPreferenceChange);
+        }
+        // shadow: false means there is no real slot, so `slotchange` never fires —
+        // watch the light DOM for added/removed slides instead.
+        this.observer = new MutationObserver(() => this.updateSlides());
+        this.observer.observe(this.el, { childList: true, subtree: true });
+        this.updateSlides();
+        this.startAutoplay();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.listening = false;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = null;
+        this.el.removeEventListener('mouseenter', this.onMouseEnter);
+        this.el.removeEventListener('mouseleave', this.onMouseLeave);
+        this.el.removeEventListener('focusin', this.onFocusIn);
+        this.el.removeEventListener('focusout', this.onFocusOut);
+        this.el.removeEventListener('scroll', this.resetScroll);
+        (_b = this.motionQuery) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', this.onMotionPreferenceChange);
+        this.isHovered = false;
+        this.hasFocusWithin = false;
+        this.stopAutoplay();
+    }
+    componentDidRender() {
+        this.syncSlideState();
+    }
+    autoplayChanged() {
+        this.startAutoplay();
+    }
+    get isRotating() {
+        return this.autoplay && !this.isPaused && !this.reducedMotion;
+    }
+    startAutoplay() {
+        this.stopAutoplay();
+        // WCAG 2.2.2: never move on its own when the user asked for reduced motion,
+        // paused the carousel, or is currently reading it with pointer or keyboard.
+        if (!this.isRotating || this.isHovered || this.hasFocusWithin) {
+            return;
+        }
+        const delay = Math.max(MIN_INTERVAL, Number(this.interval) || MIN_INTERVAL);
+        this.timer = setInterval(() => this.nextSlide(), delay);
+    }
+    stopAutoplay() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+    /**
+     * Hide every slide that is not current from the keyboard and from assistive tech.
+     * Attribute writes are not reported by a childList observer, so this cannot loop.
+     */
+    syncSlideState() {
+        const total = this.slides.length;
+        this.slides.forEach((slide, index) => {
+            const isCurrent = index === this.currentSlide;
+            slide.toggleAttribute('inert', !isCurrent);
+            slide.setAttribute('aria-hidden', isCurrent ? 'false' : 'true');
+            slide.setAttribute('role', 'group');
+            slide.setAttribute('aria-roledescription', 'slide');
+            slide.setAttribute('aria-label', this.statusText(index + 1, total));
+        });
+    }
+    statusText(current, total) {
+        return this.slide_status_label.replace('{current}', String(current)).replace('{total}', String(total));
+    }
+    updateSlides() {
+        const slides = Array.from(this.el.querySelectorAll('slide'));
+        // The observer watches this.el, which also contains the nav this component renders,
+        // so every re-render re-triggers it. Bail unless the slide list actually changed,
+        // otherwise assigning to @State here would loop forever.
+        const unchanged = slides.length === this.slides.length && slides.every((s, i) => s === this.slides[i]);
+        if (unchanged) {
+            return;
+        }
+        this.slides = slides;
+        if (this.currentSlide > slides.length - 1) {
+            this.currentSlide = 0;
+        }
+    }
+    nextSlide() {
+        if (!this.slides.length)
+            return;
+        this.currentSlide = (this.currentSlide + 1) % this.slides.length;
+    }
+    prevSlide() {
+        if (!this.slides.length)
+            return;
+        this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;
+    }
+    setSlide(index) {
+        this.currentSlide = index;
+    }
+    render() {
+        const total = this.slides.length;
+        const showAutoplayToggle = this.autoplay && !this.reducedMotion;
+        return (h(Host, { key: 'ac323ffde47f44882ece6d32e9fb62b50fd32c08', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: 'de9562eaf2c85d3848aa81af046f96642637e78c', class: "dda-slider-container" }, h("div", { key: 'c3cc772f608ee5ccb3256e889e99aab836ca101a', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: '4818e3c8bde26958dc66cf5fdb5180f2dfff1173' })), h("div", { key: '1d1bb6fb6efc59a2c7b652617e6e9425a0147b19', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: '7b67231c638c6bf0817733a056ed247070f5a4c2', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: '167ca0ce45416089292def96db6b799907522377', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: 'ee55277e5fea022a2699811025f9768d8598b8ba', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: 'd9da0726b886ec951974e16c9429deab601e6e16', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: '75813985527f96c5086d21a4ec7aaca7484a1217' }, this.slides.map((_, index) => {
+            const isCurrent = this.currentSlide === index;
+            return (h("li", null, h("button", { type: "button", class: isCurrent ? 'dots active' : 'dots', "aria-label": `${this.slide_button_label} ${index + 1}`, "aria-current": isCurrent ? 'true' : null, onClick: () => this.setSlide(index) })));
+        })), h("button", { key: '81d0bdaaab9850fd4c9c15303955b79a9e48ced7', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: 'c6807fe51b2334963a1484872ffc71f92855a389', class: "material-icons", "aria-hidden": "true" }, "chevron_right"))), h("div", { key: 'ac26f8ea696ad5779617c49081cafad67c77153d', class: "visually-hidden", role: "status", "aria-live": this.isRotating ? 'off' : 'polite' }, total ? this.statusText(this.currentSlide + 1, total) : ''))));
+    }
+    static get is() { return "dda-home-banner"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["home-banner.css", "../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["home-banner.css", "../../global/global.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Advance through the slides automatically."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "interval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds each slide is shown for when `autoplay` is on. Clamped to a 1000ms floor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interval",
+                "defaultValue": "5000"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the carousel region."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label",
+                "defaultValue": "'Highlights'"
+            },
+            "previous_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the previous-slide button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "previous_button_label",
+                "defaultValue": "'Previous slide'"
+            },
+            "next_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the next-slide button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next_button_label",
+                "defaultValue": "'Next slide'"
+            },
+            "pause_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the pause button shown while autoplay is running."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause_button_label",
+                "defaultValue": "'Pause slideshow'"
+            },
+            "play_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the play button shown while autoplay is paused."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "play_button_label",
+                "defaultValue": "'Play slideshow'"
+            },
+            "slide_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix for each slide dot's accessible name, e.g. \"Go to slide 2\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slide_button_label",
+                "defaultValue": "'Go to slide'"
+            },
+            "slide_status_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template for the screen-reader slide announcement. `{current}` and `{total}` are substituted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slide_status_label",
+                "defaultValue": "'Slide {current} of {total}'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentSlide": {},
+            "slides": {},
+            "isPaused": {},
+            "reducedMotion": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "autoplay",
+                "methodName": "autoplayChanged"
+            }, {
+                "propName": "interval",
+                "methodName": "autoplayChanged"
+            }];
+    }
+}