npm - @oicl/openbridge-webcomponents - Versions diffs - 2.1.0-next.1 → 2.1.0-next.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
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;;;;;;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 CHANGED Viewed

@@ -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>`;

package/dist/components/alert-icon/alert-icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-icon.js","names":[],"sources":["../../../src/components/alert-icon/alert-icon.ts"],"sourcesContent":["import {LitElement, html, css, TemplateResult, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport {customElement} from '../../decorator.js';\nimport {\n AlertType,\n FlashingSpeed,\n type ResolvedFlashingSpeed,\n} from '../../types.js';\nimport {\n AlertFlashPhase,\n getBamAlertTypeForBlinking,\n resolveFlashingSpeed,\n} from '../../alert-severity.js';\nimport '../../icons/icon-alarm-badge-outline.js';\nimport '../../icons/icon-warning-badge-outline.js';\nimport '../../icons/icon-caution-badge-outline.js';\nimport '../../icons/icon-alarm-acknowledged-iec.js';\nimport '../../icons/icon-warning-acknowledged-iec.js';\nimport '../../icons/icon-alarm-rectified-iec.js';\nimport '../../icons/icon-warning-rectified-iec.js';\nimport '../../icons/icon-alarm-rectified-outlined.js';\nimport '../../icons/icon-warning-rectified-outlined.js';\nimport '../../icons/icon-alarm-silenced-iec.js';\nimport '../../icons/icon-alarm-silenced-outlined.js';\nimport '../../icons/icon-warning-silenced-iec.js';\nimport '../../icons/icon-warning-silenced-outlined.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport '../../icons/icon-alarm-acknowledged-outlined.js';\nimport '../../icons/icon-warning-unacknowledged-iec.js';\nimport '../../icons/icon-warning-unacknowledged-outlined.js';\n\nimport '../../icons/icon-critical-badge.js';\nimport '../alert-frame/diagnostic-badge.js';\nimport {criticalA, criticalB} from './icons/icon-critical.js';\nimport {\n criticalUnacknowledgedA,\n criticalUnacknowledgedB,\n} from './icons/icon-critical-unacknowledged.js';\nimport {\n criticalSilencedA,\n criticalSilencedB,\n} from './icons/icon-critical-silenced.js';\nimport {\n criticalRectifiedA,\n criticalRectifiedB,\n} from './icons/icon-critical-rectified.js';\nimport {criticalAcknowledged} from './icons/icon-critical-acknowledged.js';\nimport {\n lowUnacknowledgedA,\n lowUnacknowledgedB,\n} from './icons/icon-low-unacknowledged.js';\nimport {lowSilencedA, lowSilencedB} from './icons/icon-low-silenced.js';\nimport {lowRectifiedA, lowRectifiedB} from './icons/icon-low-rectified.js';\nimport {lowAcknowledged} from './icons/icon-low-acknowledged.js';\nimport {FlashingController} from '../../palettes/flashing-controller.js';\n\nenum AlertIconState {\n Silenced = 'silenced',\n Unacknowledged = 'unacknowledged',\n Acknowledged = 'acknowledged',\n Rectified = 'rectified',\n}\n\nenum AlertIconName {\n AlarmSilenced = 'alarm-silenced',\n AlarmUnack = 'alarm-unack',\n AlarmRectified = 'alarm-rectified',\n WarningUnack = 'warning-unack',\n WarningRectified = 'warning-rectified',\n WarningSilenced = 'warning-silenced',\n Critical = 'critical',\n CriticalUnack = 'critical-unack',\n CriticalSilenced = 'critical-silenced',\n CriticalRectified = 'critical-rectified',\n LowUnack = 'low-unack',\n LowSilenced = 'low-silenced',\n LowRectified = 'low-rectified',\n}\n\nconst mapping = {\n [AlertIconName.AlarmSilenced]: {\n a: html`<obi-alarm-silenced-iec usecsscolor></obi-alarm-silenced-iec>`,\n b: html`<obi-alarm-silenced-outlined\n usecsscolor\n ></obi-alarm-silenced-outlined>`,\n },\n [AlertIconName.AlarmUnack]: {\n a: html`<obi-alarm-unacknowledged-iec\n usecsscolor\n ></obi-alarm-unacknowledged-iec>`,\n b: html`<obi-alarm-acknowledged-outlined\n usecsscolor\n ></obi-alarm-acknowledged-outlined>`,\n },\n [AlertIconName.AlarmRectified]: {\n a: html`<obi-alarm-rectified-iec usecsscolor></obi-alarm-rectified-iec>`,\n b: html`<obi-alarm-rectified-outlined\n usecsscolor\n ></obi-alarm-rectified-outlined>`,\n },\n [AlertIconName.WarningUnack]: {\n a: html`<obi-warning-unacknowledged-iec\n usecsscolor\n ></obi-warning-unacknowledged-iec>`,\n b: html`<obi-warning-unacknowledged-outlined\n usecsscolor\n ></obi-warning-unacknowledged-outlined>`,\n },\n [AlertIconName.WarningRectified]: {\n a: html`<obi-warning-rectified-iec\n usecsscolor\n ></obi-warning-rectified-iec>`,\n b: html`<obi-warning-rectified-outlined\n usecsscolor\n ></obi-warning-rectified-outlined>`,\n },\n [AlertIconName.WarningSilenced]: {\n a: html`<obi-warning-silenced-iec usecsscolor></obi-warning-silenced-iec>`,\n b: html`<obi-warning-silenced-outlined\n usecsscolor\n ></obi-warning-silenced-outlined>`,\n },\n [AlertIconName.Critical]: {\n a: criticalA,\n b: criticalB,\n },\n [AlertIconName.CriticalUnack]: {\n a: criticalUnacknowledgedA,\n b: criticalUnacknowledgedB,\n },\n [AlertIconName.CriticalSilenced]: {\n a: criticalSilencedA,\n b: criticalSilencedB,\n },\n [AlertIconName.CriticalRectified]: {\n a: criticalRectifiedA,\n b: criticalRectifiedB,\n },\n [AlertIconName.LowUnack]: {\n a: lowUnacknowledgedA,\n b: lowUnacknowledgedB,\n },\n [AlertIconName.LowSilenced]: {\n a: lowSilencedA,\n b: lowSilencedB,\n },\n [AlertIconName.LowRectified]: {\n a: lowRectifiedA,\n b: lowRectifiedB,\n },\n};\n/*\n `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.\n \n Displays a specialized icon with a blinking effect to visually indicate alert or warning conditions. The icon type is determined by the `name` property, supporting both alarm and warning variants in different states (such as silenced, unacknowledged, or rectified).\n \n Appears in notification areas, alert banners, or status panels to draw attention to active or historical alert conditions. The blinking animation helps highlight urgency or status changes without requiring user interaction.\n \n ## Features\n * - Multiple Icon Types: Supports all alarm and warning types.\n * - Flashing: Two SVG layers alternate at the design tempo (fast for critical/alarm/high, slow for warning/medium, very slow for low and for every rectified alert); acknowledged icons are steady.\n * - Adaptive Styling: Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).\n * - Scalable: Designed to fit any container size; scales with its parent element.\n \n ## Usage Guidelines\n * Use `obc-alert-icon` to visually represent the status of alarms or warnings in notification panels, alert lists, or system status areas. The blinking effect is intended to draw user attention to active or recent alert conditions. Select the appropriate `name` value to match the alert state you wish to indicate.\n \n TODO(designer): Provide guidance on when to use each icon variant (e.g., when to use \"rectified\" vs. \"silenced\"), and any best practices for icon placement or blink timing.\n \n ## Properties\n * - `type` (AlertType): The type of alarm to display.\n * - `status` (AlarmStatus): The status of the alarm to display.\n \n ## Best Practices\n * - Only use the blinking alert icon for states that require immediate or prominent user attention.\n * - Ensure the icon is sized appropriately for its context (e.g., 32x32px or 64x64px for status panels).\n * - Avoid using multiple blinking icons in close proximity to prevent visual overload.\n \n ## Example\n * ```html\n * <obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>\n * ```\n \n @property flashingSpeed - Flash tempo: `default` resolves from the alert type and state,\n * `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged icons are\n * always steady.\n * @availableWhen acknowledged type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]\n * @availableWhen active type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]\n * @stable\n /\n@customElement('obc-alert-icon')\nexport class ObcAlertIcon extends LitElement {\n @property({type: String}) alertType: AlertType = AlertType.Alarm;\n / @deprecated use `alertType` instead */\n @property({type: String}) type?: AlertType;\n @property({type: Boolean}) acknowledged?: boolean;\n @property({type: Boolean}) active?: boolean;\n @property({type: Boolean}) silenced?: boolean;\n\n @property({type: String}) flashingSpeed: FlashingSpeed =\n FlashingSpeed.Default;\n\n protected readonly flashing = new FlashingController(\n this,\n () => this.resolvedFlashingSpeed\n );\n\n get resolvedFlashingSpeed(): ResolvedFlashingSpeed {\n // Caution and diagnostic have no flashing glyph pair, whatever the speed.\n if (this.acknowledged \|\| !this.icon) {\n return FlashingSpeed.Fixed;\n }\n return resolveFlashingSpeed(\n this.flashingSpeed,\n this._effectiveType,\n this.active === false ? AlertFlashPhase.Rectified : AlertFlashPhase.Active\n );\n }\n\n private get _effectiveType(): AlertType {\n if (this.type) {\n return this.type;\n }\n return this.alertType;\n }\n\n private get bamType(): AlertType {\n return getBamAlertTypeForBlinking(this._effectiveType);\n }\n\n private get _effectiveState(): AlertIconState {\n if (this.active === false) {\n return AlertIconState.Rectified;\n } else if (this.acknowledged) {\n return AlertIconState.Acknowledged;\n } else if (this.silenced) {\n return AlertIconState.Silenced;\n } else if (this.active === true) {\n return AlertIconState.Unacknowledged;\n }\n return AlertIconState.Unacknowledged;\n }\n\n get icon() {\n if (this._effectiveType === AlertType.LevelCritical) {\n switch (this._effectiveState) {\n case AlertIconState.Rectified:\n return mapping[AlertIconName.CriticalRectified];\n case AlertIconState.Silenced:\n return mapping[AlertIconName.CriticalSilenced];\n case AlertIconState.Unacknowledged:\n return mapping[AlertIconName.CriticalUnack];\n default:\n return mapping[AlertIconName.Critical];\n }\n } else if (this._effectiveType === AlertType.LevelLow) {\n switch (this._effectiveState) {\n case AlertIconState.Rectified:\n return mapping[AlertIconName.LowRectified];\n case AlertIconState.Silenced:\n return mapping[AlertIconName.LowSilenced];\n case AlertIconState.Unacknowledged:\n return mapping[AlertIconName.LowUnack];\n default:\n return mapping[AlertIconName.LowUnack];\n }\n } else if (this.bamType === AlertType.Alarm) {\n switch (this._effectiveState) {\n case AlertIconState.Rectified:\n return mapping[AlertIconName.AlarmRectified];\n case AlertIconState.Silenced:\n return mapping[AlertIconName.AlarmSilenced];\n case AlertIconState.Unacknowledged:\n return mapping[AlertIconName.AlarmUnack];\n default:\n return null;\n }\n } else if (this.bamType === AlertType.Warning) {\n if (this.active === false) {\n return mapping[AlertIconName.WarningRectified];\n } else if (this.acknowledged) {\n return mapping[AlertIconName.WarningSilenced];\n } else {\n return mapping[AlertIconName.WarningUnack];\n }\n }\n\n return null;\n }\n\n private renderStaticIcon(): TemplateResult \| typeof nothing {\n // Caution and diagnostic always show a fixed symbol, regardless of state.\n if (this._effectiveType === AlertType.Caution) {\n return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;\n }\n if (this._effectiveType === AlertType.LevelDiagnostic) {\n return html`<obi-diagnostic-badge\n style=\"color: var(--alert-diagnostic-color);\"\n ></obi-diagnostic-badge>`;\n }\n if (this._effectiveState === AlertIconState.Acknowledged) {\n if (this._effectiveType === AlertType.LevelCritical) {\n return html`${criticalAcknowledged}`;\n }\n if (this._effectiveType === AlertType.LevelLow) {\n return html`${lowAcknowledged}`;\n }\n switch (this.bamType) {\n case AlertType.Alarm:\n return html`<obi-alarm-acknowledged-iec\n usecsscolor\n ></obi-alarm-acknowledged-iec>`;\n case AlertType.Warning:\n return html`<obi-warning-acknowledged-iec\n usecsscolor\n ></obi-warning-acknowledged-iec>`;\n default:\n return nothing;\n }\n } else if (this._effectiveState === AlertIconState.Rectified) {\n if (this._effectiveType === AlertType.LevelCritical) {\n return html`${criticalRectifiedB}`;\n }\n if (this._effectiveType === AlertType.LevelLow) {\n return html`${lowRectifiedB}`;\n }\n switch (this.bamType) {\n case AlertType.Alarm:\n return html`<obi-alarm-rectified-outlined\n usecsscolor\n ></obi-alarm-rectified-outlined>`;\n case AlertType.Warning:\n return html`<obi-warning-rectified-outlined\n usecsscolor\n ></obi-warning-rectified-outlined>`;\n default:\n return nothing;\n }\n }\n return nothing;\n }\n\n override render() {\n if (!this._effectiveType) {\n return html`<div>No alarm</div>`;\n }\n const tempo = this.resolvedFlashingSpeed;\n const icons = this.icon;\n if (tempo !== FlashingSpeed.Fixed && icons) {\n return html`\n <div class=${classMap({wrapper: true, [`flash-${tempo}`]: true})}>\n <span class=\"a\">${icons.a}</span>\n <span class=\"b\">${icons.b}</span>\n </div>\n `;\n }\n return html`<div class=\"wrapper\">${this.renderStaticIcon()}</div>`;\n }\n\n static override styles = css`\n .wrapper {\n height: 100%;\n width: 100%;\n position: relative;\n\n obi-diagnostic-badge,\n obi-critical-badge {\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n svg,\n .a,\n .b {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n &.flash-fast .a {\n opacity: var(--flash-fast-on);\n }\n\n &.flash-fast .b {\n opacity: var(--flash-fast-off);\n }\n\n &.flash-slow .a {\n opacity: var(--flash-slow-on);\n }\n\n &.flash-slow .b {\n opacity: var(--flash-slow-off);\n }\n\n &.flash-very-slow .a {\n opacity: var(--flash-very-slow-on);\n }\n\n &.flash-very-slow .b {\n opacity: var(--flash-very-slow-off);\n }\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-icon': ObcAlertIcon;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"alert-icon.js","names":[],"sources":["../../../src/components/alert-icon/alert-icon.ts"],"sourcesContent":["import {LitElement, html, css, TemplateResult, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-caution-color-iec.js';\nimport {customElement} from '../../decorator.js';\nimport {\n AlertType,\n FlashingSpeed,\n type ResolvedFlashingSpeed,\n} from '../../types.js';\nimport {\n AlertFlashPhase,\n getBamAlertTypeForBlinking,\n resolveFlashingSpeed,\n} from '../../alert-severity.js';\nimport '../../icons/icon-alarm-badge-outline.js';\nimport '../../icons/icon-warning-badge-outline.js';\nimport '../../icons/icon-caution-badge-outline.js';\nimport '../../icons/icon-alarm-acknowledged-iec.js';\nimport '../../icons/icon-warning-acknowledged-iec.js';\nimport '../../icons/icon-alarm-rectified-iec.js';\nimport '../../icons/icon-warning-rectified-iec.js';\nimport '../../icons/icon-alarm-rectified-outlined.js';\nimport '../../icons/icon-warning-rectified-outlined.js';\nimport '../../icons/icon-alarm-silenced-iec.js';\nimport '../../icons/icon-alarm-silenced-outlined.js';\nimport '../../icons/icon-warning-silenced-iec.js';\nimport '../../icons/icon-warning-silenced-outlined.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport '../../icons/icon-alarm-acknowledged-outlined.js';\nimport '../../icons/icon-warning-unacknowledged-iec.js';\nimport '../../icons/icon-warning-unacknowledged-outlined.js';\n\nimport '../../icons/icon-critical-badge.js';\nimport '../alert-frame/diagnostic-badge.js';\nimport {criticalA, criticalB} from './icons/icon-critical.js';\nimport {\n criticalUnacknowledgedA,\n criticalUnacknowledgedB,\n} from './icons/icon-critical-unacknowledged.js';\nimport {\n criticalSilencedA,\n criticalSilencedB,\n} from './icons/icon-critical-silenced.js';\nimport {\n criticalRectifiedA,\n criticalRectifiedB,\n} from './icons/icon-critical-rectified.js';\nimport {criticalAcknowledged} from './icons/icon-critical-acknowledged.js';\nimport {\n lowUnacknowledgedA,\n lowUnacknowledgedB,\n} from './icons/icon-low-unacknowledged.js';\nimport {lowSilencedA, lowSilencedB} from './icons/icon-low-silenced.js';\nimport {lowRectifiedA, lowRectifiedB} from './icons/icon-low-rectified.js';\nimport {lowAcknowledged} from './icons/icon-low-acknowledged.js';\nimport {FlashingController} from '../../palettes/flashing-controller.js';\n\nenum AlertIconState {\n Silenced = 'silenced',\n Unacknowledged = 'unacknowledged',\n Acknowledged = 'acknowledged',\n Rectified = 'rectified',\n}\n\nenum AlertIconName {\n AlarmSilenced = 'alarm-silenced',\n AlarmUnack = 'alarm-unack',\n AlarmRectified = 'alarm-rectified',\n WarningUnack = 'warning-unack',\n WarningRectified = 'warning-rectified',\n WarningSilenced = 'warning-silenced',\n Critical = 'critical',\n CriticalUnack = 'critical-unack',\n CriticalSilenced = 'critical-silenced',\n CriticalRectified = 'critical-rectified',\n LowUnack = 'low-unack',\n LowSilenced = 'low-silenced',\n LowRectified = 'low-rectified',\n}\n\nconst mapping = {\n [AlertIconName.AlarmSilenced]: {\n a: html`<obi-alarm-silenced-iec usecsscolor></obi-alarm-silenced-iec>`,\n b: html`<obi-alarm-silenced-outlined\n usecsscolor\n ></obi-alarm-silenced-outlined>`,\n },\n [AlertIconName.AlarmUnack]: {\n a: html`<obi-alarm-unacknowledged-iec\n usecsscolor\n ></obi-alarm-unacknowledged-iec>`,\n b: html`<obi-alarm-acknowledged-outlined\n usecsscolor\n ></obi-alarm-acknowledged-outlined>`,\n },\n [AlertIconName.AlarmRectified]: {\n a: html`<obi-alarm-rectified-iec usecsscolor></obi-alarm-rectified-iec>`,\n b: html`<obi-alarm-rectified-outlined\n usecsscolor\n ></obi-alarm-rectified-outlined>`,\n },\n [AlertIconName.WarningUnack]: {\n a: html`<obi-warning-unacknowledged-iec\n usecsscolor\n ></obi-warning-unacknowledged-iec>`,\n b: html`<obi-warning-unacknowledged-outlined\n usecsscolor\n ></obi-warning-unacknowledged-outlined>`,\n },\n [AlertIconName.WarningRectified]: {\n a: html`<obi-warning-rectified-iec\n usecsscolor\n ></obi-warning-rectified-iec>`,\n b: html`<obi-warning-rectified-outlined\n usecsscolor\n ></obi-warning-rectified-outlined>`,\n },\n [AlertIconName.WarningSilenced]: {\n a: html`<obi-warning-silenced-iec usecsscolor></obi-warning-silenced-iec>`,\n b: html`<obi-warning-silenced-outlined\n usecsscolor\n ></obi-warning-silenced-outlined>`,\n },\n [AlertIconName.Critical]: {\n a: criticalA,\n b: criticalB,\n },\n [AlertIconName.CriticalUnack]: {\n a: criticalUnacknowledgedA,\n b: criticalUnacknowledgedB,\n },\n [AlertIconName.CriticalSilenced]: {\n a: criticalSilencedA,\n b: criticalSilencedB,\n },\n [AlertIconName.CriticalRectified]: {\n a: criticalRectifiedA,\n b: criticalRectifiedB,\n },\n [AlertIconName.LowUnack]: {\n a: lowUnacknowledgedA,\n b: lowUnacknowledgedB,\n },\n [AlertIconName.LowSilenced]: {\n a: lowSilencedA,\n b: lowSilencedB,\n },\n [AlertIconName.LowRectified]: {\n a: lowRectifiedA,\n b: lowRectifiedB,\n },\n};\n/*\n `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.\n \n Displays a specialized icon with a blinking effect to visually indicate alert or warning conditions. The icon type is determined by the `name` property, supporting both alarm and warning variants in different states (such as silenced, unacknowledged, or rectified).\n \n Appears in notification areas, alert banners, or status panels to draw attention to active or historical alert conditions. The blinking animation helps highlight urgency or status changes without requiring user interaction.\n \n ## Features\n * - Multiple Icon Types: Supports all alarm and warning types.\n * - Flashing: Two SVG layers alternate at the design tempo (fast for critical/alarm/high, slow for warning/medium, very slow for low and for every rectified alert); acknowledged icons are steady.\n * - Adaptive Styling: Applies different CSS variables for alarm and warning types to allow for distinct visual cues (e.g., color, blink timing).\n * - Scalable: Designed to fit any container size; scales with its parent element.\n \n ## Usage Guidelines\n * Use `obc-alert-icon` to visually represent the status of alarms or warnings in notification panels, alert lists, or system status areas. The blinking effect is intended to draw user attention to active or recent alert conditions. Select the appropriate `name` value to match the alert state you wish to indicate.\n \n TODO(designer): Provide guidance on when to use each icon variant (e.g., when to use \"rectified\" vs. \"silenced\"), and any best practices for icon placement or blink timing.\n \n ## Properties\n * - `type` (AlertType): The type of alarm to display.\n * - `status` (AlarmStatus): The status of the alarm to display.\n \n ## Best Practices\n * - Only use the blinking alert icon for states that require immediate or prominent user attention.\n * - Ensure the icon is sized appropriately for its context (e.g., 32x32px or 64x64px for status panels).\n * - Avoid using multiple blinking icons in close proximity to prevent visual overload.\n \n ## Example\n * ```html\n * <obc-alert-icon .alarmType=${alarm.type} .alarmStatus=${alarm.status}></obc-alert-icon>\n * ```\n \n @property flashingSpeed - Flash tempo: `default` resolves from the alert type and state,\n * `fast`, `slow`, `very-slow` force a tempo, `fixed` never flashes. Acknowledged icons are\n * always steady.\n * @availableWhen acknowledged type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]\n * @availableWhen active type in [Alarm, Warning, LevelCritical, LevelHigh, LevelMedium, LevelLow]\n * @stable\n /\n@customElement('obc-alert-icon')\nexport class ObcAlertIcon extends LitElement {\n @property({type: String}) alertType: AlertType = AlertType.Alarm;\n / @deprecated use `alertType` instead */\n @property({type: String}) type?: AlertType;\n @property({type: Boolean}) acknowledged?: boolean;\n @property({type: Boolean}) active?: boolean;\n @property({type: Boolean}) silenced?: boolean;\n\n @property({type: String}) flashingSpeed: FlashingSpeed =\n FlashingSpeed.Default;\n\n protected readonly flashing = new FlashingController(\n this,\n () => this.resolvedFlashingSpeed\n );\n\n get resolvedFlashingSpeed(): ResolvedFlashingSpeed {\n // Caution and diagnostic have no flashing glyph pair, whatever the speed.\n if (this.acknowledged \|\| !this.icon) {\n return FlashingSpeed.Fixed;\n }\n return resolveFlashingSpeed(\n this.flashingSpeed,\n this._effectiveType,\n this.active === false ? AlertFlashPhase.Rectified : AlertFlashPhase.Active\n );\n }\n\n private get _effectiveType(): AlertType {\n if (this.type) {\n return this.type;\n }\n return this.alertType;\n }\n\n private get bamType(): AlertType {\n return getBamAlertTypeForBlinking(this._effectiveType);\n }\n\n private get _effectiveState(): AlertIconState {\n if (this.active === false) {\n return AlertIconState.Rectified;\n } else if (this.acknowledged) {\n return AlertIconState.Acknowledged;\n } else if (this.silenced) {\n return AlertIconState.Silenced;\n } else if (this.active === true) {\n return AlertIconState.Unacknowledged;\n }\n return AlertIconState.Unacknowledged;\n }\n\n get icon() {\n if (this._effectiveType === AlertType.LevelCritical) {\n switch (this._effectiveState) {\n case AlertIconState.Rectified:\n return mapping[AlertIconName.CriticalRectified];\n case AlertIconState.Silenced:\n return mapping[AlertIconName.CriticalSilenced];\n case AlertIconState.Unacknowledged:\n return mapping[AlertIconName.CriticalUnack];\n default:\n return mapping[AlertIconName.Critical];\n }\n } else if (this._effectiveType === AlertType.LevelLow) {\n switch (this._effectiveState) {\n case AlertIconState.Rectified:\n return mapping[AlertIconName.LowRectified];\n case AlertIconState.Silenced:\n return mapping[AlertIconName.LowSilenced];\n case AlertIconState.Unacknowledged:\n return mapping[AlertIconName.LowUnack];\n default:\n return mapping[AlertIconName.LowUnack];\n }\n } else if (this.bamType === AlertType.Alarm) {\n switch (this._effectiveState) {\n case AlertIconState.Rectified:\n return mapping[AlertIconName.AlarmRectified];\n case AlertIconState.Silenced:\n return mapping[AlertIconName.AlarmSilenced];\n case AlertIconState.Unacknowledged:\n return mapping[AlertIconName.AlarmUnack];\n default:\n return null;\n }\n } else if (this.bamType === AlertType.Warning) {\n switch (this._effectiveState) {\n case AlertIconState.Rectified:\n return mapping[AlertIconName.WarningRectified];\n case AlertIconState.Silenced:\n return mapping[AlertIconName.WarningSilenced];\n case AlertIconState.Unacknowledged:\n return mapping[AlertIconName.WarningUnack];\n default:\n return null;\n }\n }\n\n return null;\n }\n\n private renderStaticIcon(): TemplateResult \| typeof nothing {\n // Caution and diagnostic always show a fixed symbol, regardless of state.\n if (this._effectiveType === AlertType.Caution) {\n return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;\n }\n if (this._effectiveType === AlertType.LevelDiagnostic) {\n return html`<obi-diagnostic-badge\n style=\"color: var(--alert-diagnostic-color);\"\n ></obi-diagnostic-badge>`;\n }\n if (this._effectiveState === AlertIconState.Acknowledged) {\n if (this._effectiveType === AlertType.LevelCritical) {\n return html`${criticalAcknowledged}`;\n }\n if (this._effectiveType === AlertType.LevelLow) {\n return html`${lowAcknowledged}`;\n }\n switch (this.bamType) {\n case AlertType.Alarm:\n return html`<obi-alarm-acknowledged-iec\n usecsscolor\n ></obi-alarm-acknowledged-iec>`;\n case AlertType.Warning:\n return html`<obi-warning-acknowledged-iec\n usecsscolor\n ></obi-warning-acknowledged-iec>`;\n default:\n return nothing;\n }\n } else if (this._effectiveState === AlertIconState.Rectified) {\n if (this._effectiveType === AlertType.LevelCritical) {\n return html`${criticalRectifiedB}`;\n }\n if (this._effectiveType === AlertType.LevelLow) {\n return html`${lowRectifiedB}`;\n }\n switch (this.bamType) {\n case AlertType.Alarm:\n return html`<obi-alarm-rectified-outlined\n usecsscolor\n ></obi-alarm-rectified-outlined>`;\n case AlertType.Warning:\n return html`<obi-warning-rectified-outlined\n usecsscolor\n ></obi-warning-rectified-outlined>`;\n default:\n return nothing;\n }\n }\n // Steady but still owed an ACK, such as with a `fixed` flashing speed.\n return this.icon ? html`${this.icon.a}` : nothing;\n }\n\n override render() {\n if (!this._effectiveType) {\n return html`<div>No alarm</div>`;\n }\n const tempo = this.resolvedFlashingSpeed;\n const icons = this.icon;\n if (tempo !== FlashingSpeed.Fixed && icons) {\n return html`\n <div class=${classMap({wrapper: true, [`flash-${tempo}`]: true})}>\n <span class=\"a\">${icons.a}</span>\n <span class=\"b\">${icons.b}</span>\n </div>\n `;\n }\n return html`<div class=\"wrapper\">${this.renderStaticIcon()}</div>`;\n }\n\n static override styles = css`\n .wrapper {\n height: 100%;\n width: 100%;\n position: relative;\n\n obi-diagnostic-badge,\n obi-critical-badge {\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n svg,\n .a,\n .b {\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n &.flash-fast .a {\n opacity: var(--flash-fast-on);\n }\n\n &.flash-fast .b {\n opacity: var(--flash-fast-off);\n }\n\n &.flash-slow .a {\n opacity: var(--flash-slow-on);\n }\n\n &.flash-slow .b {\n opacity: var(--flash-slow-off);\n }\n\n &.flash-very-slow .a {\n opacity: var(--flash-very-slow-on);\n }\n\n &.flash-very-slow .b {\n opacity: var(--flash-very-slow-off);\n }\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-icon': ObcAlertIcon;\n }\n}\n"],"mappings":"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"}

