@oicl/openbridge-webcomponents 2.0.0-next.120 → 2.0.0-next.121
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/openbridge-webcomponents.bundle.js +22 -14
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +1 -1
- package/dist/integration-systems/integration-button/integration-button.css.js +20 -13
- package/dist/integration-systems/integration-button/integration-button.css.js.map +1 -1
- package/dist/integration-systems/integration-button/integration-button.d.ts +1 -1
- package/dist/integration-systems/integration-button/integration-button.js +1 -1
- package/dist/integration-systems/integration-button/integration-button.js.map +1 -1
- package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js +1 -0
- package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js.map +1 -1
- package/package.json +4 -2
package/custom-elements.json
CHANGED
|
@@ -73262,7 +73262,7 @@
|
|
|
73262
73262
|
"name": "ObcIntegrationButton",
|
|
73263
73263
|
"slots": [
|
|
73264
73264
|
{
|
|
73265
|
-
"description": "Icon before label (shown when `hasLeadingIcon` is true)",
|
|
73265
|
+
"description": "Icon before label (shown when `hasLeadingIcon` is true); rendered at the large icon size when `hasStatus` is true",
|
|
73266
73266
|
"name": "leading-icon"
|
|
73267
73267
|
},
|
|
73268
73268
|
{
|
|
@@ -106,9 +106,13 @@ const compentStyle = css`* {
|
|
|
106
106
|
"liga" off,
|
|
107
107
|
"clig" off,
|
|
108
108
|
"ss04" on;
|
|
109
|
+
--leading-icon-size: var(
|
|
110
|
+
--app-components-integration-system-navigation-item-horizontal-icon-size
|
|
111
|
+
);
|
|
109
112
|
anchor-name: --touch-target;
|
|
110
113
|
display: flex;
|
|
111
114
|
align-items: center;
|
|
115
|
+
text-align: left;
|
|
112
116
|
gap: 4px;
|
|
113
117
|
flex: 1;
|
|
114
118
|
min-height: var(
|
|
@@ -263,22 +267,25 @@ const compentStyle = css`* {
|
|
|
263
267
|
color: var(--integration-on-normal-neutral-color);
|
|
264
268
|
}
|
|
265
269
|
|
|
266
|
-
.touch-target
|
|
267
|
-
|
|
268
|
-
--app-components-integration-system-navigation-item-horizontal-icon-size
|
|
269
|
-
);
|
|
270
|
-
height: var(
|
|
271
|
-
--app-components-integration-system-navigation-item-horizontal-icon-size
|
|
270
|
+
.touch-target.has-status {
|
|
271
|
+
--leading-icon-size: var(
|
|
272
|
+
--app-components-integration-system-navigation-item-horizontal-icon-size-large
|
|
272
273
|
);
|
|
273
|
-
min-width: var(
|
|
274
|
-
--app-components-integration-system-navigation-item-horizontal-icon-size
|
|
275
|
-
);
|
|
276
|
-
flex: 0 0
|
|
277
|
-
var(
|
|
278
|
-
--app-components-integration-system-navigation-item-horizontal-icon-size
|
|
279
|
-
);
|
|
280
274
|
}
|
|
281
275
|
|
|
276
|
+
.touch-target .icon.leading {
|
|
277
|
+
width: var(--leading-icon-size);
|
|
278
|
+
height: var(--leading-icon-size);
|
|
279
|
+
min-width: var(--leading-icon-size);
|
|
280
|
+
flex: 0 0 var(--leading-icon-size);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
:is(.touch-target .icon.leading) ::slotted(*) {
|
|
284
|
+
display: block;
|
|
285
|
+
width: 100%;
|
|
286
|
+
height: 100%;
|
|
287
|
+
}
|
|
288
|
+
|
|
282
289
|
.touch-target .icon.trailing {
|
|
283
290
|
width: 28px;
|
|
284
291
|
height: 24px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"integration-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"integration-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -16,7 +16,7 @@ export declare enum IntegrationButtonType {
|
|
|
16
16
|
/**
|
|
17
17
|
* `<obc-integration-button>` – A button component for integration systems.
|
|
18
18
|
*
|
|
19
|
-
* @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)
|
|
19
|
+
* @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true); rendered at the large icon size when `hasStatus` is true
|
|
20
20
|
* @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)
|
|
21
21
|
* @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)
|
|
22
22
|
* @slot label - Label text
|
|
@@ -46,7 +46,7 @@ let ObcIntegrationButton = class extends LitElement {
|
|
|
46
46
|
selected: this.selected,
|
|
47
47
|
activated: this.activated,
|
|
48
48
|
disabled: this.disabled,
|
|
49
|
-
"has-
|
|
49
|
+
"has-status": this.hasStatus,
|
|
50
50
|
["variant-" + this.variant]: true,
|
|
51
51
|
["type-" + this.type]: true
|
|
52
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"integration-button.js","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport interface IntegrationButtonReadout {\n label: string;\n value: string;\n unit: string;\n}\n\nexport enum IntegrationButtonVariant {\n normal = 'normal',\n flat = 'flat',\n}\n\nexport enum IntegrationButtonType {\n hug = 'hug',\n regular = 'regular',\n rich = 'rich',\n}\n\n/**\n * `<obc-integration-button>` – A button component for integration systems.\n *\n * @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true)\n * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)\n * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)\n * @slot label - Label text\n * @slot status - Status/description text (shown when `hasStatus` is true)\n * @slot info-label - Info label text\n * @slot info-status - Info status text\n * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state\n *\n * @fires click - Fired when the internal button is activated.\n *\n * @experimental\n */\n@customElement('obc-integration-button')\nexport class ObcIntegrationButton extends LitElement {\n /** Shows the `trailing-icon` slot. */\n @property({type: Boolean}) hasTrailingIcon = false;\n /**\n * Shows the `trailing-icon2` slot.\n * @availableWhen hasTrailingIcon==true\n */\n @property({type: Boolean}) hasTrailingIcon2 = false;\n /** Shows the `leading-icon` slot. */\n @property({type: Boolean}) hasLeadingIcon = false;\n /** Shows the `status` slot. */\n @property({type: Boolean}) hasStatus = false;\n /** List of readout items shown in the rich type. */\n @property({type: Array, attribute: false})\n readouts: IntegrationButtonReadout[] = [];\n /** Disables the internal button. */\n @property({type: Boolean}) disabled = false;\n /** Applies active state styling while a selection is pending. */\n @property({type: Boolean}) activated = false;\n /** Applies selected state styling. */\n @property({type: Boolean}) selected = false;\n /** Shows a bottom divider under the button. */\n @property({type: Boolean}) dividerBottom = false;\n /** Shows a right divider to separate from adjacent buttons. */\n @property({type: Boolean}) dividerRight = false;\n /** Visual variant (`normal` or `flat`). */\n @property({type: String}) variant: IntegrationButtonVariant =\n IntegrationButtonVariant.normal;\n /** Layout type (`hug`, `regular`, or `rich`). */\n @property({type: String}) type: IntegrationButtonType =\n IntegrationButtonType.regular;\n\n private getButtonClasses() {\n return {\n 'touch-target': true,\n selected: this.selected,\n activated: this.activated,\n disabled: this.disabled,\n 'has-description': this.hasStatus,\n ['variant-' + this.variant]: true,\n ['type-' + this.type]: true,\n };\n }\n\n private onIntegrationVesselMenuClick(event: Event) {\n event.stopPropagation();\n }\n\n renderRich() {\n return html`\n <div class=\"button-horizontal-divider-container\">\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n <div class=\"main-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\">\n <slot name=\"status\"></slot>\n </div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n <div class=\"info-container\">\n <div class=\"info-item\">\n <slot class=\"info-label\" name=\"info-label\"></slot>\n <slot class=\"info-status\" name=\"info-status\"></slot>\n </div>\n ${this.readouts.map(\n (readout) => html`\n <div class=\"info-readout-item\">\n <div class=\"info-item-label\">${readout.label}</div>\n <div class=\"info-item-value\">${readout.value}</div>\n <div class=\"info-item-unit\">${readout.unit}</div>\n </div>\n `\n )}\n </div>\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div\n class=\"divider-right\"\n style=\"visibility: hidden;\"\n ></div>`}\n </div>\n ${this.dividerBottom\n ? html`<div class=\"divider-bottom\"></div>`\n : nothing}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderRegular() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderHug() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n override render() {\n switch (this.type) {\n case IntegrationButtonType.hug: {\n return this.renderHug();\n }\n case IntegrationButtonType.rich: {\n return this.renderRich();\n }\n case IntegrationButtonType.regular:\n default: {\n return this.renderRegular();\n }\n }\n }\n\n static override styles = unsafeCSS(compentStyle);\n\n override updated() {\n let dividerHeight = 40;\n if (this.type === IntegrationButtonType.hug) {\n dividerHeight = 32;\n }\n if (this.type === IntegrationButtonType.rich) {\n dividerHeight = 64;\n }\n this.style.setProperty(\n '--integration-button-divider-height',\n `${dividerHeight}px`\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-button': ObcIntegrationButton;\n }\n}\n"],"names":["IntegrationButtonVariant","IntegrationButtonType"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"integration-button.js","sources":["../../../src/integration-systems/integration-button/integration-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport interface IntegrationButtonReadout {\n label: string;\n value: string;\n unit: string;\n}\n\nexport enum IntegrationButtonVariant {\n normal = 'normal',\n flat = 'flat',\n}\n\nexport enum IntegrationButtonType {\n hug = 'hug',\n regular = 'regular',\n rich = 'rich',\n}\n\n/**\n * `<obc-integration-button>` – A button component for integration systems.\n *\n * @slot leading-icon - Icon before label (shown when `hasLeadingIcon` is true); rendered at the large icon size when `hasStatus` is true\n * @slot trailing-icon - Icon after label (shown when `hasTrailingIcon` is true)\n * @slot trailing-icon2 - Icon after label (shown when `hasTrailingIcon2` is true)\n * @slot label - Label text\n * @slot status - Status/description text (shown when `hasStatus` is true)\n * @slot info-label - Info label text\n * @slot info-status - Info status text\n * @slot integration-vessel-menu - Integration vessel menu to be shown when button is in activated state\n *\n * @fires click - Fired when the internal button is activated.\n *\n * @experimental\n */\n@customElement('obc-integration-button')\nexport class ObcIntegrationButton extends LitElement {\n /** Shows the `trailing-icon` slot. */\n @property({type: Boolean}) hasTrailingIcon = false;\n /**\n * Shows the `trailing-icon2` slot.\n * @availableWhen hasTrailingIcon==true\n */\n @property({type: Boolean}) hasTrailingIcon2 = false;\n /** Shows the `leading-icon` slot. */\n @property({type: Boolean}) hasLeadingIcon = false;\n /** Shows the `status` slot. */\n @property({type: Boolean}) hasStatus = false;\n /** List of readout items shown in the rich type. */\n @property({type: Array, attribute: false})\n readouts: IntegrationButtonReadout[] = [];\n /** Disables the internal button. */\n @property({type: Boolean}) disabled = false;\n /** Applies active state styling while a selection is pending. */\n @property({type: Boolean}) activated = false;\n /** Applies selected state styling. */\n @property({type: Boolean}) selected = false;\n /** Shows a bottom divider under the button. */\n @property({type: Boolean}) dividerBottom = false;\n /** Shows a right divider to separate from adjacent buttons. */\n @property({type: Boolean}) dividerRight = false;\n /** Visual variant (`normal` or `flat`). */\n @property({type: String}) variant: IntegrationButtonVariant =\n IntegrationButtonVariant.normal;\n /** Layout type (`hug`, `regular`, or `rich`). */\n @property({type: String}) type: IntegrationButtonType =\n IntegrationButtonType.regular;\n\n private getButtonClasses() {\n return {\n 'touch-target': true,\n selected: this.selected,\n activated: this.activated,\n disabled: this.disabled,\n 'has-status': this.hasStatus,\n ['variant-' + this.variant]: true,\n ['type-' + this.type]: true,\n };\n }\n\n private onIntegrationVesselMenuClick(event: Event) {\n event.stopPropagation();\n }\n\n renderRich() {\n return html`\n <div class=\"button-horizontal-divider-container\">\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n <div class=\"main-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\">\n <slot name=\"status\"></slot>\n </div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n <div class=\"info-container\">\n <div class=\"info-item\">\n <slot class=\"info-label\" name=\"info-label\"></slot>\n <slot class=\"info-status\" name=\"info-status\"></slot>\n </div>\n ${this.readouts.map(\n (readout) => html`\n <div class=\"info-readout-item\">\n <div class=\"info-item-label\">${readout.label}</div>\n <div class=\"info-item-value\">${readout.value}</div>\n <div class=\"info-item-unit\">${readout.unit}</div>\n </div>\n `\n )}\n </div>\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div\n class=\"divider-right\"\n style=\"visibility: hidden;\"\n ></div>`}\n </div>\n ${this.dividerBottom\n ? html`<div class=\"divider-bottom\"></div>`\n : nothing}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderRegular() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n renderHug() {\n return html`\n <div class=\"button-vertical-divider-container\">\n <button\n class=${classMap(this.getButtonClasses())}\n ?disabled=${this.disabled}\n >\n <div class=\"content-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"icon leading\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"text-container\">\n <div class=\"label\"><slot name=\"label\"></slot></div>\n ${this.hasStatus\n ? html`<div class=\"status\"><slot name=\"status\"></slot></div>`\n : nothing}\n </div>\n ${this.hasTrailingIcon\n ? html`<div class=\"icon-container\">\n ${this.hasTrailingIcon2\n ? html`<slot\n name=\"trailing-icon2\"\n class=\"icon trailing\"\n ></slot>`\n : nothing}\n <slot name=\"trailing-icon\" class=\"icon trailing\"></slot>\n </div>`\n : nothing}\n </div>\n </button>\n ${this.dividerRight\n ? html`<div class=\"divider-right\"></div>`\n : html`<div class=\"divider-right\" style=\"visibility: hidden;\"></div>`}\n </div>\n <div\n class=${classMap({\n 'integration-vessel-menu-container': true,\n show: this.activated,\n })}\n @click=${this.onIntegrationVesselMenuClick}\n >\n <slot name=\"integration-vessel-menu\"></slot>\n </div>\n `;\n }\n\n override render() {\n switch (this.type) {\n case IntegrationButtonType.hug: {\n return this.renderHug();\n }\n case IntegrationButtonType.rich: {\n return this.renderRich();\n }\n case IntegrationButtonType.regular:\n default: {\n return this.renderRegular();\n }\n }\n }\n\n static override styles = unsafeCSS(compentStyle);\n\n override updated() {\n let dividerHeight = 40;\n if (this.type === IntegrationButtonType.hug) {\n dividerHeight = 32;\n }\n if (this.type === IntegrationButtonType.rich) {\n dividerHeight = 64;\n }\n this.style.setProperty(\n '--integration-button-divider-height',\n `${dividerHeight}px`\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-integration-button': ObcIntegrationButton;\n }\n}\n"],"names":["IntegrationButtonVariant","IntegrationButtonType"],"mappings":"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"}
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oicl/openbridge-webcomponents",
|
|
3
|
-
"version": "2.0.0-next.
|
|
3
|
+
"version": "2.0.0-next.121",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -34,7 +34,9 @@
|
|
|
34
34
|
"typecheck": "tsc --noEmit",
|
|
35
35
|
"format": "prettier \"**/*.{cjs,html,js,json,md,ts,css}\" --write",
|
|
36
36
|
"format:check": "prettier \"**/*.{cjs,html,js,json,md,ts,css}\" --check",
|
|
37
|
-
"lint": "npm run lint:mixins && npm run lint:variables && npm run lint:icons && npm run lint:slots && npm run lint:lit-analyzer && npm run lint:eslint",
|
|
37
|
+
"lint": "npm run lint:mixins && npm run lint:variables && npm run lint:icons && npm run lint:slots && npm run lint:agents && npm run lint:lit-analyzer && npm run lint:eslint",
|
|
38
|
+
"agents:sync": "tsx ./script/sync-agent-docs.ts",
|
|
39
|
+
"lint:agents": "tsx ./script/sync-agent-docs.ts --check",
|
|
38
40
|
"lint:mixins": "tsx ./script/check-css-mixins.ts",
|
|
39
41
|
"lint:slots": "tsx ./script/check-slot-event-docs.ts",
|
|
40
42
|
"lint:variables": "tsx ./script/check-css-variables.ts",
|