@oicl/openbridge-webcomponents 2.1.0-next.1 → 2.1.0-next.2

package/dist/building-blocks/alert-list/alert-list-base.d.ts

@@ -0,0 +1,60 @@
+import { CSSResultGroup, LitElement, PropertyValues } from 'lit';
+import '../../components/scrollbar/scrollbar.js';
+/** What an empty alert list shows where its `empty-*` slots are left unfilled. */
+export interface AlertListEmptyFallback {
+    icon?: unknown;
+    title?: unknown;
+}
+/**
+ * `ObcAlertListBase` – Scrolling list of slotted alert items that animates items
+ * into place and shows an empty state when no item passes its filter.
+ *
+ * Not registered as an element: the subclasses decide which items pass.
+ * `obc-alert-list` runs a predicate the consumer sets.
+ *
+ * ### Features
+ * - **Filter:** `matchesFilter()` decides which items count; the list re-reads
+ *   it when items are added or removed, when an item attribute named by
+ *   `observedItemAttributes` changes, and when `filterChanged()` reports a
+ *   change of the subclass's filter inputs.
+ * - **Motion:** items that move slide to their new place; new items play
+ *   their intro animation once the list has been seen.
+ * - **Empty state:** icon, title and description slots, with fallback content
+ *   from `emptyFallback`.
+ * - **Visible items:** `getVisibleElements()` returns the items that pass the
+ *   filter and sit inside the scroll viewport.
+ */
+export declare class ObcAlertListBase extends LitElement {
+    private oldElementTop;
+    private mutationObserver;
+    private intersectionObserver;
+    private hasRenderedPanel;
+    _empty: boolean;
+    protected alertItems: HTMLElement[];
+    private scrollbar;
+    /** Whether the list counts an item as one it shows. */
+    protected matchesFilter(_item: HTMLElement): boolean;
+    /** Whether this update changed what `matchesFilter` decides. */
+    protected filterChanged(_changed: PropertyValues): boolean;
+    /** Item attributes whose changes can change what `matchesFilter` decides. */
+    protected get observedItemAttributes(): string[];
+    protected get emptyFallback(): AlertListEmptyFallback;
+    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(_changedProperties: PropertyValues): void;
+    /** Runs whenever the items or the filter change; a subclass extends it to act on each item. */
+    protected applyFilter(): void;
+    private getAlertItems;
+    private updateOldElementTop;
+    private setupMutationObserver;
+    private handleSlotChange;
+    private handleElementsChange;
+    getVisibleElements(): {
+        element: HTMLElement;
+        index: number;
+    }[];
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: CSSResultGroup;
+}
+//# sourceMappingURL=alert-list-base.d.ts.map

package/dist/building-blocks/alert-list/alert-list-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-list-base.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/alert-list/alert-list-base.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,UAAU,EACV,cAAc,EAIf,MAAM,KAAK,CAAC;AAGb,OAAO,yCAAyC,CAAC;AAIjD,kFAAkF;AAClF,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,gBAAiB,SAAQ,UAAU;IAC9C,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,oBAAoB,CAAqC;IACjE,OAAO,CAAC,gBAAgB,CAAS;IACxB,MAAM,UAAS;IAGxB,SAAS,CAAC,UAAU,EAAG,WAAW,EAAE,CAAC;IAGrC,OAAO,CAAC,SAAS,CAAgB;IAEjC,uDAAuD;IACvD,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAIpD,gEAAgE;IAChE,SAAS,CAAC,aAAa,CAAC,QAAQ,EAAE,cAAc,GAAG,OAAO;IAI1D,6EAA6E;IAC7E,SAAS,KAAK,sBAAsB,IAAI,MAAM,EAAE,CAE/C;IAED,SAAS,KAAK,aAAa,IAAI,sBAAsB,CAEpD;IAEQ,YAAY;IAKZ,iBAAiB;IAcjB,oBAAoB;cAYV,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOvE,+FAA+F;IAC/F,SAAS,CAAC,WAAW;IAIrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,oBAAoB;IAgDrB,kBAAkB,IAAI;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE;IA4B3D,MAAM;IAsBf,OAAgB,MAAM,EAAE,cAAc,CAA2B;CAClE"}

package/dist/building-blocks/alert-list/alert-list-base.js

