@govtechsg/sgds-web-component 3.6.0-rc.2 → 3.6.0

package/components/SystemBanner/sgds-system-banner-item.d.ts

@@ -0,0 +1,24 @@
+import SgdsElement from "../../base/sgds-element";
+/**
+ * @slot icon - The slot to pass in an icon element.
+ * @slot action - The slot to pass in an action element such as a button or link
+ * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
+ *
+ * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
+ */
+export declare class SgdsSystemBannerItem extends SgdsElement {
+    static styles: import("lit").CSSResult[];
+    /** Used only for SSR to indicate the presence of the `action` slot. */
+    hasActionSlot: boolean;
+    private clamped;
+    private siblingsCount;
+    private readonly hasSlotController;
+    private _resizeObserver;
+    firstUpdated(_changedProperties: any): Promise<void>;
+    disconnectedCallback(): void;
+    updated(): void;
+    private _clampCheck;
+    private _handleShowMoreClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default SgdsSystemBannerItem;

package/components/SystemBanner/sgds-system-banner-item.js

@@ -0,0 +1,93 @@
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './system-banner-item.js';
+import { HasSlotController } from '../../utils/slot.js';
+import { SystemBannerChildCountContext } from './system-banner-context.js';
+import { consume } from '@lit/context';
+
+/**
+ * @slot icon - The slot to pass in an icon element.
+ * @slot action - The slot to pass in an action element such as a button or link
+ * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
+ *
+ * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
+ */
+class SgdsSystemBannerItem extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Used only for SSR to indicate the presence of the `action` slot. */
+        this.hasActionSlot = false;
+        this.clamped = false;
+        this.siblingsCount = 0;
+        this.hasSlotController = new HasSlotController(this, "action");
+    }
+    async firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        await this.updateComplete;
+        this._clampCheck();
+        // Watch resizing for dynamic layout changes
+        this._resizeObserver = new ResizeObserver(() => this._clampCheck());
+        this._resizeObserver.observe(this.shadowRoot.querySelector(".message"));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._resizeObserver)
+            this._resizeObserver.disconnect();
+    }
+    updated() {
+        if (!this.hasActionSlot)
+            this.hasActionSlot = this.hasSlotController.test("action");
+    }
+    _clampCheck() {
+        const textEl = this.shadowRoot.querySelector(".message");
+        requestAnimationFrame(() => {
+            this.clamped = textEl.scrollHeight > textEl.clientHeight;
+        });
+    }
+    _handleShowMoreClick() {
+        this.emit("sgds-show-more");
+    }
+    render() {
+        return html `
+      <div class="banner-item">
+        <slot name="icon"></slot>
+        <div class="banner-item__message_and__action">
+          <div class="clamped-container">
+            <div class=${classMap({ message: true, truncated: this.clamped })}>
+              <slot></slot>
+            </div>
+            ${this.clamped
+            ? html `<span class="show-more"
+                  >...<a class="show-more__link" @click="${this._handleShowMoreClick}">show more</a></span
+                >`
+            : nothing}
+          </div>
+          ${this.hasActionSlot || this.siblingsCount > 1
+            ? html `
+                <div class="action">
+                  <slot name="action"></slot>
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsSystemBannerItem.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean })
+], SgdsSystemBannerItem.prototype, "hasActionSlot", void 0);
+__decorate([
+    state()
+], SgdsSystemBannerItem.prototype, "clamped", void 0);
+__decorate([
+    consume({ context: SystemBannerChildCountContext, subscribe: true }),
+    state()
+], SgdsSystemBannerItem.prototype, "siblingsCount", void 0);
+
+export { SgdsSystemBannerItem, SgdsSystemBannerItem as default };
+//# sourceMappingURL=sgds-system-banner-item.js.map

