@oicl/openbridge-webcomponents 2.0.0-next.171 → 2.0.0-next.173
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 +286 -105
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +591 -42
- package/dist/automation/automation-button/abstract-automation-button-motorized.d.ts +11 -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 +14 -4
- package/dist/automation/automation-button/abstract-automation-button-motorized.js.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-squared.d.ts +25 -1
- package/dist/automation/automation-button/abstract-automation-button-squared.d.ts.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-squared.js +27 -3
- package/dist/automation/automation-button/abstract-automation-button-squared.js.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts +12 -0
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js +8 -0
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js.map +1 -1
- package/dist/automation/bipolar-transistor/bipolar-transistor.js +4 -4
- package/dist/automation/bipolar-transistor/bipolar-transistor.js.map +1 -1
- package/dist/automation/capacitor/capacitor.js +4 -4
- package/dist/automation/capacitor/capacitor.js.map +1 -1
- package/dist/automation/converter/converter.js +4 -4
- package/dist/automation/converter/converter.js.map +1 -1
- package/dist/automation/damper/damper.js +1 -1
- package/dist/automation/damper/damper.js.map +1 -1
- package/dist/automation/diodes/diodes.js +6 -6
- package/dist/automation/diodes/diodes.js.map +1 -1
- package/dist/automation/fan/fan.js +1 -1
- package/dist/automation/fan/fan.js.map +1 -1
- package/dist/automation/filter/filter.js +4 -4
- package/dist/automation/filter/filter.js.map +1 -1
- package/dist/automation/ground/ground.js +3 -3
- package/dist/automation/ground/ground.js.map +1 -1
- package/dist/automation/logic/logic.js +6 -6
- package/dist/automation/logic/logic.js.map +1 -1
- package/dist/automation/mosfet/mosfet.js +8 -8
- package/dist/automation/mosfet/mosfet.js.map +1 -1
- package/dist/automation/motor/motor.js +2 -2
- package/dist/automation/motor/motor.js.map +1 -1
- package/dist/automation/pump/pump.js +2 -2
- package/dist/automation/pump/pump.js.map +1 -1
- package/dist/automation/resistor/resistor.js +5 -5
- package/dist/automation/resistor/resistor.js.map +1 -1
- package/dist/automation/router/router.js +2 -2
- package/dist/automation/router/router.js.map +1 -1
- package/dist/automation/source/source.js +5 -5
- package/dist/automation/source/source.js.map +1 -1
- package/dist/automation/switch/switch.js +4 -4
- package/dist/automation/switch/switch.js.map +1 -1
- package/dist/automation/transformer/transformer.js +2 -2
- package/dist/automation/transformer/transformer.js.map +1 -1
- package/dist/components/accordion-card/accordion-card.css.js +61 -19
- package/dist/components/accordion-card/accordion-card.css.js.map +1 -1
- package/dist/components/accordion-card/accordion-card.d.ts +12 -3
- package/dist/components/accordion-card/accordion-card.d.ts.map +1 -1
- package/dist/components/accordion-card/accordion-card.js +23 -5
- package/dist/components/accordion-card/accordion-card.js.map +1 -1
- package/dist/components/accordion-item/accordion-item.css.js +40 -9
- package/dist/components/accordion-item/accordion-item.css.js.map +1 -1
- package/dist/components/accordion-item/accordion-item.d.ts +14 -5
- package/dist/components/accordion-item/accordion-item.d.ts.map +1 -1
- package/dist/components/accordion-item/accordion-item.js +23 -3
- package/dist/components/accordion-item/accordion-item.js.map +1 -1
- package/dist/internal/focus.d.ts +23 -0
- package/dist/internal/focus.d.ts.map +1 -1
- package/dist/internal/focus.js +38 -1
- package/dist/internal/focus.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"source.js","names":[],"sources":["../../../src/automation/source/source.ts"],"sourcesContent":["import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-sources-01-on.js';\nimport '../../icons/icon-sources-01-off.js';\nimport '../../icons/icon-sources-02-on.js';\nimport '../../icons/icon-sources-02-off.js';\nimport '../../icons/icon-sources-03-on.js';\nimport '../../icons/icon-sources-03-off.js';\nimport '../../icons/icon-sources-04-on.js';\nimport '../../icons/icon-sources-04-off.js';\nimport '../../icons/icon-sources-05-on.js';\nimport '../../icons/icon-sources-05-off.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAbstractAutomationButtonSquared} from '../automation-button/abstract-automation-button-squared.js';\n\nexport enum SourceAlternativeIcon {\n sources01 = 'sources01',\n sources02 = 'sources02',\n sources03 = 'sources03',\n sources04 = 'sources04',\n sources05 = 'sources05',\n}\n\n/**\n * @stable\n */\n@customElement('obc-source')\nexport class ObcSource extends ObcAbstractAutomationButtonSquared {\n @property({type: String}) alternativeIcon: SourceAlternativeIcon =\n SourceAlternativeIcon.sources01;\n\n override get icon() {\n switch (this.alternativeIcon) {\n case SourceAlternativeIcon.sources02:\n if (this.
|
|
1
|
+
{"version":3,"file":"source.js","names":[],"sources":["../../../src/automation/source/source.ts"],"sourcesContent":["import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-sources-01-on.js';\nimport '../../icons/icon-sources-01-off.js';\nimport '../../icons/icon-sources-02-on.js';\nimport '../../icons/icon-sources-02-off.js';\nimport '../../icons/icon-sources-03-on.js';\nimport '../../icons/icon-sources-03-off.js';\nimport '../../icons/icon-sources-04-on.js';\nimport '../../icons/icon-sources-04-off.js';\nimport '../../icons/icon-sources-05-on.js';\nimport '../../icons/icon-sources-05-off.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAbstractAutomationButtonSquared} from '../automation-button/abstract-automation-button-squared.js';\n\nexport enum SourceAlternativeIcon {\n sources01 = 'sources01',\n sources02 = 'sources02',\n sources03 = 'sources03',\n sources04 = 'sources04',\n sources05 = 'sources05',\n}\n\n/**\n * @stable\n */\n@customElement('obc-source')\nexport class ObcSource extends ObcAbstractAutomationButtonSquared {\n @property({type: String}) alternativeIcon: SourceAlternativeIcon =\n SourceAlternativeIcon.sources01;\n\n override get icon() {\n switch (this.alternativeIcon) {\n case SourceAlternativeIcon.sources02:\n if (this.turnedOn) {\n return html`<obi-sources-02-on\n usecsscolor\n slot=\"icon\"\n ></obi-sources-02-on>\n <obi-sources-02-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-02-on>`;\n } else {\n return html`<obi-sources-02-off\n usecsscolor\n slot=\"icon\"\n ></obi-sources-02-off>\n <obi-sources-02-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-02-off>`;\n }\n case SourceAlternativeIcon.sources03:\n if (this.turnedOn) {\n return html`<obi-sources-03-on\n usecsscolor\n slot=\"icon\"\n ></obi-sources-03-on>\n <obi-sources-03-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-03-on>`;\n } else {\n return html`<obi-sources-03-off\n usecsscolor\n slot=\"icon\"\n ></obi-sources-03-off>\n <obi-sources-03-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-03-off>`;\n }\n case SourceAlternativeIcon.sources04:\n if (this.turnedOn) {\n return html`<obi-sources-04-on\n usecsscolor\n slot=\"icon\"\n ></obi-sources-04-on>\n <obi-sources-04-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-04-on>`;\n } else {\n return html`<obi-sources-04-off\n usecsscolor\n slot=\"icon\"\n ></obi-sources-04-off>\n <obi-sources-04-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-04-off>`;\n }\n case SourceAlternativeIcon.sources05:\n if (this.turnedOn) {\n return html`<obi-sources-05-on\n usecsscolor\n slot=\"icon\"\n ></obi-sources-05-on>\n <obi-sources-05-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-05-on>`;\n } else {\n return html`<obi-sources-05-off\n usecsscolor\n slot=\"icon\"\n ></obi-sources-05-off>\n <obi-sources-05-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-05-off>`;\n }\n default:\n if (this.turnedOn) {\n return html`<obi-sources-01-on\n usecsscolor\n slot=\"icon\"\n ></obi-sources-01-on>\n <obi-sources-01-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-01-on>`;\n } else {\n return html`<obi-sources-01-off\n usecsscolor\n slot=\"icon\"\n ></obi-sources-01-off>\n <obi-sources-01-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-sources-01-off>`;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-source': ObcSource;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,IAAY,wBAAL,yBAAA,uBAAA;CACL,sBAAA,eAAA;CACA,sBAAA,eAAA;CACA,sBAAA,eAAA;CACA,sBAAA,eAAA;CACA,sBAAA,eAAA;;AACF,EAAA,CAAA,CAAA;AAMO,IAAM,YAAN,MAAM,kBAAkB,mCAAmC;;;;;CAIhE,IAAa,OAAO;EAClB,QAAQ,KAAK,iBAAb;GACE,KAAA,aACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;GASf,KAAA,aACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;GASf,KAAA,aACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;GASf,KAAA,aACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;GASf,SACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;EASjB;CACF;AACF;AA3GG,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,UAAA,WAAA,mBAAA,KAAA,CAAA;AAFzB,YAAA,WAAA,CAAA,cAAc,YAAY,CAAA,GAAA,SAAA"}
|
|
@@ -26,7 +26,7 @@ var ObcSwitch = class ObcSwitch extends ObcAbstractAutomationButtonSquared {
|
|
|
26
26
|
}
|
|
27
27
|
get icon() {
|
|
28
28
|
switch (this.alternativeIcon) {
|
|
29
|
-
case "s1": if (this.
|
|
29
|
+
case "s1": if (this.turnedOn) return html`<obi-switch-01-on
|
|
30
30
|
usecsscolor
|
|
31
31
|
slot="icon"
|
|
32
32
|
></obi-switch-01-on>
|
|
@@ -42,7 +42,7 @@ var ObcSwitch = class ObcSwitch extends ObcAbstractAutomationButtonSquared {
|
|
|
42
42
|
usecsscolor
|
|
43
43
|
slot="icon-silhouette"
|
|
44
44
|
></obi-switch-01-off>`;
|
|
45
|
-
case "s2": if (this.
|
|
45
|
+
case "s2": if (this.turnedOn) return html`<obi-switch-02-on
|
|
46
46
|
usecsscolor
|
|
47
47
|
slot="icon"
|
|
48
48
|
></obi-switch-02-on>
|
|
@@ -58,7 +58,7 @@ var ObcSwitch = class ObcSwitch extends ObcAbstractAutomationButtonSquared {
|
|
|
58
58
|
usecsscolor
|
|
59
59
|
slot="icon-silhouette"
|
|
60
60
|
></obi-switch-02-off>`;
|
|
61
|
-
case "s3": if (this.
|
|
61
|
+
case "s3": if (this.turnedOn) return html`<obi-switch-03-on
|
|
62
62
|
usecsscolor
|
|
63
63
|
slot="icon"
|
|
64
64
|
></obi-switch-03-on>
|
|
@@ -74,7 +74,7 @@ var ObcSwitch = class ObcSwitch extends ObcAbstractAutomationButtonSquared {
|
|
|
74
74
|
usecsscolor
|
|
75
75
|
slot="icon-silhouette"
|
|
76
76
|
></obi-switch-03-off>`;
|
|
77
|
-
default: if (this.
|
|
77
|
+
default: if (this.turnedOn) return html`<obi-switch-horizontal-on
|
|
78
78
|
usecsscolor
|
|
79
79
|
slot="icon"
|
|
80
80
|
></obi-switch-horizontal-on>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","names":[],"sources":["../../../src/automation/switch/switch.ts"],"sourcesContent":["import {html} from 'lit';\nimport '../../icons/icon-switch-horizontal-on.js';\nimport '../../icons/icon-switch-horizontal-off.js';\nimport '../../icons/icon-switch-01-on.js';\nimport '../../icons/icon-switch-01-off.js';\nimport '../../icons/icon-switch-02-on.js';\nimport '../../icons/icon-switch-02-off.js';\nimport '../../icons/icon-switch-03-on.js';\nimport '../../icons/icon-switch-03-off.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAbstractAutomationButtonSquared} from '../automation-button/abstract-automation-button-squared.js';\nimport {property} from 'lit/decorators.js';\n\nexport enum SwitchAlternativeIcon {\n regular = 'regular',\n s1 = 's1',\n s2 = 's2',\n s3 = 's3',\n}\n\n/**\n * @stable\n */\n@customElement('obc-switch')\nexport class ObcSwitch extends ObcAbstractAutomationButtonSquared {\n @property({type: String}) alternativeIcon: SwitchAlternativeIcon =\n SwitchAlternativeIcon.regular;\n\n override get icon() {\n switch (this.alternativeIcon) {\n case SwitchAlternativeIcon.s1:\n if (this.
|
|
1
|
+
{"version":3,"file":"switch.js","names":[],"sources":["../../../src/automation/switch/switch.ts"],"sourcesContent":["import {html} from 'lit';\nimport '../../icons/icon-switch-horizontal-on.js';\nimport '../../icons/icon-switch-horizontal-off.js';\nimport '../../icons/icon-switch-01-on.js';\nimport '../../icons/icon-switch-01-off.js';\nimport '../../icons/icon-switch-02-on.js';\nimport '../../icons/icon-switch-02-off.js';\nimport '../../icons/icon-switch-03-on.js';\nimport '../../icons/icon-switch-03-off.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAbstractAutomationButtonSquared} from '../automation-button/abstract-automation-button-squared.js';\nimport {property} from 'lit/decorators.js';\n\nexport enum SwitchAlternativeIcon {\n regular = 'regular',\n s1 = 's1',\n s2 = 's2',\n s3 = 's3',\n}\n\n/**\n * @stable\n */\n@customElement('obc-switch')\nexport class ObcSwitch extends ObcAbstractAutomationButtonSquared {\n @property({type: String}) alternativeIcon: SwitchAlternativeIcon =\n SwitchAlternativeIcon.regular;\n\n override get icon() {\n switch (this.alternativeIcon) {\n case SwitchAlternativeIcon.s1:\n if (this.turnedOn) {\n return html`<obi-switch-01-on\n usecsscolor\n slot=\"icon\"\n ></obi-switch-01-on>\n <obi-switch-01-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-switch-01-on>`;\n } else {\n return html`<obi-switch-01-off\n usecsscolor\n slot=\"icon\"\n ></obi-switch-01-off>\n <obi-switch-01-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-switch-01-off>`;\n }\n case SwitchAlternativeIcon.s2:\n if (this.turnedOn) {\n return html`<obi-switch-02-on\n usecsscolor\n slot=\"icon\"\n ></obi-switch-02-on>\n <obi-switch-02-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-switch-02-on>`;\n } else {\n return html`<obi-switch-02-off\n usecsscolor\n slot=\"icon\"\n ></obi-switch-02-off>\n <obi-switch-02-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-switch-02-off>`;\n }\n case SwitchAlternativeIcon.s3:\n if (this.turnedOn) {\n return html`<obi-switch-03-on\n usecsscolor\n slot=\"icon\"\n ></obi-switch-03-on>\n <obi-switch-03-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-switch-03-on>`;\n } else {\n return html`<obi-switch-03-off\n usecsscolor\n slot=\"icon\"\n ></obi-switch-03-off>\n <obi-switch-03-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-switch-03-off>`;\n }\n default:\n if (this.turnedOn) {\n return html`<obi-switch-horizontal-on\n usecsscolor\n slot=\"icon\"\n ></obi-switch-horizontal-on>\n <obi-switch-horizontal-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-switch-horizontal-on>`;\n } else {\n return html`<obi-switch-horizontal-off\n usecsscolor\n slot=\"icon\"\n ></obi-switch-horizontal-off>\n <obi-switch-horizontal-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-switch-horizontal-off>`;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-switch': ObcSwitch;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,IAAY,wBAAL,yBAAA,uBAAA;CACL,sBAAA,aAAA;CACA,sBAAA,QAAA;CACA,sBAAA,QAAA;CACA,sBAAA,QAAA;;AACF,EAAA,CAAA,CAAA;AAMO,IAAM,YAAN,MAAM,kBAAkB,mCAAmC;;;;;CAIhE,IAAa,OAAO;EAClB,QAAQ,KAAK,iBAAb;GACE,KAAA,MACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;GASf,KAAA,MACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;GASf,KAAA,MACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;GASf,SACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;EASjB;CACF;AACF;AAvFG,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,UAAA,WAAA,mBAAA,KAAA,CAAA;AAFzB,YAAA,WAAA,CAAA,cAAc,YAAY,CAAA,GAAA,SAAA"}
|
|
@@ -20,7 +20,7 @@ var ObcTransformer = class ObcTransformer extends ObcAbstractAutomationButtonSqu
|
|
|
20
20
|
}
|
|
21
21
|
get icon() {
|
|
22
22
|
switch (this.alternativeIcon) {
|
|
23
|
-
case "transformer02": if (this.
|
|
23
|
+
case "transformer02": if (this.turnedOn) return html`<obi-transformer-02-on
|
|
24
24
|
usecsscolor
|
|
25
25
|
slot="icon"
|
|
26
26
|
></obi-transformer-02-on>
|
|
@@ -36,7 +36,7 @@ var ObcTransformer = class ObcTransformer extends ObcAbstractAutomationButtonSqu
|
|
|
36
36
|
usecsscolor
|
|
37
37
|
slot="icon-silhouette"
|
|
38
38
|
></obi-transformer-02-off>`;
|
|
39
|
-
default: if (this.
|
|
39
|
+
default: if (this.turnedOn) return html`<obi-transformer-01-on
|
|
40
40
|
usecsscolor
|
|
41
41
|
slot="icon"
|
|
42
42
|
></obi-transformer-01-on>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transformer.js","names":[],"sources":["../../../src/automation/transformer/transformer.ts"],"sourcesContent":["import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-transformer-01-on.js';\nimport '../../icons/icon-transformer-01-off.js';\nimport '../../icons/icon-transformer-02-on.js';\nimport '../../icons/icon-transformer-02-off.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAbstractAutomationButtonSquared} from '../automation-button/abstract-automation-button-squared.js';\n\nexport enum TransformerAlternativeIcon {\n transformer01 = 'transformer01',\n transformer02 = 'transformer02',\n}\n\n/**\n * @stable\n */\n@customElement('obc-transformer')\nexport class ObcTransformer extends ObcAbstractAutomationButtonSquared {\n @property({type: String}) alternativeIcon: TransformerAlternativeIcon =\n TransformerAlternativeIcon.transformer01;\n\n override get icon() {\n switch (this.alternativeIcon) {\n case TransformerAlternativeIcon.transformer02:\n if (this.
|
|
1
|
+
{"version":3,"file":"transformer.js","names":[],"sources":["../../../src/automation/transformer/transformer.ts"],"sourcesContent":["import {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-transformer-01-on.js';\nimport '../../icons/icon-transformer-01-off.js';\nimport '../../icons/icon-transformer-02-on.js';\nimport '../../icons/icon-transformer-02-off.js';\nimport {customElement} from '../../decorator.js';\nimport {ObcAbstractAutomationButtonSquared} from '../automation-button/abstract-automation-button-squared.js';\n\nexport enum TransformerAlternativeIcon {\n transformer01 = 'transformer01',\n transformer02 = 'transformer02',\n}\n\n/**\n * @stable\n */\n@customElement('obc-transformer')\nexport class ObcTransformer extends ObcAbstractAutomationButtonSquared {\n @property({type: String}) alternativeIcon: TransformerAlternativeIcon =\n TransformerAlternativeIcon.transformer01;\n\n override get icon() {\n switch (this.alternativeIcon) {\n case TransformerAlternativeIcon.transformer02:\n if (this.turnedOn) {\n return html`<obi-transformer-02-on\n usecsscolor\n slot=\"icon\"\n ></obi-transformer-02-on>\n <obi-transformer-02-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-transformer-02-on>`;\n } else {\n return html`<obi-transformer-02-off\n usecsscolor\n slot=\"icon\"\n ></obi-transformer-02-off>\n <obi-transformer-02-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-transformer-02-off>`;\n }\n default:\n if (this.turnedOn) {\n return html`<obi-transformer-01-on\n usecsscolor\n slot=\"icon\"\n ></obi-transformer-01-on>\n <obi-transformer-01-on\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-transformer-01-on>`;\n } else {\n return html`<obi-transformer-01-off\n usecsscolor\n slot=\"icon\"\n ></obi-transformer-01-off>\n <obi-transformer-01-off\n usecsscolor\n slot=\"icon-silhouette\"\n ></obi-transformer-01-off>`;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-transformer': ObcTransformer;\n }\n}\n"],"mappings":";;;;;;;;;;AASA,IAAY,6BAAL,yBAAA,4BAAA;CACL,2BAAA,mBAAA;CACA,2BAAA,mBAAA;;AACF,EAAA,CAAA,CAAA;AAMO,IAAM,iBAAN,MAAM,uBAAuB,mCAAmC;;;;;CAIrE,IAAa,OAAO;EAClB,QAAQ,KAAK,iBAAb;GACE,KAAA,iBACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;GASf,SACE,IAAI,KAAK,UACP,OAAO,IAAI;;;;;;;;QASX,OAAO,IAAI;;;;;;;;EASjB;CACF;AACF;AA/CG,WAAA,CAAA,SAAS,EAAC,MAAM,OAAM,CAAC,CAAA,GAAA,eAAA,WAAA,mBAAA,KAAA,CAAA;AAFzB,iBAAA,WAAA,CAAA,cAAc,iBAAiB,CAAA,GAAA,cAAA"}
|
|
@@ -10,6 +10,9 @@ var accordion_card_default = css`* {
|
|
|
10
10
|
|
|
11
11
|
:host {
|
|
12
12
|
display: block;
|
|
13
|
+
|
|
14
|
+
/* TODO(designer): confirm the expand duration and curve. */
|
|
15
|
+
--_expand-duration: var(--obc-accordion-expand-duration, 200ms);
|
|
13
16
|
}
|
|
14
17
|
|
|
15
18
|
.wrapper {
|
|
@@ -26,6 +29,12 @@ var accordion_card_default = css`* {
|
|
|
26
29
|
align-items: center;
|
|
27
30
|
align-self: stretch;
|
|
28
31
|
height: fit-content;
|
|
32
|
+
border-radius: var(--ui-components-accordion-border-radius);
|
|
33
|
+
/* The card surface is what the closing panel slides over; snapping it away
|
|
34
|
+
would drop the content onto the page background mid-slide. */
|
|
35
|
+
transition:
|
|
36
|
+
background-color var(--_expand-duration) ease,
|
|
37
|
+
box-shadow var(--_expand-duration) ease;
|
|
29
38
|
}
|
|
30
39
|
|
|
31
40
|
:is(.wrapper .content-button) {
|
|
@@ -113,6 +122,11 @@ var accordion_card_default = css`* {
|
|
|
113
122
|
padding: 0;
|
|
114
123
|
border: 0;
|
|
115
124
|
overflow: hidden;
|
|
125
|
+
/* The bottom corners square on open; without this they round again while
|
|
126
|
+
the panel is still sliding away. */
|
|
127
|
+
transition:
|
|
128
|
+
border-radius var(--_expand-duration) ease,
|
|
129
|
+
box-shadow var(--_expand-duration) ease;
|
|
116
130
|
}
|
|
117
131
|
|
|
118
132
|
.wrapper .header-container {
|
|
@@ -185,32 +199,51 @@ var accordion_card_default = css`* {
|
|
|
185
199
|
flex-shrink: 0;
|
|
186
200
|
}
|
|
187
201
|
|
|
188
|
-
.wrapper
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
202
|
+
.wrapper .trailing-icon {
|
|
203
|
+
transition: transform var(--_expand-duration) ease;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.wrapper.state-expanded .trailing-icon {
|
|
207
|
+
transform: rotate(-180deg);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.wrapper .panel {
|
|
211
|
+
display: grid;
|
|
212
|
+
/* 0fr to 1fr is the only track that eases to content height in every engine. */
|
|
213
|
+
grid-template-rows: 0fr;
|
|
214
|
+
align-self: stretch;
|
|
215
|
+
transition: grid-template-rows var(--_expand-duration) ease;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.wrapper .panel-inner {
|
|
219
|
+
/* The grid item cannot carry the inset: padding holds the track open at
|
|
220
|
+
16px when closed. It clips here, the padding sits one level down. */
|
|
221
|
+
min-height: 0;
|
|
222
|
+
overflow: hidden;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.wrapper .container-content-additional {
|
|
226
|
+
color: var(--element-neutral-color);
|
|
227
|
+
font-family: var(--global-typography-font-family);
|
|
228
|
+
font-weight: var(--global-typography-ui-body-font-weight);
|
|
229
|
+
font-size: var(--global-typography-ui-body-font-size);
|
|
230
|
+
line-height: var(--global-typography-ui-body-line-height);
|
|
231
|
+
font-feature-settings:
|
|
195
232
|
"liga" off,
|
|
196
233
|
"clig" off,
|
|
197
234
|
"ss04" on;
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
235
|
+
display: flex;
|
|
236
|
+
flex-direction: column;
|
|
237
|
+
align-items: center;
|
|
238
|
+
padding: 0 16px 16px 16px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.wrapper.state-expanded .panel {
|
|
242
|
+
grid-template-rows: 1fr;
|
|
205
243
|
}
|
|
206
244
|
|
|
207
245
|
.wrapper.state-expanded .card-container {
|
|
208
|
-
display: flex;
|
|
209
|
-
flex-direction: column;
|
|
210
|
-
align-items: center;
|
|
211
246
|
flex: 1 0 0;
|
|
212
|
-
align-self: stretch;
|
|
213
|
-
border-radius: var(--ui-components-accordion-border-radius);
|
|
214
247
|
background: var(--container-background-color);
|
|
215
248
|
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
|
|
216
249
|
}
|
|
@@ -316,6 +349,15 @@ var accordion_card_default = css`* {
|
|
|
316
349
|
.alert.alert-level-diagnostic {
|
|
317
350
|
z-index: 1;
|
|
318
351
|
}
|
|
352
|
+
|
|
353
|
+
@media (prefers-reduced-motion: reduce) {
|
|
354
|
+
.wrapper .panel,
|
|
355
|
+
.wrapper .card-container,
|
|
356
|
+
.wrapper .content-button,
|
|
357
|
+
.wrapper .trailing-icon {
|
|
358
|
+
transition: none;
|
|
359
|
+
}
|
|
360
|
+
}
|
|
319
361
|
`;
|
|
320
362
|
//#endregion
|
|
321
363
|
export { accordion_card_default as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-card.css.js","names":[],"sources":["../../../src/components/accordion-card/accordion-card.css?inline"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n user-select: none;\n\n .card-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n height: fit-content;\n }\n\n .content-button {\n @mixin style style=flat visibleWrapperClass=.header-container;\n @mixin font-body;\n color: var(--element-active-color);\n border-radius: var(--ui-components-accordion-border-radius);\n background: var(--container-background-color);\n box-shadow: var(--shadow-flat);\n width: 100%;\n padding: 0;\n border: 0;\n overflow: hidden;\n }\n\n .header-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n border: 1px solid var(--flat-enabled-border-color);\n background: var(--flat-enabled-background-color);\n min-height: var(--global-size-spacing-touch-target-min);\n padding: 0 var(--ui-components-accordion-padding-horizontal);\n }\n\n .content-container {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n align-items: center;\n }\n\n .container-icon {\n display: flex;\n padding: 4px 0;\n justify-content: center;\n align-items: center;\n color: var(--element-neutral-color);\n }\n\n &.state-disabled,\n &.state-disabled .container-icon,\n &.state-disabled .container-labels,\n &.state-disabled .status,\n &.state-disabled.style-large .label-description {\n color: var(--element-disabled-color);\n }\n\n .leading-icon {\n width: var(--ui-components-accordion-icon-size);\n height: var(--ui-components-accordion-icon-size);\n }\n\n .container-labels {\n display: flex;\n min-height: 40px;\n padding: 0px var(--ui-components-accordion-label-spacing);\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n min-width: 0;\n }\n\n .container-status,\n .container-type {\n display: flex;\n padding: 0px var(--ui-components-accordion-label-spacing);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n\n .label-title {\n width: fit-content;\n }\n\n .status {\n color: var(--element-neutral-color);\n }\n\n .leading-icon,\n .trailing-icon {\n width: var(--ui-components-accordion-icon-size);\n height: var(--ui-components-accordion-icon-size);\n flex-shrink: 0;\n }\n\n &.state-expanded {\n
|
|
1
|
+
{"version":3,"file":"accordion-card.css.js","names":[],"sources":["../../../src/components/accordion-card/accordion-card.css?inline"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n\n /* TODO(designer): confirm the expand duration and curve. */\n --_expand-duration: var(--obc-accordion-expand-duration, 200ms);\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n user-select: none;\n\n .card-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n height: fit-content;\n border-radius: var(--ui-components-accordion-border-radius);\n /* The card surface is what the closing panel slides over; snapping it away\n would drop the content onto the page background mid-slide. */\n transition:\n background-color var(--_expand-duration) ease,\n box-shadow var(--_expand-duration) ease;\n }\n\n .content-button {\n @mixin style style=flat visibleWrapperClass=.header-container;\n @mixin font-body;\n color: var(--element-active-color);\n border-radius: var(--ui-components-accordion-border-radius);\n background: var(--container-background-color);\n box-shadow: var(--shadow-flat);\n width: 100%;\n padding: 0;\n border: 0;\n overflow: hidden;\n /* The bottom corners square on open; without this they round again while\n the panel is still sliding away. */\n transition:\n border-radius var(--_expand-duration) ease,\n box-shadow var(--_expand-duration) ease;\n }\n\n .header-container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n border: 1px solid var(--flat-enabled-border-color);\n background: var(--flat-enabled-background-color);\n min-height: var(--global-size-spacing-touch-target-min);\n padding: 0 var(--ui-components-accordion-padding-horizontal);\n }\n\n .content-container {\n box-sizing: border-box;\n display: flex;\n width: 100%;\n align-items: center;\n }\n\n .container-icon {\n display: flex;\n padding: 4px 0;\n justify-content: center;\n align-items: center;\n color: var(--element-neutral-color);\n }\n\n &.state-disabled,\n &.state-disabled .container-icon,\n &.state-disabled .container-labels,\n &.state-disabled .status,\n &.state-disabled.style-large .label-description {\n color: var(--element-disabled-color);\n }\n\n .leading-icon {\n width: var(--ui-components-accordion-icon-size);\n height: var(--ui-components-accordion-icon-size);\n }\n\n .container-labels {\n display: flex;\n min-height: 40px;\n padding: 0px var(--ui-components-accordion-label-spacing);\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n min-width: 0;\n }\n\n .container-status,\n .container-type {\n display: flex;\n padding: 0px var(--ui-components-accordion-label-spacing);\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n\n .label-title {\n width: fit-content;\n }\n\n .status {\n color: var(--element-neutral-color);\n }\n\n .leading-icon,\n .trailing-icon {\n width: var(--ui-components-accordion-icon-size);\n height: var(--ui-components-accordion-icon-size);\n flex-shrink: 0;\n }\n\n .trailing-icon {\n transition: transform var(--_expand-duration) ease;\n }\n\n &.state-expanded .trailing-icon {\n transform: rotate(-180deg);\n }\n\n .panel {\n display: grid;\n /* 0fr to 1fr is the only track that eases to content height in every engine. */\n grid-template-rows: 0fr;\n align-self: stretch;\n transition: grid-template-rows var(--_expand-duration) ease;\n }\n\n .panel-inner {\n /* The grid item cannot carry the inset: padding holds the track open at\n 16px when closed. It clips here, the padding sits one level down. */\n min-height: 0;\n overflow: hidden;\n }\n\n .container-content-additional {\n color: var(--element-neutral-color);\n @mixin font-body;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0 16px 16px 16px;\n }\n\n &.state-expanded {\n & .panel {\n grid-template-rows: 1fr;\n }\n\n & .card-container {\n flex: 1 0 0;\n background: var(--container-background-color);\n box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);\n }\n\n & .content-button {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n box-shadow: none;\n }\n\n & .expanded-content {\n padding: 16px 8px;\n }\n }\n\n &.style-single-line {\n .content-container {\n padding: 0 8px;\n }\n }\n\n &.style-large {\n .content-container {\n padding: 4px 8px;\n }\n\n .label-description {\n @mixin font-label;\n flex: 0 0 auto;\n width: 100%;\n overflow: hidden;\n color: var(--element-neutral-color);\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n }\n }\n\n &.position-top {\n & .content-button {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n & .card-container {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n }\n\n &.position-bottom {\n & .content-button {\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n }\n\n & .card-container {\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n }\n }\n\n &.position-center {\n & .content-button {\n border-radius: 0;\n }\n\n & .card-container {\n border-radius: 0;\n }\n }\n}\n\n.alert {\n pointer-events: none;\n\n /* z-index follows ALERT_SEVERITY_PRIORITY: more severe statuses stack on top. */\n &.alert-level-critical {\n z-index: 8;\n }\n\n &.alert-alarm {\n z-index: 7;\n }\n\n &.alert-level-high {\n z-index: 6;\n }\n\n &.alert-warning {\n z-index: 5;\n }\n\n &.alert-level-medium {\n z-index: 4;\n }\n\n &.alert-caution {\n z-index: 3;\n }\n\n &.alert-level-low {\n z-index: 2;\n }\n\n &.alert-level-diagnostic {\n z-index: 1;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .wrapper .panel,\n .wrapper .card-container,\n .wrapper .content-button,\n .wrapper .trailing-icon {\n transition: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
2
|
import { ObcAlertFrameThickness, ObcAlertFrameType } from '../alert-frame/alert-frame.js';
|
|
3
3
|
import { AlertType } from '../../types.js';
|
|
4
|
-
import '../../icons/icon-chevron-up-google.js';
|
|
5
4
|
import '../../icons/icon-chevron-down-google.js';
|
|
6
5
|
import '../alert-frame/alert-frame.js';
|
|
7
6
|
export declare enum AccordionSize {
|
|
@@ -20,7 +19,7 @@ export declare enum Position {
|
|
|
20
19
|
* Provides a summary row with optional icon, title, description, and status label. Expands to reveal additional content on click/tap, supporting both single-line and large layouts. Can display an alert overlay for contextual warnings or notifications.
|
|
21
20
|
*
|
|
22
21
|
* ### Features
|
|
23
|
-
* - **Expandable/collapsible:** Click/tap toggles between collapsed and expanded states, revealing or hiding additional content.
|
|
22
|
+
* - **Expandable/collapsible:** Click/tap toggles between collapsed and expanded states, revealing or hiding additional content. The panel slides open and closed, and the chevron turns with it; `prefers-reduced-motion: reduce` switches instantly instead.
|
|
24
23
|
* - **Variants:**
|
|
25
24
|
* - **Single-line:** Compact header with only title (and optional icon/status).
|
|
26
25
|
* - **Large:** Header includes a description beneath the title for more detail.
|
|
@@ -121,6 +120,7 @@ export declare enum Position {
|
|
|
121
120
|
* @slot alert-label - Label text for the alert overlay (used when `hasAlert` is true)
|
|
122
121
|
* @slot alert-timer - Timer/duration text for the alert overlay (used when `hasAlert` is true)
|
|
123
122
|
* @fires {CustomEvent<{expanded: boolean, cardTitle: string}>} accordion-toggle - Fired when the accordion is expanded or collapsed
|
|
123
|
+
* @cssprop [--obc-accordion-expand-duration=200ms] - How long the panel takes to open and close. The chevron and the card's corners follow it. Ignored under `prefers-reduced-motion: reduce`.
|
|
124
124
|
* @stable
|
|
125
125
|
*/
|
|
126
126
|
export declare class ObcAccordionCard extends LitElement {
|
|
@@ -174,6 +174,15 @@ export declare class ObcAccordionCard extends LitElement {
|
|
|
174
174
|
alertFrameStatus: AlertType;
|
|
175
175
|
private get shouldShowDescription();
|
|
176
176
|
private handleToggle;
|
|
177
|
+
/**
|
|
178
|
+
* Keeps the keyboard somewhere predictable when the panel closes.
|
|
179
|
+
*
|
|
180
|
+
* A collapsed panel is `inert`, and the browser drops focus out of anything
|
|
181
|
+
* it makes inert — onto `<body>`, two frames later. Clicking the header
|
|
182
|
+
* already leaves focus there; a consumer setting `expanded` while a slotted
|
|
183
|
+
* control has focus is the case that needs the transfer.
|
|
184
|
+
*/
|
|
185
|
+
willUpdate(changed: PropertyValues<this>): void;
|
|
177
186
|
private renderContentMain;
|
|
178
187
|
private renderContentAdditional;
|
|
179
188
|
private isShartEdgeBottom;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-card.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-card/accordion-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"accordion-card.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-card/accordion-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAmB,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAMrE,OAAO,yCAAyC,CAAC;AACjD,OAAO,+BAA+B,CAAC;AACvC,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EAClB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,oBAAY,aAAa;IACvB,UAAU,gBAAgB;IAC1B,KAAK,UAAU;CAChB;AAED,oBAAY,QAAQ;IAClB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6GG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACpB,SAAS,SAAM;IAEf,WAAW,SAAM;IAEjB,WAAW,SAAM;IAEhB,QAAQ,UAAS;IAEjB,QAAQ,UAAS;IAEjB,QAAQ,UAAS;IAEjB,cAAc,UAAS;IAEvB,cAAc,UAAS;IAEvB,cAAc,UAAS;IAExB,QAAQ,EAAE,QAAQ,CAAoB;IAEtC,IAAI,EAAE,aAAa,CAA4B;IAE/C,cAAc,EAAE,iBAAiB,CAC/B;IAEF,mBAAmB,EAAE,sBAAsB,CACtC;IAEL,gBAAgB,EAAE,SAAS,CAAmB;IAExE,OAAO,KAAK,qBAAqB,GAMhC;IAED,OAAO,CAAC,YAAY;IAmBpB;;;;;;;OAOG;IACM,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAYjD,OAAO,CAAC,iBAAiB;IAwCzB,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,iBAAiB;IAGzB,OAAO,CAAC,cAAc;IAMb,MAAM;IAuDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
|
|
@@ -2,7 +2,7 @@ import { AlertType } from "../../types.js";
|
|
|
2
2
|
import { customElement } from "../../decorator.js";
|
|
3
3
|
import __decorate from "../../_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/decorate.js";
|
|
4
4
|
import "../../icons/icon-chevron-down-google.js";
|
|
5
|
-
import "../../
|
|
5
|
+
import { releaseFocusBefore } from "../../internal/focus.js";
|
|
6
6
|
import { ObcAlertFrameThickness, ObcAlertFrameType } from "../alert-frame/alert-frame.js";
|
|
7
7
|
import accordion_card_default from "./accordion-card.css.js";
|
|
8
8
|
import { LitElement, html, unsafeCSS } from "lit";
|
|
@@ -54,6 +54,20 @@ var ObcAccordionCard = class ObcAccordionCard extends LitElement {
|
|
|
54
54
|
cardTitle: this.cardTitle
|
|
55
55
|
} }));
|
|
56
56
|
}
|
|
57
|
+
/**
|
|
58
|
+
* Keeps the keyboard somewhere predictable when the panel closes.
|
|
59
|
+
*
|
|
60
|
+
* A collapsed panel is `inert`, and the browser drops focus out of anything
|
|
61
|
+
* it makes inert — onto `<body>`, two frames later. Clicking the header
|
|
62
|
+
* already leaves focus there; a consumer setting `expanded` while a slotted
|
|
63
|
+
* control has focus is the case that needs the transfer.
|
|
64
|
+
*/
|
|
65
|
+
willUpdate(changed) {
|
|
66
|
+
if (!changed.has("expanded") || this.expanded) return;
|
|
67
|
+
const panel = this.shadowRoot?.querySelector(".panel");
|
|
68
|
+
if (!panel) return;
|
|
69
|
+
releaseFocusBefore(panel, this.shadowRoot?.querySelector(".content-button"), this.shadowRoot?.querySelector(".wrapper"));
|
|
70
|
+
}
|
|
57
71
|
renderContentMain() {
|
|
58
72
|
return html`
|
|
59
73
|
<div class="header-container">
|
|
@@ -75,17 +89,20 @@ var ObcAccordionCard = class ObcAccordionCard extends LitElement {
|
|
|
75
89
|
</div>
|
|
76
90
|
` : ""}
|
|
77
91
|
<div class="trailing-icon">
|
|
78
|
-
|
|
92
|
+
<obi-chevron-down-google></obi-chevron-down-google>
|
|
79
93
|
</div>
|
|
80
94
|
</div>
|
|
81
95
|
</div>
|
|
82
96
|
`;
|
|
83
97
|
}
|
|
84
98
|
renderContentAdditional() {
|
|
85
|
-
if (!this.expanded) return "";
|
|
86
99
|
return html`
|
|
87
|
-
<div class="
|
|
88
|
-
<
|
|
100
|
+
<div class="panel" id="accordion-content" ?inert=${!this.expanded}>
|
|
101
|
+
<div class="panel-inner">
|
|
102
|
+
<div class="container-content-additional">
|
|
103
|
+
<slot name="expanded-content"></slot>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
89
106
|
</div>
|
|
90
107
|
`;
|
|
91
108
|
}
|
|
@@ -98,6 +115,7 @@ var ObcAccordionCard = class ObcAccordionCard extends LitElement {
|
|
|
98
115
|
render() {
|
|
99
116
|
return html`
|
|
100
117
|
<div
|
|
118
|
+
tabindex="-1"
|
|
101
119
|
class=${classMap({
|
|
102
120
|
wrapper: true,
|
|
103
121
|
"state-expanded": this.expanded,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-card.js","names":[],"sources":["../../../src/components/accordion-card/accordion-card.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './accordion-card.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-chevron-up-google.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../alert-frame/alert-frame.js';\nimport {\n ObcAlertFrameThickness,\n ObcAlertFrameType,\n} from '../alert-frame/alert-frame.js';\nimport {AlertType} from '../../types.js';\n\nexport enum AccordionSize {\n SingleLine = 'single-line',\n Large = 'large',\n}\n\nexport enum Position {\n top = 'top',\n bottom = 'bottom',\n center = 'center',\n regular = 'regular',\n}\n\n/**\n * `<obc-accordion-card>` – Expandable/collapsible card component for grouping content in a compact, interactive section (accordion, expandable panel, disclosure).\n *\n * Provides a summary row with optional icon, title, description, and status label. Expands to reveal additional content on click/tap, supporting both single-line and large layouts. Can display an alert overlay for contextual warnings or notifications.\n *\n * ### Features\n * - **Expandable/collapsible:** Click/tap toggles between collapsed and expanded states, revealing or hiding additional content.\n * - **Variants:**\n * - **Single-line:** Compact header with only title (and optional icon/status).\n * - **Large:** Header includes a description beneath the title for more detail.\n * - **Positioning:** Supports `top`, `bottom`, `center`, or `regular` (default) border radius/edge styling for stacking multiple accordions.\n * - **Status label:** Optional status text displayed in the header (e.g., \"Active\", \"Warning\").\n * - **Leading icon:** Optional icon slot at the start of the header for visual context.\n * - **Alert overlay:** Can display an alert frame (with icon, label, timer) above the card for warnings or notifications.\n * - **Disabled state:** Prevents interaction and visually indicates non-interactive status.\n * - **Accessibility:** Uses button semantics and ARIA attributes for expand/collapse.\n *\n * ### Usage Guidelines\n * Use `obc-accordion-card` to organize related content in a collapsible section, especially when space is limited or when users may want to focus on one section at a time. Ideal for settings panels, grouped controls, or dashboards where expandable details are needed. Avoid using for persistent, always-visible content.\n *\n * - Use the **single-line** variant for brief titles or when space is tight.\n * - Use the **large** variant when you need to provide a short description or supporting text under the title.\n * - The **status label** is useful for showing quick state info (e.g., \"Active\", \"Error\").\n * - The **alert overlay** is intended for contextual warnings or notifications related to the card's content.\n * - For stacking multiple accordions, adjust the `position` property to control border radii and visual grouping.\n *\n * **TODO(designer):** Confirm if there are recommended limits on title/description length, and if only one accordion should be expanded at a time in a group.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |-------------------|------------------------|-------------------------------------------------------|\n * | leading-icon | `hasLeadingIcon` true | Icon at the start of the header (e.g., `<obi-placeholder></obi-placeholder>`). |\n * | expanded-content | Always | Content revealed when the accordion is expanded. |\n * | alert-icon | `hasAlert` true | Icon for the alert overlay (slot=\"icon\" in alert frame). |\n * | alert-label | `hasAlert` true | Label text for the alert overlay (slot=\"label\" in alert frame). |\n * | alert-timer | `hasAlert` true | Timer or duration text for the alert overlay (slot=\"timer\" in alert frame). |\n *\n * ### Properties\n * - `expanded` (boolean): Whether the card is expanded (shows additional content). Toggled by user interaction.\n * - `disabled` (boolean): Disables interaction and visually dims the card.\n * - `cardTitle` (string): Main title text shown in the header.\n * - `description` (string): Supporting description (shown only in large size and if `hasDescription` is true).\n * - `statusLabel` (string): Optional status text in the header (shown if `hasStatusLabel` is true).\n * - `hasAlert` (boolean): Shows an alert overlay above the card when true.\n * - `hasDescription` (boolean): Enables description text in large variant.\n * - `hasStatusLabel` (boolean): Enables status label in header.\n * - `hasLeadingIcon` (boolean): Enables leading icon slot in header.\n * - `size` (`AccordionSize` enum): Layout variant, either `'single-line'` (default) or `'large'`.\n * - `position` (`Position` enum): Controls border radius for stacking (`'top'`, `'bottom'`, `'center'`, `'regular'`).\n * - `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`: Configure the alert overlay's appearance (see `obc-alert-frame` for details).\n *\n * ### Events\n * - `accordion-toggle` – Fired when the accordion is expanded or collapsed. Event detail includes `{ expanded, cardTitle }`.\n *\n * ### Best Practices\n * - Only use the alert overlay for important, contextual notifications related to the card's content.\n * - For accessibility, ensure the card title is descriptive and unique within a group.\n * - Avoid nesting interactive elements (like buttons) directly in the header; place them in the expanded content if needed.\n *\n * ### Example:\n * ```\n * <obc-accordion-card\n * cardTitle=\"Settings\"\n * description=\"Configure your preferences\"\n * size=\"large\"\n * hasDescription\n * expanded\n * hasLeadingIcon\n * >\n * <span slot=\"leading-icon\"><obi-placeholder></obi-placeholder></span>\n * <div slot=\"expanded-content\">\n * <!-- Additional settings controls here -->\n * </div>\n * </obc-accordion-card>\n * ```\n *\n * @property cardTitle - Main title text displayed in the accordion header.\n * @property description - Supporting description text shown under the title (only in large size and if `hasDescription` is true).\n * @availableWhen description size==large && hasDescription==true\n * @property statusLabel - Optional status label displayed in the header (shown if `hasStatusLabel` is true).\n * @availableWhen statusLabel hasStatusLabel==true\n * @property expanded - Whether the accordion card is expanded (shows additional content).\n * @property disabled - Disables the accordion card, preventing user interaction and dimming its appearance.\n * @property hasAlert - Shows an alert overlay above the card when true. Configure appearance with `alertFrameType`, `alertFrameThickness`, and `alertFrameStatus`.\n * @property hasDescription - Enables the description text in the header (only in large size).\n * @property hasStatusLabel - Enables the status label in the header.\n * @property hasLeadingIcon - Enables the leading icon slot in the header.\n * @property alertFrameType - Type of the alert frame overlay (used when `hasAlert` is true).\n * See `obc-alert-frame` for available types.\n * @availableWhen alertFrameType hasAlert==true\n * @property alertFrameThickness - Thickness of the alert frame overlay (used when `hasAlert` is true).\n * See `obc-alert-frame` for available thickness values.\n * @availableWhen alertFrameThickness hasAlert==true\n * @property alertFrameStatus - Status of the alert frame overlay (used when `hasAlert` is true).\n * See `obc-alert-frame` for available statuses.\n * @availableWhen alertFrameStatus hasAlert==true\n * @property position - Border radius for stacking: `regular` (default) rounds every corner,\n * `top` flattens the bottom edge, `bottom` flattens the top edge, and\n * `center` flattens both for a card in the middle of a stack.\n * @property size - Layout variant: `single-line` (default) is a compact title-only header,\n * `large` adds a description beneath the title.\n * @slot leading-icon - Icon at the start of the header (shown when `hasLeadingIcon` is true)\n * @slot expanded-content - Content revealed when the accordion is expanded\n * @slot alert-icon - Icon for the alert overlay (used when `hasAlert` is true)\n * @slot alert-label - Label text for the alert overlay (used when `hasAlert` is true)\n * @slot alert-timer - Timer/duration text for the alert overlay (used when `hasAlert` is true)\n * @fires {CustomEvent<{expanded: boolean, cardTitle: string}>} accordion-toggle - Fired when the accordion is expanded or collapsed\n * @stable\n */\n@customElement('obc-accordion-card')\nexport class ObcAccordionCard extends LitElement {\n @property({type: String}) cardTitle = '';\n\n @property({type: String}) description = '';\n\n @property({type: String}) statusLabel = '';\n\n @property({type: Boolean}) expanded = false;\n\n @property({type: Boolean}) disabled = false;\n\n @property({type: Boolean}) hasAlert = false;\n\n @property({type: Boolean}) hasDescription = false;\n\n @property({type: Boolean}) hasStatusLabel = false;\n\n @property({type: Boolean}) hasLeadingIcon = false;\n\n @property({type: String}) position: Position = Position.regular;\n\n @property({type: String}) size: AccordionSize = AccordionSize.SingleLine;\n\n @property({type: String}) alertFrameType: ObcAlertFrameType =\n ObcAlertFrameType.Regular;\n\n @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =\n ObcAlertFrameThickness.Small;\n\n @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;\n\n private get shouldShowDescription() {\n return (\n this.size === AccordionSize.Large &&\n this.hasDescription &&\n this.description.trim() !== ''\n );\n }\n\n private handleToggle() {\n if (this.disabled) return;\n\n this.expanded = !this.expanded;\n\n /**\n * Fired when the accordion is expanded or collapsed.\n * @fires accordion-toggle\n */\n this.dispatchEvent(\n new CustomEvent('accordion-toggle', {\n detail: {\n expanded: this.expanded,\n cardTitle: this.cardTitle,\n },\n })\n );\n }\n\n private renderContentMain() {\n return html`\n <div class=\"header-container\">\n <div class=\"content-container\">\n ${\n this.hasLeadingIcon\n ? html`\n <div class=\"container-icon\">\n <slot name=\"leading-icon\"></slot>\n </div>\n `\n : ''\n }\n <div class=\"container-labels\">\n <div class=\"label-title\">${this.cardTitle}</div>\n ${\n this.shouldShowDescription\n ? html`\n <div class=\"label-description\">${this.description}</div>\n `\n : ''\n }\n </div>\n ${\n this.hasStatusLabel\n ? html`\n <div class=\"container-status\">\n <div class=\"status\">${this.statusLabel}</div>\n </div>\n `\n : ''\n }\n <div class=\"trailing-icon\">\n ${\n this.expanded\n ? html`<obi-chevron-up-google></obi-chevron-up-google>`\n : html`<obi-chevron-down-google></obi-chevron-down-google>`\n }\n </div>\n </div>\n </div>\n `;\n }\n\n private renderContentAdditional() {\n if (!this.expanded) return '';\n\n return html`\n <div class=\"container-content-additional\">\n <slot name=\"expanded-content\"></slot>\n </div>\n `;\n }\n\n private isShartEdgeBottom() {\n return this.position === Position.top || this.position === Position.center;\n }\n private isShartEdgeTop() {\n return (\n this.position === Position.bottom || this.position === Position.center\n );\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n 'state-expanded': this.expanded,\n 'state-collapsed': !this.expanded,\n 'state-disabled': this.disabled,\n 'style-single-line': this.size === AccordionSize.SingleLine,\n 'style-large': this.size === AccordionSize.Large,\n 'position-top': this.position === Position.top,\n 'position-bottom': this.position === Position.bottom,\n 'position-center': this.position === Position.center,\n })}\n style=\"position: relative;\"\n >\n <div class=\"card-container\">\n <button\n class=\"content-button\"\n @click=${this.handleToggle}\n ?disabled=${this.disabled}\n aria-expanded=${this.expanded}\n aria-controls=\"accordion-content\"\n >\n ${this.renderContentMain()}\n </button>\n\n ${this.renderContentAdditional()}\n </div>\n\n ${\n this.hasAlert\n ? html`\n <obc-alert-frame\n class=\"alert alert-${this.alertFrameStatus}\"\n .sharpEdgeTopLeft=${this.isShartEdgeTop()}\n .sharpEdgeTopRight=${this.isShartEdgeTop()}\n .sharpEdgeBottomLeft=${this.isShartEdgeBottom()}\n .sharpEdgeBottomRight=${this.isShartEdgeBottom()}\n .type=${this.alertFrameType}\n .thickness=${this.alertFrameThickness}\n .status=${this.alertFrameStatus}\n >\n <slot name=\"alert-icon\" slot=\"icon\"></slot>\n <slot name=\"alert-label\" slot=\"label\"></slot>\n <slot name=\"alert-timer\" slot=\"timer\"></slot>\n </obc-alert-frame>\n `\n : ''\n }\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-accordion-card': ObcAccordionCard;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"accordion-card.js","names":[],"sources":["../../../src/components/accordion-card/accordion-card.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, type PropertyValues} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {releaseFocusBefore} from '../../internal/focus.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './accordion-card.css?inline';\nimport {property} from 'lit/decorators.js';\nimport '../../icons/icon-chevron-down-google.js';\nimport '../alert-frame/alert-frame.js';\nimport {\n ObcAlertFrameThickness,\n ObcAlertFrameType,\n} from '../alert-frame/alert-frame.js';\nimport {AlertType} from '../../types.js';\n\nexport enum AccordionSize {\n SingleLine = 'single-line',\n Large = 'large',\n}\n\nexport enum Position {\n top = 'top',\n bottom = 'bottom',\n center = 'center',\n regular = 'regular',\n}\n\n/**\n * `<obc-accordion-card>` – Expandable/collapsible card component for grouping content in a compact, interactive section (accordion, expandable panel, disclosure).\n *\n * Provides a summary row with optional icon, title, description, and status label. Expands to reveal additional content on click/tap, supporting both single-line and large layouts. Can display an alert overlay for contextual warnings or notifications.\n *\n * ### Features\n * - **Expandable/collapsible:** Click/tap toggles between collapsed and expanded states, revealing or hiding additional content. The panel slides open and closed, and the chevron turns with it; `prefers-reduced-motion: reduce` switches instantly instead.\n * - **Variants:**\n * - **Single-line:** Compact header with only title (and optional icon/status).\n * - **Large:** Header includes a description beneath the title for more detail.\n * - **Positioning:** Supports `top`, `bottom`, `center`, or `regular` (default) border radius/edge styling for stacking multiple accordions.\n * - **Status label:** Optional status text displayed in the header (e.g., \"Active\", \"Warning\").\n * - **Leading icon:** Optional icon slot at the start of the header for visual context.\n * - **Alert overlay:** Can display an alert frame (with icon, label, timer) above the card for warnings or notifications.\n * - **Disabled state:** Prevents interaction and visually indicates non-interactive status.\n * - **Accessibility:** Uses button semantics and ARIA attributes for expand/collapse.\n *\n * ### Usage Guidelines\n * Use `obc-accordion-card` to organize related content in a collapsible section, especially when space is limited or when users may want to focus on one section at a time. Ideal for settings panels, grouped controls, or dashboards where expandable details are needed. Avoid using for persistent, always-visible content.\n *\n * - Use the **single-line** variant for brief titles or when space is tight.\n * - Use the **large** variant when you need to provide a short description or supporting text under the title.\n * - The **status label** is useful for showing quick state info (e.g., \"Active\", \"Error\").\n * - The **alert overlay** is intended for contextual warnings or notifications related to the card's content.\n * - For stacking multiple accordions, adjust the `position` property to control border radii and visual grouping.\n *\n * **TODO(designer):** Confirm if there are recommended limits on title/description length, and if only one accordion should be expanded at a time in a group.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |-------------------|------------------------|-------------------------------------------------------|\n * | leading-icon | `hasLeadingIcon` true | Icon at the start of the header (e.g., `<obi-placeholder></obi-placeholder>`). |\n * | expanded-content | Always | Content revealed when the accordion is expanded. |\n * | alert-icon | `hasAlert` true | Icon for the alert overlay (slot=\"icon\" in alert frame). |\n * | alert-label | `hasAlert` true | Label text for the alert overlay (slot=\"label\" in alert frame). |\n * | alert-timer | `hasAlert` true | Timer or duration text for the alert overlay (slot=\"timer\" in alert frame). |\n *\n * ### Properties\n * - `expanded` (boolean): Whether the card is expanded (shows additional content). Toggled by user interaction.\n * - `disabled` (boolean): Disables interaction and visually dims the card.\n * - `cardTitle` (string): Main title text shown in the header.\n * - `description` (string): Supporting description (shown only in large size and if `hasDescription` is true).\n * - `statusLabel` (string): Optional status text in the header (shown if `hasStatusLabel` is true).\n * - `hasAlert` (boolean): Shows an alert overlay above the card when true.\n * - `hasDescription` (boolean): Enables description text in large variant.\n * - `hasStatusLabel` (boolean): Enables status label in header.\n * - `hasLeadingIcon` (boolean): Enables leading icon slot in header.\n * - `size` (`AccordionSize` enum): Layout variant, either `'single-line'` (default) or `'large'`.\n * - `position` (`Position` enum): Controls border radius for stacking (`'top'`, `'bottom'`, `'center'`, `'regular'`).\n * - `alertFrameType`, `alertFrameThickness`, `alertFrameStatus`: Configure the alert overlay's appearance (see `obc-alert-frame` for details).\n *\n * ### Events\n * - `accordion-toggle` – Fired when the accordion is expanded or collapsed. Event detail includes `{ expanded, cardTitle }`.\n *\n * ### Best Practices\n * - Only use the alert overlay for important, contextual notifications related to the card's content.\n * - For accessibility, ensure the card title is descriptive and unique within a group.\n * - Avoid nesting interactive elements (like buttons) directly in the header; place them in the expanded content if needed.\n *\n * ### Example:\n * ```\n * <obc-accordion-card\n * cardTitle=\"Settings\"\n * description=\"Configure your preferences\"\n * size=\"large\"\n * hasDescription\n * expanded\n * hasLeadingIcon\n * >\n * <span slot=\"leading-icon\"><obi-placeholder></obi-placeholder></span>\n * <div slot=\"expanded-content\">\n * <!-- Additional settings controls here -->\n * </div>\n * </obc-accordion-card>\n * ```\n *\n * @property cardTitle - Main title text displayed in the accordion header.\n * @property description - Supporting description text shown under the title (only in large size and if `hasDescription` is true).\n * @availableWhen description size==large && hasDescription==true\n * @property statusLabel - Optional status label displayed in the header (shown if `hasStatusLabel` is true).\n * @availableWhen statusLabel hasStatusLabel==true\n * @property expanded - Whether the accordion card is expanded (shows additional content).\n * @property disabled - Disables the accordion card, preventing user interaction and dimming its appearance.\n * @property hasAlert - Shows an alert overlay above the card when true. Configure appearance with `alertFrameType`, `alertFrameThickness`, and `alertFrameStatus`.\n * @property hasDescription - Enables the description text in the header (only in large size).\n * @property hasStatusLabel - Enables the status label in the header.\n * @property hasLeadingIcon - Enables the leading icon slot in the header.\n * @property alertFrameType - Type of the alert frame overlay (used when `hasAlert` is true).\n * See `obc-alert-frame` for available types.\n * @availableWhen alertFrameType hasAlert==true\n * @property alertFrameThickness - Thickness of the alert frame overlay (used when `hasAlert` is true).\n * See `obc-alert-frame` for available thickness values.\n * @availableWhen alertFrameThickness hasAlert==true\n * @property alertFrameStatus - Status of the alert frame overlay (used when `hasAlert` is true).\n * See `obc-alert-frame` for available statuses.\n * @availableWhen alertFrameStatus hasAlert==true\n * @property position - Border radius for stacking: `regular` (default) rounds every corner,\n * `top` flattens the bottom edge, `bottom` flattens the top edge, and\n * `center` flattens both for a card in the middle of a stack.\n * @property size - Layout variant: `single-line` (default) is a compact title-only header,\n * `large` adds a description beneath the title.\n * @slot leading-icon - Icon at the start of the header (shown when `hasLeadingIcon` is true)\n * @slot expanded-content - Content revealed when the accordion is expanded\n * @slot alert-icon - Icon for the alert overlay (used when `hasAlert` is true)\n * @slot alert-label - Label text for the alert overlay (used when `hasAlert` is true)\n * @slot alert-timer - Timer/duration text for the alert overlay (used when `hasAlert` is true)\n * @fires {CustomEvent<{expanded: boolean, cardTitle: string}>} accordion-toggle - Fired when the accordion is expanded or collapsed\n * @cssprop [--obc-accordion-expand-duration=200ms] - How long the panel takes to open and close. The chevron and the card's corners follow it. Ignored under `prefers-reduced-motion: reduce`.\n * @stable\n */\n@customElement('obc-accordion-card')\nexport class ObcAccordionCard extends LitElement {\n @property({type: String}) cardTitle = '';\n\n @property({type: String}) description = '';\n\n @property({type: String}) statusLabel = '';\n\n @property({type: Boolean}) expanded = false;\n\n @property({type: Boolean}) disabled = false;\n\n @property({type: Boolean}) hasAlert = false;\n\n @property({type: Boolean}) hasDescription = false;\n\n @property({type: Boolean}) hasStatusLabel = false;\n\n @property({type: Boolean}) hasLeadingIcon = false;\n\n @property({type: String}) position: Position = Position.regular;\n\n @property({type: String}) size: AccordionSize = AccordionSize.SingleLine;\n\n @property({type: String}) alertFrameType: ObcAlertFrameType =\n ObcAlertFrameType.Regular;\n\n @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =\n ObcAlertFrameThickness.Small;\n\n @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;\n\n private get shouldShowDescription() {\n return (\n this.size === AccordionSize.Large &&\n this.hasDescription &&\n this.description.trim() !== ''\n );\n }\n\n private handleToggle() {\n if (this.disabled) return;\n\n this.expanded = !this.expanded;\n\n /**\n * Fired when the accordion is expanded or collapsed.\n * @fires accordion-toggle\n */\n this.dispatchEvent(\n new CustomEvent('accordion-toggle', {\n detail: {\n expanded: this.expanded,\n cardTitle: this.cardTitle,\n },\n })\n );\n }\n\n /**\n * Keeps the keyboard somewhere predictable when the panel closes.\n *\n * A collapsed panel is `inert`, and the browser drops focus out of anything\n * it makes inert — onto `<body>`, two frames later. Clicking the header\n * already leaves focus there; a consumer setting `expanded` while a slotted\n * control has focus is the case that needs the transfer.\n */\n override willUpdate(changed: PropertyValues<this>) {\n if (!changed.has('expanded') || this.expanded) return;\n\n const panel = this.shadowRoot?.querySelector('.panel');\n if (!panel) return;\n releaseFocusBefore(\n panel,\n this.shadowRoot?.querySelector<HTMLButtonElement>('.content-button'),\n this.shadowRoot?.querySelector<HTMLElement>('.wrapper')\n );\n }\n\n private renderContentMain() {\n return html`\n <div class=\"header-container\">\n <div class=\"content-container\">\n ${\n this.hasLeadingIcon\n ? html`\n <div class=\"container-icon\">\n <slot name=\"leading-icon\"></slot>\n </div>\n `\n : ''\n }\n <div class=\"container-labels\">\n <div class=\"label-title\">${this.cardTitle}</div>\n ${\n this.shouldShowDescription\n ? html`\n <div class=\"label-description\">${this.description}</div>\n `\n : ''\n }\n </div>\n ${\n this.hasStatusLabel\n ? html`\n <div class=\"container-status\">\n <div class=\"status\">${this.statusLabel}</div>\n </div>\n `\n : ''\n }\n <div class=\"trailing-icon\">\n <obi-chevron-down-google></obi-chevron-down-google>\n </div>\n </div>\n </div>\n `;\n }\n\n private renderContentAdditional() {\n return html`\n <div class=\"panel\" id=\"accordion-content\" ?inert=${!this.expanded}>\n <div class=\"panel-inner\">\n <div class=\"container-content-additional\">\n <slot name=\"expanded-content\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n private isShartEdgeBottom() {\n return this.position === Position.top || this.position === Position.center;\n }\n private isShartEdgeTop() {\n return (\n this.position === Position.bottom || this.position === Position.center\n );\n }\n\n override render() {\n return html`\n <div\n tabindex=\"-1\"\n class=${classMap({\n wrapper: true,\n 'state-expanded': this.expanded,\n 'state-collapsed': !this.expanded,\n 'state-disabled': this.disabled,\n 'style-single-line': this.size === AccordionSize.SingleLine,\n 'style-large': this.size === AccordionSize.Large,\n 'position-top': this.position === Position.top,\n 'position-bottom': this.position === Position.bottom,\n 'position-center': this.position === Position.center,\n })}\n style=\"position: relative;\"\n >\n <div class=\"card-container\">\n <button\n class=\"content-button\"\n @click=${this.handleToggle}\n ?disabled=${this.disabled}\n aria-expanded=${this.expanded}\n aria-controls=\"accordion-content\"\n >\n ${this.renderContentMain()}\n </button>\n\n ${this.renderContentAdditional()}\n </div>\n\n ${\n this.hasAlert\n ? html`\n <obc-alert-frame\n class=\"alert alert-${this.alertFrameStatus}\"\n .sharpEdgeTopLeft=${this.isShartEdgeTop()}\n .sharpEdgeTopRight=${this.isShartEdgeTop()}\n .sharpEdgeBottomLeft=${this.isShartEdgeBottom()}\n .sharpEdgeBottomRight=${this.isShartEdgeBottom()}\n .type=${this.alertFrameType}\n .thickness=${this.alertFrameThickness}\n .status=${this.alertFrameStatus}\n >\n <slot name=\"alert-icon\" slot=\"icon\"></slot>\n <slot name=\"alert-label\" slot=\"label\"></slot>\n <slot name=\"alert-timer\" slot=\"timer\"></slot>\n </obc-alert-frame>\n `\n : ''\n }\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-accordion-card': ObcAccordionCard;\n }\n}\n"],"mappings":"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"}
|
|
@@ -8,6 +8,11 @@ var accordion_item_default = css`* {
|
|
|
8
8
|
box-sizing: border-box;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
:host {
|
|
12
|
+
/* TODO(designer): confirm the expand duration and curve. */
|
|
13
|
+
--_expand-duration: var(--obc-accordion-expand-duration, 200ms);
|
|
14
|
+
}
|
|
15
|
+
|
|
11
16
|
.wrapper {
|
|
12
17
|
display: flex;
|
|
13
18
|
flex-direction: column;
|
|
@@ -95,6 +100,9 @@ var accordion_item_default = css`* {
|
|
|
95
100
|
cursor: pointer;
|
|
96
101
|
overflow: hidden;
|
|
97
102
|
position: relative;
|
|
103
|
+
/* The bottom corners square on open; without this they round again while
|
|
104
|
+
the panel is still sliding away. */
|
|
105
|
+
transition: border-radius var(--_expand-duration) ease;
|
|
98
106
|
}
|
|
99
107
|
|
|
100
108
|
.content {
|
|
@@ -164,7 +172,7 @@ var accordion_item_default = css`* {
|
|
|
164
172
|
height: var(--menu-navigation-components-navigation-item-icon-size);
|
|
165
173
|
flex-shrink: 0;
|
|
166
174
|
position: relative;
|
|
167
|
-
transition: transform
|
|
175
|
+
transition: transform var(--_expand-duration) ease;
|
|
168
176
|
}
|
|
169
177
|
|
|
170
178
|
.divider {
|
|
@@ -181,19 +189,29 @@ var accordion_item_default = css`* {
|
|
|
181
189
|
transform: rotate(-180deg);
|
|
182
190
|
}
|
|
183
191
|
|
|
184
|
-
.
|
|
185
|
-
display:
|
|
186
|
-
|
|
192
|
+
.panel {
|
|
193
|
+
display: grid;
|
|
194
|
+
/* 0fr to 1fr is the only track that eases to content height in every engine. */
|
|
195
|
+
grid-template-rows: 0fr;
|
|
187
196
|
width: 100%;
|
|
188
|
-
|
|
197
|
+
transition: grid-template-rows var(--_expand-duration) ease;
|
|
189
198
|
}
|
|
190
199
|
|
|
191
|
-
.wrapper.open-true .
|
|
192
|
-
|
|
193
|
-
|
|
200
|
+
.wrapper.open-true .panel {
|
|
201
|
+
grid-template-rows: 1fr;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.panel-inner {
|
|
205
|
+
/* The grid item cannot carry the frame: its border is left out of the open
|
|
206
|
+
track and clipped off. It clips here, the frame sits one level down. */
|
|
207
|
+
min-height: 0;
|
|
208
|
+
overflow: hidden;
|
|
194
209
|
}
|
|
195
210
|
|
|
196
|
-
.
|
|
211
|
+
.content-container {
|
|
212
|
+
display: flex;
|
|
213
|
+
flex-direction: column;
|
|
214
|
+
width: 100%;
|
|
197
215
|
background: var(--container-background-color);
|
|
198
216
|
border: 1px solid var(--flat-enabled-border-color);
|
|
199
217
|
border-top: none;
|
|
@@ -201,6 +219,11 @@ var accordion_item_default = css`* {
|
|
|
201
219
|
border-bottom-right-radius: var(--ui-components-accordion-item-border-radius);
|
|
202
220
|
}
|
|
203
221
|
|
|
222
|
+
.wrapper.open-true .content-button {
|
|
223
|
+
border-bottom-left-radius: 0;
|
|
224
|
+
border-bottom-right-radius: 0;
|
|
225
|
+
}
|
|
226
|
+
|
|
204
227
|
.wrapper.state-disabled .content-button {
|
|
205
228
|
cursor: not-allowed;
|
|
206
229
|
}
|
|
@@ -209,6 +232,14 @@ var accordion_item_default = css`* {
|
|
|
209
232
|
.wrapper.state-disabled .trailing-icon {
|
|
210
233
|
color: var(--element-disabled-color);
|
|
211
234
|
}
|
|
235
|
+
|
|
236
|
+
@media (prefers-reduced-motion: reduce) {
|
|
237
|
+
.panel,
|
|
238
|
+
.content-button,
|
|
239
|
+
.trailing-icon {
|
|
240
|
+
transition: none;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
212
243
|
`;
|
|
213
244
|
//#endregion
|
|
214
245
|
export { accordion_item_default as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-item.css.js","names":[],"sources":["../../../src/components/accordion-item/accordion-item.css?inline"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n padding: 0;\n position: relative;\n width: 100%;\n}\n\n.content-button {\n @mixin style style=flat;\n @mixin font-overline;\n color: var(--element-neutral-color);\n background: var(--flat-enabled-background-color);\n border: 1px solid var(--flat-enabled-border-color);\n border-radius: var(--ui-components-accordion-item-border-radius);\n width: 100%;\n height: var(--ui-components-accordion-item-touch-target-size);\n padding: 0 var(--ui-components-accordion-item-padding-horizontal);\n margin: 0;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n}\n\n.content {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n}\n\n.leading-content-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n min-width: 0;\n min-height: 1px;\n padding: 0;\n}\n\n.label-frame {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n min-width: 0;\n min-height: 1px;\n padding: 0 var(--ui-components-accordion-item-label-spacing);\n gap: 10px;\n}\n\n.title {\n @mixin font-overline;\n color: var(--element-neutral-color);\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n min-width: 0;\n min-height: 1px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n letter-spacing: var(--global-typography-ui-overline-letter-spacing);\n}\n\n.trailing-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--menu-navigation-components-navigation-item-icon-size);\n height: var(--menu-navigation-components-navigation-item-icon-size);\n flex-shrink: 0;\n position: relative;\n transition: transform
|
|
1
|
+
{"version":3,"file":"accordion-item.css.js","names":[],"sources":["../../../src/components/accordion-item/accordion-item.css?inline"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\n:host {\n /* TODO(designer): confirm the expand duration and curve. */\n --_expand-duration: var(--obc-accordion-expand-duration, 200ms);\n}\n\n.wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n padding: 0;\n position: relative;\n width: 100%;\n}\n\n.content-button {\n @mixin style style=flat;\n @mixin font-overline;\n color: var(--element-neutral-color);\n background: var(--flat-enabled-background-color);\n border: 1px solid var(--flat-enabled-border-color);\n border-radius: var(--ui-components-accordion-item-border-radius);\n width: 100%;\n height: var(--ui-components-accordion-item-touch-target-size);\n padding: 0 var(--ui-components-accordion-item-padding-horizontal);\n margin: 0;\n cursor: pointer;\n overflow: hidden;\n position: relative;\n /* The bottom corners square on open; without this they round again while\n the panel is still sliding away. */\n transition: border-radius var(--_expand-duration) ease;\n}\n\n.content {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n}\n\n.leading-content-container {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n min-width: 0;\n min-height: 1px;\n padding: 0;\n}\n\n.label-frame {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n min-width: 0;\n min-height: 1px;\n padding: 0 var(--ui-components-accordion-item-label-spacing);\n gap: 10px;\n}\n\n.title {\n @mixin font-overline;\n color: var(--element-neutral-color);\n flex-grow: 1;\n flex-shrink: 1;\n flex-basis: 0;\n min-width: 0;\n min-height: 1px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-align: left;\n letter-spacing: var(--global-typography-ui-overline-letter-spacing);\n}\n\n.trailing-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--menu-navigation-components-navigation-item-icon-size);\n height: var(--menu-navigation-components-navigation-item-icon-size);\n flex-shrink: 0;\n position: relative;\n transition: transform var(--_expand-duration) ease;\n}\n\n.divider {\n height: 1px;\n width: 100%;\n color: var(--border-divider-color);\n fill: var(--border-divider-color);\n background-color: var(--border-divider-color);\n position: absolute;\n bottom: 0px;\n}\n\n.wrapper.open-true .trailing-icon {\n transform: rotate(-180deg);\n}\n\n.panel {\n display: grid;\n /* 0fr to 1fr is the only track that eases to content height in every engine. */\n grid-template-rows: 0fr;\n width: 100%;\n transition: grid-template-rows var(--_expand-duration) ease;\n}\n\n.wrapper.open-true .panel {\n grid-template-rows: 1fr;\n}\n\n.panel-inner {\n /* The grid item cannot carry the frame: its border is left out of the open\n track and clipped off. It clips here, the frame sits one level down. */\n min-height: 0;\n overflow: hidden;\n}\n\n.content-container {\n display: flex;\n flex-direction: column;\n width: 100%;\n background: var(--container-background-color);\n border: 1px solid var(--flat-enabled-border-color);\n border-top: none;\n border-bottom-left-radius: var(--ui-components-accordion-item-border-radius);\n border-bottom-right-radius: var(--ui-components-accordion-item-border-radius);\n}\n\n.wrapper.open-true .content-button {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.wrapper.state-disabled .content-button {\n cursor: not-allowed;\n}\n\n.wrapper.state-disabled .title,\n.wrapper.state-disabled .trailing-icon {\n color: var(--element-disabled-color);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .panel,\n .content-button,\n .trailing-icon {\n transition: none;\n }\n}\n"],"mappings":""}
|