@@ -0,0 +1,191 @@
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
+import alert_list_default from "./alert-list.css.js";
+import "../../components/scrollbar/scrollbar.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { query, queryAssignedElements, state } from "lit/decorators.js";
+//#region src/building-blocks/alert-list/alert-list-base.ts
+/**
+* `ObcAlertListBase` – Scrolling list of slotted alert items that animates items
+* into place and shows an empty state when no item passes its filter.
+*
+* Not registered as an element: the subclasses decide which items pass.
+* `obc-alert-list` runs a predicate the consumer sets.
+*
+* ### Features
+* - **Filter:** `matchesFilter()` decides which items count; the list re-reads
+*   it when items are added or removed, when an item attribute named by
+*   `observedItemAttributes` changes, and when `filterChanged()` reports a
+*   change of the subclass's filter inputs.
+* - **Motion:** items that move slide to their new place; new items play
+*   their intro animation once the list has been seen.
+* - **Empty state:** icon, title and description slots, with fallback content
+*   from `emptyFallback`.
+* - **Visible items:** `getVisibleElements()` returns the items that pass the
+*   filter and sit inside the scroll viewport.
+*/
+var ObcAlertListBase = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.oldElementTop = /* @__PURE__ */ new Map();
+		this.mutationObserver = null;
+		this.intersectionObserver = null;
+		this.hasRenderedPanel = false;
+		this._empty = false;
+	}
+	/** Whether the list counts an item as one it shows. */
+	matchesFilter(_item) {
+		return true;
+	}
+	/** Whether this update changed what `matchesFilter` decides. */
+	filterChanged(_changed) {
+		return false;
+	}
+	/** Item attributes whose changes can change what `matchesFilter` decides. */
+	get observedItemAttributes() {
+		return ["status", "shelved"];
+	}
+	get emptyFallback() {
+		return {};
+	}
+	firstUpdated() {
+		this.applyFilter();
+		this.setupMutationObserver();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		const intersectionObserver = new IntersectionObserver((entries) => {
+			if (entries[0].intersectionRatio === 0) this.hasRenderedPanel = false;
+		});
+		intersectionObserver.observe(this);
+		this.intersectionObserver = intersectionObserver;
+		this.setupMutationObserver();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.mutationObserver) {
+			this.mutationObserver.disconnect();
+			this.mutationObserver = null;
+		}
+		if (this.intersectionObserver) {
+			this.intersectionObserver.disconnect();
+			this.intersectionObserver = null;
+		}
+	}
+	willUpdate(_changedProperties) {
+		if (this.filterChanged(_changedProperties)) {
+			this.applyFilter();
+			this.updateOldElementTop();
+		}
+	}
+	/** Runs whenever the items or the filter change; a subclass extends it to act on each item. */
+	applyFilter() {
+		this._empty = this.getAlertItems().length === 0;
+	}
+	getAlertItems() {
+		return this.alertItems.filter((item) => this.matchesFilter(item));
+	}
+	updateOldElementTop() {
+		const elements = this.getAlertItems();
+		if (elements.length === 0) return;
+		let top = elements[0].getBoundingClientRect().top;
+		this.oldElementTop.clear();
+		elements.forEach((element) => {
+			const elementRect = element.getBoundingClientRect();
+			if (elementRect.height === 0) return;
+			this.oldElementTop.set(element, top);
+			top += elementRect.height;
+		});
+	}
+	setupMutationObserver() {
+		if (this.mutationObserver) {
+			this.mutationObserver.disconnect();
+			this.mutationObserver = null;
+		}
+		this.mutationObserver = new MutationObserver(() => {
+			this.handleElementsChange();
+		});
+		this.alertItems.forEach((element) => {
+			this.mutationObserver?.observe(element, {
+				attributes: true,
+				attributeFilter: this.observedItemAttributes
+			});
+		});
+	}
+	handleSlotChange() {
+		this.handleElementsChange();
+		this.setupMutationObserver();
+	}
+	handleElementsChange() {
+		this.mutationObserver?.takeRecords();
+		this.applyFilter();
+		if (!this.checkVisibility()) return;
+		const elements = this.getAlertItems();
+		const oldElementTop = new Map(this.oldElementTop);
+		requestAnimationFrame(() => {
+			this.updateOldElementTop();
+			let hasNewElements = false;
+			elements.forEach((element) => {
+				const elementRect = element.getBoundingClientRect();
+				const oldTop = oldElementTop.get(element);
+				if (oldTop === void 0) {
+					element.animateIntro = this.hasRenderedPanel;
+					hasNewElements = true;
+					setTimeout(() => {
+						element.animateIntro = false;
+					}, 101);
+					return;
+				}
+				const diff = oldTop - elementRect.top;
+				if (diff === 0) return;
+				element.style.transform = `translateY(${diff}px)`;
+				element.style.transition = "none";
+				element.offsetHeight;
+				element.style.transition = "transform 100ms ease-in-out";
+				element.style.transform = "translateY(0px)";
+			});
+			this.hasRenderedPanel = true;
+			if (hasNewElements) setTimeout(() => {
+				this.updateOldElementTop();
+			}, 101);
+		});
+	}
+	getVisibleElements() {
+		const scrollbarRect = this.scrollbar.getBoundingClientRect();
+		return this.getAlertItems().map((element, index) => ({
+			element,
+			index
+		})).filter(({ element }) => {
+			const style = window.getComputedStyle(element);
+			if (style.display === "none" || style.visibility === "hidden") return false;
+			const elementRect = element.getBoundingClientRect();
+			return !(elementRect.top < scrollbarRect.top || elementRect.bottom > scrollbarRect.bottom);
+		});
+	}
+	render() {
+		const fallback = this.emptyFallback;
+		return html` <obc-scrollbar class="alert-list" id="scrollbar">
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      ${this._empty ? html` <div class="empty-list">
+              <div class="icon">
+                <slot name="empty-icon">${fallback.icon}</slot>
+              </div>
+              <div class="empty-title">
+                <slot name="empty-title">${fallback.title}</slot>
+              </div>
+              <div class="empty-description">
+                <slot name="empty-description"></slot>
+              </div>
+            </div>` : nothing}
+    </obc-scrollbar>`;
+	}
+	static {
+		this.styles = unsafeCSS(alert_list_default);
+	}
+};
+__decorate([state()], ObcAlertListBase.prototype, "_empty", void 0);
+__decorate([queryAssignedElements({ flatten: true })], ObcAlertListBase.prototype, "alertItems", void 0);
+__decorate([query("#scrollbar", true)], ObcAlertListBase.prototype, "scrollbar", void 0);
+//#endregion
+export { ObcAlertListBase };
+
+//# sourceMappingURL=alert-list-base.js.map