package/components/SystemBanner/sgds-system-banner-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-system-banner-item.js","sources":["../../../src/components/SystemBanner/sgds-system-banner-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport alertBannerItemStyles from \"./system-banner-item.css\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { SystemBannerChildCountContext } from \"./system-banner-context\";\nimport { consume } from \"@lit/context\";\n\n/**\n * @slot icon - The slot to pass in an icon element.\n * @slot action - The slot to pass in an action element such as a button or link\n * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view\n *\n * @event sgds-show-more - The event emitted when user clicks on \"show more\" in the banner text message\n */\nexport class SgdsSystemBannerItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerItemStyles];\n  /** Used only for SSR to indicate the presence of the `action` slot. */\n  @property({ type: Boolean }) hasActionSlot = false;\n\n  @state() private clamped = false;\n\n  @consume({ context: SystemBannerChildCountContext, subscribe: true })\n  @state()\n  private siblingsCount = 0;\n\n  private readonly hasSlotController = new HasSlotController(this, \"action\");\n\n  private _resizeObserver: ResizeObserver;\n  async firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    await this.updateComplete;\n    this._clampCheck();\n\n    // Watch resizing for dynamic layout changes\n    this._resizeObserver = new ResizeObserver(() => this._clampCheck());\n    this._resizeObserver.observe(this.shadowRoot.querySelector(\".message\"));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._resizeObserver) this._resizeObserver.disconnect();\n  }\n  updated() {\n    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test(\"action\");\n  }\n  private _clampCheck() {\n    const textEl = this.shadowRoot.querySelector(\".message\");\n    requestAnimationFrame(() => {\n      this.clamped = textEl.scrollHeight > textEl.clientHeight;\n    });\n  }\n\n  private _handleShowMoreClick() {\n    this.emit(\"sgds-show-more\");\n  }\n  render() {\n    return html`\n      <div class=\"banner-item\">\n        <slot name=\"icon\"></slot>\n        <div class=\"banner-item__message_and__action\">\n          <div class=\"clamped-container\">\n            <div class=${classMap({ message: true, truncated: this.clamped })}>\n              <slot></slot>\n            </div>\n            ${this.clamped\n              ? html`<span class=\"show-more\"\n                  >...<a class=\"show-more__link\" @click=\"${this._handleShowMoreClick}\">show more</a></span\n                >`\n              : nothing}\n          </div>\n          ${this.hasActionSlot || this.siblingsCount > 1\n            ? html`\n                <div class=\"action\">\n                  <slot name=\"action\"></slot>\n                </div>\n              `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\nexport default SgdsSystemBannerItem;\n"],"names":["alertBannerItemStyles"],"mappings":";;;;;;;;;;AASA;;;;;;AAMG;AACG,MAAO,oBAAqB,SAAQ,WAAW,CAAA;AAArD,IAAA,WAAA,GAAA;;;QAG+B,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;QAElC,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;QAIzB,IAAa,CAAA,aAAA,GAAG,CAAC,CAAC;QAET,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;KAwD5E;IArDC,MAAM,YAAY,CAAC,kBAAkB,EAAA;AACnC,QAAA,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;;AAGnB,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACpE,QAAA,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC;KACzE;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,eAAe;AAAE,YAAA,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;KAC7D;IACD,OAAO,GAAA;QACL,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrF;IACO,WAAW,GAAA;QACjB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACzD,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;AAC3D,SAAC,CAAC,CAAC;KACJ;IAEO,oBAAoB,GAAA;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC7B;IACD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;AAKU,uBAAA,EAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAA;;;AAG/D,YAAA,EAAA,IAAI,CAAC,OAAO;cACV,IAAI,CAAA,CAAA;AACuC,yDAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;AAClE,iBAAA,CAAA;AACJ,cAAE,OAAO,CAAA;;AAEX,UAAA,EAAA,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC;cAC1C,IAAI,CAAA,CAAA;;;;AAIH,cAAA,CAAA;AACH,cAAE,OAAO,CAAA;;;KAGhB,CAAC;KACH;;AAjEM,oBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAqB,CAAhD,CAAkD;AAElC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAuB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAElC,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAAyB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIzB,UAAA,CAAA;IAFP,OAAO,CAAC,EAAE,OAAO,EAAE,6BAA6B,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACpE,IAAA,KAAK,EAAE;AACkB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/SystemBanner/sgds-system-banner.d.ts

