npm - @oicl/openbridge-webcomponents - Versions diffs - 2.1.0-next.2 → 2.1.0-next.4 - Mend

@oicl/openbridge-webcomponents 2.1.0-next.2 → 2.1.0-next.4

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.

Files changed (29) hide show

package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js CHANGED Viewed

@@ -80,26 +80,31 @@ var ObcAutomationButtonReadoutStack = class ObcAutomationButtonReadoutStack exte
       .hintedZeros=${format.hintedZeros ?? false}
     ></obc-readout-block>`;
 	}
-	renderValue(readout) {
-		let directionIcon = nothing;
-		if (readout.icon == "arrow") {
-			if (readout.direction == "up") directionIcon = html`<obi-arrow-up-google
+	renderArrow(direction) {
+		switch (direction) {
+			case "up": return html`<obi-arrow-up-google
           class="icon"
           useCssColor
         ></obi-arrow-up-google>`;
-			else if (readout.direction == "down") directionIcon = html`<obi-arrow-down-google
+			case "down": return html`<obi-arrow-down-google
           class="icon"
           useCssColor
         ></obi-arrow-down-google>`;
-			else if (readout.direction == "left") directionIcon = html`<obi-arrow-left-google
+			case "left": return html`<obi-arrow-left-google
           class="icon"
           useCssColor
         ></obi-arrow-left-google>`;
-			else if (readout.direction == "right") directionIcon = html`<obi-arrow-right-google
+			case "right": return html`<obi-arrow-right-google
           class="icon"
           useCssColor
         ></obi-arrow-right-google>`;
-		} else if (readout.icon == "chevron") {
+			default: return nothing;
+		}
+	}
+	renderValue(readout) {
+		let directionIcon = nothing;
+		if (readout.icon == "arrow") directionIcon = this.renderArrow(readout.direction);
+		else if (readout.icon == "chevron") {
 			if (readout.direction == "up") directionIcon = html`<obi-chevron-double-up-google
           class="icon"
           useCssColor
@@ -145,13 +150,15 @@ var ObcAutomationButtonReadoutStack = class ObcAutomationButtonReadoutStack exte
 	}
 	renderStateOff(readout) {
 		let offIcon = html``;
-		if (readout.hasIcon) offIcon = html`<obi-off class="icon" useCssColor></obi-off>`;
+		if (readout.direction && readout.direction !== "none") offIcon = this.renderArrow(readout.direction);
+		else 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>`;
+		if (readout.direction && readout.direction !== "none") onIcon = this.renderArrow(readout.direction);
+		else 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);
 	}

package/dist/components/automation-button-readout-stack/automation-button-readout-stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"automation-button-readout-stack.js","names":[],"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';\nimport '../../building-blocks/readout-block/readout-block.js';\nimport {ReadoutBlockSize} from '../../building-blocks/readout-block/readout-block.js';\nimport {ObcTextboxSize} from '../../components/textbox/textbox.js';\nimport {SETPOINT_PATH_FILLED} from '../../svghelpers/setpoint.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\n// The stack's three tiers map onto the readout block's: `small` is the block's\n// small tier at xs number typography, `regular` the small tier at its default\n// s, `enhanced` the large tier. The block's cap-height boxes (16 / 20 / 32)\n// match the tiers' former line-heights.\nconst blockSizeBySize: Record<\n AutomationButtonReadoutStackSize,\n ReadoutBlockSize\n> = {\n [AutomationButtonReadoutStackSize.small]: ReadoutBlockSize.small,\n [AutomationButtonReadoutStackSize.regular]: ReadoutBlockSize.small,\n [AutomationButtonReadoutStackSize.enhanced]: ReadoutBlockSize.large,\n};\n\nconst valueSizeBySize: Record<\n AutomationButtonReadoutStackSize,\n ObcTextboxSize\n> = {\n [AutomationButtonReadoutStackSize.small]: ObcTextboxSize.xs,\n [AutomationButtonReadoutStackSize.regular]: ObcTextboxSize.s,\n [AutomationButtonReadoutStackSize.enhanced]: ObcTextboxSize.l,\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' \| 'slot';\n /*\n Host slot the row's icon is projected from when `icon` is `'slot'` —\n * consumers place any icon element with this slot name in the stack's\n * light DOM (e.g. a device-specific `<obi->` icon).\n /\n slotName?: string;\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 interface AutomationButtonReadoutStackSetpoint {\n type: 'setpoint';\n value: number;\n nDigits: number;\n unit?: string;\n}\n\nexport type AutomationButtonReadoutStack =\n \| AutomationButtonReadoutStackValue\n \| AutomationButtonReadoutStackStateOn\n \| AutomationButtonReadoutStackStateOff\n \| AutomationButtonReadoutStackButton\n \| AutomationButtonReadoutStackSetpoint;\n\n/*\n A value row with `icon: 'slot'` projects its icon from the host slot named\n * by its `slotName` — a dynamic slot name, so it carries no `@slot` tag (the\n * wrapper generator needs literal names).\n \n @property readouts - Rows rendered top-to-bottom: `value` (padded digits, unit,\n * optional direction icon), `state-on`/`state-off`, `button`, and `setpoint`\n * (shared setpoint glyph + padded digits).\n * @property tag - Identifier line (e.g. '#0001'); `null` hides it.\n * @property size - Typography tier of the rows (small / regular / enhanced).\n * @property idTagOrientation - Whether the tag renders above or below the rows.\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 A numeric segment on `obc-readout-block` — the block owns the formatting:\n * hinted zeros fill the integer part to `maxDigits`, the sign is prepended\n * without consuming a zero (`-005`), and an unavailable value renders the\n * family's dash placeholder.\n */\n private renderNumber(\n value: number,\n format: {maxDigits?: number; fractionDigits?: number; hintedZeros?: boolean}\n ): HTMLTemplateResult {\n return html`<obc-readout-block\n class=\"number\"\n .value=${value}\n .size=${blockSizeBySize[this.size]}\n .valueSize=${valueSizeBySize[this.size]}\n .maxDigits=${format.maxDigits ?? 0}\n .fractionDigits=${format.fractionDigits ?? 0}\n .hintedZeros=${format.hintedZeros ?? false}\n ></obc-readout-block>`;\n }\n\n renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {\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 } else if (readout.icon == 'slot' && readout.slotName) {\n directionIcon = html`<slot class=\"icon\" name=${readout.slotName}></slot>`;\n }\n const content = html`\n ${this.renderNumber(readout.value, {\n maxDigits: readout.nDigits,\n hintedZeros: true,\n })}\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return this.renderValueContainer('value', directionIcon, content);\n }\n\n renderSetpoint(\n readout: AutomationButtonReadoutStackSetpoint\n ): HTMLTemplateResult {\n const glyph = html`<svg\n class=\"setpoint-glyph\"\n viewBox=\"2.5 -2.5 21 26\"\n aria-hidden=\"true\"\n >\n <path d=${SETPOINT_PATH_FILLED} transform=\"rotate(-90 13 10.5)\" />\n </svg>`;\n const content = html`\n ${this.renderNumber(readout.value, {\n maxDigits: readout.nDigits,\n hintedZeros: true,\n })}\n ${\n readout.unit ? html`<span class=\"unit\">${readout.unit}</span>` : nothing\n }\n `;\n return this.renderValueContainer('setpoint', glyph, 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 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.renderNumber(readout.value, {fractionDigits: 1})}\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 if (readout.type === 'setpoint') {\n return this.renderSetpoint(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 readout.type === 'setpoint'\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"],"mappings":"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"}
1	+ {"version":3,"file":"automation-button-readout-stack.js","names":[],"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';\nimport '../../building-blocks/readout-block/readout-block.js';\nimport {ReadoutBlockSize} from '../../building-blocks/readout-block/readout-block.js';\nimport {ObcTextboxSize} from '../../components/textbox/textbox.js';\nimport {SETPOINT_PATH_FILLED} from '../../svghelpers/setpoint.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\n// The stack's three tiers map onto the readout block's: `small` is the block's\n// small tier at xs number typography, `regular` the small tier at its default\n// s, `enhanced` the large tier. The block's cap-height boxes (16 / 20 / 32)\n// match the tiers' former line-heights.\nconst blockSizeBySize: Record<\n AutomationButtonReadoutStackSize,\n ReadoutBlockSize\n> = {\n [AutomationButtonReadoutStackSize.small]: ReadoutBlockSize.small,\n [AutomationButtonReadoutStackSize.regular]: ReadoutBlockSize.small,\n [AutomationButtonReadoutStackSize.enhanced]: ReadoutBlockSize.large,\n};\n\nconst valueSizeBySize: Record<\n AutomationButtonReadoutStackSize,\n ObcTextboxSize\n> = {\n [AutomationButtonReadoutStackSize.small]: ObcTextboxSize.xs,\n [AutomationButtonReadoutStackSize.regular]: ObcTextboxSize.s,\n [AutomationButtonReadoutStackSize.enhanced]: ObcTextboxSize.l,\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' \| 'slot';\n /*\n Host slot the row's icon is projected from when `icon` is `'slot'` —\n * consumers place any icon element with this slot name in the stack's\n * light DOM (e.g. a device-specific `<obi->` icon).\n /\n slotName?: string;\n}\n\nexport interface AutomationButtonReadoutStackStateOn {\n type: 'state-on';\n value: string;\n hasIcon: boolean;\n direction?: 'up' \| 'down' \| 'left' \| 'right' \| 'none';\n}\n\nexport interface AutomationButtonReadoutStackStateOff {\n type: 'state-off';\n value: string;\n hasIcon: boolean;\n direction?: 'up' \| 'down' \| 'left' \| 'right' \| 'none';\n}\n\nexport interface AutomationButtonReadoutStackButton {\n type: 'button';\n value: number;\n hasIcon: boolean;\n unit: string;\n}\n\nexport interface AutomationButtonReadoutStackSetpoint {\n type: 'setpoint';\n value: number;\n nDigits: number;\n unit?: string;\n}\n\nexport type AutomationButtonReadoutStack =\n \| AutomationButtonReadoutStackValue\n \| AutomationButtonReadoutStackStateOn\n \| AutomationButtonReadoutStackStateOff\n \| AutomationButtonReadoutStackButton\n \| AutomationButtonReadoutStackSetpoint;\n\n/*\n A value row with `icon: 'slot'` projects its icon from the host slot named\n * by its `slotName` — a dynamic slot name, so it carries no `@slot` tag (the\n * wrapper generator needs literal names).\n \n @property readouts - Rows rendered top-to-bottom: `value` (padded digits, unit,\n * optional direction icon), `state-on`/`state-off`, `button`, and `setpoint`\n * (shared setpoint glyph + padded digits).\n * @property tag - Identifier line (e.g. '#0001'); `null` hides it.\n * @property size - Typography tier of the rows (small / regular / enhanced).\n * @property idTagOrientation - Whether the tag renders above or below the rows.\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 A numeric segment on `obc-readout-block` — the block owns the formatting:\n * hinted zeros fill the integer part to `maxDigits`, the sign is prepended\n * without consuming a zero (`-005`), and an unavailable value renders the\n * family's dash placeholder.\n */\n private renderNumber(\n value: number,\n format: {maxDigits?: number; fractionDigits?: number; hintedZeros?: boolean}\n ): HTMLTemplateResult {\n return html`<obc-readout-block\n class=\"number\"\n .value=${value}\n .size=${blockSizeBySize[this.size]}\n .valueSize=${valueSizeBySize[this.size]}\n .maxDigits=${format.maxDigits ?? 0}\n .fractionDigits=${format.fractionDigits ?? 0}\n .hintedZeros=${format.hintedZeros ?? false}\n ></obc-readout-block>`;\n }\n\n private renderArrow(\n direction: 'up' \| 'down' \| 'left' \| 'right' \| 'none' \| undefined\n ): HTMLTemplateResult \| typeof nothing {\n switch (direction) {\n case 'up':\n return html`<obi-arrow-up-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-up-google>`;\n case 'down':\n return html`<obi-arrow-down-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-down-google>`;\n case 'left':\n return html`<obi-arrow-left-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-left-google>`;\n case 'right':\n return html`<obi-arrow-right-google\n class=\"icon\"\n useCssColor\n ></obi-arrow-right-google>`;\n default:\n return nothing;\n }\n }\n\n renderValue(readout: AutomationButtonReadoutStackValue): HTMLTemplateResult {\n let directionIcon: HTMLTemplateResult \| typeof nothing = nothing;\n if (readout.icon == 'arrow') {\n directionIcon = this.renderArrow(readout.direction);\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 } else if (readout.icon == 'slot' && readout.slotName) {\n directionIcon = html`<slot class=\"icon\" name=${readout.slotName}></slot>`;\n }\n const content = html`\n ${this.renderNumber(readout.value, {\n maxDigits: readout.nDigits,\n hintedZeros: true,\n })}\n <span class=\"unit\">${readout.unit}</span>\n `;\n\n return this.renderValueContainer('value', directionIcon, content);\n }\n\n renderSetpoint(\n readout: AutomationButtonReadoutStackSetpoint\n ): HTMLTemplateResult {\n const glyph = html`<svg\n class=\"setpoint-glyph\"\n viewBox=\"2.5 -2.5 21 26\"\n aria-hidden=\"true\"\n >\n <path d=${SETPOINT_PATH_FILLED} transform=\"rotate(-90 13 10.5)\" />\n </svg>`;\n const content = html`\n ${this.renderNumber(readout.value, {\n maxDigits: readout.nDigits,\n hintedZeros: true,\n })}\n ${\n readout.unit ? html`<span class=\"unit\">${readout.unit}</span>` : nothing\n }\n `;\n return this.renderValueContainer('setpoint', glyph, content);\n }\n\n renderStateOff(\n readout: AutomationButtonReadoutStackStateOff\n ): HTMLTemplateResult {\n let offIcon: HTMLTemplateResult \| typeof nothing = html``;\n if (readout.direction && readout.direction !== 'none') {\n offIcon = this.renderArrow(readout.direction);\n } else 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 \| typeof nothing = html``;\n if (readout.direction && readout.direction !== 'none') {\n onIcon = this.renderArrow(readout.direction);\n } else 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 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.renderNumber(readout.value, {fractionDigits: 1})}\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 if (readout.type === 'setpoint') {\n return this.renderSetpoint(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 readout.type === 'setpoint'\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"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.1.0-next.2",
+  "version": "2.1.0-next.4",
   "type": "module",
   "repository": {
     "type": "git",