package/dist/building-blocks/alert-list/alert-list-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-list-base.js","names":[],"sources":["../../../src/building-blocks/alert-list/alert-list-base.ts"],"sourcesContent":["import {\n  CSSResultGroup,\n  LitElement,\n  PropertyValues,\n  html,\n  nothing,\n  unsafeCSS,\n} from 'lit';\nimport {queryAssignedElements, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-list.css?inline';\nimport '../../components/scrollbar/scrollbar.js';\nimport {ObcScrollbar} from '../../components/scrollbar/scrollbar.js';\nimport {ObcAlertMenuItem} from '../../components/alert-menu-item/alert-menu-item.js';\n\n/** What an empty alert list shows where its `empty-*` slots are left unfilled. */\nexport interface AlertListEmptyFallback {\n  icon?: unknown;\n  title?: unknown;\n}\n\n/**\n * `ObcAlertListBase` – Scrolling list of slotted alert items that animates items\n * into place and shows an empty state when no item passes its filter.\n *\n * Not registered as an element: the subclasses decide which items pass.\n * `obc-alert-list` runs a predicate the consumer sets.\n *\n * ### Features\n * - **Filter:** `matchesFilter()` decides which items count; the list re-reads\n *   it when items are added or removed, when an item attribute named by\n *   `observedItemAttributes` changes, and when `filterChanged()` reports a\n *   change of the subclass's filter inputs.\n * - **Motion:** items that move slide to their new place; new items play\n *   their intro animation once the list has been seen.\n * - **Empty state:** icon, title and description slots, with fallback content\n *   from `emptyFallback`.\n * - **Visible items:** `getVisibleElements()` returns the items that pass the\n *   filter and sit inside the scroll viewport.\n */\nexport class ObcAlertListBase extends LitElement {\n  private oldElementTop: Map<HTMLElement, number> = new Map();\n  private mutationObserver: MutationObserver | null = null;\n  private intersectionObserver: IntersectionObserver | null = null;\n  private hasRenderedPanel = false;\n  @state() _empty = false;\n\n  @queryAssignedElements({flatten: true})\n  protected alertItems!: HTMLElement[];\n\n  @query('#scrollbar', true)\n  private scrollbar!: ObcScrollbar;\n\n  /** Whether the list counts an item as one it shows. */\n  protected matchesFilter(_item: HTMLElement): boolean {\n    return true;\n  }\n\n  /** Whether this update changed what `matchesFilter` decides. */\n  protected filterChanged(_changed: PropertyValues): boolean {\n    return false;\n  }\n\n  /** Item attributes whose changes can change what `matchesFilter` decides. */\n  protected get observedItemAttributes(): string[] {\n    return ['status', 'shelved'];\n  }\n\n  protected get emptyFallback(): AlertListEmptyFallback {\n    return {};\n  }\n\n  override firstUpdated() {\n    this.applyFilter();\n    this.setupMutationObserver();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    const intersectionObserver = new IntersectionObserver((entries) => {\n      // If intersectionRatio is 0, the target is out of view\n      if (entries[0].intersectionRatio === 0) {\n        this.hasRenderedPanel = false;\n      }\n    });\n    intersectionObserver.observe(this);\n    this.intersectionObserver = intersectionObserver;\n\n    this.setupMutationObserver();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect();\n      this.intersectionObserver = null;\n    }\n  }\n\n  protected override willUpdate(_changedProperties: PropertyValues): void {\n    if (this.filterChanged(_changedProperties)) {\n      this.applyFilter();\n      this.updateOldElementTop();\n    }\n  }\n\n  /** Runs whenever the items or the filter change; a subclass extends it to act on each item. */\n  protected applyFilter() {\n    this._empty = this.getAlertItems().length === 0;\n  }\n\n  private getAlertItems() {\n    return this.alertItems.filter((item) => this.matchesFilter(item));\n  }\n\n  private updateOldElementTop() {\n    const elements = this.getAlertItems();\n    if (elements.length === 0) {\n      return;\n    }\n\n    // Get the top of the element,\n    // the element may be in an animation\n    // we therefor sum the height of each element\n    const firstElement = elements[0];\n    const firstElementRect = firstElement.getBoundingClientRect();\n    let top = firstElementRect.top;\n    this.oldElementTop.clear();\n    elements.forEach((element) => {\n      const elementRect = element.getBoundingClientRect();\n      if (elementRect.height === 0) {\n        return;\n      }\n      this.oldElementTop.set(element, top);\n      top += elementRect.height;\n    });\n  }\n\n  private setupMutationObserver() {\n    if (this.mutationObserver) {\n      // Make a new observer to avoid memory leaks\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n    this.mutationObserver = new MutationObserver(() => {\n      this.handleElementsChange();\n    });\n\n    const slotElements = this.alertItems;\n    slotElements.forEach((element) => {\n      // Earlier observed elements are just updated, and not registered twice.\n      this.mutationObserver?.observe(element, {\n        attributes: true,\n        attributeFilter: this.observedItemAttributes,\n      });\n    });\n  }\n\n  private handleSlotChange() {\n    this.handleElementsChange();\n    this.setupMutationObserver();\n  }\n\n  private handleElementsChange() {\n    // Take records to ensure the observer is not triggered again\n    this.mutationObserver?.takeRecords();\n    this.applyFilter();\n    if (!this.checkVisibility()) {\n      return;\n    }\n\n    const elements = this.getAlertItems();\n    // Animate the elements to their new positions\n    const oldElementTop: Map<HTMLElement, number> = new Map(this.oldElementTop);\n\n    requestAnimationFrame(() => {\n      this.updateOldElementTop();\n      let hasNewElements = false;\n      elements.forEach((element) => {\n        const elementRect = element.getBoundingClientRect();\n        const oldTop = oldElementTop.get(element);\n        if (oldTop === undefined) {\n          // New element\n          (element as ObcAlertMenuItem).animateIntro = this.hasRenderedPanel;\n          hasNewElements = true;\n          setTimeout(() => {\n            (element as ObcAlertMenuItem).animateIntro = false;\n          }, 101);\n          return;\n        }\n        const diff = oldTop - elementRect.top;\n        if (diff === 0) return;\n        element.style.transform = `translateY(${diff}px)`;\n        element.style.transition = 'none';\n\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- the read forces the reflow that restarts the transition\n        element.offsetHeight;\n\n        // Remove the transition after the animation is complete\n        element.style.transition = 'transform 100ms ease-in-out';\n        element.style.transform = 'translateY(0px)';\n      });\n      this.hasRenderedPanel = true;\n      if (hasNewElements) {\n        setTimeout(() => {\n          this.updateOldElementTop();\n        }, 101);\n      }\n    });\n  }\n\n  public getVisibleElements(): {element: HTMLElement; index: number}[] {\n    // Get all slotted elements in the visible tab's scrollbar\n\n    const scrollbarRect = this.scrollbar.getBoundingClientRect();\n    const slottedElements = this.getAlertItems();\n\n    // Filter for only visible elements that are within the scrollbar viewport\n    return slottedElements\n      .map((element, index) => ({element, index}))\n      .filter(({element}) => {\n        const style = window.getComputedStyle(element);\n        if (style.display === 'none' || style.visibility === 'hidden') {\n          return false;\n        }\n\n        // Check if the element is within the scrollbar's viewport\n        const elementRect = element.getBoundingClientRect();\n\n        // Check if element overlaps with scrollbar viewport\n        const isVisible = !(\n          elementRect.top < scrollbarRect.top ||\n          elementRect.bottom > scrollbarRect.bottom\n        );\n\n        return isVisible;\n      });\n  }\n\n  override render() {\n    const fallback = this.emptyFallback;\n    return html` <obc-scrollbar class=\"alert-list\" id=\"scrollbar\">\n      <slot @slotchange=${this.handleSlotChange}></slot>\n      ${\n        this._empty\n          ? html` <div class=\"empty-list\">\n              <div class=\"icon\">\n                <slot name=\"empty-icon\">${fallback.icon}</slot>\n              </div>\n              <div class=\"empty-title\">\n                <slot name=\"empty-title\">${fallback.title}</slot>\n              </div>\n              <div class=\"empty-description\">\n                <slot name=\"empty-description\"></slot>\n              </div>\n            </div>`\n          : nothing\n      }\n    </obc-scrollbar>`;\n  }\n\n  static override styles: CSSResultGroup = unsafeCSS(compentStyle);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAa,mBAAb,cAAsC,WAAW;;;EACG,KAAA,gCAAA,IAAI,IAAI;EACN,KAAA,mBAAA;EACQ,KAAA,uBAAA;EACjC,KAAA,mBAAA;EACT,KAAA,SAAA;;;CASlB,cAAwB,OAA6B;EACnD,OAAO;CACT;;CAGA,cAAwB,UAAmC;EACzD,OAAO;CACT;;CAGA,IAAc,yBAAmC;EAC/C,OAAO,CAAC,UAAU,SAAS;CAC7B;CAEA,IAAc,gBAAwC;EACpD,OAAO,CAAC;CACV;CAEA,eAAwB;EACtB,KAAK,YAAY;EACjB,KAAK,sBAAsB;CAC7B;CAEA,oBAA6B;EAC3B,MAAM,kBAAkB;EACxB,MAAM,uBAAuB,IAAI,sBAAsB,YAAY;GAEjE,IAAI,QAAQ,EAAE,CAAC,sBAAsB,GACnC,KAAK,mBAAmB;EAE5B,CAAC;EACD,qBAAqB,QAAQ,IAAI;EACjC,KAAK,uBAAuB;EAE5B,KAAK,sBAAsB;CAC7B;CAEA,uBAAgC;EAC9B,MAAM,qBAAqB;EAC3B,IAAI,KAAK,kBAAkB;GACzB,KAAK,iBAAiB,WAAW;GACjC,KAAK,mBAAmB;EAC1B;EACA,IAAI,KAAK,sBAAsB;GAC7B,KAAK,qBAAqB,WAAW;GACrC,KAAK,uBAAuB;EAC9B;CACF;CAEA,WAA8B,oBAA0C;EACtE,IAAI,KAAK,cAAc,kBAAkB,GAAG;GAC1C,KAAK,YAAY;GACjB,KAAK,oBAAoB;EAC3B;CACF;;CAGA,cAAwB;EACtB,KAAK,SAAS,KAAK,cAAc,CAAC,CAAC,WAAW;CAChD;CAEA,gBAAwB;EACtB,OAAO,KAAK,WAAW,QAAQ,SAAS,KAAK,cAAc,IAAI,CAAC;CAClE;CAEA,sBAA8B;EAC5B,MAAM,WAAW,KAAK,cAAc;EACpC,IAAI,SAAS,WAAW,GACtB;EAQF,IAAI,MAFiB,SAAS,EACL,CAAa,sBAC5B,CAAA,CAAiB;EAC3B,KAAK,cAAc,MAAM;EACzB,SAAS,SAAS,YAAY;GAC5B,MAAM,cAAc,QAAQ,sBAAsB;GAClD,IAAI,YAAY,WAAW,GACzB;GAEF,KAAK,cAAc,IAAI,SAAS,GAAG;GACnC,OAAO,YAAY;EACrB,CAAC;CACH;CAEA,wBAAgC;EAC9B,IAAI,KAAK,kBAAkB;GAEzB,KAAK,iBAAiB,WAAW;GACjC,KAAK,mBAAmB;EAC1B;EACA,KAAK,mBAAmB,IAAI,uBAAuB;GACjD,KAAK,qBAAqB;EAC5B,CAAC;EAGD,KAD0B,WACb,SAAS,YAAY;GAEhC,KAAK,kBAAkB,QAAQ,SAAS;IACtC,YAAY;IACZ,iBAAiB,KAAK;GACxB,CAAC;EACH,CAAC;CACH;CAEA,mBAA2B;EACzB,KAAK,qBAAqB;EAC1B,KAAK,sBAAsB;CAC7B;CAEA,uBAA+B;EAE7B,KAAK,kBAAkB,YAAY;EACnC,KAAK,YAAY;EACjB,IAAI,CAAC,KAAK,gBAAgB,GACxB;EAGF,MAAM,WAAW,KAAK,cAAc;EAEpC,MAAM,gBAA0C,IAAI,IAAI,KAAK,aAAa;EAE1E,4BAA4B;GAC1B,KAAK,oBAAoB;GACzB,IAAI,iBAAiB;GACrB,SAAS,SAAS,YAAY;IAC5B,MAAM,cAAc,QAAQ,sBAAsB;IAClD,MAAM,SAAS,cAAc,IAAI,OAAO;IACxC,IAAI,WAAW,KAAA,GAAW;KAExB,QAA8B,eAAe,KAAK;KAClD,iBAAiB;KACjB,iBAAiB;MACf,QAA8B,eAAe;KAC/C,GAAG,GAAG;KACN;IACF;IACA,MAAM,OAAO,SAAS,YAAY;IAClC,IAAI,SAAS,GAAG;IAChB,QAAQ,MAAM,YAAY,cAAc,KAAK;IAC7C,QAAQ,MAAM,aAAa;IAG3B,QAAQ;IAGR,QAAQ,MAAM,aAAa;IAC3B,QAAQ,MAAM,YAAY;GAC5B,CAAC;GACD,KAAK,mBAAmB;GACxB,IAAI,gBACF,iBAAiB;IACf,KAAK,oBAAoB;GAC3B,GAAG,GAAG;EAEV,CAAC;CACH;CAEA,qBAAqE;EAGnE,MAAM,gBAAgB,KAAK,UAAU,sBAAsB;EAI3D,OAHwB,KAAK,cAGtB,CAAA,CACJ,KAAK,SAAS,WAAW;GAAC;GAAS;EAAK,EAAE,CAAC,CAC3C,QAAQ,EAAC,cAAa;GACrB,MAAM,QAAQ,OAAO,iBAAiB,OAAO;GAC7C,IAAI,MAAM,YAAY,UAAU,MAAM,eAAe,UACnD,OAAO;GAIT,MAAM,cAAc,QAAQ,sBAAsB;GAQlD,OAAO,EAJL,YAAY,MAAM,cAAc,OAChC,YAAY,SAAS,cAAc;EAIvC,CAAC;CACL;CAEA,SAAkB;EAChB,MAAM,WAAW,KAAK;EACtB,OAAO,IAAI;0BACW,KAAK,iBAAiB;QAExC,KAAK,SACD,IAAI;;0CAE0B,SAAS,KAAK;;;2CAGb,SAAS,MAAM;;;;;sBAM9C,QACL;;CAEL;;EAEyC,KAAA,SAAA,UAAU,kBAAY;;AACjE;AA7NG,WAAA,CAAA,MAAM,CAAA,GAAA,iBAAA,WAAA,UAAA,KAAA,CAAA;AAEN,WAAA,CAAA,sBAAsB,EAAC,SAAS,KAAI,CAAC,CAAA,GAAA,iBAAA,WAAA,cAAA,KAAA,CAAA;AAGrC,WAAA,CAAA,MAAM,cAAc,IAAI,CAAA,GAAA,iBAAA,WAAA,aAAA,KAAA,CAAA"}

package/dist/building-blocks/alert-list/alert-list.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-list.css.js","names":[],"sources":["../../../src/building-blocks/alert-list/alert-list.css?inline"],"sourcesContent":["* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.alert-list {\n  height: 100%;\n}\n\n.empty-list {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  gap: var(--app-components-alert-menu-button-spacing);\n\n  .icon {\n    height: 96px;\n    width: 96px;\n  }\n\n  .empty-title {\n    color: var(--element-active-color);\n    @mixin font-body-active;\n  }\n\n  .empty-description {\n    color: var(--element-neutral-color);\n    @mixin font-body;\n    max-width: 344px;\n    text-align: center;\n  }\n}\n\n::slotted(*) {\n  display: block;\n  will-change: transform;\n}\n"],"mappings":""}
+{"version":3,"file":"alert-list.css.js","names":[],"sources":["../../../src/building-blocks/alert-list/alert-list.css?inline"],"sourcesContent":["* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.alert-list {\n  height: 100%;\n}\n\n.empty-list {\n  @mixin alert-list-empty;\n}\n\n::slotted(*) {\n  display: block;\n  will-change: transform;\n}\n"],"mappings":""}

package/dist/building-blocks/alert-list/alert-list.d.ts

@@ -1,37 +1,24 @@
-import { LitElement, PropertyValues } from 'lit';
-import '../../components/scrollbar/scrollbar.js';
+import { PropertyValues } from 'lit';
+import { ObcAlertListBase } from './alert-list-base.js';
 /**
+ * `<obc-alert-list>` – Scrolling list of alert items with an empty state.
+ *
+ * `filter` decides which items count: the empty state shows when none does,
+ * and `getVisibleElements()` returns only those. Hiding the other items is
+ * left to the consumer's CSS.
+ *
+ * @property filter - Predicate that picks the items the list counts as shown.
  * @slot - Default slot for the alert list items.
  * @slot empty-icon - Icon shown when the list is empty.
  * @slot empty-title - Title shown when the list is empty.
  * @slot empty-description - Description shown when the list is empty.
  * @stable
  */
-export declare class ObcAlertList extends LitElement {
+export declare class ObcAlertList extends ObcAlertListBase {
+    /** Predicate that picks the items the list counts as shown. */
     filter: (item: HTMLElement) => boolean;
-    private oldElementTop;
-    private mutationObserver;
-    private intersectionObserver;
-    private hasRenderedPanel;
-    _empty: boolean;
-    private alertItems;
-    private scrollbar;
-    firstUpdated(): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(_changedProperties: PropertyValues): void;
-    private updateEmpty;
-    private getAlertItems;
-    private updateOldElementTop;
-    private setupMutationObserver;
-    private handleSlotChange;
-    private handleElementsChange;
-    getVisibleElements(): {
-        element: HTMLElement;
-        index: number;
-    }[];
-    render(): import('lit-html').TemplateResult<1>;
-    static styles: import('lit').CSSResult;
+    protected matchesFilter(item: HTMLElement): boolean;
+    protected filterChanged(changed: PropertyValues): boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/building-blocks/alert-list/alert-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-list.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/alert-list/alert-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAIzE,OAAO,yCAAyC,CAAC;AAIjD;;;;;;GAMG;AACH,qBACa,YAAa,SAAQ,UAAU;IACZ,MAAM,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAC7D;IAEP,OAAO,CAAC,aAAa,CAAuC;IAC5D,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,oBAAoB,CAAqC;IACjE,OAAO,CAAC,gBAAgB,CAAS;IACxB,MAAM,UAAS;IAGxB,OAAO,CAAC,UAAU,CAAiB;IAGnC,OAAO,CAAC,SAAS,CAAgB;IAExB,YAAY;IAKZ,iBAAiB;IAcjB,oBAAoB;cAWV,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAOvE,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,oBAAoB;IAgDrB,kBAAkB,IAAI;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE;IA4B3D,MAAM;IAqBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"alert-list.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/alert-list/alert-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,KAAK,CAAC;AAGnC,OAAO,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAEtD;;;;;;;;;;;;;GAaG;AACH,qBACa,YAAa,SAAQ,gBAAgB;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAC7D;cAEY,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;cAIzC,aAAa,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO;CAGnE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/building-blocks/alert-list/alert-list.js

@@ -1,156 +1,21 @@
 import { customElement } from "../../decorator.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
-import alert_list_default from "./alert-list.css.js";
-import "../../components/scrollbar/scrollbar.js";
-import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { ObcAlertListBase } from "./alert-list-base.js";
+import { property } from "lit/decorators.js";
 //#region src/building-blocks/alert-list/alert-list.ts
-var ObcAlertList = class ObcAlertList extends LitElement {
+var ObcAlertList = class ObcAlertList extends ObcAlertListBase {
 	constructor(..._args) {
 		super(..._args);
 		this.filter = () => true;
-		this.oldElementTop = /* @__PURE__ */ new Map();
-		this.mutationObserver = null;
-		this.intersectionObserver = null;
-		this.hasRenderedPanel = false;
-		this._empty = false;
 	}
-	firstUpdated() {
-		this.updateEmpty();
-		this.setupMutationObserver();
+	matchesFilter(item) {
+		return this.filter(item);
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		const intersectionObserver = new IntersectionObserver((entries) => {
-			if (entries[0].intersectionRatio === 0) this.hasRenderedPanel = false;
-		});
-		intersectionObserver.observe(this);
-		this.intersectionObserver = intersectionObserver;
-		this.setupMutationObserver();
-	}
-	disconnectedCallback() {
-		if (this.mutationObserver) {
-			this.mutationObserver.disconnect();
-			this.mutationObserver = null;
-		}
-		if (this.intersectionObserver) {
-			this.intersectionObserver.disconnect();
-			this.intersectionObserver = null;
-		}
-	}
-	willUpdate(_changedProperties) {
-		if (_changedProperties.has("filter")) {
-			this.updateEmpty();
-			this.updateOldElementTop();
-		}
-	}
-	updateEmpty() {
-		this._empty = this.getAlertItems().length === 0;
-	}
-	getAlertItems() {
-		return this.alertItems.filter(this.filter);
-	}
-	updateOldElementTop() {
-		const elements = this.getAlertItems();
-		if (elements.length === 0) return;
-		let top = elements[0].getBoundingClientRect().top;
-		this.oldElementTop.clear();
-		elements.forEach((element) => {
-			const elementRect = element.getBoundingClientRect();
-			if (elementRect.height === 0) return;
-			this.oldElementTop.set(element, top);
-			top += elementRect.height;
-		});
-	}
-	setupMutationObserver() {
-		if (this.mutationObserver) {
-			this.mutationObserver.disconnect();
-			this.mutationObserver = null;
-		}
-		this.mutationObserver = new MutationObserver(() => {
-			this.handleElementsChange();
-		});
-		this.alertItems.forEach((element) => {
-			this.mutationObserver?.observe(element, {
-				attributes: true,
-				attributeFilter: ["status", "shelved"]
-			});
-		});
-	}
-	handleSlotChange() {
-		this.handleElementsChange();
-		this.setupMutationObserver();
-	}
-	handleElementsChange() {
-		this.mutationObserver?.takeRecords();
-		this.updateEmpty();
-		if (!this.checkVisibility()) return;
-		const elements = this.getAlertItems();
-		const oldElementTop = new Map(this.oldElementTop);
-		requestAnimationFrame(() => {
-			this.updateOldElementTop();
-			let hasNewElements = false;
-			elements.forEach((element) => {
-				const elementRect = element.getBoundingClientRect();
-				const oldTop = oldElementTop.get(element);
-				if (oldTop === void 0) {
-					element.animateIntro = this.hasRenderedPanel;
-					hasNewElements = true;
-					setTimeout(() => {
-						element.animateIntro = false;
-					}, 101);
-					return;
-				}
-				const diff = oldTop - elementRect.top;
-				if (diff === 0) return;
-				element.style.transform = `translateY(${diff}px)`;
-				element.style.transition = "none";
-				element.offsetHeight;
-				element.style.transition = "transform 100ms ease-in-out";
-				element.style.transform = "translateY(0px)";
-			});
-			this.hasRenderedPanel = true;
-			if (hasNewElements) setTimeout(() => {
-				this.updateOldElementTop();
-			}, 101);
-		});
-	}
-	getVisibleElements() {
-		const scrollbarRect = this.scrollbar.getBoundingClientRect();
-		return this.getAlertItems().map((element, index) => ({
-			element,
-			index
-		})).filter(({ element }) => {
-			const style = window.getComputedStyle(element);
-			if (style.display === "none" || style.visibility === "hidden") return false;
-			const elementRect = element.getBoundingClientRect();
-			return !(elementRect.top < scrollbarRect.top || elementRect.bottom > scrollbarRect.bottom);
-		});
-	}
-	render() {
-		return html` <obc-scrollbar class="alert-list" id="scrollbar">
-      <slot @slotchange=${this.handleSlotChange}></slot>
-      ${this._empty ? html` <div class="empty-list">
-              <div class="icon">
-                <slot name="empty-icon"></slot>
-              </div>
-              <div class="empty-title">
-                <slot name="empty-title"></slot>
-              </div>
-              <div class="empty-description">
-                <slot name="empty-description"></slot>
-              </div>
-            </div>` : nothing}
-    </obc-scrollbar>`;
-	}
-	static {
-		this.styles = unsafeCSS(alert_list_default);
+	filterChanged(changed) {
+		return changed.has("filter");
 	}
 };
 __decorate([property({ attribute: false })], ObcAlertList.prototype, "filter", void 0);
-__decorate([state()], ObcAlertList.prototype, "_empty", void 0);
-__decorate([queryAssignedElements({ flatten: true })], ObcAlertList.prototype, "alertItems", void 0);
-__decorate([query("#scrollbar", true)], ObcAlertList.prototype, "scrollbar", void 0);
 ObcAlertList = __decorate([customElement("obc-alert-list")], ObcAlertList);
 //#endregion
 export { ObcAlertList };

package/dist/building-blocks/alert-list/alert-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-list.js","names":[],"sources":["../../../src/building-blocks/alert-list/alert-list.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, nothing, unsafeCSS} from 'lit';\nimport {queryAssignedElements, query, property, state} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './alert-list.css?inline';\nimport '../../components/scrollbar/scrollbar.js';\nimport {ObcScrollbar} from '../../components/scrollbar/scrollbar.js';\nimport {ObcAlertMenuItem} from '../../components/alert-menu-item/alert-menu-item.js';\n\n/**\n * @slot - Default slot for the alert list items.\n * @slot empty-icon - Icon shown when the list is empty.\n * @slot empty-title - Title shown when the list is empty.\n * @slot empty-description - Description shown when the list is empty.\n * @stable\n */\n@customElement('obc-alert-list')\nexport class ObcAlertList extends LitElement {\n  @property({attribute: false}) filter: (item: HTMLElement) => boolean = () =>\n    true;\n\n  private oldElementTop: Map<HTMLElement, number> = new Map();\n  private mutationObserver: MutationObserver | null = null;\n  private intersectionObserver: IntersectionObserver | null = null;\n  private hasRenderedPanel = false;\n  @state() _empty = false;\n\n  @queryAssignedElements({flatten: true})\n  private alertItems!: HTMLElement[];\n\n  @query('#scrollbar', true)\n  private scrollbar!: ObcScrollbar;\n\n  override firstUpdated() {\n    this.updateEmpty();\n    this.setupMutationObserver();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    const intersectionObserver = new IntersectionObserver((entries) => {\n      // If intersectionRatio is 0, the target is out of view\n      if (entries[0].intersectionRatio === 0) {\n        this.hasRenderedPanel = false;\n      }\n    });\n    intersectionObserver.observe(this);\n    this.intersectionObserver = intersectionObserver;\n\n    this.setupMutationObserver();\n  }\n\n  override disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect();\n      this.intersectionObserver = null;\n    }\n  }\n\n  protected override willUpdate(_changedProperties: PropertyValues): void {\n    if (_changedProperties.has('filter')) {\n      this.updateEmpty();\n      this.updateOldElementTop();\n    }\n  }\n\n  private updateEmpty() {\n    this._empty = this.getAlertItems().length === 0;\n  }\n\n  private getAlertItems() {\n    return this.alertItems.filter(this.filter);\n  }\n\n  private updateOldElementTop() {\n    const elements = this.getAlertItems();\n    if (elements.length === 0) {\n      return;\n    }\n\n    // Get the top of the element,\n    // the element may be in an animation\n    // we therefor sum the height of each element\n    const firstElement = elements[0];\n    const firstElementRect = firstElement.getBoundingClientRect();\n    let top = firstElementRect.top;\n    this.oldElementTop.clear();\n    elements.forEach((element) => {\n      const elementRect = element.getBoundingClientRect();\n      if (elementRect.height === 0) {\n        return;\n      }\n      this.oldElementTop.set(element, top);\n      top += elementRect.height;\n    });\n  }\n\n  private setupMutationObserver() {\n    if (this.mutationObserver) {\n      // Make a new observer to avoid memory leaks\n      this.mutationObserver.disconnect();\n      this.mutationObserver = null;\n    }\n    this.mutationObserver = new MutationObserver(() => {\n      this.handleElementsChange();\n    });\n\n    const slotElements = this.alertItems;\n    slotElements.forEach((element) => {\n      // Earlier observed elements are just updated, and not registered twice.\n      this.mutationObserver?.observe(element, {\n        attributes: true,\n        attributeFilter: ['status', 'shelved'],\n      });\n    });\n  }\n\n  private handleSlotChange() {\n    this.handleElementsChange();\n    this.setupMutationObserver();\n  }\n\n  private handleElementsChange() {\n    // Take records to ensure the observer is not triggered again\n    this.mutationObserver?.takeRecords();\n    this.updateEmpty();\n    if (!this.checkVisibility()) {\n      return;\n    }\n\n    const elements = this.getAlertItems();\n    // Animate the elements to their new positions\n    const oldElementTop: Map<HTMLElement, number> = new Map(this.oldElementTop);\n\n    requestAnimationFrame(() => {\n      this.updateOldElementTop();\n      let hasNewElements = false;\n      elements.forEach((element) => {\n        const elementRect = element.getBoundingClientRect();\n        const oldTop = oldElementTop.get(element);\n        if (oldTop === undefined) {\n          // New element\n          (element as ObcAlertMenuItem).animateIntro = this.hasRenderedPanel;\n          hasNewElements = true;\n          setTimeout(() => {\n            (element as ObcAlertMenuItem).animateIntro = false;\n          }, 101);\n          return;\n        }\n        const diff = oldTop - elementRect.top;\n        if (diff === 0) return;\n        element.style.transform = `translateY(${diff}px)`;\n        element.style.transition = 'none';\n\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- the read forces the reflow that restarts the transition\n        element.offsetHeight;\n\n        // Remove the transition after the animation is complete\n        element.style.transition = 'transform 100ms ease-in-out';\n        element.style.transform = 'translateY(0px)';\n      });\n      this.hasRenderedPanel = true;\n      if (hasNewElements) {\n        setTimeout(() => {\n          this.updateOldElementTop();\n        }, 101);\n      }\n    });\n  }\n\n  public getVisibleElements(): {element: HTMLElement; index: number}[] {\n    // Get all slotted elements in the visible tab's scrollbar\n\n    const scrollbarRect = this.scrollbar.getBoundingClientRect();\n    const slottedElements = this.getAlertItems();\n\n    // Filter for only visible elements that are within the scrollbar viewport\n    return slottedElements\n      .map((element, index) => ({element, index}))\n      .filter(({element}) => {\n        const style = window.getComputedStyle(element);\n        if (style.display === 'none' || style.visibility === 'hidden') {\n          return false;\n        }\n\n        // Check if the element is within the scrollbar's viewport\n        const elementRect = element.getBoundingClientRect();\n\n        // Check if element overlaps with scrollbar viewport\n        const isVisible = !(\n          elementRect.top < scrollbarRect.top ||\n          elementRect.bottom > scrollbarRect.bottom\n        );\n\n        return isVisible;\n      });\n  }\n\n  override render() {\n    return html` <obc-scrollbar class=\"alert-list\" id=\"scrollbar\">\n      <slot @slotchange=${this.handleSlotChange}></slot>\n      ${\n        this._empty\n          ? html` <div class=\"empty-list\">\n              <div class=\"icon\">\n                <slot name=\"empty-icon\"></slot>\n              </div>\n              <div class=\"empty-title\">\n                <slot name=\"empty-title\"></slot>\n              </div>\n              <div class=\"empty-description\">\n                <slot name=\"empty-description\"></slot>\n              </div>\n            </div>`\n          : nothing\n      }\n    </obc-scrollbar>`;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-list': ObcAlertList;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"alert-list.js","names":[],"sources":["../../../src/building-blocks/alert-list/alert-list.ts"],"sourcesContent":["import {PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAlertListBase} from './alert-list-base.js';\n\n/**\n * `<obc-alert-list>` – Scrolling list of alert items with an empty state.\n *\n * `filter` decides which items count: the empty state shows when none does,\n * and `getVisibleElements()` returns only those. Hiding the other items is\n * left to the consumer's CSS.\n *\n * @property filter - Predicate that picks the items the list counts as shown.\n * @slot - Default slot for the alert list items.\n * @slot empty-icon - Icon shown when the list is empty.\n * @slot empty-title - Title shown when the list is empty.\n * @slot empty-description - Description shown when the list is empty.\n * @stable\n */\n@customElement('obc-alert-list')\nexport class ObcAlertList extends ObcAlertListBase {\n  @property({attribute: false}) filter: (item: HTMLElement) => boolean = () =>\n    true;\n\n  protected override matchesFilter(item: HTMLElement): boolean {\n    return this.filter(item);\n  }\n\n  protected override filterChanged(changed: PropertyValues): boolean {\n    return changed.has('filter');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-list': ObcAlertList;\n  }\n}\n"],"mappings":";;;;;AAoBO,IAAM,eAAN,MAAM,qBAAqB,iBAAiB;;;EAE/C,KAAA,eAAA;;CAEF,cAAiC,MAA4B;EAC3D,OAAO,KAAK,OAAO,IAAI;CACzB;CAEA,cAAiC,SAAkC;EACjE,OAAO,QAAQ,IAAI,QAAQ;CAC7B;AACF;AAVG,WAAA,CAAA,SAAS,EAAC,WAAW,MAAK,CAAC,CAAA,GAAA,aAAA,WAAA,UAAA,KAAA,CAAA;AAF7B,eAAA,WAAA,CAAA,cAAc,gBAAgB,CAAA,GAAA,YAAA"}

package/dist/components/alert-icon/alert-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert-icon/alert-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAGnE,OAAO,uCAAuC,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,aAAa,EACb,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AAMxB,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,2CAA2C,CAAC;AACnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wCAAwC,CAAC;AAChD,OAAO,6CAA6C,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,8CAA8C,CAAC;AACtD,OAAO,iDAAiD,CAAC;AACzD,OAAO,gDAAgD,CAAC;AACxD,OAAO,qDAAqD,CAAC;AAE7D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAsB5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAiGzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,SAAS,EAAE,SAAS,CAAmB;IAEvC,IAAI,CAAC,EAAE,SAAS,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEpB,aAAa,EAAE,aAAa,CAC9B;IAExB,SAAS,CAAC,QAAQ,CAAC,QAAQ,qBAGzB;IAEF,IAAI,qBAAqB,IAAI,qBAAqB,CAUjD;IAED,OAAO,KAAK,cAAc,GAKzB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,eAAe,GAW1B;IAED,IAAI,IAAI;;;;;;aA6CP;IAED,OAAO,CAAC,gBAAgB;IAoDf,MAAM;IAiBf,OAAgB,MAAM,0BAiDpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"alert-icon.d.ts","sourceRoot":"","sources":["../../../src/components/alert-icon/alert-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAGnE,OAAO,uCAAuC,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,aAAa,EACb,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AAMxB,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,2CAA2C,CAAC;AACnD,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,yCAAyC,CAAC;AACjD,OAAO,2CAA2C,CAAC;AACnD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wCAAwC,CAAC;AAChD,OAAO,6CAA6C,CAAC;AACrD,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,8CAA8C,CAAC;AACtD,OAAO,iDAAiD,CAAC;AACzD,OAAO,gDAAgD,CAAC;AACxD,OAAO,qDAAqD,CAAC;AAE7D,OAAO,oCAAoC,CAAC;AAC5C,OAAO,oCAAoC,CAAC;AAsB5C,OAAO,EAAC,kBAAkB,EAAC,MAAM,uCAAuC,CAAC;AAiGzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,YAAa,SAAQ,UAAU;IAChB,SAAS,EAAE,SAAS,CAAmB;IAEvC,IAAI,CAAC,EAAE,SAAS,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEpB,aAAa,EAAE,aAAa,CAC9B;IAExB,SAAS,CAAC,QAAQ,CAAC,QAAQ,qBAGzB;IAEF,IAAI,qBAAqB,IAAI,qBAAqB,CAUjD;IAED,OAAO,KAAK,cAAc,GAKzB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,eAAe,GAW1B;IAED,IAAI,IAAI;;;;;;aAgDP;IAED,OAAO,CAAC,gBAAgB;IAqDf,MAAM;IAiBf,OAAgB,MAAM,0BAiDpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/alert-icon/alert-icon.js

@@ -152,10 +152,11 @@ var ObcAlertIcon = class ObcAlertIcon extends LitElement {
 			case "unacknowledged": return mapping["alarm-unack"];
 			default: return null;
 		}
-		else if (this.bamType === AlertType.Warning) {
-			if (this.active === false) return mapping["warning-rectified"];
-			else if (this.acknowledged) return mapping["warning-silenced"];
-			else return mapping["warning-unack"];
+		else if (this.bamType === AlertType.Warning) switch (this._effectiveState) {
+			case "rectified": return mapping["warning-rectified"];
+			case "silenced": return mapping["warning-silenced"];
+			case "unacknowledged": return mapping["warning-unack"];
+			default: return null;
 		}
 		return null;
 	}
@@ -189,7 +190,7 @@ var ObcAlertIcon = class ObcAlertIcon extends LitElement {
 				default: return nothing;
 			}
 		}
-		return nothing;
+		return this.icon ? html`${this.icon.a}` : nothing;
 	}
 	render() {
 		if (!this._effectiveType) return html`<div>No alarm</div>`;