@ni/nimble-components 35.7.1 → 35.9.0
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/dist/all-components-bundle.js +31 -2
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3844 -3842
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +171 -154
- package/dist/custom-elements.md +35 -33
- package/dist/esm/checkbox/index.d.ts +6 -0
- package/dist/esm/checkbox/index.js +12 -0
- package/dist/esm/checkbox/index.js.map +1 -1
- package/dist/esm/checkbox/styles.js +3 -2
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/icons/all-icons.d.ts +1 -0
- package/dist/esm/icons/all-icons.js +1 -0
- package/dist/esm/icons/all-icons.js.map +1 -1
- package/dist/esm/icons/sparkles-nested/index.d.ts +13 -0
- package/dist/esm/icons/sparkles-nested/index.js +15 -0
- package/dist/esm/icons/sparkles-nested/index.js.map +1 -0
- package/package.json +2 -2
|
@@ -1532,6 +1532,15 @@
|
|
|
1532
1532
|
},
|
|
1533
1533
|
"privacy": "public"
|
|
1534
1534
|
},
|
|
1535
|
+
{
|
|
1536
|
+
"kind": "field",
|
|
1537
|
+
"name": "appearanceIndeterminate",
|
|
1538
|
+
"type": {
|
|
1539
|
+
"text": "boolean"
|
|
1540
|
+
},
|
|
1541
|
+
"privacy": "public",
|
|
1542
|
+
"default": "false"
|
|
1543
|
+
},
|
|
1535
1544
|
{
|
|
1536
1545
|
"kind": "field",
|
|
1537
1546
|
"name": "errorText",
|
|
@@ -1579,6 +1588,14 @@
|
|
|
1579
1588
|
"text": "number"
|
|
1580
1589
|
},
|
|
1581
1590
|
"fieldName": "tabIndex"
|
|
1591
|
+
},
|
|
1592
|
+
{
|
|
1593
|
+
"name": "appearance-indeterminate",
|
|
1594
|
+
"type": {
|
|
1595
|
+
"text": "boolean"
|
|
1596
|
+
},
|
|
1597
|
+
"default": "false",
|
|
1598
|
+
"fieldName": "appearanceIndeterminate"
|
|
1582
1599
|
}
|
|
1583
1600
|
],
|
|
1584
1601
|
"mixins": [
|
|
@@ -10912,160 +10929,6 @@
|
|
|
10912
10929
|
"declarations": [],
|
|
10913
10930
|
"exports": []
|
|
10914
10931
|
},
|
|
10915
|
-
{
|
|
10916
|
-
"kind": "javascript-module",
|
|
10917
|
-
"path": "src/rich-text/mention-listbox/index.ts",
|
|
10918
|
-
"declarations": [
|
|
10919
|
-
{
|
|
10920
|
-
"kind": "class",
|
|
10921
|
-
"description": "A rich text mention listbox which acts as a popup for \"@mention\" support in editor",
|
|
10922
|
-
"name": "RichTextMentionListbox",
|
|
10923
|
-
"members": [
|
|
10924
|
-
{
|
|
10925
|
-
"kind": "field",
|
|
10926
|
-
"name": "anchorElement",
|
|
10927
|
-
"type": {
|
|
10928
|
-
"text": "HTMLElement | undefined"
|
|
10929
|
-
},
|
|
10930
|
-
"privacy": "private"
|
|
10931
|
-
},
|
|
10932
|
-
{
|
|
10933
|
-
"kind": "field",
|
|
10934
|
-
"name": "regionNotifier",
|
|
10935
|
-
"type": {
|
|
10936
|
-
"text": "Notifier | undefined"
|
|
10937
|
-
},
|
|
10938
|
-
"privacy": "private"
|
|
10939
|
-
},
|
|
10940
|
-
{
|
|
10941
|
-
"kind": "field",
|
|
10942
|
-
"name": "anchorElementIntersectionObserver",
|
|
10943
|
-
"type": {
|
|
10944
|
-
"text": "IntersectionObserver"
|
|
10945
|
-
},
|
|
10946
|
-
"privacy": "private",
|
|
10947
|
-
"readonly": true,
|
|
10948
|
-
"default": "new IntersectionObserver( entries => { if (!entries[0]?.isIntersecting) { this.setOpen(false); } }, { threshold: 1.0, root: document } )"
|
|
10949
|
-
},
|
|
10950
|
-
{
|
|
10951
|
-
"kind": "method",
|
|
10952
|
-
"name": "close",
|
|
10953
|
-
"privacy": "public",
|
|
10954
|
-
"return": {
|
|
10955
|
-
"type": {
|
|
10956
|
-
"text": "void"
|
|
10957
|
-
}
|
|
10958
|
-
}
|
|
10959
|
-
},
|
|
10960
|
-
{
|
|
10961
|
-
"kind": "field",
|
|
10962
|
-
"name": "options",
|
|
10963
|
-
"type": {
|
|
10964
|
-
"text": "ListboxOption[]"
|
|
10965
|
-
},
|
|
10966
|
-
"privacy": "public",
|
|
10967
|
-
"description": "The list of options."
|
|
10968
|
-
},
|
|
10969
|
-
{
|
|
10970
|
-
"kind": "method",
|
|
10971
|
-
"name": "show",
|
|
10972
|
-
"privacy": "public",
|
|
10973
|
-
"return": {
|
|
10974
|
-
"type": {
|
|
10975
|
-
"text": "void"
|
|
10976
|
-
}
|
|
10977
|
-
},
|
|
10978
|
-
"parameters": [
|
|
10979
|
-
{
|
|
10980
|
-
"name": "options",
|
|
10981
|
-
"type": {
|
|
10982
|
-
"text": "MentionListboxShowOptions"
|
|
10983
|
-
}
|
|
10984
|
-
}
|
|
10985
|
-
],
|
|
10986
|
-
"description": "Triggers when the mention plugin is activated upon pressing the `key`"
|
|
10987
|
-
},
|
|
10988
|
-
{
|
|
10989
|
-
"kind": "method",
|
|
10990
|
-
"name": "keydownHandler",
|
|
10991
|
-
"privacy": "public",
|
|
10992
|
-
"return": {
|
|
10993
|
-
"type": {
|
|
10994
|
-
"text": "boolean"
|
|
10995
|
-
}
|
|
10996
|
-
},
|
|
10997
|
-
"parameters": [
|
|
10998
|
-
{
|
|
10999
|
-
"name": "event",
|
|
11000
|
-
"type": {
|
|
11001
|
-
"text": "KeyboardEvent"
|
|
11002
|
-
}
|
|
11003
|
-
},
|
|
11004
|
-
{
|
|
11005
|
-
"description": "the keyboard event",
|
|
11006
|
-
"name": "e"
|
|
11007
|
-
}
|
|
11008
|
-
],
|
|
11009
|
-
"description": "Handle keydown actions for listbox navigation and selection."
|
|
11010
|
-
},
|
|
11011
|
-
{
|
|
11012
|
-
"kind": "method",
|
|
11013
|
-
"name": "setOpen",
|
|
11014
|
-
"privacy": "private",
|
|
11015
|
-
"return": {
|
|
11016
|
-
"type": {
|
|
11017
|
-
"text": "void"
|
|
11018
|
-
}
|
|
11019
|
-
},
|
|
11020
|
-
"parameters": [
|
|
11021
|
-
{
|
|
11022
|
-
"name": "value",
|
|
11023
|
-
"type": {
|
|
11024
|
-
"text": "boolean"
|
|
11025
|
-
}
|
|
11026
|
-
}
|
|
11027
|
-
]
|
|
11028
|
-
}
|
|
11029
|
-
],
|
|
11030
|
-
"superclass": {
|
|
11031
|
-
"name": "FoundationListbox",
|
|
11032
|
-
"package": "@ni/fast-foundation"
|
|
11033
|
-
}
|
|
11034
|
-
},
|
|
11035
|
-
{
|
|
11036
|
-
"kind": "variable",
|
|
11037
|
-
"name": "richTextMentionListboxTag",
|
|
11038
|
-
"type": {
|
|
11039
|
-
"text": "string"
|
|
11040
|
-
},
|
|
11041
|
-
"default": "'nimble-rich-text-mention-listbox'"
|
|
11042
|
-
}
|
|
11043
|
-
],
|
|
11044
|
-
"exports": [
|
|
11045
|
-
{
|
|
11046
|
-
"kind": "js",
|
|
11047
|
-
"name": "RichTextMentionListbox",
|
|
11048
|
-
"declaration": {
|
|
11049
|
-
"name": "RichTextMentionListbox",
|
|
11050
|
-
"module": "src/rich-text/mention-listbox/index.ts"
|
|
11051
|
-
}
|
|
11052
|
-
},
|
|
11053
|
-
{
|
|
11054
|
-
"kind": "js",
|
|
11055
|
-
"name": "richTextMentionListboxTag",
|
|
11056
|
-
"declaration": {
|
|
11057
|
-
"name": "richTextMentionListboxTag",
|
|
11058
|
-
"module": "src/rich-text/mention-listbox/index.ts"
|
|
11059
|
-
}
|
|
11060
|
-
}
|
|
11061
|
-
]
|
|
11062
|
-
},
|
|
11063
|
-
{
|
|
11064
|
-
"kind": "javascript-module",
|
|
11065
|
-
"path": "src/rich-text/mention-listbox/types.ts",
|
|
11066
|
-
"declarations": [],
|
|
11067
|
-
"exports": []
|
|
11068
|
-
},
|
|
11069
10932
|
{
|
|
11070
10933
|
"kind": "javascript-module",
|
|
11071
10934
|
"path": "src/rich-text/editor/index.ts",
|
|
@@ -11791,6 +11654,160 @@
|
|
|
11791
11654
|
}
|
|
11792
11655
|
]
|
|
11793
11656
|
},
|
|
11657
|
+
{
|
|
11658
|
+
"kind": "javascript-module",
|
|
11659
|
+
"path": "src/rich-text/mention-listbox/index.ts",
|
|
11660
|
+
"declarations": [
|
|
11661
|
+
{
|
|
11662
|
+
"kind": "class",
|
|
11663
|
+
"description": "A rich text mention listbox which acts as a popup for \"@mention\" support in editor",
|
|
11664
|
+
"name": "RichTextMentionListbox",
|
|
11665
|
+
"members": [
|
|
11666
|
+
{
|
|
11667
|
+
"kind": "field",
|
|
11668
|
+
"name": "anchorElement",
|
|
11669
|
+
"type": {
|
|
11670
|
+
"text": "HTMLElement | undefined"
|
|
11671
|
+
},
|
|
11672
|
+
"privacy": "private"
|
|
11673
|
+
},
|
|
11674
|
+
{
|
|
11675
|
+
"kind": "field",
|
|
11676
|
+
"name": "regionNotifier",
|
|
11677
|
+
"type": {
|
|
11678
|
+
"text": "Notifier | undefined"
|
|
11679
|
+
},
|
|
11680
|
+
"privacy": "private"
|
|
11681
|
+
},
|
|
11682
|
+
{
|
|
11683
|
+
"kind": "field",
|
|
11684
|
+
"name": "anchorElementIntersectionObserver",
|
|
11685
|
+
"type": {
|
|
11686
|
+
"text": "IntersectionObserver"
|
|
11687
|
+
},
|
|
11688
|
+
"privacy": "private",
|
|
11689
|
+
"readonly": true,
|
|
11690
|
+
"default": "new IntersectionObserver( entries => { if (!entries[0]?.isIntersecting) { this.setOpen(false); } }, { threshold: 1.0, root: document } )"
|
|
11691
|
+
},
|
|
11692
|
+
{
|
|
11693
|
+
"kind": "method",
|
|
11694
|
+
"name": "close",
|
|
11695
|
+
"privacy": "public",
|
|
11696
|
+
"return": {
|
|
11697
|
+
"type": {
|
|
11698
|
+
"text": "void"
|
|
11699
|
+
}
|
|
11700
|
+
}
|
|
11701
|
+
},
|
|
11702
|
+
{
|
|
11703
|
+
"kind": "field",
|
|
11704
|
+
"name": "options",
|
|
11705
|
+
"type": {
|
|
11706
|
+
"text": "ListboxOption[]"
|
|
11707
|
+
},
|
|
11708
|
+
"privacy": "public",
|
|
11709
|
+
"description": "The list of options."
|
|
11710
|
+
},
|
|
11711
|
+
{
|
|
11712
|
+
"kind": "method",
|
|
11713
|
+
"name": "show",
|
|
11714
|
+
"privacy": "public",
|
|
11715
|
+
"return": {
|
|
11716
|
+
"type": {
|
|
11717
|
+
"text": "void"
|
|
11718
|
+
}
|
|
11719
|
+
},
|
|
11720
|
+
"parameters": [
|
|
11721
|
+
{
|
|
11722
|
+
"name": "options",
|
|
11723
|
+
"type": {
|
|
11724
|
+
"text": "MentionListboxShowOptions"
|
|
11725
|
+
}
|
|
11726
|
+
}
|
|
11727
|
+
],
|
|
11728
|
+
"description": "Triggers when the mention plugin is activated upon pressing the `key`"
|
|
11729
|
+
},
|
|
11730
|
+
{
|
|
11731
|
+
"kind": "method",
|
|
11732
|
+
"name": "keydownHandler",
|
|
11733
|
+
"privacy": "public",
|
|
11734
|
+
"return": {
|
|
11735
|
+
"type": {
|
|
11736
|
+
"text": "boolean"
|
|
11737
|
+
}
|
|
11738
|
+
},
|
|
11739
|
+
"parameters": [
|
|
11740
|
+
{
|
|
11741
|
+
"name": "event",
|
|
11742
|
+
"type": {
|
|
11743
|
+
"text": "KeyboardEvent"
|
|
11744
|
+
}
|
|
11745
|
+
},
|
|
11746
|
+
{
|
|
11747
|
+
"description": "the keyboard event",
|
|
11748
|
+
"name": "e"
|
|
11749
|
+
}
|
|
11750
|
+
],
|
|
11751
|
+
"description": "Handle keydown actions for listbox navigation and selection."
|
|
11752
|
+
},
|
|
11753
|
+
{
|
|
11754
|
+
"kind": "method",
|
|
11755
|
+
"name": "setOpen",
|
|
11756
|
+
"privacy": "private",
|
|
11757
|
+
"return": {
|
|
11758
|
+
"type": {
|
|
11759
|
+
"text": "void"
|
|
11760
|
+
}
|
|
11761
|
+
},
|
|
11762
|
+
"parameters": [
|
|
11763
|
+
{
|
|
11764
|
+
"name": "value",
|
|
11765
|
+
"type": {
|
|
11766
|
+
"text": "boolean"
|
|
11767
|
+
}
|
|
11768
|
+
}
|
|
11769
|
+
]
|
|
11770
|
+
}
|
|
11771
|
+
],
|
|
11772
|
+
"superclass": {
|
|
11773
|
+
"name": "FoundationListbox",
|
|
11774
|
+
"package": "@ni/fast-foundation"
|
|
11775
|
+
}
|
|
11776
|
+
},
|
|
11777
|
+
{
|
|
11778
|
+
"kind": "variable",
|
|
11779
|
+
"name": "richTextMentionListboxTag",
|
|
11780
|
+
"type": {
|
|
11781
|
+
"text": "string"
|
|
11782
|
+
},
|
|
11783
|
+
"default": "'nimble-rich-text-mention-listbox'"
|
|
11784
|
+
}
|
|
11785
|
+
],
|
|
11786
|
+
"exports": [
|
|
11787
|
+
{
|
|
11788
|
+
"kind": "js",
|
|
11789
|
+
"name": "RichTextMentionListbox",
|
|
11790
|
+
"declaration": {
|
|
11791
|
+
"name": "RichTextMentionListbox",
|
|
11792
|
+
"module": "src/rich-text/mention-listbox/index.ts"
|
|
11793
|
+
}
|
|
11794
|
+
},
|
|
11795
|
+
{
|
|
11796
|
+
"kind": "js",
|
|
11797
|
+
"name": "richTextMentionListboxTag",
|
|
11798
|
+
"declaration": {
|
|
11799
|
+
"name": "richTextMentionListboxTag",
|
|
11800
|
+
"module": "src/rich-text/mention-listbox/index.ts"
|
|
11801
|
+
}
|
|
11802
|
+
}
|
|
11803
|
+
]
|
|
11804
|
+
},
|
|
11805
|
+
{
|
|
11806
|
+
"kind": "javascript-module",
|
|
11807
|
+
"path": "src/rich-text/mention-listbox/types.ts",
|
|
11808
|
+
"declarations": [],
|
|
11809
|
+
"exports": []
|
|
11810
|
+
},
|
|
11794
11811
|
{
|
|
11795
11812
|
"kind": "javascript-module",
|
|
11796
11813
|
"path": "src/rich-text/viewer/index.ts",
|
package/dist/custom-elements.md
CHANGED
|
@@ -343,18 +343,20 @@
|
|
|
343
343
|
|
|
344
344
|
### Fields
|
|
345
345
|
|
|
346
|
-
| Name
|
|
347
|
-
|
|
|
348
|
-
| `tabIndex`
|
|
349
|
-
| `
|
|
350
|
-
| `
|
|
351
|
-
| `
|
|
346
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
347
|
+
| ------------------------- | ------- | --------------------- | ------- | --------------------------------------------------------------------------------- | ----------------- |
|
|
348
|
+
| `tabIndex` | public | `number` | | | |
|
|
349
|
+
| `appearanceIndeterminate` | public | `boolean` | `false` | | |
|
|
350
|
+
| `errorText` | public | `string \| undefined` | | The error text that will be displayed when a component is in the error appearance | mixinErrorPattern |
|
|
351
|
+
| `errorVisible` | public | `boolean` | `false` | | mixinErrorPattern |
|
|
352
|
+
| `errorHasOverflow` | public | `boolean` | `false` | | mixinErrorPattern |
|
|
352
353
|
|
|
353
354
|
### Attributes
|
|
354
355
|
|
|
355
|
-
| Name
|
|
356
|
-
|
|
|
357
|
-
| `tabindex`
|
|
356
|
+
| Name | Field | Inherited From |
|
|
357
|
+
| -------------------------- | ----------------------- | -------------- |
|
|
358
|
+
| `tabindex` | tabIndex | |
|
|
359
|
+
| `appearance-indeterminate` | appearanceIndeterminate | |
|
|
358
360
|
|
|
359
361
|
<hr/>
|
|
360
362
|
|
|
@@ -1569,30 +1571,6 @@
|
|
|
1569
1571
|
|
|
1570
1572
|
<hr/>
|
|
1571
1573
|
|
|
1572
|
-
## class: `RichTextMentionListbox`
|
|
1573
|
-
|
|
1574
|
-
### Superclass
|
|
1575
|
-
|
|
1576
|
-
| Name | Module | Package |
|
|
1577
|
-
| ------------------- | ------ | ------------------- |
|
|
1578
|
-
| `FoundationListbox` | | @ni/fast-foundation |
|
|
1579
|
-
|
|
1580
|
-
### Fields
|
|
1581
|
-
|
|
1582
|
-
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
1583
|
-
| --------- | ------- | ----------------- | ------- | -------------------- | -------------- |
|
|
1584
|
-
| `options` | public | `ListboxOption[]` | | The list of options. | |
|
|
1585
|
-
|
|
1586
|
-
### Methods
|
|
1587
|
-
|
|
1588
|
-
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
1589
|
-
| ---------------- | ------- | ----------------------------------------------------------------------- | ------------------------------------ | --------- | -------------- |
|
|
1590
|
-
| `close` | public | | | `void` | |
|
|
1591
|
-
| `show` | public | Triggers when the mention plugin is activated upon pressing the \`key\` | `options: MentionListboxShowOptions` | `void` | |
|
|
1592
|
-
| `keydownHandler` | public | Handle keydown actions for listbox navigation and selection. | `event: KeyboardEvent, e` | `boolean` | |
|
|
1593
|
-
|
|
1594
|
-
<hr/>
|
|
1595
|
-
|
|
1596
1574
|
## class: `RichTextEditor`
|
|
1597
1575
|
|
|
1598
1576
|
### Superclass
|
|
@@ -1639,6 +1617,30 @@
|
|
|
1639
1617
|
|
|
1640
1618
|
<hr/>
|
|
1641
1619
|
|
|
1620
|
+
## class: `RichTextMentionListbox`
|
|
1621
|
+
|
|
1622
|
+
### Superclass
|
|
1623
|
+
|
|
1624
|
+
| Name | Module | Package |
|
|
1625
|
+
| ------------------- | ------ | ------------------- |
|
|
1626
|
+
| `FoundationListbox` | | @ni/fast-foundation |
|
|
1627
|
+
|
|
1628
|
+
### Fields
|
|
1629
|
+
|
|
1630
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
1631
|
+
| --------- | ------- | ----------------- | ------- | -------------------- | -------------- |
|
|
1632
|
+
| `options` | public | `ListboxOption[]` | | The list of options. | |
|
|
1633
|
+
|
|
1634
|
+
### Methods
|
|
1635
|
+
|
|
1636
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
1637
|
+
| ---------------- | ------- | ----------------------------------------------------------------------- | ------------------------------------ | --------- | -------------- |
|
|
1638
|
+
| `close` | public | | | `void` | |
|
|
1639
|
+
| `show` | public | Triggers when the mention plugin is activated upon pressing the \`key\` | `options: MentionListboxShowOptions` | `void` | |
|
|
1640
|
+
| `keydownHandler` | public | Handle keydown actions for listbox navigation and selection. | `event: KeyboardEvent, e` | `boolean` | |
|
|
1641
|
+
|
|
1642
|
+
<hr/>
|
|
1643
|
+
|
|
1642
1644
|
## class: `RichTextViewer`
|
|
1643
1645
|
|
|
1644
1646
|
### Superclass
|
|
@@ -24,6 +24,12 @@ export declare class Checkbox extends Checkbox_base {
|
|
|
24
24
|
* HTML Attribute: tabindex
|
|
25
25
|
*/
|
|
26
26
|
tabIndex: number;
|
|
27
|
+
/**
|
|
28
|
+
* @public
|
|
29
|
+
* @remarks
|
|
30
|
+
* HTML Attribute: appearance-indeterminate
|
|
31
|
+
*/
|
|
32
|
+
appearanceIndeterminate: boolean;
|
|
27
33
|
/**
|
|
28
34
|
* @internal
|
|
29
35
|
*/
|
|
@@ -9,6 +9,15 @@ import { mixinErrorPattern } from '../patterns/error/types';
|
|
|
9
9
|
* A nimble-styled checkbox control.
|
|
10
10
|
*/
|
|
11
11
|
export class Checkbox extends mixinErrorPattern(FoundationCheckbox) {
|
|
12
|
+
constructor() {
|
|
13
|
+
super(...arguments);
|
|
14
|
+
/**
|
|
15
|
+
* @public
|
|
16
|
+
* @remarks
|
|
17
|
+
* HTML Attribute: appearance-indeterminate
|
|
18
|
+
*/
|
|
19
|
+
this.appearanceIndeterminate = false;
|
|
20
|
+
}
|
|
12
21
|
/**
|
|
13
22
|
* @internal
|
|
14
23
|
*/
|
|
@@ -20,6 +29,9 @@ export class Checkbox extends mixinErrorPattern(FoundationCheckbox) {
|
|
|
20
29
|
__decorate([
|
|
21
30
|
attr({ attribute: 'tabindex', converter: nullableNumberConverter })
|
|
22
31
|
], Checkbox.prototype, "tabIndex", void 0);
|
|
32
|
+
__decorate([
|
|
33
|
+
attr({ attribute: 'appearance-indeterminate', mode: 'boolean' })
|
|
34
|
+
], Checkbox.prototype, "appearanceIndeterminate", void 0);
|
|
23
35
|
const nimbleCheckbox = Checkbox.compose({
|
|
24
36
|
baseName: 'checkbox',
|
|
25
37
|
baseClass: FoundationCheckbox,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAEjC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQ5D;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,iBAAiB,CAAC,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAEjC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQ5D;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,iBAAiB,CAAC,kBAAkB,CAAC;IAAnE;;QASI;;;;WAIG;QAEI,4BAAuB,GAAG,KAAK,CAAC;IAS3C,CAAC;IAPG;;OAEG;IACH,IAAW,gBAAgB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC;IACrD,CAAC;CACJ;AAjBmB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;0CAClC;AAQ3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yDAC1B;AAW3C,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,UAAU,CAAC,IAAI;IACjC,sBAAsB,EAAE,UAAU,CAAC,IAAI;CAC1C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@ni/fast-element';\nimport {\n DesignSystem,\n Checkbox as FoundationCheckbox,\n type CheckboxOptions\n} from '@ni/fast-foundation';\nimport { check16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { mixinErrorPattern } from '../patterns/error/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-checkbox': Checkbox;\n }\n}\n\n/**\n * A nimble-styled checkbox control.\n */\nexport class Checkbox extends mixinErrorPattern(FoundationCheckbox) {\n /**\n * @public\n * @remarks\n * HTML Attribute: tabindex\n */\n @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n public override tabIndex!: number;\n\n /**\n * @public\n * @remarks\n * HTML Attribute: appearance-indeterminate\n */\n @attr({ attribute: 'appearance-indeterminate', mode: 'boolean' })\n public appearanceIndeterminate = false;\n\n /**\n * @internal\n */\n public get resolvedTabindex(): string | undefined {\n const tabIndex = this.tabIndex ?? 0;\n return this.disabled ? undefined : `${tabIndex}`;\n }\n}\n\nconst nimbleCheckbox = Checkbox.compose<CheckboxOptions>({\n baseName: 'checkbox',\n baseClass: FoundationCheckbox,\n template,\n styles,\n checkedIndicator: check16X16.data,\n indeterminateIndicator: minus16X16.data\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());\nexport const checkboxTag = 'nimble-checkbox';\n"]}
|
|
@@ -101,7 +101,7 @@ export const styles = css `
|
|
|
101
101
|
fill: ${borderColor};
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
:host(.checked:not(.indeterminate)) slot[name='checked-indicator'] {
|
|
104
|
+
:host(.checked:not(.indeterminate):not([appearance-indeterminate])) slot[name='checked-indicator'] {
|
|
105
105
|
display: contents;
|
|
106
106
|
}
|
|
107
107
|
|
|
@@ -115,7 +115,8 @@ export const styles = css `
|
|
|
115
115
|
overflow: visible;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
:host(.indeterminate) slot[name='indeterminate-indicator']
|
|
118
|
+
:host(.indeterminate) slot[name='indeterminate-indicator'],
|
|
119
|
+
:host([appearance-indeterminate]) slot[name='indeterminate-indicator'] {
|
|
119
120
|
display: contents;
|
|
120
121
|
}
|
|
121
122
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,kBAAkB,EACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;;UAGd,cAAc;sBACF,aAAa;;;;;;;;;;;;;;;;;8BAiBL,kBAAkB;;;;;;iBAM/B,QAAQ;kBACP,QAAQ;kBACR,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;;;iCAayB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;;iBAM5B,aAAa;wBACN,aAAa;;;;;;;iBAOpB,qBAAqB;;;;;;;;;kBASpB,QAAQ;iBACT,QAAQ;;gBAET,WAAW;;;;;;;;qBAQN,qBAAqB;;;;kBAIxB,QAAQ;iBACT,QAAQ
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,kBAAkB,EACrB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;;UAGd,cAAc;sBACF,aAAa;;;;;;;;;;;;;;;;;8BAiBL,kBAAkB;;;;;;iBAM/B,QAAQ;kBACP,QAAQ;kBACR,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;;;iCAayB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;;iBAM5B,aAAa;wBACN,aAAa;;;;;;;iBAOpB,qBAAqB;;;;;;;;;kBASpB,QAAQ;iBACT,QAAQ;;gBAET,WAAW;;;;;;;;qBAQN,qBAAqB;;;;kBAIxB,QAAQ;iBACT,QAAQ;;;;;;;;;;gBAUT,WAAW;;;;qBAIN,qBAAqB;;;;;;sBAMpB,YAAY;;CAEjC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nimport {\n borderColor,\n borderHoverColor,\n borderRgbPartialColor,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n iconSize,\n borderWidth,\n smallDelay,\n bodyFont,\n smallPadding,\n mediumPadding,\n bodyFontLineHeight\n} from '../theme-provider/design-tokens';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { styles as errorStyles } from '../patterns/error/styles';\n\nexport const styles = css`\n ${display('inline-grid')}\n ${errorStyles}\n\n :host {\n font: ${bodyFont};\n cursor: pointer;\n outline: none;\n ${userSelectNone}\n min-height: ${controlHeight};\n }\n\n :host([disabled]) {\n cursor: default;\n }\n\n .outer-container {\n height: 100%;\n display: flex;\n align-items: center;\n position: relative;\n }\n\n .container {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-rows: ${bodyFontLineHeight} auto;\n align-items: center;\n width: 100%;\n }\n\n .control {\n width: ${iconSize};\n height: ${iconSize};\n border: ${borderWidth} solid ${borderColor};\n padding: 2px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n transition: box-shadow ${smallDelay};\n ${\n /*\n * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).\n * Set it to 0 to ensure the outline is just as high as the control.\n */ ''\n }\n line-height: 0;\n grid-column: 1;\n grid-row: 1;\n }\n\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([disabled]) .control {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n border-color: rgba(${borderRgbPartialColor}, 0.2);\n }\n\n :host(:not([disabled]):not(:active):hover) .control {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n :host(${focusVisible}) .control {\n border-color: ${borderHoverColor};\n outline: 2px solid ${borderHoverColor};\n outline-offset: 1px;\n }\n\n .label {\n font: inherit;\n color: ${bodyFontColor};\n padding-left: ${mediumPadding};\n grid-column: 2;\n grid-row: 1 / span 2;\n cursor: inherit;\n }\n\n :host([disabled]) .label {\n color: ${bodyDisabledFontColor};\n }\n\n slot[name='checked-indicator'],\n slot[name='indeterminate-indicator'] {\n display: none;\n }\n\n slot[name='checked-indicator'] svg {\n height: ${iconSize};\n width: ${iconSize};\n overflow: visible;\n fill: ${borderColor};\n }\n\n :host(.checked:not(.indeterminate):not([appearance-indeterminate])) slot[name='checked-indicator'] {\n display: contents;\n }\n\n :host([disabled]) slot[name='checked-indicator'] svg {\n fill: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n slot[name='indeterminate-indicator'] svg {\n height: ${iconSize};\n width: ${iconSize};\n overflow: visible;\n }\n\n :host(.indeterminate) slot[name='indeterminate-indicator'],\n :host([appearance-indeterminate]) slot[name='indeterminate-indicator'] {\n display: contents;\n }\n\n slot[name='indeterminate-indicator'] svg {\n fill: ${borderColor};\n }\n\n :host([disabled]) slot[name='indeterminate-indicator'] svg {\n fill: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n .error-icon {\n grid-column: 3;\n grid-row: 1;\n margin: 0px ${smallPadding};\n }\n`;\n"]}
|
|
@@ -187,6 +187,7 @@ export { IconSineGraph } from './sine-graph';
|
|
|
187
187
|
export { IconSkipArrow } from './skip-arrow';
|
|
188
188
|
export { IconSparkleSwirls } from './sparkle-swirls';
|
|
189
189
|
export { IconSparkles } from './sparkles';
|
|
190
|
+
export { IconSparklesNested } from './sparkles-nested';
|
|
190
191
|
export { IconSpinner } from './spinner';
|
|
191
192
|
export { IconSquareCheck } from './square-check';
|
|
192
193
|
export { IconSquareListCog } from './square-list-cog';
|
|
@@ -189,6 +189,7 @@ export { IconSineGraph } from './sine-graph';
|
|
|
189
189
|
export { IconSkipArrow } from './skip-arrow';
|
|
190
190
|
export { IconSparkleSwirls } from './sparkle-swirls';
|
|
191
191
|
export { IconSparkles } from './sparkles';
|
|
192
|
+
export { IconSparklesNested } from './sparkles-nested';
|
|
192
193
|
export { IconSpinner } from './spinner';
|
|
193
194
|
export { IconSquareCheck } from './square-check';
|
|
194
195
|
export { IconSquareListCog } from './square-list-cog';
|