npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.117 → 2.0.0-next.119 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.117 → 2.0.0-next.119

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 (88) hide show

package/dist/components/top-bar/top-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"top-bar.js","sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button.js';\nimport '../clock/clock.js';\nimport '../divider/divider.js';\nimport '../breadcrumb/breadcrumb.js';\nimport '../../icons/icon-menu-iec.js';\nimport '../../icons/icon-home.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-applications.js';\nimport '../../icons/icon-more-vertical-google.js';\nimport '../../icons/icon-user.js';\nimport {\n BreadcrumbClickEvent,\n BreadcrumbItem,\n} from '../breadcrumb/breadcrumb.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcTopBarMenuButtonIcon {\n Menu = 'menu',\n Home = 'home',\n}\n\n/*\n `<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n \n Provides a flexible, highly configurable top bar for application interfaces, supporting navigation, context display, quick actions, and status indicators. The top bar adapts to screen size and can show or hide elements such as menu, app icon, breadcrumbs, user/profile, clock, and alert notifications.\n \n Appears at the top of the UI, organizing primary navigation and contextual actions in a single, persistent region. Designed for use as the main app bar or header in multi-pane or dashboard-style layouts.\n \n ## Features\n * - Configurable Sections: Supports left and right-aligned groups for navigation, context, and actions.\n * - Menu Button: Optional menu button for opening navigation drawers or sidebars; can be styled as wide or regular.\n * - App Icon Slot: Customizable slot for displaying an application or brand icon.\n * - App Title & Page Name: Displays the current application and page context.\n * - Breadcrumbs: Optional breadcrumb navigation for hierarchical context (in settings mode).\n * - Command Button Slot: Slot for inserting a primary command/action button.\n * - Alert/Notification Area: Slot for alert indicators, notification badges, or custom alert components.\n * - Dimming Button: Optional button for toggling display modes (e.g., day/night).\n * - User/Profile Button: Optional user icon for profile/account actions.\n * - Apps Button: Optional button for accessing additional applications or modules.\n * - Clock & Date: Optional digital clock and date display, responsive to screen size.\n * - Responsive Layout: Multiple breakpoint properties to control visibility and layout of elements based on viewport width.\n * - Settings Mode: Special mode with close, back, and forward navigation, breadcrumbs, and app title.\n * - Tall Variant: Optional increased height for touch or accessibility needs.\n * - Inactive State: Disables interactive elements and visually de-emphasizes the bar.\n \n ## Variants\n * - Regular: Standard top bar with menu, app icon, title, page name, and action slots.\n * - Settings: Shows close, back, forward buttons, breadcrumbs, and app title for configuration or settings screens.\n * - Inactive: Visually muted and disables interaction (e.g., when the app is locked or in a modal state).\n * - Tall: Increases the height of the bar for improved touch targets.\n \n ## Usage Guidelines\n * Use `<obc-top-bar>` as the persistent header for your application, providing navigation, context, and quick access to key actions or status. Configure which elements appear via boolean properties and slots. Adjust breakpoint properties to control responsive behavior for each section.\n \n - Place navigation, branding, and context (title, breadcrumbs) on the left; actions, alerts, and status (clock, user, apps) on the right.\n * - Use the `settings` property for configuration or setup screens to enable close/back/forward navigation and breadcrumbs.\n * - Use the `inactive` property to visually disable the bar and its actions when the app is not interactive.\n * - Insert custom icons or buttons using the `app-icon` and `command-button` slots.\n * - Use the `alerts` slot to display alert indicators, notification badges, or custom alert components.\n \n TODO(designer): Clarify recommended combinations of visible elements for different app contexts (e.g., when to show both user and apps buttons, or best practices for alert placement).\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|------------------\|---------------------------------\|----------------------------------------------------------------\|\n * \| `app-icon` \| `showAppIcon` is true \| Custom icon representing the application or brand. \|\n * \| `command-button` \| Always (if provided) \| Primary command or action button for the current context. \|\n * \| `alerts` \| Always (if provided) \| Area for alert indicators, notification badges, or alert items.\|\n * \| `clock` \| Always (if provided) \| Clock component for displaying the current time. \|\n \n ## Properties and Attributes\n * - `appTitle` (string): Sets the main application title (default: \"App\").\n * - `pageName` (string): Sets the current page or section name (default: \"Page\").\n * - `menuButtonActivated` (boolean): Highlights the menu button as active.\n * - `dimmingButtonActivated` (boolean): Highlights the dimming button as active.\n * - `appsButtonActivated` (boolean): Highlights the apps button as active.\n * - `leftMoreButtonActivated` (boolean): Highlights the left more button as active.\n * - `userButtonActivated` (boolean): Highlights the user button as active.\n * - `tall` (boolean): Increases the bar height for larger touch targets.\n * - `wideMenuButton` (boolean): Expands the menu button for wide-rail layouts.\n * - `showAppsButton` (boolean): Shows/hides the apps button.\n * - `showDimmingButton` (boolean): Shows/hides the dimming (day/night) button.\n * - `showUserButton` (boolean): Shows/hides the user/profile button.\n * - `showClock` (boolean): Shows/hides the clock.\n * - `showDate` (boolean): Shows/hides the date in the clock.\n * - `showAppIcon` (boolean): Shows/hides the app icon slot.\n * - `inactive` (boolean): Disables interaction and visually de-emphasizes the bar.\n * - `settings` (boolean): Enables settings mode (shows close, back, forward, breadcrumbs).\n * - `breadcrumbItems` (BreadcrumbItem[]): Array of breadcrumb items for navigation.\n * - Breakpoint properties (`appButtonBreakpointPx`, `dimmingButtonBreakpointPx`, `appTitleBreakpointPx`, `userButtonBreakpointPx`, `appIconBreakpointPx`): Control responsive visibility of each section.\n \n ## Events\n * - `menu-button-clicked` – Fired when the menu button is clicked.\n * - `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.\n * - `apps-button-clicked` – Fired when the apps button is clicked.\n * - `left-more-button-clicked` – Fired when the left more button is clicked.\n * - `user-button-clicked` – Fired when the user/profile button is clicked.\n * - `close` – Fired in settings mode when the close button is clicked.\n * - `back` – Fired in settings mode when the back button is clicked.\n * - `forward` – Fired in settings mode when the forward button is clicked.\n * - `emergency-brightness-start` – Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * - `emergency-brightness-stop` – Fired when the menu button is released.\n \n ## Best Practices and Constraints\n * - Only show interactive elements relevant to the current context to avoid clutter.\n * - Use the `alerts` slot for transient or critical notifications; persistent alerts may require a different component.\n * - For accessibility, ensure that all interactive elements have appropriate labels and focus handling.\n * - Adjust breakpoint properties to optimize the layout for different device sizes.\n * - In settings mode, use breadcrumbs to provide clear navigation context.\n \n ## Example\n \n ```html\n * <obc-top-bar\n * appTitle=\"My App\"\n * pageName=\"Dashboard\"\n * showAppsButton\n * showDimmingButton\n * showClock\n * showUserButton\n * showAppIcon\n * >\n * <obi-placeholder slot=\"app-icon\"></obi-placeholder>\n * <obc-command-button slot=\"command-button\"></obc-command-button>\n * <obc-topbar-message-item slot=\"alerts\"></obc-topbar-message-item>\n * <obc-clock slot=\"clock\"></obc-clock>\n * </obc-top-bar>\n * ```\n \n @slot app-icon - Custom icon representing the application or brand (shown when `showAppIcon` is true)\n * @slot command-button - Primary command/action button for the current context\n * @slot alerts - Area for alert indicators, notification badges, or alert items\n * @slot clock - Clock component for displaying the current time (shown when `showClock` is true)\n * @fires menu-button-clicked - Fired when the menu button is clicked\n * @fires dimming-button-clicked - Fired when the dimming (day/night) button is clicked\n * @fires apps-button-clicked - Fired when the apps button is clicked\n * @fires left-more-button-clicked - Fired when the left more button is clicked\n * @fires user-button-clicked - Fired when the user/profile button is clicked\n * @fires close - Fired in settings mode when the close button is clicked\n * @fires back - Fired in settings mode when the back button is clicked\n * @fires emergency-brightness-start - Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * @fires emergency-brightness-stop - Fired when the menu button is released.\n * @fires {BreadcrumbClickEvent} breadcrumb-click - Fired when a breadcrumb item is clicked.\n * @stable\n /\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n /\n Sets the main application title displayed in the top bar.\n * @type {string}\n * @default \"App\"\n /\n @property({type: String}) appTitle = 'App';\n\n /\n Sets the current page or section name displayed in the top bar.\n * @type {string}\n * @default \"Page\"\n * @availableWhen settings==false\n /\n @property({type: String}) pageName = 'Page';\n\n /* @availableWhen settings==false && inactive==false /\n @property({type: String}) menuButtonIcon = ObcTopBarMenuButtonIcon.Menu;\n\n /\n Highlights the menu button as active.\n * @type {boolean}\n * @default false\n * @availableWhen settings==false && inactive==false\n /\n @property({type: Boolean})\n menuButtonActivated = false;\n\n /\n Highlights the dimming (day/night) button as active.\n * @type {boolean}\n * @default false\n * @availableWhen showDimmingButton==true && inactive==false\n /\n @property({type: Boolean})\n dimmingButtonActivated = false;\n\n /\n Highlights the apps button as active.\n * @type {boolean}\n * @default false\n * @availableWhen showAppsButton==true && inactive==false\n /\n @property({type: Boolean})\n appsButtonActivated = false;\n\n /\n Highlights the left more button as active.\n * @type {boolean}\n * @default false\n * @availableWhen inactive==false\n /\n @property({type: Boolean})\n leftMoreButtonActivated = false;\n\n /\n Highlights the user/profile button as active.\n * @type {boolean}\n * @default false\n * @availableWhen showUserButton==true && inactive==false\n /\n @property({type: Boolean})\n userButtonActivated = false;\n\n /\n Disables the user/profile button.\n * @type {boolean}\n * @default false\n * @availableWhen showUserButton==true && inactive==false\n /\n @property({type: Boolean})\n userButtonDisabled = false;\n\n /\n Increases the height of the top bar for larger touch targets.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) tall = false;\n\n /\n Expands the menu button for wide-rail layouts.\n * @type {boolean}\n * @default false\n * @availableWhen settings==false && inactive==false\n /\n @property({type: Boolean}) wideMenuButton = false;\n\n /\n Shows or hides the apps button.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showAppsButton = false;\n\n /\n Shows or hides the dimming (day/night) button.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean})\n showDimmingButton = false;\n\n /\n Shows or hides the user/profile button.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showUserButton = false;\n\n /\n Shows or hides the clock.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showClock = false;\n\n /\n Shows or hides the date in the clock display.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showDate = false;\n\n /\n Shows or hides the app icon slot.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showAppIcon = false;\n\n /\n Disables interaction and visually de-emphasizes the bar.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) inactive = false;\n\n /\n Controls the breakpoint (in px) for showing/hiding the apps button.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n appButtonBreakpointPx = 500;\n\n /\n Controls the breakpoint (in px) for showing/hiding the dimming button.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n dimmingButtonBreakpointPx = 500;\n\n /\n Controls the breakpoint (in px) for showing/hiding the app title.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n appTitleBreakpointPx = 500;\n\n /\n Controls the breakpoint (in px) for showing/hiding the user button.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n userButtonBreakpointPx = 500;\n\n /\n Controls the breakpoint (in px) for showing/hiding the app icon.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n appIconBreakpointPx = 500;\n\n /\n Enables settings mode, displaying close, back buttons, breadcrumbs, and app title.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) settings = false;\n\n /\n Array of breadcrumb items for navigation (used in settings mode).\n * @type {BreadcrumbItem[]}\n * @default []\n * @availableWhen settings==true\n /\n @property({type: Array})\n breadcrumbItems: BreadcrumbItem[] = [];\n\n private dimmingButtonClicked() {\n /\n @event dimming-button-clicked - Fired when the dimming (day/night) button is clicked.\n /\n this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n }\n\n private appsButtonClicked() {\n /\n @event apps-button-clicked - Fired when the apps button is clicked.\n /\n this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n }\n\n private leftMoreButtonClicked() {\n /\n @event left-more-button-clicked - Fired when the left more button is clicked.\n /\n this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n }\n\n private userButtonClicked() {\n /\n @event user-button-clicked - Fired when the user/profile button is clicked.\n /\n this.dispatchEvent(new CustomEvent('user-button-clicked'));\n }\n\n private leftButtonEvent: null \| CustomEvent = null;\n private leftButtonTimeout: null \| NodeJS.Timeout = null;\n private isLeftButtonDown = false;\n private isEmergencyBrightness = false;\n\n private leftButtonDown(event: CustomEvent) {\n this.leftButtonEvent = event;\n this.isLeftButtonDown = true;\n this.leftButtonTimeout = setTimeout(() => {\n this.leftButtonEvent = null;\n this.dispatchEvent(new CustomEvent('emergency-brightness-start'));\n this.isEmergencyBrightness = true;\n }, 500);\n }\n\n private leftButtonUp() {\n if (this.leftButtonEvent) {\n this.dispatchEvent(this.leftButtonEvent);\n this.leftButtonEvent = null;\n }\n if (this.leftButtonTimeout) {\n clearTimeout(this.leftButtonTimeout);\n this.leftButtonTimeout = null;\n }\n if (this.isEmergencyBrightness) {\n this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n this.isEmergencyBrightness = false;\n }\n this.isLeftButtonDown = false;\n }\n\n private leftButtonLeave() {\n if (!this.isLeftButtonDown) return;\n if (this.leftButtonTimeout) {\n clearInterval(this.leftButtonTimeout);\n this.leftButtonTimeout = null;\n }\n if (this.isEmergencyBrightness) {\n this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n this.isEmergencyBrightness = false;\n }\n this.isLeftButtonDown = false;\n }\n\n override render() {\n const leftGroup = [];\n if (this.settings) {\n leftGroup.push(\n html`<div class=\"menu-button\">\n <obc-icon-button\n variant=\"flat\"\n @pointerdown=${() => this.leftButtonDown(new CustomEvent('close'))}\n @pointerup=${() => this.leftButtonUp()}\n @pointerleave=${() => this.leftButtonLeave()}\n >\n <obi-close-google></obi-close-google>\n </obc-icon-button>\n </div>`\n );\n leftGroup.push(\n html`<obc-icon-button\n variant=\"flat\"\n @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n >\n <obi-arrow-left-google></obi-arrow-left-google>\n </obc-icon-button>`\n );\n leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n leftGroup.push(\n html`<obc-breadcrumb\n .items=${this.breadcrumbItems}\n @breadcrumb-click=${(e: BreadcrumbClickEvent) =>\n this.dispatchEvent(\n new CustomEvent('breadcrumb-click', {\n detail: e.detail,\n }) as BreadcrumbClickEvent\n )}\n ></obc-breadcrumb>`\n );\n } else {\n if (!this.inactive) {\n leftGroup.push(\n html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n <obc-icon-button\n variant=\"flat\"\n @pointerdown=${() =>\n this.leftButtonDown(new CustomEvent('menu-button-clicked'))}\n @pointerup=${() => this.leftButtonUp()}\n @pointerleave=${() => this.leftButtonLeave()}\n ?activated=${this.menuButtonActivated}\n >\n ${this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n ? html`<obi-menu-iec></obi-menu-iec>`\n : html`<obi-home></obi-home>`}\n </obc-icon-button>\n </div>`\n );\n }\n if (this.showAppIcon) {\n leftGroup.push(\n html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>`\n );\n }\n leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n leftGroup.push(html`<slot name=\"command-button\"></slot>`);\n }\n\n const breakpointMoreButton = Math.max(\n this.appButtonBreakpointPx,\n this.dimmingButtonBreakpointPx\n );\n\n return html`\n <style>\n @media (max-width: ${breakpointMoreButton}px) {\n .left-more-button {\n display: revert !important;\n import { customElement } from '../../decorator.js';\n }\n\n .group.left > {\n margin-right: 4px;\n margin-left: 4px;\n }\n }\n\n @media (max-width: ${this.appButtonBreakpointPx}px) {\n .apps-button {\n display: none;\n }\n }\n\n @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n .dimming-button {\n display: none;\n }\n }\n\n @media (max-width: ${this.appTitleBreakpointPx}px) {\n .title {\n display: none;\n }\n }\n\n @media (max-width: ${this.userButtonBreakpointPx}px) {\n .user-button {\n display: none;\n }\n }\n\n @media (max-width: ${this.appIconBreakpointPx}px) {\n .app-icon {\n display: none;\n }\n }\n </style>\n <nav\n class=${classMap({\n wrapper: true,\n inactive: this.inactive,\n settings: this.settings,\n tall: this.tall,\n })}\n role=\"menubar\"\n >\n <div class=\"left group\">${leftGroup}</div>\n <div class=\"right group\">\n <div class=\"alert-container\">\n <slot name=\"alerts\"></slot>\n </div>\n ${this.showDimmingButton && !this.inactive\n ? html`<obc-icon-button\n class=\"dimming-button\"\n part=\"dimming-button\"\n variant=\"flat\"\n @click=${this.dimmingButtonClicked}\n ?activated=${this.dimmingButtonActivated}\n >\n <obi-palette-day-night-iec></obi-palette-day-night-iec>\n </obc-icon-button>`\n : null}\n ${this.showUserButton && !this.inactive\n ? html`<obc-icon-button\n class=\"user-button\"\n variant=\"flat\"\n part=\"user-button\"\n @click=${this.userButtonClicked}\n ?activated=${this.userButtonActivated}\n ?disabled=${this.userButtonDisabled}\n >\n <obi-user></obi-user>\n </obc-icon-button>`\n : null}\n ${this.showAppsButton && !this.inactive\n ? html`<obc-icon-button\n class=\"apps-button\"\n variant=\"flat\"\n part=\"apps-button\"\n @click=${this.appsButtonClicked}\n ?activated=${this.appsButtonActivated}\n >\n <obi-applications></obi-applications>\n </obc-icon-button>`\n : null}\n ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n ${!this.inactive\n ? html`<obc-icon-button\n class=\"left-more-button\"\n part=\"left-more-button\"\n variant=\"flat\"\n @click=${this.leftMoreButtonClicked}\n ?activated=${this.leftMoreButtonActivated}\n >\n <obi-more-vertical-google></obi-more-vertical-google>\n </obc-icon-button>`\n : null}\n </div>\n </nav>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-top-bar': ObcTopBar;\n }\n}\n"],"names":["ObcTopBarMenuButtonIcon"],"mappings":"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"}
1	+ {"version":3,"file":"top-bar.js","sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button.js';\nimport '../clock/clock.js';\nimport '../divider/divider.js';\nimport '../breadcrumb/breadcrumb.js';\nimport '../../icons/icon-menu-iec.js';\nimport '../../icons/icon-home.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-applications.js';\nimport '../../icons/icon-more-vertical-google.js';\nimport '../../icons/icon-user.js';\nimport {\n BreadcrumbClickEvent,\n BreadcrumbItem,\n} from '../breadcrumb/breadcrumb.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcTopBarMenuButtonIcon {\n Menu = 'menu',\n Home = 'home',\n}\n\n/*\n `<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n \n Provides a flexible, highly configurable top bar for application interfaces, supporting navigation, context display, quick actions, and status indicators. The top bar adapts to screen size and can show or hide elements such as menu, app icon, breadcrumbs, user/profile, clock, and alert notifications.\n \n Appears at the top of the UI, organizing primary navigation and contextual actions in a single, persistent region. Designed for use as the main app bar or header in multi-pane or dashboard-style layouts.\n \n ## Features\n * - Configurable Sections: Supports left and right-aligned groups for navigation, context, and actions.\n * - Menu Button: Optional menu button for opening navigation drawers or sidebars; can be styled as wide or regular.\n * - App Icon Slot: Customizable slot for displaying an application or brand icon.\n * - App Title & Page Name: Displays the current application and page context.\n * - Breadcrumbs: Optional breadcrumb navigation for hierarchical context (in settings mode).\n * - Command Button Slot: Slot for inserting a primary command/action button.\n * - Alert/Notification Area: Slot for alert indicators, notification badges, or custom alert components.\n * - Dimming Button: Optional button for toggling display modes (e.g., day/night).\n * - User/Profile Button: Optional user icon for profile/account actions.\n * - Apps Button: Optional button for accessing additional applications or modules.\n * - Clock & Date: Optional digital clock and date display, responsive to screen size.\n * - Responsive Layout: Multiple breakpoint properties to control visibility and layout of elements based on viewport width.\n * - Settings Mode: Special mode with close, back, and forward navigation, breadcrumbs, and app title.\n * - Tall Variant: Optional increased height for touch or accessibility needs.\n * - Inactive State: Disables interactive elements and visually de-emphasizes the bar.\n \n ## Variants\n * - Regular: Standard top bar with menu, app icon, title, page name, and action slots.\n * - Settings: Shows close, back, forward buttons, breadcrumbs, and app title for configuration or settings screens.\n * - Inactive: Visually muted and disables interaction (e.g., when the app is locked or in a modal state).\n * - Tall: Increases the height of the bar for improved touch targets.\n \n ## Usage Guidelines\n * Use `<obc-top-bar>` as the persistent header for your application, providing navigation, context, and quick access to key actions or status. Configure which elements appear via boolean properties and slots. Adjust breakpoint properties to control responsive behavior for each section.\n \n - Place navigation, branding, and context (title, breadcrumbs) on the left; actions, alerts, and status (clock, user, apps) on the right.\n * - Use the `settings` property for configuration or setup screens to enable close/back/forward navigation and breadcrumbs.\n * - Use the `inactive` property to visually disable the bar and its actions when the app is not interactive.\n * - Insert custom icons or buttons using the `app-icon` and `command-button` slots.\n * - Use the `alerts` slot to display alert indicators, notification badges, or custom alert components.\n \n TODO(designer): Clarify recommended combinations of visible elements for different app contexts (e.g., when to show both user and apps buttons, or best practices for alert placement).\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|------------------\|---------------------------------\|----------------------------------------------------------------\|\n * \| `app-icon` \| `showAppIcon` is true \| Custom icon representing the application or brand. \|\n * \| `command-button` \| Always (if provided) \| Primary command or action button for the current context. \|\n * \| `alerts` \| Always (if provided) \| Area for alert indicators, notification badges, or alert items.\|\n * \| `clock` \| Always (if provided) \| Clock component for displaying the current time. \|\n \n ## Properties and Attributes\n * - `appTitle` (string): Sets the main application title (default: \"App\").\n * - `pageName` (string): Sets the current page or section name (default: \"Page\").\n * - `menuButtonActivated` (boolean): Highlights the menu button as active.\n * - `dimmingButtonActivated` (boolean): Highlights the dimming button as active.\n * - `appsButtonActivated` (boolean): Highlights the apps button as active.\n * - `leftMoreButtonActivated` (boolean): Highlights the left more button as active.\n * - `userButtonActivated` (boolean): Highlights the user button as active.\n * - `tall` (boolean): Increases the bar height for larger touch targets.\n * - `wideMenuButton` (boolean): Expands the menu button for wide-rail layouts.\n * - `showAppsButton` (boolean): Shows/hides the apps button.\n * - `showDimmingButton` (boolean): Shows/hides the dimming (day/night) button.\n * - `showUserButton` (boolean): Shows/hides the user/profile button.\n * - `showClock` (boolean): Shows/hides the clock.\n * - `showDate` (boolean): Shows/hides the date in the clock.\n * - `showAppIcon` (boolean): Shows/hides the app icon slot.\n * - `inactive` (boolean): Disables interaction and visually de-emphasizes the bar.\n * - `settings` (boolean): Enables settings mode (shows close, back, forward, breadcrumbs).\n * - `breadcrumbItems` (BreadcrumbItem[]): Array of breadcrumb items for navigation.\n * - Breakpoint properties (`appButtonBreakpointPx`, `dimmingButtonBreakpointPx`, `appTitleBreakpointPx`, `userButtonBreakpointPx`, `appIconBreakpointPx`): Control responsive visibility of each section.\n \n ## Events\n * - `menu-button-clicked` – Fired when the menu button is clicked.\n * - `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.\n * - `apps-button-clicked` – Fired when the apps button is clicked.\n * - `left-more-button-clicked` – Fired when the left more button is clicked.\n * - `user-button-clicked` – Fired when the user/profile button is clicked.\n * - `close` – Fired in settings mode when the close button is clicked.\n * - `back` – Fired in settings mode when the back button is clicked.\n * - `forward` – Fired in settings mode when the forward button is clicked.\n * - `emergency-brightness-start` – Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * - `emergency-brightness-stop` – Fired when the menu button is released.\n \n ## Best Practices and Constraints\n * - Only show interactive elements relevant to the current context to avoid clutter.\n * - Use the `alerts` slot for transient or critical notifications; persistent alerts may require a different component.\n * - For accessibility, ensure that all interactive elements have appropriate labels and focus handling.\n * - Adjust breakpoint properties to optimize the layout for different device sizes.\n * - In settings mode, use breadcrumbs to provide clear navigation context.\n \n ## Example\n \n ```html\n * <obc-top-bar\n * appTitle=\"My App\"\n * pageName=\"Dashboard\"\n * showAppsButton\n * showDimmingButton\n * showClock\n * showUserButton\n * showAppIcon\n * >\n * <obi-placeholder slot=\"app-icon\"></obi-placeholder>\n * <obc-command-button slot=\"command-button\"></obc-command-button>\n * <obc-topbar-message-item slot=\"alerts\"></obc-topbar-message-item>\n * <obc-clock slot=\"clock\"></obc-clock>\n * </obc-top-bar>\n * ```\n \n @slot app-icon - Custom icon representing the application or brand (shown when `showAppIcon` is true)\n * @slot command-button - Primary command/action button for the current context\n * @slot alerts - Area for alert indicators, notification badges, or alert items\n * @slot clock - Clock component for displaying the current time (shown when `showClock` is true)\n * @fires menu-button-clicked - Fired when the menu button is clicked\n * @fires dimming-button-clicked - Fired when the dimming (day/night) button is clicked\n * @fires apps-button-clicked - Fired when the apps button is clicked\n * @fires left-more-button-clicked - Fired when the left more button is clicked\n * @fires user-button-clicked - Fired when the user/profile button is clicked\n * @fires close - Fired in settings mode when the close button is clicked\n * @fires back - Fired in settings mode when the back button is clicked\n * @fires emergency-brightness-start - Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * @fires emergency-brightness-stop - Fired when the menu button is released.\n * @fires {BreadcrumbClickEvent} breadcrumb-click - Fired when a breadcrumb item is clicked.\n * @stable\n /\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n /\n Sets the main application title displayed in the top bar.\n * @type {string}\n * @default \"App\"\n /\n @property({type: String}) appTitle = 'App';\n\n /\n Sets the current page or section name displayed in the top bar.\n * @type {string}\n * @default \"Page\"\n * @availableWhen settings==false\n /\n @property({type: String}) pageName = 'Page';\n\n /* @availableWhen settings==false && inactive==false /\n @property({type: String}) menuButtonIcon = ObcTopBarMenuButtonIcon.Menu;\n\n /\n Highlights the menu button as active.\n * @type {boolean}\n * @default false\n * @availableWhen settings==false && inactive==false\n /\n @property({type: Boolean})\n menuButtonActivated = false;\n\n /\n Highlights the dimming (day/night) button as active.\n * @type {boolean}\n * @default false\n * @availableWhen showDimmingButton==true && inactive==false\n /\n @property({type: Boolean})\n dimmingButtonActivated = false;\n\n /\n Highlights the apps button as active.\n * @type {boolean}\n * @default false\n * @availableWhen showAppsButton==true && inactive==false\n /\n @property({type: Boolean})\n appsButtonActivated = false;\n\n /\n Highlights the left more button as active.\n * @type {boolean}\n * @default false\n * @availableWhen inactive==false\n /\n @property({type: Boolean})\n leftMoreButtonActivated = false;\n\n /\n Highlights the user/profile button as active.\n * @type {boolean}\n * @default false\n * @availableWhen showUserButton==true && inactive==false\n /\n @property({type: Boolean})\n userButtonActivated = false;\n\n /\n Disables the user/profile button.\n * @type {boolean}\n * @default false\n * @availableWhen showUserButton==true && inactive==false\n /\n @property({type: Boolean})\n userButtonDisabled = false;\n\n /\n Increases the height of the top bar for larger touch targets.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) tall = false;\n\n /\n Expands the menu button for wide-rail layouts.\n * @type {boolean}\n * @default false\n * @availableWhen settings==false && inactive==false\n /\n @property({type: Boolean}) wideMenuButton = false;\n\n /\n Shows or hides the apps button.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showAppsButton = false;\n\n /\n Shows or hides the dimming (day/night) button.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean})\n showDimmingButton = false;\n\n /\n Shows or hides the user/profile button.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showUserButton = false;\n\n /\n Shows or hides the clock.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showClock = false;\n\n /\n Shows or hides the date in the clock display.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showDate = false;\n\n /\n Shows or hides the app icon slot.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) showAppIcon = false;\n\n /\n Disables interaction and visually de-emphasizes the bar.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) inactive = false;\n\n /\n Controls the breakpoint (in px) for showing/hiding the apps button.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n appButtonBreakpointPx = 500;\n\n /\n Controls the breakpoint (in px) for showing/hiding the dimming button.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n dimmingButtonBreakpointPx = 500;\n\n /\n Controls the breakpoint (in px) for showing/hiding the app title.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n appTitleBreakpointPx = 500;\n\n /\n Controls the breakpoint (in px) for showing/hiding the user button.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n userButtonBreakpointPx = 500;\n\n /\n Controls the breakpoint (in px) for showing/hiding the app icon.\n * @type {number}\n * @default 500\n /\n @property({type: Number})\n appIconBreakpointPx = 500;\n\n /\n Enables settings mode, displaying close, back buttons, breadcrumbs, and app title.\n * @type {boolean}\n * @default false\n /\n @property({type: Boolean}) settings = false;\n\n /\n Array of breadcrumb items for navigation (used in settings mode).\n * @type {BreadcrumbItem[]}\n * @default []\n * @availableWhen settings==true\n /\n @property({type: Array})\n breadcrumbItems: BreadcrumbItem[] = [];\n\n private dimmingButtonClicked() {\n /\n Fired when the dimming (day/night) button is clicked.\n * @event dimming-button-clicked\n /\n this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n }\n\n private appsButtonClicked() {\n /\n Fired when the apps button is clicked.\n * @event apps-button-clicked\n /\n this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n }\n\n private leftMoreButtonClicked() {\n /\n Fired when the left more button is clicked.\n * @event left-more-button-clicked\n /\n this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n }\n\n private userButtonClicked() {\n /\n Fired when the user/profile button is clicked.\n * @event user-button-clicked\n /\n this.dispatchEvent(new CustomEvent('user-button-clicked'));\n }\n\n private leftButtonEvent: null \| CustomEvent = null;\n private leftButtonTimeout: null \| NodeJS.Timeout = null;\n private isLeftButtonDown = false;\n private isEmergencyBrightness = false;\n\n private leftButtonDown(event: CustomEvent) {\n this.leftButtonEvent = event;\n this.isLeftButtonDown = true;\n this.leftButtonTimeout = setTimeout(() => {\n this.leftButtonEvent = null;\n this.dispatchEvent(new CustomEvent('emergency-brightness-start'));\n this.isEmergencyBrightness = true;\n }, 500);\n }\n\n private leftButtonUp() {\n if (this.leftButtonEvent) {\n this.dispatchEvent(this.leftButtonEvent);\n this.leftButtonEvent = null;\n }\n if (this.leftButtonTimeout) {\n clearTimeout(this.leftButtonTimeout);\n this.leftButtonTimeout = null;\n }\n if (this.isEmergencyBrightness) {\n this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n this.isEmergencyBrightness = false;\n }\n this.isLeftButtonDown = false;\n }\n\n private leftButtonLeave() {\n if (!this.isLeftButtonDown) return;\n if (this.leftButtonTimeout) {\n clearInterval(this.leftButtonTimeout);\n this.leftButtonTimeout = null;\n }\n if (this.isEmergencyBrightness) {\n this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n this.isEmergencyBrightness = false;\n }\n this.isLeftButtonDown = false;\n }\n\n override render() {\n const leftGroup = [];\n if (this.settings) {\n leftGroup.push(\n html`<div class=\"menu-button\">\n <obc-icon-button\n variant=\"flat\"\n @pointerdown=${() => this.leftButtonDown(new CustomEvent('close'))}\n @pointerup=${() => this.leftButtonUp()}\n @pointerleave=${() => this.leftButtonLeave()}\n >\n <obi-close-google></obi-close-google>\n </obc-icon-button>\n </div>`\n );\n leftGroup.push(\n html`<obc-icon-button\n variant=\"flat\"\n @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n >\n <obi-arrow-left-google></obi-arrow-left-google>\n </obc-icon-button>`\n );\n leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n leftGroup.push(\n html`<obc-breadcrumb\n .items=${this.breadcrumbItems}\n @breadcrumb-click=${(e: BreadcrumbClickEvent) =>\n this.dispatchEvent(\n new CustomEvent('breadcrumb-click', {\n detail: e.detail,\n }) as BreadcrumbClickEvent\n )}\n ></obc-breadcrumb>`\n );\n } else {\n if (!this.inactive) {\n leftGroup.push(\n html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n <obc-icon-button\n variant=\"flat\"\n @pointerdown=${() =>\n this.leftButtonDown(new CustomEvent('menu-button-clicked'))}\n @pointerup=${() => this.leftButtonUp()}\n @pointerleave=${() => this.leftButtonLeave()}\n ?activated=${this.menuButtonActivated}\n >\n ${this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n ? html`<obi-menu-iec></obi-menu-iec>`\n : html`<obi-home></obi-home>`}\n </obc-icon-button>\n </div>`\n );\n }\n if (this.showAppIcon) {\n leftGroup.push(\n html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>`\n );\n }\n leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n leftGroup.push(html`<slot name=\"command-button\"></slot>`);\n }\n\n const breakpointMoreButton = Math.max(\n this.appButtonBreakpointPx,\n this.dimmingButtonBreakpointPx\n );\n\n return html`\n <style>\n @media (max-width: ${breakpointMoreButton}px) {\n .left-more-button {\n display: revert !important;\n import { customElement } from '../../decorator.js';\n }\n\n .group.left > {\n margin-right: 4px;\n margin-left: 4px;\n }\n }\n\n @media (max-width: ${this.appButtonBreakpointPx}px) {\n .apps-button {\n display: none;\n }\n }\n\n @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n .dimming-button {\n display: none;\n }\n }\n\n @media (max-width: ${this.appTitleBreakpointPx}px) {\n .title {\n display: none;\n }\n }\n\n @media (max-width: ${this.userButtonBreakpointPx}px) {\n .user-button {\n display: none;\n }\n }\n\n @media (max-width: ${this.appIconBreakpointPx}px) {\n .app-icon {\n display: none;\n }\n }\n </style>\n <nav\n class=${classMap({\n wrapper: true,\n inactive: this.inactive,\n settings: this.settings,\n tall: this.tall,\n })}\n role=\"menubar\"\n >\n <div class=\"left group\">${leftGroup}</div>\n <div class=\"right group\">\n <div class=\"alert-container\">\n <slot name=\"alerts\"></slot>\n </div>\n ${this.showDimmingButton && !this.inactive\n ? html`<obc-icon-button\n class=\"dimming-button\"\n part=\"dimming-button\"\n variant=\"flat\"\n @click=${this.dimmingButtonClicked}\n ?activated=${this.dimmingButtonActivated}\n >\n <obi-palette-day-night-iec></obi-palette-day-night-iec>\n </obc-icon-button>`\n : null}\n ${this.showUserButton && !this.inactive\n ? html`<obc-icon-button\n class=\"user-button\"\n variant=\"flat\"\n part=\"user-button\"\n @click=${this.userButtonClicked}\n ?activated=${this.userButtonActivated}\n ?disabled=${this.userButtonDisabled}\n >\n <obi-user></obi-user>\n </obc-icon-button>`\n : null}\n ${this.showAppsButton && !this.inactive\n ? html`<obc-icon-button\n class=\"apps-button\"\n variant=\"flat\"\n part=\"apps-button\"\n @click=${this.appsButtonClicked}\n ?activated=${this.appsButtonActivated}\n >\n <obi-applications></obi-applications>\n </obc-icon-button>`\n : null}\n ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n ${!this.inactive\n ? html`<obc-icon-button\n class=\"left-more-button\"\n part=\"left-more-button\"\n variant=\"flat\"\n @click=${this.leftMoreButtonClicked}\n ?activated=${this.leftMoreButtonActivated}\n >\n <obi-more-vertical-google></obi-more-vertical-google>\n </obc-icon-button>`\n : null}\n </div>\n </nav>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-top-bar': ObcTopBar;\n }\n}\n"],"names":["ObcTopBarMenuButtonIcon"],"mappings":"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"}