@@ -0,0 +1,51 @@
+import { PropertyValueMap } from "lit";
+import SgdsElement from "../../base/sgds-element";
+import SgdsCloseButton from "../CloseButton/sgds-close-button";
+import SgdsIcon from "../Icon/sgds-icon";
+import SgdsIconButton from "../IconButton/sgds-icon-button";
+/**
+ * @summary The system banner component for displaying important messages to users at the application level.
+ * Each banner can contain up to 5 banner items that cycle automatically every 5 seconds. Pagination appears when there are multiple items, allowing users to navigate between them. The banner can also be made dismissible with a close button.
+ * `sgds-system-banner-item` is the subcomponent for `sgds-system-banner`. Each banner item represents a message in the system banner.
+ *
+ * @slot default - The slot to pass in `sgds-system-banner-item`
+ *
+ * @event sgds-show - Emitted when the banner has start to appear on screen
+ * @event sgds-hide - Emitted when the banner is disappearing from the screen
+ */
+export declare class SgdsSystemBanner extends SgdsElement {
+    static styles: import("lit").CSSResult[];
+    /**@internal */
+    static dependencies: {
+        "sgds-close-button": typeof SgdsCloseButton;
+        "sgds-icon": typeof SgdsIcon;
+        "sgds-icon-button": typeof SgdsIconButton;
+    };
+    /** Controls the appearance of the alert  */
+    show: boolean;
+    /** Enables a close button that allows the user to dismiss the alert. */
+    dismissible: boolean;
+    /** Closes the alert  */
+    close(): void;
+    private bannerItem;
+    private banner;
+    private childCount;
+    private _intervalId;
+    private _intervalTime;
+    private _currentIndex;
+    protected firstUpdated(changedProperties: PropertyValueMap<this>): void;
+    disconnectedCallback(): void;
+    /**@internal */
+    _handleShowChange(): Promise<void>;
+    private _updateActiveItem;
+    private _next;
+    private _prev;
+    private _animateItem;
+    private _startAutoCycle;
+    private _stopAutoCycle;
+    private _resetAutoCycle;
+    private _pauseAutoCycle;
+    private _resumeAutoCycle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default SgdsSystemBanner;

package/components/SystemBanner/sgds-system-banner.js

@@ -0,0 +1,224 @@
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { property, queryAssignedElements, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { SgdsCloseButton } from '../CloseButton/sgds-close-button.js';
+import { animateTo } from '../../utils/animate.js';
+import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
+import { watch } from '../../utils/watch.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
+import { SgdsIconButton } from '../IconButton/sgds-icon-button.js';
+import css_248z from './system-banner.js';
+import { SystemBannerChildCountContext } from './system-banner-context.js';
+import { provide } from '@lit/context';
+
+/**
+ * @summary The system banner component for displaying important messages to users at the application level.
+ * Each banner can contain up to 5 banner items that cycle automatically every 5 seconds. Pagination appears when there are multiple items, allowing users to navigate between them. The banner can also be made dismissible with a close button.
+ * `sgds-system-banner-item` is the subcomponent for `sgds-system-banner`. Each banner item represents a message in the system banner.
+ *
+ * @slot default - The slot to pass in `sgds-system-banner-item`
+ *
+ * @event sgds-show - Emitted when the banner has start to appear on screen
+ * @event sgds-hide - Emitted when the banner is disappearing from the screen
+ */
+class SgdsSystemBanner extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Controls the appearance of the alert  */
+        this.show = false;
+        /** Enables a close button that allows the user to dismiss the alert. */
+        this.dismissible = false;
+        this._intervalId = null;
+        this._intervalTime = 5000;
+        this._currentIndex = 0;
+    }
+    /** Closes the alert  */
+    close() {
+        this.show = false;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.childCount = this.bannerItem.length;
+        if (!this.show) {
+            this.banner.classList.add("d-none");
+        }
+        else {
+            this.childCount > 1 && this._startAutoCycle();
+            this.addEventListener("mouseenter", this._pauseAutoCycle.bind(this));
+            this.addEventListener("mouseleave", this._resumeAutoCycle.bind(this));
+            this.addEventListener("focus", this._pauseAutoCycle.bind(this));
+            this.addEventListener("blur", this._resumeAutoCycle.bind(this));
+        }
+        this._updateActiveItem();
+        if (this.childCount > 5) {
+            console.warn("It is not recommended to have more than 5 <sgds-system-banner-item> elements.");
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._stopAutoCycle();
+    }
+    /**@internal */
+    async _handleShowChange() {
+        if (this.show) {
+            this.childCount > 1 && this._startAutoCycle();
+            this.emit("sgds-show");
+            this.banner.classList.remove("d-none");
+        }
+        else {
+            this._stopAutoCycle();
+            this.emit("sgds-hide");
+            this.banner.classList.add("d-none");
+        }
+    }
+    _updateActiveItem() {
+        const items = this.bannerItem;
+        items.forEach((item, i) => {
+            if (i === this._currentIndex) {
+                item.setAttribute("active", "");
+            }
+            else {
+                item.removeAttribute("active");
+            }
+        });
+    }
+    _next() {
+        const items = this.bannerItem;
+        this._currentIndex = (this._currentIndex + 1) % items.length;
+        this._updateActiveItem();
+        this._animateItem(items[this._currentIndex], "next");
+        this._resetAutoCycle();
+    }
+    _prev() {
+        const items = this.bannerItem;
+        this._currentIndex = (this._currentIndex - 1 + items.length) % items.length;
+        this._updateActiveItem();
+        this._animateItem(items[this._currentIndex], "prev");
+        this._resetAutoCycle();
+    }
+    async _animateItem(item, direction) {
+        // Cancel any existing animations before starting a new one
+        item.getAnimations().forEach(a => a.cancel());
+        // Start the slide-down animation
+        const bannerLoopMessage = getAnimation(this, `banner.item.${direction}`);
+        await animateTo(item, bannerLoopMessage.keyframes, bannerLoopMessage.options);
+    }
+    _startAutoCycle() {
+        this._stopAutoCycle(); // avoid duplicates
+        this._intervalId = setInterval(() => this._next(), this._intervalTime);
+    }
+    _stopAutoCycle() {
+        if (this._intervalId) {
+            clearInterval(this._intervalId);
+            this._intervalId = null;
+        }
+    }
+    _resetAutoCycle() {
+        this._stopAutoCycle();
+        this._startAutoCycle();
+    }
+    _pauseAutoCycle() {
+        this._stopAutoCycle();
+    }
+    _resumeAutoCycle() {
+        if (this.show && this.childCount > 1) {
+            this._startAutoCycle();
+        }
+    }
+    render() {
+        return html `
+      <div
+        class="${classMap({
+            banner: true
+        })}"
+        role="alert"
+        aria-hidden=${this.show ? "false" : "true"}
+      >
+        <div class="content">
+          <slot id="loop-slot"></slot>
+        </div>
+        ${this.childCount > 1
+            ? html ` <div class="pagination">
+              <sgds-icon-button
+                name="chevron-left"
+                tone="fixed-light"
+                variant="ghost"
+                size="xs"
+                @click=${this._prev}
+              ></sgds-icon-button>
+              <span>${this._currentIndex + 1}/${this.childCount}</span>
+              <sgds-icon-button
+                name="chevron-right"
+                tone="fixed-light"
+                variant="ghost"
+                size="xs"
+                @click=${this._next}
+              ></sgds-icon-button>
+            </div>`
+            : nothing}
+        ${this.dismissible
+            ? html `
+              <sgds-close-button aria-label="close the alert" @click=${this.close} tone="fixed-light"></sgds-close-button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+}
+SgdsSystemBanner.styles = [...SgdsElement.styles, css_248z];
+/**@internal */
+SgdsSystemBanner.dependencies = {
+    "sgds-close-button": SgdsCloseButton,
+    "sgds-icon": SgdsIcon,
+    "sgds-icon-button": SgdsIconButton
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsSystemBanner.prototype, "show", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsSystemBanner.prototype, "dismissible", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], SgdsSystemBanner.prototype, "bannerItem", void 0);
+__decorate([
+    query(".banner")
+], SgdsSystemBanner.prototype, "banner", void 0);
+__decorate([
+    provide({ context: SystemBannerChildCountContext }),
+    state()
+], SgdsSystemBanner.prototype, "childCount", void 0);
+__decorate([
+    state()
+], SgdsSystemBanner.prototype, "_intervalId", void 0);
+__decorate([
+    state()
+], SgdsSystemBanner.prototype, "_currentIndex", void 0);
+__decorate([
+    watch("show", { waitUntilFirstUpdate: true })
+], SgdsSystemBanner.prototype, "_handleShowChange", null);
+setDefaultAnimation("banner.item.next", {
+    keyframes: [
+        { opacity: 0, transform: "translateY(-100%)" },
+        { opacity: 1, transform: "translateY(0)" }
+    ],
+    options: {
+        duration: 500,
+        easing: "cubic-bezier(0.45,0.05,0.55,0.95)"
+    }
+});
+setDefaultAnimation("banner.item.prev", {
+    keyframes: [
+        { opacity: 0, transform: "translateY(100%)" },
+        { opacity: 1, transform: "translateY(0)" }
+    ],
+    options: {
+        duration: 500,
+        easing: "cubic-bezier(0.45,0.05,0.55,0.95)"
+    }
+});
+
+export { SgdsSystemBanner, SgdsSystemBanner as default };
+//# sourceMappingURL=sgds-system-banner.js.map

package/components/SystemBanner/sgds-system-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-system-banner.js","sources":["../../../src/components/SystemBanner/sgds-system-banner.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport { animateTo } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport alertBannerStyles from \"./system-banner.css\";\nimport SgdsSystemBannerItem from \"./sgds-system-banner-item\";\nimport { SystemBannerChildCountContext } from \"./system-banner-context\";\nimport { provide } from \"@lit/context\";\n\n/**\n * @summary The system banner component for displaying important messages to users at the application level.\n * Each banner can contain up to 5 banner items that cycle automatically every 5 seconds. Pagination appears when there are multiple items, allowing users to navigate between them. The banner can also be made dismissible with a close button.\n * `sgds-system-banner-item` is the subcomponent for `sgds-system-banner`. Each banner item represents a message in the system banner.\n *\n * @slot default - The slot to pass in `sgds-system-banner-item`\n *\n * @event sgds-show - Emitted when the banner has start to appear on screen\n * @event sgds-hide - Emitted when the banner is disappearing from the screen\n */\nexport class SgdsSystemBanner extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertBannerStyles];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-icon-button\": SgdsIconButton\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  @queryAssignedElements({ flatten: true })\n  private bannerItem: SgdsSystemBannerItem[];\n\n  @query(\".banner\")\n  private banner: HTMLDivElement;\n\n  @provide({ context: SystemBannerChildCountContext })\n  @state()\n  private childCount: number;\n\n  @state() private _intervalId = null;\n\n  private _intervalTime = 5000;\n\n  @state() private _currentIndex = 0;\n\n  protected firstUpdated(changedProperties: PropertyValueMap<this>): void {\n    super.firstUpdated(changedProperties);\n    this.childCount = this.bannerItem.length;\n    if (!this.show) {\n      this.banner.classList.add(\"d-none\");\n    } else {\n      this.childCount > 1 && this._startAutoCycle();\n      this.addEventListener(\"mouseenter\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"mouseleave\", this._resumeAutoCycle.bind(this));\n\n      this.addEventListener(\"focus\", this._pauseAutoCycle.bind(this));\n      this.addEventListener(\"blur\", this._resumeAutoCycle.bind(this));\n    }\n    this._updateActiveItem();\n\n    if (this.childCount > 5) {\n      console.warn(\"It is not recommended to have more than 5 <sgds-system-banner-item> elements.\");\n    }\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._stopAutoCycle();\n  }\n\n  /**@internal */\n  @watch(\"show\", { waitUntilFirstUpdate: true })\n  async _handleShowChange() {\n    if (this.show) {\n      this.childCount > 1 && this._startAutoCycle();\n      this.emit(\"sgds-show\");\n      this.banner.classList.remove(\"d-none\");\n    } else {\n      this._stopAutoCycle();\n      this.emit(\"sgds-hide\");\n      this.banner.classList.add(\"d-none\");\n    }\n  }\n\n  private _updateActiveItem() {\n    const items = this.bannerItem;\n    items.forEach((item, i) => {\n      if (i === this._currentIndex) {\n        item.setAttribute(\"active\", \"\");\n      } else {\n        item.removeAttribute(\"active\");\n      }\n    });\n  }\n  private _next() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex + 1) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"next\");\n    this._resetAutoCycle();\n  }\n\n  private _prev() {\n    const items = this.bannerItem;\n    this._currentIndex = (this._currentIndex - 1 + items.length) % items.length;\n    this._updateActiveItem();\n    this._animateItem(items[this._currentIndex], \"prev\");\n    this._resetAutoCycle();\n  }\n  private async _animateItem(item: SgdsSystemBannerItem, direction: \"next\" | \"prev\") {\n    // Cancel any existing animations before starting a new one\n    item.getAnimations().forEach(a => a.cancel());\n    // Start the slide-down animation\n    const bannerLoopMessage = getAnimation(this, `banner.item.${direction}`);\n    await animateTo(item, bannerLoopMessage.keyframes, bannerLoopMessage.options);\n  }\n  private _startAutoCycle() {\n    this._stopAutoCycle(); // avoid duplicates\n    this._intervalId = setInterval(() => this._next(), this._intervalTime);\n  }\n\n  private _stopAutoCycle() {\n    if (this._intervalId) {\n      clearInterval(this._intervalId);\n      this._intervalId = null;\n    }\n  }\n  private _resetAutoCycle() {\n    this._stopAutoCycle();\n    this._startAutoCycle();\n  }\n  private _pauseAutoCycle(): void {\n    this._stopAutoCycle();\n  }\n\n  private _resumeAutoCycle(): void {\n    if (this.show && this.childCount > 1) {\n      this._startAutoCycle();\n    }\n  }\n  render() {\n    return html`\n      <div\n        class=\"${classMap({\n          banner: true\n        })}\"\n        role=\"alert\"\n        aria-hidden=${this.show ? \"false\" : \"true\"}\n      >\n        <div class=\"content\">\n          <slot id=\"loop-slot\"></slot>\n        </div>\n        ${this.childCount > 1\n          ? html` <div class=\"pagination\">\n              <sgds-icon-button\n                name=\"chevron-left\"\n                tone=\"fixed-light\"\n                variant=\"ghost\"\n                size=\"xs\"\n                @click=${this._prev}\n              ></sgds-icon-button>\n              <span>${this._currentIndex + 1}/${this.childCount}</span>\n              <sgds-icon-button\n                name=\"chevron-right\"\n                tone=\"fixed-light\"\n                variant=\"ghost\"\n                size=\"xs\"\n                @click=${this._next}\n              ></sgds-icon-button>\n            </div>`\n          : nothing}\n        ${this.dismissible\n          ? html`\n              <sgds-close-button aria-label=\"close the alert\" @click=${this.close} tone=\"fixed-light\"></sgds-close-button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSystemBanner;\n\nsetDefaultAnimation(\"banner.item.next\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(-100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\nsetDefaultAnimation(\"banner.item.prev\", {\n  keyframes: [\n    { opacity: 0, transform: \"translateY(100%)\" },\n    { opacity: 1, transform: \"translateY(0)\" }\n  ],\n  options: {\n    duration: 500,\n    easing: \"cubic-bezier(0.45,0.05,0.55,0.95)\"\n  }\n});\n"],"names":["alertBannerStyles"],"mappings":"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"}

