@oicl/openbridge-webcomponents 0.0.8 → 0.0.10
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 +17 -0
- package/.storybook/preview.ts +0 -1
- package/CHANGELOG.md +118 -41
- package/__snapshots__/application-topbar--inactive.png +0 -0
- package/__snapshots__/button-button--raised-disabled.png +0 -0
- package/__snapshots__/button-rich-button--with-graphic-info.png +0 -0
- package/__snapshots__/input-slider--no-icons.png +0 -0
- package/__snapshots__/input-slider--no-value.png +0 -0
- package/__snapshots__/line-corner-line--primary.png +0 -0
- package/__snapshots__/line-example--air.png +0 -0
- package/__snapshots__/line-example--connector.png +0 -0
- package/__snapshots__/line-example--electric.png +0 -0
- package/__snapshots__/line-example--fluid.png +0 -0
- package/__snapshots__/line-horizontal-line--primary.png +0 -0
- package/__snapshots__/line-vertical-line--complex.png +0 -0
- package/__snapshots__/line-vertical-line--primary.png +0 -0
- package/custom-elements.json +679 -297
- package/dist/automation/corner-line/corner-line.d.ts +22 -0
- package/dist/automation/corner-line/corner-line.d.ts.map +1 -0
- package/dist/automation/corner-line/corner-line.js +161 -0
- package/dist/automation/corner-line/corner-line.js.map +1 -0
- package/dist/automation/horizontal-line/horizontal-line.d.ts +15 -0
- package/dist/automation/horizontal-line/horizontal-line.d.ts.map +1 -0
- package/dist/automation/horizontal-line/horizontal-line.js +110 -0
- package/dist/automation/horizontal-line/horizontal-line.js.map +1 -0
- package/dist/automation/index.d.ts +20 -0
- package/dist/automation/index.d.ts.map +1 -0
- package/dist/automation/index.js +42 -0
- package/dist/automation/index.js.map +1 -0
- package/dist/automation/vertical-line/vertical-line.d.ts +15 -0
- package/dist/automation/vertical-line/vertical-line.d.ts.map +1 -0
- package/dist/automation/vertical-line/vertical-line.js +111 -0
- package/dist/automation/vertical-line/vertical-line.js.map +1 -0
- package/dist/components/brilliance-menu/brilliance-menu.d.ts.map +1 -1
- package/dist/components/brilliance-menu/brilliance-menu.js +2 -0
- package/dist/components/brilliance-menu/brilliance-menu.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 +20 -10
- package/dist/components/rich-button/rich-button.css.js.map +1 -1
- package/dist/components/rich-button/rich-button.d.ts +1 -0
- package/dist/components/rich-button/rich-button.d.ts.map +1 -1
- package/dist/components/rich-button/rich-button.js +5 -0
- package/dist/components/rich-button/rich-button.js.map +1 -1
- package/dist/components/slider/slider.css.js +20 -0
- package/dist/components/slider/slider.css.js.map +1 -1
- package/dist/components/slider/slider.d.ts +8 -0
- package/dist/components/slider/slider.d.ts.map +1 -1
- package/dist/components/slider/slider.js +44 -18
- package/dist/components/slider/slider.js.map +1 -1
- package/dist/components/top-bar/top-bar.css.js +5 -1
- package/dist/components/top-bar/top-bar.css.js.map +1 -1
- package/dist/components/top-bar/top-bar.d.ts.map +1 -1
- package/dist/components/top-bar/top-bar.js +8 -8
- package/dist/components/top-bar/top-bar.js.map +1 -1
- package/fix-generated.cjs +1 -0
- package/package.json +20 -26
- package/src/automation/corner-line/corner-line.stories.ts +31 -0
- package/src/automation/corner-line/corner-line.ts +167 -0
- package/src/automation/horizontal-line/horizontal-line.stories.ts +28 -0
- package/src/automation/horizontal-line/horizontal-line.ts +100 -0
- package/src/automation/index.ts +41 -0
- package/src/automation/line.stories.ts +142 -0
- package/src/automation/vertical-line/vertical-line.stories.ts +71 -0
- package/src/automation/vertical-line/vertical-line.ts +104 -0
- package/src/components/brilliance-menu/brilliance-menu.ts +2 -0
- package/src/components/rich-button/rich-button.css +15 -2
- package/src/components/rich-button/rich-button.stories.ts +36 -0
- package/src/components/rich-button/rich-button.ts +2 -0
- package/src/components/slider/slider.css +20 -0
- package/src/components/slider/slider.stories.ts +20 -1
- package/src/components/slider/slider.ts +43 -19
- package/src/components/top-bar/top-bar.css +4 -0
- package/src/components/top-bar/top-bar.ts +10 -8
- package/src/palettes/variables.css +64 -43
- package/.yarnrc.yml +0 -1
- package/script/svg-instruments/convert-svg.ts +0 -246
- package/script/svg-instruments/environment.d.ts +0 -7
- package/script/svg-instruments/exports.ts +0 -82
- package/script/svg-instruments/figma-types.ts +0 -804
- package/script/svg-instruments/figmaImport.ts +0 -79
- package/script/svg-instruments/main.ts +0 -109
- package/test.svg +0 -3
@@ -0,0 +1,22 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
import { LineMediumType, LineTypeType } from '../index';
|
3
|
+
export declare enum CornerLineDirection {
|
4
|
+
topRight = "top-right",
|
5
|
+
topLeft = "top-left",
|
6
|
+
bottomRight = "bottom-right",
|
7
|
+
bottomLeft = "bottom-left"
|
8
|
+
}
|
9
|
+
export type CornerLineDirectionType = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
10
|
+
export declare class ObcCornerLine extends LitElement {
|
11
|
+
medium: LineMediumType;
|
12
|
+
direction: CornerLineDirectionType;
|
13
|
+
lineType: LineTypeType;
|
14
|
+
render(): import("lit-html").TemplateResult<1>;
|
15
|
+
static styles: import("lit").CSSResult;
|
16
|
+
}
|
17
|
+
declare global {
|
18
|
+
interface HTMLElementTagNameMap {
|
19
|
+
'obc-corner-line': ObcCornerLine;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
//# sourceMappingURL=corner-line.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"corner-line.d.ts","sourceRoot":"","sources":["../../../src/automation/corner-line/corner-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAEL,cAAc,EAGd,YAAY,EAEb,MAAM,UAAU,CAAC;AAElB,oBAAY,mBAAmB;IAC7B,QAAQ,cAAc;IACtB,OAAO,aAAa;IACpB,WAAW,iBAAiB;IAC5B,UAAU,gBAAgB;CAC3B;AAED,MAAM,MAAM,uBAAuB,GAC/B,WAAW,GACX,UAAU,GACV,cAAc,GACd,aAAa,CAAC;AAElB,qBACa,aAAc,SAAQ,UAAU;IACjB,MAAM,EAAE,cAAc,CAAqB;IAC3C,SAAS,EAAE,uBAAuB,CAC7B;IACmB,QAAQ,EAAE,YAAY,CACvD;IAER,MAAM;IA0Hf,OAAgB,MAAM,0BAKpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
@@ -0,0 +1,161 @@
|
|
1
|
+
import { css, LitElement, html } from "lit";
|
2
|
+
import { property, customElement } from "lit/decorators.js";
|
3
|
+
import { LineMedium, LineType, lineColor, lineWidth } from "../index.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
|
+
var CornerLineDirection = /* @__PURE__ */ ((CornerLineDirection2) => {
|
16
|
+
CornerLineDirection2["topRight"] = "top-right";
|
17
|
+
CornerLineDirection2["topLeft"] = "top-left";
|
18
|
+
CornerLineDirection2["bottomRight"] = "bottom-right";
|
19
|
+
CornerLineDirection2["bottomLeft"] = "bottom-left";
|
20
|
+
return CornerLineDirection2;
|
21
|
+
})(CornerLineDirection || {});
|
22
|
+
let ObcCornerLine = class extends LitElement {
|
23
|
+
constructor() {
|
24
|
+
super(...arguments);
|
25
|
+
this.medium = LineMedium.normal;
|
26
|
+
this.direction = "top-right";
|
27
|
+
this.lineType = LineType.fluid;
|
28
|
+
}
|
29
|
+
render() {
|
30
|
+
let rotation = 270;
|
31
|
+
if (this.direction === "top-left") {
|
32
|
+
rotation = 180;
|
33
|
+
} else if (this.direction === "bottom-left") {
|
34
|
+
rotation = 90;
|
35
|
+
} else if (this.direction === "bottom-right") {
|
36
|
+
rotation = 0;
|
37
|
+
}
|
38
|
+
if (this.lineType === LineType.connector) {
|
39
|
+
return html`
|
40
|
+
<svg
|
41
|
+
width="24"
|
42
|
+
height="24"
|
43
|
+
viewBox="0 0 24 24"
|
44
|
+
fill="none"
|
45
|
+
xmlns="http://www.w3.org/2000/svg"
|
46
|
+
transform="rotate(${rotation})"
|
47
|
+
>
|
48
|
+
<path
|
49
|
+
d="M16.5 11.5L15 11.5C14.9951 11.5 14.9902 11.5 14.9853 11.5C13.0826 11.5079 11.5382 13.0339 11.5007 14.9294C11.5002 14.9529 11.5 14.9764 11.5 15V16.5L12.5 16.5L12.5 15C12.5 13.6355 13.5932 12.5263 14.9516 12.5005C14.9677 12.5002 14.9838 12.5 15 12.5L16.5 12.5V11.5Z"
|
50
|
+
fill="var(--element-neutral-color)"
|
51
|
+
/>
|
52
|
+
<path
|
53
|
+
d="M24 11.5H22.5V12.5L24 12.5V11.5Z"
|
54
|
+
fill="var(--element-neutral-color)"
|
55
|
+
/>
|
56
|
+
<path
|
57
|
+
d="M21 11.5H18V12.5L21 12.5V11.5Z"
|
58
|
+
fill="var(--element-neutral-color)"
|
59
|
+
/>
|
60
|
+
<path
|
61
|
+
d="M11.5 18V21H12.5L12.5 18H11.5Z"
|
62
|
+
fill="var(--element-neutral-color)"
|
63
|
+
/>
|
64
|
+
<path
|
65
|
+
d="M11.5 22.5V24H12.5V22.5H11.5Z"
|
66
|
+
fill="var(--element-neutral-color)"
|
67
|
+
/>
|
68
|
+
</svg>
|
69
|
+
`;
|
70
|
+
}
|
71
|
+
const color = lineColor(this.medium);
|
72
|
+
const width = lineWidth(this.lineType);
|
73
|
+
const r1 = 6 - 0.5 - width / 2;
|
74
|
+
const r2 = 6 + 0.5 + width / 2;
|
75
|
+
if (this.lineType === LineType.air) {
|
76
|
+
const r12 = 2.5;
|
77
|
+
const r22 = 11.5;
|
78
|
+
return html`
|
79
|
+
<svg
|
80
|
+
class="line"
|
81
|
+
xmlns="http://www.w3.org/2000/svg"
|
82
|
+
viewBox="0 0 24 24"
|
83
|
+
height="24"
|
84
|
+
width="24"
|
85
|
+
transform="rotate(${rotation})"
|
86
|
+
>
|
87
|
+
<path
|
88
|
+
d="M 17 24 v -4 a 3 3 0 0 1 3 -3 h 4 v -10 h -6 a 11 11 0 0 0 -11 11 v 6 z"
|
89
|
+
stroke="none"
|
90
|
+
fill="var(${color.inner})"
|
91
|
+
/>
|
92
|
+
<path
|
93
|
+
d="M ${12 + 0.5 + width / 2} 24 v -4 a ${r12} ${r12} 0 0 1 ${r12} -${r12} h 4"
|
94
|
+
stroke-width="1"
|
95
|
+
stroke="var(${color.outer})"
|
96
|
+
fill="none"
|
97
|
+
/>
|
98
|
+
<path
|
99
|
+
d="M ${12 - 0.5 - width / 2} 24 v -6 a ${r22} ${r22} 0 0 1 ${r22} -${r22} h 6"
|
100
|
+
stroke-width="1"
|
101
|
+
stroke="var(${color.outer})"
|
102
|
+
fill="none"
|
103
|
+
/>
|
104
|
+
</svg>
|
105
|
+
`;
|
106
|
+
} else {
|
107
|
+
return html`
|
108
|
+
<svg
|
109
|
+
class="line"
|
110
|
+
xmlns="http://www.w3.org/2000/svg"
|
111
|
+
viewBox="0 0 24 24"
|
112
|
+
height="24"
|
113
|
+
width="24"
|
114
|
+
transform="rotate(${rotation})"
|
115
|
+
>
|
116
|
+
<path
|
117
|
+
d="M 12 24 v -6 a 6 6 0 0 1 6 -6 h 6"
|
118
|
+
stroke-width=${width}
|
119
|
+
stroke="var(${color.inner})"
|
120
|
+
fill="none"
|
121
|
+
/>
|
122
|
+
<path
|
123
|
+
d="M ${12 + 0.5 + width / 2} 24 v -6 a ${r1} ${r1} 0 0 1 ${r1} -${r1} h 6"
|
124
|
+
stroke-width="1"
|
125
|
+
stroke="var(${color.outer})"
|
126
|
+
fill="none"
|
127
|
+
/>
|
128
|
+
<path
|
129
|
+
d="M ${12 - 0.5 - width / 2} 24 v -6 a ${r2} ${r2} 0 0 1 ${r2} -${r2} h 6"
|
130
|
+
stroke-width="1"
|
131
|
+
stroke="var(${color.outer})"
|
132
|
+
fill="none"
|
133
|
+
/>
|
134
|
+
</svg>
|
135
|
+
`;
|
136
|
+
}
|
137
|
+
}
|
138
|
+
};
|
139
|
+
ObcCornerLine.styles = css`
|
140
|
+
:host {
|
141
|
+
display: block;
|
142
|
+
line-height: 0;
|
143
|
+
}
|
144
|
+
`;
|
145
|
+
__decorateClass([
|
146
|
+
property({ type: String })
|
147
|
+
], ObcCornerLine.prototype, "medium", 2);
|
148
|
+
__decorateClass([
|
149
|
+
property({ type: String })
|
150
|
+
], ObcCornerLine.prototype, "direction", 2);
|
151
|
+
__decorateClass([
|
152
|
+
property({ type: String, attribute: "line-type" })
|
153
|
+
], ObcCornerLine.prototype, "lineType", 2);
|
154
|
+
ObcCornerLine = __decorateClass([
|
155
|
+
customElement("obc-corner-line")
|
156
|
+
], ObcCornerLine);
|
157
|
+
export {
|
158
|
+
CornerLineDirection,
|
159
|
+
ObcCornerLine
|
160
|
+
};
|
161
|
+
//# sourceMappingURL=corner-line.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"corner-line.js","sources":["../../../src/automation/corner-line/corner-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n LineMedium,\n LineMediumType,\n lineColor,\n LineType,\n LineTypeType,\n lineWidth,\n} from '../index';\n\nexport enum CornerLineDirection {\n topRight = 'top-right',\n topLeft = 'top-left',\n bottomRight = 'bottom-right',\n bottomLeft = 'bottom-left',\n}\n\nexport type CornerLineDirectionType =\n | 'top-right'\n | 'top-left'\n | 'bottom-right'\n | 'bottom-left';\n\n@customElement('obc-corner-line')\nexport class ObcCornerLine extends LitElement {\n @property({type: String}) medium: LineMediumType = LineMedium.normal;\n @property({type: String}) direction: CornerLineDirectionType =\n CornerLineDirection.topRight;\n @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =\n LineType.fluid;\n\n override render() {\n let rotation = 270;\n if (this.direction === CornerLineDirection.topLeft) {\n rotation = 180;\n } else if (this.direction === CornerLineDirection.bottomLeft) {\n rotation = 90;\n } else if (this.direction === CornerLineDirection.bottomRight) {\n rotation = 0;\n }\n\n if (this.lineType === LineType.connector) {\n return html`\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n transform=\"rotate(${rotation})\"\n >\n <path\n d=\"M16.5 11.5L15 11.5C14.9951 11.5 14.9902 11.5 14.9853 11.5C13.0826 11.5079 11.5382 13.0339 11.5007 14.9294C11.5002 14.9529 11.5 14.9764 11.5 15V16.5L12.5 16.5L12.5 15C12.5 13.6355 13.5932 12.5263 14.9516 12.5005C14.9677 12.5002 14.9838 12.5 15 12.5L16.5 12.5V11.5Z\"\n fill=\"var(--element-neutral-color)\"\n />\n <path\n d=\"M24 11.5H22.5V12.5L24 12.5V11.5Z\"\n fill=\"var(--element-neutral-color)\"\n />\n <path\n d=\"M21 11.5H18V12.5L21 12.5V11.5Z\"\n fill=\"var(--element-neutral-color)\"\n />\n <path\n d=\"M11.5 18V21H12.5L12.5 18H11.5Z\"\n fill=\"var(--element-neutral-color)\"\n />\n <path\n d=\"M11.5 22.5V24H12.5V22.5H11.5Z\"\n fill=\"var(--element-neutral-color)\"\n />\n </svg>\n `;\n }\n\n const color = lineColor(this.medium);\n const width = lineWidth(this.lineType);\n\n const r1 = 6 - 0.5 - width / 2;\n const r2 = 6 + 0.5 + width / 2;\n\n if (this.lineType === LineType.air) {\n const r1 = 2.5;\n const r2 = 11.5;\n return html`\n <svg\n class=\"line\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n height=\"24\"\n width=\"24\"\n transform=\"rotate(${rotation})\"\n >\n <path\n d=\"M 17 24 v -4 a 3 3 0 0 1 3 -3 h 4 v -10 h -6 a 11 11 0 0 0 -11 11 v 6 z\"\n stroke=\"none\"\n fill=\"var(${color.inner})\"\n />\n <path\n d=\"M ${12 +\n 0.5 +\n width / 2} 24 v -4 a ${r1} ${r1} 0 0 1 ${r1} -${r1} h 4\"\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n fill=\"none\"\n />\n <path\n d=\"M ${12 -\n 0.5 -\n width / 2} 24 v -6 a ${r2} ${r2} 0 0 1 ${r2} -${r2} h 6\"\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n fill=\"none\"\n />\n </svg>\n `;\n } else {\n return html`\n <svg\n class=\"line\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n height=\"24\"\n width=\"24\"\n transform=\"rotate(${rotation})\"\n >\n <path\n d=\"M 12 24 v -6 a 6 6 0 0 1 6 -6 h 6\"\n stroke-width=${width}\n stroke=\"var(${color.inner})\"\n fill=\"none\"\n />\n <path\n d=\"M ${12 +\n 0.5 +\n width / 2} 24 v -6 a ${r1} ${r1} 0 0 1 ${r1} -${r1} h 6\"\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n fill=\"none\"\n />\n <path\n d=\"M ${12 -\n 0.5 -\n width / 2} 24 v -6 a ${r2} ${r2} 0 0 1 ${r2} -${r2} h 6\"\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n fill=\"none\"\n />\n </svg>\n `;\n }\n }\n\n static override styles = css`\n :host {\n display: block;\n line-height: 0;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-corner-line': ObcCornerLine;\n }\n}\n"],"names":["CornerLineDirection","r1","r2"],"mappings":";;;;;;;;;;;;;;AAWY,IAAA,wCAAAA,yBAAL;AACLA,uBAAA,UAAW,IAAA;AACXA,uBAAA,SAAU,IAAA;AACVA,uBAAA,aAAc,IAAA;AACdA,uBAAA,YAAa,IAAA;AAJHA,SAAAA;AAAA,GAAA,uBAAA,CAAA,CAAA;AAcC,IAAA,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAyB,WAAW;AAE5D,SAAA,YAAA;AACgD,SAAA,WAChD,SAAS;AAAA,EAAA;AAAA,EAEF,SAAS;AAChB,QAAI,WAAW;AACX,QAAA,KAAK,cAAc,YAA6B;AACvC,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,eAAgC;AACjD,iBAAA;AAAA,IAAA,WACF,KAAK,cAAc,gBAAiC;AAClD,iBAAA;AAAA,IACb;AAEI,QAAA,KAAK,aAAa,SAAS,WAAW;AACjC,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBlC;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAE/B,UAAA,KAAK,IAAI,MAAM,QAAQ;AACvB,UAAA,KAAK,IAAI,MAAM,QAAQ;AAEzB,QAAA,KAAK,aAAa,SAAS,KAAK;AAClC,YAAMC,MAAK;AACX,YAAMC,MAAK;AACJ,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKd,MAAM,KAAK;AAAA;AAAA;AAAA,mBAGhB,KACP,MACA,QAAQ,CAAC,cAAcD,GAAE,IAAIA,GAAE,UAAUA,GAAE,KAAKA,GAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAcC,GAAE,IAAIA,GAAE,UAAUA,GAAE,KAAKA,GAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,OAK1B;AACE,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOiB,QAAQ;AAAA;AAAA;AAAA;AAAA,2BAIX,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,mBAIlB,KACP,MACA,QAAQ,CAAC,cAAc,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;AAAA;AAAA,0BAEpC,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjC;AAAA,EACF;AAQF;AAvIa,cAiIK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAhIC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,cACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,cAEe,WAAA,aAAA,CAAA;AAEwB,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,QAAQ,WAAW,aAAY;AAAA,GAJrC,cAIuC,WAAA,YAAA,CAAA;AAJvC,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
import { LineMediumType, LineTypeType } from '../index';
|
3
|
+
export declare class ObcHorizontalLine extends LitElement {
|
4
|
+
medium: LineMediumType;
|
5
|
+
lineType: LineTypeType;
|
6
|
+
length: number;
|
7
|
+
render(): import("lit-html").TemplateResult<1>;
|
8
|
+
static styles: import("lit").CSSResult;
|
9
|
+
}
|
10
|
+
declare global {
|
11
|
+
interface HTMLElementTagNameMap {
|
12
|
+
'obc-horizontal-line': ObcHorizontalLine;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
//# sourceMappingURL=horizontal-line.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"horizontal-line.d.ts","sourceRoot":"","sources":["../../../src/automation/horizontal-line/horizontal-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAEL,cAAc,EAGd,YAAY,EAEb,MAAM,UAAU,CAAC;AAElB,qBACa,iBAAkB,SAAQ,UAAU;IACrB,MAAM,EAAE,cAAc,CAAqB;IACnB,QAAQ,EAAE,YAAY,CACvD;IACS,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAiEf,OAAgB,MAAM,0BASpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
|
@@ -0,0 +1,110 @@
|
|
1
|
+
import { css, LitElement, html } from "lit";
|
2
|
+
import { property, customElement } from "lit/decorators.js";
|
3
|
+
import { LineMedium, LineType, lineColor, lineWidth } from "../index.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 ObcHorizontalLine = class extends LitElement {
|
16
|
+
constructor() {
|
17
|
+
super(...arguments);
|
18
|
+
this.medium = LineMedium.normal;
|
19
|
+
this.lineType = LineType.fluid;
|
20
|
+
this.length = 1;
|
21
|
+
}
|
22
|
+
render() {
|
23
|
+
if (this.lineType === LineType.connector) {
|
24
|
+
const length2 = this.length * 24;
|
25
|
+
return html`<svg
|
26
|
+
width="${length2}"
|
27
|
+
height="24"
|
28
|
+
viewBox="0 0 ${length2} 24"
|
29
|
+
fill="none"
|
30
|
+
xmlns="http://www.w3.org/2000/svg"
|
31
|
+
>
|
32
|
+
<line
|
33
|
+
x1="0"
|
34
|
+
y1="12"
|
35
|
+
x2="${length2}"
|
36
|
+
y2="12"
|
37
|
+
stroke-width="1"
|
38
|
+
stroke="var(--element-neutral-color)"
|
39
|
+
stroke-dasharray="4,2"
|
40
|
+
stroke-dashoffset="2"
|
41
|
+
/>
|
42
|
+
</svg> `;
|
43
|
+
}
|
44
|
+
const color = lineColor(this.medium);
|
45
|
+
const length = this.length * 24 + 1;
|
46
|
+
const width = lineWidth(this.lineType);
|
47
|
+
return html`
|
48
|
+
<div class="wrapper" style="height: 24px; width: ${this.length * 24}px;">
|
49
|
+
<svg
|
50
|
+
class="line"
|
51
|
+
xmlns="http://www.w3.org/2000/svg"
|
52
|
+
viewBox="-.5 0 ${length} 24"
|
53
|
+
height="24"
|
54
|
+
width=${length}
|
55
|
+
>
|
56
|
+
<line
|
57
|
+
x1="-0.5"
|
58
|
+
y1="12"
|
59
|
+
x2="${length - 0.5}"
|
60
|
+
y2="12"
|
61
|
+
stroke-width=${width}
|
62
|
+
stroke="var(${color.inner})"
|
63
|
+
/>
|
64
|
+
<line
|
65
|
+
x1="-0.5"
|
66
|
+
y1="${12 - 0.5 - width / 2}"
|
67
|
+
x2="${length - 0.5}"
|
68
|
+
y2="${12 - 0.5 - width / 2}"
|
69
|
+
stroke-width="1"
|
70
|
+
stroke="var(${color.outer})"
|
71
|
+
/>
|
72
|
+
<line
|
73
|
+
x1="-0.5"
|
74
|
+
y1="${12 + 0.5 + width / 2}"
|
75
|
+
x2="${length - 0.5}"
|
76
|
+
y2="${12 + 0.5 + width / 2}"
|
77
|
+
stroke-width="1"
|
78
|
+
stroke="var(${color.outer})"
|
79
|
+
/>
|
80
|
+
</svg>
|
81
|
+
</div>
|
82
|
+
`;
|
83
|
+
}
|
84
|
+
};
|
85
|
+
ObcHorizontalLine.styles = css`
|
86
|
+
:host {
|
87
|
+
display: block;
|
88
|
+
line-height: 0;
|
89
|
+
}
|
90
|
+
.line {
|
91
|
+
position: relative;
|
92
|
+
left: -0.5px;
|
93
|
+
}
|
94
|
+
`;
|
95
|
+
__decorateClass([
|
96
|
+
property({ type: String })
|
97
|
+
], ObcHorizontalLine.prototype, "medium", 2);
|
98
|
+
__decorateClass([
|
99
|
+
property({ type: String, attribute: "line-type" })
|
100
|
+
], ObcHorizontalLine.prototype, "lineType", 2);
|
101
|
+
__decorateClass([
|
102
|
+
property({ type: Number })
|
103
|
+
], ObcHorizontalLine.prototype, "length", 2);
|
104
|
+
ObcHorizontalLine = __decorateClass([
|
105
|
+
customElement("obc-horizontal-line")
|
106
|
+
], ObcHorizontalLine);
|
107
|
+
export {
|
108
|
+
ObcHorizontalLine
|
109
|
+
};
|
110
|
+
//# sourceMappingURL=horizontal-line.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"horizontal-line.js","sources":["../../../src/automation/horizontal-line/horizontal-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n LineMedium,\n LineMediumType,\n lineColor,\n LineType,\n LineTypeType,\n lineWidth,\n} from '../index';\n\n@customElement('obc-horizontal-line')\nexport class ObcHorizontalLine extends LitElement {\n @property({type: String}) medium: LineMediumType = LineMedium.normal;\n @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =\n LineType.fluid;\n @property({type: Number}) length: number = 1;\n\n override render() {\n if (this.lineType === LineType.connector) {\n const length = this.length * 24;\n return html`<svg\n width=\"${length}\"\n height=\"24\"\n viewBox=\"0 0 ${length} 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n x1=\"0\"\n y1=\"12\"\n x2=\"${length}\"\n y2=\"12\"\n stroke-width=\"1\"\n stroke=\"var(--element-neutral-color)\"\n stroke-dasharray=\"4,2\"\n stroke-dashoffset=\"2\"\n />\n </svg> `;\n }\n\n const color = lineColor(this.medium);\n const length = this.length * 24 + 1;\n const width = lineWidth(this.lineType);\n\n return html`\n <div class=\"wrapper\" style=\"height: 24px; width: ${this.length * 24}px;\">\n <svg\n class=\"line\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-.5 0 ${length} 24\"\n height=\"24\"\n width=${length}\n >\n <line\n x1=\"-0.5\"\n y1=\"12\"\n x2=\"${length - 0.5}\"\n y2=\"12\"\n stroke-width=${width}\n stroke=\"var(${color.inner})\"\n />\n <line\n x1=\"-0.5\"\n y1=\"${12 - 0.5 - width / 2}\"\n x2=\"${length - 0.5}\"\n y2=\"${12 - 0.5 - width / 2}\"\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n />\n <line\n x1=\"-0.5\"\n y1=\"${12 + 0.5 + width / 2}\"\n x2=\"${length - 0.5}\"\n y2=\"${12 + 0.5 + width / 2}\"\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n />\n </svg>\n </div>\n `;\n }\n\n static override styles = css`\n :host {\n display: block;\n line-height: 0;\n }\n .line {\n position: relative;\n left: -0.5px;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-horizontal-line': ObcHorizontalLine;\n }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAYa,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAyB,WAAW;AACZ,SAAA,WAChD,SAAS;AACgC,SAAA,SAAA;AAAA,EAAA;AAAA,EAElC,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClCA,YAAAA,UAAS,KAAK,SAAS;AACtB,aAAA;AAAA,iBACIA,OAAM;AAAA;AAAA,uBAEAA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAObA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEM,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,SAAS,KAAK,SAAS,KAAK;AAC5B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAE9B,WAAA;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,2BAI9C,MAAM;AAAA;AAAA,kBAEf,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKN,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,kBAInB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACpB,SAAS,GAAG;AAAA,kBACZ,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEZ,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,kBAInB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACpB,SAAS,GAAG;AAAA,kBACZ,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEZ,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAYF;AAjFa,kBAuEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAtEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,UAAA,CAAA;AACwB,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,QAAQ,WAAW,aAAY;AAAA,GAFrC,kBAEuC,WAAA,YAAA,CAAA;AAExB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,kBAIe,WAAA,UAAA,CAAA;AAJf,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
export declare enum LineMedium {
|
2
|
+
normal = "normal",
|
3
|
+
empty = "empty",
|
4
|
+
water = "water",
|
5
|
+
air = "air"
|
6
|
+
}
|
7
|
+
export type LineMediumType = keyof typeof LineMedium;
|
8
|
+
export declare enum LineType {
|
9
|
+
fluid = "fluid",
|
10
|
+
electric = "electric",
|
11
|
+
air = "air",
|
12
|
+
connector = "connector"
|
13
|
+
}
|
14
|
+
export type LineTypeType = keyof typeof LineType;
|
15
|
+
export declare function lineColor(medium: LineMediumType): {
|
16
|
+
inner: string;
|
17
|
+
outer: string;
|
18
|
+
};
|
19
|
+
export declare function lineWidth(lineType: LineTypeType): number;
|
20
|
+
//# sourceMappingURL=index.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/automation/index.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,GAAG,QAAQ;CACZ;AACD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC;AAErD,oBAAY,QAAQ;IAClB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,GAAG,QAAQ;IACX,SAAS,cAAc;CACxB;AACD,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AAEjD,wBAAgB,SAAS,CAAC,MAAM,EAAE,cAAc,GAAG;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAQA;AAED,wBAAgB,SAAS,CAAC,QAAQ,EAAE,YAAY,GAAG,MAAM,CAWxD"}
|
@@ -0,0 +1,42 @@
|
|
1
|
+
var LineMedium = /* @__PURE__ */ ((LineMedium2) => {
|
2
|
+
LineMedium2["normal"] = "normal";
|
3
|
+
LineMedium2["empty"] = "empty";
|
4
|
+
LineMedium2["water"] = "water";
|
5
|
+
LineMedium2["air"] = "air";
|
6
|
+
return LineMedium2;
|
7
|
+
})(LineMedium || {});
|
8
|
+
var LineType = /* @__PURE__ */ ((LineType2) => {
|
9
|
+
LineType2["fluid"] = "fluid";
|
10
|
+
LineType2["electric"] = "electric";
|
11
|
+
LineType2["air"] = "air";
|
12
|
+
LineType2["connector"] = "connector";
|
13
|
+
return LineType2;
|
14
|
+
})(LineType || {});
|
15
|
+
function lineColor(medium) {
|
16
|
+
let innerColor = "--automation-pipe-primary-color";
|
17
|
+
if (medium === "empty") {
|
18
|
+
innerColor = "--automation-pipe-primary-inverted-color";
|
19
|
+
} else if (medium === "water" || medium === "air") {
|
20
|
+
innerColor = "--automation-fresh-water";
|
21
|
+
}
|
22
|
+
return { inner: innerColor, outer: "--automation-pipe-tertiary-color" };
|
23
|
+
}
|
24
|
+
function lineWidth(lineType) {
|
25
|
+
if (lineType === "electric") {
|
26
|
+
return 2;
|
27
|
+
} else if (lineType === "connector") {
|
28
|
+
return 1;
|
29
|
+
} else if (lineType === "fluid") {
|
30
|
+
return 4;
|
31
|
+
} else if (lineType === "air") {
|
32
|
+
return 10;
|
33
|
+
}
|
34
|
+
throw new Error("Unknown line type");
|
35
|
+
}
|
36
|
+
export {
|
37
|
+
LineMedium,
|
38
|
+
LineType,
|
39
|
+
lineColor,
|
40
|
+
lineWidth
|
41
|
+
};
|
42
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/automation/index.ts"],"sourcesContent":["export enum LineMedium {\n normal = 'normal',\n empty = 'empty',\n water = 'water',\n air = 'air',\n}\nexport type LineMediumType = keyof typeof LineMedium;\n\nexport enum LineType {\n fluid = 'fluid',\n electric = 'electric',\n air = 'air',\n connector = 'connector',\n}\nexport type LineTypeType = keyof typeof LineType;\n\nexport function lineColor(medium: LineMediumType): {\n inner: string;\n outer: string;\n} {\n let innerColor = '--automation-pipe-primary-color';\n if (medium === LineMedium.empty) {\n innerColor = '--automation-pipe-primary-inverted-color';\n } else if (medium === LineMedium.water || medium === LineMedium.air) {\n innerColor = '--automation-fresh-water';\n }\n return {inner: innerColor, outer: '--automation-pipe-tertiary-color'};\n}\n\nexport function lineWidth(lineType: LineTypeType): number {\n if (lineType === LineType.electric) {\n return 2;\n } else if (lineType === LineType.connector) {\n return 1;\n } else if (lineType === LineType.fluid) {\n return 4;\n } else if (lineType === LineType.air) {\n return 10;\n }\n throw new Error('Unknown line type');\n}\n"],"names":["LineMedium","LineType"],"mappings":"AAAY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,OAAQ,IAAA;AACRA,cAAA,OAAQ,IAAA;AACRA,cAAA,KAAM,IAAA;AAJIA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAQA,IAAA,6BAAAC,cAAL;AACLA,YAAA,OAAQ,IAAA;AACRA,YAAA,UAAW,IAAA;AACXA,YAAA,KAAM,IAAA;AACNA,YAAA,WAAY,IAAA;AAJFA,SAAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAQL,SAAS,UAAU,QAGxB;AACA,MAAI,aAAa;AACjB,MAAI,WAAW,SAAkB;AAClB,iBAAA;AAAA,EACJ,WAAA,WAAW,WAAoB,WAAW,OAAgB;AACtD,iBAAA;AAAA,EACf;AACA,SAAO,EAAC,OAAO,YAAY,OAAO,mCAAkC;AACtE;AAEO,SAAS,UAAU,UAAgC;AACxD,MAAI,aAAa,YAAmB;AAC3B,WAAA;AAAA,EAAA,WACE,aAAa,aAAoB;AACnC,WAAA;AAAA,EAAA,WACE,aAAa,SAAgB;AAC/B,WAAA;AAAA,EAAA,WACE,aAAa,OAAc;AAC7B,WAAA;AAAA,EACT;AACM,QAAA,IAAI,MAAM,mBAAmB;AACrC;"}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
import { LineMediumType, LineTypeType } from '../index';
|
3
|
+
export declare class ObcVerticalLine extends LitElement {
|
4
|
+
medium: LineMediumType;
|
5
|
+
lineType: LineTypeType;
|
6
|
+
length: number;
|
7
|
+
render(): import("lit-html").TemplateResult<1>;
|
8
|
+
static styles: import("lit").CSSResult;
|
9
|
+
}
|
10
|
+
declare global {
|
11
|
+
interface HTMLElementTagNameMap {
|
12
|
+
'obc-vertical-line': ObcVerticalLine;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
//# sourceMappingURL=vertical-line.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"vertical-line.d.ts","sourceRoot":"","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAEL,cAAc,EAGd,YAAY,EAEb,MAAM,UAAU,CAAC;AAMlB,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,cAAc,CAAqB;IACnB,QAAQ,EAAE,YAAY,CACvD;IACS,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAgEf,OAAgB,MAAM,0BAUpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
|
@@ -0,0 +1,111 @@
|
|
1
|
+
import { css, LitElement, html } from "lit";
|
2
|
+
import { property, customElement } from "lit/decorators.js";
|
3
|
+
import { LineMedium, LineType, lineColor, lineWidth } from "../index.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 ObcVerticalLine = class extends LitElement {
|
16
|
+
constructor() {
|
17
|
+
super(...arguments);
|
18
|
+
this.medium = LineMedium.normal;
|
19
|
+
this.lineType = LineType.fluid;
|
20
|
+
this.length = 1;
|
21
|
+
}
|
22
|
+
render() {
|
23
|
+
if (this.lineType === LineType.connector) {
|
24
|
+
const length2 = this.length * 24;
|
25
|
+
return html`<svg
|
26
|
+
width="24"
|
27
|
+
height="${length2}"
|
28
|
+
viewBox="0 0 24 ${length2}"
|
29
|
+
fill="none"
|
30
|
+
xmlns="http://www.w3.org/2000/svg"
|
31
|
+
>
|
32
|
+
<line
|
33
|
+
y1="0"
|
34
|
+
x1="12"
|
35
|
+
y2="${length2}"
|
36
|
+
x2="12"
|
37
|
+
stroke-width="1"
|
38
|
+
stroke="var(--element-neutral-color)"
|
39
|
+
stroke-dasharray="4,2"
|
40
|
+
stroke-dashoffset="2"
|
41
|
+
/>
|
42
|
+
</svg> `;
|
43
|
+
}
|
44
|
+
const length = this.length * 24 + 1;
|
45
|
+
const color = lineColor(this.medium);
|
46
|
+
const width = lineWidth(this.lineType);
|
47
|
+
return html`
|
48
|
+
<div class="wrapper" style="width: 24px; height: ${this.length * 24}px;">
|
49
|
+
<svg
|
50
|
+
class="line"
|
51
|
+
xmlns="http://www.w3.org/2000/svg"
|
52
|
+
viewBox="0 -.5 24 ${length}"
|
53
|
+
width="24"
|
54
|
+
height=${length}
|
55
|
+
>
|
56
|
+
<line
|
57
|
+
y1="-.5"
|
58
|
+
x1="12"
|
59
|
+
y2="${length - 0.5}"
|
60
|
+
x2="12"
|
61
|
+
stroke-width=${width}
|
62
|
+
stroke="var(${color.inner})"
|
63
|
+
/>
|
64
|
+
<line
|
65
|
+
y1="-.5"
|
66
|
+
x1=${12 - 0.5 - width / 2}
|
67
|
+
y2="${length - 0.5}"
|
68
|
+
x2=${12 - 0.5 - width / 2}
|
69
|
+
stroke-width="1"
|
70
|
+
stroke="var(${color.outer})"
|
71
|
+
/>
|
72
|
+
<line
|
73
|
+
y1="-.5"
|
74
|
+
x1=${12 + 0.5 + width / 2}
|
75
|
+
y2="${length - 0.5}"
|
76
|
+
x2=${12 + 0.5 + width / 2}
|
77
|
+
stroke-width="1"
|
78
|
+
stroke="var(${color.outer})"
|
79
|
+
/>
|
80
|
+
</svg>
|
81
|
+
</div>
|
82
|
+
`;
|
83
|
+
}
|
84
|
+
};
|
85
|
+
ObcVerticalLine.styles = css`
|
86
|
+
:host {
|
87
|
+
display: block;
|
88
|
+
line-height: 0;
|
89
|
+
}
|
90
|
+
|
91
|
+
.line {
|
92
|
+
position: relative;
|
93
|
+
top: -0.5px;
|
94
|
+
}
|
95
|
+
`;
|
96
|
+
__decorateClass([
|
97
|
+
property({ type: String })
|
98
|
+
], ObcVerticalLine.prototype, "medium", 2);
|
99
|
+
__decorateClass([
|
100
|
+
property({ type: String, attribute: "line-type" })
|
101
|
+
], ObcVerticalLine.prototype, "lineType", 2);
|
102
|
+
__decorateClass([
|
103
|
+
property({ type: Number })
|
104
|
+
], ObcVerticalLine.prototype, "length", 2);
|
105
|
+
ObcVerticalLine = __decorateClass([
|
106
|
+
customElement("obc-vertical-line")
|
107
|
+
], ObcVerticalLine);
|
108
|
+
export {
|
109
|
+
ObcVerticalLine
|
110
|
+
};
|
111
|
+
//# sourceMappingURL=vertical-line.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"vertical-line.js","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {\n LineMedium,\n LineMediumType,\n lineColor,\n LineType,\n LineTypeType,\n lineWidth,\n} from '../index';\n\n/* Vertical line component\n *\n * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.\n */\n@customElement('obc-vertical-line')\nexport class ObcVerticalLine extends LitElement {\n @property({type: String}) medium: LineMediumType = LineMedium.normal;\n @property({type: String, attribute: 'line-type'}) lineType: LineTypeType =\n LineType.fluid;\n @property({type: Number}) length: number = 1;\n\n override render() {\n if (this.lineType === LineType.connector) {\n const length = this.length * 24;\n return html`<svg\n width=\"24\"\n height=\"${length}\"\n viewBox=\"0 0 24 ${length}\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n y1=\"0\"\n x1=\"12\"\n y2=\"${length}\"\n x2=\"12\"\n stroke-width=\"1\"\n stroke=\"var(--element-neutral-color)\"\n stroke-dasharray=\"4,2\"\n stroke-dashoffset=\"2\"\n />\n </svg> `;\n }\n\n const length = this.length * 24 + 1;\n const color = lineColor(this.medium);\n const width = lineWidth(this.lineType);\n return html`\n <div class=\"wrapper\" style=\"width: 24px; height: ${this.length * 24}px;\">\n <svg\n class=\"line\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -.5 24 ${length}\"\n width=\"24\"\n height=${length}\n >\n <line\n y1=\"-.5\"\n x1=\"12\"\n y2=\"${length - 0.5}\"\n x2=\"12\"\n stroke-width=${width}\n stroke=\"var(${color.inner})\"\n />\n <line\n y1=\"-.5\"\n x1=${12 - 0.5 - width / 2}\n y2=\"${length - 0.5}\"\n x2=${12 - 0.5 - width / 2}\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n />\n <line\n y1=\"-.5\"\n x1=${12 + 0.5 + width / 2}\n y2=\"${length - 0.5}\"\n x2=${12 + 0.5 + width / 2}\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n />\n </svg>\n </div>\n `;\n }\n\n static override styles = css`\n :host {\n display: block;\n line-height: 0;\n }\n\n .line {\n position: relative;\n top: -0.5px;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-vertical-line': ObcVerticalLine;\n }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAgBa,IAAA,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAyB,WAAW;AACZ,SAAA,WAChD,SAAS;AACgC,SAAA,SAAA;AAAA,EAAA;AAAA,EAElC,SAAS;AACZ,QAAA,KAAK,aAAa,SAAS,WAAW;AAClCA,YAAAA,UAAS,KAAK,SAAS;AACtB,aAAA;AAAA;AAAA,kBAEKA,OAAM;AAAA,0BACEA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhBA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEM,UAAA,SAAS,KAAK,SAAS,KAAK;AAC5B,UAAA,QAAQ,UAAU,KAAK,MAAM;AAC7B,UAAA,QAAQ,UAAU,KAAK,QAAQ;AAC9B,WAAA;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,+BAI1C,MAAM;AAAA;AAAA,mBAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKP,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAaF;AAjFa,gBAsEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AArEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACwB,gBAAA;AAAA,EAAjD,SAAS,EAAC,MAAM,QAAQ,WAAW,aAAY;AAAA,GAFrC,gBAEuC,WAAA,YAAA,CAAA;AAExB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,gBAIe,WAAA,UAAA,CAAA;AAJf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"brilliance-menu.d.ts","sourceRoot":"","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gCAAgC,CAAC;AACxC,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;GAUG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAC9D;IACkB,UAAU,SAAM;IAE1C,kBAAkB,UAAS;IACgC,eAAe,UAClE;IAER,gBAAgB,CAAC,KAAK,EAAE,WAAW;IASnC,mBAAmB,CAAC,KAAK,EAAE,WAAW;IAS7B,MAAM;
|
1
|
+
{"version":3,"file":"brilliance-menu.d.ts","sourceRoot":"","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGhD,OAAO,4BAA4B,CAAC;AACpC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gCAAgC,CAAC;AACxC,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,oCAAoC,CAAC;AAC5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;GAUG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACrB,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAC9D;IACkB,UAAU,SAAM;IAE1C,kBAAkB,UAAS;IACgC,eAAe,UAClE;IAER,gBAAgB,CAAC,KAAK,EAAE,WAAW;IASnC,mBAAmB,CAAC,KAAK,EAAE,WAAW;IAS7B,MAAM;IAkDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
|
@@ -57,6 +57,8 @@ let ObcBrillianceMenu = class extends LitElement {
|
|
57
57
|
min="0"
|
58
58
|
max="100"
|
59
59
|
hug-container
|
60
|
+
has-left-icon
|
61
|
+
has-right-icon
|
60
62
|
>
|
61
63
|
<obi-04-brilliance-low slot="icon-left"></obi-04-brilliance-low>
|
62
64
|
<obi-04-brilliance-high slot="icon-right"></obi-04-brilliance-high>
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../icon-button/icon-button';\nimport '../slider/slider';\nimport '../toggle-switch/toggle-switch';\nimport '../toggle-button-group/toggle-button-group';\nimport '../toggle-button-option/toggle-button-option';\nimport '../../icons/icon-04-brilliance-low';\nimport '../../icons/icon-04-brilliance-high';\nimport '../../icons/icon-04-night';\nimport '../../icons/icon-04-dusk';\nimport '../../icons/icon-04-day';\nimport '../../icons/icon-04-day-bright';\n\n/**\n * @element obc-brilliance-menu\n *\n * @prop {String} palette - The palette to use. Possible values are 'night', 'dusk', 'day', 'bright'\n * @prop {Number} brightness - The brightness value\n * @prop {Boolean} showAutoBrightness - Show the auto brightness toggle\n * @prop {Boolean} showAutoPalette - Show the auto palette toggle\n *\n * @fires palette-changed - Fires when the palette is changed\n * @fires brightness-changed - Fires when the brightness is changed\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n @property({type: String}) palette: 'night' | 'dusk' | 'day' | 'bright' =\n 'day';\n @property({type: Number}) brightness = 50;\n @property({type: Boolean, attribute: 'show-auto-brightness'})\n showAutoBrightness = false;\n @property({type: Boolean, attribute: 'show-auto-palette'}) showAutoPalette =\n false;\n\n onPaletteChanged(event: CustomEvent) {\n this.palette = event.detail.value;\n this.dispatchEvent(\n new CustomEvent('palette-changed', {\n detail: {value: event.detail.value},\n })\n );\n }\n\n onBrightnessChanged(event: CustomEvent) {\n this.brightness = event.detail;\n this.dispatchEvent(\n new CustomEvent('brightness-changed', {\n detail: {value: event.detail},\n })\n );\n }\n\n override render() {\n return html`\n <div class=\"card\">\n <h3>Brilliance</h3>\n <obc-slider\n value=${this.brightness}\n @value=${this.onBrightnessChanged}\n min=\"0\"\n max=\"100\"\n hug-container\n >\n <obi-04-brilliance-low slot=\"icon-left\"></obi-04-brilliance-low>\n <obi-04-brilliance-high slot=\"icon-right\"></obi-04-brilliance-high>\n </obc-slider>\n ${this.showAutoBrightness\n ? html`<obc-toggle-switch\n label=\"Auto brilliance\"\n ></obc-toggle-switch>`\n : ''}\n <div class=\"divider\"></div>\n <h3>Day - Night</h3>\n <obc-toggle-button-group\n value=${this.palette}\n @value=${this.onPaletteChanged}\n >\n <obc-toggle-button-option value=\"night\">\n <obi-04-night slot=\"icon\"></obi-04-night>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"dusk\">\n <obi-04-dusk slot=\"icon\"></obi-04-dusk>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"day\">\n <obi-04-day slot=\"icon\"></obi-04-day>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"bright\">\n <obi-04-day-bright slot=\"icon\"></obi-04-day-bright>\n </obc-toggle-button-option>\n </obc-toggle-button-group>\n ${this.showAutoPalette\n ? html`<obc-toggle-switch\n label=\"Auto day - night\"\n checked\n ></obc-toggle-switch>`\n : ''}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-brilliance-menu': ObcBrillianceMenu;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2Ba,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,UAAA;AACqC,SAAA,aAAA;AAElB,SAAA,qBAAA;AAEnB,SAAA,kBAAA;AAAA,EAAA;AAAA,EAEF,iBAAiB,OAAoB;AAC9B,SAAA,UAAU,MAAM,OAAO;AACvB,SAAA;AAAA,MACH,IAAI,YAAY,mBAAmB;AAAA,QACjC,QAAQ,EAAC,OAAO,MAAM,OAAO,MAAK;AAAA,MAAA,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,oBAAoB,OAAoB;AACtC,SAAK,aAAa,MAAM;AACnB,SAAA;AAAA,MACH,IAAI,YAAY,sBAAsB;AAAA,QACpC,QAAQ,EAAC,OAAO,MAAM,OAAM;AAAA,MAAA,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA,kBAIO,KAAK,UAAU;AAAA,mBACd,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
1
|
+
{"version":3,"file":"brilliance-menu.js","sources":["../../../src/components/brilliance-menu/brilliance-menu.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport componentStyle from './brilliance-menu.css?inline';\nimport '../icon-button/icon-button';\nimport '../slider/slider';\nimport '../toggle-switch/toggle-switch';\nimport '../toggle-button-group/toggle-button-group';\nimport '../toggle-button-option/toggle-button-option';\nimport '../../icons/icon-04-brilliance-low';\nimport '../../icons/icon-04-brilliance-high';\nimport '../../icons/icon-04-night';\nimport '../../icons/icon-04-dusk';\nimport '../../icons/icon-04-day';\nimport '../../icons/icon-04-day-bright';\n\n/**\n * @element obc-brilliance-menu\n *\n * @prop {String} palette - The palette to use. Possible values are 'night', 'dusk', 'day', 'bright'\n * @prop {Number} brightness - The brightness value\n * @prop {Boolean} showAutoBrightness - Show the auto brightness toggle\n * @prop {Boolean} showAutoPalette - Show the auto palette toggle\n *\n * @fires palette-changed - Fires when the palette is changed\n * @fires brightness-changed - Fires when the brightness is changed\n */\n@customElement('obc-brilliance-menu')\nexport class ObcBrillianceMenu extends LitElement {\n @property({type: String}) palette: 'night' | 'dusk' | 'day' | 'bright' =\n 'day';\n @property({type: Number}) brightness = 50;\n @property({type: Boolean, attribute: 'show-auto-brightness'})\n showAutoBrightness = false;\n @property({type: Boolean, attribute: 'show-auto-palette'}) showAutoPalette =\n false;\n\n onPaletteChanged(event: CustomEvent) {\n this.palette = event.detail.value;\n this.dispatchEvent(\n new CustomEvent('palette-changed', {\n detail: {value: event.detail.value},\n })\n );\n }\n\n onBrightnessChanged(event: CustomEvent) {\n this.brightness = event.detail;\n this.dispatchEvent(\n new CustomEvent('brightness-changed', {\n detail: {value: event.detail},\n })\n );\n }\n\n override render() {\n return html`\n <div class=\"card\">\n <h3>Brilliance</h3>\n <obc-slider\n value=${this.brightness}\n @value=${this.onBrightnessChanged}\n min=\"0\"\n max=\"100\"\n hug-container\n has-left-icon\n has-right-icon\n >\n <obi-04-brilliance-low slot=\"icon-left\"></obi-04-brilliance-low>\n <obi-04-brilliance-high slot=\"icon-right\"></obi-04-brilliance-high>\n </obc-slider>\n ${this.showAutoBrightness\n ? html`<obc-toggle-switch\n label=\"Auto brilliance\"\n ></obc-toggle-switch>`\n : ''}\n <div class=\"divider\"></div>\n <h3>Day - Night</h3>\n <obc-toggle-button-group\n value=${this.palette}\n @value=${this.onPaletteChanged}\n >\n <obc-toggle-button-option value=\"night\">\n <obi-04-night slot=\"icon\"></obi-04-night>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"dusk\">\n <obi-04-dusk slot=\"icon\"></obi-04-dusk>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"day\">\n <obi-04-day slot=\"icon\"></obi-04-day>\n </obc-toggle-button-option>\n <obc-toggle-button-option value=\"bright\">\n <obi-04-day-bright slot=\"icon\"></obi-04-day-bright>\n </obc-toggle-button-option>\n </obc-toggle-button-group>\n ${this.showAutoPalette\n ? html`<obc-toggle-switch\n label=\"Auto day - night\"\n checked\n ></obc-toggle-switch>`\n : ''}\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-brilliance-menu': ObcBrillianceMenu;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2Ba,IAAA,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAEH,SAAA,UAAA;AACqC,SAAA,aAAA;AAElB,SAAA,qBAAA;AAEnB,SAAA,kBAAA;AAAA,EAAA;AAAA,EAEF,iBAAiB,OAAoB;AAC9B,SAAA,UAAU,MAAM,OAAO;AACvB,SAAA;AAAA,MACH,IAAI,YAAY,mBAAmB;AAAA,QACjC,QAAQ,EAAC,OAAO,MAAM,OAAO,MAAK;AAAA,MAAA,CACnC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,oBAAoB,OAAoB;AACtC,SAAK,aAAa,MAAM;AACnB,SAAA;AAAA,MACH,IAAI,YAAY,sBAAsB;AAAA,QACpC,QAAQ,EAAC,OAAO,MAAM,OAAM;AAAA,MAAA,CAC7B;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AACT,WAAA;AAAA;AAAA;AAAA;AAAA,kBAIO,KAAK,UAAU;AAAA,mBACd,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAUjC,KAAK,qBACH;AAAA;AAAA,qCAGA,EAAE;AAAA;AAAA;AAAA;AAAA,kBAII,KAAK,OAAO;AAAA,mBACX,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAe9B,KAAK,kBACH;AAAA;AAAA;AAAA,qCAIA,EAAE;AAAA;AAAA;AAAA,EAGZ;AAGF;AA9Ea,kBA6EK,SAAS,UAAU,cAAc;AA5EvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,kBACe,WAAA,WAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,kBAGe,WAAA,cAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,SAAS,WAAW,wBAAuB;AAAA,GAJjD,kBAKX,WAAA,sBAAA,CAAA;AAC2D,gBAAA;AAAA,EAA1D,SAAS,EAAC,MAAM,SAAS,WAAW,qBAAoB;AAAA,GAN9C,kBAMgD,WAAA,mBAAA,CAAA;AANhD,oBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,iBAAA;"}
|
@@ -195,7 +195,6 @@ const iconStyle = css`.wrapper {
|
|
195
195
|
color: var(--on-raised-disabled-color);
|
196
196
|
}
|
197
197
|
.wrapper.variant-check:not(.checked) {
|
198
|
-
color: var(--on-indent-active-color);
|
199
198
|
/* UI/Body */
|
200
199
|
font-family: 'Noto Sans';
|
201
200
|
font-size: 16px;
|
@@ -204,6 +203,7 @@ const iconStyle = css`.wrapper {
|
|
204
203
|
line-height: 24px;
|
205
204
|
/* 150% */
|
206
205
|
text-decoration: none;
|
206
|
+
color: var(--on-indent-active-color);
|
207
207
|
}
|
208
208
|
.wrapper.variant-check:not(.checked) {
|
209
209
|
cursor: pointer;
|
@@ -248,7 +248,6 @@ const iconStyle = css`.wrapper {
|
|
248
248
|
color: var(--on-indent-disabled-color);
|
249
249
|
}
|
250
250
|
.wrapper.variant-check.checked {
|
251
|
-
color: var(--on-selected-active-color);
|
252
251
|
/* UI/Body-Active */
|
253
252
|
font-family: Noto Sans;
|
254
253
|
font-size: 16px;
|
@@ -256,6 +255,7 @@ const iconStyle = css`.wrapper {
|
|
256
255
|
font-weight: 650;
|
257
256
|
line-height: 24px;
|
258
257
|
/* 150% */
|
258
|
+
color: var(--on-selected-active-color);
|
259
259
|
}
|
260
260
|
.wrapper.variant-check.checked {
|
261
261
|
cursor: pointer;
|