package/dist/components/topbar-message-item/topbar-message-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"topbar-message-item.js","sources":["../../../src/components/topbar-message-item/topbar-message-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './topbar-message-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/*\n Specifies the visual and interactive type of `<obc-topbar-message-item>`.\n \n - `simple`: Basic message with no action button.\n * - `with-button`: Message with a text-based action button.\n * - `with-icon-button`: Message with an icon-based action button.\n * - `inactive`: Inactive or empty state, typically used to indicate no active messages.\n \n The type controls which elements are shown and how the message item behaves.\n /\nexport enum ObcTopbarMessageItemType {\n Simple = 'simple',\n WithButton = 'with-button',\n WithIconButton = 'with-icon-button',\n Inactive = 'inactive',\n}\n\n/\n Sets the vertical size of `<obc-topbar-message-item>`.\n \n - `regular`: Standard height for compact display.\n * - `tall`: Increased height for additional content or emphasis.\n \n The size affects the component's vertical padding and layout.\n /\nexport enum ObcTopbarMessageItemSize {\n Regular = 'regular',\n Tall = 'tall',\n}\n\n/\n `<obc-topbar-message-item>` – A compact, horizontally-aligned message bar for displaying status updates, alerts, or actionable notifications in a top bar or summary area.\n \n This component presents a message with optional icons, title, description, timestamps, and action buttons. It is designed for quick scanning and interaction, supporting both text and icon actions. The layout adapts for regular or tall display, and can show an inactive/empty state when no messages are present.\n \n ---\n \n ### Features\n * - Type Variants:\n * - `simple`: Displays only the message content (title, description, icons, timestamps) with no action button.\n * - `with-button`: Adds a text-based action button for user interaction.\n * - `with-icon-button`: Adds an icon-based action button for compact actions.\n * - `inactive`: Shows an empty/inactive state, typically used when there are no messages to display.\n * - Size Options:\n * - `regular`: Standard compact height.\n * - `tall`: Expanded height for more content or emphasis.\n * - Content Structure:\n * - Supports primary and secondary icons, title, description, and up to two timestamps.\n * - Action area can be a text button, icon button, or omitted.\n * - State Flags:\n * - Show/hide title, description, primary/secondary timestamps, and secondary icon via boolean properties.\n * - Inactive/empty state can be triggered via the `type=\"inactive\"` or `empty` property.\n * - Responsive Layout:\n * - Adapts spacing and alignment for regular vs. tall size.\n * - Truncates long titles/descriptions to fit available space.\n * - Interactive Elements:\n * - Clickable message area (`message-click` event).\n * - Action button (text or icon) triggers `action-click` event.\n \n ---\n \n ### Usage Guidelines\n * Use `<obc-topbar-message-item>` to display concise status updates, alerts, or actionable notifications in a top bar, summary list, or notification center. It is ideal for presenting information that may require quick acknowledgment or action, such as system alerts, status changes, or reminders.\n \n - Use the `with-button` or `with-icon-button` types when an immediate action is available (e.g., \"Acknowledge\", \"Open\", or a quick icon action).\n * - Use the `simple` type for informational messages that do not require user action.\n * - Use the `inactive` type (or set `empty=true`) to indicate there are no current messages.\n * - For longer messages or additional context, use the `tall` size to provide more space for content.\n * - Avoid overloading the message item with excessive text; keep titles and descriptions concise for quick scanning.\n * - For persistent or multi-line alerts, consider using a banner or dialog component instead.\n \n ---\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|-------------------\|------------------------------------------------\|--------------------------------------------------------------\|\n * \| primary-icon \| Always (except inactive) \| Main icon representing the message type or status \|\n * \| secondary-icon \| If `hasSecondaryIcon` is true \| Additional icon for context or severity \|\n * \| title \| If `showTitle` is true \| Title or heading of the message \|\n * \| description \| If `showDescription` is true \| Detailed message text \|\n * \| time \| If `showTimestamp` is true \| Primary timestamp (e.g., time of event) \|\n * \| time-secondary \| If `hasTimestamp2` is true \| Secondary timestamp (e.g., duration, relative time) \|\n * \| action-text \| If type is `with-button` \| Label/content for the text action button \|\n * \| action-icon \| If type is `with-icon-button` \| Icon for the icon action button \|\n * \| empty \| If type is `inactive` or `empty` is true \| Content for the empty/inactive state \|\n \n ---\n \n ### Events\n * - `message-click` – Fired when the main message area is clicked.\n * - `action-click` – Fired when the action button (text or icon) is clicked.\n \n ---\n \n ### Best Practices & Constraints\n * - Only one action button (text or icon) should be used at a time to keep interactions simple.\n * - Use the `inactive` type or `empty=true` to clearly indicate when there are no messages.\n * - For accessibility, ensure that action buttons have clear labels or icons.\n * - Truncation is applied to long titles and descriptions; keep content concise for best results.\n * - Deprecated properties: Prefer using `type` and `size` over `large` and `empty`.\n \n ---\n \n Example:\n * ```html\n * <obc-topbar-message-item type=\"with-button\" size=\"regular\">\n * <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n * <obi-placeholder slot=\"secondary-icon\"></obi-placeholder>\n * <span slot=\"title\">System Update</span>\n * <span slot=\"description\">Update completed successfully.</span>\n * <span slot=\"time\">09:12:46</span>\n * <span slot=\"action-text\">View</span>\n * </obc-topbar-message-item>\n * ```\n \n @slot primary-icon - Main icon representing the message type or status.\n * @slot secondary-icon - Additional icon for context or severity (shown if `hasSecondaryIcon` is true).\n * @slot title - Title or heading of the message (shown if `showTitle` is true).\n * @slot description - Detailed message text (shown if `showDescription` is true).\n * @slot time - Primary timestamp (shown if `showTimestamp` is true).\n * @slot time-secondary - Secondary timestamp (shown if `hasTimestamp2` is true).\n * @slot action-text - Content for the text action button (shown if type is `with-button`).\n * @slot action-icon - Icon for the icon action button (shown if type is `with-icon-button`).\n * @slot empty - Content for the empty/inactive state (shown if type is `inactive` or `empty` is true).\n * @fires {CustomEvent<void>} message-click - Fired when the main message area is clicked.\n * @fires {CustomEvent<void>} action-click - Fired when the action button (text or icon) is clicked.\n * @stable\n /\n@customElement('obc-topbar-message-item')\nexport class ObcTopbarMessageItem extends LitElement {\n /\n Controls the visual and interactive type of the message item.\n \n - `simple`: No action button, just message content.\n * - `with-button`: Shows a text-based action button.\n * - `with-icon-button`: Shows an icon-based action button.\n * - `inactive`: Shows an empty/inactive state.\n \n Defaults to `with-button`.\n /\n @property({type: String}) type: ObcTopbarMessageItemType =\n ObcTopbarMessageItemType.WithButton;\n\n /\n Sets the vertical size of the message item.\n \n - `regular`: Standard compact height.\n * - `tall`: Expanded height for more content.\n \n Defaults to `regular`.\n /\n @property({type: String}) size: ObcTopbarMessageItemSize =\n ObcTopbarMessageItemSize.Regular;\n\n /\n Whether to show the title slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean, attribute: false}) showTitle: boolean = true;\n\n /\n Whether to show the description slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean, attribute: false}) showDescription: boolean = true;\n\n /\n Whether to show the primary timestamp slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean, attribute: false}) showTimestamp: boolean = true;\n\n /\n Whether to display the secondary timestamp slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean}) hasTimestamp2 = false;\n\n /\n Whether to display the secondary icon slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean}) hasSecondaryIcon = false;\n\n private onMessageClick() {\n /\n Fired when the main message area is clicked.\n \n @event message-click - Fired when the main message area is clicked.\n /\n this.dispatchEvent(new CustomEvent('message-click'));\n }\n\n private onActionClick() {\n /\n Fired when the action button (text or icon) is clicked.\n \n @event action-click - Fired when the action button (text or icon) is clicked.\n */\n this.dispatchEvent(new CustomEvent('action-click'));\n }\n\n override render() {\n const isInactive = this.type === ObcTopbarMessageItemType.Inactive;\n const isLarge = this.size === ObcTopbarMessageItemSize.Tall;\n\n return html`\n <div\n class=${classMap({\n wrapper: true,\n empty: isInactive,\n large: isLarge,\n [`type-${this.type}`]: true,\n })}\n >\n ${isInactive\n ? html`<div class=\"empty-message\">\n <slot name=\"empty\">No active messages</slot>\n </div>`\n : html`\n <button class=\"message-item-touch\" @click=${this.onMessageClick}>\n <div class=\"message-item\">\n <div class=\"icon primary\">\n <slot name=\"primary-icon\"></slot>\n </div>\n <div class=\"content-container\">\n ${this.hasSecondaryIcon\n ? html`<div class=\"icon secondary\">\n <slot name=\"secondary-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"message-container ${isLarge ? 'large' : ''}\">\n <div class=\"title-container\">\n ${this.showTitle\n ? html`<div class=\"title\">\n <slot name=\"title\"></slot>\n </div>`\n : nothing}\n ${isLarge\n ? html`\n <div class=\"timestamp-container\">\n ${this.showTimestamp\n ? html`<div class=\"time\">\n <slot name=\"time\"></slot>\n </div>`\n : nothing}\n ${this.hasTimestamp2\n ? html`<div class=\"time\">\n <slot name=\"time-secondary\"></slot>\n </div>`\n : nothing}\n </div>\n `\n : nothing}\n </div>\n ${this.showDescription\n ? html`<div class=\"description\">\n <slot name=\"description\"></slot>\n </div>`\n : nothing}\n </div>\n </div>\n ${!isLarge\n ? html`\n <div class=\"timestamp-container\">\n ${this.showTimestamp\n ? html`<div class=\"time\">\n <slot name=\"time\"></slot>\n </div>`\n : nothing}\n ${this.hasTimestamp2\n ? html`<div class=\"time secondary\">\n <slot name=\"time-secondary\"></slot>\n </div>`\n : nothing}\n </div>\n `\n : nothing}\n </div>\n </button>\n ${this.type === ObcTopbarMessageItemType.WithButton\n ? html`\n <button\n class=\"action-wrapper action-text-button\"\n @click=${this.onActionClick}\n >\n <div class=\"action\">\n <slot name=\"action-text\"></slot>\n </div>\n </button>\n `\n : this.type === ObcTopbarMessageItemType.WithIconButton\n ? html`\n <button\n class=\"action-wrapper action-icon-button\"\n @click=${this.onActionClick}\n >\n <div class=\"action\">\n <slot name=\"action-icon\"></slot>\n </div>\n </button>\n `\n : nothing}\n `}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-topbar-message-item': ObcTopbarMessageItem;\n }\n}\n"],"names":["ObcTopbarMessageItemType","ObcTopbarMessageItemSize"],"mappings":"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"}
1	+ {"version":3,"file":"topbar-message-item.js","sources":["../../../src/components/topbar-message-item/topbar-message-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './topbar-message-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/*\n Specifies the visual and interactive type of `<obc-topbar-message-item>`.\n \n - `simple`: Basic message with no action button.\n * - `with-button`: Message with a text-based action button.\n * - `with-icon-button`: Message with an icon-based action button.\n * - `inactive`: Inactive or empty state, typically used to indicate no active messages.\n \n The type controls which elements are shown and how the message item behaves.\n /\nexport enum ObcTopbarMessageItemType {\n Simple = 'simple',\n WithButton = 'with-button',\n WithIconButton = 'with-icon-button',\n Inactive = 'inactive',\n}\n\n/\n Sets the vertical size of `<obc-topbar-message-item>`.\n \n - `regular`: Standard height for compact display.\n * - `tall`: Increased height for additional content or emphasis.\n \n The size affects the component's vertical padding and layout.\n /\nexport enum ObcTopbarMessageItemSize {\n Regular = 'regular',\n Tall = 'tall',\n}\n\n/\n `<obc-topbar-message-item>` – A compact, horizontally-aligned message bar for displaying status updates, alerts, or actionable notifications in a top bar or summary area.\n \n This component presents a message with optional icons, title, description, timestamps, and action buttons. It is designed for quick scanning and interaction, supporting both text and icon actions. The layout adapts for regular or tall display, and can show an inactive/empty state when no messages are present.\n \n ---\n \n ### Features\n * - Type Variants:\n * - `simple`: Displays only the message content (title, description, icons, timestamps) with no action button.\n * - `with-button`: Adds a text-based action button for user interaction.\n * - `with-icon-button`: Adds an icon-based action button for compact actions.\n * - `inactive`: Shows an empty/inactive state, typically used when there are no messages to display.\n * - Size Options:\n * - `regular`: Standard compact height.\n * - `tall`: Expanded height for more content or emphasis.\n * - Content Structure:\n * - Supports primary and secondary icons, title, description, and up to two timestamps.\n * - Action area can be a text button, icon button, or omitted.\n * - State Flags:\n * - Show/hide title, description, primary/secondary timestamps, and secondary icon via boolean properties.\n * - Inactive/empty state can be triggered via the `type=\"inactive\"` or `empty` property.\n * - Responsive Layout:\n * - Adapts spacing and alignment for regular vs. tall size.\n * - Truncates long titles/descriptions to fit available space.\n * - Interactive Elements:\n * - Clickable message area (`message-click` event).\n * - Action button (text or icon) triggers `action-click` event.\n \n ---\n \n ### Usage Guidelines\n * Use `<obc-topbar-message-item>` to display concise status updates, alerts, or actionable notifications in a top bar, summary list, or notification center. It is ideal for presenting information that may require quick acknowledgment or action, such as system alerts, status changes, or reminders.\n \n - Use the `with-button` or `with-icon-button` types when an immediate action is available (e.g., \"Acknowledge\", \"Open\", or a quick icon action).\n * - Use the `simple` type for informational messages that do not require user action.\n * - Use the `inactive` type (or set `empty=true`) to indicate there are no current messages.\n * - For longer messages or additional context, use the `tall` size to provide more space for content.\n * - Avoid overloading the message item with excessive text; keep titles and descriptions concise for quick scanning.\n * - For persistent or multi-line alerts, consider using a banner or dialog component instead.\n \n ---\n \n ### Slots\n * \| Slot Name \| Renders When... \| Purpose \|\n * \|-------------------\|------------------------------------------------\|--------------------------------------------------------------\|\n * \| primary-icon \| Always (except inactive) \| Main icon representing the message type or status \|\n * \| secondary-icon \| If `hasSecondaryIcon` is true \| Additional icon for context or severity \|\n * \| title \| If `showTitle` is true \| Title or heading of the message \|\n * \| description \| If `showDescription` is true \| Detailed message text \|\n * \| time \| If `showTimestamp` is true \| Primary timestamp (e.g., time of event) \|\n * \| time-secondary \| If `hasTimestamp2` is true \| Secondary timestamp (e.g., duration, relative time) \|\n * \| action-text \| If type is `with-button` \| Label/content for the text action button \|\n * \| action-icon \| If type is `with-icon-button` \| Icon for the icon action button \|\n * \| empty \| If type is `inactive` or `empty` is true \| Content for the empty/inactive state \|\n \n ---\n \n ### Events\n * - `message-click` – Fired when the main message area is clicked.\n * - `action-click` – Fired when the action button (text or icon) is clicked.\n \n ---\n \n ### Best Practices & Constraints\n * - Only one action button (text or icon) should be used at a time to keep interactions simple.\n * - Use the `inactive` type or `empty=true` to clearly indicate when there are no messages.\n * - For accessibility, ensure that action buttons have clear labels or icons.\n * - Truncation is applied to long titles and descriptions; keep content concise for best results.\n * - Deprecated properties: Prefer using `type` and `size` over `large` and `empty`.\n \n ---\n \n Example:\n * ```html\n * <obc-topbar-message-item type=\"with-button\" size=\"regular\">\n * <obi-placeholder slot=\"primary-icon\"></obi-placeholder>\n * <obi-placeholder slot=\"secondary-icon\"></obi-placeholder>\n * <span slot=\"title\">System Update</span>\n * <span slot=\"description\">Update completed successfully.</span>\n * <span slot=\"time\">09:12:46</span>\n * <span slot=\"action-text\">View</span>\n * </obc-topbar-message-item>\n * ```\n \n @slot primary-icon - Main icon representing the message type or status.\n * @slot secondary-icon - Additional icon for context or severity (shown if `hasSecondaryIcon` is true).\n * @slot title - Title or heading of the message (shown if `showTitle` is true).\n * @slot description - Detailed message text (shown if `showDescription` is true).\n * @slot time - Primary timestamp (shown if `showTimestamp` is true).\n * @slot time-secondary - Secondary timestamp (shown if `hasTimestamp2` is true).\n * @slot action-text - Content for the text action button (shown if type is `with-button`).\n * @slot action-icon - Icon for the icon action button (shown if type is `with-icon-button`).\n * @slot empty - Content for the empty/inactive state (shown if type is `inactive` or `empty` is true).\n * @fires {CustomEvent<void>} message-click - Fired when the main message area is clicked.\n * @fires {CustomEvent<void>} action-click - Fired when the action button (text or icon) is clicked.\n * @stable\n /\n@customElement('obc-topbar-message-item')\nexport class ObcTopbarMessageItem extends LitElement {\n /\n Controls the visual and interactive type of the message item.\n \n - `simple`: No action button, just message content.\n * - `with-button`: Shows a text-based action button.\n * - `with-icon-button`: Shows an icon-based action button.\n * - `inactive`: Shows an empty/inactive state.\n \n Defaults to `with-button`.\n /\n @property({type: String}) type: ObcTopbarMessageItemType =\n ObcTopbarMessageItemType.WithButton;\n\n /\n Sets the vertical size of the message item.\n \n - `regular`: Standard compact height.\n * - `tall`: Expanded height for more content.\n \n Defaults to `regular`.\n /\n @property({type: String}) size: ObcTopbarMessageItemSize =\n ObcTopbarMessageItemSize.Regular;\n\n /\n Whether to show the title slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean, attribute: false}) showTitle: boolean = true;\n\n /\n Whether to show the description slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean, attribute: false}) showDescription: boolean = true;\n\n /\n Whether to show the primary timestamp slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean, attribute: false}) showTimestamp: boolean = true;\n\n /\n Whether to display the secondary timestamp slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean}) hasTimestamp2 = false;\n\n /\n Whether to display the secondary icon slot.\n * @availableWhen type!=Inactive\n /\n @property({type: Boolean}) hasSecondaryIcon = false;\n\n private onMessageClick() {\n /\n Fired when the main message area is clicked.\n \n @event message-click\n /\n this.dispatchEvent(new CustomEvent('message-click'));\n }\n\n private onActionClick() {\n /\n Fired when the action button (text or icon) is clicked.\n \n @event action-click\n */\n this.dispatchEvent(new CustomEvent('action-click'));\n }\n\n override render() {\n const isInactive = this.type === ObcTopbarMessageItemType.Inactive;\n const isLarge = this.size === ObcTopbarMessageItemSize.Tall;\n\n return html`\n <div\n class=${classMap({\n wrapper: true,\n empty: isInactive,\n large: isLarge,\n [`type-${this.type}`]: true,\n })}\n >\n ${isInactive\n ? html`<div class=\"empty-message\">\n <slot name=\"empty\">No active messages</slot>\n </div>`\n : html`\n <button class=\"message-item-touch\" @click=${this.onMessageClick}>\n <div class=\"message-item\">\n <div class=\"icon primary\">\n <slot name=\"primary-icon\"></slot>\n </div>\n <div class=\"content-container\">\n ${this.hasSecondaryIcon\n ? html`<div class=\"icon secondary\">\n <slot name=\"secondary-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"message-container ${isLarge ? 'large' : ''}\">\n <div class=\"title-container\">\n ${this.showTitle\n ? html`<div class=\"title\">\n <slot name=\"title\"></slot>\n </div>`\n : nothing}\n ${isLarge\n ? html`\n <div class=\"timestamp-container\">\n ${this.showTimestamp\n ? html`<div class=\"time\">\n <slot name=\"time\"></slot>\n </div>`\n : nothing}\n ${this.hasTimestamp2\n ? html`<div class=\"time\">\n <slot name=\"time-secondary\"></slot>\n </div>`\n : nothing}\n </div>\n `\n : nothing}\n </div>\n ${this.showDescription\n ? html`<div class=\"description\">\n <slot name=\"description\"></slot>\n </div>`\n : nothing}\n </div>\n </div>\n ${!isLarge\n ? html`\n <div class=\"timestamp-container\">\n ${this.showTimestamp\n ? html`<div class=\"time\">\n <slot name=\"time\"></slot>\n </div>`\n : nothing}\n ${this.hasTimestamp2\n ? html`<div class=\"time secondary\">\n <slot name=\"time-secondary\"></slot>\n </div>`\n : nothing}\n </div>\n `\n : nothing}\n </div>\n </button>\n ${this.type === ObcTopbarMessageItemType.WithButton\n ? html`\n <button\n class=\"action-wrapper action-text-button\"\n @click=${this.onActionClick}\n >\n <div class=\"action\">\n <slot name=\"action-text\"></slot>\n </div>\n </button>\n `\n : this.type === ObcTopbarMessageItemType.WithIconButton\n ? html`\n <button\n class=\"action-wrapper action-icon-button\"\n @click=${this.onActionClick}\n >\n <div class=\"action\">\n <slot name=\"action-icon\"></slot>\n </div>\n </button>\n `\n : nothing}\n `}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-topbar-message-item': ObcTopbarMessageItem;\n }\n}\n"],"names":["ObcTopbarMessageItemType","ObcTopbarMessageItemSize"],"mappings":"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"}

