@tet/tet-components 1.3.52-testing → 1.3.53-staging

package/dist/collection/components/basic/steppers/tet-banner-nav/tet-banner-nav.css

@@ -0,0 +1,128 @@
+.banner-navigation {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: flex-end;
+}
+.banner-navigation--light {
+  color: var(--tc-icon-primary);
+  --fill-color: var(--tc-icon-primary);
+  --outline-color: var(--tc-blue-40, rgba(25, 98, 212, 1));
+}
+.banner-navigation--dark {
+  color: var(--tc-icon-primary-dark);
+  --fill-color: var(--tc-icon-primary-dark);
+  --outline-color: var(--tc-blue-40-dark, rgba(52, 129, 247, 1));
+}
+.banner-navigation__pause {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: none;
+  padding-inline: 0rem;
+  padding-block: 0rem;
+}
+.banner-navigation__pause:focus-visible {
+  outline: var(--outline-color) auto 1px;
+}
+.banner-navigation__button-container {
+  margin: 0 0 2px 0;
+}
+.banner-navigation__button {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+}
+.banner-navigation__button .clip-rect {
+  width: 22px;
+}
+.banner-navigation__button--active .clip-rect {
+  animation: fill-progress var(--progress-duration, 5000ms) linear forwards;
+}
+.banner-navigation__button--done .clip-rect {
+  width: 22px;
+}
+.banner-navigation__button--active.banner-navigation__button--paused .clip-rect {
+  animation: none;
+  width: 0;
+}
+
+@keyframes fill-progress {
+  from {
+    width: 0;
+  }
+  to {
+    width: 22px;
+  }
+}
+.svg-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  transition: width 0.2s linear;
+}
+.svg-wrapper .nav-svg {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  transform-origin: left center;
+  height: 12px;
+}
+.svg-wrapper .rect {
+  transition: width 0.2s linear, rx 0.2s ease-out;
+}
+
+.nav-svg--unfilled .rect-opacity {
+  opacity: 0;
+  width: 22px;
+  transition: width 0.2s linear, rx 0.2s ease-out, opacity 0.2s ease-in;
+}
+.nav-svg--unfilled .rect {
+  rx: 10;
+  width: 11px;
+}
+
+.nav-svg--filled .rect-opacity {
+  opacity: 1;
+}
+.nav-svg--filled .rect {
+  width: 11px;
+  rx: 10;
+}
+
+.banner-navigation__button--active .svg-wrapper {
+  width: 23px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .banner-navigation__button--active .clip-rect, .rect, .rect-opacity {
+    transition: none;
+    width: 22px;
+  }
+}
+.banner-navigation__button:focus-visible {
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  outline: none;
+}
+.banner-navigation__button:focus-visible::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  scale: 1.2;
+  transform-origin: center center;
+  outline: 2px solid;
+  outline-color: var(--outline-color);
+  border-radius: 11px;
+}

package/dist/collection/components/basic/steppers/tet-banner-nav/tet-banner-nav.js

