@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.133 → 2.0.0-next.134
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/openbridge-webcomponents.bundle.js +21 -3
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +3 -2
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js +8 -1
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js.map +1 -1
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts +6 -0
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts.map +1 -1
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js +13 -2
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js.map +1 -1
- package/package.json +1 -1
- package/src/components/automation-button-readout-stack/automation-button-readout-stack.css +9 -1
- package/src/components/automation-button-readout-stack/automation-button-readout-stack.ts +15 -2
package/custom-elements.json
CHANGED
|
@@ -4828,7 +4828,7 @@
|
|
|
4828
4828
|
{
|
|
4829
4829
|
"kind": "variable",
|
|
4830
4830
|
"name": "ObcAutomationButtonReadoutStack",
|
|
4831
|
-
"default": "class extends LitElement { constructor() { super(...arguments); this.readouts = []; this.tag = null; this.size = \"regular\"; this.idTagOrientation = \"top\"; } renderTag() { if (this.tag === null) return nothing; return html`<div class=\"tag\">${this.tag}</div>`; } renderValueContainer(type, icon, content) { return html`<div class=\"readout-item ${type}\"> ${icon} <div class=\"value-container\"> <div class=\"label-container\">${content}</div> </div> </div>`; } renderValueText(text) { return html`<span class=\"value-text\">${text}</span>`; } renderValue(readout) { const v = readout.value.toFixed(0); const zeroPadding = v.length < readout.nDigits ? \"0\".repeat(readout.nDigits - v.length) : \"\";
|
|
4831
|
+
"default": "class extends LitElement { constructor() { super(...arguments); this.readouts = []; this.tag = null; this.size = \"regular\"; this.idTagOrientation = \"top\"; } renderTag() { if (this.tag === null) return nothing; return html`<div class=\"tag\">${this.tag}</div>`; } renderValueContainer(type, icon, content) { return html`<div class=\"readout-item ${type}\"> ${icon} <div class=\"value-container\"> <div class=\"label-container\">${content}</div> </div> </div>`; } renderValueText(text) { return html`<span class=\"value-text\">${text}</span>`; } /** * Numeric readout with hinted zeros. * * The minus sign occupies a digit slot, so the readout stays `nDigits` wide * and the sign renders ahead of the hinted padding (`-05`, not `0-5`). */ renderValue(readout) { const v = readout.value.toFixed(0); const sign = v.startsWith(\"-\") ? \"-\" : \"\"; const digits = sign ? v.slice(1) : v; const zeroPadding = v.length < readout.nDigits ? \"0\".repeat(readout.nDigits - v.length) : \"\"; let directionIcon = nothing; if (readout.icon == \"arrow\") { if (readout.direction == \"up\") { directionIcon = html`<obi-arrow-up-google class=\"icon\" useCssColor ></obi-arrow-up-google>`; } else if (readout.direction == \"down\") { directionIcon = html`<obi-arrow-down-google class=\"icon\" useCssColor ></obi-arrow-down-google>`; } else if (readout.direction == \"left\") { directionIcon = html`<obi-arrow-left-google class=\"icon\" useCssColor ></obi-arrow-left-google>`; } else if (readout.direction == \"right\") { directionIcon = html`<obi-arrow-right-google class=\"icon\" useCssColor ></obi-arrow-right-google>`; } } else if (readout.icon == \"chevron\") { if (readout.direction == \"up\") { directionIcon = html`<obi-chevron-double-up-google class=\"icon\" useCssColor ></obi-chevron-double-up-google>`; } else if (readout.direction == \"down\") { directionIcon = html`<obi-chevron-double-down-google class=\"icon\" useCssColor ></obi-chevron-double-down-google>`; } else if (readout.direction == \"left\") { directionIcon = html`<obi-chevron-double-left-google class=\"icon\" useCssColor ></obi-chevron-double-left-google>`; } else if (readout.direction == \"right\") { directionIcon = html`<obi-chevron-double-right-google class=\"icon\" useCssColor ></obi-chevron-double-right-google>`; } } const content = html` <span class=\"value-text\" >${sign}${zeroPadding ? html`<span class=\"hinted-zero\" aria-hidden=\"true\" >${zeroPadding}</span >` : nothing}${digits}</span > <span class=\"unit\">${readout.unit}</span> `; return this.renderValueContainer(\"value\", directionIcon, content); } renderStateOff(readout) { let offIcon = html``; if (readout.hasIcon) { offIcon = html`<obi-off class=\"icon\" useCssColor></obi-off>`; } const content = this.renderValueText(readout.value); return this.renderValueContainer(\"state-off\", offIcon, content); } renderStateOn(readout) { let onIcon = html``; if (readout.hasIcon) { onIcon = html`<obi-on class=\"icon\" useCssColor></obi-on>`; } const content = this.renderValueText(readout.value); return this.renderValueContainer(\"state-on\", onIcon, content); } renderButton(readout) { const v = readout.value.toFixed(1); let temperatureIcon = html``; if (readout.hasIcon) { temperatureIcon = html`<obi-temperature-air class=\"icon\" useCssColor ></obi-temperature-air>`; } const content = html` ${this.renderValueText(v)} <span class=\"unit\">${readout.unit}</span> `; return html`<obc-button class=\"readout-button\" part=\"readout-button\"> ${this.renderValueContainer(\"button\", temperatureIcon, content)} </obc-button>`; } renderReadout(readout) { if (readout.type === \"value\") { return this.renderValue(readout); } else if (readout.type === \"state-on\") { return this.renderStateOn(readout); } else if (readout.type === \"state-off\") { return this.renderStateOff(readout); } else if (readout.type === \"button\") { return this.renderButton(readout); } else { throw new Error(\"Invalid readout type\"); } } render() { const displayableReadouts = this.readouts.filter( (readout) => readout.type === \"value\" || readout.type === \"state-off\" || readout.type === \"state-on\" || readout.type === \"button\" ); const renderedReadouts = displayableReadouts.map( (r) => this.renderReadout(r) ); const tag = this.renderTag(); const elements = []; if (this.idTagOrientation === \"top\") { elements.push(tag); elements.push(...renderedReadouts); } else { elements.push(...renderedReadouts); elements.push(tag); } return html`<div class=\"readout-stack ${this.size}\">${elements}</div>`; } }"
|
|
4832
4832
|
}
|
|
4833
4833
|
],
|
|
4834
4834
|
"exports": [
|
|
@@ -44107,7 +44107,8 @@
|
|
|
44107
44107
|
"text": "AutomationButtonReadoutStackValue"
|
|
44108
44108
|
}
|
|
44109
44109
|
}
|
|
44110
|
-
]
|
|
44110
|
+
],
|
|
44111
|
+
"description": "Numeric readout with hinted zeros.\n\nThe minus sign occupies a digit slot, so the readout stays `nDigits` wide\nand the sign renders ahead of the hinted padding (`-05`, not `0-5`)."
|
|
44111
44112
|
},
|
|
44112
44113
|
{
|
|
44113
44114
|
"kind": "method",
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js
CHANGED
|
@@ -59,7 +59,14 @@ const compentStyle = css`* {
|
|
|
59
59
|
display: flex;
|
|
60
60
|
justify-content: center;
|
|
61
61
|
align-items: center;
|
|
62
|
-
gap:
|
|
62
|
+
gap: 0;
|
|
63
|
+
}
|
|
64
|
+
.readout-stack .value-text .hinted-zero {
|
|
65
|
+
color: var(
|
|
66
|
+
--obc-automation-button-readout-stack-hinted-color,
|
|
67
|
+
var(--element-disabled-color)
|
|
68
|
+
);
|
|
69
|
+
font-weight: var(--global-typography-generic-l-font-weight-regular);
|
|
63
70
|
}
|
|
64
71
|
.readout-stack.small .readout-item {
|
|
65
72
|
font-family: var(--global-typography-font-family);
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-button-readout-stack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"automation-button-readout-stack.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts
CHANGED
|
@@ -56,6 +56,12 @@ export declare class ObcAutomationButtonReadoutStack extends LitElement {
|
|
|
56
56
|
renderTag(): typeof nothing | HTMLTemplateResult;
|
|
57
57
|
private renderValueContainer;
|
|
58
58
|
private renderValueText;
|
|
59
|
+
/**
|
|
60
|
+
* Numeric readout with hinted zeros.
|
|
61
|
+
*
|
|
62
|
+
* The minus sign occupies a digit slot, so the readout stays `nDigits` wide
|
|
63
|
+
* and the sign renders ahead of the hinted padding (`-05`, not `0-5`).
|
|
64
|
+
*/
|
|
59
65
|
renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult;
|
|
60
66
|
renderStateOff(readout: AutomationButtonReadoutStackStateOff): HTMLTemplateResult;
|
|
61
67
|
renderStateOn(readout: AutomationButtonReadoutStackStateOn): HTMLTemplateResult;
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-button-readout-stack.d.ts","sourceRoot":"","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAI7E,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAChD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iDAAiD,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,oBAAY,gCAAgC;IAC1C,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACrD,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oCAAoC;IACnD,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,4BAA4B,GACpC,iCAAiC,GACjC,mCAAmC,GACnC,oCAAoC,GACpC,kCAAkC,CAAC;AAEvC;;GAEG;AACH,qBACa,+BAAgC,SAAQ,UAAU;IAE7D,QAAQ,EAAE,4BAA4B,EAAE,CAAM;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,IAAI,EAAE,gCAAgC,CACP;IAC/B,gBAAgB,EAAE,gBAAgB,CAAwB;IAEtE,SAAS,IAAI,OAAO,OAAO,GAAG,kBAAkB;IAMhD,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,eAAe;IAIvB,WAAW,CAAC,OAAO,EAAE,iCAAiC,GAAG,kBAAkB;
|
|
1
|
+
{"version":3,"file":"automation-button-readout-stack.d.ts","sourceRoot":"","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAI7E,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAChD,OAAO,8CAA8C,CAAC;AACtD,OAAO,gDAAgD,CAAC;AACxD,OAAO,gDAAgD,CAAC;AACxD,OAAO,iDAAiD,CAAC;AACzD,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,oBAAY,gCAAgC;IAC1C,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,iCAAiC;IAChD,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACrD,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,mCAAmC;IAClD,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,oCAAoC;IACnD,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,kCAAkC;IACjD,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,4BAA4B,GACpC,iCAAiC,GACjC,mCAAmC,GACnC,oCAAoC,GACpC,kCAAkC,CAAC;AAEvC;;GAEG;AACH,qBACa,+BAAgC,SAAQ,UAAU;IAE7D,QAAQ,EAAE,4BAA4B,EAAE,CAAM;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,IAAI,EAAE,gCAAgC,CACP;IAC/B,gBAAgB,EAAE,gBAAgB,CAAwB;IAEtE,SAAS,IAAI,OAAO,OAAO,GAAG,kBAAkB;IAMhD,OAAO,CAAC,oBAAoB;IAa5B,OAAO,CAAC,eAAe;IAIvB;;;;;OAKG;IACH,WAAW,CAAC,OAAO,EAAE,iCAAiC,GAAG,kBAAkB;IAmE3E,cAAc,CACZ,OAAO,EAAE,oCAAoC,GAC5C,kBAAkB;IAUrB,aAAa,CACX,OAAO,EAAE,mCAAmC,GAC3C,kBAAkB;IAUrB,YAAY,CACV,OAAO,EAAE,kCAAkC,GAC1C,kBAAkB;IAqBrB,aAAa,CAAC,OAAO,EAAE,4BAA4B,GAAG,kBAAkB;IAc/D,MAAM;IA0Bf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qCAAqC,EAAE,+BAA+B,CAAC;KACxE;CACF"}
|
|
@@ -58,10 +58,17 @@ let ObcAutomationButtonReadoutStack = class extends LitElement {
|
|
|
58
58
|
renderValueText(text) {
|
|
59
59
|
return html`<span class="value-text">${text}</span>`;
|
|
60
60
|
}
|
|
61
|
+
/**
|
|
62
|
+
* Numeric readout with hinted zeros.
|
|
63
|
+
*
|
|
64
|
+
* The minus sign occupies a digit slot, so the readout stays `nDigits` wide
|
|
65
|
+
* and the sign renders ahead of the hinted padding (`-05`, not `0-5`).
|
|
66
|
+
*/
|
|
61
67
|
renderValue(readout) {
|
|
62
68
|
const v = readout.value.toFixed(0);
|
|
69
|
+
const sign = v.startsWith("-") ? "-" : "";
|
|
70
|
+
const digits = sign ? v.slice(1) : v;
|
|
63
71
|
const zeroPadding = v.length < readout.nDigits ? "0".repeat(readout.nDigits - v.length) : "";
|
|
64
|
-
const paddedValue = zeroPadding + v;
|
|
65
72
|
let directionIcon = nothing;
|
|
66
73
|
if (readout.icon == "arrow") {
|
|
67
74
|
if (readout.direction == "up") {
|
|
@@ -109,7 +116,11 @@ let ObcAutomationButtonReadoutStack = class extends LitElement {
|
|
|
109
116
|
}
|
|
110
117
|
}
|
|
111
118
|
const content = html`
|
|
112
|
-
|
|
119
|
+
<span class="value-text"
|
|
120
|
+
>${sign}${zeroPadding ? html`<span class="hinted-zero" aria-hidden="true"
|
|
121
|
+
>${zeroPadding}</span
|
|
122
|
+
>` : nothing}${digits}</span
|
|
123
|
+
>
|
|
113
124
|
<span class="unit">${readout.unit}</span>
|
|
114
125
|
`;
|
|
115
126
|
return this.renderValueContainer("value", directionIcon, content);
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-button-readout-stack.js","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './automation-button-readout-stack.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-arrow-up-google.js';\nimport '../../icons/icon-arrow-down-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-chevron-double-up-google.js';\nimport '../../icons/icon-chevron-double-down-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-off.js';\nimport '../../icons/icon-on.js';\nimport '../../icons/icon-temperature-air.js';\nimport '../button/button.js';\n\nexport enum AutomationButtonReadoutStackSize {\n small = 'small',\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\nexport enum IdTagOrientation {\n top = 'top',\n bottom = 'bottom',\n}\n\nexport interface AutomationButtonReadoutStackValue {\n type: 'value';\n value: number;\n nDigits: number;\n unit: string;\n direction: 'up' | 'down' | 'left' | 'right' | 'none';\n icon: 'none' | 'arrow' | 'chevron';\n}\n\nexport interface AutomationButtonReadoutStackStateOn {\n type: 'state-on';\n value: string;\n hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackStateOff {\n type: 'state-off';\n value: string;\n hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackButton {\n type: 'button';\n value: number;\n hasIcon: boolean;\n unit: string;\n}\n\nexport type AutomationButtonReadoutStack =\n | AutomationButtonReadoutStackValue\n | AutomationButtonReadoutStackStateOn\n | AutomationButtonReadoutStackStateOff\n | AutomationButtonReadoutStackButton;\n\n/**\n * @experimental\n */\n@customElement('obc-automation-button-readout-stack')\nexport class ObcAutomationButtonReadoutStack extends LitElement {\n @property({type: Array, attribute: false})\n readouts: AutomationButtonReadoutStack[] = [];\n @property({type: String}) tag: string | null = null;\n @property() size: AutomationButtonReadoutStackSize =\n AutomationButtonReadoutStackSize.regular;\n @property() idTagOrientation: IdTagOrientation = IdTagOrientation.top;\n\n renderTag(): typeof nothing | HTMLTemplateResult {\n if (this.tag === null) return nothing;\n\n return html`<div class=\"tag\">${this.tag}</div>`;\n }\n\n private renderValueContainer(\n type: string,\n icon: HTMLTemplateResult | typeof nothing,\n content: HTMLTemplateResult\n ): HTMLTemplateResult {\n return html`<div class=\"readout-item ${type}\">\n ${icon}\n <div class=\"value-container\">\n <div class=\"label-container\">${content}</div>\n </div>\n </div>`;\n }\n\n private renderValueText(text: string): HTMLTemplateResult {\n return html`<span class=\"value-text\">${text}</span>`;\n }\n\n renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {\n const v = readout.value.toFixed(0);\n const zeroPadding =\n v.length < readout.nDigits ? '0'.repeat(readout.nDigits - v.length) : '';\n const paddedValue = zeroPadding + v;\n\n let directionIcon: HTMLTemplateResult | typeof nothing = nothing;\n if (readout.icon == 'arrow') {\n if (readout.direction == 'up') {\n directionIcon = html`<obi-arrow-up-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-up-google>`;\n } else if (readout.direction == 'down') {\n directionIcon = html`<obi-arrow-down-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-down-google>`;\n } else if (readout.direction == 'left') {\n directionIcon = html`<obi-arrow-left-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-left-google>`;\n } else if (readout.direction == 'right') {\n directionIcon = html`<obi-arrow-right-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-right-google>`;\n }\n } else if (readout.icon == 'chevron') {\n if (readout.direction == 'up') {\n directionIcon = html`<obi-chevron-double-up-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-up-google>`;\n } else if (readout.direction == 'down') {\n directionIcon = html`<obi-chevron-double-down-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-down-google>`;\n } else if (readout.direction == 'left') {\n directionIcon = html`<obi-chevron-double-left-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-left-google>`;\n } else if (readout.direction == 'right') {\n directionIcon = html`<obi-chevron-double-right-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-right-google>`;\n }\n }\n const content = html`\n ${this.renderValueText(paddedValue)}\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return this.renderValueContainer('value', directionIcon, content);\n }\n\n renderStateOff(\n readout: AutomationButtonReadoutStackStateOff\n ): HTMLTemplateResult {\n let offIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n offIcon = html`<obi-off class=\"icon\" useCssColor></obi-off>`;\n }\n\n const content = this.renderValueText(readout.value);\n return this.renderValueContainer('state-off', offIcon, content);\n }\n\n renderStateOn(\n readout: AutomationButtonReadoutStackStateOn\n ): HTMLTemplateResult {\n let onIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n onIcon = html`<obi-on class=\"icon\" useCssColor></obi-on>`;\n }\n\n const content = this.renderValueText(readout.value);\n return this.renderValueContainer('state-on', onIcon, content);\n }\n\n renderButton(\n readout: AutomationButtonReadoutStackButton\n ): HTMLTemplateResult {\n const v = readout.value.toFixed(1); // Format as 000.0\n\n let temperatureIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n temperatureIcon = html`<obi-temperature-air\n class=\"icon\"\n useCssColor\n ></obi-temperature-air>`;\n }\n\n const content = html`\n ${this.renderValueText(v)}\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return html`<obc-button class=\"readout-button\" part=\"readout-button\">\n ${this.renderValueContainer('button', temperatureIcon, content)}\n </obc-button>`;\n }\n\n renderReadout(readout: AutomationButtonReadoutStack): HTMLTemplateResult {\n if (readout.type === 'value') {\n return this.renderValue(readout);\n } else if (readout.type === 'state-on') {\n return this.renderStateOn(readout);\n } else if (readout.type === 'state-off') {\n return this.renderStateOff(readout);\n } else if (readout.type === 'button') {\n return this.renderButton(readout);\n } else {\n throw new Error('Invalid readout type');\n }\n }\n\n override render() {\n const displayableReadouts = this.readouts.filter(\n (readout) =>\n readout.type === 'value' ||\n readout.type === 'state-off' ||\n readout.type === 'state-on' ||\n readout.type === 'button'\n );\n\n const renderedReadouts = displayableReadouts.map((r) =>\n this.renderReadout(r)\n );\n const tag = this.renderTag();\n const elements: unknown[] = [];\n\n if (this.idTagOrientation === IdTagOrientation.top) {\n elements.push(tag);\n elements.push(...renderedReadouts);\n } else {\n elements.push(...renderedReadouts);\n elements.push(tag);\n }\n\n return html`<div class=\"readout-stack ${this.size}\">${elements}</div>`;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-button-readout-stack': ObcAutomationButtonReadoutStack;\n }\n}\n"],"names":["AutomationButtonReadoutStackSize","IdTagOrientation"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"automation-button-readout-stack.js","sources":["../../../src/components/automation-button-readout-stack/automation-button-readout-stack.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './automation-button-readout-stack.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-arrow-up-google.js';\nimport '../../icons/icon-arrow-down-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-chevron-double-up-google.js';\nimport '../../icons/icon-chevron-double-down-google.js';\nimport '../../icons/icon-chevron-double-left-google.js';\nimport '../../icons/icon-chevron-double-right-google.js';\nimport '../../icons/icon-off.js';\nimport '../../icons/icon-on.js';\nimport '../../icons/icon-temperature-air.js';\nimport '../button/button.js';\n\nexport enum AutomationButtonReadoutStackSize {\n small = 'small',\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\nexport enum IdTagOrientation {\n top = 'top',\n bottom = 'bottom',\n}\n\nexport interface AutomationButtonReadoutStackValue {\n type: 'value';\n value: number;\n nDigits: number;\n unit: string;\n direction: 'up' | 'down' | 'left' | 'right' | 'none';\n icon: 'none' | 'arrow' | 'chevron';\n}\n\nexport interface AutomationButtonReadoutStackStateOn {\n type: 'state-on';\n value: string;\n hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackStateOff {\n type: 'state-off';\n value: string;\n hasIcon: boolean;\n}\n\nexport interface AutomationButtonReadoutStackButton {\n type: 'button';\n value: number;\n hasIcon: boolean;\n unit: string;\n}\n\nexport type AutomationButtonReadoutStack =\n | AutomationButtonReadoutStackValue\n | AutomationButtonReadoutStackStateOn\n | AutomationButtonReadoutStackStateOff\n | AutomationButtonReadoutStackButton;\n\n/**\n * @experimental\n */\n@customElement('obc-automation-button-readout-stack')\nexport class ObcAutomationButtonReadoutStack extends LitElement {\n @property({type: Array, attribute: false})\n readouts: AutomationButtonReadoutStack[] = [];\n @property({type: String}) tag: string | null = null;\n @property() size: AutomationButtonReadoutStackSize =\n AutomationButtonReadoutStackSize.regular;\n @property() idTagOrientation: IdTagOrientation = IdTagOrientation.top;\n\n renderTag(): typeof nothing | HTMLTemplateResult {\n if (this.tag === null) return nothing;\n\n return html`<div class=\"tag\">${this.tag}</div>`;\n }\n\n private renderValueContainer(\n type: string,\n icon: HTMLTemplateResult | typeof nothing,\n content: HTMLTemplateResult\n ): HTMLTemplateResult {\n return html`<div class=\"readout-item ${type}\">\n ${icon}\n <div class=\"value-container\">\n <div class=\"label-container\">${content}</div>\n </div>\n </div>`;\n }\n\n private renderValueText(text: string): HTMLTemplateResult {\n return html`<span class=\"value-text\">${text}</span>`;\n }\n\n /**\n * Numeric readout with hinted zeros.\n *\n * The minus sign occupies a digit slot, so the readout stays `nDigits` wide\n * and the sign renders ahead of the hinted padding (`-05`, not `0-5`).\n */\n renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {\n const v = readout.value.toFixed(0);\n const sign = v.startsWith('-') ? '-' : '';\n const digits = sign ? v.slice(1) : v;\n const zeroPadding =\n v.length < readout.nDigits ? '0'.repeat(readout.nDigits - v.length) : '';\n\n let directionIcon: HTMLTemplateResult | typeof nothing = nothing;\n if (readout.icon == 'arrow') {\n if (readout.direction == 'up') {\n directionIcon = html`<obi-arrow-up-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-up-google>`;\n } else if (readout.direction == 'down') {\n directionIcon = html`<obi-arrow-down-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-down-google>`;\n } else if (readout.direction == 'left') {\n directionIcon = html`<obi-arrow-left-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-left-google>`;\n } else if (readout.direction == 'right') {\n directionIcon = html`<obi-arrow-right-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-right-google>`;\n }\n } else if (readout.icon == 'chevron') {\n if (readout.direction == 'up') {\n directionIcon = html`<obi-chevron-double-up-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-up-google>`;\n } else if (readout.direction == 'down') {\n directionIcon = html`<obi-chevron-double-down-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-down-google>`;\n } else if (readout.direction == 'left') {\n directionIcon = html`<obi-chevron-double-left-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-left-google>`;\n } else if (readout.direction == 'right') {\n directionIcon = html`<obi-chevron-double-right-google\n class=\"icon\"\n useCssColor\n ></obi-chevron-double-right-google>`;\n }\n }\n const content = html`\n <span class=\"value-text\"\n >${sign}${zeroPadding\n ? html`<span class=\"hinted-zero\" aria-hidden=\"true\"\n >${zeroPadding}</span\n >`\n : nothing}${digits}</span\n >\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return this.renderValueContainer('value', directionIcon, content);\n }\n\n renderStateOff(\n readout: AutomationButtonReadoutStackStateOff\n ): HTMLTemplateResult {\n let offIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n offIcon = html`<obi-off class=\"icon\" useCssColor></obi-off>`;\n }\n\n const content = this.renderValueText(readout.value);\n return this.renderValueContainer('state-off', offIcon, content);\n }\n\n renderStateOn(\n readout: AutomationButtonReadoutStackStateOn\n ): HTMLTemplateResult {\n let onIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n onIcon = html`<obi-on class=\"icon\" useCssColor></obi-on>`;\n }\n\n const content = this.renderValueText(readout.value);\n return this.renderValueContainer('state-on', onIcon, content);\n }\n\n renderButton(\n readout: AutomationButtonReadoutStackButton\n ): HTMLTemplateResult {\n const v = readout.value.toFixed(1); // Format as 000.0\n\n let temperatureIcon: HTMLTemplateResult = html``;\n if (readout.hasIcon) {\n temperatureIcon = html`<obi-temperature-air\n class=\"icon\"\n useCssColor\n ></obi-temperature-air>`;\n }\n\n const content = html`\n ${this.renderValueText(v)}\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return html`<obc-button class=\"readout-button\" part=\"readout-button\">\n ${this.renderValueContainer('button', temperatureIcon, content)}\n </obc-button>`;\n }\n\n renderReadout(readout: AutomationButtonReadoutStack): HTMLTemplateResult {\n if (readout.type === 'value') {\n return this.renderValue(readout);\n } else if (readout.type === 'state-on') {\n return this.renderStateOn(readout);\n } else if (readout.type === 'state-off') {\n return this.renderStateOff(readout);\n } else if (readout.type === 'button') {\n return this.renderButton(readout);\n } else {\n throw new Error('Invalid readout type');\n }\n }\n\n override render() {\n const displayableReadouts = this.readouts.filter(\n (readout) =>\n readout.type === 'value' ||\n readout.type === 'state-off' ||\n readout.type === 'state-on' ||\n readout.type === 'button'\n );\n\n const renderedReadouts = displayableReadouts.map((r) =>\n this.renderReadout(r)\n );\n const tag = this.renderTag();\n const elements: unknown[] = [];\n\n if (this.idTagOrientation === IdTagOrientation.top) {\n elements.push(tag);\n elements.push(...renderedReadouts);\n } else {\n elements.push(...renderedReadouts);\n elements.push(tag);\n }\n\n return html`<div class=\"readout-stack ${this.size}\">${elements}</div>`;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-button-readout-stack': ObcAutomationButtonReadoutStack;\n }\n}\n"],"names":["AutomationButtonReadoutStackSize","IdTagOrientation"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -52,7 +52,15 @@
|
|
|
52
52
|
display: flex;
|
|
53
53
|
justify-content: center;
|
|
54
54
|
align-items: center;
|
|
55
|
-
gap:
|
|
55
|
+
gap: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.value-text .hinted-zero {
|
|
59
|
+
color: var(
|
|
60
|
+
--obc-automation-button-readout-stack-hinted-color,
|
|
61
|
+
var(--element-disabled-color)
|
|
62
|
+
);
|
|
63
|
+
font-weight: var(--global-typography-generic-l-font-weight-regular);
|
|
56
64
|
}
|
|
57
65
|
|
|
58
66
|
&.small .readout-item {
|
|
@@ -95,11 +95,18 @@ export class ObcAutomationButtonReadoutStack extends LitElement {
|
|
|
95
95
|
return html`<span class="value-text">${text}</span>`;
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
+
/**
|
|
99
|
+
* Numeric readout with hinted zeros.
|
|
100
|
+
*
|
|
101
|
+
* The minus sign occupies a digit slot, so the readout stays `nDigits` wide
|
|
102
|
+
* and the sign renders ahead of the hinted padding (`-05`, not `0-5`).
|
|
103
|
+
*/
|
|
98
104
|
renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {
|
|
99
105
|
const v = readout.value.toFixed(0);
|
|
106
|
+
const sign = v.startsWith('-') ? '-' : '';
|
|
107
|
+
const digits = sign ? v.slice(1) : v;
|
|
100
108
|
const zeroPadding =
|
|
101
109
|
v.length < readout.nDigits ? '0'.repeat(readout.nDigits - v.length) : '';
|
|
102
|
-
const paddedValue = zeroPadding + v;
|
|
103
110
|
|
|
104
111
|
let directionIcon: HTMLTemplateResult | typeof nothing = nothing;
|
|
105
112
|
if (readout.icon == 'arrow') {
|
|
@@ -148,7 +155,13 @@ export class ObcAutomationButtonReadoutStack extends LitElement {
|
|
|
148
155
|
}
|
|
149
156
|
}
|
|
150
157
|
const content = html`
|
|
151
|
-
|
|
158
|
+
<span class="value-text"
|
|
159
|
+
>${sign}${zeroPadding
|
|
160
|
+
? html`<span class="hinted-zero" aria-hidden="true"
|
|
161
|
+
>${zeroPadding}</span
|
|
162
|
+
>`
|
|
163
|
+
: nothing}${digits}</span
|
|
164
|
+
>
|
|
152
165
|
<span class="unit">${readout.unit}</span>
|
|
153
166
|
`;
|
|
154
167
|
|