@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.76 → 2.0.0-next.77
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 +16 -3
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/dist/automation/analog-valve/analog-valve.d.ts.map +1 -1
- package/dist/automation/analog-valve/analog-valve.js +1 -1
- package/dist/automation/analog-valve/analog-valve.js.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-motorized.d.ts.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-motorized.js +1 -1
- package/dist/automation/automation-button/abstract-automation-button-motorized.js.map +1 -1
- package/dist/automation/automation-button/automation-button.d.ts +2 -1
- package/dist/automation/automation-button/automation-button.d.ts.map +1 -1
- package/dist/automation/automation-button/automation-button.js +1 -0
- package/dist/automation/automation-button/automation-button.js.map +1 -1
- package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts +1 -1
- 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.map +1 -1
- package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js +13 -1
- package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js.map +1 -1
- package/package.json +1 -1
- package/src/automation/analog-valve/analog-valve.stories.ts +17 -1
- package/src/automation/analog-valve/analog-valve.ts +4 -1
- package/src/automation/automation-button/abstract-automation-button-motorized.ts +4 -1
- package/src/automation/automation-button/automation-button.ts +1 -0
- package/src/components/automation-button-readout-stack/automation-button-readout-stack.ts +1 -1
- package/src/navigation-instruments/gauge-radial/gauge-radial.css +13 -1
- package/src/navigation-instruments/gauge-radial/gauge-radial.stories.ts +18 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analog-valve.d.ts","sourceRoot":"","sources":["../../../src/automation/analog-valve/analog-valve.ts"],"names":[],"mappings":"AAEA,OAAO,4DAA4D,CAAC;AAEpE,OAAO,EAAC,2BAA2B,EAAC,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EAAC,8BAA8B,EAAC,MAAM,2CAA2C,CAAC;AACzF,OAAO,EAAC,4BAA4B,EAAC,MAAM,qFAAqF,CAAC;AAEjI,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED,qBACa,cAAe,SAAQ,2BAA2B;IAClC,IAAI,EAAE,OAAO,CAAS;IACvB,KAAK,EAAE,MAAM,CAAK;IACjB,QAAQ,EAAE,OAAO,CAAS;IACrD,gCAAgC;IACN,cAAc,EAAE,8BAA8B,CACjC;IACb,OAAO,EAAE,kBAAkB,CACxB;IAE7B,IAAa,aAAa,IAAI,4BAA4B,EAAE,
|
|
1
|
+
{"version":3,"file":"analog-valve.d.ts","sourceRoot":"","sources":["../../../src/automation/analog-valve/analog-valve.ts"],"names":[],"mappings":"AAEA,OAAO,4DAA4D,CAAC;AAEpE,OAAO,EAAC,2BAA2B,EAAC,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EAAC,8BAA8B,EAAC,MAAM,2CAA2C,CAAC;AACzF,OAAO,EAAC,4BAA4B,EAAC,MAAM,qFAAqF,CAAC;AAEjI,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED,qBACa,cAAe,SAAQ,2BAA2B;IAClC,IAAI,EAAE,OAAO,CAAS;IACvB,KAAK,EAAE,MAAM,CAAK;IACjB,QAAQ,EAAE,OAAO,CAAS;IACrD,gCAAgC;IACN,cAAc,EAAE,8BAA8B,CACjC;IACb,OAAO,EAAE,kBAAkB,CACxB;IAE7B,IAAa,aAAa,IAAI,4BAA4B,EAAE,CAwB3D;IAED,IAAa,GAAG,IAAI,OAAO,CAE1B;IAED,IAAa,IAAI,yCAahB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"analog-valve.js","sources":["../../../src/automation/analog-valve/analog-valve.ts"],"sourcesContent":["import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../valve-analoge-two-way-icon/valve-analog-two-way-icon.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAbstractAutomationButton} from '../automation-button/abstract-automation-button.js';\nimport {AutomationButtonLabelDirection} from '../automation-button/automation-button.js';\nimport {AutomationButtonReadoutStack} from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';\n\nexport enum AnalogValveVariant {\n regular = 'regular',\n flat = 'flat',\n}\n\n@customElement('obc-analog-valve')\nexport class ObcAnalogValve extends ObcAbstractAutomationButton {\n @property({type: Boolean}) open: boolean = false;\n @property({type: Number}) value: number = 0;\n @property({type: Boolean}) vertical: boolean = false;\n /** @availableWhen open==true */\n @property({type: String}) labelDirection: AutomationButtonLabelDirection =\n AutomationButtonLabelDirection.right;\n @property({type: String}) variant: AnalogValveVariant =\n AnalogValveVariant.regular;\n\n override get extraReadouts(): AutomationButtonReadoutStack[] {\n if (this.open) {\n return [\n {\n type: 'value',\n icon: 'arrow',\n value: this.value,\n nDigits: 3,\n unit: '%',\n direction: this.labelDirection,\n },\n ];\n } else {\n return [\n {\n type: 'state-off',\n value: 'Off',\n hasIcon: true,\n },\n ];\n }\n }\n\n override get _on(): boolean {\n return this.open;\n }\n\n override get icon() {\n return html`<obc-valve-analog-two-way-icon\n .value=${this.value}\n .closed=${!this.open}\n .vertical=${this.vertical}\n slot=\"icon\"\n ></obc-valve-analog-two-way-icon>\n <obc-valve-analog-two-way-icon\n .value=${this.value}\n .closed=${!this.open}\n .vertical=${this.vertical}\n slot=\"icon-silhouette\"\n ></obc-valve-analog-two-way-icon> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-analog-valve': ObcAnalogValve;\n }\n}\n"],"names":["AnalogValveVariant"],"mappings":";;;;;;;;;;;;;;;;AAQO,IAAK,uCAAAA,wBAAL;AACLA,sBAAA,SAAA,IAAU;AACVA,sBAAA,MAAA,IAAO;AAFG,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AAML,IAAM,iBAAN,cAA6B,4BAA4B;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,OAAgB;AACjB,SAAA,QAAgB;AACf,SAAA,WAAoB;AAErB,SAAA,iBACxB,+BAA+B;AACP,SAAA,UACxB;AAAA,EAAA;AAAA,EAEF,IAAa,gBAAgD;AAC3D,QAAI,KAAK,MAAM;AACb,aAAO;AAAA,QACL;AAAA,UACE,MAAM;AAAA,UACN,
|
|
1
|
+
{"version":3,"file":"analog-valve.js","sources":["../../../src/automation/analog-valve/analog-valve.ts"],"sourcesContent":["import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../valve-analoge-two-way-icon/valve-analog-two-way-icon.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAbstractAutomationButton} from '../automation-button/abstract-automation-button.js';\nimport {AutomationButtonLabelDirection} from '../automation-button/automation-button.js';\nimport {AutomationButtonReadoutStack} from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';\n\nexport enum AnalogValveVariant {\n regular = 'regular',\n flat = 'flat',\n}\n\n@customElement('obc-analog-valve')\nexport class ObcAnalogValve extends ObcAbstractAutomationButton {\n @property({type: Boolean}) open: boolean = false;\n @property({type: Number}) value: number = 0;\n @property({type: Boolean}) vertical: boolean = false;\n /** @availableWhen open==true */\n @property({type: String}) labelDirection: AutomationButtonLabelDirection =\n AutomationButtonLabelDirection.right;\n @property({type: String}) variant: AnalogValveVariant =\n AnalogValveVariant.regular;\n\n override get extraReadouts(): AutomationButtonReadoutStack[] {\n if (this.open) {\n return [\n {\n type: 'value',\n icon:\n this.labelDirection === AutomationButtonLabelDirection.none\n ? 'none'\n : 'arrow',\n value: this.value,\n nDigits: 3,\n unit: '%',\n direction: this.labelDirection,\n },\n ];\n } else {\n return [\n {\n type: 'state-off',\n value: 'Off',\n hasIcon: true,\n },\n ];\n }\n }\n\n override get _on(): boolean {\n return this.open;\n }\n\n override get icon() {\n return html`<obc-valve-analog-two-way-icon\n .value=${this.value}\n .closed=${!this.open}\n .vertical=${this.vertical}\n slot=\"icon\"\n ></obc-valve-analog-two-way-icon>\n <obc-valve-analog-two-way-icon\n .value=${this.value}\n .closed=${!this.open}\n .vertical=${this.vertical}\n slot=\"icon-silhouette\"\n ></obc-valve-analog-two-way-icon> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-analog-valve': ObcAnalogValve;\n }\n}\n"],"names":["AnalogValveVariant"],"mappings":";;;;;;;;;;;;;;;;AAQO,IAAK,uCAAAA,wBAAL;AACLA,sBAAA,SAAA,IAAU;AACVA,sBAAA,MAAA,IAAO;AAFG,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AAML,IAAM,iBAAN,cAA6B,4BAA4B;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,OAAgB;AACjB,SAAA,QAAgB;AACf,SAAA,WAAoB;AAErB,SAAA,iBACxB,+BAA+B;AACP,SAAA,UACxB;AAAA,EAAA;AAAA,EAEF,IAAa,gBAAgD;AAC3D,QAAI,KAAK,MAAM;AACb,aAAO;AAAA,QACL;AAAA,UACE,MAAM;AAAA,UACN,MACE,KAAK,mBAAmB,+BAA+B,OACnD,SACA;AAAA,UACN,OAAO,KAAK;AAAA,UACZ,SAAS;AAAA,UACT,MAAM;AAAA,UACN,WAAW,KAAK;AAAA,QAAA;AAAA,MAClB;AAAA,IAEJ,OAAO;AACL,aAAO;AAAA,QACL;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAEJ;AAAA,EACF;AAAA,EAEA,IAAa,MAAe;AAC1B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAa,OAAO;AAClB,WAAO;AAAA,iBACM,KAAK,KAAK;AAAA,kBACT,CAAC,KAAK,IAAI;AAAA,oBACR,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,iBAIhB,KAAK,KAAK;AAAA,kBACT,CAAC,KAAK,IAAI;AAAA,oBACR,KAAK,QAAQ;AAAA;AAAA;AAAA,EAG/B;AACF;AArD6B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,eACgB,WAAA,QAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,eAEe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,eAGgB,WAAA,YAAA,CAAA;AAED,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,eAKe,WAAA,kBAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,eAOe,WAAA,WAAA,CAAA;AAPf,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"abstract-automation-button-motorized.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/abstract-automation-button-motorized.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,2BAA2B,EAAC,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC/B,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAC,4BAA4B,EAAC,MAAM,qFAAqF,CAAC;AAEjI,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,WAAW,iBAAiB;CAC7B;AAED,qBAAa,oCAAqC,SAAQ,2BAA2B;IACxD,EAAE,EAAE,OAAO,CAAS;IAC/C;;;OAGG;IACuB,cAAc,EAAE,MAAM,CAAK;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAO;IACxB,cAAc,EAAE,MAAM,CAAK;IAC3B,cAAc,EAAE,8BAA8B,CACjC;IACb,OAAO,EAAE,gBAAgB,CACxB;IAC3B,+DAA+D;IACrC,SAAS,EAAE,yBAAyB,CAC1B;IAEpC,IAAa,aAAa,IAAI,4BAA4B,EAAE,
|
|
1
|
+
{"version":3,"file":"abstract-automation-button-motorized.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/abstract-automation-button-motorized.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,2BAA2B,EAAC,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC/B,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAC,4BAA4B,EAAC,MAAM,qFAAqF,CAAC;AAEjI,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,WAAW,iBAAiB;CAC7B;AAED,qBAAa,oCAAqC,SAAQ,2BAA2B;IACxD,EAAE,EAAE,OAAO,CAAS;IAC/C;;;OAGG;IACuB,cAAc,EAAE,MAAM,CAAK;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAO;IACxB,cAAc,EAAE,MAAM,CAAK;IAC3B,cAAc,EAAE,8BAA8B,CACjC;IACb,OAAO,EAAE,gBAAgB,CACxB;IAC3B,+DAA+D;IACrC,SAAS,EAAE,yBAAyB,CAC1B;IAEpC,IAAa,aAAa,IAAI,4BAA4B,EAAE,CA0B3D;IAED,IAAa,GAAG,IAAI,OAAO,CAE1B;CACF"}
|
|
@@ -39,7 +39,7 @@ class ObcAbstractAutomationButtonMotorized extends ObcAbstractAutomationButton {
|
|
|
39
39
|
nDigits: this.speedMaxDigits,
|
|
40
40
|
unit: this.speedUnit,
|
|
41
41
|
direction: this.labelDirection,
|
|
42
|
-
icon: "chevron"
|
|
42
|
+
icon: this.labelDirection === AutomationButtonLabelDirection.none ? "none" : "chevron"
|
|
43
43
|
}
|
|
44
44
|
];
|
|
45
45
|
} else if (!this.on) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"abstract-automation-button-motorized.js","sources":["../../../src/automation/automation-button/abstract-automation-button-motorized.ts"],"sourcesContent":["import {property} from 'lit/decorators.js';\nimport {ObcAbstractAutomationButton} from '../automation-button/abstract-automation-button.js';\nimport {\n AutomationButtonDirection,\n AutomationButtonLabelDirection,\n} from '../automation-button/automation-button.js';\nimport {AutomationButtonReadoutStack} from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';\n\nexport enum MotorizedVariant {\n regular = 'regular',\n double = 'double',\n forward = 'forward',\n flat = 'flat',\n flatForward = 'flat-forward',\n}\n\nexport class ObcAbstractAutomationButtonMotorized extends ObcAbstractAutomationButton {\n @property({type: Boolean}) on: boolean = false;\n /**\n * @deprecated Use `speed` together with `speedUnit` instead. When `speed`\n * is set it takes precedence over `speedInPercent`.\n */\n @property({type: Number}) speedInPercent: number = 0;\n @property({type: Number}) speed?: number;\n @property({type: String}) speedUnit: string = '%';\n @property({type: Number}) speedMaxDigits: number = 3;\n @property({type: String}) labelDirection: AutomationButtonLabelDirection =\n AutomationButtonLabelDirection.right;\n @property({type: String}) variant: MotorizedVariant =\n MotorizedVariant.regular;\n /** @availableWhen variant in [double, forward, flatForward] */\n @property({type: String}) direction: AutomationButtonDirection =\n AutomationButtonDirection.forward;\n\n override get extraReadouts(): AutomationButtonReadoutStack[] {\n const speed = this.speed ?? this.speedInPercent;\n if (speed !== undefined && speed !== null && this.on) {\n return [\n {\n type: 'value',\n value: speed,\n nDigits: this.speedMaxDigits,\n unit: this.speedUnit,\n direction: this.labelDirection,\n icon: 'chevron',\n },\n ];\n } else if (!this.on) {\n return [\n {\n type: 'state-off',\n value: 'Off',\n hasIcon: true,\n },\n ];\n }\n return [];\n }\n\n override get _on(): boolean {\n return this.on;\n }\n}\n"],"names":["MotorizedVariant"],"mappings":";;;;;;;;;;;;AAQO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,QAAA,IAAS;AACTA,oBAAA,SAAA,IAAU;AACVA,oBAAA,MAAA,IAAO;AACPA,oBAAA,aAAA,IAAc;AALJ,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAQL,MAAM,6CAA6C,4BAA4B;AAAA,EAA/E,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,KAAc;AAKf,SAAA,iBAAyB;AAEzB,SAAA,YAAoB;AACpB,SAAA,iBAAyB;AACzB,SAAA,iBACxB,+BAA+B;AACP,SAAA,UACxB;AAEwB,SAAA,YACxB,0BAA0B;AAAA,EAAA;AAAA,EAE5B,IAAa,gBAAgD;AAC3D,UAAM,QAAQ,KAAK,SAAS,KAAK;AACjC,QAAI,UAAU,UAAa,UAAU,QAAQ,KAAK,IAAI;AACpD,aAAO;AAAA,QACL;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,SAAS,KAAK;AAAA,UACd,MAAM,KAAK;AAAA,UACX,WAAW,KAAK;AAAA,UAChB,
|
|
1
|
+
{"version":3,"file":"abstract-automation-button-motorized.js","sources":["../../../src/automation/automation-button/abstract-automation-button-motorized.ts"],"sourcesContent":["import {property} from 'lit/decorators.js';\nimport {ObcAbstractAutomationButton} from '../automation-button/abstract-automation-button.js';\nimport {\n AutomationButtonDirection,\n AutomationButtonLabelDirection,\n} from '../automation-button/automation-button.js';\nimport {AutomationButtonReadoutStack} from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';\n\nexport enum MotorizedVariant {\n regular = 'regular',\n double = 'double',\n forward = 'forward',\n flat = 'flat',\n flatForward = 'flat-forward',\n}\n\nexport class ObcAbstractAutomationButtonMotorized extends ObcAbstractAutomationButton {\n @property({type: Boolean}) on: boolean = false;\n /**\n * @deprecated Use `speed` together with `speedUnit` instead. When `speed`\n * is set it takes precedence over `speedInPercent`.\n */\n @property({type: Number}) speedInPercent: number = 0;\n @property({type: Number}) speed?: number;\n @property({type: String}) speedUnit: string = '%';\n @property({type: Number}) speedMaxDigits: number = 3;\n @property({type: String}) labelDirection: AutomationButtonLabelDirection =\n AutomationButtonLabelDirection.right;\n @property({type: String}) variant: MotorizedVariant =\n MotorizedVariant.regular;\n /** @availableWhen variant in [double, forward, flatForward] */\n @property({type: String}) direction: AutomationButtonDirection =\n AutomationButtonDirection.forward;\n\n override get extraReadouts(): AutomationButtonReadoutStack[] {\n const speed = this.speed ?? this.speedInPercent;\n if (speed !== undefined && speed !== null && this.on) {\n return [\n {\n type: 'value',\n value: speed,\n nDigits: this.speedMaxDigits,\n unit: this.speedUnit,\n direction: this.labelDirection,\n icon:\n this.labelDirection === AutomationButtonLabelDirection.none\n ? 'none'\n : 'chevron',\n },\n ];\n } else if (!this.on) {\n return [\n {\n type: 'state-off',\n value: 'Off',\n hasIcon: true,\n },\n ];\n }\n return [];\n }\n\n override get _on(): boolean {\n return this.on;\n }\n}\n"],"names":["MotorizedVariant"],"mappings":";;;;;;;;;;;;AAQO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,QAAA,IAAS;AACTA,oBAAA,SAAA,IAAU;AACVA,oBAAA,MAAA,IAAO;AACPA,oBAAA,aAAA,IAAc;AALJ,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAQL,MAAM,6CAA6C,4BAA4B;AAAA,EAA/E,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,KAAc;AAKf,SAAA,iBAAyB;AAEzB,SAAA,YAAoB;AACpB,SAAA,iBAAyB;AACzB,SAAA,iBACxB,+BAA+B;AACP,SAAA,UACxB;AAEwB,SAAA,YACxB,0BAA0B;AAAA,EAAA;AAAA,EAE5B,IAAa,gBAAgD;AAC3D,UAAM,QAAQ,KAAK,SAAS,KAAK;AACjC,QAAI,UAAU,UAAa,UAAU,QAAQ,KAAK,IAAI;AACpD,aAAO;AAAA,QACL;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,SAAS,KAAK;AAAA,UACd,MAAM,KAAK;AAAA,UACX,WAAW,KAAK;AAAA,UAChB,MACE,KAAK,mBAAmB,+BAA+B,OACnD,SACA;AAAA,QAAA;AAAA,MACR;AAAA,IAEJ,WAAW,CAAC,KAAK,IAAI;AACnB,aAAO;AAAA,QACL;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,IAEJ;AACA,WAAO,CAAA;AAAA,EACT;AAAA,EAEA,IAAa,MAAe;AAC1B,WAAO,KAAK;AAAA,EACd;AACF;AAhD6B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,qCACgB,WAAA,IAAA;AAKD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,qCAMe,WAAA,gBAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,qCAOe,WAAA,OAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GARb,qCAQe,WAAA,WAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GATb,qCASe,WAAA,gBAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAVb,qCAUe,WAAA,gBAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAZb,qCAYe,WAAA,SAAA;AAGA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,qCAee,WAAA,WAAA;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-button.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/automation-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,kBAAkB,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI7E,OAAO,6BAA6B,CAAC;AACrC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,6BAA6B,CAAC;AACrC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAC/C,OAAO,wCAAwC,CAAC;AAChD,OAAO,6CAA6C,CAAC;AACrD,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EAElB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EACL,4BAA4B,EAC5B,gCAAgC,EAEjC,MAAM,qFAAqF,CAAC;AAC7F,OAAO,qFAAqF,CAAC;AAC7F,OAAO,8DAA8D,CAAC;AACtE,OAAO,EAAC,oBAAoB,EAAC,MAAM,8DAA8D,CAAC;AAElG,OAAO,EAAC,oBAAoB,EAAC,CAAC;AAE9B,oBAAY,uBAAuB;IACjC,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,iBAAiB;CAC7B;AAED,oBAAY,qBAAqB;IAC/B,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,+BAA+B;IACzC,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,WAAW,iBAAiB;IAC5B,cAAc,oBAAoB;IAClC,QAAQ,aAAa;IACrB,YAAY,kBAAkB;IAC9B,eAAe,qBAAqB;IACpC,OAAO,YAAY;CACpB;AAED,oBAAY,8BAA8B;IACxC,EAAE,OAAO;IACT,IAAI,SAAS;IACb,IAAI,SAAS;IACb,KAAK,UAAU;
|
|
1
|
+
{"version":3,"file":"automation-button.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/automation-button.ts"],"names":[],"mappings":"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"}
|
|
@@ -64,6 +64,7 @@ var AutomationButtonLabelDirection = /* @__PURE__ */ ((AutomationButtonLabelDire
|
|
|
64
64
|
AutomationButtonLabelDirection2["down"] = "down";
|
|
65
65
|
AutomationButtonLabelDirection2["left"] = "left";
|
|
66
66
|
AutomationButtonLabelDirection2["right"] = "right";
|
|
67
|
+
AutomationButtonLabelDirection2["none"] = "none";
|
|
67
68
|
return AutomationButtonLabelDirection2;
|
|
68
69
|
})(AutomationButtonLabelDirection || {});
|
|
69
70
|
var AutomationButtonOrientation = /* @__PURE__ */ ((AutomationButtonOrientation2) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"automation-button.js","sources":["../../../src/automation/automation-button/automation-button.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './automation-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-forward.js';\nimport '../../icons/icon-forward-fast.js';\nimport '../../icons/icon-forward-stopped.js';\nimport '../../icons/icon-backward.js';\nimport '../../icons/icon-backward-fast.js';\nimport '../../icons/icon-backward-stopped.js';\nimport '../../icons/icon-standby.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 '../../components/alert-frame/alert-frame.js';\nimport {\n ObcAlertFrameThickness,\n ObcAlertFrameType,\n ObcAlertFrameMode,\n wrapWithAlertFrame,\n} from '../../components/alert-frame/alert-frame.js';\nimport {AlertType} from '../../types.js';\nimport {customElement} from '../../decorator.js';\nimport {\n AutomationButtonReadoutStack,\n AutomationButtonReadoutStackSize,\n IdTagOrientation,\n} from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';\nimport '../../components/automation-button-readout-stack/automation-button-readout-stack.js';\nimport '../../building-blocks/circular-progress/circular-progress.js';\nimport {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';\n\nexport {CircularProgressMode};\n\nexport enum AutomationButtonVariant {\n regular = 'regular',\n double = 'double',\n forward = 'forward',\n square = 'square',\n flat = 'flat',\n flatForward = 'flat-forward',\n}\n\nexport enum AutomationButtonState {\n closed = 'closed',\n open = 'open',\n}\n\nexport enum AutomationButtonReadoutPosition {\n top = 'top',\n bottom = 'bottom',\n left = 'left',\n right = 'right',\n}\n\nexport enum AutomationButtonDirection {\n forward = 'forward',\n forwardFast = 'forward-fast',\n forwardStopped = 'forward-stopped',\n backward = 'backward',\n backwardFast = 'backward-fast',\n backwardStopped = 'backward-stopped',\n standby = 'standby',\n}\n\nexport enum AutomationButtonLabelDirection {\n up = 'up',\n down = 'down',\n left = 'left',\n right = 'right',\n}\n\n/**\n * The orientation of the inner icon/symbol.\n * - `horizontal`: The icon is shown in its default horizontal orientation.\n * - `verticalRight`: The icon is rotated 90° clockwise.\n * - `verticalLeft`: The icon is rotated 90° counter-clockwise.\n */\nexport enum AutomationButtonOrientation {\n horizontal = 'horizontal',\n verticalRight = 'verticalRight',\n verticalLeft = 'verticalLeft',\n}\n\n/**\n * The positioning of the automation button.\n * - `point`: The button is wrapped in a 0x0 px div, where the center of the symbol is the center of the div.\n * - `symbol`: The button is wrapped in a div containing the symbol but not the readout stack\n * - `button`: The button not wrapped, in is positioned based on the full size of the button.\n */\nexport enum AutomationButtonPositioning {\n point = 'point',\n symbol = 'symbol',\n button = 'button',\n}\n\n@customElement('obc-automation-button')\nexport class ObcAutomationButton extends LitElement {\n @property({type: String}) variant: AutomationButtonVariant =\n AutomationButtonVariant.regular;\n @property({type: String}) state: AutomationButtonState =\n AutomationButtonState.open;\n @property({type: Boolean}) static: boolean = false;\n @property({type: Boolean, attribute: false}) showReadoutStack: boolean = true;\n /** @availableWhen showReadoutStack==true */\n @property({type: Array, attribute: false})\n readouts: AutomationButtonReadoutStack[] = [];\n /** @availableWhen showReadoutStack==true */\n @property({type: String})\n tag: string | null = null;\n /** @availableWhen showReadoutStack==true */\n @property({type: String}) readoutPosition: AutomationButtonReadoutPosition =\n AutomationButtonReadoutPosition.bottom;\n /** @availableWhen showReadoutStack==true */\n @property({type: String}) readoutSize: AutomationButtonReadoutStackSize =\n AutomationButtonReadoutStackSize.regular;\n @property({type: Boolean}) alert: boolean = false;\n /** @availableWhen alert==true */\n @property({type: String}) alertFrameType: ObcAlertFrameType =\n ObcAlertFrameType.SmallSideFlip;\n /** @availableWhen alert==true */\n @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =\n ObcAlertFrameThickness.Small;\n /** @availableWhen alert==true */\n @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;\n /** @availableWhen alert==true */\n @property({type: String}) alertFrameMode: ObcAlertFrameMode =\n ObcAlertFrameMode.ackedActive;\n /** @availableWhen alert==true && alertFrameType in [LargeSideFlip, BottomFlip, TopFlip] */\n @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n true;\n /** @availableWhen alert==true */\n @property({type: Boolean}) showAlertIcon: boolean = false;\n @property({type: Boolean}) progress: boolean = false;\n /** @availableWhen progress==true */\n @property({type: String}) progressMode: CircularProgressMode =\n CircularProgressMode.indeterminate;\n /** @availableWhen progress==true && progressMode in [determinate, progressive-indeterminate] */\n @property({type: Number}) progressValue: number = 0;\n /** @availableWhen variant in [double, forward, flatForward] */\n @property({type: String}) direction: AutomationButtonDirection =\n AutomationButtonDirection.forward;\n @property({type: String}) positioning: AutomationButtonPositioning =\n AutomationButtonPositioning.point;\n @property({type: String}) orientation: AutomationButtonOrientation =\n AutomationButtonOrientation.horizontal;\n /** Badge spacer should be set to true if there is a badge on the same side as the label */\n @property({type: Boolean}) hasBadgeSpacer: boolean = false;\n\n override render() {\n const effectiveVariant = this.effectiveVariant;\n\n const hasLabelContent =\n this.showReadoutStack && (this.readouts.length > 0 || this.tag !== null);\n\n return this.wrapContent(html`\n <button\n class=${classMap({\n wrapper: true,\n ['positioning-' + this.positioning]: true,\n ['variant-' + effectiveVariant]: true,\n ['state-' + this.state]: true,\n 'label-empty': !hasLabelContent,\n ['label-' + this.readoutPosition]: true,\n 'has-badge-spacer': this.hasBadgeSpacer,\n alert: this.alert,\n progress: this.progress,\n static: this.static,\n })}\n >\n <div class=\"icon-touch-target\">\n ${this.renderIconHolder()}\n <div class=\"badge-top-right\">\n <slot name=\"badge-top-right\"></slot>\n </div>\n <div class=\"badge-top-left\">\n <slot name=\"badge-top-left\"></slot>\n </div>\n <div class=\"badge-bottom-left\">\n <slot name=\"badge-bottom-left\"></slot>\n </div>\n <div class=\"badge-bottom-right\">\n <slot name=\"badge-bottom-right\"></slot>\n </div>\n </div>\n ${this.showReadoutStack\n ? html`\n <div class=\"badge-spacer\"></div>\n <obc-automation-button-readout-stack\n .readouts=${this.readouts}\n .tag=${this.tag}\n .size=${this.readoutSize}\n .idTagOrientation=${this.getIdTagOrientation()}\n ></obc-automation-button-readout-stack>\n `\n : nothing}\n ${this.alert && this.positioning === AutomationButtonPositioning.point\n ? html` <obc-alert-frame\n class=\"alert-frame\"\n .type=${this.alertFrameType}\n .thickness=${this.alertFrameThickness}\n .status=${this.alertFrameStatus}\n .mode=${this.alertFrameMode}\n .showAlertCategoryIcon=${this.showAlertCategoryIcon}\n .showIcon=${this.showAlertIcon}\n >\n <span slot=\"icon\"><slot name=\"alert-icon\"></slot></span>\n <span slot=\"label\"><slot name=\"alert-label\"></slot></span>\n <span slot=\"timer\"><slot name=\"alert-timer\"></slot></span>\n </obc-alert-frame>`\n : nothing}\n </button>\n `);\n }\n\n private wrapContent(content: HTMLTemplateResult): HTMLTemplateResult {\n if (this.positioning === AutomationButtonPositioning.point) {\n return html`<div class=\"point-wrapper\">${content}</div>`;\n }\n const innerContent = wrapWithAlertFrame(\n this.alert\n ? {\n type: this.alertFrameType,\n thickness: this.alertFrameThickness,\n status: this.alertFrameStatus,\n mode: this.alertFrameMode,\n showIcon: this.showAlertIcon,\n showAlertCategoryIcon: this.showAlertCategoryIcon,\n }\n : false,\n content\n );\n if (this.positioning === AutomationButtonPositioning.symbol) {\n return html`<div\n class=${classMap({\n 'symbol-wrapper': true,\n ['label-' + this.readoutPosition]: true,\n })}\n >\n ${innerContent}\n </div> `;\n }\n return innerContent;\n }\n\n static override styles = unsafeCSS(compentStyle);\n\n private get effectiveVariant(): AutomationButtonVariant {\n if (this.progress) {\n return AutomationButtonVariant.regular;\n }\n return this.variant;\n }\n\n private renderIconHolder(): HTMLTemplateResult {\n const effectiveVariant = this.effectiveVariant;\n const progressRing = this.getProgressRing();\n const iconHolderClasses = classMap({\n 'icon-holder': true,\n ['orientation-' + this.orientation]: true,\n });\n if (this.variant === AutomationButtonVariant.flatForward) {\n return html`<div class=${iconHolderClasses}>\n ${this.getDirectionIcon(effectiveVariant, 'icon-primary')}\n ${this.getDirectionIcon(effectiveVariant, 'icon-silhouette')}\n ${progressRing}\n </div>`;\n } else if (this.variant === AutomationButtonVariant.forward) {\n return html`<div class=${iconHolderClasses}>\n ${this.getDirectionIcon(effectiveVariant, 'icon-primary')}\n ${progressRing}\n </div>`;\n }\n\n const direction = this.getDirectionIcon(effectiveVariant);\n const showIcon = [\n AutomationButtonVariant.regular,\n AutomationButtonVariant.double,\n AutomationButtonVariant.flat,\n AutomationButtonVariant.square,\n ].includes(effectiveVariant);\n return html`<div class=${iconHolderClasses}>\n ${direction}\n ${showIcon\n ? html`<div class=\"icon-primary\">\n <slot name=\"icon\"></slot>\n </div>\n ${effectiveVariant === AutomationButtonVariant.flat\n ? html` <div class=\"icon-silhouette\">\n <slot name=\"icon-silhouette\"></slot>\n </div>`\n : nothing} `\n : nothing}\n ${progressRing}\n </div>`;\n }\n\n private getProgressRing(): null | HTMLTemplateResult {\n if (!this.progress) {\n return null;\n }\n\n return html`<obc-circular-progress\n class=\"progress-ring\"\n .mode=${this.progressMode}\n .value=${this.progressValue}\n ></obc-circular-progress>`;\n }\n\n private getDirectionIcon(\n variant: AutomationButtonVariant,\n className: string = 'icon-direction'\n ): typeof nothing | HTMLTemplateResult {\n if (\n ![\n AutomationButtonVariant.double,\n AutomationButtonVariant.forward,\n AutomationButtonVariant.flatForward,\n ].includes(variant)\n ) {\n return nothing;\n } else if (this.direction === AutomationButtonDirection.forward) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8 5 v 14 L 20 12Z\"\n stroke=\"var(--automation-device-tertiary-color)\"\n fill=\"var(--automation-device-primary-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg> `;\n } else if (this.direction === AutomationButtonDirection.forwardFast) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 5 v 14 l 8.5 -7 Z M14.5 5 v 14 l 8.5 -7 Z\"\n stroke=\"var(--automation-device-tertiary-color)\"\n fill=\"var(--automation-device-primary-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg> `;\n } else if (this.direction === AutomationButtonDirection.forwardStopped) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8 5 v 14 L 20 12Z\"\n fill=\"var(--automation-device-tertiary-color)\"\n stroke=\"var(--automation-device-tertiary-inverted-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg> `;\n } else if (this.direction === AutomationButtonDirection.backward) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M16 5 v 14 L 4 12Z\"\n stroke=\"var(--automation-device-tertiary-color)\"\n fill=\"var(--automation-device-primary-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg>`;\n } else if (this.direction === AutomationButtonDirection.backwardFast) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20.5 5 v 14 l -8.5 -7 Z M9.5 5 v 14 l -8.5 -7 Z\"\n stroke=\"var(--automation-device-tertiary-color)\"\n fill=\"var(--automation-device-primary-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg>`;\n } else if (this.direction === AutomationButtonDirection.backwardStopped) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M16 5 v 14 L 4 12Z\"\n fill=\"var(--automation-device-tertiary-color)\"\n stroke=\"var(--automation-device-tertiary-inverted-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg> `;\n } else if (this.direction === AutomationButtonDirection.standby) {\n return html`<obi-standby class=\"${className}\" usecsscolor></obi-standby>`;\n }\n throw new Error('Invalid direction');\n }\n\n private getIdTagOrientation(): IdTagOrientation {\n if (this.readoutPosition === AutomationButtonReadoutPosition.top) {\n return IdTagOrientation.top;\n }\n return IdTagOrientation.bottom;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-button': ObcAutomationButton;\n }\n}\n"],"names":["AutomationButtonVariant","AutomationButtonState","AutomationButtonReadoutPosition","AutomationButtonDirection","AutomationButtonLabelDirection","AutomationButtonOrientation","AutomationButtonPositioning"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"automation-button.js","sources":["../../../src/automation/automation-button/automation-button.ts"],"sourcesContent":["import {HTMLTemplateResult, LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './automation-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-forward.js';\nimport '../../icons/icon-forward-fast.js';\nimport '../../icons/icon-forward-stopped.js';\nimport '../../icons/icon-backward.js';\nimport '../../icons/icon-backward-fast.js';\nimport '../../icons/icon-backward-stopped.js';\nimport '../../icons/icon-standby.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 '../../components/alert-frame/alert-frame.js';\nimport {\n ObcAlertFrameThickness,\n ObcAlertFrameType,\n ObcAlertFrameMode,\n wrapWithAlertFrame,\n} from '../../components/alert-frame/alert-frame.js';\nimport {AlertType} from '../../types.js';\nimport {customElement} from '../../decorator.js';\nimport {\n AutomationButtonReadoutStack,\n AutomationButtonReadoutStackSize,\n IdTagOrientation,\n} from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';\nimport '../../components/automation-button-readout-stack/automation-button-readout-stack.js';\nimport '../../building-blocks/circular-progress/circular-progress.js';\nimport {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';\n\nexport {CircularProgressMode};\n\nexport enum AutomationButtonVariant {\n regular = 'regular',\n double = 'double',\n forward = 'forward',\n square = 'square',\n flat = 'flat',\n flatForward = 'flat-forward',\n}\n\nexport enum AutomationButtonState {\n closed = 'closed',\n open = 'open',\n}\n\nexport enum AutomationButtonReadoutPosition {\n top = 'top',\n bottom = 'bottom',\n left = 'left',\n right = 'right',\n}\n\nexport enum AutomationButtonDirection {\n forward = 'forward',\n forwardFast = 'forward-fast',\n forwardStopped = 'forward-stopped',\n backward = 'backward',\n backwardFast = 'backward-fast',\n backwardStopped = 'backward-stopped',\n standby = 'standby',\n}\n\nexport enum AutomationButtonLabelDirection {\n up = 'up',\n down = 'down',\n left = 'left',\n right = 'right',\n none = 'none',\n}\n\n/**\n * The orientation of the inner icon/symbol.\n * - `horizontal`: The icon is shown in its default horizontal orientation.\n * - `verticalRight`: The icon is rotated 90° clockwise.\n * - `verticalLeft`: The icon is rotated 90° counter-clockwise.\n */\nexport enum AutomationButtonOrientation {\n horizontal = 'horizontal',\n verticalRight = 'verticalRight',\n verticalLeft = 'verticalLeft',\n}\n\n/**\n * The positioning of the automation button.\n * - `point`: The button is wrapped in a 0x0 px div, where the center of the symbol is the center of the div.\n * - `symbol`: The button is wrapped in a div containing the symbol but not the readout stack\n * - `button`: The button not wrapped, in is positioned based on the full size of the button.\n */\nexport enum AutomationButtonPositioning {\n point = 'point',\n symbol = 'symbol',\n button = 'button',\n}\n\n@customElement('obc-automation-button')\nexport class ObcAutomationButton extends LitElement {\n @property({type: String}) variant: AutomationButtonVariant =\n AutomationButtonVariant.regular;\n @property({type: String}) state: AutomationButtonState =\n AutomationButtonState.open;\n @property({type: Boolean}) static: boolean = false;\n @property({type: Boolean, attribute: false}) showReadoutStack: boolean = true;\n /** @availableWhen showReadoutStack==true */\n @property({type: Array, attribute: false})\n readouts: AutomationButtonReadoutStack[] = [];\n /** @availableWhen showReadoutStack==true */\n @property({type: String})\n tag: string | null = null;\n /** @availableWhen showReadoutStack==true */\n @property({type: String}) readoutPosition: AutomationButtonReadoutPosition =\n AutomationButtonReadoutPosition.bottom;\n /** @availableWhen showReadoutStack==true */\n @property({type: String}) readoutSize: AutomationButtonReadoutStackSize =\n AutomationButtonReadoutStackSize.regular;\n @property({type: Boolean}) alert: boolean = false;\n /** @availableWhen alert==true */\n @property({type: String}) alertFrameType: ObcAlertFrameType =\n ObcAlertFrameType.SmallSideFlip;\n /** @availableWhen alert==true */\n @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =\n ObcAlertFrameThickness.Small;\n /** @availableWhen alert==true */\n @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;\n /** @availableWhen alert==true */\n @property({type: String}) alertFrameMode: ObcAlertFrameMode =\n ObcAlertFrameMode.ackedActive;\n /** @availableWhen alert==true && alertFrameType in [LargeSideFlip, BottomFlip, TopFlip] */\n @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n true;\n /** @availableWhen alert==true */\n @property({type: Boolean}) showAlertIcon: boolean = false;\n @property({type: Boolean}) progress: boolean = false;\n /** @availableWhen progress==true */\n @property({type: String}) progressMode: CircularProgressMode =\n CircularProgressMode.indeterminate;\n /** @availableWhen progress==true && progressMode in [determinate, progressive-indeterminate] */\n @property({type: Number}) progressValue: number = 0;\n /** @availableWhen variant in [double, forward, flatForward] */\n @property({type: String}) direction: AutomationButtonDirection =\n AutomationButtonDirection.forward;\n @property({type: String}) positioning: AutomationButtonPositioning =\n AutomationButtonPositioning.point;\n @property({type: String}) orientation: AutomationButtonOrientation =\n AutomationButtonOrientation.horizontal;\n /** Badge spacer should be set to true if there is a badge on the same side as the label */\n @property({type: Boolean}) hasBadgeSpacer: boolean = false;\n\n override render() {\n const effectiveVariant = this.effectiveVariant;\n\n const hasLabelContent =\n this.showReadoutStack && (this.readouts.length > 0 || this.tag !== null);\n\n return this.wrapContent(html`\n <button\n class=${classMap({\n wrapper: true,\n ['positioning-' + this.positioning]: true,\n ['variant-' + effectiveVariant]: true,\n ['state-' + this.state]: true,\n 'label-empty': !hasLabelContent,\n ['label-' + this.readoutPosition]: true,\n 'has-badge-spacer': this.hasBadgeSpacer,\n alert: this.alert,\n progress: this.progress,\n static: this.static,\n })}\n >\n <div class=\"icon-touch-target\">\n ${this.renderIconHolder()}\n <div class=\"badge-top-right\">\n <slot name=\"badge-top-right\"></slot>\n </div>\n <div class=\"badge-top-left\">\n <slot name=\"badge-top-left\"></slot>\n </div>\n <div class=\"badge-bottom-left\">\n <slot name=\"badge-bottom-left\"></slot>\n </div>\n <div class=\"badge-bottom-right\">\n <slot name=\"badge-bottom-right\"></slot>\n </div>\n </div>\n ${this.showReadoutStack\n ? html`\n <div class=\"badge-spacer\"></div>\n <obc-automation-button-readout-stack\n .readouts=${this.readouts}\n .tag=${this.tag}\n .size=${this.readoutSize}\n .idTagOrientation=${this.getIdTagOrientation()}\n ></obc-automation-button-readout-stack>\n `\n : nothing}\n ${this.alert && this.positioning === AutomationButtonPositioning.point\n ? html` <obc-alert-frame\n class=\"alert-frame\"\n .type=${this.alertFrameType}\n .thickness=${this.alertFrameThickness}\n .status=${this.alertFrameStatus}\n .mode=${this.alertFrameMode}\n .showAlertCategoryIcon=${this.showAlertCategoryIcon}\n .showIcon=${this.showAlertIcon}\n >\n <span slot=\"icon\"><slot name=\"alert-icon\"></slot></span>\n <span slot=\"label\"><slot name=\"alert-label\"></slot></span>\n <span slot=\"timer\"><slot name=\"alert-timer\"></slot></span>\n </obc-alert-frame>`\n : nothing}\n </button>\n `);\n }\n\n private wrapContent(content: HTMLTemplateResult): HTMLTemplateResult {\n if (this.positioning === AutomationButtonPositioning.point) {\n return html`<div class=\"point-wrapper\">${content}</div>`;\n }\n const innerContent = wrapWithAlertFrame(\n this.alert\n ? {\n type: this.alertFrameType,\n thickness: this.alertFrameThickness,\n status: this.alertFrameStatus,\n mode: this.alertFrameMode,\n showIcon: this.showAlertIcon,\n showAlertCategoryIcon: this.showAlertCategoryIcon,\n }\n : false,\n content\n );\n if (this.positioning === AutomationButtonPositioning.symbol) {\n return html`<div\n class=${classMap({\n 'symbol-wrapper': true,\n ['label-' + this.readoutPosition]: true,\n })}\n >\n ${innerContent}\n </div> `;\n }\n return innerContent;\n }\n\n static override styles = unsafeCSS(compentStyle);\n\n private get effectiveVariant(): AutomationButtonVariant {\n if (this.progress) {\n return AutomationButtonVariant.regular;\n }\n return this.variant;\n }\n\n private renderIconHolder(): HTMLTemplateResult {\n const effectiveVariant = this.effectiveVariant;\n const progressRing = this.getProgressRing();\n const iconHolderClasses = classMap({\n 'icon-holder': true,\n ['orientation-' + this.orientation]: true,\n });\n if (this.variant === AutomationButtonVariant.flatForward) {\n return html`<div class=${iconHolderClasses}>\n ${this.getDirectionIcon(effectiveVariant, 'icon-primary')}\n ${this.getDirectionIcon(effectiveVariant, 'icon-silhouette')}\n ${progressRing}\n </div>`;\n } else if (this.variant === AutomationButtonVariant.forward) {\n return html`<div class=${iconHolderClasses}>\n ${this.getDirectionIcon(effectiveVariant, 'icon-primary')}\n ${progressRing}\n </div>`;\n }\n\n const direction = this.getDirectionIcon(effectiveVariant);\n const showIcon = [\n AutomationButtonVariant.regular,\n AutomationButtonVariant.double,\n AutomationButtonVariant.flat,\n AutomationButtonVariant.square,\n ].includes(effectiveVariant);\n return html`<div class=${iconHolderClasses}>\n ${direction}\n ${showIcon\n ? html`<div class=\"icon-primary\">\n <slot name=\"icon\"></slot>\n </div>\n ${effectiveVariant === AutomationButtonVariant.flat\n ? html` <div class=\"icon-silhouette\">\n <slot name=\"icon-silhouette\"></slot>\n </div>`\n : nothing} `\n : nothing}\n ${progressRing}\n </div>`;\n }\n\n private getProgressRing(): null | HTMLTemplateResult {\n if (!this.progress) {\n return null;\n }\n\n return html`<obc-circular-progress\n class=\"progress-ring\"\n .mode=${this.progressMode}\n .value=${this.progressValue}\n ></obc-circular-progress>`;\n }\n\n private getDirectionIcon(\n variant: AutomationButtonVariant,\n className: string = 'icon-direction'\n ): typeof nothing | HTMLTemplateResult {\n if (\n ![\n AutomationButtonVariant.double,\n AutomationButtonVariant.forward,\n AutomationButtonVariant.flatForward,\n ].includes(variant)\n ) {\n return nothing;\n } else if (this.direction === AutomationButtonDirection.forward) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8 5 v 14 L 20 12Z\"\n stroke=\"var(--automation-device-tertiary-color)\"\n fill=\"var(--automation-device-primary-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg> `;\n } else if (this.direction === AutomationButtonDirection.forwardFast) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M3.5 5 v 14 l 8.5 -7 Z M14.5 5 v 14 l 8.5 -7 Z\"\n stroke=\"var(--automation-device-tertiary-color)\"\n fill=\"var(--automation-device-primary-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg> `;\n } else if (this.direction === AutomationButtonDirection.forwardStopped) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8 5 v 14 L 20 12Z\"\n fill=\"var(--automation-device-tertiary-color)\"\n stroke=\"var(--automation-device-tertiary-inverted-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg> `;\n } else if (this.direction === AutomationButtonDirection.backward) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M16 5 v 14 L 4 12Z\"\n stroke=\"var(--automation-device-tertiary-color)\"\n fill=\"var(--automation-device-primary-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg>`;\n } else if (this.direction === AutomationButtonDirection.backwardFast) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20.5 5 v 14 l -8.5 -7 Z M9.5 5 v 14 l -8.5 -7 Z\"\n stroke=\"var(--automation-device-tertiary-color)\"\n fill=\"var(--automation-device-primary-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg>`;\n } else if (this.direction === AutomationButtonDirection.backwardStopped) {\n return html`<svg\n class=\"${className}\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M16 5 v 14 L 4 12Z\"\n fill=\"var(--automation-device-tertiary-color)\"\n stroke=\"var(--automation-device-tertiary-inverted-color)\"\n vector-effect=\"non-scaling-stroke\"\n />\n </svg> `;\n } else if (this.direction === AutomationButtonDirection.standby) {\n return html`<obi-standby class=\"${className}\" usecsscolor></obi-standby>`;\n }\n throw new Error('Invalid direction');\n }\n\n private getIdTagOrientation(): IdTagOrientation {\n if (this.readoutPosition === AutomationButtonReadoutPosition.top) {\n return IdTagOrientation.top;\n }\n return IdTagOrientation.bottom;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-automation-button': ObcAutomationButton;\n }\n}\n"],"names":["AutomationButtonVariant","AutomationButtonState","AutomationButtonReadoutPosition","AutomationButtonDirection","AutomationButtonLabelDirection","AutomationButtonOrientation","AutomationButtonPositioning"],"mappings":"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"}
|
package/dist/components/automation-button-readout-stack/automation-button-readout-stack.d.ts
CHANGED
|
@@ -25,7 +25,7 @@ export interface AutomationButtonReadoutStackValue {
|
|
|
25
25
|
value: number;
|
|
26
26
|
nDigits: number;
|
|
27
27
|
unit: string;
|
|
28
|
-
direction: 'up' | 'down' | 'left' | 'right';
|
|
28
|
+
direction: 'up' | 'down' | 'left' | 'right' | 'none';
|
|
29
29
|
icon: 'none' | 'arrow' | 'chevron';
|
|
30
30
|
}
|
|
31
31
|
export interface AutomationButtonReadoutStackStateOn {
|
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,CAAC;
|
|
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,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;IA4D3E,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"}
|
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';\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@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@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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,IAAK,qDAAAA,sCAAL;AACLA,oCAAA,OAAA,IAAQ;AACRA,oCAAA,SAAA,IAAU;AACVA,oCAAA,UAAA,IAAW;AAHD,SAAAA;AAAA,GAAA,oCAAA,CAAA,CAAA;AAML,IAAK,qCAAAC,sBAAL;AACLA,oBAAA,KAAA,IAAM;AACNA,oBAAA,QAAA,IAAS;AAFC,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAwCL,IAAM,kCAAN,cAA8C,WAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEL,SAAA,WAA2C,CAAA;AACjB,SAAA,MAAqB;AACnC,SAAA,OACV;AACU,SAAA,mBAAqC;AAAA,EAAA;AAAA,EAEjD,YAAiD;AAC/C,QAAI,KAAK,QAAQ,KAAM,QAAO;AAE9B,WAAO,wBAAwB,KAAK,GAAG;AAAA,EACzC;AAAA,EAEQ,qBACN,MACA,MACA,SACoB;AACpB,WAAO,gCAAgC,IAAI;AAAA,QACvC,IAAI;AAAA;AAAA,uCAE2B,OAAO;AAAA;AAAA;AAAA,EAG5C;AAAA,EAEQ,gBAAgB,MAAkC;AACxD,WAAO,gCAAgC,IAAI;AAAA,EAC7C;AAAA,EAEA,YAAY,SAAgE;AAC1E,UAAM,IAAI,QAAQ,MAAM,QAAQ,CAAC;AACjC,UAAM,cACJ,EAAE,SAAS,QAAQ,UAAU,IAAI,OAAO,QAAQ,UAAU,EAAE,MAAM,IAAI;AACxE,UAAM,cAAc,cAAc;AAElC,QAAI,gBAAqD;AACzD,QAAI,QAAQ,QAAQ,SAAS;AAC3B,UAAI,QAAQ,aAAa,MAAM;AAC7B,wBAAgB;AAAA;AAAA;AAAA;AAAA,MAIlB,WAAW,QAAQ,aAAa,QAAQ;AACtC,wBAAgB;AAAA;AAAA;AAAA;AAAA,MAIlB,WAAW,QAAQ,aAAa,QAAQ;AACtC,wBAAgB;AAAA;AAAA;AAAA;AAAA,MAIlB,WAAW,QAAQ,aAAa,SAAS;AACvC,wBAAgB;AAAA;AAAA;AAAA;AAAA,MAIlB;AAAA,IACF,WAAW,QAAQ,QAAQ,WAAW;AACpC,UAAI,QAAQ,aAAa,MAAM;AAC7B,wBAAgB;AAAA;AAAA;AAAA;AAAA,MAIlB,WAAW,QAAQ,aAAa,QAAQ;AACtC,wBAAgB;AAAA;AAAA;AAAA;AAAA,MAIlB,WAAW,QAAQ,aAAa,QAAQ;AACtC,wBAAgB;AAAA;AAAA;AAAA;AAAA,MAIlB,WAAW,QAAQ,aAAa,SAAS;AACvC,wBAAgB;AAAA;AAAA;AAAA;AAAA,MAIlB;AAAA,IACF;AACA,UAAM,UAAU;AAAA,QACZ,KAAK,gBAAgB,WAAW,CAAC;AAAA,2BACd,QAAQ,IAAI;AAAA;AAGnC,WAAO,KAAK,qBAAqB,SAAS,eAAe,OAAO;AAAA,EAClE;AAAA,EAEA,eACE,SACoB;AACpB,QAAI,UAA8B;AAClC,QAAI,QAAQ,SAAS;AACnB,gBAAU;AAAA,IACZ;AAEA,UAAM,UAAU,KAAK,gBAAgB,QAAQ,KAAK;AAClD,WAAO,KAAK,qBAAqB,aAAa,SAAS,OAAO;AAAA,EAChE;AAAA,EAEA,cACE,SACoB;AACpB,QAAI,SAA6B;AACjC,QAAI,QAAQ,SAAS;AACnB,eAAS;AAAA,IACX;AAEA,UAAM,UAAU,KAAK,gBAAgB,QAAQ,KAAK;AAClD,WAAO,KAAK,qBAAqB,YAAY,QAAQ,OAAO;AAAA,EAC9D;AAAA,EAEA,aACE,SACoB;AACpB,UAAM,IAAI,QAAQ,MAAM,QAAQ,CAAC;AAEjC,QAAI,kBAAsC;AAC1C,QAAI,QAAQ,SAAS;AACnB,wBAAkB;AAAA;AAAA;AAAA;AAAA,IAIpB;AAEA,UAAM,UAAU;AAAA,QACZ,KAAK,gBAAgB,CAAC,CAAC;AAAA,2BACJ,QAAQ,IAAI;AAAA;AAGnC,WAAO;AAAA,QACH,KAAK,qBAAqB,UAAU,iBAAiB,OAAO,CAAC;AAAA;AAAA,EAEnE;AAAA,EAEA,cAAc,SAA2D;AACvE,QAAI,QAAQ,SAAS,SAAS;AAC5B,aAAO,KAAK,YAAY,OAAO;AAAA,IACjC,WAAW,QAAQ,SAAS,YAAY;AACtC,aAAO,KAAK,cAAc,OAAO;AAAA,IACnC,WAAW,QAAQ,SAAS,aAAa;AACvC,aAAO,KAAK,eAAe,OAAO;AAAA,IACpC,WAAW,QAAQ,SAAS,UAAU;AACpC,aAAO,KAAK,aAAa,OAAO;AAAA,IAClC,OAAO;AACL,YAAM,IAAI,MAAM,sBAAsB;AAAA,IACxC;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,sBAAsB,KAAK,SAAS;AAAA,MACxC,CAAC,YACC,QAAQ,SAAS,WACjB,QAAQ,SAAS,eACjB,QAAQ,SAAS,cACjB,QAAQ,SAAS;AAAA,IAAA;AAGrB,UAAM,mBAAmB,oBAAoB;AAAA,MAAI,CAAC,MAChD,KAAK,cAAc,CAAC;AAAA,IAAA;AAEtB,UAAM,MAAM,KAAK,UAAA;AACjB,UAAM,WAAsB,CAAA;AAE5B,QAAI,KAAK,qBAAqB,OAAsB;AAClD,eAAS,KAAK,GAAG;AACjB,eAAS,KAAK,GAAG,gBAAgB;AAAA,IACnC,OAAO;AACL,eAAS,KAAK,GAAG,gBAAgB;AACjC,eAAS,KAAK,GAAG;AAAA,IACnB;AAEA,WAAO,iCAAiC,KAAK,IAAI,KAAK,QAAQ;AAAA,EAChE;AAGF;AAnLa,gCAkLK,SAAS,UAAU,YAAY;AAhL/C,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAD9B,gCAEX,WAAA,YAAA,CAAA;AAC0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,gCAGe,WAAA,OAAA,CAAA;AACd,gBAAA;AAAA,EAAX,SAAA;AAAS,GAJC,gCAIC,WAAA,QAAA,CAAA;AAEA,gBAAA;AAAA,EAAX,SAAA;AAAS,GANC,gCAMC,WAAA,oBAAA,CAAA;AAND,kCAAN,gBAAA;AAAA,EADN,cAAc,qCAAqC;AAAA,GACvC,+BAAA;"}
|
|
@@ -11,12 +11,21 @@ const componentStyle = css`
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
/* Host takes each sector's crop aspect (see \`sectorClips\`): 270/90 square, 180
|
|
14
|
-
wide — so the dial is the same size at any width.
|
|
14
|
+
wide — so the dial is the same size at any width.
|
|
15
|
+
|
|
16
|
+
\`width\`/\`height: auto\` + \`max-width\`/\`max-height: 100%\` makes the host the
|
|
17
|
+
largest box of the sector's aspect ratio that fits inside *both* the
|
|
18
|
+
available width and height. Using \`height: auto\` alone only honours the
|
|
19
|
+
width, so in a short, wide (e.g. flex) container the square would grow as
|
|
20
|
+
tall as it is wide and overflow — see issue #992. */
|
|
15
21
|
|
|
16
22
|
:host([sector="270"]),
|
|
17
23
|
:host([sector="90-left"]),
|
|
18
24
|
:host([sector="90-right"]) {
|
|
25
|
+
width: auto;
|
|
19
26
|
height: auto;
|
|
27
|
+
max-width: 100%;
|
|
28
|
+
max-height: 100%;
|
|
20
29
|
aspect-ratio: 1;
|
|
21
30
|
}
|
|
22
31
|
|
|
@@ -24,7 +33,10 @@ const componentStyle = css`
|
|
|
24
33
|
sync with \`sectorClips\` bottom=44 in gauge-radial.ts. */
|
|
25
34
|
|
|
26
35
|
:host([sector="180"]) {
|
|
36
|
+
width: auto;
|
|
27
37
|
height: auto;
|
|
38
|
+
max-width: 100%;
|
|
39
|
+
max-height: 100%;
|
|
28
40
|
aspect-ratio: 448 / 251;
|
|
29
41
|
}
|
|
30
42
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gauge-radial.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"gauge-radial.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type {Meta, StoryObj} from '@storybook/web-vite';
|
|
2
2
|
import {ObcAnalogValve} from './analog-valve.js';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
AutomationButtonLabelDirection,
|
|
5
|
+
AutomationButtonReadoutPosition,
|
|
6
|
+
} from '../automation-button/automation-button.js';
|
|
4
7
|
import {AutomationButtonReadoutStackSize} from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';
|
|
5
8
|
import './analog-valve.js';
|
|
6
9
|
import {crossDecorator} from '../../storybook-util.js';
|
|
@@ -22,6 +25,7 @@ const meta: Meta<typeof ObcAnalogValve> = {
|
|
|
22
25
|
tag: '#0012',
|
|
23
26
|
readoutPosition: AutomationButtonReadoutPosition.bottom,
|
|
24
27
|
readoutSize: AutomationButtonReadoutStackSize.regular,
|
|
28
|
+
labelDirection: AutomationButtonLabelDirection.right,
|
|
25
29
|
alert: false,
|
|
26
30
|
progress: false,
|
|
27
31
|
vertical: false,
|
|
@@ -29,6 +33,10 @@ const meta: Meta<typeof ObcAnalogValve> = {
|
|
|
29
33
|
},
|
|
30
34
|
argTypes: {
|
|
31
35
|
...argTypesAbstractAutomationButtonPassiveRound,
|
|
36
|
+
labelDirection: {
|
|
37
|
+
options: Object.values(AutomationButtonLabelDirection),
|
|
38
|
+
control: {type: 'radio'},
|
|
39
|
+
},
|
|
32
40
|
value: {control: {type: 'range', min: 0, max: 100, step: 1}},
|
|
33
41
|
},
|
|
34
42
|
} as Meta<typeof ObcAnalogValve>;
|
|
@@ -50,6 +58,14 @@ export const Closed: Story = {
|
|
|
50
58
|
},
|
|
51
59
|
};
|
|
52
60
|
|
|
61
|
+
export const WithoutLabelDirection: Story = {
|
|
62
|
+
args: {
|
|
63
|
+
open: true,
|
|
64
|
+
value: 20,
|
|
65
|
+
labelDirection: AutomationButtonLabelDirection.none,
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
|
|
53
69
|
export const WithBadges: Story = {
|
|
54
70
|
args: {
|
|
55
71
|
open: true,
|
|
@@ -27,7 +27,10 @@ export class ObcAnalogValve extends ObcAbstractAutomationButton {
|
|
|
27
27
|
return [
|
|
28
28
|
{
|
|
29
29
|
type: 'value',
|
|
30
|
-
icon:
|
|
30
|
+
icon:
|
|
31
|
+
this.labelDirection === AutomationButtonLabelDirection.none
|
|
32
|
+
? 'none'
|
|
33
|
+
: 'arrow',
|
|
31
34
|
value: this.value,
|
|
32
35
|
nDigits: 3,
|
|
33
36
|
unit: '%',
|
|
@@ -42,7 +42,10 @@ export class ObcAbstractAutomationButtonMotorized extends ObcAbstractAutomationB
|
|
|
42
42
|
nDigits: this.speedMaxDigits,
|
|
43
43
|
unit: this.speedUnit,
|
|
44
44
|
direction: this.labelDirection,
|
|
45
|
-
icon:
|
|
45
|
+
icon:
|
|
46
|
+
this.labelDirection === AutomationButtonLabelDirection.none
|
|
47
|
+
? 'none'
|
|
48
|
+
: 'chevron',
|
|
46
49
|
},
|
|
47
50
|
];
|
|
48
51
|
} else if (!this.on) {
|
|
@@ -5,18 +5,30 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
/* Host takes each sector's crop aspect (see `sectorClips`): 270/90 square, 180
|
|
8
|
-
wide — so the dial is the same size at any width.
|
|
8
|
+
wide — so the dial is the same size at any width.
|
|
9
|
+
|
|
10
|
+
`width`/`height: auto` + `max-width`/`max-height: 100%` makes the host the
|
|
11
|
+
largest box of the sector's aspect ratio that fits inside *both* the
|
|
12
|
+
available width and height. Using `height: auto` alone only honours the
|
|
13
|
+
width, so in a short, wide (e.g. flex) container the square would grow as
|
|
14
|
+
tall as it is wide and overflow — see issue #992. */
|
|
9
15
|
:host([sector="270"]),
|
|
10
16
|
:host([sector="90-left"]),
|
|
11
17
|
:host([sector="90-right"]) {
|
|
18
|
+
width: auto;
|
|
12
19
|
height: auto;
|
|
20
|
+
max-width: 100%;
|
|
21
|
+
max-height: 100%;
|
|
13
22
|
aspect-ratio: 1;
|
|
14
23
|
}
|
|
15
24
|
|
|
16
25
|
/* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
|
|
17
26
|
sync with `sectorClips` bottom=44 in gauge-radial.ts. */
|
|
18
27
|
:host([sector="180"]) {
|
|
28
|
+
width: auto;
|
|
19
29
|
height: auto;
|
|
30
|
+
max-width: 100%;
|
|
31
|
+
max-height: 100%;
|
|
20
32
|
aspect-ratio: 448 / 251;
|
|
21
33
|
}
|
|
22
34
|
|
|
@@ -241,6 +241,24 @@ export const Sector90RightWithReadout: Story = {
|
|
|
241
241
|
},
|
|
242
242
|
};
|
|
243
243
|
|
|
244
|
+
export const ShortWideContainer: Story = {
|
|
245
|
+
args: {
|
|
246
|
+
...sectorStoryArgs,
|
|
247
|
+
sector: GaugeRadialSector.deg270,
|
|
248
|
+
width: 600,
|
|
249
|
+
height: 160,
|
|
250
|
+
},
|
|
251
|
+
};
|
|
252
|
+
|
|
253
|
+
export const ShortWideContainer180: Story = {
|
|
254
|
+
args: {
|
|
255
|
+
...sectorStoryArgs,
|
|
256
|
+
sector: GaugeRadialSector.deg180,
|
|
257
|
+
width: 600,
|
|
258
|
+
height: 120,
|
|
259
|
+
},
|
|
260
|
+
};
|
|
261
|
+
|
|
244
262
|
const readoutStoryArgs = {
|
|
245
263
|
value: 123,
|
|
246
264
|
minValue: 0,
|