package/components/SystemBanner/system-banner-context.d.ts

@@ -0,0 +1,3 @@
+export declare const SystemBannerChildCountContext: {
+    __context__: boolean;
+};

package/components/SystemBanner/system-banner-context.js

@@ -0,0 +1,6 @@
+import { createContext } from '@lit/context';
+
+const SystemBannerChildCountContext = createContext("system-banner-children-count-context");
+
+export { SystemBannerChildCountContext };
+//# sourceMappingURL=system-banner-context.js.map

package/components/SystemBanner/system-banner-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-banner-context.js","sources":["../../../src/components/SystemBanner/system-banner-context.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\n\nexport const SystemBannerChildCountContext = createContext<boolean>(\"system-banner-children-count-context\");\n"],"names":[],"mappings":";;MAEa,6BAA6B,GAAG,aAAa,CAAU,sCAAsC;;;;"}

package/components/SystemBanner/system-banner-item.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`:host{display:block;font-size:var(--sgds-font-size-1,14px);font-style:normal;font-weight:var(--sgds-font-weight-regular,400);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-20,20px);width:inherit}.banner-item{color:var(--sgds-color-fixed-light);display:flex;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-2-xs) 0}.message{line-clamp:5;-webkit-line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*5);overflow:hidden;word-break:break-all}.message.truncated:after{background-color:var(--sgds-surface-fixed-dark);bottom:0;content:"";height:var(--sgds-line-height-20,20px);position:absolute;right:0;text-align:right;width:10ch}.clamped-container{display:inline-block;margin-right:var(--sgds-margin-md);max-width:var(--sgds-dimension-872);position:relative}.show-more{bottom:0;position:absolute;right:0;white-space:nowrap}.show-more__link{cursor:pointer;text-decoration:underline}.action{align-items:center;display:flex;gap:var(--sgds-gap-2-xs,4px);margin-top:6px;min-height:var(--sgds-line-height-20);white-space:nowrap}slot[name=action]::slotted(a){color:var(--sgds-color-fixed-light)!important;font-size:var(--sgds-font-size-1,14px)!important;text-decoration:none!important}.banner-item__message_and__action{display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-xs)}@media (min-width:512px){.banner-item__message_and__action{flex-direction:row;gap:var(--sgds-gap-sm)}.action{margin-left:auto;margin-top:0}.message{line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;max-height:calc(var(--sgds-line-height-20, 20px)*2);overflow:hidden;word-break:break-all}}`;
+
+export { css_248z as default };
+//# sourceMappingURL=system-banner-item.js.map