@@ -0,0 +1,388 @@
+import { processTranslations, t } from "../../../../services/translations/index";
+import { h, forceUpdate } from "@stencil/core";
+/**
+ * A banner navigation component with animated progress indicators and pause functionality.
+ */
+export class TetBannerNavigation {
+    constructor() {
+        this.handlePauseClick = () => {
+            if (this.isPaused) {
+                this.play();
+            }
+            else {
+                this.pause();
+            }
+        };
+        this.slides = 4;
+        this.duration = 5000;
+        this.paused = false;
+        this.theme = 'light';
+        this.language = 'lv';
+        this.isPaused = false;
+        this.currentSlide = 0;
+        this.firstLoad = false;
+    }
+    async onLanguageChange(language) {
+        processTranslations('tet-components', language).then(() => forceUpdate(this));
+    }
+    componentWillLoad() {
+        this.isPaused = this.paused;
+        this.firstLoad = true;
+        processTranslations('tet-components', this.language).then(() => forceUpdate(this));
+    }
+    componentDidLoad() {
+        if (!this.isPaused) {
+            this.startAutoAdvance();
+        }
+    }
+    disconnectedCallback() {
+        this.stopAutoAdvance();
+    }
+    /**
+     * Pause auto-advance
+     */
+    async pause() {
+        this.isPaused = true;
+        this.stopAutoAdvance();
+        this.pauseStateChange.emit({ paused: true });
+    }
+    /**
+     * Resume auto-advance
+     */
+    async play() {
+        this.isPaused = false;
+        this.startAutoAdvance();
+        this.pauseStateChange.emit({ paused: false });
+    }
+    /**
+     * Go to specific slide
+     */
+    async goTo(index) {
+        const previousIndex = this.currentSlide;
+        this.currentSlide = Math.max(0, Math.min(index, this.slides - 1));
+        this.slideChange.emit({ index: this.currentSlide, previousIndex });
+        if (!this.isPaused) {
+            this.startAutoAdvance();
+        }
+    }
+    /**
+     * Go to next slide
+     */
+    async next() {
+        if (this.currentSlide === this.slides - 1) {
+            this.firstLoad = false;
+        }
+        const nextIndex = (this.currentSlide + 1) % this.slides;
+        await this.goTo(nextIndex);
+    }
+    /**
+     * Go to previous slide
+     */
+    async previous() {
+        const prevIndex = this.currentSlide === 0 ? this.slides - 1 : this.currentSlide - 1;
+        await this.goTo(prevIndex);
+    }
+    /**
+     * Get current slide index
+     */
+    async getCurrentSlide() {
+        return this.currentSlide;
+    }
+    startAutoAdvance() {
+        this.stopAutoAdvance();
+        this.autoTimer = window.setInterval(() => {
+            this.next();
+        }, this.duration);
+    }
+    stopAutoAdvance() {
+        if (this.autoTimer) {
+            clearInterval(this.autoTimer);
+            this.autoTimer = undefined;
+        }
+    }
+    render() {
+        if (this.slides === 1)
+            return null;
+        return (h("div", { class: {
+                'banner-navigation': true,
+                [`banner-navigation--${this.theme}`]: true,
+                'banner-navigation--paused': this.isPaused
+            }, style: { '--progress-duration': `${this.duration}ms` } }, h("button", { class: "banner-navigation__pause", onClick: this.handlePauseClick, "aria-label": this.isPaused ? t('components-banner-nav-resume-slideshow') : t('components-banner-nav-pause-slideshow') }, h("tet-icon", { style: { '--icon-size': '16px', '--icon-container-display': 'flex' }, theme: this.theme, name: this.isPaused ? 'tc-play' : 'tc-pause' })), Array.from({ length: this.slides }, (_, index) => (h("div", { class: "banner-navigation__button-container" }, h("button", { tabIndex: 0, class: {
+                'banner-navigation__button': true,
+                'banner-navigation__button--active': index === this.currentSlide,
+                'banner-navigation__button--paused': this.isPaused,
+                'banner-navigation__button--done': index < this.currentSlide,
+                'banner-navigation__button--resetting': !this.firstLoad && this.currentSlide === 0,
+                'banner-navigation__button--last': !this.firstLoad && this.currentSlide === 0 && index === this.slides - 1,
+                "nav-svg--filled": index < this.currentSlide,
+                "nav-svg--unfilled": index > this.currentSlide,
+            }, onClick: () => this.goTo(index), "aria-label": t('components-banner-nav-go-to-slide') + ' ' + (index + 1), "aria-pressed": index === this.currentSlide ? 'true' : 'false' }, h("div", { class: "svg-wrapper" }, h("svg", { class: "nav-svg", width: "23", height: "13", viewBox: "0 0 23 12", fill: "none" }, h("defs", null, h("clipPath", { id: `nav-clip-${index}` }, h("rect", { class: "clip-rect", x: "0.5", y: "0.5", height: "11" }))), h("rect", { class: "rect", x: "0.5", y: "0.5", width: "22", height: "11", rx: "5.5", stroke: "currentColor", fill: "none" }), h("g", { "clip-path": `url(#nav-clip-${index})` }, h("rect", { class: "rect rect-opacity", x: "0.5", y: "0.5", height: "11", width: "22", rx: "5.5", fill: "var(--fill-color)" }))))))))));
+    }
+    static get is() { return "tet-banner-nav"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-banner-nav.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-banner-nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "slides": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total number of slides"
+                },
+                "attribute": "slides",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-advance interval in milliseconds"
+                },
+                "attribute": "duration",
+                "reflect": false,
+                "defaultValue": "5000"
+            },
+            "paused": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial pause state"
+                },
+                "attribute": "paused",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for styling"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Language",
+                    "resolved": "\"en\" | \"lv\" | \"ru\"",
+                    "references": {
+                        "Language": {
+                            "location": "import",
+                            "path": "@services/translations",
+                            "id": "src/services/translations/index.ts::Language"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The translation language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'lv'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isPaused": {},
+            "currentSlide": {},
+            "firstLoad": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "slideChange",
+                "name": "slideChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when slide changes"
+                },
+                "complexType": {
+                    "original": "{ index: number; previousIndex: number }",
+                    "resolved": "{ index: number; previousIndex: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pauseStateChange",
+                "name": "pauseStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when pause state changes"
+                },
+                "complexType": {
+                    "original": "{ paused: boolean }",
+                    "resolved": "{ paused: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "pause": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Pause auto-advance",
+                    "tags": []
+                }
+            },
+            "play": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resume auto-advance",
+                    "tags": []
+                }
+            },
+            "goTo": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to specific slide",
+                    "tags": []
+                }
+            },
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to next slide",
+                    "tags": []
+                }
+            },
+            "previous": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to previous slide",
+                    "tags": []
+                }
+            },
+            "getCurrentSlide": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Get current slide index",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "onLanguageChange"
+            }];
+    }
+}