@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.
Files changed (86) hide show
  1. package/.release-it.json +12 -0
  2. package/.storybook/main.ts +17 -0
  3. package/.storybook/preview.ts +0 -1
  4. package/CHANGELOG.md +118 -41
  5. package/__snapshots__/application-topbar--inactive.png +0 -0
  6. package/__snapshots__/button-button--raised-disabled.png +0 -0
  7. package/__snapshots__/button-rich-button--with-graphic-info.png +0 -0
  8. package/__snapshots__/input-slider--no-icons.png +0 -0
  9. package/__snapshots__/input-slider--no-value.png +0 -0
  10. package/__snapshots__/line-corner-line--primary.png +0 -0
  11. package/__snapshots__/line-example--air.png +0 -0
  12. package/__snapshots__/line-example--connector.png +0 -0
  13. package/__snapshots__/line-example--electric.png +0 -0
  14. package/__snapshots__/line-example--fluid.png +0 -0
  15. package/__snapshots__/line-horizontal-line--primary.png +0 -0
  16. package/__snapshots__/line-vertical-line--complex.png +0 -0
  17. package/__snapshots__/line-vertical-line--primary.png +0 -0
  18. package/custom-elements.json +679 -297
  19. package/dist/automation/corner-line/corner-line.d.ts +22 -0
  20. package/dist/automation/corner-line/corner-line.d.ts.map +1 -0
  21. package/dist/automation/corner-line/corner-line.js +161 -0
  22. package/dist/automation/corner-line/corner-line.js.map +1 -0
  23. package/dist/automation/horizontal-line/horizontal-line.d.ts +15 -0
  24. package/dist/automation/horizontal-line/horizontal-line.d.ts.map +1 -0
  25. package/dist/automation/horizontal-line/horizontal-line.js +110 -0
  26. package/dist/automation/horizontal-line/horizontal-line.js.map +1 -0
  27. package/dist/automation/index.d.ts +20 -0
  28. package/dist/automation/index.d.ts.map +1 -0
  29. package/dist/automation/index.js +42 -0
  30. package/dist/automation/index.js.map +1 -0
  31. package/dist/automation/vertical-line/vertical-line.d.ts +15 -0
  32. package/dist/automation/vertical-line/vertical-line.d.ts.map +1 -0
  33. package/dist/automation/vertical-line/vertical-line.js +111 -0
  34. package/dist/automation/vertical-line/vertical-line.js.map +1 -0
  35. package/dist/components/brilliance-menu/brilliance-menu.d.ts.map +1 -1
  36. package/dist/components/brilliance-menu/brilliance-menu.js +2 -0
  37. package/dist/components/brilliance-menu/brilliance-menu.js.map +1 -1
  38. package/dist/components/button/button.css.js +2 -2
  39. package/dist/components/navigation-item/navigation-item.css.js +2 -1
  40. package/dist/components/navigation-item/navigation-item.css.js.map +1 -1
  41. package/dist/components/notification-button/notification-button.css.js +1 -1
  42. package/dist/components/rich-button/rich-button.css.js +20 -10
  43. package/dist/components/rich-button/rich-button.css.js.map +1 -1
  44. package/dist/components/rich-button/rich-button.d.ts +1 -0
  45. package/dist/components/rich-button/rich-button.d.ts.map +1 -1
  46. package/dist/components/rich-button/rich-button.js +5 -0
  47. package/dist/components/rich-button/rich-button.js.map +1 -1
  48. package/dist/components/slider/slider.css.js +20 -0
  49. package/dist/components/slider/slider.css.js.map +1 -1
  50. package/dist/components/slider/slider.d.ts +8 -0
  51. package/dist/components/slider/slider.d.ts.map +1 -1
  52. package/dist/components/slider/slider.js +44 -18
  53. package/dist/components/slider/slider.js.map +1 -1
  54. package/dist/components/top-bar/top-bar.css.js +5 -1
  55. package/dist/components/top-bar/top-bar.css.js.map +1 -1
  56. package/dist/components/top-bar/top-bar.d.ts.map +1 -1
  57. package/dist/components/top-bar/top-bar.js +8 -8
  58. package/dist/components/top-bar/top-bar.js.map +1 -1
  59. package/fix-generated.cjs +1 -0
  60. package/package.json +20 -26
  61. package/src/automation/corner-line/corner-line.stories.ts +31 -0
  62. package/src/automation/corner-line/corner-line.ts +167 -0
  63. package/src/automation/horizontal-line/horizontal-line.stories.ts +28 -0
  64. package/src/automation/horizontal-line/horizontal-line.ts +100 -0
  65. package/src/automation/index.ts +41 -0
  66. package/src/automation/line.stories.ts +142 -0
  67. package/src/automation/vertical-line/vertical-line.stories.ts +71 -0
  68. package/src/automation/vertical-line/vertical-line.ts +104 -0
  69. package/src/components/brilliance-menu/brilliance-menu.ts +2 -0
  70. package/src/components/rich-button/rich-button.css +15 -2
  71. package/src/components/rich-button/rich-button.stories.ts +36 -0
  72. package/src/components/rich-button/rich-button.ts +2 -0
  73. package/src/components/slider/slider.css +20 -0
  74. package/src/components/slider/slider.stories.ts +20 -1
  75. package/src/components/slider/slider.ts +43 -19
  76. package/src/components/top-bar/top-bar.css +4 -0
  77. package/src/components/top-bar/top-bar.ts +10 -8
  78. package/src/palettes/variables.css +64 -43
  79. package/.yarnrc.yml +0 -1
  80. package/script/svg-instruments/convert-svg.ts +0 -246
  81. package/script/svg-instruments/environment.d.ts +0 -7
  82. package/script/svg-instruments/exports.ts +0 -82
  83. package/script/svg-instruments/figma-types.ts +0 -804
  84. package/script/svg-instruments/figmaImport.ts +0 -79
  85. package/script/svg-instruments/main.ts +0 -109
  86. 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;IAgDf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
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,UAQjC,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;AA5Ea,kBA2EK,SAAS,UAAU,cAAc;AA1EvB,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;"}
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;