@oicl/openbridge-webcomponents 2.0.0-next.96 → 2.0.0-next.98

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/bundle/openbridge-webcomponents.bundle.js +39 -124
  2. package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
  3. package/custom-elements.json +343 -142
  4. package/dist/ar/poi/poi.d.ts +4 -2
  5. package/dist/ar/poi/poi.d.ts.map +1 -1
  6. package/dist/ar/poi/poi.js.map +1 -1
  7. package/dist/ar/poi-layer/poi-layer.d.ts +1 -0
  8. package/dist/ar/poi-layer/poi-layer.d.ts.map +1 -1
  9. package/dist/ar/poi-layer/poi-layer.js.map +1 -1
  10. package/dist/ar/poi-object/poi-object-aton.d.ts +1 -0
  11. package/dist/ar/poi-object/poi-object-aton.d.ts.map +1 -1
  12. package/dist/ar/poi-object/poi-object-aton.js.map +1 -1
  13. package/dist/automation/automation-badge/automation-badge.d.ts +2 -0
  14. package/dist/automation/automation-badge/automation-badge.d.ts.map +1 -1
  15. package/dist/automation/automation-badge/automation-badge.js.map +1 -1
  16. package/dist/automation/automation-button/automation-button.d.ts +9 -0
  17. package/dist/automation/automation-button/automation-button.d.ts.map +1 -1
  18. package/dist/automation/automation-button/automation-button.js.map +1 -1
  19. package/dist/automation/automation-input-modal/automation-input-modal.d.ts +4 -0
  20. package/dist/automation/automation-input-modal/automation-input-modal.d.ts.map +1 -1
  21. package/dist/automation/automation-input-modal/automation-input-modal.js.map +1 -1
  22. package/dist/automation/automation-tank/automation-tank.css.js +8 -87
  23. package/dist/automation/automation-tank/automation-tank.css.js.map +1 -1
  24. package/dist/automation/automation-tank/automation-tank.d.ts +13 -33
  25. package/dist/automation/automation-tank/automation-tank.d.ts.map +1 -1
  26. package/dist/automation/automation-tank/automation-tank.js +12 -28
  27. package/dist/automation/automation-tank/automation-tank.js.map +1 -1
  28. package/dist/building-blocks/alert-list/alert-list.d.ts +4 -0
  29. package/dist/building-blocks/alert-list/alert-list.d.ts.map +1 -1
  30. package/dist/building-blocks/alert-list/alert-list.js.map +1 -1
  31. package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts +2 -0
  32. package/dist/building-blocks/bar-horizontal/bar-horizontal.d.ts.map +1 -1
  33. package/dist/building-blocks/bar-horizontal/bar-horizontal.js.map +1 -1
  34. package/dist/building-blocks/bar-vertical/bar-vertical.d.ts +2 -0
  35. package/dist/building-blocks/bar-vertical/bar-vertical.d.ts.map +1 -1
  36. package/dist/building-blocks/bar-vertical/bar-vertical.js.map +1 -1
  37. package/dist/components/advice-floating-item/advice-floating-item.d.ts +2 -4
  38. package/dist/components/advice-floating-item/advice-floating-item.d.ts.map +1 -1
  39. package/dist/components/advice-floating-item/advice-floating-item.js.map +1 -1
  40. package/dist/components/advice-message-item/advice-message-item.d.ts +6 -19
  41. package/dist/components/advice-message-item/advice-message-item.d.ts.map +1 -1
  42. package/dist/components/advice-message-item/advice-message-item.js.map +1 -1
  43. package/dist/components/alert-floating-item/alert-floating-item.d.ts +12 -0
  44. package/dist/components/alert-floating-item/alert-floating-item.d.ts.map +1 -1
  45. package/dist/components/alert-floating-item/alert-floating-item.js.map +1 -1
  46. package/dist/components/alert-menu/alert-menu.d.ts +6 -20
  47. package/dist/components/alert-menu/alert-menu.d.ts.map +1 -1
  48. package/dist/components/alert-menu/alert-menu.js.map +1 -1
  49. package/dist/components/alert-menu-item/alert-menu-item.d.ts +4 -0
  50. package/dist/components/alert-menu-item/alert-menu-item.d.ts.map +1 -1
  51. package/dist/components/alert-menu-item/alert-menu-item.js.map +1 -1
  52. package/dist/components/chat-message/chat-message.d.ts +3 -0
  53. package/dist/components/chat-message/chat-message.d.ts.map +1 -1
  54. package/dist/components/chat-message/chat-message.js.map +1 -1
  55. package/dist/components/elevated-card-radio/elevated-card-radio.d.ts +2 -6
  56. package/dist/components/elevated-card-radio/elevated-card-radio.d.ts.map +1 -1
  57. package/dist/components/elevated-card-radio/elevated-card-radio.js.map +1 -1
  58. package/dist/components/keyboard-numeric/keyboard-numeric.d.ts +6 -0
  59. package/dist/components/keyboard-numeric/keyboard-numeric.d.ts.map +1 -1
  60. package/dist/components/keyboard-numeric/keyboard-numeric.js.map +1 -1
  61. package/dist/components/notification-floating-item/notification-floating-item.d.ts +2 -4
  62. package/dist/components/notification-floating-item/notification-floating-item.d.ts.map +1 -1
  63. package/dist/components/notification-floating-item/notification-floating-item.js.map +1 -1
  64. package/dist/components/sequence-card/sequence-card.d.ts +9 -0
  65. package/dist/components/sequence-card/sequence-card.d.ts.map +1 -1
  66. package/dist/components/sequence-card/sequence-card.js.map +1 -1
  67. package/dist/components/sequence-item/sequence-item.d.ts +5 -0
  68. package/dist/components/sequence-item/sequence-item.d.ts.map +1 -1
  69. package/dist/components/sequence-item/sequence-item.js.map +1 -1
  70. package/dist/components/sequence-modal/sequence-modal.d.ts +4 -0
  71. package/dist/components/sequence-modal/sequence-modal.d.ts.map +1 -1
  72. package/dist/components/sequence-modal/sequence-modal.js.map +1 -1
  73. package/dist/components/sequence-step/sequence-step.d.ts.map +1 -1
  74. package/dist/components/sequence-step/sequence-step.js.map +1 -1
  75. package/dist/components/slider-double/slider-double.d.ts +4 -8
  76. package/dist/components/slider-double/slider-double.d.ts.map +1 -1
  77. package/dist/components/slider-double/slider-double.js.map +1 -1
  78. package/dist/components/status-indicator/status-indicator.d.ts +1 -0
  79. package/dist/components/status-indicator/status-indicator.d.ts.map +1 -1
  80. package/dist/components/status-indicator/status-indicator.js.map +1 -1
  81. package/dist/components/system-menu/system-menu.d.ts +2 -0
  82. package/dist/components/system-menu/system-menu.d.ts.map +1 -1
  83. package/dist/components/system-menu/system-menu.js.map +1 -1
  84. package/dist/components/table-header-item/table-header-item.d.ts +2 -0
  85. package/dist/components/table-header-item/table-header-item.d.ts.map +1 -1
  86. package/dist/components/table-header-item/table-header-item.js.map +1 -1
  87. package/dist/components/tag/tag.d.ts +1 -0
  88. package/dist/components/tag/tag.d.ts.map +1 -1
  89. package/dist/components/tag/tag.js.map +1 -1
  90. package/dist/components/toggletip/toggletip.d.ts +4 -4
  91. package/dist/components/toggletip/toggletip.js.map +1 -1
  92. package/dist/components/user-menu/user-menu.d.ts +1 -0
  93. package/dist/components/user-menu/user-menu.d.ts.map +1 -1
  94. package/dist/components/user-menu/user-menu.js.map +1 -1
  95. package/dist/integration-systems/integration-app-bar/integration-app-bar.d.ts +1 -0
  96. package/dist/integration-systems/integration-app-bar/integration-app-bar.d.ts.map +1 -1
  97. package/dist/integration-systems/integration-app-bar/integration-app-bar.js.map +1 -1
  98. package/dist/integration-systems/integration-bar/integration-bar.d.ts +0 -1
  99. package/dist/integration-systems/integration-bar/integration-bar.d.ts.map +1 -1
  100. package/dist/integration-systems/integration-bar/integration-bar.js.map +1 -1
  101. package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.d.ts +9 -9
  102. package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js.map +1 -1
  103. package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts +1 -0
  104. package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts.map +1 -1
  105. package/dist/integration-systems/integration-fleet-button/integration-fleet-button.js.map +1 -1
  106. package/dist/integration-systems/integration-tabs/integration-tabs.d.ts +1 -0
  107. package/dist/integration-systems/integration-tabs/integration-tabs.d.ts.map +1 -1
  108. package/dist/integration-systems/integration-tabs/integration-tabs.js.map +1 -1
  109. package/dist/navigation-instruments/compass-sector/compass-sector.d.ts +0 -1
  110. package/dist/navigation-instruments/compass-sector/compass-sector.d.ts.map +1 -1
  111. package/dist/navigation-instruments/compass-sector/compass-sector.js.map +1 -1
  112. package/dist/navigation-instruments/watch/tickmark.d.ts.map +1 -1
  113. package/dist/navigation-instruments/watch/tickmark.js +17 -7
  114. package/dist/navigation-instruments/watch/tickmark.js.map +1 -1
  115. package/dist/navigation-instruments/watch/watch.d.ts.map +1 -1
  116. package/dist/navigation-instruments/watch/watch.js +2 -2
  117. package/dist/navigation-instruments/watch/watch.js.map +1 -1
  118. package/dist/navigation-instruments/wind-propulsion/wind-propulsion.d.ts +0 -1
  119. package/dist/navigation-instruments/wind-propulsion/wind-propulsion.d.ts.map +1 -1
  120. package/dist/navigation-instruments/wind-propulsion/wind-propulsion.js.map +1 -1
  121. package/dist/pages/alert-detail-page/alert-detail-page.d.ts.map +1 -1
  122. package/dist/pages/alert-detail-page/alert-detail-page.js.map +1 -1
  123. package/package.json +3 -2
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;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
+ {"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":";;;;;;;;;;;;;;;;;;;;AAaO,IAAK,2CAAAA,4BAAL;AACLA,0BAAA,gBAAA,IAAiB;AACjBA,0BAAA,SAAA,IAAU;AACVA,0BAAA,cAAA,IAAe;AACfA,0BAAA,YAAA,IAAa;AACbA,0BAAA,cAAA,IAAe;AACfA,0BAAA,WAAA,IAAY;AANF,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAeL,IAAK,gDAAAC,iCAAL;AACLA,+BAAA,SAAA,IAAU;AACVA,+BAAA,UAAA,IAAW;AACXA,+BAAA,MAAA,IAAO;AAHG,SAAAA;AAAA,GAAA,+BAAA,CAAA,CAAA;AA4EL,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAKsB,SAAA,UAAU;AAMK,SAAA,UAAU;AAK1B,SAAS,QAAQ;AAKjB,SAAA,cAAc;AAKd,SAAA,MAAM;AAKN,SAAA,OAAO;AAQQ,SAAA,SACvC;AAMyB,SAAA,OAAO;AAQR,SAAA,OACxB,uBAAuB;AAKE,SAAA,eAAe;AAShB,SAAA,uBAAuB;AAMvB,SAAA,qBACxB;AAMwB,SAAA,uBACxB;AAAA,EAAA;AAAA,EAEF,IAAY,qBAAqB;AAC/B,QAAI,KAAK,uBAAuB,QAAkC;AAChE,aAAO;AAAA,IACT;AACA,WAAO,KAAK,WAAW,mBAAwC,QAAQ;AAAA,EACzE;AAAA,EAEA,IAAY,6BAA6B;AACvC,QAAI,KAAK,yBAAyB,QAAkC;AAClE,aAAO;AAAA,IACT;AACA,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAY,wBAAwB;AAClC,WAAO,KAAK,uBAAuB;AAAA,EACrC;AAAA,EAEA,IAAY,0BAA0B;AACpC,WAAO,KAAK,yBAAyB;AAAA,EACvC;AAAA,EAEA,IAAY,kBAAkB;AAE5B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA,EAEQ,qBAAqB;AAC3B,SAAK,cAAc,IAAI,YAAY,YAAY,CAAC;AAChD,SAAK,OAAO,CAAC,KAAK;AAAA,EACpB;AAAA,EAEQ,oBAAoB;AAC1B,SAAK,cAAc,IAAI,YAAY,WAAW,CAAC;AAAA,EACjD;AAAA,EAEQ,6BAA6B;AACnC,SAAK,cAAc,IAAI,YAAY,qBAAqB,CAAC;AAAA,EAC3D;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,iBAEM,KAAK,KAAK;AAAA,uBACJ,KAAK,WAAW;AAAA,eACxB,KAAK,GAAG;AAAA,gBACP,KAAK,IAAI;AAAA,8BACK,KAAK,kBAAkB;AAAA,gCACrB,KAAK,0BAA0B;AAAA,+BAChC,CAAC,KAAK,qBAAqB;AAAA,iCACzB,CAAC,KAAK,uBAAuB;AAAA,gBAC9C,KAAK,IAAI;AAAA,gBACT,KAAK,IAAI;AAAA,4BACG,KAAK,OAAO;AAAA,qBACnB,KAAK,OAAO;AAAA,2BACN,KAAK,eAAe;AAAA;AAAA;AAAA,yBAGtB,KAAK,kBAAkB;AAAA,gCAChB,KAAK,iBAAiB;AAAA,kCACpB,KAAK,0BAA0B;AAAA;AAAA;AAAA,0CAGvB,KAAK,KAAK;AAAA,sDACE,KAAK,WAAW;AAAA,UAC5D,KAAK,UACH,wDACA,OAAO;AAAA,UACT,OAAO,KAAK,QAAQ;AAAA,MACpB;AAAA,QACE;AAAA,QACA,MACE;AAAA;AAAA;AAAA;AAAA,MAAA;AAAA,MAKJ;AAAA,QACE;AAAA,QACA,MACE;AAAA;AAAA;AAAA;AAAA,MAAA;AAAA,IAIJ,CACD,CAAC;AAAA;AAAA;AAAA,EAGR;AAGF;AAhLa,iBA+KK,SAAS,UAAU,YAAY;AA1KpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GALd,iBAKgB,WAAA,WAAA,CAAA;AAMe,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAX7B,iBAW+B,WAAA,WAAA,CAAA;AAKP,gBAAA;AAAA,EAAlC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhBb,iBAgBwB,WAAA,SAAA,CAAA;AAKT,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArBb,iBAqBe,WAAA,eAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA1Bb,iBA0Be,WAAA,OAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA/Bb,iBA+Be,WAAA,QAAA,CAAA;AAQe,gBAAA;AAAA,EAAxC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAvC5B,iBAuC8B,WAAA,UAAA,CAAA;AAOd,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA9Cd,iBA8CgB,WAAA,QAAA,CAAA;AAQD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAtDb,iBAsDe,WAAA,QAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA5Dd,iBA4DgB,WAAA,gBAAA,CAAA;AASD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArEb,iBAqEe,WAAA,wBAAA,CAAA;AAMA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Eb,iBA2Ee,WAAA,sBAAA,CAAA;AAOA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlFb,iBAkFe,WAAA,wBAAA,CAAA;AAlFf,mBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,gBAAA;"}
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":";;;;;;;;;;;;;;;;;;;;AAaO,IAAK,2CAAAA,4BAAL;AACLA,0BAAA,gBAAA,IAAiB;AACjBA,0BAAA,SAAA,IAAU;AACVA,0BAAA,cAAA,IAAe;AACfA,0BAAA,YAAA,IAAa;AACbA,0BAAA,cAAA,IAAe;AACfA,0BAAA,WAAA,IAAY;AANF,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAeL,IAAK,gDAAAC,iCAAL;AACLA,+BAAA,SAAA,IAAU;AACVA,+BAAA,UAAA,IAAW;AACXA,+BAAA,MAAA,IAAO;AAHG,SAAAA;AAAA,GAAA,+BAAA,CAAA,CAAA;AAgFL,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAKsB,SAAA,UAAU;AAMK,SAAA,UAAU;AAK1B,SAAS,QAAQ;AAKjB,SAAA,cAAc;AAKd,SAAA,MAAM;AAKN,SAAA,OAAO;AAQQ,SAAA,SACvC;AAMyB,SAAA,OAAO;AAQR,SAAA,OACxB,uBAAuB;AAKE,SAAA,eAAe;AAShB,SAAA,uBAAuB;AAMvB,SAAA,qBACxB;AAMwB,SAAA,uBACxB;AAAA,EAAA;AAAA,EAEF,IAAY,qBAAqB;AAC/B,QAAI,KAAK,uBAAuB,QAAkC;AAChE,aAAO;AAAA,IACT;AACA,WAAO,KAAK,WAAW,mBAAwC,QAAQ;AAAA,EACzE;AAAA,EAEA,IAAY,6BAA6B;AACvC,QAAI,KAAK,yBAAyB,QAAkC;AAClE,aAAO;AAAA,IACT;AACA,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAY,wBAAwB;AAClC,WAAO,KAAK,uBAAuB;AAAA,EACrC;AAAA,EAEA,IAAY,0BAA0B;AACpC,WAAO,KAAK,yBAAyB;AAAA,EACvC;AAAA,EAEA,IAAY,kBAAkB;AAE5B,WAAO,KAAK,WAAW;AAAA,EACzB;AAAA,EAEQ,qBAAqB;AAC3B,SAAK,cAAc,IAAI,YAAY,YAAY,CAAC;AAChD,SAAK,OAAO,CAAC,KAAK;AAAA,EACpB;AAAA,EAEQ,oBAAoB;AAC1B,SAAK,cAAc,IAAI,YAAY,WAAW,CAAC;AAAA,EACjD;AAAA,EAEQ,6BAA6B;AACnC,SAAK,cAAc,IAAI,YAAY,qBAAqB,CAAC;AAAA,EAC3D;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,iBAEM,KAAK,KAAK;AAAA,uBACJ,KAAK,WAAW;AAAA,eACxB,KAAK,GAAG;AAAA,gBACP,KAAK,IAAI;AAAA,8BACK,KAAK,kBAAkB;AAAA,gCACrB,KAAK,0BAA0B;AAAA,+BAChC,CAAC,KAAK,qBAAqB;AAAA,iCACzB,CAAC,KAAK,uBAAuB;AAAA,gBAC9C,KAAK,IAAI;AAAA,gBACT,KAAK,IAAI;AAAA,4BACG,KAAK,OAAO;AAAA,qBACnB,KAAK,OAAO;AAAA,2BACN,KAAK,eAAe;AAAA;AAAA;AAAA,yBAGtB,KAAK,kBAAkB;AAAA,gCAChB,KAAK,iBAAiB;AAAA,kCACpB,KAAK,0BAA0B;AAAA;AAAA;AAAA,0CAGvB,KAAK,KAAK;AAAA,sDACE,KAAK,WAAW;AAAA,UAC5D,KAAK,UACH,wDACA,OAAO;AAAA,UACT,OAAO,KAAK,QAAQ;AAAA,MACpB;AAAA,QACE;AAAA,QACA,MACE;AAAA;AAAA;AAAA;AAAA,MAAA;AAAA,MAKJ;AAAA,QACE;AAAA,QACA,MACE;AAAA;AAAA;AAAA;AAAA,MAAA;AAAA,IAIJ,CACD,CAAC;AAAA;AAAA;AAAA,EAGR;AAGF;AAhLa,iBA+KK,SAAS,UAAU,YAAY;AA1KpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GALd,iBAKgB,WAAA,WAAA,CAAA;AAMe,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAX7B,iBAW+B,WAAA,WAAA,CAAA;AAKP,gBAAA;AAAA,EAAlC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhBb,iBAgBwB,WAAA,SAAA,CAAA;AAKT,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArBb,iBAqBe,WAAA,eAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA1Bb,iBA0Be,WAAA,OAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA/Bb,iBA+Be,WAAA,QAAA,CAAA;AAQe,gBAAA;AAAA,EAAxC,SAAS,EAAC,MAAM,QAAQ,SAAS,MAAK;AAAA,GAvC5B,iBAuC8B,WAAA,UAAA,CAAA;AAOd,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA9Cd,iBA8CgB,WAAA,QAAA,CAAA;AAQD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAtDb,iBAsDe,WAAA,QAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA5Dd,iBA4DgB,WAAA,gBAAA,CAAA;AASD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArEb,iBAqEe,WAAA,wBAAA,CAAA;AAMA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Eb,iBA2Ee,WAAA,sBAAA,CAAA;AAOA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlFb,iBAkFe,WAAA,wBAAA,CAAA;AAlFf,mBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,gBAAA;"}
@@ -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;;GAEG;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
+ {"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;AAWL,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;"}
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
- * | Slot Name | Renders When... | Purpose |
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;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
+ {"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 * | Slot Name | Renders When... | Purpose |\n * |-------------- |-----------------|-----------------------------------------|\n * | leading-icon | Always | Contains the radio button itself. |\n * | label | Always | Displays the label text for the option. |\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 * @slot leading-icon - Contains the radio button input.\n * @slot label - Displays the label text for the radio option.\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":";;;;;;;;;;;;;;;AA0FO,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;"}
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;;GAEG;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
+ {"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 | Always (all types) | Main icon representing the notification category. |
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 - Main icon representing the notification category.
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;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"}
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"}
@@ -1 +1 @@
1
- {"version":3,"file":"notification-floating-item.js","sources":["../../../src/components/notification-floating-item/notification-floating-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './notification-floating-item.css?inline';\n\nimport '../floating-item/floating-item.js';\nimport '../../icons/icon-notification-filled.js';\nimport {\n ObcFloatingItemType,\n ObcFloatingItemDirection,\n ObcFloatingItemLineType,\n} from '../floating-item/floating-item.js';\n\n/**\n * `<obc-notification-floating-item>` – A floating notification message component for transient feedback, alerts, or status updates.\n *\n * Displays a notification as an overlay above the main UI, typically used to inform users of events, actions, or system statuses without interrupting their workflow. This component is a specialized variant of a floating message (toast/snackbar) with notification-specific styling and iconography.\n *\n * ### Features\n * - **Variants (type):**\n * - `regular` (default): Standard notification appearance for general messages.\n * - `application`: Enhanced notification with an additional secondary icon, suitable for application-level or high-visibility messages.\n * - **Layout Direction (direction):**\n * - `horizontal` (default): Content and actions are arranged side-by-side.\n * - `vertical`: Content and actions are stacked for narrow spaces or longer messages.\n * - **Line Type (lineType):**\n * - `singleLine` (default): Compact, single-line layout for brief messages.\n * - `multiLine`: Supports longer, multi-line descriptions.\n * - **Timestamp and Day Labels:**\n * - `hasTimestamp`: Displays a time label (e.g., \"09:12:46\") when enabled.\n * - `hasDay`: Displays a day label (e.g., \"Yesterday\") when enabled (requires `hasTimestamp`).\n * - **Actions:**\n * - `action`: Shows a primary action button (e.g., \"Close\").\n * - `action2`: Shows a secondary action button (e.g., \"Undo\"). Only available if `action` is enabled.\n * - **Icon Slots:**\n * - Customizable icons via slots, with a default notification icon provided.\n * - **Event Handling:**\n * - Emits custom events for action and dismiss interactions.\n *\n * ### Usage Guidelines\n * Use `<obc-notification-floating-item>` for brief, transient notifications that inform users about non-critical events, confirmations, or status changes. Ideal for scenarios where feedback should be visible but not persistent, such as after completing an action or receiving a system update. Avoid using for critical or blocking alerts—use a dialog or alert banner for those cases.\n *\n * - Prefer the `application` type for notifications that require extra emphasis or represent application-wide events.\n * - Use the `multiLine` layout for longer messages to maintain readability.\n * - Only enable both actions if the secondary action is truly necessary (e.g., \"Undo\" alongside \"Close\").\n * - For accessibility and clarity, keep notification messages concise.\n * - By default, the notification does not auto-dismiss; manual dismissal or action is required.\n * **TODO(designer):** Confirm if auto-dismissal is recommended or supported for this component.\n *\n * **Related keywords:** notification, toast, snackbar, floating message, alert, status update, transient feedback.\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------------|------------------------------|--------------------------------------------------------------|\n * | primary-icon | Always (all types) | Main icon representing the notification category. |\n * | secondary-icon | type=\"application\" only | Additional icon for application-type notifications. |\n * | title | Always | Title or heading of the notification. |\n * | description | Always | Detailed message text. |\n * | time | hasTimestamp is true | Timestamp label (e.g., \"09:12:46\"). |\n * | day | hasTimestamp && hasDay | Day label (e.g., \"Yesterday\"). |\n * | action | action is true | Label/content for the primary action button. |\n * | action2 | action2 is true | Label/content for the secondary action button. |\n *\n * ### Events\n * - `action-click` – Fired when the primary action button is clicked.\n * - `action2-click` – Fired when the secondary action button is clicked.\n * - `dismiss-click` – Fired when the notification is dismissed (e.g., close icon or programmatically).\n *\n * ### Example\n * ```html\n * <obc-notification-floating-item\n * type=\"regular\"\n * direction=\"horizontal\"\n * hasTimestamp\n * action\n * >\n * <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n * <span slot=\"title\">Notification title</span>\n * <span slot=\"description\">A notification message with meaningful content for the user.</span>\n * <span slot=\"time\">09:12:46</span>\n * <span slot=\"action\">Close</span>\n * </obc-notification-floating-item>\n * ```\n *\n * @slot primary-icon - Main icon representing the notification category.\n * @slot secondary-icon - Additional icon for application-type notifications.\n * @slot title - Title or heading of the notification.\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 - Label/content for the primary action button.\n * @slot action2 - Label/content for the secondary action button.\n * @fires action-click {CustomEvent<void>} When the primary action button is clicked.\n * @fires action2-click {CustomEvent<void>} When the secondary action button is clicked.\n * @fires dismiss-click {CustomEvent<void>} When the notification is dismissed.\n * @beta\n */\n@customElement('obc-notification-floating-item')\nexport class ObcNotificationFloatingItem extends LitElement {\n /**\n * Defines the notification type.\n * - `regular`: Standard notification appearance.\n * - `application`: Application-level notification with additional icon.\n * Default is `regular`.\n */\n @property({type: String}) type = ObcFloatingItemType.Regular;\n\n /**\n * Sets the layout direction of the notification.\n * - `horizontal`: Content and actions are arranged side-by-side.\n * - `vertical`: Content and actions are stacked.\n * Default is `horizontal`.\n */\n @property({type: String}) direction = ObcFloatingItemDirection.horizontal;\n\n /**\n * If true, displays a timestamp label (e.g., \"09:12:46\") in the notification.\n * Default is false.\n */\n @property({type: Boolean}) hasTimestamp = false;\n\n /**\n * If true (and `hasTimestamp` is also true), displays a day label (e.g., \"Yesterday\") in the notification.\n * Default is false.\n */\n @property({type: Boolean}) hasDay = false;\n\n /**\n * If true, displays a primary action button (e.g., \"Close\").\n * Default is false.\n */\n @property({type: Boolean}) action = false;\n\n /**\n * If true, displays a secondary action button (e.g., \"Undo\").\n * Only available if `action` is also true.\n * Default is false.\n */\n @property({type: Boolean}) action2 = false;\n\n /**\n * Sets the line type for the notification content.\n * - `singleLine`: Compact, single-line layout.\n * - `multiLine`: Supports longer, multi-line descriptions.\n * Default is `singleLine`.\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-notification-filled\n slot=\"secondary-icon\"\n style=\"color: var(--notification-enabled-background-color)\"\n ></obi-notification-filled>\n `\n : html`\n <obi-notification-filled\n slot=\"primary-icon\"\n style=\"color: var(--notification-enabled-background-color)\"\n ></obi-notification-filled>\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-notification-floating-item': ObcNotificationFloatingItem;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmGO,IAAM,8BAAN,cAA0C,WAAW;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,OAAO,oBAAoB;AAQ3B,SAAA,YAAY,yBAAyB;AAMpC,SAAA,eAAe;AAMf,SAAA,SAAS;AAMT,SAAA,SAAS;AAOT,SAAA,UAAU;AAQX,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;AApGa,4BAmGK,SAAS,UAAU,cAAc;AA5FvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,4BAOe,WAAA,QAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,4BAee,WAAA,aAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArBd,4BAqBgB,WAAA,gBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA3Bd,4BA2BgB,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjCd,4BAiCgB,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAxCd,4BAwCgB,WAAA,WAAA,CAAA;AAQD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhDb,4BAgDe,WAAA,YAAA,CAAA;AAhDf,8BAAN,gBAAA;AAAA,EADN,cAAc,gCAAgC;AAAA,GAClC,2BAAA;"}
1
+ {"version":3,"file":"notification-floating-item.js","sources":["../../../src/components/notification-floating-item/notification-floating-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './notification-floating-item.css?inline';\n\nimport '../floating-item/floating-item.js';\nimport '../../icons/icon-notification-filled.js';\nimport {\n ObcFloatingItemType,\n ObcFloatingItemDirection,\n ObcFloatingItemLineType,\n} from '../floating-item/floating-item.js';\n\n/**\n * `<obc-notification-floating-item>` – A floating notification message component for transient feedback, alerts, or status updates.\n *\n * Displays a notification as an overlay above the main UI, typically used to inform users of events, actions, or system statuses without interrupting their workflow. This component is a specialized variant of a floating message (toast/snackbar) with notification-specific styling and iconography.\n *\n * ### Features\n * - **Variants (type):**\n * - `regular` (default): Standard notification appearance for general messages.\n * - `application`: Enhanced notification with an additional secondary icon, suitable for application-level or high-visibility messages.\n * - **Layout Direction (direction):**\n * - `horizontal` (default): Content and actions are arranged side-by-side.\n * - `vertical`: Content and actions are stacked for narrow spaces or longer messages.\n * - **Line Type (lineType):**\n * - `singleLine` (default): Compact, single-line layout for brief messages.\n * - `multiLine`: Supports longer, multi-line descriptions.\n * - **Timestamp and Day Labels:**\n * - `hasTimestamp`: Displays a time label (e.g., \"09:12:46\") when enabled.\n * - `hasDay`: Displays a day label (e.g., \"Yesterday\") when enabled (requires `hasTimestamp`).\n * - **Actions:**\n * - `action`: Shows a primary action button (e.g., \"Close\").\n * - `action2`: Shows a secondary action button (e.g., \"Undo\"). Only available if `action` is enabled.\n * - **Icon Slots:**\n * - Customizable icons via slots, with a default notification icon provided.\n * - **Event Handling:**\n * - Emits custom events for action and dismiss interactions.\n *\n * ### Usage Guidelines\n * Use `<obc-notification-floating-item>` for brief, transient notifications that inform users about non-critical events, confirmations, or status changes. Ideal for scenarios where feedback should be visible but not persistent, such as after completing an action or receiving a system update. Avoid using for critical or blocking alerts—use a dialog or alert banner for those cases.\n *\n * - Prefer the `application` type for notifications that require extra emphasis or represent application-wide events.\n * - Use the `multiLine` layout for longer messages to maintain readability.\n * - Only enable both actions if the secondary action is truly necessary (e.g., \"Undo\" alongside \"Close\").\n * - For accessibility and clarity, keep notification messages concise.\n * - By default, the notification does not auto-dismiss; manual dismissal or action is required.\n * **TODO(designer):** Confirm if auto-dismissal is recommended or supported for this component.\n *\n * **Related keywords:** notification, toast, snackbar, floating message, alert, status update, transient feedback.\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------------|------------------------------|--------------------------------------------------------------|\n * | primary-icon | type=\"application\" only | Custom main icon (the built-in notification icon is used otherwise). |\n * | title | Always | Title or heading of the notification. |\n * | description | Always | Detailed message text. |\n * | time | hasTimestamp is true | Timestamp label (e.g., \"09:12:46\"). |\n * | day | hasTimestamp && hasDay | Day label (e.g., \"Yesterday\"). |\n * | action | action is true | Label/content for the primary action button. |\n * | action2 | action2 is true | Label/content for the secondary action button. |\n *\n * ### Events\n * - `action-click` – Fired when the primary action button is clicked.\n * - `action2-click` – Fired when the secondary action button is clicked.\n * - `dismiss-click` – Fired when the notification is dismissed (e.g., close icon or programmatically).\n *\n * ### Example\n * ```html\n * <obc-notification-floating-item\n * type=\"regular\"\n * direction=\"horizontal\"\n * hasTimestamp\n * action\n * >\n * <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n * <span slot=\"title\">Notification title</span>\n * <span slot=\"description\">A notification message with meaningful content for the user.</span>\n * <span slot=\"time\">09:12:46</span>\n * <span slot=\"action\">Close</span>\n * </obc-notification-floating-item>\n * ```\n *\n * @slot primary-icon - Custom main icon, projected into the child only when `type=\"application\"` (the built-in notification icon is used otherwise).\n * @slot title - Title or heading of the notification.\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 - Label/content for the primary action button.\n * @slot action2 - Label/content for the secondary action button.\n * @fires action-click {CustomEvent<void>} When the primary action button is clicked.\n * @fires action2-click {CustomEvent<void>} When the secondary action button is clicked.\n * @fires dismiss-click {CustomEvent<void>} When the notification is dismissed.\n * @beta\n */\n@customElement('obc-notification-floating-item')\nexport class ObcNotificationFloatingItem extends LitElement {\n /**\n * Defines the notification type.\n * - `regular`: Standard notification appearance.\n * - `application`: Application-level notification with additional icon.\n * Default is `regular`.\n */\n @property({type: String}) type = ObcFloatingItemType.Regular;\n\n /**\n * Sets the layout direction of the notification.\n * - `horizontal`: Content and actions are arranged side-by-side.\n * - `vertical`: Content and actions are stacked.\n * Default is `horizontal`.\n */\n @property({type: String}) direction = ObcFloatingItemDirection.horizontal;\n\n /**\n * If true, displays a timestamp label (e.g., \"09:12:46\") in the notification.\n * Default is false.\n */\n @property({type: Boolean}) hasTimestamp = false;\n\n /**\n * If true (and `hasTimestamp` is also true), displays a day label (e.g., \"Yesterday\") in the notification.\n * Default is false.\n */\n @property({type: Boolean}) hasDay = false;\n\n /**\n * If true, displays a primary action button (e.g., \"Close\").\n * Default is false.\n */\n @property({type: Boolean}) action = false;\n\n /**\n * If true, displays a secondary action button (e.g., \"Undo\").\n * Only available if `action` is also true.\n * Default is false.\n */\n @property({type: Boolean}) action2 = false;\n\n /**\n * Sets the line type for the notification content.\n * - `singleLine`: Compact, single-line layout.\n * - `multiLine`: Supports longer, multi-line descriptions.\n * Default is `singleLine`.\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-notification-filled\n slot=\"secondary-icon\"\n style=\"color: var(--notification-enabled-background-color)\"\n ></obi-notification-filled>\n `\n : html`\n <obi-notification-filled\n slot=\"primary-icon\"\n style=\"color: var(--notification-enabled-background-color)\"\n ></obi-notification-filled>\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-notification-floating-item': ObcNotificationFloatingItem;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiGO,IAAM,8BAAN,cAA0C,WAAW;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,OAAO,oBAAoB;AAQ3B,SAAA,YAAY,yBAAyB;AAMpC,SAAA,eAAe;AAMf,SAAA,SAAS;AAMT,SAAA,SAAS;AAOT,SAAA,UAAU;AAQX,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;AApGa,4BAmGK,SAAS,UAAU,cAAc;AA5FvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,4BAOe,WAAA,QAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,4BAee,WAAA,aAAA,CAAA;AAMC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArBd,4BAqBgB,WAAA,gBAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA3Bd,4BA2BgB,WAAA,UAAA,CAAA;AAMA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjCd,4BAiCgB,WAAA,UAAA,CAAA;AAOA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAxCd,4BAwCgB,WAAA,WAAA,CAAA;AAQD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhDb,4BAgDe,WAAA,YAAA,CAAA;AAhDf,8BAAN,gBAAA;AAAA,EADN,cAAc,gCAAgC;AAAA,GAClC,2BAAA;"}
@@ -83,6 +83,15 @@ export declare enum ObcSequenceCardState {
83
83
  * ```
84
84
  *
85
85
  * Keywords: timeline, step, progress, sequence, card, event, status.
86
+ *
87
+ * @slot leading-icon - Icon before the title (shown when `hasLeadingIcon` is true).
88
+ * @slot title - Title text (falls back to `cardTitle`).
89
+ * @slot subtitle - Subtitle/description (falls back to `subtitle`).
90
+ * @slot time-stamp - Header timestamp (falls back to `timeLabel` + `time`).
91
+ * @slot header-actions - Optional header actions (e.g., close button).
92
+ * @slot left-time-stamp - Left rail timestamp (falls back to `leftTime`).
93
+ * @slot actions - Actions row content (shown when `hasActions` is true).
94
+ * @slot - Main content area (shown when `hasContent` is true).
86
95
  * @experimental
87
96
  */
88
97
  export declare class ObcSequenceCard extends LitElement {
@@ -1 +1 @@
1
- {"version":3,"file":"sequence-card.d.ts","sourceRoot":"","sources":["../../../src/components/sequence-card/sequence-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,EAEL,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,qBAAqB,CAAC;AAE7B,oBAAY,mBAAmB;IAC7B,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,oBAAY,wBAAwB;IAClC,MAAM,WAAW;IACjB,OAAO,aAAa;IACpB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,2BAA2B;IACrC,QAAQ,aAAa;IACrB,QAAQ,cAAc;CACvB;AAED,oBAAY,oBAAoB;IAC9B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACnB,IAAI,EAAE,mBAAmB,CACrB;IACJ,SAAS,EAAE,wBAAwB,CAC3B;IACR,YAAY,EAAE,2BAA2B,CAC5B;IACb,KAAK,EAAE,oBAAoB,CACvB;IAEH,SAAS,UAAS;IAClB,UAAU,UAAS;IAEnB,UAAU,UAAS;IACnB,aAAa,UAAS;IAEtB,cAAc,UAAS;IACxB,SAAS,SAAW;IAC9C,uCAAuC;IACb,QAAQ,SAAc;IAErB,YAAY,UAAS;IAChD,wCAAwC;IACd,SAAS,SAAU;IAC7C,wCAAwC;IACd,IAAI,SAAc;IAEjB,UAAU,UAAS;IACnB,UAAU,UAAS;IAE9C,uGAAuG;IAC7E,aAAa,SAAO;IAC9C,iKAAiK;IACvI,aAAa,EAAE,aAAa,CAC9B;IAExB,uFAAuF;IAC7D,QAAQ,SAAW;IAE7C,4CAA4C;IAClB,qBAAqB,CAAC,EAAE,YAAY,CAAC;IAC/D,4CAA4C;IAClB,sBAAsB,CAAC,EAAE,aAAa,CAAC;IAEjE,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,kBAAkB,GAI7B;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,kBAAkB,GAc7B;IAED,OAAO,KAAK,qBAAqB,GAEhC;IAED,OAAO,KAAK,uBAAuB,GAIlC;;IAOD,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,mBAAmB;IA0BlB,MAAM;IAiPf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
1
+ {"version":3,"file":"sequence-card.d.ts","sourceRoot":"","sources":["../../../src/components/sequence-card/sequence-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,EAEL,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,qBAAqB,CAAC;AAE7B,oBAAY,mBAAmB;IAC7B,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,oBAAY,wBAAwB;IAClC,MAAM,WAAW;IACjB,OAAO,aAAa;IACpB,WAAW,gBAAgB;CAC5B;AAED,oBAAY,2BAA2B;IACrC,QAAQ,aAAa;IACrB,QAAQ,cAAc;CACvB;AAED,oBAAY,oBAAoB;IAC9B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACnB,IAAI,EAAE,mBAAmB,CACrB;IACJ,SAAS,EAAE,wBAAwB,CAC3B;IACR,YAAY,EAAE,2BAA2B,CAC5B;IACb,KAAK,EAAE,oBAAoB,CACvB;IAEH,SAAS,UAAS;IAClB,UAAU,UAAS;IAEnB,UAAU,UAAS;IACnB,aAAa,UAAS;IAEtB,cAAc,UAAS;IACxB,SAAS,SAAW;IAC9C,uCAAuC;IACb,QAAQ,SAAc;IAErB,YAAY,UAAS;IAChD,wCAAwC;IACd,SAAS,SAAU;IAC7C,wCAAwC;IACd,IAAI,SAAc;IAEjB,UAAU,UAAS;IACnB,UAAU,UAAS;IAE9C,uGAAuG;IAC7E,aAAa,SAAO;IAC9C,iKAAiK;IACvI,aAAa,EAAE,aAAa,CAC9B;IAExB,uFAAuF;IAC7D,QAAQ,SAAW;IAE7C,4CAA4C;IAClB,qBAAqB,CAAC,EAAE,YAAY,CAAC;IAC/D,4CAA4C;IAClB,sBAAsB,CAAC,EAAE,aAAa,CAAC;IAEjE,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,kBAAkB,GAI7B;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,kBAAkB,GAc7B;IAED,OAAO,KAAK,qBAAqB,GAEhC;IAED,OAAO,KAAK,uBAAuB,GAIlC;;IAOD,OAAO,CAAC,wBAAwB;IAYhC,OAAO,CAAC,mBAAmB;IA0BlB,MAAM;IAiPf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}