package/dist/components/alert-list-details/alert-list-details.css.js CHANGED Viewed

@@ -60,7 +60,6 @@ obc-table::part(grid) {
 .empty-list .icon {
     height: 96px;
     width: 96px;
-    color: var(--on-flat-neutral-color);
   }
 .empty-list .empty-title {
@@ -88,6 +87,10 @@ obc-table::part(grid) {
     max-width: 344px;
     text-align: center;
   }
+.empty-list .icon {
+    color: var(--on-flat-neutral-color);
+  }
 `;
 //#endregion
 export { alert_list_details_default as default };

package/dist/components/alert-list-details/alert-list-details.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-list-details.css.js","names":[],"sources":["../../../src/components/alert-list-details/alert-list-details.css?inline"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n user-select: none;\n}\n\n.alert-list {\n min-height: 0;\n flex-grow: 0;\n}\n\n.spacer {\n flex-grow: 1;\n}\n\n.action {\n display: flex;\n height: var(--app-components-tool-bar-touch-target-size);\n padding: 0px var(--app-components-alert-toolbar-margin-horizontal);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-divider-color);\n background: var(--container-section-color);\n box-shadow: var(--shadow-flat);\n\n .btn-group {\n display: flex;\n }\n}\n\nobc-table::part(grid) {\n grid-template-columns: 1fr repeat(4, min-content);\n}\n\n.wrapper.small obc-table::part(grid) {\n grid-template-columns: 1fr min-content var(\n --app-components-alert-table-row-ack-container-width-small\n );\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~~ color: var(--on-flat-neutral-color);\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~~"],"mappings":""}
1	+ {"version":3,"file":"alert-list-details.css.js","names":[],"sources":["../../../src/components/alert-list-details/alert-list-details.css?inline"],"sourcesContent":[".wrapper {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n user-select: none;\n}\n\n.alert-list {\n min-height: 0;\n flex-grow: 0;\n}\n\n.spacer {\n flex-grow: 1;\n}\n\n.action {\n display: flex;\n height: var(--app-components-tool-bar-touch-target-size);\n padding: 0px var(--app-components-alert-toolbar-margin-horizontal);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n flex-grow: 0;\n border-top: 1px solid var(--border-divider-color);\n background: var(--container-section-color);\n box-shadow: var(--shadow-flat);\n\n .btn-group {\n display: flex;\n }\n}\n\nobc-table::part(grid) {\n grid-template-columns: 1fr repeat(4, min-content);\n}\n\n.wrapper.small obc-table::part(grid) {\n grid-template-columns: 1fr min-content var(\n --app-components-alert-table-row-ack-container-width-small\n );\n}\n\n.empty-list {\n @mixin alert-list-empty;\n\n .icon {\n color: var(--on-flat-neutral-color);\n }\n}\n"],"mappings":""}

package/dist/components/alert-menu/alert-menu.css.js CHANGED Viewed

@@ -77,52 +77,13 @@ var alert_menu_default = css`* {
     min-width: 120px;
   }
-.empty-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: var(--app-components-alert-menu-button-spacing);
-}
-.empty-list .icon {
-    height: 96px;
-    width: 96px;
-  }
-.empty-list .empty-title {
-    color: var(--element-active-color);
-    font-family: var(--global-typography-font-family);
-    font-weight: var(--global-typography-ui-body-active-font-weight);
-    font-size: var(--global-typography-ui-body-active-font-size);
-    line-height: var(--global-typography-ui-body-active-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-  }
-.empty-list .empty-description {
-    color: var(--element-neutral-color);
-    font-family: var(--global-typography-font-family);
-    font-weight: var(--global-typography-ui-body-font-weight);
-    font-size: var(--global-typography-ui-body-font-size);
-    line-height: var(--global-typography-ui-body-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-    max-width: 344px;
-    text-align: center;
-  }
 ::slotted(*) {
   display: block;
   will-change: transform;
 }
-.alert-list.all ::slotted([shelved]) {
+.alert-list.all ::slotted([shelved]),
+.alert-list.all ::slotted([status="rectified-unacknowledged"]) {
   display: none;
 }
@@ -130,7 +91,7 @@ var alert_menu_default = css`* {
   display: none;
 }
-.alert-list.unacked ::slotted(:not([status="unacknowledged"])),.alert-list.unacked ::slotted([shelved]) {
+.alert-list.unacked ::slotted(:not([status="unacknowledged"]):not([status="rectified-unacknowledged"])),.alert-list.unacked ::slotted([shelved]) {
     display: none;
   }
 `;

package/dist/components/alert-menu/alert-menu.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-menu.css.js","names":[],"sources":["../../../src/components/alert-menu/alert-menu.css?inline"],"sourcesContent":["@mixin soft-dismiss;\n\n* {\n box-sizing: border-box;\n}\n\n.wrapper {\n width: var(--app-components-alert-menu-width);\n height: 560px;\n max-width: 100vw;\n}\n\n.container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.alert-list {\n flex-shrink: 1;\n flex-grow: 1;\n min-height: 0;\n overflow: hidden;\n position: relative;\n}\n\n.action {\n display: flex;\n min-height: var(--app-components-alert-menu-footer-container-height);\n padding: calc(\n (\n var(--app-components-alert-menu-footer-container-height) -\n var(--ui-components-button-touch-target-size) - 2px\n ) /\n 2\n )\n var(--app-components-alert-menu-footer-padding-horizontal);\n align-items: center;\n gap: var(--app-components-alert-menu-button-spacing);\n flex-shrink: 0;\n flex-wrap: wrap;\n align-self: stretch;\n border-top: 1px solid var(--border-divider-color);\n background: var(--container-global-color);\n\n obc-button::part(visible-wrapper) {\n height: 100%;\n }\n\n .btn {\n flex: 1;\n min-width: 120px;\n }\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\n.alert-list.all ::slotted([shelved]) {\n display: none;\n}\n\n.alert-list.shelved ::slotted(:not([shelved])) {\n display: none;\n}\n\n.alert-list.unacked {\n ::slotted(:not([status=\"unacknowledged\"])),\n ::slotted([shelved]) {\n display: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"alert-menu.css.js","names":[],"sources":["../../../src/components/alert-menu/alert-menu.css?inline"],"sourcesContent":["@mixin soft-dismiss;\n\n* {\n box-sizing: border-box;\n}\n\n.wrapper {\n width: var(--app-components-alert-menu-width);\n height: 560px;\n max-width: 100vw;\n}\n\n.container {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.alert-list {\n flex-shrink: 1;\n flex-grow: 1;\n min-height: 0;\n overflow: hidden;\n position: relative;\n}\n\n.action {\n display: flex;\n min-height: var(--app-components-alert-menu-footer-container-height);\n padding: calc(\n (\n var(--app-components-alert-menu-footer-container-height) -\n var(--ui-components-button-touch-target-size) - 2px\n ) /\n 2\n )\n var(--app-components-alert-menu-footer-padding-horizontal);\n align-items: center;\n gap: var(--app-components-alert-menu-button-spacing);\n flex-shrink: 0;\n flex-wrap: wrap;\n align-self: stretch;\n border-top: 1px solid var(--border-divider-color);\n background: var(--container-global-color);\n\n obc-button::part(visible-wrapper) {\n height: 100%;\n }\n\n .btn {\n flex: 1;\n min-width: 120px;\n }\n}\n\n::slotted(*) {\n display: block;\n will-change: transform;\n}\n\n.alert-list.all ::slotted([shelved]),\n.alert-list.all ::slotted([status=\"rectified-unacknowledged\"]) {\n display: none;\n}\n\n.alert-list.shelved ::slotted(:not([shelved])) {\n display: none;\n}\n\n.alert-list.unacked {\n ::slotted(\n :not([status=\"unacknowledged\"]):not([status=\"rectified-unacknowledged\"])\n ),\n ::slotted([shelved]) {\n display: none;\n }\n}\n"],"mappings":""}

package/dist/components/alert-menu/alert-menu.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 import { PopoverController } from '../../internal/popover-controller.js';
 import '../button/button.js';
 import '../../icons/icon-chevron-right-google.js';
@@ -16,6 +16,14 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
     }[];
     tabName: 'shelved' | 'unacked' | 'all';
 }>;
+/** One tab of an alert menu: its name, its label and its empty state. */
+export interface AlertMenuTab {
+    /** Names the tab in `ack-all-visible-click` and in the `empty-<tab>-*` slots. */
+    name: string;
+    title: string;
+    emptyTitle: string;
+    emptyIcon: TemplateResult;
+}
 /**
  * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.
  *
@@ -23,7 +31,7 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
  *
  * ### Features
  * - **Tabbed organization:** Switch between "Unacked", "Active", and (optionally) "Shelved" tabs for focused alert review.
- * - **Alert filtering:** Each tab displays only relevant alerts (e.g., "Unacked" shows only unacknowledged, non-shelved items).
+ * - **Alert filtering:** Each tab displays only relevant alerts: "Unacked" shows the non-shelved items still waiting for acknowledgment (`unacknowledged` or `rectified-unacknowledged`), "Active" every non-shelved item except the `rectified-unacknowledged` ones. A subclass changes the tabs and the list through the `tabs` and `renderList` hooks.
  * - **Bulk actions:** "ACK visible" button allows acknowledging all currently visible (filtered) alerts at once.
  * - **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.
  * - **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.
@@ -117,13 +125,27 @@ export declare class ObcAlertMenu extends LitElement {
     showSilenceButton: boolean;
     /** If true, shows the "Alerts" navigation button in the action bar. When hidden, the "ACK visible" button expands to fill the freed space. */
     showAlertListButton: boolean;
-    private _selectedTabIndex;
+    /** The `name` of the tab the user picked; the second tab shows until then. */
+    private _selectedTabName?;
     private alertList;
     private handleAckAllVisibleClick;
     private onTabChange;
-    private getSelectedTab;
-    render(): import('lit-html').TemplateResult<1>;
-    static styles: import('lit').CSSResult;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /** Whether the menu offers "ACK visible" at all; `canAckAll` enables it. */
+    protected get offersAckAll(): boolean;
+    /** The tabs in display order; the menu opens on the second one. */
+    protected get tabs(): AlertMenuTab[];
+    /** Where the selected tab sits in `tabs`: the one the user picked, else the second. */
+    private selectedTabIndex;
+    private get selectedTab();
+    /**
+     * The list that shows the selected tab's items. The CSS hides the items the
+     * tab leaves out; the filter tells the list which ones those are.
+     */
+    protected renderList(tab: AlertMenuTab, content: TemplateResult): TemplateResult;
+    private tabFilter;
+    render(): TemplateResult<1>;
+    static styles: CSSResultGroup;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/alert-menu/alert-menu.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert-menu.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu/alert-menu.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAC~~,UAAU,~~EAA2B~~,MAAM,KAAK,CAAC;~~AAGzD~~,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0CAA0C,CAAC;AAClD,OAAO,iCAAiC,CAAC;AACzC,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+BAA+B,CAAC;AAGvC,OAAO,gDAAgD,CAAC;AAIxD,OAAO,EAAC,iBAAiB,EAAC,MAAM,sCAAsC,CAAC;AAEvE,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACnD,eAAe,EAAE;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IACzD,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC;CACxC,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,qBAKa,YAAa,SAAQ,UAAU;IACf,WAAW,UAAS;IAEpB,IAAI,UAAS;IAExC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,oBAA+B;IAE5C,UAAU,EAAE,OAAO,CAAS;IAE5B,SAAS,EAAE,OAAO,CAAS;IAET,iBAAiB,EAAE,OAAO,CAChE;IAEsC,mBAAmB,EAAE,OAAO,CAClE;~~IAEE~~,OAAO,CAAC,~~iBAAiB~~,~~CAAK~~;~~IAGvC~~,OAAO,CAAC,SAAS,~~CAAgB~~;~~IAEjC~~,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,WAAW;~~IAInB~~,OAAO,CAAC,cAAc;~~IA+Cb~~,MAAM;~~IAqFf~~,OAAgB,MAAM,~~0BAA2B~~;~~CAClD~~;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
1	+ {"version":3,"file":"alert-menu.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu/alert-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,UAAU,EACV,cAAc,EACd,cAAc,EAIf,MAAM,KAAK,CAAC;AAGb,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0CAA0C,CAAC;AAClD,OAAO,iCAAiC,CAAC;AACzC,OAAO,gCAAgC,CAAC;AACxC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+BAA+B,CAAC;AAGvC,OAAO,gDAAgD,CAAC;AAIxD,OAAO,EAAC,iBAAiB,EAAC,MAAM,sCAAsC,CAAC;AAEvE,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACnD,eAAe,EAAE;QAAC,OAAO,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IACzD,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAC;CACxC,CAAC,CAAC;AAEH,yEAAyE;AACzE,MAAM,WAAW,YAAY;IAC3B,iFAAiF;IACjF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,cAAc,CAAC;CAC3B;AAOD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,qBAKa,YAAa,SAAQ,UAAU;IACf,WAAW,UAAS;IAEpB,IAAI,UAAS;IAExC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,oBAA+B;IAE5C,UAAU,EAAE,OAAO,CAAS;IAE5B,SAAS,EAAE,OAAO,CAAS;IAET,iBAAiB,EAAE,OAAO,CAChE;IAEsC,mBAAmB,EAAE,OAAO,CAClE;IAEP,8EAA8E;IACrE,OAAO,CAAC,gBAAgB,CAAC,CAAS;IAG3C,OAAO,CAAC,SAAS,CAAoB;IAErC,OAAO,CAAC,wBAAwB;IAahC,OAAO,CAAC,WAAW;cAIA,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IASrE,4EAA4E;IAC5E,SAAS,KAAK,YAAY,IAAI,OAAO,CAEpC;IAED,mEAAmE;IACnE,SAAS,KAAK,IAAI,IAAI,YAAY,EAAE,CAwBnC;IAED,uFAAuF;IACvF,OAAO,CAAC,gBAAgB;IAKxB,OAAO,KAAK,WAAW,GAGtB;IAED;;;OAGG;IACH,SAAS,CAAC,UAAU,CAClB,GAAG,EAAE,YAAY,EACjB,OAAO,EAAE,cAAc,GACtB,cAAc;IAQjB,OAAO,CAAC,SAAS;IAcR,MAAM;IA2Ff,OAAgB,MAAM,EAAE,cAAc,CAA2B;CAClE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}