@oicl/openbridge-webcomponents 2.0.0-next.73 → 2.0.0-next.74
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 +41 -9
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +296 -1
- package/dist/automation/automation-button/abstract-automation-button-motorized.d.ts +7 -0
- package/dist/automation/automation-button/abstract-automation-button-motorized.d.ts.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-motorized.js +16 -4
- package/dist/automation/automation-button/abstract-automation-button-motorized.js.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts +16 -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 +11 -1
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js.map +1 -1
- package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.d.ts +14 -0
- package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.d.ts.map +1 -1
- package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.js +25 -5
- package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -12783,8 +12783,35 @@
|
|
|
12783
12783
|
"text": "number"
|
|
12784
12784
|
},
|
|
12785
12785
|
"default": "0",
|
|
12786
|
+
"deprecated": "Use `speed` together with `speedUnit` instead. When `speed`\nis set it takes precedence over `speedInPercent`.",
|
|
12786
12787
|
"attribute": "speedInPercent"
|
|
12787
12788
|
},
|
|
12789
|
+
{
|
|
12790
|
+
"kind": "field",
|
|
12791
|
+
"name": "speed",
|
|
12792
|
+
"type": {
|
|
12793
|
+
"text": "number | undefined"
|
|
12794
|
+
},
|
|
12795
|
+
"attribute": "speed"
|
|
12796
|
+
},
|
|
12797
|
+
{
|
|
12798
|
+
"kind": "field",
|
|
12799
|
+
"name": "speedUnit",
|
|
12800
|
+
"type": {
|
|
12801
|
+
"text": "string"
|
|
12802
|
+
},
|
|
12803
|
+
"default": "'%'",
|
|
12804
|
+
"attribute": "speedUnit"
|
|
12805
|
+
},
|
|
12806
|
+
{
|
|
12807
|
+
"kind": "field",
|
|
12808
|
+
"name": "speedMaxDigits",
|
|
12809
|
+
"type": {
|
|
12810
|
+
"text": "number"
|
|
12811
|
+
},
|
|
12812
|
+
"default": "3",
|
|
12813
|
+
"attribute": "speedMaxDigits"
|
|
12814
|
+
},
|
|
12788
12815
|
{
|
|
12789
12816
|
"kind": "field",
|
|
12790
12817
|
"name": "labelDirection",
|
|
@@ -13233,8 +13260,32 @@
|
|
|
13233
13260
|
"text": "number"
|
|
13234
13261
|
},
|
|
13235
13262
|
"default": "0",
|
|
13263
|
+
"deprecated": "Use `speed` together with `speedUnit` instead. When `speed`\nis set it takes precedence over `speedInPercent`.",
|
|
13236
13264
|
"fieldName": "speedInPercent"
|
|
13237
13265
|
},
|
|
13266
|
+
{
|
|
13267
|
+
"name": "speed",
|
|
13268
|
+
"type": {
|
|
13269
|
+
"text": "number | undefined"
|
|
13270
|
+
},
|
|
13271
|
+
"fieldName": "speed"
|
|
13272
|
+
},
|
|
13273
|
+
{
|
|
13274
|
+
"name": "speedUnit",
|
|
13275
|
+
"type": {
|
|
13276
|
+
"text": "string"
|
|
13277
|
+
},
|
|
13278
|
+
"default": "'%'",
|
|
13279
|
+
"fieldName": "speedUnit"
|
|
13280
|
+
},
|
|
13281
|
+
{
|
|
13282
|
+
"name": "speedMaxDigits",
|
|
13283
|
+
"type": {
|
|
13284
|
+
"text": "number"
|
|
13285
|
+
},
|
|
13286
|
+
"default": "3",
|
|
13287
|
+
"fieldName": "speedMaxDigits"
|
|
13288
|
+
},
|
|
13238
13289
|
{
|
|
13239
13290
|
"name": "labelDirection",
|
|
13240
13291
|
"type": {
|
|
@@ -20494,12 +20545,51 @@
|
|
|
20494
20545
|
"text": "number"
|
|
20495
20546
|
},
|
|
20496
20547
|
"default": "0",
|
|
20548
|
+
"deprecated": "Use `speed` together with `speedUnit` instead. When `speed`\nis set it takes precedence over `speedInPercent`.",
|
|
20497
20549
|
"attribute": "speedInPercent",
|
|
20498
20550
|
"inheritedFrom": {
|
|
20499
20551
|
"name": "ObcAbstractAutomationButtonMotorized",
|
|
20500
20552
|
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
20501
20553
|
}
|
|
20502
20554
|
},
|
|
20555
|
+
{
|
|
20556
|
+
"kind": "field",
|
|
20557
|
+
"name": "speed",
|
|
20558
|
+
"type": {
|
|
20559
|
+
"text": "number | undefined"
|
|
20560
|
+
},
|
|
20561
|
+
"attribute": "speed",
|
|
20562
|
+
"inheritedFrom": {
|
|
20563
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
20564
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
20565
|
+
}
|
|
20566
|
+
},
|
|
20567
|
+
{
|
|
20568
|
+
"kind": "field",
|
|
20569
|
+
"name": "speedUnit",
|
|
20570
|
+
"type": {
|
|
20571
|
+
"text": "string"
|
|
20572
|
+
},
|
|
20573
|
+
"default": "'%'",
|
|
20574
|
+
"attribute": "speedUnit",
|
|
20575
|
+
"inheritedFrom": {
|
|
20576
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
20577
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
20578
|
+
}
|
|
20579
|
+
},
|
|
20580
|
+
{
|
|
20581
|
+
"kind": "field",
|
|
20582
|
+
"name": "speedMaxDigits",
|
|
20583
|
+
"type": {
|
|
20584
|
+
"text": "number"
|
|
20585
|
+
},
|
|
20586
|
+
"default": "3",
|
|
20587
|
+
"attribute": "speedMaxDigits",
|
|
20588
|
+
"inheritedFrom": {
|
|
20589
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
20590
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
20591
|
+
}
|
|
20592
|
+
},
|
|
20503
20593
|
{
|
|
20504
20594
|
"kind": "field",
|
|
20505
20595
|
"name": "labelDirection",
|
|
@@ -20954,12 +21044,48 @@
|
|
|
20954
21044
|
"text": "number"
|
|
20955
21045
|
},
|
|
20956
21046
|
"default": "0",
|
|
21047
|
+
"deprecated": "Use `speed` together with `speedUnit` instead. When `speed`\nis set it takes precedence over `speedInPercent`.",
|
|
20957
21048
|
"fieldName": "speedInPercent",
|
|
20958
21049
|
"inheritedFrom": {
|
|
20959
21050
|
"name": "ObcAbstractAutomationButtonMotorized",
|
|
20960
21051
|
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
20961
21052
|
}
|
|
20962
21053
|
},
|
|
21054
|
+
{
|
|
21055
|
+
"name": "speed",
|
|
21056
|
+
"type": {
|
|
21057
|
+
"text": "number | undefined"
|
|
21058
|
+
},
|
|
21059
|
+
"fieldName": "speed",
|
|
21060
|
+
"inheritedFrom": {
|
|
21061
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
21062
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
21063
|
+
}
|
|
21064
|
+
},
|
|
21065
|
+
{
|
|
21066
|
+
"name": "speedUnit",
|
|
21067
|
+
"type": {
|
|
21068
|
+
"text": "string"
|
|
21069
|
+
},
|
|
21070
|
+
"default": "'%'",
|
|
21071
|
+
"fieldName": "speedUnit",
|
|
21072
|
+
"inheritedFrom": {
|
|
21073
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
21074
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
21075
|
+
}
|
|
21076
|
+
},
|
|
21077
|
+
{
|
|
21078
|
+
"name": "speedMaxDigits",
|
|
21079
|
+
"type": {
|
|
21080
|
+
"text": "number"
|
|
21081
|
+
},
|
|
21082
|
+
"default": "3",
|
|
21083
|
+
"fieldName": "speedMaxDigits",
|
|
21084
|
+
"inheritedFrom": {
|
|
21085
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
21086
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
21087
|
+
}
|
|
21088
|
+
},
|
|
20963
21089
|
{
|
|
20964
21090
|
"name": "labelDirection",
|
|
20965
21091
|
"type": {
|
|
@@ -24365,12 +24491,51 @@
|
|
|
24365
24491
|
"text": "number"
|
|
24366
24492
|
},
|
|
24367
24493
|
"default": "0",
|
|
24494
|
+
"deprecated": "Use `speed` together with `speedUnit` instead. When `speed`\nis set it takes precedence over `speedInPercent`.",
|
|
24368
24495
|
"attribute": "speedInPercent",
|
|
24369
24496
|
"inheritedFrom": {
|
|
24370
24497
|
"name": "ObcAbstractAutomationButtonMotorized",
|
|
24371
24498
|
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
24372
24499
|
}
|
|
24373
24500
|
},
|
|
24501
|
+
{
|
|
24502
|
+
"kind": "field",
|
|
24503
|
+
"name": "speed",
|
|
24504
|
+
"type": {
|
|
24505
|
+
"text": "number | undefined"
|
|
24506
|
+
},
|
|
24507
|
+
"attribute": "speed",
|
|
24508
|
+
"inheritedFrom": {
|
|
24509
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
24510
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
24511
|
+
}
|
|
24512
|
+
},
|
|
24513
|
+
{
|
|
24514
|
+
"kind": "field",
|
|
24515
|
+
"name": "speedUnit",
|
|
24516
|
+
"type": {
|
|
24517
|
+
"text": "string"
|
|
24518
|
+
},
|
|
24519
|
+
"default": "'%'",
|
|
24520
|
+
"attribute": "speedUnit",
|
|
24521
|
+
"inheritedFrom": {
|
|
24522
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
24523
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
24524
|
+
}
|
|
24525
|
+
},
|
|
24526
|
+
{
|
|
24527
|
+
"kind": "field",
|
|
24528
|
+
"name": "speedMaxDigits",
|
|
24529
|
+
"type": {
|
|
24530
|
+
"text": "number"
|
|
24531
|
+
},
|
|
24532
|
+
"default": "3",
|
|
24533
|
+
"attribute": "speedMaxDigits",
|
|
24534
|
+
"inheritedFrom": {
|
|
24535
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
24536
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
24537
|
+
}
|
|
24538
|
+
},
|
|
24374
24539
|
{
|
|
24375
24540
|
"kind": "field",
|
|
24376
24541
|
"name": "labelDirection",
|
|
@@ -24827,12 +24992,48 @@
|
|
|
24827
24992
|
"text": "number"
|
|
24828
24993
|
},
|
|
24829
24994
|
"default": "0",
|
|
24995
|
+
"deprecated": "Use `speed` together with `speedUnit` instead. When `speed`\nis set it takes precedence over `speedInPercent`.",
|
|
24830
24996
|
"fieldName": "speedInPercent",
|
|
24831
24997
|
"inheritedFrom": {
|
|
24832
24998
|
"name": "ObcAbstractAutomationButtonMotorized",
|
|
24833
24999
|
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
24834
25000
|
}
|
|
24835
25001
|
},
|
|
25002
|
+
{
|
|
25003
|
+
"name": "speed",
|
|
25004
|
+
"type": {
|
|
25005
|
+
"text": "number | undefined"
|
|
25006
|
+
},
|
|
25007
|
+
"fieldName": "speed",
|
|
25008
|
+
"inheritedFrom": {
|
|
25009
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25010
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25011
|
+
}
|
|
25012
|
+
},
|
|
25013
|
+
{
|
|
25014
|
+
"name": "speedUnit",
|
|
25015
|
+
"type": {
|
|
25016
|
+
"text": "string"
|
|
25017
|
+
},
|
|
25018
|
+
"default": "'%'",
|
|
25019
|
+
"fieldName": "speedUnit",
|
|
25020
|
+
"inheritedFrom": {
|
|
25021
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25022
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25023
|
+
}
|
|
25024
|
+
},
|
|
25025
|
+
{
|
|
25026
|
+
"name": "speedMaxDigits",
|
|
25027
|
+
"type": {
|
|
25028
|
+
"text": "number"
|
|
25029
|
+
},
|
|
25030
|
+
"default": "3",
|
|
25031
|
+
"fieldName": "speedMaxDigits",
|
|
25032
|
+
"inheritedFrom": {
|
|
25033
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25034
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25035
|
+
}
|
|
25036
|
+
},
|
|
24836
25037
|
{
|
|
24837
25038
|
"name": "labelDirection",
|
|
24838
25039
|
"type": {
|
|
@@ -25136,12 +25337,51 @@
|
|
|
25136
25337
|
"text": "number"
|
|
25137
25338
|
},
|
|
25138
25339
|
"default": "0",
|
|
25340
|
+
"deprecated": "Use `speed` together with `speedUnit` instead. When `speed`\nis set it takes precedence over `speedInPercent`.",
|
|
25139
25341
|
"attribute": "speedInPercent",
|
|
25140
25342
|
"inheritedFrom": {
|
|
25141
25343
|
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25142
25344
|
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25143
25345
|
}
|
|
25144
25346
|
},
|
|
25347
|
+
{
|
|
25348
|
+
"kind": "field",
|
|
25349
|
+
"name": "speed",
|
|
25350
|
+
"type": {
|
|
25351
|
+
"text": "number | undefined"
|
|
25352
|
+
},
|
|
25353
|
+
"attribute": "speed",
|
|
25354
|
+
"inheritedFrom": {
|
|
25355
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25356
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25357
|
+
}
|
|
25358
|
+
},
|
|
25359
|
+
{
|
|
25360
|
+
"kind": "field",
|
|
25361
|
+
"name": "speedUnit",
|
|
25362
|
+
"type": {
|
|
25363
|
+
"text": "string"
|
|
25364
|
+
},
|
|
25365
|
+
"default": "'%'",
|
|
25366
|
+
"attribute": "speedUnit",
|
|
25367
|
+
"inheritedFrom": {
|
|
25368
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25369
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25370
|
+
}
|
|
25371
|
+
},
|
|
25372
|
+
{
|
|
25373
|
+
"kind": "field",
|
|
25374
|
+
"name": "speedMaxDigits",
|
|
25375
|
+
"type": {
|
|
25376
|
+
"text": "number"
|
|
25377
|
+
},
|
|
25378
|
+
"default": "3",
|
|
25379
|
+
"attribute": "speedMaxDigits",
|
|
25380
|
+
"inheritedFrom": {
|
|
25381
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25382
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25383
|
+
}
|
|
25384
|
+
},
|
|
25145
25385
|
{
|
|
25146
25386
|
"kind": "field",
|
|
25147
25387
|
"name": "labelDirection",
|
|
@@ -25598,12 +25838,48 @@
|
|
|
25598
25838
|
"text": "number"
|
|
25599
25839
|
},
|
|
25600
25840
|
"default": "0",
|
|
25841
|
+
"deprecated": "Use `speed` together with `speedUnit` instead. When `speed`\nis set it takes precedence over `speedInPercent`.",
|
|
25601
25842
|
"fieldName": "speedInPercent",
|
|
25602
25843
|
"inheritedFrom": {
|
|
25603
25844
|
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25604
25845
|
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25605
25846
|
}
|
|
25606
25847
|
},
|
|
25848
|
+
{
|
|
25849
|
+
"name": "speed",
|
|
25850
|
+
"type": {
|
|
25851
|
+
"text": "number | undefined"
|
|
25852
|
+
},
|
|
25853
|
+
"fieldName": "speed",
|
|
25854
|
+
"inheritedFrom": {
|
|
25855
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25856
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25857
|
+
}
|
|
25858
|
+
},
|
|
25859
|
+
{
|
|
25860
|
+
"name": "speedUnit",
|
|
25861
|
+
"type": {
|
|
25862
|
+
"text": "string"
|
|
25863
|
+
},
|
|
25864
|
+
"default": "'%'",
|
|
25865
|
+
"fieldName": "speedUnit",
|
|
25866
|
+
"inheritedFrom": {
|
|
25867
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25868
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25869
|
+
}
|
|
25870
|
+
},
|
|
25871
|
+
{
|
|
25872
|
+
"name": "speedMaxDigits",
|
|
25873
|
+
"type": {
|
|
25874
|
+
"text": "number"
|
|
25875
|
+
},
|
|
25876
|
+
"default": "3",
|
|
25877
|
+
"fieldName": "speedMaxDigits",
|
|
25878
|
+
"inheritedFrom": {
|
|
25879
|
+
"name": "ObcAbstractAutomationButtonMotorized",
|
|
25880
|
+
"module": "src/automation/automation-button/abstract-automation-button-motorized.ts"
|
|
25881
|
+
}
|
|
25882
|
+
},
|
|
25607
25883
|
{
|
|
25608
25884
|
"name": "labelDirection",
|
|
25609
25885
|
"type": {
|
|
@@ -65014,7 +65290,7 @@
|
|
|
65014
65290
|
"declarations": [
|
|
65015
65291
|
{
|
|
65016
65292
|
"kind": "class",
|
|
65017
|
-
"description": "`<obc-toggle-button-vertical-group>` – A vertically oriented segmented control for selecting a single option from a set.\n\nProvides a vertical stack of connected toggle buttons where only one option can be selected at a time.\nEach option is represented by an `<obc-toggle-button-vertical-option>` child element. The group manages selection\nstate automatically, deselecting the previous option when a new one is chosen.\n\nAppears as a visually unified vertical column of buttons with clear selection indicators. Commonly used for sidebar\nnavigation, vertical filter controls, or mode selection in vertical layouts. Ideal for scenarios where vertical\nspace is available and horizontal space is limited, such as side panels or navigation drawers.\n\n### Features\n\n- **Single selection mode:** Only one option can be active at a time; selecting a new option automatically\n deselects the previous one. Similar to radio button behavior but with a button-like vertical appearance.\n- **Visual variants:**\n - `regular` (default): Standard appearance with full background and border styling.\n - `flat`: Minimal style with reduced visual weight, no prominent background or border.\n - `normal`: **TODO(designer)** – Clarify the visual difference and intended use case for the `normal` variant compared to `regular` and `flat`.\n- **Layout behavior:**\n - By default, the group stretches to fill available container width, with options stacked vertically.\n - When `hugWidth` is true, the group shrinks to fit its content width instead of expanding.\n- **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual\n options can also be disabled independently while the group remains enabled.\n- **Divider management:** Automatically shows visual dividers between options and hides the divider after\n the last option for a clean, unified appearance.\n- **Property propagation:** The group automatically synchronizes the `type` property to all child\n `<obc-toggle-button-vertical-option>` elements for consistent styling.\n- **Automatic fallback selection:** If the current value is set to a disabled or non-existent option, the\n group automatically selects the first enabled option to ensure a valid state.\n\n### Usage Guidelines\n\nUse `<obc-toggle-button-vertical-group>` when you need users to choose exactly one option from a small set of\nmutually exclusive choices (typically 2-5 options) in a vertical layout. It provides a more compact and visually\nintegrated alternative to radio buttons for vertical navigation or control panels.\n\n**Ideal use cases:**\n- Sidebar navigation toggles (e.g., dashboard/reports/settings views)\n- Vertical filter controls (e.g., all/active/archived items)\n- Mode selectors in vertical panels (e.g., edit/preview/code modes)\n- View toggles in constrained horizontal spaces (e.g., mobile side panels)\n- Control panels with vertical layout preference\n\n**When not to use:**\n- For binary on/off choices, use a switch or checkbox instead.\n- For multiple selections from a set, use checkboxes or chips.\n- For many options (6+), consider a dropdown/select or radio button list for better scannability.\n- For horizontal layouts with adequate space, use `<obc-toggle-button-group>` instead.\n- For navigation between pages or sections, use tabs or a navigation menu.\n\n**Best Practices:**\n- Each option must have a unique `value` property to prevent selection conflicts.\n- Provide clear, concise labels for each option. Keep text short (1-2 words ideal).\n- For icon-only buttons, ensure icons are universally recognizable or provide tooltips.\n- Set an initial `value` to indicate the default selection, or the first enabled option will be selected automatically.\n- Avoid disabling the currently selected option; if an option becomes unavailable, selection will shift to the first enabled option.\n- Use `type=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n- Ensure adequate vertical space for the number of options to avoid excessive scrolling or cramped layouts.\n\n### Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------|-----------------|---------|\n| (default) | Always | Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options in the group. Each option can include an icon via its own `icon` slot. |\n\n### Events\n\n- `value` – Fired when the selected value changes, either through user interaction or programmatic change.\n Event detail: `{ value: string, previousValue: string }`. Listen to this event to react to selection changes.\n\n### Example\n\n```html\n<obc-toggle-button-vertical-group value=\"list\" type=\"regular\">\n <obc-toggle-button-vertical-option value=\"list\" label=\"List\" hasIcon>\n <obi-placeholder slot=\"icon\"></obi-placeholder>\n </obc-toggle-button-vertical-option>\n <obc-toggle-button-vertical-option value=\"grid\" label=\"Grid\" hasIcon>\n <obi-placeholder slot=\"icon\"></obi-placeholder>\n </obc-toggle-button-vertical-option>\n <obc-toggle-button-vertical-option value=\"table\" label=\"Table\" hasIcon>\n <obi-placeholder slot=\"icon\"></obi-placeholder>\n </obc-toggle-button-vertical-option>\n</obc-toggle-button-vertical-group>\n```",
|
|
65293
|
+
"description": "`<obc-toggle-button-vertical-group>` – A vertically oriented segmented control for selecting a single option from a set.\n\nProvides a vertical stack of connected toggle buttons where only one option can be selected at a time.\nEach option is represented by an `<obc-toggle-button-vertical-option>` child element. The group manages selection\nstate automatically, deselecting the previous option when a new one is chosen.\n\nAppears as a visually unified vertical column of buttons with clear selection indicators. Commonly used for sidebar\nnavigation, vertical filter controls, or mode selection in vertical layouts. Ideal for scenarios where vertical\nspace is available and horizontal space is limited, such as side panels or navigation drawers.\n\n### Features\n\n- **Single selection mode:** Only one option can be active at a time; selecting a new option automatically\n deselects the previous one. Similar to radio button behavior but with a button-like vertical appearance.\n- **Visual variants:**\n - `regular` (default): Standard appearance with full background and border styling.\n - `flat`: Minimal style with reduced visual weight, no prominent background or border.\n - `normal`: **TODO(designer)** – Clarify the visual difference and intended use case for the `normal` variant compared to `regular` and `flat`.\n- **Layout behavior:**\n - By default, the group stretches to fill available container width, with options stacked vertically.\n - When `hugWidth` is true, the group shrinks to fit its content width instead of expanding.\n- **Empty selection mode:** When `allowEmptySelection` is true, a `value` that does not match any enabled\n option leaves the group with no option selected, instead of defaulting to the first enabled option. Use\n this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not\n imply a choice the user has not made.\n- **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual\n options can also be disabled independently while the group remains enabled.\n- **Divider management:** Automatically shows visual dividers between options and hides the divider after\n the last option for a clean, unified appearance.\n- **Property propagation:** The group automatically synchronizes the `type` property to all child\n `<obc-toggle-button-vertical-option>` elements for consistent styling.\n- **Automatic fallback selection:** If the current value is set to a disabled or non-existent option, the\n group automatically selects the first enabled option to ensure a valid state.\n\n### Usage Guidelines\n\nUse `<obc-toggle-button-vertical-group>` when you need users to choose exactly one option from a small set of\nmutually exclusive choices (typically 2-5 options) in a vertical layout. It provides a more compact and visually\nintegrated alternative to radio buttons for vertical navigation or control panels.\n\n**Ideal use cases:**\n- Sidebar navigation toggles (e.g., dashboard/reports/settings views)\n- Vertical filter controls (e.g., all/active/archived items)\n- Mode selectors in vertical panels (e.g., edit/preview/code modes)\n- View toggles in constrained horizontal spaces (e.g., mobile side panels)\n- Control panels with vertical layout preference\n\n**When not to use:**\n- For binary on/off choices, use a switch or checkbox instead.\n- For multiple selections from a set, use checkboxes or chips.\n- For many options (6+), consider a dropdown/select or radio button list for better scannability.\n- For horizontal layouts with adequate space, use `<obc-toggle-button-group>` instead.\n- For navigation between pages or sections, use tabs or a navigation menu.\n\n**Best Practices:**\n- Each option must have a unique `value` property to prevent selection conflicts.\n- Provide clear, concise labels for each option. Keep text short (1-2 words ideal).\n- For icon-only buttons, ensure icons are universally recognizable or provide tooltips.\n- Set an initial `value` to indicate the default selection, or the first enabled option will be selected automatically.\n- Avoid disabling the currently selected option; if an option becomes unavailable, selection will shift to the first enabled option.\n- Use `type=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n- Ensure adequate vertical space for the number of options to avoid excessive scrolling or cramped layouts.\n\n### Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------|-----------------|---------|\n| (default) | Always | Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options in the group. Each option can include an icon via its own `icon` slot. |\n\n### Events\n\n- `value` – Fired when the selected value changes, either through user interaction or programmatic change.\n Event detail: `{ value: string, previousValue: string }`. Listen to this event to react to selection changes.\n\n### Example\n\n```html\n<obc-toggle-button-vertical-group value=\"list\" type=\"regular\">\n <obc-toggle-button-vertical-option value=\"list\" label=\"List\" hasIcon>\n <obi-placeholder slot=\"icon\"></obi-placeholder>\n </obc-toggle-button-vertical-option>\n <obc-toggle-button-vertical-option value=\"grid\" label=\"Grid\" hasIcon>\n <obi-placeholder slot=\"icon\"></obi-placeholder>\n </obc-toggle-button-vertical-option>\n <obc-toggle-button-vertical-option value=\"table\" label=\"Table\" hasIcon>\n <obi-placeholder slot=\"icon\"></obi-placeholder>\n </obc-toggle-button-vertical-option>\n</obc-toggle-button-vertical-group>\n```",
|
|
65018
65294
|
"name": "ObcToggleButtonVerticalGroup",
|
|
65019
65295
|
"slots": [
|
|
65020
65296
|
{
|
|
@@ -65049,6 +65325,16 @@
|
|
|
65049
65325
|
"description": "If true, the group shrinks to fit its content width instead of stretching to fill its container.\n\nDefaults to false.",
|
|
65050
65326
|
"attribute": "hugWidth"
|
|
65051
65327
|
},
|
|
65328
|
+
{
|
|
65329
|
+
"kind": "field",
|
|
65330
|
+
"name": "allowEmptySelection",
|
|
65331
|
+
"type": {
|
|
65332
|
+
"text": "boolean"
|
|
65333
|
+
},
|
|
65334
|
+
"default": "false",
|
|
65335
|
+
"description": "If true, a `value` that does not match any enabled option leaves the group with no option selected\ninstead of defaulting to the first enabled option.\n\nThis also applies when the currently selected option becomes disabled: the group clears its selection\nrather than falling back to another option.\n\nDefaults to false (the first enabled option is selected when the value does not match).",
|
|
65336
|
+
"attribute": "allowEmptySelection"
|
|
65337
|
+
},
|
|
65052
65338
|
{
|
|
65053
65339
|
"kind": "field",
|
|
65054
65340
|
"name": "disabled",
|
|
@@ -65217,6 +65503,15 @@
|
|
|
65217
65503
|
"description": "If true, the group shrinks to fit its content width instead of stretching to fill its container.\n\nDefaults to false.",
|
|
65218
65504
|
"fieldName": "hugWidth"
|
|
65219
65505
|
},
|
|
65506
|
+
{
|
|
65507
|
+
"name": "allowEmptySelection",
|
|
65508
|
+
"type": {
|
|
65509
|
+
"text": "boolean"
|
|
65510
|
+
},
|
|
65511
|
+
"default": "false",
|
|
65512
|
+
"description": "If true, a `value` that does not match any enabled option leaves the group with no option selected\ninstead of defaulting to the first enabled option.\n\nThis also applies when the currently selected option becomes disabled: the group clears its selection\nrather than falling back to another option.\n\nDefaults to false (the first enabled option is selected when the value does not match).",
|
|
65513
|
+
"fieldName": "allowEmptySelection"
|
|
65514
|
+
},
|
|
65220
65515
|
{
|
|
65221
65516
|
"name": "disabled",
|
|
65222
65517
|
"type": {
|
|
@@ -10,7 +10,14 @@ export declare enum MotorizedVariant {
|
|
|
10
10
|
}
|
|
11
11
|
export declare class ObcAbstractAutomationButtonMotorized extends ObcAbstractAutomationButton {
|
|
12
12
|
on: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Use `speed` together with `speedUnit` instead. When `speed`
|
|
15
|
+
* is set it takes precedence over `speedInPercent`.
|
|
16
|
+
*/
|
|
13
17
|
speedInPercent: number;
|
|
18
|
+
speed?: number;
|
|
19
|
+
speedUnit: string;
|
|
20
|
+
speedMaxDigits: number;
|
|
14
21
|
labelDirection: AutomationButtonLabelDirection;
|
|
15
22
|
variant: MotorizedVariant;
|
|
16
23
|
get extraReadouts(): AutomationButtonReadoutStack[];
|
|
@@ -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,EAAC,8BAA8B,EAAC,MAAM,2CAA2C,CAAC;AACzF,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;
|
|
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,EAAC,8BAA8B,EAAC,MAAM,2CAA2C,CAAC;AACzF,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;IAE3B,IAAa,aAAa,IAAI,4BAA4B,EAAE,CAuB3D;IAED,IAAa,GAAG,IAAI,OAAO,CAE1B;CACF"}
|
|
@@ -23,17 +23,20 @@ class ObcAbstractAutomationButtonMotorized extends ObcAbstractAutomationButton {
|
|
|
23
23
|
super(...arguments);
|
|
24
24
|
this.on = false;
|
|
25
25
|
this.speedInPercent = 0;
|
|
26
|
+
this.speedUnit = "%";
|
|
27
|
+
this.speedMaxDigits = 3;
|
|
26
28
|
this.labelDirection = AutomationButtonLabelDirection.right;
|
|
27
29
|
this.variant = "regular";
|
|
28
30
|
}
|
|
29
31
|
get extraReadouts() {
|
|
30
|
-
|
|
32
|
+
const speed = this.speed ?? this.speedInPercent;
|
|
33
|
+
if (speed !== void 0 && speed !== null && this.on) {
|
|
31
34
|
return [
|
|
32
35
|
{
|
|
33
36
|
type: "value",
|
|
34
|
-
value:
|
|
35
|
-
nDigits:
|
|
36
|
-
unit:
|
|
37
|
+
value: speed,
|
|
38
|
+
nDigits: this.speedMaxDigits,
|
|
39
|
+
unit: this.speedUnit,
|
|
37
40
|
direction: this.labelDirection,
|
|
38
41
|
icon: "chevron"
|
|
39
42
|
}
|
|
@@ -59,6 +62,15 @@ __decorateClass([
|
|
|
59
62
|
__decorateClass([
|
|
60
63
|
property({ type: Number })
|
|
61
64
|
], ObcAbstractAutomationButtonMotorized.prototype, "speedInPercent");
|
|
65
|
+
__decorateClass([
|
|
66
|
+
property({ type: Number })
|
|
67
|
+
], ObcAbstractAutomationButtonMotorized.prototype, "speed");
|
|
68
|
+
__decorateClass([
|
|
69
|
+
property({ type: String })
|
|
70
|
+
], ObcAbstractAutomationButtonMotorized.prototype, "speedUnit");
|
|
71
|
+
__decorateClass([
|
|
72
|
+
property({ type: Number })
|
|
73
|
+
], ObcAbstractAutomationButtonMotorized.prototype, "speedMaxDigits");
|
|
62
74
|
__decorateClass([
|
|
63
75
|
property({ type: String })
|
|
64
76
|
], ObcAbstractAutomationButtonMotorized.prototype, "labelDirection");
|
|
@@ -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 {AutomationButtonLabelDirection} 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 @property({type: Number}) speedInPercent: number = 0;\n @property({type: String}) labelDirection: AutomationButtonLabelDirection =\n AutomationButtonLabelDirection.right;\n @property({type: String}) variant: MotorizedVariant =\n MotorizedVariant.regular;\n\n override get extraReadouts(): AutomationButtonReadoutStack[] {\n
|
|
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 {AutomationButtonLabelDirection} 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\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":";;;;;;;;;;;;AAKO,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;AAAA,EAAA;AAAA,EAEF,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,MAAM;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;AA1C6B,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;"}
|
|
@@ -302,6 +302,22 @@ export declare const argTypesAbstractAutomationButtonMotorized: {
|
|
|
302
302
|
max: number;
|
|
303
303
|
step: number;
|
|
304
304
|
};
|
|
305
|
+
description: string;
|
|
306
|
+
};
|
|
307
|
+
speed: {
|
|
308
|
+
control: {
|
|
309
|
+
type: string;
|
|
310
|
+
};
|
|
311
|
+
};
|
|
312
|
+
speedUnit: {
|
|
313
|
+
control: {
|
|
314
|
+
type: string;
|
|
315
|
+
};
|
|
316
|
+
};
|
|
317
|
+
speedMaxDigits: {
|
|
318
|
+
control: {
|
|
319
|
+
type: string;
|
|
320
|
+
};
|
|
305
321
|
};
|
|
306
322
|
labelDirection: {
|
|
307
323
|
options: AutomationButtonLabelDirection[];
|
package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"abstract-automation-button-storybook-helpers.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/abstract-automation-button-storybook-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC9B,2BAA2B,EAC5B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAC,oBAAoB,EAAC,MAAM,8DAA8D,CAAC;AAClG,OAAO,EACL,0BAA0B,EAC1B,kCAAkC,EAClC,4BAA4B,EAC5B,8BAA8B,EAC/B,MAAM,iCAAiC,CAAC;AAEzC,eAAO,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyD5C,CAAC;AAEF,eAAO,MAAM,4CAA4C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMxD,CAAC;AAEF,eAAO,MAAM,6CAA6C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMzD,CAAC;AAEF,eAAO,MAAM,yCAAyC
|
|
1
|
+
{"version":3,"file":"abstract-automation-button-storybook-helpers.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-button/abstract-automation-button-storybook-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,2CAA2C,CAAC;AAC3E,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC9B,2BAA2B,EAC5B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAC,oBAAoB,EAAC,MAAM,8DAA8D,CAAC;AAClG,OAAO,EACL,0BAA0B,EAC1B,kCAAkC,EAClC,4BAA4B,EAC5B,8BAA8B,EAC/B,MAAM,iCAAiC,CAAC;AAEzC,eAAO,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyD5C,CAAC;AAEF,eAAO,MAAM,4CAA4C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMxD,CAAC;AAEF,eAAO,MAAM,6CAA6C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMzD,CAAC;AAEF,eAAO,MAAM,yCAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BrD,CAAC"}
|
|
@@ -79,7 +79,17 @@ const argTypesAbstractAutomationButtonPassiveSquare = {
|
|
|
79
79
|
const argTypesAbstractAutomationButtonMotorized = {
|
|
80
80
|
...argTypesAbstractAutomationButton,
|
|
81
81
|
speedInPercent: {
|
|
82
|
-
control: { type: "range", min: 0, max: 100, step: 1 }
|
|
82
|
+
control: { type: "range", min: 0, max: 100, step: 1 },
|
|
83
|
+
description: "Deprecated, use `speed` together with `speedUnit` instead."
|
|
84
|
+
},
|
|
85
|
+
speed: {
|
|
86
|
+
control: { type: "number" }
|
|
87
|
+
},
|
|
88
|
+
speedUnit: {
|
|
89
|
+
control: { type: "text" }
|
|
90
|
+
},
|
|
91
|
+
speedMaxDigits: {
|
|
92
|
+
control: { type: "number" }
|
|
83
93
|
},
|
|
84
94
|
labelDirection: {
|
|
85
95
|
options: Object.values(AutomationButtonLabelDirection),
|
package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"abstract-automation-button-storybook-helpers.js","sources":["../../../src/automation/automation-button/abstract-automation-button-storybook-helpers.ts"],"sourcesContent":["import {\n ObcAlertFrameStatus,\n ObcAlertFrameThickness,\n ObcAlertFrameType,\n ObcAlertFrameMode,\n} from '../../components/alert-frame/alert-frame.js';\nimport {MotorizedVariant} from './abstract-automation-button-motorized.js';\nimport {\n AutomationButtonDirection,\n AutomationButtonLabelDirection,\n AutomationButtonPositioning,\n} from './automation-button.js';\nimport {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';\nimport {\n AutomationButtonBadgeAlert,\n AutomationButtonBadgeCommandLocked,\n AutomationButtonBadgeControl,\n AutomationButtonBadgeInterlock,\n} from './abstract-automation-button.js';\n\nexport const argTypesAbstractAutomationButton = {\n tag: {\n control: {type: 'text'},\n },\n readoutPosition: {\n options: ['top', 'bottom', 'left', 'right'],\n control: {type: 'radio'},\n },\n readoutSize: {\n options: ['small', 'regular', 'enhanced'],\n control: {type: 'radio'},\n },\n alertFrameType: {\n options: Object.values(ObcAlertFrameType),\n control: {type: 'radio'},\n },\n alertFrameMode: {\n options: Object.values(ObcAlertFrameMode),\n control: {type: 'radio'},\n },\n alertFrameThickness: {\n options: Object.values(ObcAlertFrameThickness),\n control: {type: 'radio'},\n },\n alertFrameStatus: {\n options: Object.values(ObcAlertFrameStatus),\n control: {type: 'radio'},\n },\n positioning: {\n options: Object.values(AutomationButtonPositioning),\n control: {type: 'select'},\n },\n badgeControl: {\n options: Object.values(AutomationButtonBadgeControl),\n control: {type: 'select'},\n },\n badgeCommandLocked: {\n options: Object.values(AutomationButtonBadgeCommandLocked),\n control: {type: 'select'},\n },\n badgeInterlock: {\n options: Object.values(AutomationButtonBadgeInterlock),\n control: {type: 'select'},\n },\n badgeAlert: {\n options: Object.values(AutomationButtonBadgeAlert),\n control: {type: 'select'},\n },\n progressMode: {\n options: Object.values(CircularProgressMode),\n control: {type: 'select'},\n if: {arg: 'progress'},\n },\n progressValue: {\n control: {type: 'range', min: 0, max: 100, step: 1},\n if: {arg: 'progress'},\n },\n};\n\nexport const argTypesAbstractAutomationButtonPassiveRound = {\n ...argTypesAbstractAutomationButton,\n variant: {\n options: ['regular', 'flat'],\n control: {type: 'radio'},\n },\n};\n\nexport const argTypesAbstractAutomationButtonPassiveSquare = {\n ...argTypesAbstractAutomationButton,\n variant: {\n options: ['square', 'flat'],\n control: {type: 'radio'},\n },\n};\n\nexport const argTypesAbstractAutomationButtonMotorized = {\n ...argTypesAbstractAutomationButton,\n speedInPercent: {\n control: {type: 'range', min: 0, max: 100, step: 1},\n },\n labelDirection: {\n options: Object.values(AutomationButtonLabelDirection),\n control: {type: 'radio'},\n },\n direction: {\n options: Object.values(AutomationButtonDirection),\n control: {type: 'radio'},\n },\n variant: {\n options: Object.values(MotorizedVariant),\n control: {type: 'radio'},\n },\n};\n"],"names":["ObcAlertFrameStatus"],"mappings":";;;;;;AAoBO,MAAM,mCAAmC;AAAA,EAC9C,KAAK;AAAA,IACH,SAAS,EAAC,MAAM,OAAA;AAAA,EAAM;AAAA,EAExB,iBAAiB;AAAA,IACf,SAAS,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC1C,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,aAAa;AAAA,IACX,SAAS,CAAC,SAAS,WAAW,UAAU;AAAA,IACxC,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,gBAAgB;AAAA,IACd,SAAS,OAAO,OAAO,iBAAiB;AAAA,IACxC,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,gBAAgB;AAAA,IACd,SAAS,OAAO,OAAO,iBAAiB;AAAA,IACxC,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,qBAAqB;AAAA,IACnB,SAAS,OAAO,OAAO,sBAAsB;AAAA,IAC7C,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,kBAAkB;AAAA,IAChB,SAAS,OAAO,OAAOA,SAAmB;AAAA,IAC1C,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,aAAa;AAAA,IACX,SAAS,OAAO,OAAO,2BAA2B;AAAA,IAClD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,cAAc;AAAA,IACZ,SAAS,OAAO,OAAO,4BAA4B;AAAA,IACnD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,oBAAoB;AAAA,IAClB,SAAS,OAAO,OAAO,kCAAkC;AAAA,IACzD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,gBAAgB;AAAA,IACd,SAAS,OAAO,OAAO,8BAA8B;AAAA,IACrD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,YAAY;AAAA,IACV,SAAS,OAAO,OAAO,0BAA0B;AAAA,IACjD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,cAAc;AAAA,IACZ,SAAS,OAAO,OAAO,oBAAoB;AAAA,IAC3C,SAAS,EAAC,MAAM,SAAA;AAAA,IAChB,IAAI,EAAC,KAAK,WAAA;AAAA,EAAU;AAAA,EAEtB,eAAe;AAAA,IACb,SAAS,EAAC,MAAM,SAAS,KAAK,GAAG,KAAK,KAAK,MAAM,EAAA;AAAA,IACjD,IAAI,EAAC,KAAK,WAAA;AAAA,EAAU;AAExB;AAEO,MAAM,+CAA+C;AAAA,EAC1D,GAAG;AAAA,EACH,SAAS;AAAA,IACP,SAAS,CAAC,WAAW,MAAM;AAAA,IAC3B,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAE3B;AAEO,MAAM,gDAAgD;AAAA,EAC3D,GAAG;AAAA,EACH,SAAS;AAAA,IACP,SAAS,CAAC,UAAU,MAAM;AAAA,IAC1B,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAE3B;AAEO,MAAM,4CAA4C;AAAA,EACvD,GAAG;AAAA,EACH,gBAAgB;AAAA,IACd,SAAS,EAAC,MAAM,SAAS,KAAK,GAAG,KAAK,KAAK,MAAM,EAAA;AAAA,EAAC;AAAA,
|
|
1
|
+
{"version":3,"file":"abstract-automation-button-storybook-helpers.js","sources":["../../../src/automation/automation-button/abstract-automation-button-storybook-helpers.ts"],"sourcesContent":["import {\n ObcAlertFrameStatus,\n ObcAlertFrameThickness,\n ObcAlertFrameType,\n ObcAlertFrameMode,\n} from '../../components/alert-frame/alert-frame.js';\nimport {MotorizedVariant} from './abstract-automation-button-motorized.js';\nimport {\n AutomationButtonDirection,\n AutomationButtonLabelDirection,\n AutomationButtonPositioning,\n} from './automation-button.js';\nimport {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';\nimport {\n AutomationButtonBadgeAlert,\n AutomationButtonBadgeCommandLocked,\n AutomationButtonBadgeControl,\n AutomationButtonBadgeInterlock,\n} from './abstract-automation-button.js';\n\nexport const argTypesAbstractAutomationButton = {\n tag: {\n control: {type: 'text'},\n },\n readoutPosition: {\n options: ['top', 'bottom', 'left', 'right'],\n control: {type: 'radio'},\n },\n readoutSize: {\n options: ['small', 'regular', 'enhanced'],\n control: {type: 'radio'},\n },\n alertFrameType: {\n options: Object.values(ObcAlertFrameType),\n control: {type: 'radio'},\n },\n alertFrameMode: {\n options: Object.values(ObcAlertFrameMode),\n control: {type: 'radio'},\n },\n alertFrameThickness: {\n options: Object.values(ObcAlertFrameThickness),\n control: {type: 'radio'},\n },\n alertFrameStatus: {\n options: Object.values(ObcAlertFrameStatus),\n control: {type: 'radio'},\n },\n positioning: {\n options: Object.values(AutomationButtonPositioning),\n control: {type: 'select'},\n },\n badgeControl: {\n options: Object.values(AutomationButtonBadgeControl),\n control: {type: 'select'},\n },\n badgeCommandLocked: {\n options: Object.values(AutomationButtonBadgeCommandLocked),\n control: {type: 'select'},\n },\n badgeInterlock: {\n options: Object.values(AutomationButtonBadgeInterlock),\n control: {type: 'select'},\n },\n badgeAlert: {\n options: Object.values(AutomationButtonBadgeAlert),\n control: {type: 'select'},\n },\n progressMode: {\n options: Object.values(CircularProgressMode),\n control: {type: 'select'},\n if: {arg: 'progress'},\n },\n progressValue: {\n control: {type: 'range', min: 0, max: 100, step: 1},\n if: {arg: 'progress'},\n },\n};\n\nexport const argTypesAbstractAutomationButtonPassiveRound = {\n ...argTypesAbstractAutomationButton,\n variant: {\n options: ['regular', 'flat'],\n control: {type: 'radio'},\n },\n};\n\nexport const argTypesAbstractAutomationButtonPassiveSquare = {\n ...argTypesAbstractAutomationButton,\n variant: {\n options: ['square', 'flat'],\n control: {type: 'radio'},\n },\n};\n\nexport const argTypesAbstractAutomationButtonMotorized = {\n ...argTypesAbstractAutomationButton,\n speedInPercent: {\n control: {type: 'range', min: 0, max: 100, step: 1},\n description: 'Deprecated, use `speed` together with `speedUnit` instead.',\n },\n speed: {\n control: {type: 'number'},\n },\n speedUnit: {\n control: {type: 'text'},\n },\n speedMaxDigits: {\n control: {type: 'number'},\n },\n labelDirection: {\n options: Object.values(AutomationButtonLabelDirection),\n control: {type: 'radio'},\n },\n direction: {\n options: Object.values(AutomationButtonDirection),\n control: {type: 'radio'},\n },\n variant: {\n options: Object.values(MotorizedVariant),\n control: {type: 'radio'},\n },\n};\n"],"names":["ObcAlertFrameStatus"],"mappings":";;;;;;AAoBO,MAAM,mCAAmC;AAAA,EAC9C,KAAK;AAAA,IACH,SAAS,EAAC,MAAM,OAAA;AAAA,EAAM;AAAA,EAExB,iBAAiB;AAAA,IACf,SAAS,CAAC,OAAO,UAAU,QAAQ,OAAO;AAAA,IAC1C,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,aAAa;AAAA,IACX,SAAS,CAAC,SAAS,WAAW,UAAU;AAAA,IACxC,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,gBAAgB;AAAA,IACd,SAAS,OAAO,OAAO,iBAAiB;AAAA,IACxC,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,gBAAgB;AAAA,IACd,SAAS,OAAO,OAAO,iBAAiB;AAAA,IACxC,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,qBAAqB;AAAA,IACnB,SAAS,OAAO,OAAO,sBAAsB;AAAA,IAC7C,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,kBAAkB;AAAA,IAChB,SAAS,OAAO,OAAOA,SAAmB;AAAA,IAC1C,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,aAAa;AAAA,IACX,SAAS,OAAO,OAAO,2BAA2B;AAAA,IAClD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,cAAc;AAAA,IACZ,SAAS,OAAO,OAAO,4BAA4B;AAAA,IACnD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,oBAAoB;AAAA,IAClB,SAAS,OAAO,OAAO,kCAAkC;AAAA,IACzD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,gBAAgB;AAAA,IACd,SAAS,OAAO,OAAO,8BAA8B;AAAA,IACrD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,YAAY;AAAA,IACV,SAAS,OAAO,OAAO,0BAA0B;AAAA,IACjD,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,cAAc;AAAA,IACZ,SAAS,OAAO,OAAO,oBAAoB;AAAA,IAC3C,SAAS,EAAC,MAAM,SAAA;AAAA,IAChB,IAAI,EAAC,KAAK,WAAA;AAAA,EAAU;AAAA,EAEtB,eAAe;AAAA,IACb,SAAS,EAAC,MAAM,SAAS,KAAK,GAAG,KAAK,KAAK,MAAM,EAAA;AAAA,IACjD,IAAI,EAAC,KAAK,WAAA;AAAA,EAAU;AAExB;AAEO,MAAM,+CAA+C;AAAA,EAC1D,GAAG;AAAA,EACH,SAAS;AAAA,IACP,SAAS,CAAC,WAAW,MAAM;AAAA,IAC3B,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAE3B;AAEO,MAAM,gDAAgD;AAAA,EAC3D,GAAG;AAAA,EACH,SAAS;AAAA,IACP,SAAS,CAAC,UAAU,MAAM;AAAA,IAC1B,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAE3B;AAEO,MAAM,4CAA4C;AAAA,EACvD,GAAG;AAAA,EACH,gBAAgB;AAAA,IACd,SAAS,EAAC,MAAM,SAAS,KAAK,GAAG,KAAK,KAAK,MAAM,EAAA;AAAA,IACjD,aAAa;AAAA,EAAA;AAAA,EAEf,OAAO;AAAA,IACL,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,WAAW;AAAA,IACT,SAAS,EAAC,MAAM,OAAA;AAAA,EAAM;AAAA,EAExB,gBAAgB;AAAA,IACd,SAAS,EAAC,MAAM,SAAA;AAAA,EAAQ;AAAA,EAE1B,gBAAgB;AAAA,IACd,SAAS,OAAO,OAAO,8BAA8B;AAAA,IACrD,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,WAAW;AAAA,IACT,SAAS,OAAO,OAAO,yBAAyB;AAAA,IAChD,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAAA,EAEzB,SAAS;AAAA,IACP,SAAS,OAAO,OAAO,gBAAgB;AAAA,IACvC,SAAS,EAAC,MAAM,QAAA;AAAA,EAAO;AAE3B;"}
|
|
@@ -26,6 +26,10 @@ export type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{
|
|
|
26
26
|
* - **Layout behavior:**
|
|
27
27
|
* - By default, the group stretches to fill available container width, with options stacked vertically.
|
|
28
28
|
* - When `hugWidth` is true, the group shrinks to fit its content width instead of expanding.
|
|
29
|
+
* - **Empty selection mode:** When `allowEmptySelection` is true, a `value` that does not match any enabled
|
|
30
|
+
* option leaves the group with no option selected, instead of defaulting to the first enabled option. Use
|
|
31
|
+
* this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not
|
|
32
|
+
* imply a choice the user has not made.
|
|
29
33
|
* - **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual
|
|
30
34
|
* options can also be disabled independently while the group remains enabled.
|
|
31
35
|
* - **Divider management:** Automatically shows visual dividers between options and hides the divider after
|
|
@@ -113,6 +117,16 @@ export declare class ObcToggleButtonVerticalGroup extends LitElement {
|
|
|
113
117
|
* Defaults to false.
|
|
114
118
|
*/
|
|
115
119
|
hugWidth: boolean;
|
|
120
|
+
/**
|
|
121
|
+
* If true, a `value` that does not match any enabled option leaves the group with no option selected
|
|
122
|
+
* instead of defaulting to the first enabled option.
|
|
123
|
+
*
|
|
124
|
+
* This also applies when the currently selected option becomes disabled: the group clears its selection
|
|
125
|
+
* rather than falling back to another option.
|
|
126
|
+
*
|
|
127
|
+
* Defaults to false (the first enabled option is selected when the value does not match).
|
|
128
|
+
*/
|
|
129
|
+
allowEmptySelection: boolean;
|
|
116
130
|
/**
|
|
117
131
|
* Disables the entire group and all contained options.
|
|
118
132
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-button-vertical-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAmB,cAAc,EAAC,MAAM,KAAK,CAAC;AAKhE,OAAO,EAEL,iCAAiC,EAClC,MAAM,mEAAmE,CAAC;AAI3E,MAAM,MAAM,4CAA4C,GAAG,WAAW,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH
|
|
1
|
+
{"version":3,"file":"toggle-button-vertical-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAmB,cAAc,EAAC,MAAM,KAAK,CAAC;AAKhE,OAAO,EAEL,iCAAiC,EAClC,MAAM,mEAAmE,CAAC;AAI3E,MAAM,MAAM,4CAA4C,GAAG,WAAW,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC1D;;;;OAIG;IACuB,KAAK,SAAM;IAErC;;;;OAIG;IACuB,IAAI,oCAA6C;IAE3E;;;;OAIG;IACwB,QAAQ,UAAS;IAE5C;;;;;;;;OAQG;IACwB,mBAAmB,UAAS;IAEvD;;;;;;OAMG;IACuC,QAAQ,UAAS;IAG3D,OAAO,CAAC,OAAO,CAA6C;IAE5D,OAAO,CAAC,uBAAuB,CAG3B;IAEJ,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,eAAe;cAoDJ,YAAY,CAAC,OAAO,EAAE,cAAc;IAmDvD,OAAO,CAAC,0BAA0B;IAczB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA0BzC,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAgBlD,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,gBAAgB;IAKf,MAAM;IAiBf,OAAgB,MAAM,0BAAoB;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kCAAkC,EAAE,4BAA4B,CAAC;KAClE;CACF"}
|