package/components/SystemBanner/system-banner-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-banner-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/components/SystemBanner/system-banner.js

@@ -0,0 +1,6 @@
+import { css } from 'lit';
+
+var css_248z = css`.banner{align-items:center;background-color:var(--sgds-surface-fixed-dark);color:var(--sgds-color-fixed-light);display:flex;flex-direction:row;gap:var(--sgds-gap-xl);min-height:var(--sgds-dimension-64);padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl);position:relative}.content{flex:1;overflow:hidden;width:100%}::slotted(sgds-system-banner-item){display:none;flex:0 0 100%;opacity:0}::slotted(sgds-system-banner-item[active]){display:block;opacity:1}.pagination{align-items:center;bottom:12px;display:flex;font-size:var(--sgds-font-size-0);font-weight:var(--sgds-font-weight-regular,400);gap:var(--sgds-gap-2-xs);letter-spacing:var(--sgds-letter-spacing-normal,0);line-height:var(--sgds-line-height-16,16px);position:absolute;right:20px}.d-none{display:none}sgds-close-button{position:absolute;right:20px;top:10px}@media (min-width:512px){.pagination,sgds-close-button{position:static}}`;
+
+export { css_248z as default };
+//# sourceMappingURL=system-banner.js.map

package/components/SystemBanner/system-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"system-banner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}