@oicl/openbridge-webcomponents 0.0.7 → 0.0.9
Sign up to get free protection for your applications and to get access to all the features.
- package/.release-it.json +12 -0
- package/.storybook/main.ts +19 -0
- package/.storybook/preview.ts +11 -0
- package/.vscode/launch.json +16 -0
- package/CHANGELOG.md +106 -41
- 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-info.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 +2134 -531
- 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/button/button.css.js +2 -2
- package/dist/components/navigation-item/navigation-item.css.js +2 -1
- package/dist/components/navigation-item/navigation-item.css.js.map +1 -1
- package/dist/components/notification-button/notification-button.css.js +1 -1
- package/dist/components/rich-button/rich-button.css.js +192 -0
- package/dist/components/rich-button/rich-button.css.js.map +1 -0
- package/dist/components/rich-button/rich-button.d.ts +33 -0
- package/dist/components/rich-button/rich-button.d.ts.map +1 -0
- package/dist/components/rich-button/rich-button.js +118 -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 +4 -0
- package/new-component.ts +7 -8
- package/package.json +7 -2
- 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 +131 -0
- package/src/components/rich-button/rich-button.stories.ts +232 -0
- package/src/components/rich-button/rich-button.ts +97 -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/.yarnrc.yml +0 -1
- 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
- package/test.svg +0 -3
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"navigation-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"navigation-item.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -19,13 +19,13 @@ const componentStyle = css`* {
|
|
19
19
|
display: flex;
|
20
20
|
align-items: center;
|
21
21
|
justify-content: center;
|
22
|
-
color: var(--on-normal-active-color);
|
23
22
|
font-family: 'Noto Sans';
|
24
23
|
font-size: 1rem;
|
25
24
|
font-style: normal;
|
26
25
|
font-weight: 570;
|
27
26
|
line-height: 1.5rem;
|
28
27
|
/* 150% */
|
28
|
+
color: var(--on-normal-active-color);
|
29
29
|
}
|
30
30
|
|
31
31
|
.wrapper {
|
@@ -0,0 +1,192 @@
|
|
1
|
+
import { css } from "lit";
|
2
|
+
const compentStyle = css`* {
|
3
|
+
box-sizing: border-box;
|
4
|
+
}
|
5
|
+
|
6
|
+
.wrapper {
|
7
|
+
position: relative;
|
8
|
+
}
|
9
|
+
|
10
|
+
.wrapper:not(.info) {
|
11
|
+
background-color: var(--container-background-color);
|
12
|
+
box-shadow: var(--shadow-flat);
|
13
|
+
overflow: hidden;
|
14
|
+
}
|
15
|
+
|
16
|
+
.wrapper.top:not(.info), .wrapper.regular:not(.info) {
|
17
|
+
border-top-left-radius: 6px;
|
18
|
+
border-top-right-radius: 6px;
|
19
|
+
}
|
20
|
+
|
21
|
+
.wrapper.bottom:not(.info), .wrapper.regular:not(.info) {
|
22
|
+
border-bottom-left-radius: 6px;
|
23
|
+
border-bottom-right-radius: 6px;
|
24
|
+
}
|
25
|
+
|
26
|
+
button {
|
27
|
+
width: 100%;
|
28
|
+
appearance: none;
|
29
|
+
display: flex;
|
30
|
+
flex-direction: column;
|
31
|
+
text-align: left;
|
32
|
+
padding: 0;
|
33
|
+
border-width: 0 !important;
|
34
|
+
background-color: transparent;
|
35
|
+
}
|
36
|
+
|
37
|
+
.wrapper:not(.info) button {
|
38
|
+
border-color: var(--flat-enabled-border-color);
|
39
|
+
background-color: var(--flat-enabled-background-color);
|
40
|
+
border-width: 1px;
|
41
|
+
border-style: solid;
|
42
|
+
cursor: pointer;
|
43
|
+
}
|
44
|
+
|
45
|
+
.wrapper:not(.info) button:focus {
|
46
|
+
outline: none;
|
47
|
+
}
|
48
|
+
|
49
|
+
.wrapper:not(.info) button.activated {
|
50
|
+
border-color: var(--flat-activated-border-color);
|
51
|
+
background-color: var(--flat-activated-background-color);
|
52
|
+
}
|
53
|
+
|
54
|
+
.wrapper:not(.info) button:focus-visible {
|
55
|
+
outline-color: hsla(211, 100%, 44%, 0.3);
|
56
|
+
outline-width: 4px;
|
57
|
+
outline-style: solid;
|
58
|
+
}
|
59
|
+
|
60
|
+
.wrapper:not(.info) button:hover {
|
61
|
+
border-color: var(--flat-hover-border-color);
|
62
|
+
background-color: var(--flat-hover-background-color);
|
63
|
+
}
|
64
|
+
|
65
|
+
.wrapper:not(.info) button:active {
|
66
|
+
border-color: var(--flat-pressed-border-color);
|
67
|
+
background-color: var(--flat-pressed-background-color);
|
68
|
+
}
|
69
|
+
|
70
|
+
.wrapper:not(.info) button:disabled {
|
71
|
+
border-color: var(--flat-disabled-border-color);
|
72
|
+
background-color: var(--flat-disabled-background-color);
|
73
|
+
cursor: not-allowed;
|
74
|
+
color: var(--on-flat-disabled-color);
|
75
|
+
}
|
76
|
+
|
77
|
+
.top.border button, .center.border button {
|
78
|
+
border-bottom: 1px solid var(--border-outline-color) !important;
|
79
|
+
}
|
80
|
+
|
81
|
+
.bottom.border button{
|
82
|
+
border-top: 1px solid var(--border-outline-color) !important;
|
83
|
+
}
|
84
|
+
|
85
|
+
.container {
|
86
|
+
width: 100%;
|
87
|
+
display: flex;
|
88
|
+
align-items: center;
|
89
|
+
gap: 8px;
|
90
|
+
padding: 8px;
|
91
|
+
}
|
92
|
+
|
93
|
+
.wrapper.single-line .container {
|
94
|
+
padding-top: 4px;
|
95
|
+
padding-bottom: 4px;
|
96
|
+
}
|
97
|
+
|
98
|
+
.container-content {
|
99
|
+
display: flex;
|
100
|
+
align-items: center;
|
101
|
+
flex-grow: 1;
|
102
|
+
gap: 8px;
|
103
|
+
padding: 8px;
|
104
|
+
min-width: 0;
|
105
|
+
}
|
106
|
+
|
107
|
+
.content {
|
108
|
+
display: flex;
|
109
|
+
flex-direction: column;
|
110
|
+
min-width: 0;
|
111
|
+
}
|
112
|
+
|
113
|
+
.leading-icon {
|
114
|
+
display: block;
|
115
|
+
width: 32px;
|
116
|
+
height: 24px;
|
117
|
+
padding-right: 8px;
|
118
|
+
color: var(--element-neutral-color);
|
119
|
+
flex-shrink: 0;
|
120
|
+
flex-grow: 0;
|
121
|
+
}
|
122
|
+
|
123
|
+
.trailing-icon {
|
124
|
+
width: 40px;
|
125
|
+
height: 24px;
|
126
|
+
padding-left: 8px;
|
127
|
+
padding-right: 8px;
|
128
|
+
color: var(--element-neutral-color);
|
129
|
+
flex-shrink: 0;
|
130
|
+
flex-grow: 0;
|
131
|
+
|
132
|
+
}
|
133
|
+
|
134
|
+
::slotted([slot="label"]) {
|
135
|
+
/* UI/Body */
|
136
|
+
font-family: 'Noto Sans';
|
137
|
+
font-size: 16px;
|
138
|
+
font-style: normal;
|
139
|
+
font-weight: 370;
|
140
|
+
line-height: 24px;
|
141
|
+
/* 150% */
|
142
|
+
text-decoration: none;
|
143
|
+
color: var(--element-active-color);
|
144
|
+
}
|
145
|
+
|
146
|
+
::slotted([slot="description"]) {
|
147
|
+
font-family: 'Noto Sans';
|
148
|
+
font-size: 12px;
|
149
|
+
font-style: normal;
|
150
|
+
font-weight: 370;
|
151
|
+
line-height: 16px;
|
152
|
+
/* 133.333% */
|
153
|
+
color: var(--element-neutral-color);
|
154
|
+
}
|
155
|
+
|
156
|
+
.double-line ::slotted([slot="description"]) {
|
157
|
+
white-space: nowrap;
|
158
|
+
overflow: hidden;
|
159
|
+
text-overflow: ellipsis;
|
160
|
+
}
|
161
|
+
|
162
|
+
.status {
|
163
|
+
/* UI/Body */
|
164
|
+
font-family: 'Noto Sans';
|
165
|
+
font-size: 16px;
|
166
|
+
font-style: normal;
|
167
|
+
font-weight: 370;
|
168
|
+
line-height: 24px;
|
169
|
+
/* 150% */
|
170
|
+
text-decoration: none;
|
171
|
+
color: var(--element-neutral-color);
|
172
|
+
}
|
173
|
+
|
174
|
+
.graphic {
|
175
|
+
width: 100%;
|
176
|
+
}
|
177
|
+
|
178
|
+
.graphic-border .graphic {
|
179
|
+
border-bottom: 1px solid var(--border-outline-color);
|
180
|
+
margin-bottom: -1px;
|
181
|
+
}
|
182
|
+
|
183
|
+
.info .graphic {
|
184
|
+
border-radius: 6px;
|
185
|
+
box-shadow: var(--shadow-flat);
|
186
|
+
overflow: hidden;
|
187
|
+
}
|
188
|
+
`;
|
189
|
+
export {
|
190
|
+
compentStyle as default
|
191
|
+
};
|
192
|
+
//# sourceMappingURL=rich-button.css.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"rich-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
export declare enum ObcRichButtonPosition {
|
3
|
+
Regular = "regular",
|
4
|
+
Top = "top",
|
5
|
+
Bottom = "bottom",
|
6
|
+
Center = "center"
|
7
|
+
}
|
8
|
+
export type ObcRichButtonPositionType = 'regular' | 'top' | 'bottom' | 'center';
|
9
|
+
export declare enum ObcRichButtonSize {
|
10
|
+
SingleLine = "single-line",
|
11
|
+
DoubleLine = "double-line",
|
12
|
+
MultiLine = "multi-line"
|
13
|
+
}
|
14
|
+
export type ObcRichButtonSizeType = 'single-line' | 'double-line' | 'multi-line';
|
15
|
+
export declare class ObcRichButton extends LitElement {
|
16
|
+
position: ObcRichButtonPositionType;
|
17
|
+
size: ObcRichButtonSizeType;
|
18
|
+
info: boolean;
|
19
|
+
hasLeadingIcon: boolean;
|
20
|
+
hasTrailingIcon: boolean;
|
21
|
+
hasStatus: boolean;
|
22
|
+
hasGraphic: boolean;
|
23
|
+
graphicBorder: boolean;
|
24
|
+
border: boolean;
|
25
|
+
render(): import("lit-html").TemplateResult<1>;
|
26
|
+
static styles: import("lit").CSSResult;
|
27
|
+
}
|
28
|
+
declare global {
|
29
|
+
interface HTMLElementTagNameMap {
|
30
|
+
'obc-rich-button': ObcRichButton;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
//# sourceMappingURL=rich-button.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"rich-button.d.ts","sourceRoot":"","sources":["../../../src/components/rich-button/rich-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,oBAAY,qBAAqB;IAC/B,OAAO,YAAY;IACnB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB;AACD,MAAM,MAAM,yBAAyB,GAAG,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhF,oBAAY,iBAAiB;IAC3B,UAAU,gBAAgB;IAC1B,UAAU,gBAAgB;IAC1B,SAAS,eAAe;CACzB;AACD,MAAM,MAAM,qBAAqB,GAC7B,aAAa,GACb,aAAa,GACb,YAAY,CAAC;AAEjB,qBACa,aAAc,SAAQ,UAAU;IACjB,QAAQ,EAAE,yBAAyB,CAC7B;IACN,IAAI,EAAE,qBAAqB,CACtB;IACJ,IAAI,UAAS;IACkB,cAAc,UAChE;IACmD,eAAe,UAClE;IAC4C,SAAS,UAAS;IACjB,UAAU,UAAS;IAChB,aAAa,UAAS;IACnD,MAAM,UAAS;IAEjC,MAAM;IAkDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
@@ -0,0 +1,118 @@
|
|
1
|
+
import { unsafeCSS, LitElement, html, nothing } from "lit";
|
2
|
+
import { property, customElement } from "lit/decorators.js";
|
3
|
+
import compentStyle from "./rich-button.css.js";
|
4
|
+
import { classMap } from "lit/directives/class-map.js";
|
5
|
+
var __defProp = Object.defineProperty;
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
7
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
8
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
9
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
10
|
+
if (decorator = decorators[i])
|
11
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
12
|
+
if (kind && result)
|
13
|
+
__defProp(target, key, result);
|
14
|
+
return result;
|
15
|
+
};
|
16
|
+
var ObcRichButtonPosition = /* @__PURE__ */ ((ObcRichButtonPosition2) => {
|
17
|
+
ObcRichButtonPosition2["Regular"] = "regular";
|
18
|
+
ObcRichButtonPosition2["Top"] = "top";
|
19
|
+
ObcRichButtonPosition2["Bottom"] = "bottom";
|
20
|
+
ObcRichButtonPosition2["Center"] = "center";
|
21
|
+
return ObcRichButtonPosition2;
|
22
|
+
})(ObcRichButtonPosition || {});
|
23
|
+
var ObcRichButtonSize = /* @__PURE__ */ ((ObcRichButtonSize2) => {
|
24
|
+
ObcRichButtonSize2["SingleLine"] = "single-line";
|
25
|
+
ObcRichButtonSize2["DoubleLine"] = "double-line";
|
26
|
+
ObcRichButtonSize2["MultiLine"] = "multi-line";
|
27
|
+
return ObcRichButtonSize2;
|
28
|
+
})(ObcRichButtonSize || {});
|
29
|
+
let ObcRichButton = class extends LitElement {
|
30
|
+
constructor() {
|
31
|
+
super(...arguments);
|
32
|
+
this.position = "regular";
|
33
|
+
this.size = "single-line";
|
34
|
+
this.info = false;
|
35
|
+
this.hasLeadingIcon = false;
|
36
|
+
this.hasTrailingIcon = false;
|
37
|
+
this.hasStatus = false;
|
38
|
+
this.hasGraphic = false;
|
39
|
+
this.graphicBorder = false;
|
40
|
+
this.border = false;
|
41
|
+
}
|
42
|
+
render() {
|
43
|
+
return html`
|
44
|
+
<div
|
45
|
+
class=${classMap({
|
46
|
+
wrapper: true,
|
47
|
+
[this.position]: true,
|
48
|
+
[this.size]: true,
|
49
|
+
"graphic-border": this.graphicBorder,
|
50
|
+
info: this.info,
|
51
|
+
border: this.border
|
52
|
+
})}
|
53
|
+
>
|
54
|
+
<button>
|
55
|
+
${this.hasGraphic ? html`<div class="graphic"><slot name="graphic"></slot></div>` : nothing}
|
56
|
+
<div class="container">
|
57
|
+
<div class="container-content">
|
58
|
+
${this.hasLeadingIcon ? html`<div class="leading-icon">
|
59
|
+
<slot name="leading-icon"></slot>
|
60
|
+
</div>` : nothing}
|
61
|
+
<div class="content">
|
62
|
+
<slot name="label"></slot>
|
63
|
+
${this.size === "single-line" ? nothing : html`<slot name="description"></slot>`}
|
64
|
+
</div>
|
65
|
+
</div>
|
66
|
+
${this.hasStatus ? html`
|
67
|
+
<div class="status">
|
68
|
+
<slot name="status"></slot>
|
69
|
+
</div>
|
70
|
+
` : nothing}
|
71
|
+
${this.hasTrailingIcon ? html`
|
72
|
+
<div class="trailing-icon">
|
73
|
+
<slot name="trailing-icon"></slot>
|
74
|
+
</div>
|
75
|
+
` : nothing}
|
76
|
+
</div>
|
77
|
+
</button>
|
78
|
+
</div>
|
79
|
+
`;
|
80
|
+
}
|
81
|
+
};
|
82
|
+
ObcRichButton.styles = unsafeCSS(compentStyle);
|
83
|
+
__decorateClass([
|
84
|
+
property({ type: String })
|
85
|
+
], ObcRichButton.prototype, "position", 2);
|
86
|
+
__decorateClass([
|
87
|
+
property({ type: String })
|
88
|
+
], ObcRichButton.prototype, "size", 2);
|
89
|
+
__decorateClass([
|
90
|
+
property({ type: Boolean })
|
91
|
+
], ObcRichButton.prototype, "info", 2);
|
92
|
+
__decorateClass([
|
93
|
+
property({ type: Boolean, attribute: "has-leading-icon" })
|
94
|
+
], ObcRichButton.prototype, "hasLeadingIcon", 2);
|
95
|
+
__decorateClass([
|
96
|
+
property({ type: Boolean, attribute: "has-trailing-icon" })
|
97
|
+
], ObcRichButton.prototype, "hasTrailingIcon", 2);
|
98
|
+
__decorateClass([
|
99
|
+
property({ type: Boolean, attribute: "has-status" })
|
100
|
+
], ObcRichButton.prototype, "hasStatus", 2);
|
101
|
+
__decorateClass([
|
102
|
+
property({ type: Boolean, attribute: "has-graphic" })
|
103
|
+
], ObcRichButton.prototype, "hasGraphic", 2);
|
104
|
+
__decorateClass([
|
105
|
+
property({ type: Boolean, attribute: "graphic-border" })
|
106
|
+
], ObcRichButton.prototype, "graphicBorder", 2);
|
107
|
+
__decorateClass([
|
108
|
+
property({ type: Boolean })
|
109
|
+
], ObcRichButton.prototype, "border", 2);
|
110
|
+
ObcRichButton = __decorateClass([
|
111
|
+
customElement("obc-rich-button")
|
112
|
+
], ObcRichButton);
|
113
|
+
export {
|
114
|
+
ObcRichButton,
|
115
|
+
ObcRichButtonPosition,
|
116
|
+
ObcRichButtonSize
|
117
|
+
};
|
118
|
+
//# sourceMappingURL=rich-button.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"rich-button.js","sources":["../../../src/components/rich-button/rich-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './rich-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport enum ObcRichButtonPosition {\n Regular = 'regular',\n Top = 'top',\n Bottom = 'bottom',\n Center = 'center',\n}\nexport type ObcRichButtonPositionType = 'regular' | 'top' | 'bottom' | 'center';\n\nexport enum ObcRichButtonSize {\n SingleLine = 'single-line',\n DoubleLine = 'double-line',\n MultiLine = 'multi-line',\n}\nexport type ObcRichButtonSizeType =\n | 'single-line'\n | 'double-line'\n | 'multi-line';\n\n@customElement('obc-rich-button')\nexport class ObcRichButton extends LitElement {\n @property({type: String}) position: ObcRichButtonPositionType =\n ObcRichButtonPosition.Regular;\n @property({type: String}) size: ObcRichButtonSizeType =\n ObcRichButtonSize.SingleLine;\n @property({type: Boolean}) info = false;\n @property({type: Boolean, attribute: 'has-leading-icon'}) hasLeadingIcon =\n false;\n @property({type: Boolean, attribute: 'has-trailing-icon'}) hasTrailingIcon =\n false;\n @property({type: Boolean, attribute: 'has-status'}) hasStatus = false;\n @property({type: Boolean, attribute: 'has-graphic'}) hasGraphic = false;\n @property({type: Boolean, attribute: 'graphic-border'}) graphicBorder = false;\n @property({type: Boolean}) border = false;\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n [this.position]: true,\n [this.size]: true,\n 'graphic-border': this.graphicBorder,\n info: this.info,\n border: this.border,\n })}\n >\n <button>\n ${this.hasGraphic\n ? html`<div class=\"graphic\"><slot name=\"graphic\"></slot></div>`\n : nothing}\n <div class=\"container\">\n <div class=\"container-content\">\n ${this.hasLeadingIcon\n ? html`<div class=\"leading-icon\">\n <slot name=\"leading-icon\"></slot>\n </div>`\n : nothing}\n <div class=\"content\">\n <slot name=\"label\"></slot>\n ${this.size === ObcRichButtonSize.SingleLine\n ? nothing\n : html`<slot name=\"description\"></slot>`}\n </div>\n </div>\n ${this.hasStatus\n ? html`\n <div class=\"status\">\n <slot name=\"status\"></slot>\n </div>\n `\n : nothing}\n ${this.hasTrailingIcon\n ? html`\n <div class=\"trailing-icon\">\n <slot name=\"trailing-icon\"></slot>\n </div>\n `\n : nothing}\n </div>\n </button>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-rich-button': ObcRichButton;\n }\n}\n"],"names":["ObcRichButtonPosition","ObcRichButtonSize"],"mappings":";;;;;;;;;;;;;;;AAKY,IAAA,0CAAAA,2BAAL;AACLA,yBAAA,SAAU,IAAA;AACVA,yBAAA,KAAM,IAAA;AACNA,yBAAA,QAAS,IAAA;AACTA,yBAAA,QAAS,IAAA;AAJCA,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAQA,IAAA,sCAAAC,uBAAL;AACLA,qBAAA,YAAa,IAAA;AACbA,qBAAA,YAAa,IAAA;AACbA,qBAAA,WAAY,IAAA;AAHFA,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAWC,IAAA,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,WAAA;AAEA,SAAA,OAAA;AACgC,SAAA,OAAA;AAEhC,SAAA,iBAAA;AAEA,SAAA,kBAAA;AAC8D,SAAA,YAAA;AACE,SAAA,aAAA;AACM,SAAA,gBAAA;AACpC,SAAA,SAAA;AAAA,EAAA;AAAA,EAE3B,SAAS;AACT,WAAA;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,CAAC,KAAK,QAAQ,GAAG;AAAA,MACjB,CAAC,KAAK,IAAI,GAAG;AAAA,MACb,kBAAkB,KAAK;AAAA,MACvB,MAAM,KAAK;AAAA,MACX,QAAQ,KAAK;AAAA,IAAA,CACd,CAAC;AAAA;AAAA;AAAA,YAGE,KAAK,aACH,gEACA,OAAO;AAAA;AAAA;AAAA,gBAGL,KAAK,iBACH;AAAA;AAAA,4BAGA,OAAO;AAAA;AAAA;AAAA,kBAGP,KAAK,SAAS,gBACZ,UACA,sCAAsC;AAAA;AAAA;AAAA,cAG5C,KAAK,YACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA,cACT,KAAK,kBACH;AAAA;AAAA;AAAA;AAAA,oBAKA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAGF;AAlEa,cAiEK,SAAS,UAAU,YAAY;AAhErB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,cACe,WAAA,YAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,cAGe,WAAA,QAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GALd,cAKgB,WAAA,QAAA,CAAA;AAC+B,gBAAA;AAAA,EAAzD,SAAS,EAAC,MAAM,SAAS,WAAW,oBAAmB;AAAA,GAN7C,cAM+C,WAAA,kBAAA,CAAA;AAEC,gBAAA;AAAA,EAA1D,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAR9C,cAQgD,WAAA,mBAAA,CAAA;AAEP,gBAAA;AAAA,EAAnD,SAAS,EAAC,MAAM,SAAS,WAAW,cAAa;AAAA,GAVvC,cAUyC,WAAA,aAAA,CAAA;AACC,gBAAA;AAAA,EAApD,SAAS,EAAC,MAAM,SAAS,WAAW,eAAc;AAAA,GAXxC,cAW0C,WAAA,cAAA,CAAA;AACG,gBAAA;AAAA,EAAvD,SAAS,EAAC,MAAM,SAAS,WAAW,kBAAiB;AAAA,GAZ3C,cAY6C,WAAA,iBAAA,CAAA;AAC7B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,SAAQ;AAAA,GAbd,cAagB,WAAA,UAAA,CAAA;AAbhB,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import { css } from "lit";
|
2
|
+
const compentStyle = css`.wrapper {
|
3
|
+
width: 100%;
|
4
|
+
}
|
5
|
+
.wrapper {
|
6
|
+
border-color: var(--flat-enabled-border-color);
|
7
|
+
background-color: var(--flat-enabled-background-color);
|
8
|
+
border-width: 1px;
|
9
|
+
border-style: solid;
|
10
|
+
cursor: pointer;
|
11
|
+
}
|
12
|
+
.wrapper:focus {
|
13
|
+
outline: none;
|
14
|
+
}
|
15
|
+
.wrapper.activated {
|
16
|
+
border-color: var(--flat-activated-border-color);
|
17
|
+
background-color: var(--flat-activated-background-color);
|
18
|
+
}
|
19
|
+
.wrapper:focus-visible {
|
20
|
+
outline-color: hsla(211, 100%, 44%, 0.3);
|
21
|
+
outline-width: 4px;
|
22
|
+
outline-style: solid;
|
23
|
+
}
|
24
|
+
.wrapper:hover {
|
25
|
+
border-color: var(--flat-hover-border-color);
|
26
|
+
background-color: var(--flat-hover-background-color);
|
27
|
+
}
|
28
|
+
.wrapper:active {
|
29
|
+
border-color: var(--flat-pressed-border-color);
|
30
|
+
background-color: var(--flat-pressed-background-color);
|
31
|
+
}
|
32
|
+
.wrapper:disabled {
|
33
|
+
border-color: var(--flat-disabled-border-color);
|
34
|
+
background-color: var(--flat-disabled-background-color);
|
35
|
+
cursor: not-allowed;
|
36
|
+
color: var(--on-flat-disabled-color);
|
37
|
+
}
|
38
|
+
.wrapper:focus-visible {
|
39
|
+
outline-offset: -4px;
|
40
|
+
}
|
41
|
+
.wrapper img {
|
42
|
+
width: 100%;
|
43
|
+
height: 100%;
|
44
|
+
}`;
|
45
|
+
export {
|
46
|
+
compentStyle as default
|
47
|
+
};
|
48
|
+
//# sourceMappingURL=vendor-button.css.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"vendor-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
export declare class ObcVendorButton extends LitElement {
|
3
|
+
imageSrc: string;
|
4
|
+
alt: string;
|
5
|
+
render(): import("lit-html").TemplateResult<1>;
|
6
|
+
static styles: import("lit").CSSResult;
|
7
|
+
}
|
8
|
+
declare global {
|
9
|
+
interface HTMLElementTagNameMap {
|
10
|
+
'obc-vendor-button': ObcVendorButton;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
//# sourceMappingURL=vendor-button.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"vendor-button.d.ts","sourceRoot":"","sources":["../../../src/components/vendor-button/vendor-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIhD,qBACa,eAAgB,SAAQ,UAAU;IACK,QAAQ,SAAM;IACtC,GAAG,SAAU;IAE9B,MAAM;IAQf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import { unsafeCSS, LitElement, html } from "lit";
|
2
|
+
import { property, customElement } from "lit/decorators.js";
|
3
|
+
import compentStyle from "./vendor-button.css.js";
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
7
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
8
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
9
|
+
if (decorator = decorators[i])
|
10
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
11
|
+
if (kind && result)
|
12
|
+
__defProp(target, key, result);
|
13
|
+
return result;
|
14
|
+
};
|
15
|
+
let ObcVendorButton = class extends LitElement {
|
16
|
+
constructor() {
|
17
|
+
super(...arguments);
|
18
|
+
this.imageSrc = "";
|
19
|
+
this.alt = "logo";
|
20
|
+
}
|
21
|
+
render() {
|
22
|
+
return html`
|
23
|
+
<button class="wrapper">
|
24
|
+
<img src=${this.imageSrc} alt=${this.alt} />
|
25
|
+
</button>
|
26
|
+
`;
|
27
|
+
}
|
28
|
+
};
|
29
|
+
ObcVendorButton.styles = unsafeCSS(compentStyle);
|
30
|
+
__decorateClass([
|
31
|
+
property({ type: String, attribute: "image-src" })
|
32
|
+
], ObcVendorButton.prototype, "imageSrc", 2);
|
33
|
+
__decorateClass([
|
34
|
+
property({ type: String })
|
35
|
+
], ObcVendorButton.prototype, "alt", 2);
|
36
|
+
ObcVendorButton = __decorateClass([
|
37
|
+
customElement("obc-vendor-button")
|
38
|
+
], ObcVendorButton);
|
39
|
+
export {
|
40
|
+
ObcVendorButton
|
41
|
+
};
|
42
|
+
//# sourceMappingURL=vendor-button.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"vendor-button.js","sources":["../../../src/components/vendor-button/vendor-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport compentStyle from './vendor-button.css?inline';\n\n@customElement('obc-vendor-button')\nexport class ObcVendorButton extends LitElement {\n @property({type: String, attribute: 'image-src'}) imageSrc = '';\n @property({type: String}) alt = 'logo';\n\n override render() {\n return html`\n <button class=\"wrapper\">\n <img src=${this.imageSrc} alt=${this.alt} />\n </button>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-vendor-button': ObcVendorButton;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAKa,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACwD,SAAA,WAAA;AAC7B,SAAA,MAAA;AAAA,EAAA;AAAA,EAEvB,SAAS;AACT,WAAA;AAAA;AAAA,mBAEQ,KAAK,QAAQ,QAAQ,KAAK,GAAG;AAAA;AAAA;AAAA,EAG9C;AAGF;AAba,gBAYK,SAAS,UAAU,YAAY;AAXG,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,QAAQ,WAAW,aAAY;AAAA,GADrC,gBACuC,WAAA,YAAA,CAAA;AACxB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,gBAEe,WAAA,OAAA,CAAA;AAFf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { LitElement } from 'lit';
|
2
|
-
export declare class
|
2
|
+
export declare class Obi01ContentCopy extends LitElement {
|
3
3
|
useCssColor: boolean;
|
4
4
|
private icon;
|
5
5
|
private iconCss;
|
@@ -8,7 +8,7 @@ export declare class Obi07TargetRadar extends LitElement {
|
|
8
8
|
}
|
9
9
|
declare global {
|
10
10
|
interface HTMLElementTagNameMap {
|
11
|
-
'obi-
|
11
|
+
'obi-01-content-copy': Obi01ContentCopy;
|
12
12
|
}
|
13
13
|
}
|
14
|
-
//# sourceMappingURL=icon-
|
14
|
+
//# sourceMappingURL=icon-01-content-copy.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"icon-
|
1
|
+
{"version":3,"file":"icon-01-content-copy.d.ts","sourceRoot":"","sources":["../../src/icons/icon-01-content-copy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAG/C,qBACa,gBAAiB,SAAQ,UAAU;IACS,WAAW,UAAS;IAE3E,OAAO,CAAC,IAAI,CAGZ;IAEA,OAAO,CAAC,OAAO,CAGf;IAES,MAAM;IAMf,OAAgB,MAAM,0BASpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}
|
@@ -11,16 +11,16 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
11
11
|
__defProp(target, key, result);
|
12
12
|
return result;
|
13
13
|
};
|
14
|
-
let
|
14
|
+
let Obi01ContentCopy = class extends LitElement {
|
15
15
|
constructor() {
|
16
16
|
super(...arguments);
|
17
17
|
this.useCssColor = false;
|
18
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
|
19
|
+
<path d="M9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5Z" fill="currentColor"/>
|
20
20
|
</svg>
|
21
21
|
`;
|
22
22
|
this.iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
23
|
-
<path
|
23
|
+
<path d="M9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5Z" style="fill: var(--element-active-color)"/>
|
24
24
|
</svg>
|
25
25
|
`;
|
26
26
|
}
|
@@ -30,7 +30,7 @@ let Obi07TargetRadar = class extends LitElement {
|
|
30
30
|
`;
|
31
31
|
}
|
32
32
|
};
|
33
|
-
|
33
|
+
Obi01ContentCopy.styles = css`
|
34
34
|
.wrapper {
|
35
35
|
height: 100%;
|
36
36
|
width: 100%;
|
@@ -42,11 +42,11 @@ Obi07TargetRadar.styles = css`
|
|
42
42
|
`;
|
43
43
|
__decorateClass([
|
44
44
|
property({ type: Boolean, attribute: "use-css-color" })
|
45
|
-
],
|
46
|
-
|
47
|
-
customElement("obi-
|
48
|
-
],
|
45
|
+
], Obi01ContentCopy.prototype, "useCssColor", 2);
|
46
|
+
Obi01ContentCopy = __decorateClass([
|
47
|
+
customElement("obi-01-content-copy")
|
48
|
+
], Obi01ContentCopy);
|
49
49
|
export {
|
50
|
-
|
50
|
+
Obi01ContentCopy
|
51
51
|
};
|
52
|
-
//# sourceMappingURL=icon-
|
52
|
+
//# sourceMappingURL=icon-01-content-copy.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"icon-01-content-copy.js","sources":["../../src/icons/icon-01-content-copy.ts"],"sourcesContent":["import {LitElement, html, css, svg} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\n@customElement('obi-01-content-copy')\nexport class Obi01ContentCopy 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=\"M9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5Z\" 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=\"M9 18C8.45 18 7.97917 17.8042 7.5875 17.4125C7.19583 17.0208 7 16.55 7 16V4C7 3.45 7.19583 2.97917 7.5875 2.5875C7.97917 2.19583 8.45 2 9 2H18C18.55 2 19.0208 2.19583 19.4125 2.5875C19.8042 2.97917 20 3.45 20 4V16C20 16.55 19.8042 17.0208 19.4125 17.4125C19.0208 17.8042 18.55 18 18 18H9ZM9 16H18V4H9V16ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6H5V20H16V22H5Z\" 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-01-content-copy': Obi01ContentCopy;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIa,IAAA,mBAAN,cAA+B,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AACgE,SAAA,cAAA;AAErE,SAAQ,OAAO;AAAA;AAAA;AAAA;AAKf,SAAQ,UAAU;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAKT,SAAS;AACT,WAAA;AAAA,6BACkB,KAAK,cAAc,KAAK,UAAU,KAAK,IAAI;AAAA;AAAA,EAEtE;AAYF;AA7Ba,iBAmBK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAlB8B,gBAAA;AAAA,EAAtD,SAAS,EAAC,MAAM,SAAS,WAAW,iBAAgB;AAAA,GAD1C,iBAC4C,WAAA,eAAA,CAAA;AAD5C,mBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,gBAAA;"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { LitElement } from 'lit';
|
2
|
-
export declare class
|
2
|
+
export declare class Obi01ContentCut extends LitElement {
|
3
3
|
useCssColor: boolean;
|
4
4
|
private icon;
|
5
5
|
private iconCss;
|
@@ -8,7 +8,7 @@ export declare class Obi07TargetIasSelected extends LitElement {
|
|
8
8
|
}
|
9
9
|
declare global {
|
10
10
|
interface HTMLElementTagNameMap {
|
11
|
-
'obi-
|
11
|
+
'obi-01-content-cut': Obi01ContentCut;
|
12
12
|
}
|
13
13
|
}
|
14
|
-
//# sourceMappingURL=icon-
|
14
|
+
//# sourceMappingURL=icon-01-content-cut.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"icon-01-content-cut.d.ts","sourceRoot":"","sources":["../../src/icons/icon-01-content-cut.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAG/C,qBACa,eAAgB,SAAQ,UAAU;IACU,WAAW,UAAS;IAE3E,OAAO,CAAC,IAAI,CAGZ;IAEA,OAAO,CAAC,OAAO,CAGf;IAES,MAAM;IAMf,OAAgB,MAAM,0BASpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}
|