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

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.d.ts

@@ -1,14 +1,38 @@
 import { LitElement } from 'lit';
 import '../../icons/icon-twoway-analog-closed.js';
 /**
+ * Two-way analog valve symbol whose opening moves continuously from 0 to
+ * 100 %.
+ *
+ * Draws the same symbol as the `obi-twoway-analog-*` icons. The shut bands at
+ * the port ends and the handle are linear in the opening: exact at 100 %
+ * (`obi-twoway-analog-open`) and at 0 % (vertical handle, ports shut to the
+ * centre), and close to the icons' 10/25/50/75 % steps in between. Used as
+ * the icon of `obc-analog-valve`.
+ *
+ * @property value - Opening in percent (0–100).
  * @availableWhen value closed==false
+ * @property closed - Shows the closed symbol.
+ * @property vertical - Turns the symbol 90° for a vertical pipe.
  * @stable
  */
 export declare class ObcValveAnalogTwoWayIcon extends LitElement {
-    /** Available when `closed==false`. */
+    /**
+     * Opening in percent (0–100).
+     *
+     * Available when `closed==false`.
+     */
     value: number;
+    /** Shows the closed symbol. */
     closed: boolean;
+    /** Turns the symbol 90° for a vertical pipe. */
     vertical: boolean;
+    private renderBands;
+    /**
+     * Horizontal at the top when open, turning to vertical and moving 2 units
+     * down as the valve shuts, matching `obi-twoway-analog-open` at 100 %.
+     */
+    private renderHandle;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valve-analog-two-way-icon.d.ts","sourceRoot":"","sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAuB,MAAM,KAAK,CAAC;AAIrD,OAAO,0CAA0C,CAAC;AAElD;;;GAGG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC5B,KAAK,EAAE,MAAM,CAAK;IACjB,MAAM,EAAE,OAAO,CAAS;IACxB,QAAQ,EAAE,OAAO,CAAS;IAE5C,MAAM;IAoFf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,wBAAwB,CAAC;KAC3D;CACF"}
+{"version":3,"file":"valve-analog-two-way-icon.d.ts","sourceRoot":"","sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAuB,MAAM,KAAK,CAAC;AAKrD,OAAO,0CAA0C,CAAC;AAclD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC5B,KAAK,EAAE,MAAM,CAAK;IACjB,MAAM,EAAE,OAAO,CAAS;IACxB,QAAQ,EAAE,OAAO,CAAS;IAErD,OAAO,CAAC,WAAW;IAYnB;;;OAGG;IACH,OAAO,CAAC,YAAY;IAWX,MAAM;IA8Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,wBAAwB,CAAC;KAC3D;CACF"}

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.js

@@ -1,10 +1,18 @@
 import { customElement } from "../../decorator.js";
+import { clampPercent } from "../../svghelpers/math.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
 import "../../icons/icon-twoway-analog-closed.js";
 import valve_analog_two_way_icon_default from "./valve-analog-two-way-icon.css.js";
 import { LitElement, html, svg, unsafeCSS } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts
+var OUTLINE = "M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z";
+var BODY = "M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z";
+/** Width of the shut band at each port end when the opening is 0 %, in icon units. */
+var BAND_RANGE = 7;
+var SECONDARY = "fill: var(--automation-device-secondary-color)";
+var TERTIARY = "fill: var(--automation-device-tertiary-color)";
+var PRIMARY = "fill: var(--automation-device-primary-color)";
 var ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -12,22 +20,37 @@ var ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends LitElement
 		this.closed = false;
 		this.vertical = false;
 	}