package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.d.ts CHANGED Viewed

@@ -89,7 +89,7 @@ export declare class ObcIntegrationDropdownButton extends LitElement {
     /**
      * Handles the change event when a new option is selected. Updates the selected value and label, and dispatches a `change` event with the new selection.
      *
-     * @fires {ObcIntegrationDropdownButtonChangeEvent} change - Fired when the user selects a different option.
+     * @fires change
      */
     private changeHandler;
     static styles: import('lit').CSSResult;

package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js CHANGED Viewed

@@ -100,7 +100,7 @@ let ObcIntegrationDropdownButton = class extends LitElement {
   /**
    * Handles the change event when a new option is selected. Updates the selected value and label, and dispatches a `change` event with the new selection.
    *
-   * @fires {ObcIntegrationDropdownButtonChangeEvent} change - Fired when the user selects a different option.
+   * @fires change
    */
   changeHandler(event) {
     const target = event.target;

package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"integration-dropdown-button.js","sources":["../../../src/integration-systems/integration-dropdown-button/integration-dropdown-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport compentStyle from './integration-dropdown-button.css?inline';\nimport '../../icons/icon-drop-down-google.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport type {HTMLTemplateResult} from 'lit';\nimport {ObcIntegrationButton} from '../integration-button/integration-button.js';\n\nexport type ObcIntegrationDropdownButtonChangeEvent = CustomEvent<{\n value: string;\n label: string;\n}>;\n\nexport type IntegrationDropdownOption = {\n value: string;\n label: string;\n status?: string;\n icon: HTMLTemplateResult;\n disabled?: boolean;\n};\n\n/*\n `obc-integration-dropdown-button` – A composite integration button with an attached select dropdown for choosing a single integration target or a dedicated fleet option.\n \n ### Overview\n * This component renders a button-like control paired with a native `<select>` element, allowing the user to choose between predefined integration options or an optional fleet-wide action.\n * It surfaces the currently selected option (or fleet state) in the visible button area while delegating the actual selection logic to the hidden select element.\n \n ### Features and variants\n * - Selectable options list: Accepts a list of options via the `options` property, each providing a `value`, `label`, and icon template for the visible button content.\n * - Fleet mode: When `hasFleet` is true, the dropdown prepends a special `fleet` option whose label and selection state are driven by `fleetLabel` and the fleet slot content.\n * - Layout controls: Supports `fullWidth` to stretch to the container width and `openTop` to render the dropdown above the button when space below is constrained.\n * - Disabled state: The `disabled` property disables user interaction and visually indicates that the control is not currently actionable.\n * - Placeholder label: When no value is selected, the component can display a placeholder text via the `placeholder` property.\n \n ### Slots and content\n * - `fleet` slot: Used when `hasFleet` is true to render the content for the fleet option inside the dropdown.\n * The assigned element is treated as an `ObcIntegrationButton` instance and its `selected` state is synchronized with the component's fleet selection.\n \n ### Events\n * - `change` (`ObcIntegrationDropdownButtonChangeEvent`): Fired when the user selects a new value from the dropdown.\n * The event detail contains the `value` and the resolved `label` (either the fleet label or the label of the selected option).\n \n ### Example\n * ```html\n * <obc-integration-dropdown-button\n * .options=${[\n * { value: 'integration-a', label: 'Integration A', icon: html`<obi-placeholder></obi-placeholder>` },\n * { value: 'integration-b', label: 'Integration B', icon: html`<obi-placeholder></obi-placeholder>` },\n * ]}\n * placeholder=\"Select integration\"\n * hasFleet\n * fleetLabel=\"All vessels\"\n * >\n * <obc-integration-button slot=\"fleet\" label=\"Fleet\"></obc-integration-button>\n * </obc-integration-dropdown-button>\n * ```\n \n @slot fleet - Fleet button displayed when `hasFleet` is true.\n * @fires {ObcIntegrationDropdownButtonChangeEvent} change - Fires when the value of the select changes\n * @experimental\n /\n@customElement('obc-integration-dropdown-button')\nexport class ObcIntegrationDropdownButton extends LitElement {\n /\n List of selectable options. Each option is an object with a `value` (string), `label` (string), `icon` (HTMLTemplateResult), and optional `disabled` (boolean).\n \n Example:\n * [\n * { value: 'volvo', label: 'Volvo', icon: html`<obi-ship></obi-ship>` },\n * { value: 'xc90', label: 'XC 90', icon: html`<obi-ship></obi-ship>` }\n * ]\n /\n @property({type: Array}) options: IntegrationDropdownOption[] = [];\n\n @property({type: Boolean}) hasFleet: boolean = false;\n @property({type: String}) fleetLabel: string = '';\n\n /\n The value of the currently selected option.\n /\n @property({type: String}) value: string \| undefined;\n @property({type: String}) placeholder: string = '';\n @property({type: Boolean}) disabled: boolean = false;\n\n /\n If true, the select expands to fill the width of its container. Default is false.\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n If true, the dropdown menu opens above the button.\n /\n @property({type: Boolean}) openTop = false;\n\n private get selectedItem():\n \| {value: string; label: string; icon: HTMLTemplateResult}\n \| undefined {\n if (this.options.length === 0) {\n return undefined;\n }\n return this.options.find((item) => item.value === this.value);\n }\n\n private get fleetSelected(): boolean {\n return this.value === 'fleet';\n }\n\n @queryAssignedElements({slot: 'fleet'})\n fleetItems!: Array<HTMLElement>;\n\n private updateSelectedFleetStatus(): void {\n this.fleetItems.forEach((item) => {\n const button = item as ObcIntegrationButton;\n button.selected = this.fleetSelected;\n });\n }\n\n protected override updated(_changedProperties: PropertyValues): void {\n super.updated(_changedProperties);\n this.updateSelectedFleetStatus();\n }\n\n private get renderButtonLabel(): HTMLTemplateResult {\n if (this.fleetSelected) {\n return html`<div class=\"label\">${this.fleetLabel}</div>`;\n }\n if (this.selectedItem) {\n return html`<div class=\"icon-container\">${this.selectedItem.icon}</div>\n <div class=\"label\">${this.selectedItem.label}</div>`;\n }\n return html`<div class=\"label placeholder\">${this.placeholder}</div>`;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n 'full-width': this.fullWidth,\n 'open-top': this.openTop,\n disabled: this.disabled,\n })}\n >\n <div class=\"visible-wrapper\">\n ${this.renderButtonLabel}\n <div class=\"icon\">\n <obi-drop-down-google></obi-drop-down-google>\n </div>\n </div>\n <select @change=${this.changeHandler} ?disabled=${this.disabled}>\n ${this.hasFleet\n ? html`\n <option\n value=\"fleet\"\n class=\"fleet-option\"\n ?selected=${this.fleetSelected}\n >\n <slot name=\"fleet\"></slot>\n </option>\n `\n : nothing}\n ${this.options.map((item) => {\n return html`<option\n value=${item.value}\n ?selected=${item.value === this.value}\n ?disabled=${item.disabled}\n >\n <div class=\"icon\">${item.icon}</div>\n <div class=\"text-container\">\n <div class=\"label\">${item.label}</div>\n ${item.status\n ? html`<div class=\"status\">${item.status}</div>`\n : nothing}\n </div>\n </option>`;\n })}\n </select>\n </div>\n `;\n }\n\n /\n Handles the change event when a new option is selected. Updates the selected value and label, and dispatches a `change` event with the new selection.\n \n @fires {ObcIntegrationDropdownButtonChangeEvent} change - Fired when the user selects a different option.\n */\n private changeHandler(event: Event) {\n const target = event.target as HTMLSelectElement;\n this.value = target.value;\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n value: this.value,\n label:\n this.value === 'fleet' ? this.fleetLabel : this.selectedItem?.label,\n },\n })\n );\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-dropdown-button': ObcIntegrationDropdownButton;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"integration-dropdown-button.js","sources":["../../../src/integration-systems/integration-dropdown-button/integration-dropdown-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport compentStyle from './integration-dropdown-button.css?inline';\nimport '../../icons/icon-drop-down-google.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport type {HTMLTemplateResult} from 'lit';\nimport {ObcIntegrationButton} from '../integration-button/integration-button.js';\n\nexport type ObcIntegrationDropdownButtonChangeEvent = CustomEvent<{\n value: string;\n label: string;\n}>;\n\nexport type IntegrationDropdownOption = {\n value: string;\n label: string;\n status?: string;\n icon: HTMLTemplateResult;\n disabled?: boolean;\n};\n\n/*\n `obc-integration-dropdown-button` – A composite integration button with an attached select dropdown for choosing a single integration target or a dedicated fleet option.\n \n ### Overview\n * This component renders a button-like control paired with a native `<select>` element, allowing the user to choose between predefined integration options or an optional fleet-wide action.\n * It surfaces the currently selected option (or fleet state) in the visible button area while delegating the actual selection logic to the hidden select element.\n \n ### Features and variants\n * - Selectable options list: Accepts a list of options via the `options` property, each providing a `value`, `label`, and icon template for the visible button content.\n * - Fleet mode: When `hasFleet` is true, the dropdown prepends a special `fleet` option whose label and selection state are driven by `fleetLabel` and the fleet slot content.\n * - Layout controls: Supports `fullWidth` to stretch to the container width and `openTop` to render the dropdown above the button when space below is constrained.\n * - Disabled state: The `disabled` property disables user interaction and visually indicates that the control is not currently actionable.\n * - Placeholder label: When no value is selected, the component can display a placeholder text via the `placeholder` property.\n \n ### Slots and content\n * - `fleet` slot: Used when `hasFleet` is true to render the content for the fleet option inside the dropdown.\n * The assigned element is treated as an `ObcIntegrationButton` instance and its `selected` state is synchronized with the component's fleet selection.\n \n ### Events\n * - `change` (`ObcIntegrationDropdownButtonChangeEvent`): Fired when the user selects a new value from the dropdown.\n * The event detail contains the `value` and the resolved `label` (either the fleet label or the label of the selected option).\n \n ### Example\n * ```html\n * <obc-integration-dropdown-button\n * .options=${[\n * { value: 'integration-a', label: 'Integration A', icon: html`<obi-placeholder></obi-placeholder>` },\n * { value: 'integration-b', label: 'Integration B', icon: html`<obi-placeholder></obi-placeholder>` },\n * ]}\n * placeholder=\"Select integration\"\n * hasFleet\n * fleetLabel=\"All vessels\"\n * >\n * <obc-integration-button slot=\"fleet\" label=\"Fleet\"></obc-integration-button>\n * </obc-integration-dropdown-button>\n * ```\n \n @slot fleet - Fleet button displayed when `hasFleet` is true.\n * @fires {ObcIntegrationDropdownButtonChangeEvent} change - Fires when the value of the select changes\n * @experimental\n /\n@customElement('obc-integration-dropdown-button')\nexport class ObcIntegrationDropdownButton extends LitElement {\n /\n List of selectable options. Each option is an object with a `value` (string), `label` (string), `icon` (HTMLTemplateResult), and optional `disabled` (boolean).\n \n Example:\n * [\n * { value: 'volvo', label: 'Volvo', icon: html`<obi-ship></obi-ship>` },\n * { value: 'xc90', label: 'XC 90', icon: html`<obi-ship></obi-ship>` }\n * ]\n /\n @property({type: Array}) options: IntegrationDropdownOption[] = [];\n\n @property({type: Boolean}) hasFleet: boolean = false;\n @property({type: String}) fleetLabel: string = '';\n\n /\n The value of the currently selected option.\n /\n @property({type: String}) value: string \| undefined;\n @property({type: String}) placeholder: string = '';\n @property({type: Boolean}) disabled: boolean = false;\n\n /\n If true, the select expands to fill the width of its container. Default is false.\n /\n @property({type: Boolean}) fullWidth = false;\n\n /\n If true, the dropdown menu opens above the button.\n /\n @property({type: Boolean}) openTop = false;\n\n private get selectedItem():\n \| {value: string; label: string; icon: HTMLTemplateResult}\n \| undefined {\n if (this.options.length === 0) {\n return undefined;\n }\n return this.options.find((item) => item.value === this.value);\n }\n\n private get fleetSelected(): boolean {\n return this.value === 'fleet';\n }\n\n @queryAssignedElements({slot: 'fleet'})\n fleetItems!: Array<HTMLElement>;\n\n private updateSelectedFleetStatus(): void {\n this.fleetItems.forEach((item) => {\n const button = item as ObcIntegrationButton;\n button.selected = this.fleetSelected;\n });\n }\n\n protected override updated(_changedProperties: PropertyValues): void {\n super.updated(_changedProperties);\n this.updateSelectedFleetStatus();\n }\n\n private get renderButtonLabel(): HTMLTemplateResult {\n if (this.fleetSelected) {\n return html`<div class=\"label\">${this.fleetLabel}</div>`;\n }\n if (this.selectedItem) {\n return html`<div class=\"icon-container\">${this.selectedItem.icon}</div>\n <div class=\"label\">${this.selectedItem.label}</div>`;\n }\n return html`<div class=\"label placeholder\">${this.placeholder}</div>`;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n 'full-width': this.fullWidth,\n 'open-top': this.openTop,\n disabled: this.disabled,\n })}\n >\n <div class=\"visible-wrapper\">\n ${this.renderButtonLabel}\n <div class=\"icon\">\n <obi-drop-down-google></obi-drop-down-google>\n </div>\n </div>\n <select @change=${this.changeHandler} ?disabled=${this.disabled}>\n ${this.hasFleet\n ? html`\n <option\n value=\"fleet\"\n class=\"fleet-option\"\n ?selected=${this.fleetSelected}\n >\n <slot name=\"fleet\"></slot>\n </option>\n `\n : nothing}\n ${this.options.map((item) => {\n return html`<option\n value=${item.value}\n ?selected=${item.value === this.value}\n ?disabled=${item.disabled}\n >\n <div class=\"icon\">${item.icon}</div>\n <div class=\"text-container\">\n <div class=\"label\">${item.label}</div>\n ${item.status\n ? html`<div class=\"status\">${item.status}</div>`\n : nothing}\n </div>\n </option>`;\n })}\n </select>\n </div>\n `;\n }\n\n /\n Handles the change event when a new option is selected. Updates the selected value and label, and dispatches a `change` event with the new selection.\n \n @fires change\n */\n private changeHandler(event: Event) {\n const target = event.target as HTMLSelectElement;\n this.value = target.value;\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {\n value: this.value,\n label:\n this.value === 'fleet' ? this.fleetLabel : this.selectedItem?.label,\n },\n })\n );\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-dropdown-button': ObcIntegrationDropdownButton;\n }\n}\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.117",
+  "version": "2.0.0-next.119",
   "type": "module",
   "repository": {
     "type": "git",
@@ -41,6 +41,8 @@
     "lint:icons": "tsx ./script/check-icon-hex-leaks.ts",
     "lint:eslint": "eslint 'src/**/*.ts'",
     "lint:lit-analyzer": "lit-analyzer --strict --maxWarnings 0",
+    "lint:fix:stories": "eslint 'src/**/*.stories.ts' --fix",
+    "test:rules": "vitest run --project rules",
     "fix-imports": "node fix-imports.mjs",
     "fix-imports:check": "node fix-imports.mjs --dry-run",
     "test:browser": "vitest --config=vitest.browser.config.ts",