@oicl/openbridge-webcomponents 0.0.7 → 0.0.8
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/.storybook/main.ts +2 -0
- package/.storybook/preview.ts +11 -0
- package/.vscode/launch.json +16 -0
- package/README.md +8 -0
- package/__snapshots__/alert-icon--primary.png +0 -0
- package/__snapshots__/application-alert-button--notification.png +0 -0
- package/__snapshots__/application-alert-button--running.png +0 -0
- package/__snapshots__/application-notification-message--large-single-message.png +0 -0
- package/__snapshots__/application-notification-message--large.png +0 -0
- package/__snapshots__/application-notification-message--primary.png +0 -0
- package/__snapshots__/button-rich-button--bottom-with-boarder.png +0 -0
- package/__snapshots__/button-rich-button--bottom.png +0 -0
- package/__snapshots__/button-rich-button--center.png +0 -0
- package/__snapshots__/button-rich-button--double-line.png +0 -0
- package/__snapshots__/button-rich-button--multi-line.png +0 -0
- package/__snapshots__/button-rich-button--regular-no-icons.png +0 -0
- package/__snapshots__/button-rich-button--regular.png +0 -0
- package/__snapshots__/button-rich-button--single-line.png +0 -0
- package/__snapshots__/button-rich-button--top-with-boarder.png +0 -0
- package/__snapshots__/button-rich-button--top.png +0 -0
- package/__snapshots__/button-rich-button--with-graphic-border.png +0 -0
- package/__snapshots__/button-rich-button--with-graphic.png +0 -0
- package/__snapshots__/button-rich-button--with-status.png +0 -0
- package/__snapshots__/button-vendor-button--primary.png +0 -0
- package/__snapshots__/icons-icon--list.png +0 -0
- package/__snapshots__/icons-icon--use-font-color.png +0 -0
- package/custom-elements.json +2331 -745
- package/dist/components/alert-button/alert-button.css.js +4 -12
- package/dist/components/alert-button/alert-button.css.js.map +1 -1
- package/dist/components/alert-button/alert-button.d.ts +11 -1
- package/dist/components/alert-button/alert-button.d.ts.map +1 -1
- package/dist/components/alert-button/alert-button.js +21 -1
- package/dist/components/alert-button/alert-button.js.map +1 -1
- package/dist/components/alert-icon/alert-icon.d.ts +36 -0
- package/dist/components/alert-icon/alert-icon.d.ts.map +1 -0
- package/dist/components/alert-icon/alert-icon.js +84 -0
- package/dist/components/alert-icon/alert-icon.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-silenced-a.d.ts +2 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-silenced-a.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-silenced-a.js +13 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-silenced-a.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-silenced-b.d.ts +2 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-silenced-b.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-silenced-b.js +20 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-silenced-b.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-unack-a.d.ts +2 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-unack-a.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-unack-a.js +12 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-unack-a.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-unack-b.d.ts +2 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-unack-b.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-unack-b.js +19 -0
- package/dist/components/alert-icon/icons/icon-14-alarm-unack-b.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-warning-unack-a.d.ts +2 -0
- package/dist/components/alert-icon/icons/icon-14-warning-unack-a.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-warning-unack-a.js +12 -0
- package/dist/components/alert-icon/icons/icon-14-warning-unack-a.js.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-warning-unack-b.d.ts +2 -0
- package/dist/components/alert-icon/icons/icon-14-warning-unack-b.d.ts.map +1 -0
- package/dist/components/alert-icon/icons/icon-14-warning-unack-b.js +12 -0
- package/dist/components/alert-icon/icons/icon-14-warning-unack-b.js.map +1 -0
- package/dist/components/alert-topbar-element/alert-topbar-element.d.ts +13 -0
- package/dist/components/alert-topbar-element/alert-topbar-element.d.ts.map +1 -1
- package/dist/components/alert-topbar-element/alert-topbar-element.js +10 -0
- package/dist/components/alert-topbar-element/alert-topbar-element.js.map +1 -1
- package/dist/components/rich-button/rich-button.css.js +182 -0
- package/dist/components/rich-button/rich-button.css.js.map +1 -0
- package/dist/components/rich-button/rich-button.d.ts +32 -0
- package/dist/components/rich-button/rich-button.d.ts.map +1 -0
- package/dist/components/rich-button/rich-button.js +113 -0
- package/dist/components/rich-button/rich-button.js.map +1 -0
- package/dist/components/vendor-button/vendor-button.css.js +48 -0
- package/dist/components/vendor-button/vendor-button.css.js.map +1 -0
- package/dist/components/vendor-button/vendor-button.d.ts +13 -0
- package/dist/components/vendor-button/vendor-button.d.ts.map +1 -0
- package/dist/components/vendor-button/vendor-button.js +42 -0
- package/dist/components/vendor-button/vendor-button.js.map +1 -0
- package/dist/icons/{icon-07-target-radar.d.ts → icon-01-content-copy.d.ts} +3 -3
- package/dist/icons/{icon-07-target-radar.d.ts.map → icon-01-content-copy.d.ts.map} +1 -1
- package/dist/icons/{icon-07-target-radar.js → icon-01-content-copy.js} +10 -10
- package/dist/icons/icon-01-content-copy.js.map +1 -0
- package/dist/icons/{icon-07-target-ias-selected.d.ts → icon-01-content-cut.d.ts} +3 -3
- package/dist/icons/icon-01-content-cut.d.ts.map +1 -0
- package/dist/icons/icon-01-content-cut.js +52 -0
- package/dist/icons/icon-01-content-cut.js.map +1 -0
- package/dist/icons/{icon-07-target-radar-selected.d.ts → icon-01-content-paste.d.ts} +3 -3
- package/dist/icons/icon-01-content-paste.d.ts.map +1 -0
- package/dist/icons/icon-01-content-paste.js +52 -0
- package/dist/icons/icon-01-content-paste.js.map +1 -0
- package/dist/icons/icon-02-dock-bottom.d.ts +14 -0
- package/dist/icons/icon-02-dock-bottom.d.ts.map +1 -0
- package/dist/icons/icon-02-dock-bottom.js +52 -0
- package/dist/icons/icon-02-dock-bottom.js.map +1 -0
- package/dist/icons/{icon-07-target-ias.d.ts → icon-02-dock-left.d.ts} +3 -3
- package/dist/icons/icon-02-dock-left.d.ts.map +1 -0
- package/dist/icons/{icon-07-target-ias.js → icon-02-dock-left.js} +10 -24
- package/dist/icons/icon-02-dock-left.js.map +1 -0
- package/dist/icons/icon-02-dock-right.d.ts +14 -0
- package/dist/icons/icon-02-dock-right.d.ts.map +1 -0
- package/dist/icons/icon-02-dock-right.js +52 -0
- package/dist/icons/icon-02-dock-right.js.map +1 -0
- package/dist/icons/icon-03-license.d.ts +14 -0
- package/dist/icons/icon-03-license.d.ts.map +1 -0
- package/dist/icons/icon-03-license.js +52 -0
- package/dist/icons/icon-03-license.js.map +1 -0
- package/dist/icons/icon-03-star-unchecked.js +1 -1
- package/dist/icons/icon-03-star-unchecked.js.map +1 -1
- package/dist/icons/icon-04-colorcalibrated.d.ts.map +1 -1
- package/dist/icons/icon-04-colorcalibrated.js +2 -14
- package/dist/icons/icon-04-colorcalibrated.js.map +1 -1
- package/dist/icons/icon-07-target-associated-ais-camera.d.ts +14 -0
- package/dist/icons/icon-07-target-associated-ais-camera.d.ts.map +1 -0
- package/dist/icons/icon-07-target-associated-ais-camera.js +54 -0
- package/dist/icons/icon-07-target-associated-ais-camera.js.map +1 -0
- package/dist/icons/icon-07-target-associated-camera-radar.d.ts +14 -0
- package/dist/icons/icon-07-target-associated-camera-radar.d.ts.map +1 -0
- package/dist/icons/icon-07-target-associated-camera-radar.js +52 -0
- package/dist/icons/icon-07-target-associated-camera-radar.js.map +1 -0
- package/dist/icons/icon-07-target-associated-radar-camera.d.ts +14 -0
- package/dist/icons/icon-07-target-associated-radar-camera.d.ts.map +1 -0
- package/dist/icons/icon-07-target-associated-radar-camera.js +54 -0
- package/dist/icons/icon-07-target-associated-radar-camera.js.map +1 -0
- package/dist/icons/icon-07-target-camera.d.ts +14 -0
- package/dist/icons/icon-07-target-camera.d.ts.map +1 -0
- package/dist/icons/icon-07-target-camera.js +52 -0
- package/dist/icons/icon-07-target-camera.js.map +1 -0
- package/dist/icons/icon-08-backward-fast.js +1 -1
- package/dist/icons/icon-08-backward-fast.js.map +1 -1
- package/dist/icons/icon-08-backward-stopped.js +1 -1
- package/dist/icons/icon-08-backward-stopped.js.map +1 -1
- package/dist/icons/icon-08-forward-fast.js +1 -1
- package/dist/icons/icon-08-forward-fast.js.map +1 -1
- package/dist/icons/icon-08-forward-stopped.js +1 -1
- package/dist/icons/icon-08-forward-stopped.js.map +1 -1
- package/dist/icons/icon-08-motor-off-horisontal.js +1 -1
- package/dist/icons/icon-08-motor-off-horisontal.js.map +1 -1
- package/dist/icons/icon-09-switch-horizontal-off-large.js +1 -1
- package/dist/icons/icon-09-switch-horizontal-off-large.js.map +1 -1
- package/dist/icons/icon-09-switch-horizontal-off.js +1 -1
- package/dist/icons/icon-09-switch-horizontal-off.js.map +1 -1
- package/dist/icons/icon-10-autonomous.js +3 -3
- package/dist/icons/icon-10-autonomous.js.map +1 -1
- package/dist/icons/icon-14-alert-rectified.js +1 -1
- package/dist/icons/icon-14-alert-rectified.js.map +1 -1
- package/dist/icons/icon-14-alertheader-aggregated-large.d.ts +14 -0
- package/dist/icons/icon-14-alertheader-aggregated-large.d.ts.map +1 -0
- package/dist/icons/icon-14-alertheader-aggregated-large.js +52 -0
- package/dist/icons/icon-14-alertheader-aggregated-large.js.map +1 -0
- package/dist/icons/icon-14-alertheader-group-large.d.ts +14 -0
- package/dist/icons/icon-14-alertheader-group-large.d.ts.map +1 -0
- package/dist/icons/icon-14-alertheader-group-large.js +54 -0
- package/dist/icons/icon-14-alertheader-group-large.js.map +1 -0
- package/dist/icons/icon-14-exclamationmark.js +4 -4
- package/dist/icons/icon-14-exclamationmark.js.map +1 -1
- package/dist/icons/icon-14-rectified.js +1 -1
- package/dist/icons/icon-14-rectified.js.map +1 -1
- package/dist/icons/icon-18-ais-anchored.js +4 -4
- package/dist/icons/icon-18-ais-anchored.js.map +1 -1
- package/dist/icons/icon-18-ais-notunderway.js +1 -1
- package/dist/icons/icon-18-ais-notunderway.js.map +1 -1
- package/dist/icons/icon-iec-02-ais-target-activated-selected.d.ts +14 -0
- package/dist/icons/icon-iec-02-ais-target-activated-selected.d.ts.map +1 -0
- package/dist/icons/icon-iec-02-ais-target-activated-selected.js +52 -0
- package/dist/icons/icon-iec-02-ais-target-activated-selected.js.map +1 -0
- package/dist/icons/icon-iec-02-ais-target-activated.d.ts +14 -0
- package/dist/icons/icon-iec-02-ais-target-activated.d.ts.map +1 -0
- package/dist/icons/icon-iec-02-ais-target-activated.js +52 -0
- package/dist/icons/icon-iec-02-ais-target-activated.js.map +1 -0
- package/dist/icons/icon-iec-02-associated-target-ais.d.ts +14 -0
- package/dist/icons/icon-iec-02-associated-target-ais.d.ts.map +1 -0
- package/dist/icons/icon-iec-02-associated-target-ais.js +52 -0
- package/dist/icons/icon-iec-02-associated-target-ais.js.map +1 -0
- package/dist/icons/icon-iec-02-associated-target-radar.d.ts +14 -0
- package/dist/icons/icon-iec-02-associated-target-radar.d.ts.map +1 -0
- package/dist/icons/icon-iec-02-associated-target-radar.js +52 -0
- package/dist/icons/icon-iec-02-associated-target-radar.js.map +1 -0
- package/dist/icons/icon-iec-02-radar-target-tracked-selected.d.ts +14 -0
- package/dist/icons/icon-iec-02-radar-target-tracked-selected.d.ts.map +1 -0
- package/dist/icons/icon-iec-02-radar-target-tracked-selected.js +60 -0
- package/dist/icons/icon-iec-02-radar-target-tracked-selected.js.map +1 -0
- package/dist/icons/icon-iec-02-radar-target-tracked.d.ts +14 -0
- package/dist/icons/icon-iec-02-radar-target-tracked.d.ts.map +1 -0
- package/dist/icons/icon-iec-02-radar-target-tracked.js +52 -0
- package/dist/icons/icon-iec-02-radar-target-tracked.js.map +1 -0
- package/dist/icons/index.d.ts +19 -4
- package/dist/icons/index.d.ts.map +1 -1
- package/dist/icons/index.js +19 -4
- package/dist/icons/index.js.map +1 -1
- package/dist/icons/names.d.ts.map +1 -1
- package/dist/icons/names.js +19 -4
- package/dist/icons/names.js.map +1 -1
- package/dist/navigation-instruments/thruster/thruster.d.ts +2 -1
- package/dist/navigation-instruments/thruster/thruster.d.ts.map +1 -1
- package/dist/navigation-instruments/thruster/thruster.js +45 -25
- package/dist/navigation-instruments/thruster/thruster.js.map +1 -1
- package/fix-generated.cjs +3 -0
- package/new-component.ts +7 -8
- package/package.json +5 -1
- package/script/convert-icons.ts +177 -0
- package/script/download-alert-icons.ts +180 -0
- package/script/download-icons.ts +7 -141
- package/src/components/alert-button/alert-button.css +1 -12
- package/src/components/alert-button/alert-button.stories.ts +2 -0
- package/src/components/alert-button/alert-button.ts +29 -4
- package/src/components/alert-icon/alert-icon.stories.ts +35 -0
- package/src/components/alert-icon/alert-icon.ts +75 -0
- package/src/components/alert-icon/icons/icon-14-alarm-silenced-a.ts +9 -0
- package/src/components/alert-icon/icons/icon-14-alarm-silenced-b.ts +16 -0
- package/src/components/alert-icon/icons/icon-14-alarm-unack-a.ts +8 -0
- package/src/components/alert-icon/icons/icon-14-alarm-unack-b.ts +15 -0
- package/src/components/alert-icon/icons/icon-14-warning-unack-a.ts +8 -0
- package/src/components/alert-icon/icons/icon-14-warning-unack-b.ts +8 -0
- package/src/components/alert-topbar-element/alert-topbar-element.stories.ts +4 -0
- package/src/components/alert-topbar-element/alert-topbar-element.ts +17 -0
- package/src/components/notification-message/notification-message.stories.ts +26 -10
- package/src/components/rich-button/rich-button.css +118 -0
- package/src/components/rich-button/rich-button.stories.ts +196 -0
- package/src/components/rich-button/rich-button.ts +95 -0
- package/src/components/vendor-button/vendor-button.css +10 -0
- package/src/components/vendor-button/vendor-button.stories.ts +19 -0
- package/src/components/vendor-button/vendor-button.ts +25 -0
- package/src/icons/icon-01-content-copy.ts +40 -0
- package/src/icons/icon-01-content-cut.ts +40 -0
- package/src/icons/icon-01-content-paste.ts +40 -0
- package/src/icons/icon-02-dock-bottom.ts +40 -0
- package/src/icons/icon-02-dock-left.ts +40 -0
- package/src/icons/icon-02-dock-right.ts +40 -0
- package/src/icons/icon-03-license.ts +40 -0
- package/src/icons/icon-03-star-unchecked.ts +1 -1
- package/src/icons/icon-04-colorcalibrated.ts +2 -14
- package/src/icons/icon-07-target-associated-ais-camera.ts +42 -0
- package/src/icons/icon-07-target-associated-camera-radar.ts +40 -0
- package/src/icons/icon-07-target-associated-radar-camera.ts +42 -0
- package/src/icons/icon-07-target-camera.ts +40 -0
- package/src/icons/icon-08-backward-fast.ts +1 -1
- package/src/icons/icon-08-backward-stopped.ts +1 -1
- package/src/icons/icon-08-forward-fast.ts +1 -1
- package/src/icons/icon-08-forward-stopped.ts +1 -1
- package/src/icons/icon-08-motor-off-horisontal.ts +1 -1
- package/src/icons/icon-09-switch-horizontal-off-large.ts +1 -1
- package/src/icons/icon-09-switch-horizontal-off.ts +1 -1
- package/src/icons/icon-10-autonomous.ts +3 -3
- package/src/icons/icon-14-alert-rectified.ts +1 -1
- package/src/icons/icon-14-alertheader-aggregated-large.ts +40 -0
- package/src/icons/icon-14-alertheader-group-large.ts +42 -0
- package/src/icons/icon-14-exclamationmark.ts +4 -4
- package/src/icons/icon-14-rectified.ts +1 -1
- package/src/icons/icon-18-ais-anchored.ts +4 -4
- package/src/icons/icon-18-ais-notunderway.ts +1 -1
- package/src/icons/icon-iec-02-ais-target-activated-selected.ts +40 -0
- package/src/icons/icon-iec-02-ais-target-activated.ts +40 -0
- package/src/icons/icon-iec-02-associated-target-ais.ts +40 -0
- package/src/icons/icon-iec-02-associated-target-radar.ts +40 -0
- package/src/icons/icon-iec-02-radar-target-tracked-selected.ts +48 -0
- package/src/icons/icon-iec-02-radar-target-tracked.ts +40 -0
- package/src/icons/index.ts +19 -4
- package/src/icons/names.ts +19 -4
- package/src/icons.stories.ts +78 -0
- package/src/navigation-instruments/thruster/thruster.stories.ts +18 -1
- package/src/navigation-instruments/thruster/thruster.ts +43 -27
- package/dist/icons/icon-07-target-ias-selected.d.ts.map +0 -1
- package/dist/icons/icon-07-target-ias-selected.js +0 -60
- package/dist/icons/icon-07-target-ias-selected.js.map +0 -1
- package/dist/icons/icon-07-target-ias.d.ts.map +0 -1
- package/dist/icons/icon-07-target-ias.js.map +0 -1
- package/dist/icons/icon-07-target-radar-selected.d.ts.map +0 -1
- package/dist/icons/icon-07-target-radar-selected.js +0 -60
- package/dist/icons/icon-07-target-radar-selected.js.map +0 -1
- package/dist/icons/icon-07-target-radar.js.map +0 -1
- package/src/icons/icon-07-target-ias-selected.ts +0 -48
- package/src/icons/icon-07-target-ias.ts +0 -54
- package/src/icons/icon-07-target-radar-selected.ts +0 -48
- package/src/icons/icon-07-target-radar.ts +0 -40
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import {LitElement, html, css, svg} from 'lit';
|
|
2
|
+
import {customElement, property} from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
@customElement('obi-iec-02-ais-target-activated')
|
|
5
|
+
export class ObiIEC02AisTargetActivated extends LitElement {
|
|
6
|
+
@property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
|
|
7
|
+
|
|
8
|
+
private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
9
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1L5 21H19L12 1ZM12 7.05418L7.81896 19H16.181L12 7.05418Z" fill="currentColor"/>
|
|
10
|
+
</svg>
|
|
11
|
+
`;
|
|
12
|
+
|
|
13
|
+
private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
14
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1L5 21H19L12 1ZM12 7.05418L7.81896 19H16.181L12 7.05418Z" fill="currentColor"/>
|
|
15
|
+
</svg>
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
override render() {
|
|
19
|
+
return html`
|
|
20
|
+
<div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
|
|
21
|
+
`;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
static override styles = css`
|
|
25
|
+
.wrapper {
|
|
26
|
+
height: 100%;
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
.wrapper > * {
|
|
30
|
+
height: 100%;
|
|
31
|
+
width: 100%;
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
'obi-iec-02-ais-target-activated': ObiIEC02AisTargetActivated;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import {LitElement, html, css, svg} from 'lit';
|
|
2
|
+
import {customElement, property} from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
@customElement('obi-iec-02-associated-target-ais')
|
|
5
|
+
export class ObiIEC02AssociatedTargetAis extends LitElement {
|
|
6
|
+
@property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
|
|
7
|
+
|
|
8
|
+
private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
9
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM18.3262 21C16.5368 22.2601 14.3548 23 12 23C9.64518 23 7.46319 22.2601 5.67384 21H18.3262ZM18.8598 20.5995L12 1C18.0751 1 23 5.92487 23 12C23 15.4808 21.3833 18.5839 18.8598 20.5995ZM5.14017 20.5995C2.6167 18.5839 1 15.4808 1 12C1 5.92487 5.92487 1 12 1L5.14017 20.5995ZM7.81896 19L12 7.05418L16.181 19H7.81896Z" fill="currentColor"/>
|
|
10
|
+
</svg>
|
|
11
|
+
`;
|
|
12
|
+
|
|
13
|
+
private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
14
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM18.3262 21C16.5368 22.2601 14.3548 23 12 23C9.64518 23 7.46319 22.2601 5.67384 21H18.3262ZM18.8598 20.5995L12 1C18.0751 1 23 5.92487 23 12C23 15.4808 21.3833 18.5839 18.8598 20.5995ZM5.14017 20.5995C2.6167 18.5839 1 15.4808 1 12C1 5.92487 5.92487 1 12 1L5.14017 20.5995ZM7.81896 19L12 7.05418L16.181 19H7.81896Z" fill="currentColor"/>
|
|
15
|
+
</svg>
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
override render() {
|
|
19
|
+
return html`
|
|
20
|
+
<div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
|
|
21
|
+
`;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
static override styles = css`
|
|
25
|
+
.wrapper {
|
|
26
|
+
height: 100%;
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
.wrapper > * {
|
|
30
|
+
height: 100%;
|
|
31
|
+
width: 100%;
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
'obi-iec-02-associated-target-ais': ObiIEC02AssociatedTargetAis;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import {LitElement, html, css, svg} from 'lit';
|
|
2
|
+
import {customElement, property} from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
@customElement('obi-iec-02-associated-target-radar')
|
|
5
|
+
export class ObiIEC02AssociatedTargetRadar extends LitElement {
|
|
6
|
+
@property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
|
|
7
|
+
|
|
8
|
+
private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
9
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12ZM13.5138 15.7036C13.0468 15.8947 12.5357 16 12 16C11.4643 16 10.9532 15.8947 10.4862 15.7036L12 11.1623L13.5138 15.7036ZM14.4001 15.2002L12 8C14.2091 8 16 9.79086 16 12C16 13.3086 15.3716 14.4705 14.4001 15.2002ZM9.59992 15.2002C8.62841 14.4705 8 13.3086 8 12C8 9.79086 9.79086 8 12 8L9.59992 15.2002Z" fill="currentColor"/>
|
|
10
|
+
</svg>
|
|
11
|
+
`;
|
|
12
|
+
|
|
13
|
+
private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
14
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12ZM13.5138 15.7036C13.0468 15.8947 12.5357 16 12 16C11.4643 16 10.9532 15.8947 10.4862 15.7036L12 11.1623L13.5138 15.7036ZM14.4001 15.2002L12 8C14.2091 8 16 9.79086 16 12C16 13.3086 15.3716 14.4705 14.4001 15.2002ZM9.59992 15.2002C8.62841 14.4705 8 13.3086 8 12C8 9.79086 9.79086 8 12 8L9.59992 15.2002Z" style="fill: var(--element-active-color)"/>
|
|
15
|
+
</svg>
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
override render() {
|
|
19
|
+
return html`
|
|
20
|
+
<div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
|
|
21
|
+
`;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
static override styles = css`
|
|
25
|
+
.wrapper {
|
|
26
|
+
height: 100%;
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
.wrapper > * {
|
|
30
|
+
height: 100%;
|
|
31
|
+
width: 100%;
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
'obi-iec-02-associated-target-radar': ObiIEC02AssociatedTargetRadar;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import {LitElement, html, css, svg} from 'lit';
|
|
2
|
+
import {customElement, property} from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
@customElement('obi-iec-02-radar-target-tracked-selected')
|
|
5
|
+
export class ObiIEC02RadarTargetTrackedSelected extends LitElement {
|
|
6
|
+
@property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
|
|
7
|
+
|
|
8
|
+
private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
9
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="currentColor"/>
|
|
10
|
+
<path d="M2 5V2H5V0H1C0.447715 0 0 0.447716 0 1V5H2Z" fill="currentColor"/>
|
|
11
|
+
<path d="M2 19H0V23C0 23.5523 0.447716 24 1 24H5V22H2V19Z" fill="currentColor"/>
|
|
12
|
+
<path d="M19 22V24H23C23.5523 24 24 23.5523 24 23V19H22V22H19Z" fill="currentColor"/>
|
|
13
|
+
<path d="M22 5H24V1C24 0.447715 23.5523 0 23 0H19V2H22V5Z" fill="currentColor"/>
|
|
14
|
+
</svg>
|
|
15
|
+
`;
|
|
16
|
+
|
|
17
|
+
private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
18
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" style="fill: var(--element-active-color)"/>
|
|
19
|
+
<path d="M2 5V2H5V0H1C0.447715 0 0 0.447716 0 1V5H2Z" style="fill: var(--element-active-color)"/>
|
|
20
|
+
<path d="M2 19H0V23C0 23.5523 0.447716 24 1 24H5V22H2V19Z" style="fill: var(--element-active-color)"/>
|
|
21
|
+
<path d="M19 22V24H23C23.5523 24 24 23.5523 24 23V19H22V22H19Z" style="fill: var(--element-active-color)"/>
|
|
22
|
+
<path d="M22 5H24V1C24 0.447715 23.5523 0 23 0H19V2H22V5Z" style="fill: var(--element-active-color)"/>
|
|
23
|
+
</svg>
|
|
24
|
+
`;
|
|
25
|
+
|
|
26
|
+
override render() {
|
|
27
|
+
return html`
|
|
28
|
+
<div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
|
|
29
|
+
`;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
static override styles = css`
|
|
33
|
+
.wrapper {
|
|
34
|
+
height: 100%;
|
|
35
|
+
width: 100%;
|
|
36
|
+
}
|
|
37
|
+
.wrapper > * {
|
|
38
|
+
height: 100%;
|
|
39
|
+
width: 100%;
|
|
40
|
+
}
|
|
41
|
+
`;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
declare global {
|
|
45
|
+
interface HTMLElementTagNameMap {
|
|
46
|
+
'obi-iec-02-radar-target-tracked-selected': ObiIEC02RadarTargetTrackedSelected;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import {LitElement, html, css, svg} from 'lit';
|
|
2
|
+
import {customElement, property} from 'lit/decorators.js';
|
|
3
|
+
|
|
4
|
+
@customElement('obi-iec-02-radar-target-tracked')
|
|
5
|
+
export class ObiIEC02RadarTargetTracked extends LitElement {
|
|
6
|
+
@property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
|
|
7
|
+
|
|
8
|
+
private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
9
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="currentColor"/>
|
|
10
|
+
</svg>
|
|
11
|
+
`;
|
|
12
|
+
|
|
13
|
+
private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
14
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" style="fill: var(--element-active-color)"/>
|
|
15
|
+
</svg>
|
|
16
|
+
`;
|
|
17
|
+
|
|
18
|
+
override render() {
|
|
19
|
+
return html`
|
|
20
|
+
<div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
|
|
21
|
+
`;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
static override styles = css`
|
|
25
|
+
.wrapper {
|
|
26
|
+
height: 100%;
|
|
27
|
+
width: 100%;
|
|
28
|
+
}
|
|
29
|
+
.wrapper > * {
|
|
30
|
+
height: 100%;
|
|
31
|
+
width: 100%;
|
|
32
|
+
}
|
|
33
|
+
`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
'obi-iec-02-radar-target-tracked': ObiIEC02RadarTargetTracked;
|
|
39
|
+
}
|
|
40
|
+
}
|
package/src/icons/index.ts
CHANGED
|
@@ -5,6 +5,9 @@ import './icon-01-check';
|
|
|
5
5
|
import './icon-01-checkbox-checked';
|
|
6
6
|
import './icon-01-checkbox-uncheck';
|
|
7
7
|
import './icon-01-close';
|
|
8
|
+
import './icon-01-content-copy';
|
|
9
|
+
import './icon-01-content-cut';
|
|
10
|
+
import './icon-01-content-paste';
|
|
8
11
|
import './icon-01-delete';
|
|
9
12
|
import './icon-01-edit';
|
|
10
13
|
import './icon-01-expanditem';
|
|
@@ -57,6 +60,9 @@ import './icon-02-chevron-left';
|
|
|
57
60
|
import './icon-02-chevron-right';
|
|
58
61
|
import './icon-02-chevron-up';
|
|
59
62
|
import './icon-02-collapse-content';
|
|
63
|
+
import './icon-02-dock-bottom';
|
|
64
|
+
import './icon-02-dock-left';
|
|
65
|
+
import './icon-02-dock-right';
|
|
60
66
|
import './icon-02-drop-down';
|
|
61
67
|
import './icon-02-expand-content';
|
|
62
68
|
import './icon-02-page-first';
|
|
@@ -74,6 +80,7 @@ import './icon-03-configure';
|
|
|
74
80
|
import './icon-03-diagnostic';
|
|
75
81
|
import './icon-03-filter';
|
|
76
82
|
import './icon-03-info';
|
|
83
|
+
import './icon-03-license';
|
|
77
84
|
import './icon-03-monitoring';
|
|
78
85
|
import './icon-03-pin-checked';
|
|
79
86
|
import './icon-03-pin-unchecked';
|
|
@@ -172,12 +179,12 @@ import './icon-07-report-info';
|
|
|
172
179
|
import './icon-07-route-planning';
|
|
173
180
|
import './icon-07-silence';
|
|
174
181
|
import './icon-07-smode';
|
|
182
|
+
import './icon-07-target-associated-ais-camera';
|
|
183
|
+
import './icon-07-target-associated-camera-radar';
|
|
184
|
+
import './icon-07-target-associated-radar-camera';
|
|
185
|
+
import './icon-07-target-camera';
|
|
175
186
|
import './icon-07-target-cancel';
|
|
176
187
|
import './icon-07-target-cancel-all';
|
|
177
|
-
import './icon-07-target-ias';
|
|
178
|
-
import './icon-07-target-ias-selected';
|
|
179
|
-
import './icon-07-target-radar';
|
|
180
|
-
import './icon-07-target-radar-selected';
|
|
181
188
|
import './icon-07-target-select';
|
|
182
189
|
import './icon-07-track';
|
|
183
190
|
import './icon-07-track-no';
|
|
@@ -393,7 +400,9 @@ import './icon-14-alert-list';
|
|
|
393
400
|
import './icon-14-alert-off';
|
|
394
401
|
import './icon-14-alert-rectified';
|
|
395
402
|
import './icon-14-alertheader-aggregated';
|
|
403
|
+
import './icon-14-alertheader-aggregated-large';
|
|
396
404
|
import './icon-14-alertheader-group';
|
|
405
|
+
import './icon-14-alertheader-group-large';
|
|
397
406
|
import './icon-14-alerts';
|
|
398
407
|
import './icon-14-audio';
|
|
399
408
|
import './icon-14-audio-low';
|
|
@@ -537,4 +546,10 @@ import './icon-20-wifi-wifi_statusbar_4';
|
|
|
537
546
|
import './icon-20-wifi2';
|
|
538
547
|
import './icon-20-wifi2-off';
|
|
539
548
|
import './icon-frame2622';
|
|
549
|
+
import './icon-iec-02-ais-target-activated';
|
|
550
|
+
import './icon-iec-02-ais-target-activated-selected';
|
|
551
|
+
import './icon-iec-02-associated-target-ais';
|
|
552
|
+
import './icon-iec-02-associated-target-radar';
|
|
553
|
+
import './icon-iec-02-radar-target-tracked';
|
|
554
|
+
import './icon-iec-02-radar-target-tracked-selected';
|
|
540
555
|
import './icon-temp';
|
package/src/icons/names.ts
CHANGED
|
@@ -6,6 +6,9 @@ export const iconIds: string[] = [
|
|
|
6
6
|
'01-checkbox-checked',
|
|
7
7
|
'01-checkbox-uncheck',
|
|
8
8
|
'01-close',
|
|
9
|
+
'01-content-copy',
|
|
10
|
+
'01-content-cut',
|
|
11
|
+
'01-content-paste',
|
|
9
12
|
'01-delete',
|
|
10
13
|
'01-edit',
|
|
11
14
|
'01-expanditem',
|
|
@@ -58,6 +61,9 @@ export const iconIds: string[] = [
|
|
|
58
61
|
'02-chevron-right',
|
|
59
62
|
'02-chevron-up',
|
|
60
63
|
'02-collapse-content',
|
|
64
|
+
'02-dock-bottom',
|
|
65
|
+
'02-dock-left',
|
|
66
|
+
'02-dock-right',
|
|
61
67
|
'02-drop-down',
|
|
62
68
|
'02-expand-content',
|
|
63
69
|
'02-page-first',
|
|
@@ -75,6 +81,7 @@ export const iconIds: string[] = [
|
|
|
75
81
|
'03-diagnostic',
|
|
76
82
|
'03-filter',
|
|
77
83
|
'03-info',
|
|
84
|
+
'03-license',
|
|
78
85
|
'03-monitoring',
|
|
79
86
|
'03-pin-checked',
|
|
80
87
|
'03-pin-unchecked',
|
|
@@ -173,12 +180,12 @@ export const iconIds: string[] = [
|
|
|
173
180
|
'07-route-planning',
|
|
174
181
|
'07-silence',
|
|
175
182
|
'07-smode',
|
|
183
|
+
'07-target-associated-ais-camera',
|
|
184
|
+
'07-target-associated-camera-radar',
|
|
185
|
+
'07-target-associated-radar-camera',
|
|
186
|
+
'07-target-camera',
|
|
176
187
|
'07-target-cancel',
|
|
177
188
|
'07-target-cancel-all',
|
|
178
|
-
'07-target-ias',
|
|
179
|
-
'07-target-ias-selected',
|
|
180
|
-
'07-target-radar',
|
|
181
|
-
'07-target-radar-selected',
|
|
182
189
|
'07-target-select',
|
|
183
190
|
'07-track',
|
|
184
191
|
'07-track-no',
|
|
@@ -396,7 +403,9 @@ export const iconIds: string[] = [
|
|
|
396
403
|
'14-alert-off',
|
|
397
404
|
'14-alert-rectified',
|
|
398
405
|
'14-alertheader-aggregated',
|
|
406
|
+
'14-alertheader-aggregated-large',
|
|
399
407
|
'14-alertheader-group',
|
|
408
|
+
'14-alertheader-group-large',
|
|
400
409
|
'14-alerts',
|
|
401
410
|
'14-audio',
|
|
402
411
|
'14-audio-low',
|
|
@@ -538,5 +547,11 @@ export const iconIds: string[] = [
|
|
|
538
547
|
'20-wifi2',
|
|
539
548
|
'20-wifi2-off',
|
|
540
549
|
'Frame2622',
|
|
550
|
+
'IEC-02-ais-target-activated',
|
|
551
|
+
'IEC-02-ais-target-activated-selected',
|
|
552
|
+
'IEC-02-associated-target-ais',
|
|
553
|
+
'IEC-02-associated-target-radar',
|
|
554
|
+
'IEC-02-radar-target-tracked',
|
|
555
|
+
'IEC-02-radar-target-tracked-selected',
|
|
541
556
|
'temp',
|
|
542
557
|
];
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import type {Meta, StoryObj} from '@storybook/web-components';
|
|
2
|
+
import './icons';
|
|
3
|
+
import {html, unsafeStatic} from 'lit/static-html.js';
|
|
4
|
+
import {iconIds} from './icons/names';
|
|
5
|
+
|
|
6
|
+
const meta: Meta = {
|
|
7
|
+
title: 'Icons/icon',
|
|
8
|
+
} satisfies Meta;
|
|
9
|
+
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj;
|
|
12
|
+
|
|
13
|
+
export const List: Story = {
|
|
14
|
+
args: {
|
|
15
|
+
search: '',
|
|
16
|
+
useCssColor: true,
|
|
17
|
+
},
|
|
18
|
+
argTypes: {
|
|
19
|
+
search: {
|
|
20
|
+
control: {type: 'text', description: 'Search for icon'},
|
|
21
|
+
},
|
|
22
|
+
useCssColor: {
|
|
23
|
+
control: {type: 'boolean'},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
render: (args) => {
|
|
27
|
+
const items = iconIds.filter((name) => name.includes(args.search));
|
|
28
|
+
return html`
|
|
29
|
+
<style>
|
|
30
|
+
.icon {
|
|
31
|
+
height: 32px;
|
|
32
|
+
display: inline-block;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.item {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
margin: 4px;
|
|
39
|
+
gap: 4px;
|
|
40
|
+
}
|
|
41
|
+
</style>
|
|
42
|
+
<div style="display: flex; flex-wrap: wrap; flex-direction: column">
|
|
43
|
+
${items.map(
|
|
44
|
+
(name) =>
|
|
45
|
+
html`<div class="item"><${unsafeStatic(
|
|
46
|
+
`obi-${name}`
|
|
47
|
+
)} ?use-css-color=${args.useCssColor} class="icon"></${unsafeStatic(
|
|
48
|
+
`obi-${name}`
|
|
49
|
+
)}> <obi-${name}></div>`
|
|
50
|
+
)}
|
|
51
|
+
</div>
|
|
52
|
+
`;
|
|
53
|
+
},
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
export const UseFontColor: Story = {
|
|
57
|
+
args: {
|
|
58
|
+
useCssColor: false,
|
|
59
|
+
name: '01-log-add',
|
|
60
|
+
size: 32,
|
|
61
|
+
color: 'green',
|
|
62
|
+
},
|
|
63
|
+
argTypes: {
|
|
64
|
+
name: {
|
|
65
|
+
options: iconIds,
|
|
66
|
+
control: {type: 'select'},
|
|
67
|
+
},
|
|
68
|
+
size: {
|
|
69
|
+
control: {type: 'range', min: 16, max: 128, step: 1},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
render: (args) =>
|
|
73
|
+
html`<div style="height: ${args.size}px; color: ${args.color}">
|
|
74
|
+
<${unsafeStatic(`obi-${args.name}`)} ?use-css-color=${
|
|
75
|
+
args.useCssColor
|
|
76
|
+
} class="icon"></${unsafeStatic(`obi-${args.name}`)}>
|
|
77
|
+
</div>`,
|
|
78
|
+
};
|
|
@@ -2,15 +2,25 @@ import type {Meta, StoryObj} from '@storybook/web-components';
|
|
|
2
2
|
import {ObcThruster} from './thruster';
|
|
3
3
|
import './thruster';
|
|
4
4
|
import {InstrumentState} from '../types';
|
|
5
|
+
import {html} from 'lit';
|
|
5
6
|
|
|
6
7
|
const meta: Meta<typeof ObcThruster> = {
|
|
7
8
|
title: 'Navigation instruments/Thruster',
|
|
8
9
|
tags: ['autodocs'],
|
|
9
10
|
component: 'obc-thruster',
|
|
10
|
-
args: {},
|
|
11
|
+
args: {containerSize: 320},
|
|
11
12
|
argTypes: {
|
|
12
13
|
setpoint: {control: {type: 'range', min: -100, max: 100, step: 1}},
|
|
13
14
|
},
|
|
15
|
+
decorators: [
|
|
16
|
+
(story, contex) => {
|
|
17
|
+
return html`<div
|
|
18
|
+
style="height: ${contex.args.containerSize}px; width: fit-content;"
|
|
19
|
+
>
|
|
20
|
+
${story()}
|
|
21
|
+
</div>`;
|
|
22
|
+
},
|
|
23
|
+
],
|
|
14
24
|
} satisfies Meta<ObcThruster>;
|
|
15
25
|
|
|
16
26
|
export default meta;
|
|
@@ -31,6 +41,13 @@ export const Tunnel: Story = {
|
|
|
31
41
|
state: InstrumentState.inCommand,
|
|
32
42
|
tunnel: true,
|
|
33
43
|
},
|
|
44
|
+
decorators: [
|
|
45
|
+
(story, contex) => {
|
|
46
|
+
return html`<div style="width: ${contex.args.containerSize}px">
|
|
47
|
+
${story()}
|
|
48
|
+
</div>`;
|
|
49
|
+
},
|
|
50
|
+
],
|
|
34
51
|
};
|
|
35
52
|
|
|
36
53
|
export const InCommandAtSetpoint: Story = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {LitElement, svg} from 'lit';
|
|
1
|
+
import {LitElement, svg, html, css} from 'lit';
|
|
2
2
|
import {customElement, property} from 'lit/decorators.js';
|
|
3
3
|
import {Size, InstrumentState} from '../types';
|
|
4
4
|
|
|
@@ -23,12 +23,26 @@ export class ObcThruster extends LitElement {
|
|
|
23
23
|
@property({type: Boolean}) off: boolean = false;
|
|
24
24
|
|
|
25
25
|
override render() {
|
|
26
|
-
return
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
26
|
+
return html`<div class="container">
|
|
27
|
+
${thruster(this.thrust, this.setpoint, this.state, {
|
|
28
|
+
atSetpoint: this.atSetpoint,
|
|
29
|
+
tunnel: this.tunnel,
|
|
30
|
+
setpointAtZero: this.setpointAtZero,
|
|
31
|
+
})}
|
|
32
|
+
</div>`;
|
|
31
33
|
}
|
|
34
|
+
|
|
35
|
+
static override styles = css`
|
|
36
|
+
.container {
|
|
37
|
+
height: 100%;
|
|
38
|
+
width: 100%;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.container > svg {
|
|
42
|
+
height: 100%;
|
|
43
|
+
width: 100%;
|
|
44
|
+
}
|
|
45
|
+
`;
|
|
32
46
|
}
|
|
33
47
|
const containerHeight = 134;
|
|
34
48
|
|
|
@@ -154,41 +168,43 @@ export function thruster(
|
|
|
154
168
|
<rect x="-32" y="-2" width="64" height="4" fill=${zeroLineColor} stroke=${zeroLineColor}/>
|
|
155
169
|
`;
|
|
156
170
|
|
|
157
|
-
const thrusterSvg =
|
|
158
|
-
|
|
159
|
-
${thrusterTop(
|
|
171
|
+
const thrusterSvg = [
|
|
172
|
+
thrusterTop(
|
|
160
173
|
Math.max(thrust, 0),
|
|
161
174
|
{box: boxColor, container: containerBackgroundColor},
|
|
162
175
|
hideTicks
|
|
163
|
-
)
|
|
164
|
-
|
|
176
|
+
),
|
|
177
|
+
thrusterBottom(
|
|
165
178
|
Math.max(-thrust, 0),
|
|
166
179
|
{box: boxColor, container: containerBackgroundColor},
|
|
167
180
|
hideTicks
|
|
168
|
-
)
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
</svg>
|
|
180
|
-
`;
|
|
181
|
+
),
|
|
182
|
+
centerLine,
|
|
183
|
+
];
|
|
184
|
+
if (setpoint !== undefined) {
|
|
185
|
+
thrusterSvg.push(
|
|
186
|
+
setpointSvg(setpoint, options.setpointAtZero, {
|
|
187
|
+
fill: setPointColor,
|
|
188
|
+
stroke: 'var(--border-silhouette-color)',
|
|
189
|
+
})
|
|
190
|
+
);
|
|
191
|
+
}
|
|
181
192
|
|
|
182
193
|
if (options.tunnel) {
|
|
183
194
|
return svg`
|
|
184
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -64 320 128" x="-160" y="-64"
|
|
195
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-160 -64 320 128" x="-160" y="-64">
|
|
185
196
|
<g transform="rotate(90)">
|
|
186
197
|
${thrusterSvg}
|
|
187
198
|
</g>
|
|
188
199
|
</svg>`;
|
|
200
|
+
} else {
|
|
201
|
+
thrusterSvg.push(arrowTop(arrowColor));
|
|
202
|
+
return svg`
|
|
203
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -160 128 320" x="-64" y="-160">
|
|
204
|
+
${thrusterSvg}
|
|
205
|
+
</svg>
|
|
206
|
+
`;
|
|
189
207
|
}
|
|
190
|
-
|
|
191
|
-
return thrusterSvg;
|
|
192
208
|
}
|
|
193
209
|
|
|
194
210
|
declare global {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"icon-07-target-ias-selected.d.ts","sourceRoot":"","sources":["../../src/icons/icon-07-target-ias-selected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAG/C,qBACa,sBAAuB,SAAQ,UAAU;IACG,WAAW,UAAS;IAE3E,OAAO,CAAC,IAAI,CAOZ;IAEA,OAAO,CAAC,OAAO,CAOf;IAES,MAAM;IAMf,OAAgB,MAAM,0BASpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAC;KACtD;CACF"}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { css, LitElement, svg, html } from "lit";
|
|
2
|
-
import { property, customElement } from "lit/decorators.js";
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __decorateClass = (decorators, target, key, kind) => {
|
|
6
|
-
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
7
|
-
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
8
|
-
if (decorator = decorators[i])
|
|
9
|
-
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
10
|
-
if (kind && result)
|
|
11
|
-
__defProp(target, key, result);
|
|
12
|
-
return result;
|
|
13
|
-
};
|
|
14
|
-
let Obi07TargetIasSelected = class extends LitElement {
|
|
15
|
-
constructor() {
|
|
16
|
-
super(...arguments);
|
|
17
|
-
this.useCssColor = false;
|
|
18
|
-
this.icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
|
19
|
-
<path d="M2 4.22222V8.66667H4.22222V4.22222H8.66667V2H4.22222C3 2 2 3 2 4.22222Z" fill="currentColor"/>
|
|
20
|
-
<path d="M4.22222 15.3334H2V19.7779C2 21.0001 3 22.0001 4.22222 22.0001H8.66667V19.7779H4.22222V15.3334Z" fill="currentColor"/>
|
|
21
|
-
<path d="M15.3333 19.7779H19.7778V15.3334H22V19.7779C22 21.0001 21 22.0001 19.7778 22.0001H15.3333V19.7779Z" fill="currentColor"/>
|
|
22
|
-
<path d="M19.7778 2H15.3333V4.22222H19.7778V8.66667H22V4.22222C22 3 21 2 19.7778 2Z" fill="currentColor"/>
|
|
23
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9426 18.1224L6.50019 11.68L17.2318 7.05166L12.9426 18.1224ZM12.1865 14.5379L9.99812 12.3495L13.6435 10.7773L12.1865 14.5379Z" fill="currentColor"/>
|
|
24
|
-
</svg>
|
|
25
|
-
`;
|
|
26
|
-
this.iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
27
|
-
<path d="M2 4.22222V8.66667H4.22222V4.22222H8.66667V2H4.22222C3 2 2 3 2 4.22222Z" style="fill: var(--element-active-color)"/>
|
|
28
|
-
<path d="M4.22222 15.3334H2V19.7779C2 21.0001 3 22.0001 4.22222 22.0001H8.66667V19.7779H4.22222V15.3334Z" style="fill: var(--element-active-color)"/>
|
|
29
|
-
<path d="M15.3333 19.7779H19.7778V15.3334H22V19.7779C22 21.0001 21 22.0001 19.7778 22.0001H15.3333V19.7779Z" style="fill: var(--element-active-color)"/>
|
|
30
|
-
<path d="M19.7778 2H15.3333V4.22222H19.7778V8.66667H22V4.22222C22 3 21 2 19.7778 2Z" style="fill: var(--element-active-color)"/>
|
|
31
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9426 18.1224L6.50019 11.68L17.2318 7.05166L12.9426 18.1224ZM12.1865 14.5379L9.99812 12.3495L13.6435 10.7773L12.1865 14.5379Z" style="fill: var(--element-active-color)"/>
|
|
32
|
-
</svg>
|
|
33
|
-
`;
|
|
34
|
-
}
|
|
35
|
-
render() {
|
|
36
|
-
return html`
|
|
37
|
-
<div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
|
|
38
|
-
`;
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
Obi07TargetIasSelected.styles = css`
|
|
42
|
-
.wrapper {
|
|
43
|
-
height: 100%;
|
|
44
|
-
width: 100%;
|
|
45
|
-
}
|
|
46
|
-
.wrapper > * {
|
|
47
|
-
height: 100%;
|
|
48
|
-
width: 100%;
|
|
49
|
-
}
|
|
50
|
-
`;
|
|
51
|
-
__decorateClass([
|
|
52
|
-
property({ type: Boolean, attribute: "use-css-color" })
|
|
53
|
-
], Obi07TargetIasSelected.prototype, "useCssColor", 2);
|
|
54
|
-
Obi07TargetIasSelected = __decorateClass([
|
|
55
|
-
customElement("obi-07-target-ias-selected")
|
|
56
|
-
], Obi07TargetIasSelected);
|
|
57
|
-
export {
|
|
58
|
-
Obi07TargetIasSelected
|
|
59
|
-
};
|
|
60
|
-
//# sourceMappingURL=icon-07-target-ias-selected.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"icon-07-target-ias-selected.js","sources":["../../src/icons/icon-07-target-ias-selected.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\n@customElement('obi-07-target-ias-selected')\nexport class Obi07TargetIasSelected extends LitElement {\n @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;\n\n private icon = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2 4.22222V8.66667H4.22222V4.22222H8.66667V2H4.22222C3 2 2 3 2 4.22222Z\" fill=\"currentColor\"/>\n<path d=\"M4.22222 15.3334H2V19.7779C2 21.0001 3 22.0001 4.22222 22.0001H8.66667V19.7779H4.22222V15.3334Z\" fill=\"currentColor\"/>\n<path d=\"M15.3333 19.7779H19.7778V15.3334H22V19.7779C22 21.0001 21 22.0001 19.7778 22.0001H15.3333V19.7779Z\" fill=\"currentColor\"/>\n<path d=\"M19.7778 2H15.3333V4.22222H19.7778V8.66667H22V4.22222C22 3 21 2 19.7778 2Z\" fill=\"currentColor\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.9426 18.1224L6.50019 11.68L17.2318 7.05166L12.9426 18.1224ZM12.1865 14.5379L9.99812 12.3495L13.6435 10.7773L12.1865 14.5379Z\" fill=\"currentColor\"/>\n</svg>\n`;\n\n private iconCss = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2 4.22222V8.66667H4.22222V4.22222H8.66667V2H4.22222C3 2 2 3 2 4.22222Z\" style=\"fill: var(--element-active-color)\"/>\n<path d=\"M4.22222 15.3334H2V19.7779C2 21.0001 3 22.0001 4.22222 22.0001H8.66667V19.7779H4.22222V15.3334Z\" style=\"fill: var(--element-active-color)\"/>\n<path d=\"M15.3333 19.7779H19.7778V15.3334H22V19.7779C22 21.0001 21 22.0001 19.7778 22.0001H15.3333V19.7779Z\" style=\"fill: var(--element-active-color)\"/>\n<path d=\"M19.7778 2H15.3333V4.22222H19.7778V8.66667H22V4.22222C22 3 21 2 19.7778 2Z\" style=\"fill: var(--element-active-color)\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.9426 18.1224L6.50019 11.68L17.2318 7.05166L12.9426 18.1224ZM12.1865 14.5379L9.99812 12.3495L13.6435 10.7773L12.1865 14.5379Z\" style=\"fill: var(--element-active-color)\"/>\n</svg>\n`;\n\n override render() {\n return html`\n <div class=\"wrapper\">${this.useCssColor ? this.iconCss : this.icon}</div>\n `;\n }\n\n static override styles = css`\n .wrapper {\n height: 100%;\n width: 100%;\n }\n .wrapper > * {\n height: 100%;\n width: 100%;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obi-07-target-ias-selected': Obi07TargetIasSelected;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIa,IAAA,yBAAN,cAAqC,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AACgE,SAAA,cAAA;AAErE,SAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASf,SAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAST,SAAS;AACT,WAAA;AAAA,6BACkB,KAAK,cAAc,KAAK,UAAU,KAAK,IAAI;AAAA;AAAA,EAEtE;AAYF;AArCa,uBA2BK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA1B8B,gBAAA;AAAA,EAAtD,SAAS,EAAC,MAAM,SAAS,WAAW,iBAAgB;AAAA,GAD1C,uBAC4C,WAAA,eAAA,CAAA;AAD5C,yBAAN,gBAAA;AAAA,EADN,cAAc,4BAA4B;AAAA,GAC9B,sBAAA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"icon-07-target-ias.d.ts","sourceRoot":"","sources":["../../src/icons/icon-07-target-ias.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAG/C,qBACa,cAAe,SAAQ,UAAU;IACW,WAAW,UAAS;IAE3E,OAAO,CAAC,IAAI,CAUZ;IAEA,OAAO,CAAC,OAAO,CAUf;IAES,MAAM;IAMf,OAAgB,MAAM,0BASpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,cAAc,CAAC;KACrC;CACF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"icon-07-target-ias.js","sources":["../../src/icons/icon-07-target-ias.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\n@customElement('obi-07-target-ias')\nexport class Obi07TargetIas extends LitElement {\n @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;\n\n private icon = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_20330_314304)\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.49995 11.1421L13.3631 23.0053L21.2615 2.6194L1.49995 11.1421ZM6.74684 12.1464L12.229 17.6286L15.879 8.20787L6.74684 12.1464Z\" fill=\"currentColor\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_20330_314304\">\n<rect width=\"24\" height=\"24\" fill=\"currentColor\"/>\n</clipPath>\n</defs>\n</svg>\n`;\n\n private iconCss = svg`<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_20330_314304)\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.49995 11.1421L13.3631 23.0053L21.2615 2.6194L1.49995 11.1421ZM6.74684 12.1464L12.229 17.6286L15.879 8.20787L6.74684 12.1464Z\" style=\"fill: var(--element-active-color)\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_20330_314304\">\n<rect width=\"24\" height=\"24\" fill=\"none\"/>\n</clipPath>\n</defs>\n</svg>\n`;\n\n override render() {\n return html`\n <div class=\"wrapper\">${this.useCssColor ? this.iconCss : this.icon}</div>\n `;\n }\n\n static override styles = css`\n .wrapper {\n height: 100%;\n width: 100%;\n }\n .wrapper > * {\n height: 100%;\n width: 100%;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obi-07-target-ias': Obi07TargetIas;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIa,IAAA,iBAAN,cAA6B,WAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AACgE,SAAA,cAAA;AAErE,SAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYf,SAAQ,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAYT,SAAS;AACT,WAAA;AAAA,6BACkB,KAAK,cAAc,KAAK,UAAU,KAAK,IAAI;AAAA;AAAA,EAEtE;AAYF;AA3Ca,eAiCK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAhC8B,gBAAA;AAAA,EAAtD,SAAS,EAAC,MAAM,SAAS,WAAW,iBAAgB;AAAA,GAD1C,eAC4C,WAAA,eAAA,CAAA;AAD5C,iBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,cAAA;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"icon-07-target-radar-selected.d.ts","sourceRoot":"","sources":["../../src/icons/icon-07-target-radar-selected.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAG/C,qBACa,wBAAyB,SAAQ,UAAU;IACC,WAAW,UAAS;IAE3E,OAAO,CAAC,IAAI,CAOZ;IAEA,OAAO,CAAC,OAAO,CAOf;IAES,MAAM;IAMf,OAAgB,MAAM,0BASpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,wBAAwB,CAAC;KAC1D;CACF"}
|