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

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

@@ -0,0 +1,99 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var classMap_js = require('lit/directives/class-map.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var systemBannerItem = require('./system-banner-item.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
+var systemBannerContext = require('./system-banner-context.cjs.js');
+var context = require('@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["default"] {
+    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 slot.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 lit.html `
+      <div class="banner-item">
+        <slot name="icon"></slot>
+        <div class="banner-item__message_and__action">
+          <div class="clamped-container">
+            <div class=${classMap_js.classMap({ message: true, truncated: this.clamped })}>
+              <slot></slot>
+            </div>
+            ${this.clamped
+            ? lit.html `<span class="show-more"
+                  >...<a class="show-more__link" @click="${this._handleShowMoreClick}">show more</a></span
+                >`
+            : lit.nothing}
+          </div>
+          ${this.hasActionSlot || this.siblingsCount > 1
+            ? lit.html `
+                <div class="action">
+                  <slot name="action"></slot>
+                </div>
+              `
+            : lit.nothing}
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsSystemBannerItem.styles = [...sgdsElement["default"].styles, systemBannerItem["default"]];
+tslib.__decorate([
+    decorators_js.property({ type: Boolean })
+], SgdsSystemBannerItem.prototype, "hasActionSlot", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsSystemBannerItem.prototype, "clamped", void 0);
+tslib.__decorate([
+    context.consume({ context: systemBannerContext.SystemBannerChildCountContext, subscribe: true }),
+    decorators_js.state()
+], SgdsSystemBannerItem.prototype, "siblingsCount", void 0);
+
+exports.SgdsSystemBannerItem = SgdsSystemBannerItem;
+exports["default"] = SgdsSystemBannerItem;
+//# sourceMappingURL=sgds-system-banner-item.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-system-banner-item.cjs.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":["SgdsElement","HasSlotController","html","classMap","nothing","alertBannerItemStyles","__decorate","property","state","consume","SystemBannerChildCountContext"],"mappings":"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"}

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

@@ -0,0 +1,94 @@
+'use client';
+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/react/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/react/components/SystemBanner/sgds-system-banner.cjs.js

@@ -0,0 +1,230 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var classMap_js = require('lit/directives/class-map.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var sgdsCloseButton = require('../CloseButton/sgds-close-button.cjs.js');
+var animate = require('../../utils/animate.cjs.js');
+var animationRegistry = require('../../utils/animation-registry.cjs.js');
+var watch = require('../../utils/watch.cjs.js');
+var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
+var sgdsIconButton = require('../IconButton/sgds-icon-button.cjs.js');
+var systemBanner = require('./system-banner.cjs.js');
+var systemBannerContext = require('./system-banner-context.cjs.js');
+var context = require('@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["default"] {
+    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 = animationRegistry.getAnimation(this, `banner.item.${direction}`);
+        await animate.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 lit.html `
+      <div
+        class="${classMap_js.classMap({
+            banner: true
+        })}"
+        role="alert"
+        aria-hidden=${this.show ? "false" : "true"}
+      >
+        <div class="content">
+          <slot id="loop-slot"></slot>
+        </div>
+        ${this.childCount > 1
+            ? lit.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>`
+            : lit.nothing}
+        ${this.dismissible
+            ? lit.html `
+              <sgds-close-button aria-label="close the alert" @click=${this.close} tone="fixed-light"></sgds-close-button>
+            `
+            : lit.nothing}
+      </div>
+    `;
+    }
+}
+SgdsSystemBanner.styles = [...sgdsElement["default"].styles, systemBanner["default"]];
+/**@internal */
+SgdsSystemBanner.dependencies = {
+    "sgds-close-button": sgdsCloseButton.SgdsCloseButton,
+    "sgds-icon": sgdsIcon.SgdsIcon,
+    "sgds-icon-button": sgdsIconButton.SgdsIconButton
+};
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsSystemBanner.prototype, "show", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsSystemBanner.prototype, "dismissible", void 0);
+tslib.__decorate([
+    decorators_js.queryAssignedElements({ flatten: true })
+], SgdsSystemBanner.prototype, "bannerItem", void 0);
+tslib.__decorate([
+    decorators_js.query(".banner")
+], SgdsSystemBanner.prototype, "banner", void 0);
+tslib.__decorate([
+    context.provide({ context: systemBannerContext.SystemBannerChildCountContext }),
+    decorators_js.state()
+], SgdsSystemBanner.prototype, "childCount", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsSystemBanner.prototype, "_intervalId", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsSystemBanner.prototype, "_currentIndex", void 0);
+tslib.__decorate([
+    watch.watch("show", { waitUntilFirstUpdate: true })
+], SgdsSystemBanner.prototype, "_handleShowChange", null);
+animationRegistry.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)"
+    }
+});
+animationRegistry.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)"
+    }
+});
+
+exports.SgdsSystemBanner = SgdsSystemBanner;
+exports["default"] = SgdsSystemBanner;
+//# sourceMappingURL=sgds-system-banner.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-system-banner.cjs.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":["SgdsElement","getAnimation","animateTo","html","classMap","nothing","alertBannerStyles","SgdsCloseButton","SgdsIcon","SgdsIconButton","__decorate","property","queryAssignedElements","query","provide","SystemBannerChildCountContext","state","watch","setDefaultAnimation"],"mappings":"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"}