@oicl/openbridge-webcomponents 0.0.20260325093621 → 0.0.20260326144449
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/progress-bar/progress-bar.css.js +10 -9
- package/dist/components/progress-bar/progress-bar.css.js.map +1 -1
- package/dist/components/progress-button/progress-button.css.js +20 -4
- package/dist/components/progress-button/progress-button.css.js.map +1 -1
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.d.ts +3 -1
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.d.ts.map +1 -1
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js +15 -8
- package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.js.map +1 -1
- package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js +53 -1
- package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js.map +1 -1
- package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.d.ts +1 -0
- package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.d.ts.map +1 -1
- package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js +4 -1
- package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js.map +1 -1
- package/package.json +1 -1
|
@@ -161,8 +161,8 @@ const componentStyle = css`
|
|
|
161
161
|
|
|
162
162
|
.circular-wrapper {
|
|
163
163
|
position: relative;
|
|
164
|
-
width:
|
|
165
|
-
height:
|
|
164
|
+
width: var(--global-size-spacing-touch-target-min);
|
|
165
|
+
height: var(--global-size-spacing-touch-target-min);
|
|
166
166
|
display: inline-block;
|
|
167
167
|
}
|
|
168
168
|
|
|
@@ -170,8 +170,8 @@ obc-circular-progress {
|
|
|
170
170
|
position: absolute;
|
|
171
171
|
top: 0;
|
|
172
172
|
left: 0;
|
|
173
|
-
width:
|
|
174
|
-
height:
|
|
173
|
+
width: 100%;
|
|
174
|
+
height: 100%;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
.circular-content {
|
|
@@ -219,14 +219,15 @@ obc-circular-progress {
|
|
|
219
219
|
display: flex;
|
|
220
220
|
align-items: center;
|
|
221
221
|
justify-content: center;
|
|
222
|
-
width:
|
|
223
|
-
height:
|
|
222
|
+
width: var(--global-size-spacing-icon-icon-size-regular);
|
|
223
|
+
height: var(--global-size-spacing-icon-icon-size-regular);
|
|
224
224
|
color: var(--element-active-color);
|
|
225
225
|
}
|
|
226
226
|
|
|
227
|
-
.circular-icon-container ::slotted(*)
|
|
228
|
-
|
|
229
|
-
|
|
227
|
+
.circular-icon-container ::slotted(*),
|
|
228
|
+
.circular-icon-container obi-placeholder {
|
|
229
|
+
width: var(--global-size-spacing-icon-icon-size-regular);
|
|
230
|
+
height: var(--global-size-spacing-icon-icon-size-regular);
|
|
230
231
|
}
|
|
231
232
|
`;
|
|
232
233
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"progress-bar.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -491,16 +491,32 @@ const componentStyle = css`
|
|
|
491
491
|
|
|
492
492
|
obc-circular-progress {
|
|
493
493
|
position: absolute;
|
|
494
|
-
width:
|
|
495
|
-
|
|
494
|
+
width: calc(
|
|
495
|
+
var(--ui-components-icon-button-visual-target-size) +
|
|
496
|
+
var(--ui-components-progressbars-progress-button--circular-bar-weight) *
|
|
497
|
+
2 + 2px
|
|
498
|
+
);
|
|
499
|
+
height: calc(
|
|
500
|
+
var(--ui-components-icon-button-visual-target-size) +
|
|
501
|
+
var(--ui-components-progressbars-progress-button--circular-bar-weight) *
|
|
502
|
+
2 + 2px
|
|
503
|
+
);
|
|
496
504
|
pointer-events: none;
|
|
497
505
|
z-index: 1;
|
|
498
506
|
}
|
|
499
507
|
|
|
500
508
|
.circular-alert-svg {
|
|
501
509
|
position: absolute;
|
|
502
|
-
width:
|
|
503
|
-
|
|
510
|
+
width: calc(
|
|
511
|
+
var(--ui-components-icon-button-visual-target-size) +
|
|
512
|
+
var(--ui-components-progressbars-progress-button--circular-bar-weight) *
|
|
513
|
+
2 + 2px
|
|
514
|
+
);
|
|
515
|
+
height: calc(
|
|
516
|
+
var(--ui-components-icon-button-visual-target-size) +
|
|
517
|
+
var(--ui-components-progressbars-progress-button--circular-bar-weight) *
|
|
518
|
+
2 + 2px
|
|
519
|
+
);
|
|
504
520
|
pointer-events: none;
|
|
505
521
|
z-index: 1;
|
|
506
522
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"progress-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,7 +9,7 @@ import '../../icons/icon-notification.js';
|
|
|
9
9
|
import '../../icons/icon-home.js';
|
|
10
10
|
/**
|
|
11
11
|
*
|
|
12
|
-
* @fires home-button-
|
|
12
|
+
* @fires home-button-clicked - Fired when the home button is clicked
|
|
13
13
|
* @fires dimming-button-clicked - Fired when the dimming button is clicked
|
|
14
14
|
* @fires notification-button-clicked - Firaed when the notification button is clicked
|
|
15
15
|
* @fires user-button-clicked - Fired when the user button is clicked
|
|
@@ -30,6 +30,8 @@ export declare class ObcIntegrationBarDropdown extends LitElement {
|
|
|
30
30
|
showClock: boolean;
|
|
31
31
|
showNotificationButton: boolean;
|
|
32
32
|
notificationButtonActivated: boolean;
|
|
33
|
+
notificationCount: number;
|
|
34
|
+
showNotificationCount: boolean;
|
|
33
35
|
showUserButton: boolean;
|
|
34
36
|
userButtonActivated: boolean;
|
|
35
37
|
showDimmingButton: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"integration-bar-dropdown.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,6CAA6C,CAAC;AACrD,OAAO,2CAA2C,CAAC;AACnD,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"integration-bar-dropdown.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,yCAAyC,CAAC;AACjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,6CAA6C,CAAC;AACrD,OAAO,2CAA2C,CAAC;AACnD,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAIlC;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,SAAS,UAAS;IAClB,sBAAsB,UAAS;IAC/B,2BAA2B,UAAS;IACrC,iBAAiB,SAAK;IACrB,qBAAqB,UAAS;IAC9B,cAAc,UAAS;IACvB,mBAAmB,UAAS;IAC5B,iBAAiB,UAAS;IAC1B,sBAAsB,UAAS;IAC/B,gBAAgB,UAAS;IACzB,qBAAqB,UAAS;IAC/B,aAAa,SAAK;IAE5C,OAAO,CAAC,kBAAkB;IAmBjB,MAAM;IA0Ef,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}
|
|
@@ -9,6 +9,7 @@ import "../../icons/icon-user.js";
|
|
|
9
9
|
import "../../icons/icon-configure.js";
|
|
10
10
|
import "../../icons/icon-notification.js";
|
|
11
11
|
import "../../icons/icon-home.js";
|
|
12
|
+
import { NotificationButtonStyle } from "../../components/notification-button/notification-button.js";
|
|
12
13
|
import { property } from "lit/decorators.js";
|
|
13
14
|
var __defProp = Object.defineProperty;
|
|
14
15
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -28,6 +29,8 @@ let ObcIntegrationBarDropdown = class extends LitElement {
|
|
|
28
29
|
this.showClock = false;
|
|
29
30
|
this.showNotificationButton = false;
|
|
30
31
|
this.notificationButtonActivated = false;
|
|
32
|
+
this.notificationCount = 0;
|
|
33
|
+
this.showNotificationCount = false;
|
|
31
34
|
this.showUserButton = false;
|
|
32
35
|
this.userButtonActivated = false;
|
|
33
36
|
this.showDimmingButton = false;
|
|
@@ -71,17 +74,15 @@ let ObcIntegrationBarDropdown = class extends LitElement {
|
|
|
71
74
|
${this.renderStatusFields()}
|
|
72
75
|
</div>
|
|
73
76
|
<div class="right-side">
|
|
74
|
-
${this.showNotificationButton ? html`<obc-
|
|
75
|
-
class="notification-button"
|
|
76
|
-
part="notification-button"
|
|
77
|
-
variant="integration"
|
|
77
|
+
${this.showNotificationButton ? html`<obc-notification-button
|
|
78
78
|
@click=${() => this.dispatchEvent(
|
|
79
79
|
new CustomEvent("notification-button-clicked")
|
|
80
80
|
)}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
.buttonStyle=${NotificationButtonStyle.Enhanced}
|
|
82
|
+
.showCount=${this.showNotificationCount}
|
|
83
|
+
.count=${this.notificationCount}
|
|
84
|
+
?isActive=${this.notificationButtonActivated}
|
|
85
|
+
></obc-notification-button>` : nothing}
|
|
85
86
|
${this.showSystemButton ? html`<obc-icon-button
|
|
86
87
|
class="system-button"
|
|
87
88
|
part="system-button"
|
|
@@ -131,6 +132,12 @@ __decorateClass([
|
|
|
131
132
|
__decorateClass([
|
|
132
133
|
property({ type: Boolean })
|
|
133
134
|
], ObcIntegrationBarDropdown.prototype, "notificationButtonActivated", 2);
|
|
135
|
+
__decorateClass([
|
|
136
|
+
property({ type: Number })
|
|
137
|
+
], ObcIntegrationBarDropdown.prototype, "notificationCount", 2);
|
|
138
|
+
__decorateClass([
|
|
139
|
+
property({ type: Boolean })
|
|
140
|
+
], ObcIntegrationBarDropdown.prototype, "showNotificationCount", 2);
|
|
134
141
|
__decorateClass([
|
|
135
142
|
property({ type: Boolean })
|
|
136
143
|
], ObcIntegrationBarDropdown.prototype, "showUserButton", 2);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"integration-bar-dropdown.js","sources":["../../../src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-bar-dropdown.css?inline';\nimport '../integration-tabs/integration-tabs.js';\nimport '../../components/clock/clock.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-user.js';\nimport '../../icons/icon-configure.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-home.js';\nimport {property} from 'lit/decorators.js';\n\n/**\n *\n * @fires home-button-
|
|
1
|
+
{"version":3,"file":"integration-bar-dropdown.js","sources":["../../../src/integration-systems/integration-bar-dropdown/integration-bar-dropdown.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-bar-dropdown.css?inline';\nimport '../integration-tabs/integration-tabs.js';\nimport '../../components/clock/clock.js';\nimport '../../components/icon-button/icon-button.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-user.js';\nimport '../../icons/icon-configure.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-home.js';\nimport {NotificationButtonStyle} from '../../components/notification-button/notification-button.js';\nimport {property} from 'lit/decorators.js';\n\n/**\n *\n * @fires home-button-clicked - Fired when the home button is clicked\n * @fires dimming-button-clicked - Fired when the dimming button is clicked\n * @fires notification-button-clicked - Firaed when the notification button is clicked\n * @fires user-button-clicked - Fired when the user button is clicked\n * @fires system-button-clicked - Fired when the system button is clicked\n *\n * @slot vessel-selector\n * @slot status-label-1\n * @slot status-icon-1\n * @slot status-label-2\n * @slot status-icon-2\n * @slot status-label-3\n * @slot status-icon-3\n * @slot clock\n */\n@customElement('obc-integration-bar-dropdown')\nexport class ObcIntegrationBarDropdown extends LitElement {\n @property({type: Boolean}) showHomeButton = false;\n @property({type: Boolean}) homeButtonActivated = false;\n @property({type: Boolean}) showClock = false;\n @property({type: Boolean}) showNotificationButton = false;\n @property({type: Boolean}) notificationButtonActivated = false;\n @property({type: Number}) notificationCount = 0;\n @property({type: Boolean}) showNotificationCount = false;\n @property({type: Boolean}) showUserButton = false;\n @property({type: Boolean}) userButtonActivated = false;\n @property({type: Boolean}) showDimmingButton = false;\n @property({type: Boolean}) dimmingButtonActivated = false;\n @property({type: Boolean}) showSystemButton = false;\n @property({type: Boolean}) systemButtonActivated = false;\n @property({type: Number}) nStatusFields = 0;\n\n private renderStatusFields() {\n if (this.nStatusFields <= 0) {\n return nothing;\n }\n const result = [];\n for (let i = 0; i < this.nStatusFields; i++) {\n if (i > 0) {\n result.push(html`<div class=\"divider\"></div>`);\n }\n result.push(html`\n <div class=\"status-item\">\n <slot class=\"status-icon\" name=\"status-icon-${i + 1}\"></slot>\n <slot class=\"status-label\" name=\"status-label-${i + 1}\"></slot>\n </div>\n `);\n }\n return html`<div class=\"status\">${result}</div>`;\n }\n\n override render() {\n return html`\n <div class=\"wrapper\">\n <div class=\"left-side\">\n ${this.showHomeButton\n ? html`<obc-icon-button\n class=\"home-button\"\n part=\"home-button\"\n variant=\"integration\"\n @click=${() =>\n this.dispatchEvent(new CustomEvent('home-button-clicked'))}\n ?activated=${this.homeButtonActivated}\n >\n <obi-home></obi-home>\n </obc-icon-button>`\n : null}\n <slot name=\"vessel-selector\"></slot>\n ${this.renderStatusFields()}\n </div>\n <div class=\"right-side\">\n ${this.showNotificationButton\n ? html`<obc-notification-button\n @click=${() =>\n this.dispatchEvent(\n new CustomEvent('notification-button-clicked')\n )}\n .buttonStyle=${NotificationButtonStyle.Enhanced}\n .showCount=${this.showNotificationCount}\n .count=${this.notificationCount}\n ?isActive=${this.notificationButtonActivated}\n ></obc-notification-button>`\n : nothing}\n ${this.showSystemButton\n ? html`<obc-icon-button\n class=\"system-button\"\n part=\"system-button\"\n variant=\"integration\"\n @click=${() =>\n this.dispatchEvent(new CustomEvent('system-button-clicked'))}\n ?activated=${this.systemButtonActivated}\n >\n <obi-configure></obi-configure>\n </obc-icon-button>`\n : null}\n ${this.showDimmingButton\n ? html`<obc-icon-button\n class=\"dimming-button\"\n part=\"dimming-button\"\n variant=\"integration\"\n @click=${() =>\n this.dispatchEvent(new CustomEvent('dimming-button-clicked'))}\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\n ? html`<obc-icon-button\n class=\"user-button\"\n part=\"user-button\"\n variant=\"integration\"\n @click=${() =>\n this.dispatchEvent(new CustomEvent('user-button-clicked'))}\n ?activated=${this.userButtonActivated}\n >\n <obi-user></obi-user>\n </obc-icon-button>`\n : null}\n ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-bar-dropdown': ObcIntegrationBarDropdown;\n }\n}\n"],"names":[],"mappings":"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"}
|
package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js
CHANGED
|
@@ -264,13 +264,40 @@ const compentStyle = css`
|
|
|
264
264
|
"clig" off,
|
|
265
265
|
"ss04" on;
|
|
266
266
|
color: var(--integration-on-flat-active-color);
|
|
267
|
-
|
|
267
|
+
|
|
268
|
+
display: flex;
|
|
269
|
+
flex-direction: row;
|
|
270
|
+
align-items: center;
|
|
268
271
|
}
|
|
269
272
|
|
|
270
273
|
:is(.wrapper option:not(.fleet-option)) .icon {
|
|
271
274
|
color: var(--integration-on-flat-neutral-color);
|
|
272
275
|
}
|
|
273
276
|
|
|
277
|
+
:is(.wrapper option:not(.fleet-option)) .text-container {
|
|
278
|
+
display: flex;
|
|
279
|
+
flex-direction: column;
|
|
280
|
+
align-items: flex-start;
|
|
281
|
+
flex-grow: 1;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
:is(.wrapper option:not(.fleet-option)) .text-container .label {
|
|
285
|
+
padding-left: 0;
|
|
286
|
+
padding-right: 0;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
:is(.wrapper option:not(.fleet-option)) .status {
|
|
290
|
+
font-family: var(--font-family-main);
|
|
291
|
+
font-weight: var(--font-weight-regular);
|
|
292
|
+
font-size: var(--global-typography-ui-label-font-size);
|
|
293
|
+
line-height: var(--global-typography-ui-label-line-height);
|
|
294
|
+
font-feature-settings:
|
|
295
|
+
"liga" off,
|
|
296
|
+
"clig" off,
|
|
297
|
+
"ss04" on;
|
|
298
|
+
color: var(--integration-on-flat-neutral-color);
|
|
299
|
+
}
|
|
300
|
+
|
|
274
301
|
:is(.wrapper option:not(.fleet-option)):disabled {
|
|
275
302
|
color: var(--integration-on-flat-disabled-color);
|
|
276
303
|
}
|
|
@@ -279,6 +306,10 @@ const compentStyle = css`
|
|
|
279
306
|
color: var(--integration-on-flat-disabled-color);
|
|
280
307
|
}
|
|
281
308
|
|
|
309
|
+
:is(.wrapper option:not(.fleet-option)):disabled .status {
|
|
310
|
+
color: var(--integration-on-flat-disabled-color);
|
|
311
|
+
}
|
|
312
|
+
|
|
282
313
|
:is(.wrapper option:not(.fleet-option)):checked {
|
|
283
314
|
border-color: var(--integration-selected-enabled-border-color);
|
|
284
315
|
background-color: var(--integration-selected-enabled-background-color);
|
|
@@ -351,6 +382,23 @@ const compentStyle = css`
|
|
|
351
382
|
color: var(--integration-on-selected-active-color);
|
|
352
383
|
}
|
|
353
384
|
|
|
385
|
+
:is(.wrapper option:not(.fleet-option)):checked .label {
|
|
386
|
+
color: var(--integration-on-selected-active-color);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
:is(.wrapper option:not(.fleet-option)):checked .status {
|
|
390
|
+
/* Keep status typography, but swap to the selected neutral color. */
|
|
391
|
+
font-family: var(--font-family-main);
|
|
392
|
+
font-weight: var(--font-weight-regular);
|
|
393
|
+
font-size: var(--global-typography-ui-label-font-size);
|
|
394
|
+
line-height: var(--global-typography-ui-label-line-height);
|
|
395
|
+
font-feature-settings:
|
|
396
|
+
"liga" off,
|
|
397
|
+
"clig" off,
|
|
398
|
+
"ss04" on;
|
|
399
|
+
color: var(--integration-on-selected-neutral-color);
|
|
400
|
+
}
|
|
401
|
+
|
|
354
402
|
:is(.wrapper option:not(.fleet-option)):checked:disabled {
|
|
355
403
|
color: var(--integration-on-selected-disabled-color);
|
|
356
404
|
}
|
|
@@ -359,6 +407,10 @@ const compentStyle = css`
|
|
|
359
407
|
color: var(--integration-on-selected-disabled-color);
|
|
360
408
|
}
|
|
361
409
|
|
|
410
|
+
:is(.wrapper option:not(.fleet-option)):checked:disabled .status {
|
|
411
|
+
color: var(--integration-on-selected-disabled-color);
|
|
412
|
+
}
|
|
413
|
+
|
|
362
414
|
:is(.wrapper option:not(.fleet-option))::checkmark {
|
|
363
415
|
display: none;
|
|
364
416
|
}
|
package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"integration-dropdown-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"integration-dropdown-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"integration-dropdown-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-dropdown-button/integration-dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzE,OAAO,sCAAsC,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,uCAAuC,GAAG,WAAW,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC1D;;;;;;;;OAQG;IACsB,OAAO,EAAE;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,kBAAkB,CAAC;QACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,EAAE,CAAM;IAEkB,QAAQ,EAAE,OAAO,CAAS;IAC3B,UAAU,EAAE,MAAM,CAAM;IAElD;;OAEG;IACuB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAM;IACxB,QAAQ,EAAE,OAAO,CAAS;IAErD;;OAEG;IACwB,SAAS,UAAS;IAE7C;;OAEG;IACwB,OAAO,UAAS;IAE3C,OAAO,KAAK,YAAY,GAOvB;IAED,OAAO,KAAK,aAAa,GAExB;IAGD,UAAU,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEhC,OAAO,CAAC,yBAAyB;cAOd,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKpE,OAAO,KAAK,iBAAiB,GAS5B;IAEQ,MAAM;
|
|
1
|
+
{"version":3,"file":"integration-dropdown-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-dropdown-button/integration-dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzE,OAAO,sCAAsC,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,uCAAuC,GAAG,WAAW,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC1D;;;;;;;;OAQG;IACsB,OAAO,EAAE;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,kBAAkB,CAAC;QACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,EAAE,CAAM;IAEkB,QAAQ,EAAE,OAAO,CAAS;IAC3B,UAAU,EAAE,MAAM,CAAM;IAElD;;OAEG;IACuB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAM;IACxB,QAAQ,EAAE,OAAO,CAAS;IAErD;;OAEG;IACwB,SAAS,UAAS;IAE7C;;OAEG;IACwB,OAAO,UAAS;IAE3C,OAAO,KAAK,YAAY,GAOvB;IAED,OAAO,KAAK,aAAa,GAExB;IAGD,UAAU,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAEhC,OAAO,CAAC,yBAAyB;cAOd,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKpE,OAAO,KAAK,iBAAiB,GAS5B;IAEQ,MAAM;IAgDf;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAcrB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,4BAA4B,CAAC;KACjE;CACF"}
|
|
@@ -87,7 +87,10 @@ let ObcIntegrationDropdownButton = class extends LitElement {
|
|
|
87
87
|
?disabled=${item.disabled}
|
|
88
88
|
>
|
|
89
89
|
<div class="icon">${item.icon}</div>
|
|
90
|
-
<div class="
|
|
90
|
+
<div class="text-container">
|
|
91
|
+
<div class="label">${item.label}</div>
|
|
92
|
+
${item.status ? html`<div class="status">${item.status}</div>` : nothing}
|
|
93
|
+
</div>
|
|
91
94
|
</option>`;
|
|
92
95
|
})}
|
|
93
96
|
</select>
|
package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.js.map
CHANGED
|
@@ -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\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 change {ObcIntegrationDropdownButtonChangeEvent} - Fires when the value of the select changes\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: {\n value: string;\n label: string;\n icon: HTMLTemplateResult;\n disabled?: boolean;\n }[] = [];\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=\"label\">${item.label}</div>\n </option>`;\n })}\n </select>\n </div>\n `;\n }\n\n /**\n * Handles the dropdown-change and change event when a new option is selected. Updates the selected value and label, and dispatches a `dropdown-change` and 'change' event with the new selection.\n *\n * @fires dropdown-change {ObcIntegrationDropdownButtonChangeEvent} - Fired when the user selects a different option.\n * @fires change {ObcIntegrationDropdownButtonChangeEvent} - 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\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 change {ObcIntegrationDropdownButtonChangeEvent} - Fires when the value of the select changes\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: {\n value: string;\n label: string;\n status?: string;\n icon: HTMLTemplateResult;\n disabled?: boolean;\n }[] = [];\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 dropdown-change and change event when a new option is selected. Updates the selected value and label, and dispatches a `dropdown-change` and 'change' event with the new selection.\n *\n * @fires dropdown-change {ObcIntegrationDropdownButtonChangeEvent} - Fired when the user selects a different option.\n * @fires change {ObcIntegrationDropdownButtonChangeEvent} - 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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"}
|