@oicl/openbridge-webcomponents 2.0.0-next.96 → 2.0.0-next.97
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.
- package/bundle/openbridge-webcomponents.bundle.js +19 -9
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +314 -132
- package/dist/ar/poi/poi.d.ts +4 -2
- package/dist/ar/poi/poi.d.ts.map +1 -1
- package/dist/ar/poi/poi.js.map +1 -1
- package/dist/ar/poi-layer/poi-layer.d.ts +1 -0
- package/dist/ar/poi-layer/poi-layer.d.ts.map +1 -1
- package/dist/ar/poi-layer/poi-layer.js.map +1 -1
- package/dist/ar/poi-object/poi-object-aton.d.ts +1 -0
- package/dist/ar/poi-object/poi-object-aton.d.ts.map +1 -1
- package/dist/ar/poi-object/poi-object-aton.js.map +1 -1
- package/dist/automation/automation-badge/automation-badge.d.ts +2 -0
- package/dist/automation/automation-badge/automation-badge.d.ts.map +1 -1
- package/dist/automation/automation-badge/automation-badge.js.map +1 -1
- package/dist/automation/automation-button/automation-button.d.ts +9 -0
- package/dist/automation/automation-button/automation-button.d.ts.map +1 -1
- package/dist/automation/automation-button/automation-button.js.map +1 -1
- package/dist/automation/automation-input-modal/automation-input-modal.d.ts +4 -0
- package/dist/automation/automation-input-modal/automation-input-modal.d.ts.map +1 -1
- package/dist/automation/automation-input-modal/automation-input-modal.js.map +1 -1
- package/dist/building-blocks/alert-list/alert-list.d.ts +4 -0
- package/dist/building-blocks/alert-list/alert-list.d.ts.map +1 -1
- package/dist/building-blocks/alert-list/alert-list.js.map +1 -1
- package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts +2 -0
- package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts.map +1 -1
- package/dist/building-blocks/bar-horizontal/bar-horizontal.js.map +1 -1
- package/dist/building-blocks/bar-vertical/bar-vertical.d.ts +2 -0
- package/dist/building-blocks/bar-vertical/bar-vertical.d.ts.map +1 -1
- package/dist/building-blocks/bar-vertical/bar-vertical.js.map +1 -1
- package/dist/components/advice-floating-item/advice-floating-item.d.ts +2 -4
- package/dist/components/advice-floating-item/advice-floating-item.d.ts.map +1 -1
- package/dist/components/advice-floating-item/advice-floating-item.js.map +1 -1
- package/dist/components/advice-message-item/advice-message-item.d.ts +6 -19
- package/dist/components/advice-message-item/advice-message-item.d.ts.map +1 -1
- package/dist/components/advice-message-item/advice-message-item.js.map +1 -1
- package/dist/components/alert-floating-item/alert-floating-item.d.ts +12 -0
- package/dist/components/alert-floating-item/alert-floating-item.d.ts.map +1 -1
- package/dist/components/alert-floating-item/alert-floating-item.js.map +1 -1
- package/dist/components/alert-menu/alert-menu.d.ts +6 -20
- package/dist/components/alert-menu/alert-menu.d.ts.map +1 -1
- package/dist/components/alert-menu/alert-menu.js.map +1 -1
- package/dist/components/alert-menu-item/alert-menu-item.d.ts +4 -0
- package/dist/components/alert-menu-item/alert-menu-item.d.ts.map +1 -1
- package/dist/components/alert-menu-item/alert-menu-item.js.map +1 -1
- package/dist/components/chat-message/chat-message.d.ts +3 -0
- package/dist/components/chat-message/chat-message.d.ts.map +1 -1
- package/dist/components/chat-message/chat-message.js.map +1 -1
- package/dist/components/elevated-card-radio/elevated-card-radio.d.ts +2 -6
- package/dist/components/elevated-card-radio/elevated-card-radio.d.ts.map +1 -1
- package/dist/components/elevated-card-radio/elevated-card-radio.js.map +1 -1
- package/dist/components/keyboard-numeric/keyboard-numeric.d.ts +6 -0
- package/dist/components/keyboard-numeric/keyboard-numeric.d.ts.map +1 -1
- package/dist/components/keyboard-numeric/keyboard-numeric.js.map +1 -1
- package/dist/components/notification-floating-item/notification-floating-item.d.ts +2 -4
- package/dist/components/notification-floating-item/notification-floating-item.d.ts.map +1 -1
- package/dist/components/notification-floating-item/notification-floating-item.js.map +1 -1
- package/dist/components/sequence-card/sequence-card.d.ts +9 -0
- package/dist/components/sequence-card/sequence-card.d.ts.map +1 -1
- package/dist/components/sequence-card/sequence-card.js.map +1 -1
- package/dist/components/sequence-item/sequence-item.d.ts +5 -0
- package/dist/components/sequence-item/sequence-item.d.ts.map +1 -1
- package/dist/components/sequence-item/sequence-item.js.map +1 -1
- package/dist/components/sequence-modal/sequence-modal.d.ts +4 -0
- package/dist/components/sequence-modal/sequence-modal.d.ts.map +1 -1
- package/dist/components/sequence-modal/sequence-modal.js.map +1 -1
- package/dist/components/sequence-step/sequence-step.d.ts.map +1 -1
- package/dist/components/sequence-step/sequence-step.js.map +1 -1
- package/dist/components/slider-double/slider-double.d.ts +4 -8
- package/dist/components/slider-double/slider-double.d.ts.map +1 -1
- package/dist/components/slider-double/slider-double.js.map +1 -1
- package/dist/components/status-indicator/status-indicator.d.ts +1 -0
- package/dist/components/status-indicator/status-indicator.d.ts.map +1 -1
- package/dist/components/status-indicator/status-indicator.js.map +1 -1
- package/dist/components/system-menu/system-menu.d.ts +2 -0
- package/dist/components/system-menu/system-menu.d.ts.map +1 -1
- package/dist/components/system-menu/system-menu.js.map +1 -1
- package/dist/components/table-header-item/table-header-item.d.ts +2 -0
- package/dist/components/table-header-item/table-header-item.d.ts.map +1 -1
- package/dist/components/table-header-item/table-header-item.js.map +1 -1
- package/dist/components/tag/tag.d.ts +1 -0
- package/dist/components/tag/tag.d.ts.map +1 -1
- package/dist/components/tag/tag.js.map +1 -1
- package/dist/components/toggletip/toggletip.d.ts +4 -4
- package/dist/components/toggletip/toggletip.js.map +1 -1
- package/dist/components/user-menu/user-menu.d.ts +1 -0
- package/dist/components/user-menu/user-menu.d.ts.map +1 -1
- package/dist/components/user-menu/user-menu.js.map +1 -1
- package/dist/integration-systems/integration-app-bar/integration-app-bar.d.ts +1 -0
- package/dist/integration-systems/integration-app-bar/integration-app-bar.d.ts.map +1 -1
- package/dist/integration-systems/integration-app-bar/integration-app-bar.js.map +1 -1
- package/dist/integration-systems/integration-bar/integration-bar.d.ts +0 -1
- package/dist/integration-systems/integration-bar/integration-bar.d.ts.map +1 -1
- package/dist/integration-systems/integration-bar/integration-bar.js.map +1 -1
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.d.ts +9 -9
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js.map +1 -1
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts +1 -0
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts.map +1 -1
- package/dist/integration-systems/integration-fleet-button/integration-fleet-button.js.map +1 -1
- package/dist/integration-systems/integration-tabs/integration-tabs.d.ts +1 -0
- package/dist/integration-systems/integration-tabs/integration-tabs.d.ts.map +1 -1
- package/dist/integration-systems/integration-tabs/integration-tabs.js.map +1 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.d.ts +0 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.d.ts.map +1 -1
- package/dist/navigation-instruments/compass-sector/compass-sector.js.map +1 -1
- package/dist/navigation-instruments/watch/tickmark.d.ts.map +1 -1
- package/dist/navigation-instruments/watch/tickmark.js +17 -7
- package/dist/navigation-instruments/watch/tickmark.js.map +1 -1
- package/dist/navigation-instruments/watch/watch.d.ts.map +1 -1
- package/dist/navigation-instruments/watch/watch.js +2 -2
- package/dist/navigation-instruments/watch/watch.js.map +1 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.d.ts +0 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.d.ts.map +1 -1
- package/dist/navigation-instruments/wind-propulsion/wind-propulsion.js.map +1 -1
- package/dist/pages/alert-detail-page/alert-detail-page.d.ts.map +1 -1
- package/dist/pages/alert-detail-page/alert-detail-page.js.map +1 -1
- package/package.json +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-floating-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-floating-item/alert-floating-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,8CAA8C,CAAC;AACtD,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,mCAAmC,CAAC;AAE3C
|
|
1
|
+
{"version":3,"file":"alert-floating-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-floating-item/alert-floating-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,8CAA8C,CAAC;AACtD,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;GAcG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IACxB,IAAI,sBAA+B;IAEnC,SAAS,2BAAuC;IAE/C,YAAY,UAAS;IAErB,MAAM,UAAS;IAEf,MAAM,UAAS;IAEf,OAAO,UAAS;IAEjB,QAAQ,0BAAsC;cAErD,MAAM;IAiDzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-floating-item.js","sources":["../../../src/components/alert-floating-item/alert-floating-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './alert-floating-item.css?inline';\n\nimport '../floating-item/floating-item.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport {\n ObcFloatingItemType,\n ObcFloatingItemDirection,\n ObcFloatingItemLineType,\n} from '../floating-item/floating-item.js';\n\n/**\n * @stable\n */\n@customElement('obc-alert-floating-item')\nexport class ObcAlertFloatingItem extends LitElement {\n @property({type: String}) type = ObcFloatingItemType.Regular;\n\n @property({type: String}) direction = ObcFloatingItemDirection.horizontal;\n\n @property({type: Boolean}) hasTimestamp = false;\n\n @property({type: Boolean}) hasDay = false;\n\n @property({type: Boolean}) action = false;\n\n @property({type: Boolean}) action2 = false;\n\n @property({type: String}) lineType = ObcFloatingItemLineType.singleLine;\n\n protected override render() {\n const isApplication = this.type === ObcFloatingItemType.Application;\n\n return html`\n <obc-floating-item\n .type=${this.type}\n .direction=${this.direction}\n .hasTimestamp=${this.hasTimestamp}\n .hasDay=${this.hasDay}\n .action=${this.action}\n .action2=${this.action2}\n .lineType=${this.lineType}\n @action-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action-click', {detail: e.detail})\n )}\n @action2-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action2-click', {detail: e.detail})\n )}\n @dismiss-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('dismiss-click', {detail: e.detail})\n )}\n >\n ${isApplication\n ? html`\n <slot name=\"primary-icon\" slot=\"primary-icon\"></slot>\n <obi-alarm-unacknowledged-iec\n slot=\"secondary-icon\"\n useCssColor\n ></obi-alarm-unacknowledged-iec>\n `\n : html`\n <obi-alarm-unacknowledged-iec\n slot=\"primary-icon\"\n useCssColor\n ></obi-alarm-unacknowledged-iec>\n `}\n <slot name=\"title\" slot=\"title\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"time\" slot=\"time\"></slot>\n <slot name=\"day\" slot=\"day\"></slot>\n <slot name=\"action\" slot=\"action\"></slot>\n <slot name=\"action2\" slot=\"action2\"></slot>\n </obc-floating-item>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-floating-item': ObcAlertFloatingItem;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"alert-floating-item.js","sources":["../../../src/components/alert-floating-item/alert-floating-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './alert-floating-item.css?inline';\n\nimport '../floating-item/floating-item.js';\nimport '../../icons/icon-alarm-unacknowledged-iec.js';\nimport {\n ObcFloatingItemType,\n ObcFloatingItemDirection,\n ObcFloatingItemLineType,\n} from '../floating-item/floating-item.js';\n\n/**\n * `<obc-alert-floating-item>` – A floating alert message that overlays the interface with a built-in alert icon.\n *\n * @slot primary-icon - Custom main icon, projected into the child only when `type=\"application\"` (the built-in alert icon is used otherwise).\n * @slot title - Title or heading of the alert message.\n * @slot description - Detailed message text.\n * @slot time - Timestamp label (e.g., \"09:12:46\").\n * @slot day - Day label (e.g., \"Yesterday\").\n * @slot action - Primary action button label/content.\n * @slot action2 - Secondary action button label/content.\n * @fires action-click {CustomEvent} When the primary action button is clicked.\n * @fires action2-click {CustomEvent} When the secondary action button is clicked.\n * @fires dismiss-click {CustomEvent} When the alert message is dismissed.\n * @stable\n */\n@customElement('obc-alert-floating-item')\nexport class ObcAlertFloatingItem extends LitElement {\n @property({type: String}) type = ObcFloatingItemType.Regular;\n\n @property({type: String}) direction = ObcFloatingItemDirection.horizontal;\n\n @property({type: Boolean}) hasTimestamp = false;\n\n @property({type: Boolean}) hasDay = false;\n\n @property({type: Boolean}) action = false;\n\n @property({type: Boolean}) action2 = false;\n\n @property({type: String}) lineType = ObcFloatingItemLineType.singleLine;\n\n protected override render() {\n const isApplication = this.type === ObcFloatingItemType.Application;\n\n return html`\n <obc-floating-item\n .type=${this.type}\n .direction=${this.direction}\n .hasTimestamp=${this.hasTimestamp}\n .hasDay=${this.hasDay}\n .action=${this.action}\n .action2=${this.action2}\n .lineType=${this.lineType}\n @action-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action-click', {detail: e.detail})\n )}\n @action2-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('action2-click', {detail: e.detail})\n )}\n @dismiss-click=${(e: CustomEvent) =>\n this.dispatchEvent(\n new CustomEvent('dismiss-click', {detail: e.detail})\n )}\n >\n ${isApplication\n ? html`\n <slot name=\"primary-icon\" slot=\"primary-icon\"></slot>\n <obi-alarm-unacknowledged-iec\n slot=\"secondary-icon\"\n useCssColor\n ></obi-alarm-unacknowledged-iec>\n `\n : html`\n <obi-alarm-unacknowledged-iec\n slot=\"primary-icon\"\n useCssColor\n ></obi-alarm-unacknowledged-iec>\n `}\n <slot name=\"title\" slot=\"title\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n <slot name=\"time\" slot=\"time\"></slot>\n <slot name=\"day\" slot=\"day\"></slot>\n <slot name=\"action\" slot=\"action\"></slot>\n <slot name=\"action2\" slot=\"action2\"></slot>\n </obc-floating-item>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-floating-item': ObcAlertFloatingItem;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA6BO,IAAM,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,OAAO,oBAAoB;AAE3B,SAAA,YAAY,yBAAyB;AAEpC,SAAA,eAAe;AAEf,SAAA,SAAS;AAET,SAAA,SAAS;AAET,SAAA,UAAU;AAEX,SAAA,WAAW,wBAAwB;AAAA,EAAA;AAAA,EAE1C,SAAS;AAC1B,UAAM,gBAAgB,KAAK,SAAS,oBAAoB;AAExD,WAAO;AAAA;AAAA,gBAEK,KAAK,IAAI;AAAA,qBACJ,KAAK,SAAS;AAAA,wBACX,KAAK,YAAY;AAAA,kBACvB,KAAK,MAAM;AAAA,kBACX,KAAK,MAAM;AAAA,mBACV,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,wBACT,CAAC,MACf,KAAK;AAAA,MACH,IAAI,YAAY,gBAAgB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACnD;AAAA,yBACc,CAAC,MAChB,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACpD;AAAA,yBACc,CAAC,MAChB,KAAK;AAAA,MACH,IAAI,YAAY,iBAAiB,EAAC,QAAQ,EAAE,QAAO;AAAA,IAAA,CACpD;AAAA;AAAA,UAED,gBACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOA;AAAA;AAAA;AAAA;AAAA;AAAA,aAKC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASX;AAGF;AAjEa,qBAgEK,SAAS,UAAU,cAAc;AA/DvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,qBACe,WAAA,QAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,qBAGe,WAAA,aAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GALd,qBAKgB,WAAA,gBAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAPd,qBAOgB,WAAA,UAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GATd,qBASgB,WAAA,UAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAXd,qBAWgB,WAAA,WAAA,CAAA;AAED,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAbb,qBAae,WAAA,YAAA,CAAA;AAbf,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;"}
|
|
@@ -44,15 +44,9 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
|
|
|
44
44
|
* | Slot Name | Renders When... | Purpose |
|
|
45
45
|
* |----------------------------------|----------------------------------|----------------------------------------------------------------|
|
|
46
46
|
* | (default) | Always | Place one or more `<obc-alert-menu-item>` elements as alert rows. |
|
|
47
|
-
* | empty
|
|
48
|
-
* | empty
|
|
49
|
-
* | empty
|
|
50
|
-
* | empty-all-title | Active tab, when empty | Custom title for empty active alerts. |
|
|
51
|
-
* | empty-all-description | Active tab, when empty | Custom description for empty active alerts. |
|
|
52
|
-
* | empty-all-icon | Active tab, when empty | Custom icon for empty active alerts. |
|
|
53
|
-
* | empty-shelved-title | Shelved tab, when empty | Custom title for empty shelved alerts. |
|
|
54
|
-
* | empty-shelved-description | Shelved tab, when empty | Custom description for empty shelved alerts. |
|
|
55
|
-
* | empty-shelved-icon | Shelved tab, when empty | Custom icon for empty shelved alerts. |
|
|
47
|
+
* | empty-<tab>-title | Selected tab is empty | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
|
|
48
|
+
* | empty-<tab>-description | Selected tab is empty | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
|
|
49
|
+
* | empty-<tab>-icon | Selected tab is empty | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |
|
|
56
50
|
*
|
|
57
51
|
* ### Properties
|
|
58
52
|
* - `hasShelved` (boolean): If true, displays the "Shelved" tab and enables shelving support. Default: false.
|
|
@@ -62,7 +56,6 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
|
|
|
62
56
|
*
|
|
63
57
|
* ### Events
|
|
64
58
|
* - **ack-all-visible-click** – Fired when the "ACK visible" button is clicked. The event detail includes the list of visible alert elements and the current tab name.
|
|
65
|
-
* - **alert-list-click** – Fired when the "Alerts" navigation button is clicked.
|
|
66
59
|
* - **silence-click** – Fired when the "Silence" button is clicked.
|
|
67
60
|
* - **go-to-alert-list-click** – Fired when the "Alerts" navigation button is clicked.
|
|
68
61
|
*
|
|
@@ -86,17 +79,10 @@ export type ObcAckAllVisibleClickEvent = CustomEvent<{
|
|
|
86
79
|
* ```
|
|
87
80
|
*
|
|
88
81
|
* @slot - The alerts items as ObcAlertMenuItem
|
|
89
|
-
* @slot empty
|
|
90
|
-
* @slot empty
|
|
91
|
-
* @slot empty
|
|
92
|
-
* @slot empty-all-title - Custom title for empty active alerts (Active tab)
|
|
93
|
-
* @slot empty-all-description - Custom description for empty active alerts (Active tab)
|
|
94
|
-
* @slot empty-all-icon - Custom icon for empty active alerts (Active tab)
|
|
95
|
-
* @slot empty-shelved-title - Custom title for empty shelved alerts (Shelved tab)
|
|
96
|
-
* @slot empty-shelved-description - Custom description for empty shelved alerts (Shelved tab)
|
|
97
|
-
* @slot empty-shelved-icon - Custom icon for empty shelved alerts (Shelved tab)
|
|
82
|
+
* @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
|
|
83
|
+
* @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
|
|
84
|
+
* @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)
|
|
98
85
|
* @fires ack-all-visible-click {ObcAckAllVisibleClickEvent} - Fired when the ack all visible button is clicked
|
|
99
|
-
* @fires alert-list-click {CustomEvent} - Fired when the alert list button is clicked
|
|
100
86
|
* @fires silence-click {CustomEvent} - Fired when the silence button is clicked
|
|
101
87
|
* @fires go-to-alert-list-click {CustomEvent} - Fired when the go to alert list button is clicked
|
|
102
88
|
*/
|
|
@@ -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;AAKxD,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
|
|
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;AAKxD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,qBAKa,YAAa,SAAQ,UAAU;IAC1C;;;;;OAKG;IACwB,UAAU,EAAE,OAAO,CAAS;IAEvD;;;;;OAKG;IACwB,SAAS,EAAE,OAAO,CAAS;IAEtD;;;;;OAKG;IAC0C,iBAAiB,EAAE,OAAO,CAChE;IAEP;;;;;OAKG;IAC0C,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;IA+Ef,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-menu.js","sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alert-list.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../tabbed-card/tabbed-card.js';\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/alert-list/alert-list.js';\nimport {ObcAlertList} from '../../building-blocks/alert-list/alert-list.js';\nimport {ObcTabbedCardChangeEvent} from '../tabbed-card/tabbed-card.js';\nimport {ObcAlertMenuItemStatus} from '../alert-menu-item/alert-menu-item.js';\n\nexport type ObcAckAllVisibleClickEvent = CustomEvent<{\n visibleElements: {element: HTMLElement; index: number}[];\n tabName: 'shelved' | 'unacked' | 'all';\n}>;\n\n/**\n * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n *\n * Provides a compact, interactive menu for reviewing current alerts, grouped by status (e.g., unacknowledged, active, shelved). Users can acknowledge visible alerts, silence notifications, or navigate to a full alert list. Designed for quick triage and management of alert items in a sidebar or overlay context.\n *\n * ### Features\n * - **Tabbed organization:** Switch between \"Unacked\", \"Active\", and (optionally) \"Shelved\" tabs for focused alert review.\n * - **Alert filtering:** Each tab displays only relevant alerts (e.g., \"Unacked\" shows only unacknowledged, non-shelved items).\n * - **Bulk actions:** \"ACK visible\" button allows acknowledging all currently visible (filtered) alerts at once.\n * - **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.\n * - **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.\n * - **Responsive layout:** Adapts to available space, with scrollable alert lists and sticky action bar.\n * - **Customizable:** Optionally show/hide the \"Shelved\" tab via `hasShelved` property; enable/disable bulk ACK via `canAckAll`.\n *\n * ### Usage Guidelines\n * Use `<obc-alert-menu>` to provide users with a focused, actionable summary of current alerts, typically in a sidebar, overlay, or dashboard context. Ideal for scenarios where users need to quickly review, acknowledge, or silence multiple alerts without leaving their current workflow. Avoid using for persistent, always-visible alert banners; for that, use a dedicated alert banner or notification system.\n *\n * - Place one or more `<obc-alert-menu-item>` elements as children to populate the alert list.\n * - Use the `hasShelved` property to enable the \"Shelved\" tab if your application supports alert shelving.\n * - Use the `canAckAll` property to control whether the \"ACK visible\" button is enabled (e.g., only when there are unacknowledged alerts in view).\n * - Listen for custom events (`ack-all-visible-click`, `silence-click`, `go-to-alert-list-click`) to handle user actions.\n *\n * **TODO(designer):** Confirm if there are recommended maximum numbers of alerts to display, or if there are best practices for when to use the \"Shelved\" tab.\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |----------------------------------|----------------------------------|----------------------------------------------------------------|\n * | (default) | Always | Place one or more `<obc-alert-menu-item>` elements as alert rows. |\n * | empty-unacked-title | Unacked tab, when empty | Custom title for empty unacknowledged alerts. |\n * | empty-unacked-description | Unacked tab, when empty | Custom description for empty unacknowledged alerts. |\n * | empty-unacked-icon | Unacked tab, when empty | Custom icon for empty unacknowledged alerts. |\n * | empty-all-title | Active tab, when empty | Custom title for empty active alerts. |\n * | empty-all-description | Active tab, when empty | Custom description for empty active alerts. |\n * | empty-all-icon | Active tab, when empty | Custom icon for empty active alerts. |\n * | empty-shelved-title | Shelved tab, when empty | Custom title for empty shelved alerts. |\n * | empty-shelved-description | Shelved tab, when empty | Custom description for empty shelved alerts. |\n * | empty-shelved-icon | Shelved tab, when empty | Custom icon for empty shelved alerts. |\n *\n * ### Properties\n * - `hasShelved` (boolean): If true, displays the \"Shelved\" tab and enables shelving support. Default: false.\n * - `canAckAll` (boolean): If true, enables the \"ACK visible\" button for bulk acknowledgment. Default: false.\n * - `showSilenceButton` (boolean): If true, shows the \"Silence\" button. Default: true.\n * - `showAlertListButton` (boolean): If true, shows the \"Alerts\" navigation button. Default: true.\n *\n * ### Events\n * - **ack-all-visible-click** – Fired when the \"ACK visible\" button is clicked. The event detail includes the list of visible alert elements and the current tab name.\n * - **alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\n * - **silence-click** – Fired when the \"Silence\" button is clicked.\n * - **go-to-alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\n *\n * ### Best Practices and Constraints\n * - Only enable \"ACK visible\" when there are actionable, unacknowledged alerts in the current view.\n * - Use the \"Shelved\" tab only if your application supports shelving alerts; otherwise, omit it for simplicity.\n * - For accessibility, ensure that all alert items and action buttons are keyboard navigable.\n * - Do not use this component for persistent, always-on-screen alerts; use banners or dialogs for critical, persistent notifications.\n *\n * ### Example\n * ```\n * <obc-alert-menu hasShelved canAckAll>\n * <obc-alert-menu-item active hasTime>\n * <obi-placeholder slot=\"alert-icon\"></obi-placeholder>\n * <span slot=\"title\">Engine Overheat</span>\n * <span slot=\"description\">Main engine temperature exceeds threshold</span>\n * <span slot=\"time\">09:12:34</span>\n * </obc-alert-menu-item>\n * <!-- More alert items... -->\n * </obc-alert-menu>\n * ```\n *\n * @slot - The alerts items as ObcAlertMenuItem\n * @slot empty-unacked-title - Custom title for empty unacknowledged alerts (Unacked tab)\n * @slot empty-unacked-description - Custom description for empty unacknowledged alerts (Unacked tab)\n * @slot empty-unacked-icon - Custom icon for empty unacknowledged alerts (Unacked tab)\n * @slot empty-all-title - Custom title for empty active alerts (Active tab)\n * @slot empty-all-description - Custom description for empty active alerts (Active tab)\n * @slot empty-all-icon - Custom icon for empty active alerts (Active tab)\n * @slot empty-shelved-title - Custom title for empty shelved alerts (Shelved tab)\n * @slot empty-shelved-description - Custom description for empty shelved alerts (Shelved tab)\n * @slot empty-shelved-icon - Custom icon for empty shelved alerts (Shelved tab)\n * @fires ack-all-visible-click {ObcAckAllVisibleClickEvent} - Fired when the ack all visible button is clicked\n * @fires alert-list-click {CustomEvent} - Fired when the alert list button is clicked\n * @fires silence-click {CustomEvent} - Fired when the silence button is clicked\n * @fires go-to-alert-list-click {CustomEvent} - Fired when the go to alert list button is clicked\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n /**\n * If true, displays the \"Shelved\" tab and enables shelving support for alerts.\n * Set to false to hide the \"Shelved\" tab and related filtering.\n *\n * Default: false.\n */\n @property({type: Boolean}) hasShelved: boolean = false;\n\n /**\n * If true, enables the \"ACK visible\" button, allowing users to acknowledge all currently visible alerts in the active tab.\n * Should be set to true only when there are unacknowledged alerts in view.\n *\n * Default: false.\n */\n @property({type: Boolean}) canAckAll: boolean = false;\n\n /**\n * If true, shows the \"Silence\" button in the action bar.\n * When hidden, the \"ACK visible\" button expands to fill the freed space.\n *\n * Default: true.\n */\n @property({type: Boolean, attribute: false}) showSilenceButton: boolean =\n true;\n\n /**\n * If true, shows the \"Alerts\" navigation button in the action bar.\n * When hidden, the \"ACK visible\" button expands to fill the freed space.\n *\n * Default: true.\n */\n @property({type: Boolean, attribute: false}) showAlertListButton: boolean =\n true;\n\n @state() private _selectedTabIndex = 1;\n\n @query('obc-alert-list')\n private alertList!: ObcAlertList;\n\n private handleAckAllVisibleClick() {\n const panel = this.alertList;\n const visibleElements = panel.getVisibleElements();\n this.dispatchEvent(\n new CustomEvent('ack-all-visible-click', {\n detail: {\n visibleElements: visibleElements,\n tabName: this.getSelectedTab().name,\n },\n })\n );\n }\n\n private onTabChange(e: ObcTabbedCardChangeEvent) {\n this._selectedTabIndex = e.detail.tab;\n }\n\n private getSelectedTab() {\n if (this._selectedTabIndex === 0) {\n return {\n name: 'unacked',\n emptyTitle: msg('No unacknowledged alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n class: 'unacked',\n filter: (item: HTMLElement) => {\n return (\n item.getAttribute('status') ===\n ObcAlertMenuItemStatus.Unacknowledged &&\n !item.hasAttribute('shelved')\n );\n },\n };\n } else if (this._selectedTabIndex === 2) {\n return {\n name: 'shelved',\n emptyTitle: msg('No shelved alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n class: 'shelved',\n filter: (item: HTMLElement) => {\n return item.hasAttribute('shelved');\n },\n };\n } else {\n return {\n name: 'all',\n emptyTitle: msg('No active alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-alerts></obi-alerts>`,\n class: 'all',\n filter: (item: HTMLElement) => {\n return !item.hasAttribute('shelved');\n },\n };\n }\n }\n\n override render() {\n const t = this.getSelectedTab();\n\n return html`\n <obc-tabbed-card\n .nTabs=${this.hasShelved ? 3 : 2}\n class=\"wrapper\"\n part=\"wrapper\"\n .selectedTab=${this._selectedTabIndex}\n hasDefaultSlotOnly\n @tab-change=${this.onTabChange}\n >\n <span slot=\"tab-title-0\">${msg('Unacked')}</span>\n <span slot=\"tab-title-1\">${msg('Active')}</span>\n ${this.hasShelved\n ? html`<span slot=\"tab-title-2\">${msg('Shelved')}</span>`\n : nothing}\n <div class=\"container\">\n <obc-alert-list class=\"alert-list ${t.class}\" .filter=${t.filter}>\n <slot></slot>\n <slot name=\"empty-${t.name}-title\" slot=\"empty-title\"\n >${t.emptyTitle}</slot\n >\n <slot name=\"empty-${t.name}-description\" slot=\"empty-description\"\n >${t.emptyDescription}</slot\n >\n <slot name=\"empty-${t.name}-icon\" slot=\"empty-icon\"\n >${t.emptyIcon}</slot\n >\n </obc-alert-list>\n <div class=\"action\">\n <obc-button\n variant=\"raised\"\n .disabled=${!this.canAckAll}\n fullWidth\n class=\"btn\"\n data-testid=\"ack-all-visible-button\"\n @click=${this.handleAckAllVisibleClick}\n >\n ${msg('ACK visible')}\n </obc-button>\n ${this.showSilenceButton\n ? html`<obc-button\n variant=\"normal\"\n fullWidth\n class=\"btn\"\n showLeadingIcon\n @click=${() =>\n this.dispatchEvent(new CustomEvent('silence-click'))}\n >\n <obi-silence-iec slot=\"leading-icon\"></obi-silence-iec>\n ${msg('Silence')}\n </obc-button>`\n : nothing}\n ${this.showAlertListButton\n ? html`<obc-button\n variant=\"normal\"\n class=\"btn\"\n fullWidth\n showLeadingIcon\n showTrailingIcon\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('go-to-alert-list-click')\n )}\n >\n <obi-alert-list slot=\"leading-icon\"></obi-alert-list>\n <obi-chevron-right-google\n slot=\"trailing-icon\"\n ></obi-chevron-right-google>\n ${msg('Alerts')}\n </obc-button>`\n : nothing}\n </div>\n </div>\n </obc-tabbed-card>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-menu': ObcAlertMenu;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"alert-menu.js","sources":["../../../src/components/alert-menu/alert-menu.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './alert-menu.css?inline';\nimport '../button/button.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-silence-iec.js';\nimport '../../icons/icon-alert-list.js';\nimport '../../icons/icon-alerts.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-unacknowledged.js';\nimport '../tabbed-card/tabbed-card.js';\nimport {localized, msg} from '@lit/localize';\nimport {customElement} from '../../decorator.js';\nimport '../../building-blocks/alert-list/alert-list.js';\nimport {ObcAlertList} from '../../building-blocks/alert-list/alert-list.js';\nimport {ObcTabbedCardChangeEvent} from '../tabbed-card/tabbed-card.js';\nimport {ObcAlertMenuItemStatus} from '../alert-menu-item/alert-menu-item.js';\n\nexport type ObcAckAllVisibleClickEvent = CustomEvent<{\n visibleElements: {element: HTMLElement; index: number}[];\n tabName: 'shelved' | 'unacked' | 'all';\n}>;\n\n/**\n * `<obc-alert-menu>` – A tabbed alert summary panel for displaying, acknowledging, and managing active alerts.\n *\n * Provides a compact, interactive menu for reviewing current alerts, grouped by status (e.g., unacknowledged, active, shelved). Users can acknowledge visible alerts, silence notifications, or navigate to a full alert list. Designed for quick triage and management of alert items in a sidebar or overlay context.\n *\n * ### Features\n * - **Tabbed organization:** Switch between \"Unacked\", \"Active\", and (optionally) \"Shelved\" tabs for focused alert review.\n * - **Alert filtering:** Each tab displays only relevant alerts (e.g., \"Unacked\" shows only unacknowledged, non-shelved items).\n * - **Bulk actions:** \"ACK visible\" button allows acknowledging all currently visible (filtered) alerts at once.\n * - **Silence and navigation:** Dedicated buttons to silence alerts or jump to the full alert list.\n * - **Dynamic content:** Supports any number of `<obc-alert-menu-item>` children, with automatic empty-state messaging and icons per tab.\n * - **Responsive layout:** Adapts to available space, with scrollable alert lists and sticky action bar.\n * - **Customizable:** Optionally show/hide the \"Shelved\" tab via `hasShelved` property; enable/disable bulk ACK via `canAckAll`.\n *\n * ### Usage Guidelines\n * Use `<obc-alert-menu>` to provide users with a focused, actionable summary of current alerts, typically in a sidebar, overlay, or dashboard context. Ideal for scenarios where users need to quickly review, acknowledge, or silence multiple alerts without leaving their current workflow. Avoid using for persistent, always-visible alert banners; for that, use a dedicated alert banner or notification system.\n *\n * - Place one or more `<obc-alert-menu-item>` elements as children to populate the alert list.\n * - Use the `hasShelved` property to enable the \"Shelved\" tab if your application supports alert shelving.\n * - Use the `canAckAll` property to control whether the \"ACK visible\" button is enabled (e.g., only when there are unacknowledged alerts in view).\n * - Listen for custom events (`ack-all-visible-click`, `silence-click`, `go-to-alert-list-click`) to handle user actions.\n *\n * **TODO(designer):** Confirm if there are recommended maximum numbers of alerts to display, or if there are best practices for when to use the \"Shelved\" tab.\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |----------------------------------|----------------------------------|----------------------------------------------------------------|\n * | (default) | Always | Place one or more `<obc-alert-menu-item>` elements as alert rows. |\n * | empty-<tab>-title | Selected tab is empty | Custom title for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-description | Selected tab is empty | Custom description for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n * | empty-<tab>-icon | Selected tab is empty | Custom icon for the empty state (`<tab>` is one of `unacked`, `all`, `shelved`). |\n *\n * ### Properties\n * - `hasShelved` (boolean): If true, displays the \"Shelved\" tab and enables shelving support. Default: false.\n * - `canAckAll` (boolean): If true, enables the \"ACK visible\" button for bulk acknowledgment. Default: false.\n * - `showSilenceButton` (boolean): If true, shows the \"Silence\" button. Default: true.\n * - `showAlertListButton` (boolean): If true, shows the \"Alerts\" navigation button. Default: true.\n *\n * ### Events\n * - **ack-all-visible-click** – Fired when the \"ACK visible\" button is clicked. The event detail includes the list of visible alert elements and the current tab name.\n * - **silence-click** – Fired when the \"Silence\" button is clicked.\n * - **go-to-alert-list-click** – Fired when the \"Alerts\" navigation button is clicked.\n *\n * ### Best Practices and Constraints\n * - Only enable \"ACK visible\" when there are actionable, unacknowledged alerts in the current view.\n * - Use the \"Shelved\" tab only if your application supports shelving alerts; otherwise, omit it for simplicity.\n * - For accessibility, ensure that all alert items and action buttons are keyboard navigable.\n * - Do not use this component for persistent, always-on-screen alerts; use banners or dialogs for critical, persistent notifications.\n *\n * ### Example\n * ```\n * <obc-alert-menu hasShelved canAckAll>\n * <obc-alert-menu-item active hasTime>\n * <obi-placeholder slot=\"alert-icon\"></obi-placeholder>\n * <span slot=\"title\">Engine Overheat</span>\n * <span slot=\"description\">Main engine temperature exceeds threshold</span>\n * <span slot=\"time\">09:12:34</span>\n * </obc-alert-menu-item>\n * <!-- More alert items... -->\n * </obc-alert-menu>\n * ```\n *\n * @slot - The alerts items as ObcAlertMenuItem\n * @slot empty-<tab>-title - Custom empty-state title for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-description - Custom empty-state description for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @slot empty-<tab>-icon - Custom empty-state icon for the selected tab (`<tab>` is one of `unacked`, `all`, `shelved`)\n * @fires ack-all-visible-click {ObcAckAllVisibleClickEvent} - Fired when the ack all visible button is clicked\n * @fires silence-click {CustomEvent} - Fired when the silence button is clicked\n * @fires go-to-alert-list-click {CustomEvent} - Fired when the go to alert list button is clicked\n */\n@localized()\n/**\n * @stable\n */\n@customElement('obc-alert-menu')\nexport class ObcAlertMenu extends LitElement {\n /**\n * If true, displays the \"Shelved\" tab and enables shelving support for alerts.\n * Set to false to hide the \"Shelved\" tab and related filtering.\n *\n * Default: false.\n */\n @property({type: Boolean}) hasShelved: boolean = false;\n\n /**\n * If true, enables the \"ACK visible\" button, allowing users to acknowledge all currently visible alerts in the active tab.\n * Should be set to true only when there are unacknowledged alerts in view.\n *\n * Default: false.\n */\n @property({type: Boolean}) canAckAll: boolean = false;\n\n /**\n * If true, shows the \"Silence\" button in the action bar.\n * When hidden, the \"ACK visible\" button expands to fill the freed space.\n *\n * Default: true.\n */\n @property({type: Boolean, attribute: false}) showSilenceButton: boolean =\n true;\n\n /**\n * If true, shows the \"Alerts\" navigation button in the action bar.\n * When hidden, the \"ACK visible\" button expands to fill the freed space.\n *\n * Default: true.\n */\n @property({type: Boolean, attribute: false}) showAlertListButton: boolean =\n true;\n\n @state() private _selectedTabIndex = 1;\n\n @query('obc-alert-list')\n private alertList!: ObcAlertList;\n\n private handleAckAllVisibleClick() {\n const panel = this.alertList;\n const visibleElements = panel.getVisibleElements();\n this.dispatchEvent(\n new CustomEvent('ack-all-visible-click', {\n detail: {\n visibleElements: visibleElements,\n tabName: this.getSelectedTab().name,\n },\n })\n );\n }\n\n private onTabChange(e: ObcTabbedCardChangeEvent) {\n this._selectedTabIndex = e.detail.tab;\n }\n\n private getSelectedTab() {\n if (this._selectedTabIndex === 0) {\n return {\n name: 'unacked',\n emptyTitle: msg('No unacknowledged alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,\n class: 'unacked',\n filter: (item: HTMLElement) => {\n return (\n item.getAttribute('status') ===\n ObcAlertMenuItemStatus.Unacknowledged &&\n !item.hasAttribute('shelved')\n );\n },\n };\n } else if (this._selectedTabIndex === 2) {\n return {\n name: 'shelved',\n emptyTitle: msg('No shelved alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,\n class: 'shelved',\n filter: (item: HTMLElement) => {\n return item.hasAttribute('shelved');\n },\n };\n } else {\n return {\n name: 'all',\n emptyTitle: msg('No active alerts'),\n emptyDescription: msg(\n \"Go to the 'Alert list' for more details or to manage existing alerts.\"\n ),\n emptyIcon: html`<obi-alerts></obi-alerts>`,\n class: 'all',\n filter: (item: HTMLElement) => {\n return !item.hasAttribute('shelved');\n },\n };\n }\n }\n\n override render() {\n const t = this.getSelectedTab();\n\n return html`\n <obc-tabbed-card\n .nTabs=${this.hasShelved ? 3 : 2}\n class=\"wrapper\"\n part=\"wrapper\"\n .selectedTab=${this._selectedTabIndex}\n hasDefaultSlotOnly\n @tab-change=${this.onTabChange}\n >\n <span slot=\"tab-title-0\">${msg('Unacked')}</span>\n <span slot=\"tab-title-1\">${msg('Active')}</span>\n ${this.hasShelved\n ? html`<span slot=\"tab-title-2\">${msg('Shelved')}</span>`\n : nothing}\n <div class=\"container\">\n <obc-alert-list class=\"alert-list ${t.class}\" .filter=${t.filter}>\n <slot></slot>\n <slot name=\"empty-${t.name}-title\" slot=\"empty-title\"\n >${t.emptyTitle}</slot\n >\n <slot name=\"empty-${t.name}-description\" slot=\"empty-description\"\n >${t.emptyDescription}</slot\n >\n <slot name=\"empty-${t.name}-icon\" slot=\"empty-icon\"\n >${t.emptyIcon}</slot\n >\n </obc-alert-list>\n <div class=\"action\">\n <obc-button\n variant=\"raised\"\n .disabled=${!this.canAckAll}\n fullWidth\n class=\"btn\"\n data-testid=\"ack-all-visible-button\"\n @click=${this.handleAckAllVisibleClick}\n >\n ${msg('ACK visible')}\n </obc-button>\n ${this.showSilenceButton\n ? html`<obc-button\n variant=\"normal\"\n fullWidth\n class=\"btn\"\n showLeadingIcon\n @click=${() =>\n this.dispatchEvent(new CustomEvent('silence-click'))}\n >\n <obi-silence-iec slot=\"leading-icon\"></obi-silence-iec>\n ${msg('Silence')}\n </obc-button>`\n : nothing}\n ${this.showAlertListButton\n ? html`<obc-button\n variant=\"normal\"\n class=\"btn\"\n fullWidth\n showLeadingIcon\n showTrailingIcon\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('go-to-alert-list-click')\n )}\n >\n <obi-alert-list slot=\"leading-icon\"></obi-alert-list>\n <obi-chevron-right-google\n slot=\"trailing-icon\"\n ></obi-chevron-right-google>\n ${msg('Alerts')}\n </obc-button>`\n : nothing}\n </div>\n </div>\n </obc-tabbed-card>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-alert-menu': ObcAlertMenu;\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -57,6 +57,8 @@ export declare enum ObcAlertMenuItemActionState {
|
|
|
57
57
|
* | Slot Name | Renders When... | Purpose |
|
|
58
58
|
* |---------------|-------------------------------|------------------------------------------------------|
|
|
59
59
|
* | alert-icon | Always | Main alert icon representing the alert type. |
|
|
60
|
+
* | title | Always | Title content; falls back to the `title` property. |
|
|
61
|
+
* | description | Always | Description content; falls back to the `description` property. |
|
|
60
62
|
* | icon | If `hasIcon` is true | Secondary icon (e.g., system/source of alert). |
|
|
61
63
|
*
|
|
62
64
|
* ### Events
|
|
@@ -86,6 +88,8 @@ export declare enum ObcAlertMenuItemActionState {
|
|
|
86
88
|
* ```
|
|
87
89
|
*
|
|
88
90
|
* @slot alert-icon - The main alert icon representing the alert type.
|
|
91
|
+
* @slot title - Title content; falls back to the `title` property when empty.
|
|
92
|
+
* @slot description - Description content; falls back to the `description` property when empty.
|
|
89
93
|
* @slot icon - Optional secondary icon (e.g., source/system).
|
|
90
94
|
*
|
|
91
95
|
* @fires ack-click {CustomEvent<void>} Fired when the ACK action button is clicked.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,2CAA2C,CAAC;AACnD,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAC,sBAAsB,EAAC,MAAM,2CAA2C,CAAC;AAGjF,oBAAY,sBAAsB;IAChC,cAAc,mBAAmB;IACjC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,UAAU,iBAAiB;IAC3B,YAAY,mBAAmB;IAC/B,SAAS,cAAc;CACxB;AAED;;;;;GAKG;AACH,oBAAY,2BAA2B;IACrC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED
|
|
1
|
+
{"version":3,"file":"alert-menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,2CAA2C,CAAC;AACnD,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,EAAC,sBAAsB,EAAC,MAAM,2CAA2C,CAAC;AAGjF,oBAAY,sBAAsB;IAChC,cAAc,mBAAmB;IACjC,OAAO,YAAY;IACnB,YAAY,iBAAiB;IAC7B,UAAU,iBAAiB;IAC3B,YAAY,mBAAmB;IAC/B,SAAS,cAAc;CACxB;AAED;;;;;GAKG;AACH,oBAAY,2BAA2B;IACrC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;OAGG;IACuC,OAAO,UAAS;IAE1D;;OAEG;IACgC,KAAK,SAAM;IAE9C;;OAEG;IACuB,WAAW,SAAM;IAE3C;;OAEG;IACuB,GAAG,SAAM;IAEnC;;OAEG;IACuB,IAAI,SAAM;IAEpC;;;;;OAKG;IACsC,MAAM,yBACP;IAExC;;;OAGG;IACwB,IAAI,UAAS;IAExC;;;;;OAKG;IACuB,IAAI,EAAE,sBAAsB,CAClB;IAEpC;;OAEG;IACwB,YAAY,UAAS;IAEhD;;;;;;OAMG;IACuB,oBAAoB,SAAM;IAEpD;;;OAGG;IACuB,kBAAkB,EAAE,2BAA2B,CACnC;IAEtC;;;OAGG;IACuB,oBAAoB,EAAE,2BAA2B,CACxC;IAEnC,OAAO,KAAK,kBAAkB,GAK7B;IAED,OAAO,KAAK,0BAA0B,GAKrC;IAED,OAAO,KAAK,qBAAqB,GAEhC;IAED,OAAO,KAAK,uBAAuB,GAElC;IAED,OAAO,KAAK,eAAe,GAG1B;IAED,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,0BAA0B;IAIzB,MAAM;IAkDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert-menu-item.js","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport compentStyle from './alert-menu-item.css?inline';\nimport '../message-menu-item/message-menu-item.js';\nimport '../alert-icon/alert-icon.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport {ObcMessageMenuItemSize} from '../message-menu-item/message-menu-item.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcAlertMenuItemStatus {\n Unacknowledged = 'unacknowledged',\n Caution = 'caution',\n Acknowledged = 'acknowledged',\n NoAckAlarm = 'no-ack-alarm',\n NoAckWarning = 'no-ack-warning',\n Rectified = 'rectified',\n}\n\n/**\n * Appearance of an alert menu item action.\n * - `enabled`: Action is shown and interactive (default).\n * - `disabled`: Action is shown but cannot be triggered.\n * - `none`: Action is removed and takes no space.\n */\nexport enum ObcAlertMenuItemActionState {\n Enabled = 'enabled',\n Disabled = 'disabled',\n None = 'none',\n}\n\n/**\n * `<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n *\n * Presents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n *\n * ### Features\n * - **Status Variants:** Supports multiple alert states via the `status` property:\n * - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n * - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n * - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n * - **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n * - **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n * - **Expandable:** Can be toggled open/closed for additional details (via click).\n * - **Action Buttons:** Displays an \"ACK\" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.\n * - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).\n * - **Animated Intro:** Optional animation when the item appears.\n * - **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n *\n * ### Usage Guidelines\n * Use `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n *\n * - Use the `status` property to reflect the current state of the alert.\n * - Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n * - Use the `icon` slot for a source/system icon if needed.\n * - Only show the \"ACK\" action for alerts that require acknowledgment.\n * - Provide `secondaryActionLabel` to add a second action alongside ACK.\n * - Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).\n * - Use the `shelved` property to indicate alerts that are temporarily deferred.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |---------------|-------------------------------|------------------------------------------------------|\n * | alert-icon | Always | Main alert icon representing the alert type. |\n * | icon | If `hasIcon` is true | Secondary icon (e.g., system/source of alert). |\n *\n * ### Events\n * - **ack-click** – Fired when the ACK action button is clicked.\n * - **ack-secondary-click** – Fired when the secondary action button is clicked.\n * - **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n *\n * ### Best Practices\n * - Only display the ACK action for alerts that require acknowledgment.\n * - Use concise titles and descriptions for quick scanning.\n * - For grouped alerts, ensure each item has a unique status and icon as appropriate.\n * - Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n * - Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n *\n * **Example:**\n * ```\n * <obc-alert-menu-item\n * status=\"unacknowledged\"\n * title=\"Engine Temperature High\"\n * description=\"Port main engine temperature exceeds normal operating range\"\n * time=\"14:30\"\n * hasIcon\n * >\n * <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n * <obi-engine slot=\"icon\"></obi-engine>\n * </obc-alert-menu-item>\n * ```\n *\n * @slot alert-icon - The main alert icon representing the alert type.\n * @slot icon - Optional secondary icon (e.g., source/system).\n *\n * @fires ack-click {CustomEvent<void>} Fired when the ACK action button is clicked.\n * @fires ack-secondary-click {CustomEvent<void>} Fired when the secondary action button is clicked.\n * @fires item-click {CustomEvent<void>} Fired when the alert menu item is clicked.\n * @stable\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n /**\n * Whether to display a secondary icon (e.g., system/source) in the item.\n * When true, the `icon` slot is rendered.\n */\n @property({type: Boolean}) hasIcon = false;\n\n /**\n * Indicates if the alert is shelved (temporarily deferred).\n * When true, a tertiary icon is shown to represent the shelved state.\n */\n @property({type: Boolean, reflect: true}) shelved = false;\n\n /**\n * The title of the alert.\n */\n @property({type: String}) override title = '';\n\n /**\n * The description of the alert.\n */\n @property({type: String}) description = '';\n\n /**\n * The day label for the alert (e.g., \"Yesterday\").\n */\n @property({type: String}) day = '';\n\n /**\n * The time label for the alert (e.g., \"14:30\").\n */\n @property({type: String}) time = '';\n\n /**\n * The current status of the alert item.\n * Determines visual style, icon, and action button visibility.\n * Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'.\n * Default is 'unacknowledged'.\n */\n @property({type: String, reflect: true}) status =\n ObcAlertMenuItemStatus.Unacknowledged;\n\n /**\n * Whether the item is expanded/open to show additional details.\n * Toggled by clicking the item.\n */\n @property({type: Boolean}) open = false;\n\n /**\n * Layout size of the menu item.\n * Controls whether content is single-line or multi-line.\n * Possible values: 'single-line', 'multi-line'.\n * Default is 'single-line'.\n */\n @property({type: String}) size: ObcMessageMenuItemSize =\n ObcMessageMenuItemSize.SingleLine;\n\n /**\n * Whether to animate the item's appearance (intro animation).\n */\n @property({type: Boolean}) animateIntro = false;\n\n /**\n * The label for the secondary action button.\n * Unlike the primary (ACK) action, the secondary label is not derived from\n * `status`; it must be provided explicitly. The secondary action is only\n * shown when a non-empty label is set and `secondaryActionState` is not\n * `none`.\n */\n @property({type: String}) secondaryActionLabel = '';\n\n /**\n * Controls the appearance of the primary (ACK) action.\n * See {@link ObcAlertMenuItemActionState} for the available states.\n */\n @property({type: String}) primaryActionState: ObcAlertMenuItemActionState =\n ObcAlertMenuItemActionState.Enabled;\n\n /**\n * Controls the appearance of the secondary action.\n * See {@link ObcAlertMenuItemActionState} for the available states.\n */\n @property({type: String}) secondaryActionState: ObcAlertMenuItemActionState =\n ObcAlertMenuItemActionState.None;\n\n private get primaryActionLabel() {\n if (this.primaryActionState === ObcAlertMenuItemActionState.None) {\n return '';\n }\n return this.status === ObcAlertMenuItemStatus.Unacknowledged ? 'ACK' : '';\n }\n\n private get secondaryActionLabelToShow() {\n if (this.secondaryActionState === ObcAlertMenuItemActionState.None) {\n return '';\n }\n return this.secondaryActionLabel;\n }\n\n private get primaryActionDisabled() {\n return this.primaryActionState === ObcAlertMenuItemActionState.Disabled;\n }\n\n private get secondaryActionDisabled() {\n return this.secondaryActionState === ObcAlertMenuItemActionState.Disabled;\n }\n\n private get hasTrailingIcon() {\n // True when we need the action container but don't have an ACK button\n return this.status !== ObcAlertMenuItemStatus.Unacknowledged;\n }\n\n private handleMessageClick() {\n this.dispatchEvent(new CustomEvent('item-click'));\n this.open = !this.open;\n }\n\n private handleActionClick() {\n this.dispatchEvent(new CustomEvent('ack-click'));\n }\n\n private handleSecondaryActionClick() {\n this.dispatchEvent(new CustomEvent('ack-secondary-click'));\n }\n\n override render() {\n return html`\n <obc-message-menu-item\n .title=${this.title}\n .description=${this.description}\n .day=${this.day}\n .time=${this.time}\n .primaryActionLabel=${this.primaryActionLabel}\n .secondaryActionLabel=${this.secondaryActionLabelToShow}\n .enablePrimaryAction=${!this.primaryActionDisabled}\n .enableSecondaryAction=${!this.secondaryActionDisabled}\n .size=${this.size}\n .open=${this.open}\n .hasSecondaryIcon=${this.hasIcon}\n .isShelved=${this.shelved}\n .hasTrailingIcon=${this.hasTrailingIcon}\n enhancedIcon\n hasPrimaryIcon\n @message-click=${this.handleMessageClick}\n @primary-action-click=${this.handleActionClick}\n @secondary-action-click=${this.handleSecondaryActionClick}\n >\n <slot name=\"alert-icon\" slot=\"primary-icon\"></slot>\n <slot name=\"title\" slot=\"title\">${this.title}</slot>\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n ${this.hasIcon\n ? html`<slot name=\"icon\" slot=\"secondary-icon\"></slot>`\n : nothing}\n ${choose(this.status, [\n [\n ObcAlertMenuItemStatus.NoAckAlarm,\n () =>\n html`<obi-alarm-noack-iec\n slot=\"trailing-icon\"\n useCssColor\n ></obi-alarm-noack-iec>`,\n ],\n [\n ObcAlertMenuItemStatus.NoAckWarning,\n () =>\n html`<obi-warning-noack-iec\n slot=\"trailing-icon\"\n useCssColor\n ></obi-warning-noack-iec>`,\n ],\n ])}\n </obc-message-menu-item>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ob-alert-menu-item': ObcAlertMenuItem;\n }\n}\n"],"names":["ObcAlertMenuItemStatus","ObcAlertMenuItemActionState"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"alert-menu-item.js","sources":["../../../src/components/alert-menu-item/alert-menu-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {choose} from 'lit/directives/choose.js';\n\nimport compentStyle from './alert-menu-item.css?inline';\nimport '../message-menu-item/message-menu-item.js';\nimport '../alert-icon/alert-icon.js';\nimport '../../icons/icon-alerts-shelf.js';\nimport '../../icons/icon-alarm-noack-iec.js';\nimport '../../icons/icon-warning-noack-iec.js';\nimport {ObcMessageMenuItemSize} from '../message-menu-item/message-menu-item.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcAlertMenuItemStatus {\n Unacknowledged = 'unacknowledged',\n Caution = 'caution',\n Acknowledged = 'acknowledged',\n NoAckAlarm = 'no-ack-alarm',\n NoAckWarning = 'no-ack-warning',\n Rectified = 'rectified',\n}\n\n/**\n * Appearance of an alert menu item action.\n * - `enabled`: Action is shown and interactive (default).\n * - `disabled`: Action is shown but cannot be triggered.\n * - `none`: Action is removed and takes no space.\n */\nexport enum ObcAlertMenuItemActionState {\n Enabled = 'enabled',\n Disabled = 'disabled',\n None = 'none',\n}\n\n/**\n * `<obc-alert-menu-item>` – A list item component for displaying alert or notification entries with status, icons, and action controls.\n *\n * Presents a concise summary of an alert or message, including status, title, description, and optional icons. Designed for use in alert menus, notification drawers, or similar lists where users need to review and acknowledge alerts efficiently.\n *\n * ### Features\n * - **Status Variants:** Supports multiple alert states via the `status` property:\n * - **Unacknowledged:** Shows an action button (ACK) for user acknowledgment.\n * - **Caution, Acknowledged, Rectified:** Display different visual cues for alert progression.\n * - **NoAckAlarm / NoAckWarning:** Show special icons indicating unacknowledged alarms or warnings.\n * - **Icon Support:** Optional secondary icon (e.g., system or source) and a primary alert icon. Tertiary \"shelved\" icon appears if the alert is shelved.\n * - **Time and Day Display:** Optionally shows day and/or time for the alert occurrence.\n * - **Expandable:** Can be toggled open/closed for additional details (via click).\n * - **Action Buttons:** Displays an \"ACK\" button for unacknowledged alerts and an optional secondary action (label set via `secondaryActionLabel`); each triggers an event when clicked.\n * - Each action's appearance is controlled independently via `primaryActionState` / `secondaryActionState` (`enabled`, `disabled`, or `none`).\n * - **Animated Intro:** Optional animation when the item appears.\n * - **Size Options:** Supports single-line or multi-line layouts (see `size` property).\n *\n * ### Usage Guidelines\n * Use `obc-alert-menu-item` to represent individual alerts or notifications in a menu, list, or notification center. Ideal for scenarios where users need to quickly scan, identify, and acknowledge alerts. The component is best suited for transient or actionable notifications rather than persistent banners.\n *\n * - Use the `status` property to reflect the current state of the alert.\n * - Provide a relevant icon in the `alert-icon` slot to visually indicate the alert type.\n * - Use the `icon` slot for a source/system icon if needed.\n * - Only show the \"ACK\" action for alerts that require acknowledgment.\n * - Provide `secondaryActionLabel` to add a second action alongside ACK.\n * - Use `primaryActionState` / `secondaryActionState` to temporarily disable an action (`disabled`) or remove it without leaving a gap (`none`).\n * - Use the `shelved` property to indicate alerts that are temporarily deferred.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |---------------|-------------------------------|------------------------------------------------------|\n * | alert-icon | Always | Main alert icon representing the alert type. |\n * | title | Always | Title content; falls back to the `title` property. |\n * | description | Always | Description content; falls back to the `description` property. |\n * | icon | If `hasIcon` is true | Secondary icon (e.g., system/source of alert). |\n *\n * ### Events\n * - **ack-click** – Fired when the ACK action button is clicked.\n * - **ack-secondary-click** – Fired when the secondary action button is clicked.\n * - **item-click** – Fired when the alert menu item is clicked (toggles open/closed).\n *\n * ### Best Practices\n * - Only display the ACK action for alerts that require acknowledgment.\n * - Use concise titles and descriptions for quick scanning.\n * - For grouped alerts, ensure each item has a unique status and icon as appropriate.\n * - Avoid overloading with too many icons; use secondary and tertiary icons only when necessary.\n * - Follow standard notification design guidelines: keep actionable items prominent, and use color/iconography to indicate severity or status.\n *\n * **Example:**\n * ```\n * <obc-alert-menu-item\n * status=\"unacknowledged\"\n * title=\"Engine Temperature High\"\n * description=\"Port main engine temperature exceeds normal operating range\"\n * time=\"14:30\"\n * hasIcon\n * >\n * <obc-alert-icon slot=\"alert-icon\" type=\"alarm\" active></obc-alert-icon>\n * <obi-engine slot=\"icon\"></obi-engine>\n * </obc-alert-menu-item>\n * ```\n *\n * @slot alert-icon - The main alert icon representing the alert type.\n * @slot title - Title content; falls back to the `title` property when empty.\n * @slot description - Description content; falls back to the `description` property when empty.\n * @slot icon - Optional secondary icon (e.g., source/system).\n *\n * @fires ack-click {CustomEvent<void>} Fired when the ACK action button is clicked.\n * @fires ack-secondary-click {CustomEvent<void>} Fired when the secondary action button is clicked.\n * @fires item-click {CustomEvent<void>} Fired when the alert menu item is clicked.\n * @stable\n */\n@customElement('obc-alert-menu-item')\nexport class ObcAlertMenuItem extends LitElement {\n /**\n * Whether to display a secondary icon (e.g., system/source) in the item.\n * When true, the `icon` slot is rendered.\n */\n @property({type: Boolean}) hasIcon = false;\n\n /**\n * Indicates if the alert is shelved (temporarily deferred).\n * When true, a tertiary icon is shown to represent the shelved state.\n */\n @property({type: Boolean, reflect: true}) shelved = false;\n\n /**\n * The title of the alert.\n */\n @property({type: String}) override title = '';\n\n /**\n * The description of the alert.\n */\n @property({type: String}) description = '';\n\n /**\n * The day label for the alert (e.g., \"Yesterday\").\n */\n @property({type: String}) day = '';\n\n /**\n * The time label for the alert (e.g., \"14:30\").\n */\n @property({type: String}) time = '';\n\n /**\n * The current status of the alert item.\n * Determines visual style, icon, and action button visibility.\n * Possible values: 'unacknowledged', 'caution', 'acknowledged', 'no-ack-alarm', 'no-ack-warning', 'rectified'.\n * Default is 'unacknowledged'.\n */\n @property({type: String, reflect: true}) status =\n ObcAlertMenuItemStatus.Unacknowledged;\n\n /**\n * Whether the item is expanded/open to show additional details.\n * Toggled by clicking the item.\n */\n @property({type: Boolean}) open = false;\n\n /**\n * Layout size of the menu item.\n * Controls whether content is single-line or multi-line.\n * Possible values: 'single-line', 'multi-line'.\n * Default is 'single-line'.\n */\n @property({type: String}) size: ObcMessageMenuItemSize =\n ObcMessageMenuItemSize.SingleLine;\n\n /**\n * Whether to animate the item's appearance (intro animation).\n */\n @property({type: Boolean}) animateIntro = false;\n\n /**\n * The label for the secondary action button.\n * Unlike the primary (ACK) action, the secondary label is not derived from\n * `status`; it must be provided explicitly. The secondary action is only\n * shown when a non-empty label is set and `secondaryActionState` is not\n * `none`.\n */\n @property({type: String}) secondaryActionLabel = '';\n\n /**\n * Controls the appearance of the primary (ACK) action.\n * See {@link ObcAlertMenuItemActionState} for the available states.\n */\n @property({type: String}) primaryActionState: ObcAlertMenuItemActionState =\n ObcAlertMenuItemActionState.Enabled;\n\n /**\n * Controls the appearance of the secondary action.\n * See {@link ObcAlertMenuItemActionState} for the available states.\n */\n @property({type: String}) secondaryActionState: ObcAlertMenuItemActionState =\n ObcAlertMenuItemActionState.None;\n\n private get primaryActionLabel() {\n if (this.primaryActionState === ObcAlertMenuItemActionState.None) {\n return '';\n }\n return this.status === ObcAlertMenuItemStatus.Unacknowledged ? 'ACK' : '';\n }\n\n private get secondaryActionLabelToShow() {\n if (this.secondaryActionState === ObcAlertMenuItemActionState.None) {\n return '';\n }\n return this.secondaryActionLabel;\n }\n\n private get primaryActionDisabled() {\n return this.primaryActionState === ObcAlertMenuItemActionState.Disabled;\n }\n\n private get secondaryActionDisabled() {\n return this.secondaryActionState === ObcAlertMenuItemActionState.Disabled;\n }\n\n private get hasTrailingIcon() {\n // True when we need the action container but don't have an ACK button\n return this.status !== ObcAlertMenuItemStatus.Unacknowledged;\n }\n\n private handleMessageClick() {\n this.dispatchEvent(new CustomEvent('item-click'));\n this.open = !this.open;\n }\n\n private handleActionClick() {\n this.dispatchEvent(new CustomEvent('ack-click'));\n }\n\n private handleSecondaryActionClick() {\n this.dispatchEvent(new CustomEvent('ack-secondary-click'));\n }\n\n override render() {\n return html`\n <obc-message-menu-item\n .title=${this.title}\n .description=${this.description}\n .day=${this.day}\n .time=${this.time}\n .primaryActionLabel=${this.primaryActionLabel}\n .secondaryActionLabel=${this.secondaryActionLabelToShow}\n .enablePrimaryAction=${!this.primaryActionDisabled}\n .enableSecondaryAction=${!this.secondaryActionDisabled}\n .size=${this.size}\n .open=${this.open}\n .hasSecondaryIcon=${this.hasIcon}\n .isShelved=${this.shelved}\n .hasTrailingIcon=${this.hasTrailingIcon}\n enhancedIcon\n hasPrimaryIcon\n @message-click=${this.handleMessageClick}\n @primary-action-click=${this.handleActionClick}\n @secondary-action-click=${this.handleSecondaryActionClick}\n >\n <slot name=\"alert-icon\" slot=\"primary-icon\"></slot>\n <slot name=\"title\" slot=\"title\">${this.title}</slot>\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n ${this.hasIcon\n ? html`<slot name=\"icon\" slot=\"secondary-icon\"></slot>`\n : nothing}\n ${choose(this.status, [\n [\n ObcAlertMenuItemStatus.NoAckAlarm,\n () =>\n html`<obi-alarm-noack-iec\n slot=\"trailing-icon\"\n useCssColor\n ></obi-alarm-noack-iec>`,\n ],\n [\n ObcAlertMenuItemStatus.NoAckWarning,\n () =>\n html`<obi-warning-noack-iec\n slot=\"trailing-icon\"\n useCssColor\n ></obi-warning-noack-iec>`,\n ],\n ])}\n </obc-message-menu-item>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ob-alert-menu-item': ObcAlertMenuItem;\n }\n}\n"],"names":["ObcAlertMenuItemStatus","ObcAlertMenuItemActionState"],"mappings":"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"}
|
|
@@ -6,6 +6,9 @@ export declare enum ObcChatMessagePosition {
|
|
|
6
6
|
Single = "single"
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
|
+
* `<obc-chat-message>` – A single chat message bubble with optional name and date header.
|
|
10
|
+
*
|
|
11
|
+
* @slot - The message content (body of the chat bubble).
|
|
9
12
|
* @stable
|
|
10
13
|
*/
|
|
11
14
|
export declare class ObcChatMessage extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat-message/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,oBAAY,sBAAsB;IAChC,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED
|
|
1
|
+
{"version":3,"file":"chat-message.d.ts","sourceRoot":"","sources":["../../../src/components/chat-message/chat-message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAMzD,oBAAY,sBAAsB;IAChC,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AAED;;;;;GAKG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,oCAAoC;IACV,IAAI,EAAG,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAS;IACrD,oCAAoC;IACN,IAAI,EAAG,IAAI,CAAC;IACf,QAAQ,EAAE,OAAO,CAAS;IAC3B,QAAQ,EAAE,sBAAsB,CAC1B;IAChC,oCAAoC;IACN,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAO9D;IACsB,IAAI,EAAE,OAAO,CAAS;IAExC,MAAM;IAkCf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chat-message.js","sources":["../../../src/components/chat-message/chat-message.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './chat-message.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcChatMessagePosition {\n Top = 'top',\n Middle = 'middle',\n Bottom = 'bottom',\n Single = 'single',\n}\n\n/**\n * @stable\n */\n@customElement('obc-chat-message')\nexport class ObcChatMessage extends LitElement {\n /** @availableWhen showName==true */\n @property({type: String}) name!: string;\n @property({type: Boolean}) showName: boolean = false;\n /** @availableWhen showDate==true */\n @property({attribute: false}) date!: Date;\n @property({type: Boolean}) showDate: boolean = false;\n @property({type: String}) position: ObcChatMessagePosition =\n ObcChatMessagePosition.Single;\n /** @availableWhen showDate==true */\n @property({attribute: false}) dateFormatter: (date: Date) => string = (\n date: Date\n ) =>\n date.toLocaleTimeString(undefined, {\n hour12: false,\n minute: '2-digit',\n hour: '2-digit',\n });\n @property({type: Boolean}) self: boolean = false;\n\n override render() {\n const round =\n this.position === ObcChatMessagePosition.Single &&\n !this.showDate &&\n !this.showName;\n return html` <div\n class=${classMap({\n wrapper: true,\n self: this.self,\n other: !this.self,\n [this.position]: true,\n round,\n })}\n >\n ${this.showName || this.showDate\n ? html`<div class=\"header\">\n ${this.showName\n ? html`<div class=\"name\">${this.name}</div>`\n : nothing}\n ${this.showDate\n ? html`<div class=\"date\">\n ${this.date !== undefined\n ? this.dateFormatter(this.date)\n : nothing}\n </div>`\n : nothing}\n </div>`\n : nothing}\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>`;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-chat-message': ObcChatMessage;\n }\n}\n"],"names":["ObcChatMessagePosition"],"mappings":";;;;;;;;;;;;;;;AAMO,IAAK,2CAAAA,4BAAL;AACLA,0BAAA,KAAA,IAAM;AACNA,0BAAA,QAAA,IAAS;AACTA,0BAAA,QAAA,IAAS;AACTA,0BAAA,QAAA,IAAS;AAJC,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;
|
|
1
|
+
{"version":3,"file":"chat-message.js","sources":["../../../src/components/chat-message/chat-message.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './chat-message.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcChatMessagePosition {\n Top = 'top',\n Middle = 'middle',\n Bottom = 'bottom',\n Single = 'single',\n}\n\n/**\n * `<obc-chat-message>` – A single chat message bubble with optional name and date header.\n *\n * @slot - The message content (body of the chat bubble).\n * @stable\n */\n@customElement('obc-chat-message')\nexport class ObcChatMessage extends LitElement {\n /** @availableWhen showName==true */\n @property({type: String}) name!: string;\n @property({type: Boolean}) showName: boolean = false;\n /** @availableWhen showDate==true */\n @property({attribute: false}) date!: Date;\n @property({type: Boolean}) showDate: boolean = false;\n @property({type: String}) position: ObcChatMessagePosition =\n ObcChatMessagePosition.Single;\n /** @availableWhen showDate==true */\n @property({attribute: false}) dateFormatter: (date: Date) => string = (\n date: Date\n ) =>\n date.toLocaleTimeString(undefined, {\n hour12: false,\n minute: '2-digit',\n hour: '2-digit',\n });\n @property({type: Boolean}) self: boolean = false;\n\n override render() {\n const round =\n this.position === ObcChatMessagePosition.Single &&\n !this.showDate &&\n !this.showName;\n return html` <div\n class=${classMap({\n wrapper: true,\n self: this.self,\n other: !this.self,\n [this.position]: true,\n round,\n })}\n >\n ${this.showName || this.showDate\n ? html`<div class=\"header\">\n ${this.showName\n ? html`<div class=\"name\">${this.name}</div>`\n : nothing}\n ${this.showDate\n ? html`<div class=\"date\">\n ${this.date !== undefined\n ? this.dateFormatter(this.date)\n : nothing}\n </div>`\n : nothing}\n </div>`\n : nothing}\n <div class=\"content\">\n <slot></slot>\n </div>\n </div>`;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-chat-message': ObcChatMessage;\n }\n}\n"],"names":["ObcChatMessagePosition"],"mappings":";;;;;;;;;;;;;;;AAMO,IAAK,2CAAAA,4BAAL;AACLA,0BAAA,KAAA,IAAM;AACNA,0BAAA,QAAA,IAAS;AACTA,0BAAA,QAAA,IAAS;AACTA,0BAAA,QAAA,IAAS;AAJC,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAcL,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAGsB,SAAA,WAAoB;AAGpB,SAAA,WAAoB;AACrB,SAAA,WACxB;AAE4B,SAAA,gBAAwC,CACpE,SAEA,KAAK,mBAAmB,QAAW;AAAA,MACjC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA,CACP;AACwB,SAAA,OAAgB;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,UAAM,QACJ,KAAK,aAAa,YAClB,CAAC,KAAK,YACN,CAAC,KAAK;AACR,WAAO;AAAA,cACG,SAAS;AAAA,MACf,SAAS;AAAA,MACT,MAAM,KAAK;AAAA,MACX,OAAO,CAAC,KAAK;AAAA,MACb,CAAC,KAAK,QAAQ,GAAG;AAAA,MACjB;AAAA,IAAA,CACD,CAAC;AAAA;AAAA,QAEA,KAAK,YAAY,KAAK,WACpB;AAAA,cACI,KAAK,WACH,yBAAyB,KAAK,IAAI,WAClC,OAAO;AAAA,cACT,KAAK,WACH;AAAA,oBACI,KAAK,SAAS,SACZ,KAAK,cAAc,KAAK,IAAI,IAC5B,OAAO;AAAA,0BAEb,OAAO;AAAA,oBAEb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKf;AAGF;AAvDa,eAsDK,SAAS,UAAU,YAAY;AApDrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,eAEe,WAAA,QAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,eAGgB,WAAA,YAAA,CAAA;AAEG,gBAAA;AAAA,EAA7B,SAAS,EAAC,WAAW,MAAA,CAAM;AAAA,GALjB,eAKmB,WAAA,QAAA,CAAA;AACH,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GANd,eAMgB,WAAA,YAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,eAOe,WAAA,YAAA,CAAA;AAGI,gBAAA;AAAA,EAA7B,SAAS,EAAC,WAAW,MAAA,CAAM;AAAA,GAVjB,eAUmB,WAAA,iBAAA,CAAA;AAQH,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAlBd,eAkBgB,WAAA,QAAA,CAAA;AAlBhB,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}
|
|
@@ -30,10 +30,8 @@ import '../radio/radio.js';
|
|
|
30
30
|
* ---
|
|
31
31
|
*
|
|
32
32
|
* ### Slots
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
* | leading-icon | Always | Contains the radio button itself. |
|
|
36
|
-
* | label | Always | Displays the label text for the option. |
|
|
33
|
+
* This component exposes no slots. The radio input and its label are rendered
|
|
34
|
+
* internally from the `label`, `value`, `checked`, and related properties.
|
|
37
35
|
*
|
|
38
36
|
* ---
|
|
39
37
|
*
|
|
@@ -74,8 +72,6 @@ import '../radio/radio.js';
|
|
|
74
72
|
* ```
|
|
75
73
|
* In this example, two card radios form a group; only one can be selected at a time.
|
|
76
74
|
*
|
|
77
|
-
* @slot leading-icon - Contains the radio button input.
|
|
78
|
-
* @slot label - Displays the label text for the radio option.
|
|
79
75
|
* @fires change - Fired when the radio is changed.
|
|
80
76
|
* @stable
|
|
81
77
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elevated-card-radio.d.ts","sourceRoot":"","sources":["../../../src/components/elevated-card-radio/elevated-card-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EAEpB,MAAM,mCAAmC,CAAC;AAI3C
|
|
1
|
+
{"version":3,"file":"elevated-card-radio.d.ts","sourceRoot":"","sources":["../../../src/components/elevated-card-radio/elevated-card-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EAEpB,MAAM,mCAAmC,CAAC;AAI3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAK;IAE3B;;;OAGG;IACuB,QAAQ,EAAE,uBAAuB,CACzB;IAElC;;;OAGG;IACuB,IAAI,EAAE,mBAAmB,CAClB;IAEjC;;;OAGG;IACwB,aAAa,UAAS;IAEjD;;;OAGG;IACwB,MAAM,UAAS;IAE1C;;OAEG;IACuB,IAAI,SAAM;IAEpC;;OAEG;IACuB,KAAK,SAAM;IAErC;;OAEG;IACuB,KAAK,SAAM;IAErC;;OAEG;IACwB,OAAO,EAAE,OAAO,CAAS;IAEpD;;OAEG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD;;OAEG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD,OAAO,CAAC,UAAU,CAAS;;cAOR,gBAAgB,IAAI,WAAW,GAAG,gBAAgB;IAI5D,MAAM;IAgCf,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,kBAAkB;CAO3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elevated-card-radio.js","sources":["../../../src/components/elevated-card-radio/elevated-card-radio.ts"],"sourcesContent":["import {LitElement, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../elevated-card/elevated-card.js';\nimport '../radio/radio.js';\nimport {\n ObcElevatedCardPosition,\n ObcElevatedCardSize,\n ObcElevatedCardTag,\n} from '../elevated-card/elevated-card.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcRadio} from '../radio/radio.js';\n\n/**\n * `<obc-elevated-card-radio>` – A single radio button presented within an elevated card container for visually distinct selection in a group.\n *\n * This component combines a radio input with an elevated card layout, making each option in a set more prominent and easier to scan. It is ideal for scenarios where radio choices need to be visually separated or require additional emphasis compared to standard radio groups.\n *\n * ---\n *\n * ### Features\n * - **Elevated Card Presentation:** Each radio option is wrapped in an elevated card, improving clarity and touch target size.\n * - **Integrated Radio Button:** Uses an underlying `<obc-radio>` for native group behavior and accessibility.\n * - **Customizable Appearance:** Supports `position` (layout), `size`, `graphicBorder`, and `border` for visual adjustments.\n * - **Label Support:** Displays a label next to the radio for clear identification.\n * - **Disabled and Required States:** Can be disabled or marked as required for form validation.\n * - **Light DOM Rendering:** Renders in the light DOM to allow native radio grouping via the `name` property.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `obc-elevated-card-radio` when you want to present a set of mutually exclusive options with greater visual separation than standard radio buttons. This is especially useful in forms or settings panels where choices should stand out or be easily tappable.\n *\n * - Group multiple `obc-elevated-card-radio` components with the same `name` property to create a radio group.\n * - Prefer this component over plain radios when you need a more prominent or card-like selection UI.\n * - For simple, inline choices, use a standard `<obc-radio>` instead.\n * - **TODO(designer):** Confirm if there are recommended use cases or design constraints for when to use the card radio versus other selection controls.\n *\n * ---\n *\n * ### Slots\n *
|
|
1
|
+
{"version":3,"file":"elevated-card-radio.js","sources":["../../../src/components/elevated-card-radio/elevated-card-radio.ts"],"sourcesContent":["import {LitElement, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../elevated-card/elevated-card.js';\nimport '../radio/radio.js';\nimport {\n ObcElevatedCardPosition,\n ObcElevatedCardSize,\n ObcElevatedCardTag,\n} from '../elevated-card/elevated-card.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcRadio} from '../radio/radio.js';\n\n/**\n * `<obc-elevated-card-radio>` – A single radio button presented within an elevated card container for visually distinct selection in a group.\n *\n * This component combines a radio input with an elevated card layout, making each option in a set more prominent and easier to scan. It is ideal for scenarios where radio choices need to be visually separated or require additional emphasis compared to standard radio groups.\n *\n * ---\n *\n * ### Features\n * - **Elevated Card Presentation:** Each radio option is wrapped in an elevated card, improving clarity and touch target size.\n * - **Integrated Radio Button:** Uses an underlying `<obc-radio>` for native group behavior and accessibility.\n * - **Customizable Appearance:** Supports `position` (layout), `size`, `graphicBorder`, and `border` for visual adjustments.\n * - **Label Support:** Displays a label next to the radio for clear identification.\n * - **Disabled and Required States:** Can be disabled or marked as required for form validation.\n * - **Light DOM Rendering:** Renders in the light DOM to allow native radio grouping via the `name` property.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `obc-elevated-card-radio` when you want to present a set of mutually exclusive options with greater visual separation than standard radio buttons. This is especially useful in forms or settings panels where choices should stand out or be easily tappable.\n *\n * - Group multiple `obc-elevated-card-radio` components with the same `name` property to create a radio group.\n * - Prefer this component over plain radios when you need a more prominent or card-like selection UI.\n * - For simple, inline choices, use a standard `<obc-radio>` instead.\n * - **TODO(designer):** Confirm if there are recommended use cases or design constraints for when to use the card radio versus other selection controls.\n *\n * ---\n *\n * ### Slots\n * This component exposes no slots. The radio input and its label are rendered\n * internally from the `label`, `value`, `checked`, and related properties.\n *\n * ---\n *\n * ### Properties and Attributes\n * - `position`: Controls the card's layout position (default: Regular).\n * - `size`: Sets the card size (default: SingleLine).\n * - `graphicBorder`/`border`: Toggles visual borders on the card.\n * - `name`: Groups radios for mutual exclusivity (must match across group).\n * - `value`: The value submitted when this radio is selected.\n * - `label`: Text label shown next to the radio.\n * - `checked`: Whether this radio is selected.\n * - `disabled`: Disables the radio and card interaction.\n * - `required`: Marks the radio as required for form validation.\n *\n * ---\n *\n * ### Best Practices\n * - Ensure all radios in a group share the same `name` for correct selection behavior.\n * - Only one radio in a group should be `checked` at a time.\n * - Use concise, descriptive labels for each option.\n * - For accessibility, labels are linked to their radio via the `for` and `inputId` attributes.\n *\n * ---\n *\n * ### Example:\n * ```html\n * <obc-elevated-card-radio\n * name=\"choices\"\n * value=\"option1\"\n * label=\"Option 1\"\n * ?checked=${true}\n * ></obc-elevated-card-radio>\n * <obc-elevated-card-radio\n * name=\"choices\"\n * value=\"option2\"\n * label=\"Option 2\"\n * ></obc-elevated-card-radio>\n * ```\n * In this example, two card radios form a group; only one can be selected at a time.\n *\n * @fires change - Fired when the radio is changed.\n * @stable\n */\n@customElement('obc-elevated-card-radio')\nexport class ObcElevatedCardRadio extends LitElement {\n private static counter = 0;\n\n /**\n * Controls the card's layout position. Accepts values from `ObcElevatedCardPosition` enum.\n * Default is `Regular`.\n */\n @property({type: String}) position: ObcElevatedCardPosition =\n ObcElevatedCardPosition.Regular;\n\n /**\n * Sets the card's size. Accepts values from `ObcElevatedCardSize` enum.\n * Default is `SingleLine`.\n */\n @property({type: String}) size: ObcElevatedCardSize =\n ObcElevatedCardSize.SingleLine;\n\n /**\n * If true, displays a graphic border around the card for emphasis.\n * Default is false.\n */\n @property({type: Boolean}) graphicBorder = false;\n\n /**\n * If true, displays a standard border around the card.\n * Default is false.\n */\n @property({type: Boolean}) border = false;\n\n /**\n * The radio group name. Radios with the same name are grouped and only one can be selected at a time.\n */\n @property({type: String}) name = '';\n\n /**\n * The value submitted with the form when this radio is selected.\n */\n @property({type: String}) value = '';\n\n /**\n * The label text displayed next to the radio button.\n */\n @property({type: String}) label = '';\n\n /**\n * Whether this radio is currently selected.\n */\n @property({type: Boolean}) checked: boolean = false;\n\n /**\n * Disables the radio button and prevents user interaction.\n */\n @property({type: Boolean}) disabled: boolean = false;\n\n /**\n * Marks the radio as required for form validation.\n */\n @property({type: Boolean}) required: boolean = false;\n\n private instanceId: string;\n\n constructor() {\n super();\n this.instanceId = `obc-elevated-card-radio-${ObcElevatedCardRadio.counter++}`;\n }\n\n protected override createRenderRoot(): HTMLElement | DocumentFragment {\n return this; // Renders into light DOM\n }\n\n override render() {\n return html`\n <obc-elevated-card\n class=\"obc-elevated-card-radio\"\n .overrideTag=${ObcElevatedCardTag.Div}\n .position=${this.position}\n .size=${ObcElevatedCardSize.SingleLine}\n ?graphicBorder=${this.graphicBorder}\n ?border=${this.border}\n @click=${this._handleCardClick}\n hasLeadingIcon\n >\n <obc-radio\n .name=${this.name}\n inputId=${this.instanceId}\n .value=${this.value}\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n @change=${this._handleRadioChange}\n slot=\"leading-icon\"\n ></obc-radio>\n <label\n class=\"obc-elevated-card-radio__label\"\n for=${this.instanceId}\n slot=\"label\"\n >${this.label}</label\n >\n </obc-elevated-card>\n `;\n }\n\n private _handleCardClick() {\n this.renderRoot.querySelector('input')?.click();\n }\n\n private _handleRadioChange(event: Event) {\n const radio = event.target as ObcRadio;\n this.checked = radio.checked;\n this.dispatchEvent(\n new CustomEvent('change', {detail: {value: radio.value}})\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-elevated-card-radio': ObcElevatedCardRadio;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsFO,IAAM,uBAAN,cAAmC,WAAW;AAAA,EA6DnD,cAAc;AACZ,UAAA;AAvDwB,SAAA,WACxB,wBAAwB;AAMA,SAAA,OACxB,oBAAoB;AAMK,SAAA,gBAAgB;AAMhB,SAAA,SAAS;AAKV,SAAA,OAAO;AAKP,SAAA,QAAQ;AAKR,SAAA,QAAQ;AAKP,SAAA,UAAmB;AAKnB,SAAA,WAAoB;AAKpB,SAAA,WAAoB;AAM7C,SAAK,aAAa,2BAA2B,qBAAqB,SAAS;AAAA,EAC7E;AAAA,EAEmB,mBAAmD;AACpE,WAAO;AAAA,EACT;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA;AAAA,uBAGY,mBAAmB,GAAG;AAAA,oBACzB,KAAK,QAAQ;AAAA,gBACjB,oBAAoB,UAAU;AAAA,yBACrB,KAAK,aAAa;AAAA,kBACzB,KAAK,MAAM;AAAA,iBACZ,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,kBAIpB,KAAK,IAAI;AAAA,oBACP,KAAK,UAAU;AAAA,mBAChB,KAAK,KAAK;AAAA,qBACR,KAAK,OAAO;AAAA,sBACX,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,oBACf,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,gBAK3B,KAAK,UAAU;AAAA;AAAA,aAElB,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAIrB;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW,cAAc,OAAO,GAAG,MAAA;AAAA,EAC1C;AAAA,EAEQ,mBAAmB,OAAc;AACvC,UAAM,QAAQ,MAAM;AACpB,SAAK,UAAU,MAAM;AACrB,SAAK;AAAA,MACH,IAAI,YAAY,UAAU,EAAC,QAAQ,EAAC,OAAO,MAAM,QAAK,CAAE;AAAA,IAAA;AAAA,EAE5D;AACF;AAjHa,qBACI,UAAU;AAMC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,qBAOe,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAdb,qBAce,WAAA,QAAA,CAAA;AAOC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArBd,qBAqBgB,WAAA,iBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA3Bd,qBA2BgB,WAAA,UAAA,CAAA;AAKD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhCb,qBAgCe,WAAA,QAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArCb,qBAqCe,WAAA,SAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA1Cb,qBA0Ce,WAAA,SAAA,CAAA;AAKC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA/Cd,qBA+CgB,WAAA,WAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApDd,qBAoDgB,WAAA,YAAA,CAAA;AAKA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAzDd,qBAyDgB,WAAA,YAAA,CAAA;AAzDhB,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;"}
|
|
@@ -19,6 +19,12 @@ export declare enum ObcKeyboardNumericContent {
|
|
|
19
19
|
Symbols = "symbols"
|
|
20
20
|
}
|
|
21
21
|
/**
|
|
22
|
+
* `<obc-keyboard-numeric>` – An on-screen numeric keyboard with optional calculation and symbol modes.
|
|
23
|
+
*
|
|
24
|
+
* @slot leading-icon - Custom leading icon shown inside the input field (rendered when `hasLeadingIcon` is true).
|
|
25
|
+
* @fires close-click {CustomEvent} Fired when the close button (or Escape) dismisses the keyboard.
|
|
26
|
+
* @fires value-change {CustomEvent<{value: string}>} Fired whenever the current value changes.
|
|
27
|
+
* @fires done-click {CustomEvent<{value: string}>} Fired when the DONE button (or Enter) is pressed.
|
|
22
28
|
* @beta
|
|
23
29
|
*/
|
|
24
30
|
export declare class ObcKeyboardNumeric extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboard-numeric.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard-numeric/keyboard-numeric.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6CAA6C,CAAC;AACrD,OAAO,EAEL,4BAA4B,EAG7B,MAAM,6CAA6C,CAAC;AAGrD,oBAAY,sBAAsB;IAChC,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAsDD
|
|
1
|
+
{"version":3,"file":"keyboard-numeric.d.ts","sourceRoot":"","sources":["../../../src/components/keyboard-numeric/keyboard-numeric.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AACnC,OAAO,6CAA6C,CAAC;AACrD,OAAO,EAEL,4BAA4B,EAG7B,MAAM,6CAA6C,CAAC;AAGrD,oBAAY,sBAAsB;IAChC,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAsDD;;;;;;;;GAQG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IACtB,IAAI,EAAE,sBAAsB,CACpB;IAElC;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;;OAGG;IACuB,KAAK,SAAoB;IAEnD,0BAA0B;IACA,KAAK,SAAM;IAErC,2DAA2D;IAChC,cAAc,UAAS;IAElD,8EAA8E;IACnD,WAAW,UAAS;IAE/C,0DAA0D;IAChC,UAAU,SAAM;IAE1C,mDAAmD;IACxB,cAAc,UAAS;IAElD,kCAAkC;IACR,IAAI,SAAM;IAEpC,oCAAoC;IACV,mBAAmB,EAAE,4BAA4B,CACtC;IAErC,wFAAwF;IAC9D,iBAAiB,SAAM;IAExC,OAAO,CAAC,OAAO,CACY;IAEpC,OAAO,KAAK,0BAA0B,GAKrC;IAED,iEAAiE;IACjE,OAAO,CAAC,eAAe;IA+BvB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,kBAAkB;IA0B1B,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,oBAAoB;IAuC5B,OAAO,CAAC,cAAc;IA6BtB,OAAO,CAAC,gBAAgB;cAqBL,MAAM;IAyEzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboard-numeric.js","sources":["../../../src/components/keyboard-numeric/keyboard-numeric.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './keyboard-numeric.css?inline';\n\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-backspace-google.js';\nimport '../button/button.js';\nimport '../../icons/icon-up-iec.js';\nimport '../../icons/icon-down-iec.js';\nimport '../../icons/icon-multiply.js';\nimport '../../icons/icon-divide.js';\nimport '../../icons/icon-equal.js';\nimport '../number-input-field/number-input-field.js';\nimport {\n ObcNumberInputField,\n ObcNumberInputFieldTextAlign,\n ObcNumberInputFieldSize,\n ObcNumberInputFieldInputEvent,\n} from '../number-input-field/number-input-field.js';\nimport {parseNumberInput} from '../number-input-field/number-input-format.js';\n\nexport enum ObcKeyboardNumericType {\n Floating = 'floating',\n Flat = 'flat',\n}\n\nexport enum ObcKeyboardNumericContent {\n Numbers = 'numbers',\n Symbols = 'symbols',\n}\n\n// Key layouts\nconst NUMBER_KEYS = [\n ['1', '2', '3'],\n ['4', '5', '6'],\n ['7', '8', '9'],\n ['–', '0', ','],\n];\n\nconst SYMBOL_KEYS = [\n ['!', '@', '#'],\n ['$', '%', '&'],\n ['(', ')', '/'],\n ['–', '0', ','],\n];\n\n// All allowed characters for validation\nconst ALLOWED_CHARS = [\n '0',\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '–',\n '-',\n ',',\n '.',\n '+',\n '×',\n '÷',\n '=',\n '!',\n '@',\n '#',\n '$',\n '%',\n '&',\n '(',\n ')',\n '/',\n];\n\nconst OPERATORS = ['+', '-', '–', '×', '÷', '*', '/'];\n\nconst ALLOWED_CHARS_PATTERN = `^[${ALLOWED_CHARS.map((c) =>\n c.replace(/[-.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n).join('')}]*$`;\n\n/**\n * @beta\n */\n@customElement('obc-keyboard-numeric')\nexport class ObcKeyboardNumeric extends LitElement {\n @property({type: String}) type: ObcKeyboardNumericType =\n ObcKeyboardNumericType.Floating;\n\n /**\n * Shows the top bar with label and close button (only applicable for floating type)\n * @availableWhen type==Floating\n */\n @property({type: Boolean}) hasTitleBar = false;\n\n /**\n * Label displayed in the top bar\n * @availableWhen hasTitleBar==true && type==Floating\n */\n @property({type: String}) label = 'Parameter name';\n\n /** Current input value */\n @property({type: String}) value = '';\n\n /** Shows the calculation row with +, -, ×, ÷, = buttons */\n @property({type: Boolean}) hasCalculation = false;\n\n /** Shows the #+= / 123 toggle button to switch between numbers and symbols */\n @property({type: Boolean}) has2Symbols = false;\n\n /** Helper text content displayed below the input field */\n @property({type: String}) helperText = '';\n\n /** Shows a leading icon slot in the input field */\n @property({type: Boolean}) hasLeadingIcon = false;\n\n /** Unit text (%, kg, °C, etc.) */\n @property({type: String}) unit = '';\n\n /** Text alignment in input field */\n @property({type: String}) inputFieldTextAlign: ObcNumberInputFieldTextAlign =\n ObcNumberInputFieldTextAlign.Right;\n\n /** Optional regex pattern for validation (applies to both keyboard and direct input) */\n @property({type: String}) validationPattern = '';\n\n @state() private content: ObcKeyboardNumericContent =\n ObcKeyboardNumericContent.Numbers;\n\n private get effectiveValidationPattern(): string {\n if (!this.validationPattern) {\n return ALLOWED_CHARS_PATTERN;\n }\n return `^(?=${ALLOWED_CHARS_PATTERN})(?=${this.validationPattern}).*$`;\n }\n\n /** Validates if a character can be added to the current value */\n private canAddCharacter(char: string): boolean {\n const potentialValue = this.value + char;\n\n if (this.validationPattern) {\n const regex = new RegExp(this.validationPattern);\n return regex.test(potentialValue);\n }\n\n if (!ALLOWED_CHARS.includes(char)) {\n return false;\n }\n\n const lastChar = this.value.slice(-1);\n\n // Only one decimal separator per number segment\n if (char === ',' || char === '.') {\n const segments = this.value.split(/[+\\-–×÷*/]/);\n const currentSegment = segments[segments.length - 1] || '';\n return !currentSegment.includes(',') && !currentSegment.includes('.');\n }\n\n // Minus/plus allowed at beginning or after an operator\n if (char === '–' || char === '-' || char === '+') {\n return (\n this.value === '' || this.value === '0' || OPERATORS.includes(lastChar)\n );\n }\n\n return true;\n }\n\n private handleCloseClick() {\n this.dispatchEvent(\n new CustomEvent('close-click', {bubbles: true, composed: true})\n );\n }\n\n private handleKeyPress(key: string) {\n if (this.canAddCharacter(key)) {\n if (\n (key === '–' || key === '-' || key === '+') &&\n (this.value === '' || this.value === '0')\n ) {\n this.value = key;\n } else {\n this.value += key;\n }\n this.dispatchValueChange();\n }\n }\n\n private handleCalculationKey(key: string) {\n if (key === '=') {\n this.evaluateExpression();\n } else {\n this.value += key;\n this.dispatchValueChange();\n }\n }\n\n private evaluateExpression() {\n if (!this.value) return;\n\n try {\n const expression = this.value\n .replace(/×/g, '*')\n .replace(/÷/g, '/')\n .replace(/–/g, '-')\n .replace(/,/g, '.');\n\n if (!/^[\\d+\\-*/().]+$/.test(expression)) {\n return;\n }\n\n const result = new Function(`return (${expression})`)();\n\n if (typeof result === 'number' && isFinite(result)) {\n const rounded = Math.round(result * 1000000) / 1000000;\n this.value = String(rounded).replace('.', ',');\n this.dispatchValueChange();\n }\n } catch {\n // If evaluation fails, keep the current value\n }\n }\n\n private handleBackspace() {\n if (this.value.length > 0) {\n this.value = this.value.slice(0, -1);\n this.dispatchValueChange();\n }\n }\n\n private handleClear() {\n this.value = '';\n this.dispatchValueChange();\n }\n\n private handleToggleContent() {\n this.content =\n this.content === ObcKeyboardNumericContent.Numbers\n ? ObcKeyboardNumericContent.Symbols\n : ObcKeyboardNumericContent.Numbers;\n }\n\n private handleDone() {\n this.evaluateExpression();\n this.dispatchEvent(\n new CustomEvent('done-click', {\n detail: {value: this.value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private dispatchValueChange() {\n this.dispatchEvent(\n new CustomEvent('value-change', {\n detail: {value: this.value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleInput(e: ObcNumberInputFieldInputEvent) {\n const input = e.target as ObcNumberInputField;\n const newValue = input.displayValue;\n\n this.value = newValue;\n this.dispatchValueChange();\n }\n\n private handleInputKeydown(e: KeyboardEvent) {\n if (e.key === 'Enter') {\n e.preventDefault();\n this.handleDone();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n this.handleCloseClick();\n }\n }\n\n private renderCalculationRow() {\n if (!this.hasCalculation) return nothing;\n\n return html`\n <div class=\"calculation-container\">\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('+')}\n >\n <obi-up-iec></obi-up-iec>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('-')}\n >\n <obi-down-iec></obi-down-iec>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('×')}\n >\n <obi-multiply></obi-multiply>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('÷')}\n >\n <obi-divide></obi-divide>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('=')}\n >\n <obi-equal></obi-equal>\n </obc-icon-button>\n </div>\n `;\n }\n\n private renderKeyboard() {\n const keys =\n this.content === ObcKeyboardNumericContent.Numbers\n ? NUMBER_KEYS\n : SYMBOL_KEYS;\n\n return html`\n <div class=\"keys-container\">\n ${keys.map(\n (row) => html`\n <div class=\"row\">\n ${row.map(\n (key) => html`\n <obc-button\n class=\"key-button\"\n variant=\"normal\"\n @click=${() => this.handleKeyPress(key)}\n >\n ${key}\n </obc-button>\n `\n )}\n </div>\n `\n )}\n </div>\n `;\n }\n\n private renderInputField() {\n return html`\n <obc-number-input-field\n class=\"input-field\"\n .value=${parseNumberInput(this.value)}\n .displayOverride=${this.value}\n .unit=${this.unit}\n .textAlign=${this.inputFieldTextAlign}\n .size=${ObcNumberInputFieldSize.Large}\n .helperText=${this.helperText}\n .validationPattern=${this.effectiveValidationPattern}\n ?hasLeadingIcon=${this.hasLeadingIcon}\n placeholder=\"00.0\"\n @input=${this.handleInput}\n @keydown=${this.handleInputKeydown}\n >\n <slot name=\"leading-icon\" slot=\"leading-icon\"></slot>\n </obc-number-input-field>\n `;\n }\n\n protected override render() {\n const showTitleBar =\n this.hasTitleBar && this.type === ObcKeyboardNumericType.Floating;\n\n return html`\n <div class=\"wrapper type-${this.type}\">\n ${showTitleBar\n ? html`\n <div class=\"top-bar\">\n <div class=\"parameter-name\">${this.label}</div>\n <obc-icon-button variant=\"flat\" @click=${this.handleCloseClick}>\n <obi-close-google></obi-close-google>\n </obc-icon-button>\n </div>\n `\n : nothing}\n\n <div class=\"container-content\">\n ${this.renderInputField()}\n\n <div class=\"key-container\">\n ${this.renderCalculationRow()}\n\n <div class=\"input-container\">\n ${this.renderKeyboard()}\n\n <div class=\"action-container\">\n <div class=\"function-buttons-container\">\n <obc-button\n class=\"action-button\"\n @click=${this.handleBackspace}\n showLeadingIcon\n >\n <obi-backspace-google\n slot=\"leading-icon\"\n ></obi-backspace-google\n >DEL\n </obc-button>\n <obc-button\n class=\"action-button clear\"\n @click=${this.handleClear}\n >\n CLEAR\n </obc-button>\n ${this.has2Symbols\n ? html`\n <obc-button\n class=\"action-button symbols\"\n variant=\"normal\"\n @click=${this.handleToggleContent}\n >\n ${this.content === ObcKeyboardNumericContent.Numbers\n ? '#+='\n : '123'}\n </obc-button>\n `\n : nothing}\n </div>\n <obc-button\n class=\"action-button done\"\n variant=\"raised\"\n @click=${this.handleDone}\n >\n DONE\n </obc-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-keyboard-numeric': ObcKeyboardNumeric;\n }\n}\n"],"names":["ObcKeyboardNumericType","ObcKeyboardNumericContent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"keyboard-numeric.js","sources":["../../../src/components/keyboard-numeric/keyboard-numeric.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './keyboard-numeric.css?inline';\n\nimport '../icon-button/icon-button.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-backspace-google.js';\nimport '../button/button.js';\nimport '../../icons/icon-up-iec.js';\nimport '../../icons/icon-down-iec.js';\nimport '../../icons/icon-multiply.js';\nimport '../../icons/icon-divide.js';\nimport '../../icons/icon-equal.js';\nimport '../number-input-field/number-input-field.js';\nimport {\n ObcNumberInputField,\n ObcNumberInputFieldTextAlign,\n ObcNumberInputFieldSize,\n ObcNumberInputFieldInputEvent,\n} from '../number-input-field/number-input-field.js';\nimport {parseNumberInput} from '../number-input-field/number-input-format.js';\n\nexport enum ObcKeyboardNumericType {\n Floating = 'floating',\n Flat = 'flat',\n}\n\nexport enum ObcKeyboardNumericContent {\n Numbers = 'numbers',\n Symbols = 'symbols',\n}\n\n// Key layouts\nconst NUMBER_KEYS = [\n ['1', '2', '3'],\n ['4', '5', '6'],\n ['7', '8', '9'],\n ['–', '0', ','],\n];\n\nconst SYMBOL_KEYS = [\n ['!', '@', '#'],\n ['$', '%', '&'],\n ['(', ')', '/'],\n ['–', '0', ','],\n];\n\n// All allowed characters for validation\nconst ALLOWED_CHARS = [\n '0',\n '1',\n '2',\n '3',\n '4',\n '5',\n '6',\n '7',\n '8',\n '9',\n '–',\n '-',\n ',',\n '.',\n '+',\n '×',\n '÷',\n '=',\n '!',\n '@',\n '#',\n '$',\n '%',\n '&',\n '(',\n ')',\n '/',\n];\n\nconst OPERATORS = ['+', '-', '–', '×', '÷', '*', '/'];\n\nconst ALLOWED_CHARS_PATTERN = `^[${ALLOWED_CHARS.map((c) =>\n c.replace(/[-.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n).join('')}]*$`;\n\n/**\n * `<obc-keyboard-numeric>` – An on-screen numeric keyboard with optional calculation and symbol modes.\n *\n * @slot leading-icon - Custom leading icon shown inside the input field (rendered when `hasLeadingIcon` is true).\n * @fires close-click {CustomEvent} Fired when the close button (or Escape) dismisses the keyboard.\n * @fires value-change {CustomEvent<{value: string}>} Fired whenever the current value changes.\n * @fires done-click {CustomEvent<{value: string}>} Fired when the DONE button (or Enter) is pressed.\n * @beta\n */\n@customElement('obc-keyboard-numeric')\nexport class ObcKeyboardNumeric extends LitElement {\n @property({type: String}) type: ObcKeyboardNumericType =\n ObcKeyboardNumericType.Floating;\n\n /**\n * Shows the top bar with label and close button (only applicable for floating type)\n * @availableWhen type==Floating\n */\n @property({type: Boolean}) hasTitleBar = false;\n\n /**\n * Label displayed in the top bar\n * @availableWhen hasTitleBar==true && type==Floating\n */\n @property({type: String}) label = 'Parameter name';\n\n /** Current input value */\n @property({type: String}) value = '';\n\n /** Shows the calculation row with +, -, ×, ÷, = buttons */\n @property({type: Boolean}) hasCalculation = false;\n\n /** Shows the #+= / 123 toggle button to switch between numbers and symbols */\n @property({type: Boolean}) has2Symbols = false;\n\n /** Helper text content displayed below the input field */\n @property({type: String}) helperText = '';\n\n /** Shows a leading icon slot in the input field */\n @property({type: Boolean}) hasLeadingIcon = false;\n\n /** Unit text (%, kg, °C, etc.) */\n @property({type: String}) unit = '';\n\n /** Text alignment in input field */\n @property({type: String}) inputFieldTextAlign: ObcNumberInputFieldTextAlign =\n ObcNumberInputFieldTextAlign.Right;\n\n /** Optional regex pattern for validation (applies to both keyboard and direct input) */\n @property({type: String}) validationPattern = '';\n\n @state() private content: ObcKeyboardNumericContent =\n ObcKeyboardNumericContent.Numbers;\n\n private get effectiveValidationPattern(): string {\n if (!this.validationPattern) {\n return ALLOWED_CHARS_PATTERN;\n }\n return `^(?=${ALLOWED_CHARS_PATTERN})(?=${this.validationPattern}).*$`;\n }\n\n /** Validates if a character can be added to the current value */\n private canAddCharacter(char: string): boolean {\n const potentialValue = this.value + char;\n\n if (this.validationPattern) {\n const regex = new RegExp(this.validationPattern);\n return regex.test(potentialValue);\n }\n\n if (!ALLOWED_CHARS.includes(char)) {\n return false;\n }\n\n const lastChar = this.value.slice(-1);\n\n // Only one decimal separator per number segment\n if (char === ',' || char === '.') {\n const segments = this.value.split(/[+\\-–×÷*/]/);\n const currentSegment = segments[segments.length - 1] || '';\n return !currentSegment.includes(',') && !currentSegment.includes('.');\n }\n\n // Minus/plus allowed at beginning or after an operator\n if (char === '–' || char === '-' || char === '+') {\n return (\n this.value === '' || this.value === '0' || OPERATORS.includes(lastChar)\n );\n }\n\n return true;\n }\n\n private handleCloseClick() {\n this.dispatchEvent(\n new CustomEvent('close-click', {bubbles: true, composed: true})\n );\n }\n\n private handleKeyPress(key: string) {\n if (this.canAddCharacter(key)) {\n if (\n (key === '–' || key === '-' || key === '+') &&\n (this.value === '' || this.value === '0')\n ) {\n this.value = key;\n } else {\n this.value += key;\n }\n this.dispatchValueChange();\n }\n }\n\n private handleCalculationKey(key: string) {\n if (key === '=') {\n this.evaluateExpression();\n } else {\n this.value += key;\n this.dispatchValueChange();\n }\n }\n\n private evaluateExpression() {\n if (!this.value) return;\n\n try {\n const expression = this.value\n .replace(/×/g, '*')\n .replace(/÷/g, '/')\n .replace(/–/g, '-')\n .replace(/,/g, '.');\n\n if (!/^[\\d+\\-*/().]+$/.test(expression)) {\n return;\n }\n\n const result = new Function(`return (${expression})`)();\n\n if (typeof result === 'number' && isFinite(result)) {\n const rounded = Math.round(result * 1000000) / 1000000;\n this.value = String(rounded).replace('.', ',');\n this.dispatchValueChange();\n }\n } catch {\n // If evaluation fails, keep the current value\n }\n }\n\n private handleBackspace() {\n if (this.value.length > 0) {\n this.value = this.value.slice(0, -1);\n this.dispatchValueChange();\n }\n }\n\n private handleClear() {\n this.value = '';\n this.dispatchValueChange();\n }\n\n private handleToggleContent() {\n this.content =\n this.content === ObcKeyboardNumericContent.Numbers\n ? ObcKeyboardNumericContent.Symbols\n : ObcKeyboardNumericContent.Numbers;\n }\n\n private handleDone() {\n this.evaluateExpression();\n this.dispatchEvent(\n new CustomEvent('done-click', {\n detail: {value: this.value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private dispatchValueChange() {\n this.dispatchEvent(\n new CustomEvent('value-change', {\n detail: {value: this.value},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleInput(e: ObcNumberInputFieldInputEvent) {\n const input = e.target as ObcNumberInputField;\n const newValue = input.displayValue;\n\n this.value = newValue;\n this.dispatchValueChange();\n }\n\n private handleInputKeydown(e: KeyboardEvent) {\n if (e.key === 'Enter') {\n e.preventDefault();\n this.handleDone();\n } else if (e.key === 'Escape') {\n e.preventDefault();\n this.handleCloseClick();\n }\n }\n\n private renderCalculationRow() {\n if (!this.hasCalculation) return nothing;\n\n return html`\n <div class=\"calculation-container\">\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('+')}\n >\n <obi-up-iec></obi-up-iec>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('-')}\n >\n <obi-down-iec></obi-down-iec>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('×')}\n >\n <obi-multiply></obi-multiply>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('÷')}\n >\n <obi-divide></obi-divide>\n </obc-icon-button>\n <obc-icon-button\n class=\"calculation-button\"\n @click=${() => this.handleCalculationKey('=')}\n >\n <obi-equal></obi-equal>\n </obc-icon-button>\n </div>\n `;\n }\n\n private renderKeyboard() {\n const keys =\n this.content === ObcKeyboardNumericContent.Numbers\n ? NUMBER_KEYS\n : SYMBOL_KEYS;\n\n return html`\n <div class=\"keys-container\">\n ${keys.map(\n (row) => html`\n <div class=\"row\">\n ${row.map(\n (key) => html`\n <obc-button\n class=\"key-button\"\n variant=\"normal\"\n @click=${() => this.handleKeyPress(key)}\n >\n ${key}\n </obc-button>\n `\n )}\n </div>\n `\n )}\n </div>\n `;\n }\n\n private renderInputField() {\n return html`\n <obc-number-input-field\n class=\"input-field\"\n .value=${parseNumberInput(this.value)}\n .displayOverride=${this.value}\n .unit=${this.unit}\n .textAlign=${this.inputFieldTextAlign}\n .size=${ObcNumberInputFieldSize.Large}\n .helperText=${this.helperText}\n .validationPattern=${this.effectiveValidationPattern}\n ?hasLeadingIcon=${this.hasLeadingIcon}\n placeholder=\"00.0\"\n @input=${this.handleInput}\n @keydown=${this.handleInputKeydown}\n >\n <slot name=\"leading-icon\" slot=\"leading-icon\"></slot>\n </obc-number-input-field>\n `;\n }\n\n protected override render() {\n const showTitleBar =\n this.hasTitleBar && this.type === ObcKeyboardNumericType.Floating;\n\n return html`\n <div class=\"wrapper type-${this.type}\">\n ${showTitleBar\n ? html`\n <div class=\"top-bar\">\n <div class=\"parameter-name\">${this.label}</div>\n <obc-icon-button variant=\"flat\" @click=${this.handleCloseClick}>\n <obi-close-google></obi-close-google>\n </obc-icon-button>\n </div>\n `\n : nothing}\n\n <div class=\"container-content\">\n ${this.renderInputField()}\n\n <div class=\"key-container\">\n ${this.renderCalculationRow()}\n\n <div class=\"input-container\">\n ${this.renderKeyboard()}\n\n <div class=\"action-container\">\n <div class=\"function-buttons-container\">\n <obc-button\n class=\"action-button\"\n @click=${this.handleBackspace}\n showLeadingIcon\n >\n <obi-backspace-google\n slot=\"leading-icon\"\n ></obi-backspace-google\n >DEL\n </obc-button>\n <obc-button\n class=\"action-button clear\"\n @click=${this.handleClear}\n >\n CLEAR\n </obc-button>\n ${this.has2Symbols\n ? html`\n <obc-button\n class=\"action-button symbols\"\n variant=\"normal\"\n @click=${this.handleToggleContent}\n >\n ${this.content === ObcKeyboardNumericContent.Numbers\n ? '#+='\n : '123'}\n </obc-button>\n `\n : nothing}\n </div>\n <obc-button\n class=\"action-button done\"\n variant=\"raised\"\n @click=${this.handleDone}\n >\n DONE\n </obc-button>\n </div>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-keyboard-numeric': ObcKeyboardNumeric;\n }\n}\n"],"names":["ObcKeyboardNumericType","ObcKeyboardNumericContent"],"mappings":"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"}
|
|
@@ -44,8 +44,7 @@ import '../../icons/icon-notification-filled.js';
|
|
|
44
44
|
*
|
|
45
45
|
* | Slot Name | Renders When... | Purpose |
|
|
46
46
|
* |-----------------|------------------------------|--------------------------------------------------------------|
|
|
47
|
-
* | primary-icon |
|
|
48
|
-
* | secondary-icon | type="application" only | Additional icon for application-type notifications. |
|
|
47
|
+
* | primary-icon | type="application" only | Custom main icon (the built-in notification icon is used otherwise). |
|
|
49
48
|
* | title | Always | Title or heading of the notification. |
|
|
50
49
|
* | description | Always | Detailed message text. |
|
|
51
50
|
* | time | hasTimestamp is true | Timestamp label (e.g., "09:12:46"). |
|
|
@@ -74,8 +73,7 @@ import '../../icons/icon-notification-filled.js';
|
|
|
74
73
|
* </obc-notification-floating-item>
|
|
75
74
|
* ```
|
|
76
75
|
*
|
|
77
|
-
* @slot primary-icon -
|
|
78
|
-
* @slot secondary-icon - Additional icon for application-type notifications.
|
|
76
|
+
* @slot primary-icon - Custom main icon, projected into the child only when `type="application"` (the built-in notification icon is used otherwise).
|
|
79
77
|
* @slot title - Title or heading of the notification.
|
|
80
78
|
* @slot description - Detailed message text.
|
|
81
79
|
* @slot time - Timestamp label (e.g., "09:12:46").
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"notification-floating-item.d.ts","sourceRoot":"","sources":["../../../src/components/notification-floating-item/notification-floating-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,mCAAmC,CAAC;AAE3C
|
|
1
|
+
{"version":3,"file":"notification-floating-item.d.ts","sourceRoot":"","sources":["../../../src/components/notification-floating-item/notification-floating-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yCAAyC,CAAC;AACjD,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IACzD;;;;;OAKG;IACuB,IAAI,sBAA+B;IAE7D;;;;;OAKG;IACuB,SAAS,2BAAuC;IAE1E;;;OAGG;IACwB,YAAY,UAAS;IAEhD;;;OAGG;IACwB,MAAM,UAAS;IAE1C;;;OAGG;IACwB,MAAM,UAAS;IAE1C;;;;OAIG;IACwB,OAAO,UAAS;IAE3C;;;;;OAKG;IACuB,QAAQ,0BAAsC;cAErD,MAAM;IAiDzB,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gCAAgC,EAAE,2BAA2B,CAAC;KAC/D;CACF"}
|