+	renderBands(width) {
+		if (width <= 0) return null;
+		const left = 3 + width;
+		const right = 21 - width;
+		return svg`<g clip-path="url(#body)">
+      <rect x="2" y="0" width=${left - 2} height="24" style=${SECONDARY}/>
+      <rect x=${left} y="0" width="1" height="24" style=${TERTIARY}/>
+      <rect x=${right} y="0" width=${22 - right} height="24" style=${SECONDARY}/>
+      <rect x=${right - 1} y="0" width="1" height="24" style=${TERTIARY}/>
+    </g>`;
+	}
+	/**
+	* Horizontal at the top when open, turning to vertical and moving 2 units
+	* down as the valve shuts, matching `obi-twoway-analog-open` at 100 %.
+	*/
+	renderHandle(value) {
+		const shut = 1 - value / 100;
+		const angle = -90 * shut;
+		const cx = 12;
+		const cy = 3.5 + 2 * shut;
+		return svg`<g transform="rotate(${angle} ${cx} ${cy})">
+      <rect x=${8} y=${cy - 1.5} width="8" height="3" rx="1.5" style=${TERTIARY}/>
+      <rect x=${9} y=${cy - .5} width="6" height="1" rx="0.5" style=${PRIMARY}/>
+    </g>`;
+	}
 	render() {
 		const transform = this.vertical ? "transform: rotate(90deg);" : "";
 		if (this.closed) return html` <div class="wrapper" style="${transform}">
         <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>
       </div>`;
-		const handleRotation = -(1 - this.value / 100) * 90;
-		const handleTranslation = (1 - this.value / 100) * 2;
-		const handle = svg`
-      <g transform="translate(0, ${handleTranslation}) rotate(${handleRotation} 12 3.5) ">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-tertiary-color)"/>
-        <path d="M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-primary-color)"/>
-      </g>
-    `;
-		const xmin = 10.5;
-		const xmax = 2.5;
-		const x = xmin + -8 * this.value / 100;
+		const value = clampPercent(this.value);
 		return html`
       <div class="wrapper" style="${transform}">
         <svg
@@ -37,55 +60,13 @@ var ObcValveAnalogTwoWayIcon = class ObcValveAnalogTwoWayIcon extends LitElement
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <path
-            d="M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-          <path
-            d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
-            fill="var(--automation-device-primary-color)"
-          />
-          ${handle}
-          <g clip-path="url(#clip0)">
-            <rect
-              x=${xmax}
-              y="0"
-              width=${x - xmax}
-              height="24"
-              fill="var(--automation-device-secondary-color)"
-            />
-            <line
-              x1=${x}
-              y1="0"
-              x2=${x}
-              y2="24"
-              stroke="var(--automation-device-tertiary-color)"
-              stroke-width="1"
-            />
-
-            <rect
-              x=${24 - x}
-              y="0"
-              width=${x - xmax}
-              height="24"
-              fill="var(--automation-device-secondary-color)"
-            />
-            <line
-              x1=${24 - x}
-              y1="0"
-              x2=${24 - x}
-              y2="24"
-              stroke="var(--automation-device-tertiary-color)"
-              stroke-width="1"
-            />
-          </g>
           <defs>
-            <clipPath id="clip0">
-              <path
-                d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
-              />
-            </clipPath>
+            <clipPath id="body"><path d=${BODY} /></clipPath>
           </defs>
+          <path d=${OUTLINE} style=${TERTIARY} />
+          <path d=${BODY} style=${PRIMARY} />
+          ${this.renderBands(BAND_RANGE * (100 - value) / 100)}
+          ${this.renderHandle(value)}
         </svg>
       </div>
     `;

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"valve-analog-two-way-icon.js","names":[],"sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"sourcesContent":["import {LitElement, html, svg, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './valve-analog-two-way-icon.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-twoway-analog-closed.js';\n\n/**\n * @availableWhen value closed==false\n * @stable\n */\n@customElement('obc-valve-analog-two-way-icon')\nexport class ObcValveAnalogTwoWayIcon extends LitElement {\n  @property({type: Number}) value: number = 0;\n  @property({type: Boolean}) closed: boolean = false;\n  @property({type: Boolean}) vertical: boolean = false;\n\n  override render() {\n    const transform = this.vertical ? 'transform: rotate(90deg);' : '';\n    if (this.closed) {\n      return html` <div class=\"wrapper\" style=\"${transform}\">\n        <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>\n      </div>`;\n    }\n\n    const handleRotation = -(1 - this.value / 100) * 90;\n    const handleTranslation = (1 - this.value / 100) * 2;\n    const handle = svg`\n      <g transform=\"translate(0, ${handleTranslation}) rotate(${handleRotation} 12 3.5) \">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z\" fill=\"var(--automation-device-tertiary-color)\"/>\n        <path d=\"M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z\" fill=\"var(--automation-device-primary-color)\"/>\n      </g>\n    `;\n\n    const xmin = 10.5;\n    const xmax = 2.5;\n    const x = xmin + ((xmax - xmin) * this.value) / 100;\n\n    return html`\n      <div class=\"wrapper\" style=\"${transform}\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z\"\n            fill=\"var(--automation-device-tertiary-color)\"\n          />\n          <path\n            d=\"M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z\"\n            fill=\"var(--automation-device-primary-color)\"\n          />\n          ${handle}\n          <g clip-path=\"url(#clip0)\">\n            <rect\n              x=${xmax}\n              y=\"0\"\n              width=${x - xmax}\n              height=\"24\"\n              fill=\"var(--automation-device-secondary-color)\"\n            />\n            <line\n              x1=${x}\n              y1=\"0\"\n              x2=${x}\n              y2=\"24\"\n              stroke=\"var(--automation-device-tertiary-color)\"\n              stroke-width=\"1\"\n            />\n\n            <rect\n              x=${24 - x}\n              y=\"0\"\n              width=${x - xmax}\n              height=\"24\"\n              fill=\"var(--automation-device-secondary-color)\"\n            />\n            <line\n              x1=${24 - x}\n              y1=\"0\"\n              x2=${24 - x}\n              y2=\"24\"\n              stroke=\"var(--automation-device-tertiary-color)\"\n              stroke-width=\"1\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0\">\n              <path\n                d=\"M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-valve-analog-two-way-icon': ObcValveAnalogTwoWayIcon;\n  }\n}\n"],"mappings":";;;;;;;AAWO,IAAM,2BAAN,MAAM,iCAAiC,WAAW;;;EACb,KAAA,QAAA;EACG,KAAA,SAAA;EACE,KAAA,WAAA;;CAE/C,SAAkB;EAChB,MAAM,YAAY,KAAK,WAAW,8BAA8B;EAChE,IAAI,KAAK,QACP,OAAO,IAAI,gCAAgC,UAAU;;;EAKvD,MAAM,iBAAiB,EAAE,IAAI,KAAK,QAAQ,OAAO;EACjD,MAAM,qBAAqB,IAAI,KAAK,QAAQ,OAAO;EACnD,MAAM,SAAS,GAAG;mCACa,kBAAkB,WAAW,eAAe;;;;;EAM3E,MAAM,OAAO;EACb,MAAM,OAAO;EACb,MAAM,IAAI,OAAS,KAAe,KAAK,QAAS;EAEhD,OAAO,IAAI;oCACqB,UAAU;;;;;;;;;;;;;;;;YAgBlC,OAAO;;;kBAGD,KAAK;;sBAED,IAAI,KAAK;;;;;mBAKZ,EAAE;;mBAEF,EAAE;;;;;;;kBAOH,KAAK,EAAE;;sBAEH,IAAI,KAAK;;;;;mBAKZ,KAAK,EAAE;;mBAEP,KAAK,EAAE;;;;;;;;;;;;;;;;CAgBxB;;EAEyB,KAAA,SAAA,UAAU,iCAAY;;AACjD;AAzFG,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,yBAAA,WAAA,SAAA,KAAA,CAAA;AACvB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,yBAAA,WAAA,UAAA,KAAA,CAAA;AACxB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,yBAAA,WAAA,YAAA,KAAA,CAAA;AAJ1B,2BAAA,WAAA,CAAA,cAAc,+BAA+B,CAAA,GAAA,wBAAA"}
+{"version":3,"file":"valve-analog-two-way-icon.js","names":[],"sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"sourcesContent":["import {LitElement, html, svg, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './valve-analog-two-way-icon.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {clampPercent} from '../../svghelpers/math.js';\nimport '../../icons/icon-twoway-analog-closed.js';\n\nconst OUTLINE =\n  'M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z';\nconst BODY =\n  'M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z';\n\n/** Width of the shut band at each port end when the opening is 0 %, in icon units. */\nconst BAND_RANGE = 7;\n\nconst SECONDARY = 'fill: var(--automation-device-secondary-color)';\nconst TERTIARY = 'fill: var(--automation-device-tertiary-color)';\nconst PRIMARY = 'fill: var(--automation-device-primary-color)';\n\n/**\n * Two-way analog valve symbol whose opening moves continuously from 0 to\n * 100 %.\n *\n * Draws the same symbol as the `obi-twoway-analog-*` icons. The shut bands at\n * the port ends and the handle are linear in the opening: exact at 100 %\n * (`obi-twoway-analog-open`) and at 0 % (vertical handle, ports shut to the\n * centre), and close to the icons' 10/25/50/75 % steps in between. Used as\n * the icon of `obc-analog-valve`.\n *\n * @property value - Opening in percent (0–100).\n * @availableWhen value closed==false\n * @property closed - Shows the closed symbol.\n * @property vertical - Turns the symbol 90° for a vertical pipe.\n * @stable\n */\n@customElement('obc-valve-analog-two-way-icon')\nexport class ObcValveAnalogTwoWayIcon extends LitElement {\n  @property({type: Number}) value: number = 0;\n  @property({type: Boolean}) closed: boolean = false;\n  @property({type: Boolean}) vertical: boolean = false;\n\n  private renderBands(width: number) {\n    if (width <= 0) return null;\n    const left = 3 + width;\n    const right = 21 - width;\n    return svg`<g clip-path=\"url(#body)\">\n      <rect x=\"2\" y=\"0\" width=${left - 2} height=\"24\" style=${SECONDARY}/>\n      <rect x=${left} y=\"0\" width=\"1\" height=\"24\" style=${TERTIARY}/>\n      <rect x=${right} y=\"0\" width=${22 - right} height=\"24\" style=${SECONDARY}/>\n      <rect x=${right - 1} y=\"0\" width=\"1\" height=\"24\" style=${TERTIARY}/>\n    </g>`;\n  }\n\n  /**\n   * Horizontal at the top when open, turning to vertical and moving 2 units\n   * down as the valve shuts, matching `obi-twoway-analog-open` at 100 %.\n   */\n  private renderHandle(value: number) {\n    const shut = 1 - value / 100;\n    const angle = -90 * shut;\n    const cx = 12;\n    const cy = 3.5 + 2 * shut;\n    return svg`<g transform=\"rotate(${angle} ${cx} ${cy})\">\n      <rect x=${cx - 4} y=${cy - 1.5} width=\"8\" height=\"3\" rx=\"1.5\" style=${TERTIARY}/>\n      <rect x=${cx - 3} y=${cy - 0.5} width=\"6\" height=\"1\" rx=\"0.5\" style=${PRIMARY}/>\n    </g>`;\n  }\n\n  override render() {\n    const transform = this.vertical ? 'transform: rotate(90deg);' : '';\n    if (this.closed) {\n      return html` <div class=\"wrapper\" style=\"${transform}\">\n        <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>\n      </div>`;\n    }\n\n    const value = clampPercent(this.value);\n    return html`\n      <div class=\"wrapper\" style=\"${transform}\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <defs>\n            <clipPath id=\"body\"><path d=${BODY} /></clipPath>\n          </defs>\n          <path d=${OUTLINE} style=${TERTIARY} />\n          <path d=${BODY} style=${PRIMARY} />\n          ${this.renderBands((BAND_RANGE * (100 - value)) / 100)}\n          ${this.renderHandle(value)}\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-valve-analog-two-way-icon': ObcValveAnalogTwoWayIcon;\n  }\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,UACJ;AACF,IAAM,OACJ;;AAGF,IAAM,aAAa;AAEnB,IAAM,YAAY;AAClB,IAAM,WAAW;AACjB,IAAM,UAAU;AAmBT,IAAM,2BAAN,MAAM,iCAAiC,WAAW;;;EACb,KAAA,QAAA;EACG,KAAA,SAAA;EACE,KAAA,WAAA;;CAE/C,YAAoB,OAAe;EACjC,IAAI,SAAS,GAAG,OAAO;EACvB,MAAM,OAAO,IAAI;EACjB,MAAM,QAAQ,KAAK;EACnB,OAAO,GAAG;gCACkB,OAAO,EAAE,qBAAqB,UAAU;gBACxD,KAAK,qCAAqC,SAAS;gBACnD,MAAM,eAAe,KAAK,MAAM,qBAAqB,UAAU;gBAC/D,QAAQ,EAAE,qCAAqC,SAAS;;CAEtE;;;;;CAMA,aAAqB,OAAe;EAClC,MAAM,OAAO,IAAI,QAAQ;EACzB,MAAM,QAAQ,MAAM;EACpB,MAAM,KAAK;EACX,MAAM,KAAK,MAAM,IAAI;EACrB,OAAO,GAAG,wBAAwB,MAAM,GAAG,GAAG,GAAG,GAAG;gBACxC,EAAO,KAAK,KAAK,IAAI,uCAAuC,SAAS;gBACrE,EAAO,KAAK,KAAK,GAAI,uCAAuC,QAAQ;;CAElF;CAEA,SAAkB;EAChB,MAAM,YAAY,KAAK,WAAW,8BAA8B;EAChE,IAAI,KAAK,QACP,OAAO,IAAI,gCAAgC,UAAU;;;EAKvD,MAAM,QAAQ,aAAa,KAAK,KAAK;EACrC,OAAO,IAAI;oCACqB,UAAU;;;;;;;;;0CASJ,KAAK;;oBAE3B,QAAQ,SAAS,SAAS;oBAC1B,KAAK,SAAS,QAAQ;YAC9B,KAAK,YAAa,cAAc,MAAM,SAAU,GAAG,EAAE;YACrD,KAAK,aAAa,KAAK,EAAE;;;;CAInC;;EAEyB,KAAA,SAAA,UAAU,iCAAY;;AACjD;AA9DG,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,yBAAA,WAAA,SAAA,KAAA,CAAA;AACvB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,yBAAA,WAAA,UAAA,KAAA,CAAA;AACxB,WAAA,CAAA,SAAS,EAAC,MAAM,QAAO,CAAC,CAAA,GAAA,yBAAA,WAAA,YAAA,KAAA,CAAA;AAJ1B,2BAAA,WAAA,CAAA,cAAc,+BAA+B,CAAA,GAAA,wBAAA"}

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":"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"}

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"}