@kubex/zinc 1.1.181 → 1.1.182
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/custom-elements.json +711 -711
- package/dist/vscode.html-custom-data.json +74 -74
- package/dist/web-types.json +189 -189
- package/dist/zn.d.ts +2 -1
- package/dist/zn.min.js +72 -72
- package/docs/pages/components/content-block.md +47 -0
- package/package.json +1 -1
- package/src/components/content-block/content-block.component.ts +21 -7
- package/src/components/content-block/content-block.scss +36 -0
- package/src/components/content-block/content-block.test.ts +25 -0
- package/src/utilities/sanitize-html.ts +11 -2
|
@@ -6525,289 +6525,264 @@
|
|
|
6525
6525
|
},
|
|
6526
6526
|
{
|
|
6527
6527
|
"kind": "javascript-module",
|
|
6528
|
-
"path": "components/
|
|
6528
|
+
"path": "components/cols/cols.js",
|
|
6529
6529
|
"declarations": [
|
|
6530
6530
|
{
|
|
6531
6531
|
"kind": "class",
|
|
6532
6532
|
"description": "",
|
|
6533
|
-
"name": "
|
|
6534
|
-
"
|
|
6533
|
+
"name": "ZnCols",
|
|
6534
|
+
"cssProperties": [
|
|
6535
6535
|
{
|
|
6536
|
-
"description": "
|
|
6537
|
-
"name": "
|
|
6538
|
-
}
|
|
6536
|
+
"description": "An example CSS custom property.",
|
|
6537
|
+
"name": "--example"
|
|
6538
|
+
}
|
|
6539
|
+
],
|
|
6540
|
+
"cssParts": [
|
|
6539
6541
|
{
|
|
6540
|
-
"description": "The
|
|
6541
|
-
"name": "
|
|
6542
|
-
}
|
|
6542
|
+
"description": "The component's base wrapper.",
|
|
6543
|
+
"name": "base"
|
|
6544
|
+
}
|
|
6545
|
+
],
|
|
6546
|
+
"slots": [
|
|
6543
6547
|
{
|
|
6544
|
-
"description": "The
|
|
6545
|
-
"name": "
|
|
6548
|
+
"description": "The default slot.",
|
|
6549
|
+
"name": ""
|
|
6546
6550
|
},
|
|
6547
6551
|
{
|
|
6548
|
-
"description": "
|
|
6549
|
-
"name": "
|
|
6552
|
+
"description": "An example slot.",
|
|
6553
|
+
"name": "example"
|
|
6550
6554
|
}
|
|
6551
6555
|
],
|
|
6552
6556
|
"members": [
|
|
6553
6557
|
{
|
|
6554
6558
|
"kind": "field",
|
|
6555
|
-
"name": "
|
|
6556
|
-
"type": {
|
|
6557
|
-
"text": "object"
|
|
6558
|
-
},
|
|
6559
|
-
"static": true,
|
|
6560
|
-
"default": "{ 'zn-select': ZnSelect, 'zn-option': ZnOption, }"
|
|
6561
|
-
},
|
|
6562
|
-
{
|
|
6563
|
-
"kind": "field",
|
|
6564
|
-
"name": "select",
|
|
6565
|
-
"type": {
|
|
6566
|
-
"text": "ZnSelect"
|
|
6567
|
-
}
|
|
6568
|
-
},
|
|
6569
|
-
{
|
|
6570
|
-
"kind": "field",
|
|
6571
|
-
"name": "name",
|
|
6559
|
+
"name": "layout",
|
|
6572
6560
|
"type": {
|
|
6573
6561
|
"text": "string"
|
|
6574
6562
|
},
|
|
6575
|
-
"
|
|
6576
|
-
"attribute": "
|
|
6563
|
+
"default": "''",
|
|
6564
|
+
"attribute": "layout",
|
|
6565
|
+
"reflects": true
|
|
6577
6566
|
},
|
|
6578
6567
|
{
|
|
6579
6568
|
"kind": "field",
|
|
6580
|
-
"name": "
|
|
6569
|
+
"name": "stackAt",
|
|
6581
6570
|
"type": {
|
|
6582
6571
|
"text": "string"
|
|
6583
6572
|
},
|
|
6584
6573
|
"default": "''",
|
|
6585
|
-
"description": "
|
|
6586
|
-
"attribute": "
|
|
6574
|
+
"description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.",
|
|
6575
|
+
"attribute": "stack-at",
|
|
6576
|
+
"reflects": true
|
|
6587
6577
|
},
|
|
6588
6578
|
{
|
|
6589
6579
|
"kind": "field",
|
|
6590
|
-
"name": "
|
|
6580
|
+
"name": "maxColumns",
|
|
6591
6581
|
"type": {
|
|
6592
|
-
"text": "
|
|
6582
|
+
"text": "number"
|
|
6593
6583
|
},
|
|
6594
|
-
"default": "
|
|
6595
|
-
"
|
|
6596
|
-
"
|
|
6584
|
+
"default": "0",
|
|
6585
|
+
"attribute": "mc",
|
|
6586
|
+
"reflects": true
|
|
6597
6587
|
},
|
|
6598
6588
|
{
|
|
6599
6589
|
"kind": "field",
|
|
6600
|
-
"name": "
|
|
6590
|
+
"name": "noGap",
|
|
6601
6591
|
"type": {
|
|
6602
|
-
"text": "
|
|
6592
|
+
"text": "boolean"
|
|
6603
6593
|
},
|
|
6604
|
-
"default": "
|
|
6605
|
-
"
|
|
6606
|
-
"attribute": "help-text"
|
|
6594
|
+
"default": "false",
|
|
6595
|
+
"attribute": "no-gap"
|
|
6607
6596
|
},
|
|
6608
6597
|
{
|
|
6609
6598
|
"kind": "field",
|
|
6610
|
-
"name": "
|
|
6599
|
+
"name": "border",
|
|
6611
6600
|
"type": {
|
|
6612
6601
|
"text": "boolean"
|
|
6613
6602
|
},
|
|
6614
6603
|
"default": "false",
|
|
6615
|
-
"
|
|
6616
|
-
"attribute": "disabled",
|
|
6617
|
-
"reflects": true
|
|
6604
|
+
"attribute": "border"
|
|
6618
6605
|
},
|
|
6619
6606
|
{
|
|
6620
6607
|
"kind": "field",
|
|
6621
|
-
"name": "
|
|
6608
|
+
"name": "pad",
|
|
6622
6609
|
"type": {
|
|
6623
6610
|
"text": "boolean"
|
|
6624
6611
|
},
|
|
6625
|
-
"
|
|
6626
|
-
"description": "Makes the select a required field.",
|
|
6627
|
-
"attribute": "required",
|
|
6628
|
-
"reflects": true
|
|
6612
|
+
"attribute": "pad"
|
|
6629
6613
|
},
|
|
6630
6614
|
{
|
|
6631
6615
|
"kind": "field",
|
|
6632
|
-
"name": "
|
|
6616
|
+
"name": "divide",
|
|
6633
6617
|
"type": {
|
|
6634
6618
|
"text": "boolean"
|
|
6635
6619
|
},
|
|
6636
6620
|
"default": "false",
|
|
6637
|
-
"
|
|
6638
|
-
"attribute": "clearable"
|
|
6621
|
+
"attribute": "divide"
|
|
6639
6622
|
},
|
|
6640
6623
|
{
|
|
6641
6624
|
"kind": "field",
|
|
6642
|
-
"name": "
|
|
6643
|
-
"
|
|
6644
|
-
|
|
6645
|
-
|
|
6625
|
+
"name": "padX",
|
|
6626
|
+
"type": {
|
|
6627
|
+
"text": "boolean"
|
|
6628
|
+
},
|
|
6629
|
+
"attribute": "pad-x"
|
|
6646
6630
|
},
|
|
6647
6631
|
{
|
|
6648
6632
|
"kind": "field",
|
|
6649
|
-
"name": "
|
|
6633
|
+
"name": "padY",
|
|
6650
6634
|
"type": {
|
|
6651
|
-
"text": "
|
|
6635
|
+
"text": "boolean"
|
|
6652
6636
|
},
|
|
6653
|
-
"
|
|
6637
|
+
"attribute": "pad-y"
|
|
6654
6638
|
},
|
|
6655
6639
|
{
|
|
6656
6640
|
"kind": "field",
|
|
6657
|
-
"name": "
|
|
6641
|
+
"name": "childObserver",
|
|
6658
6642
|
"type": {
|
|
6659
|
-
"text": "
|
|
6643
|
+
"text": "MutationObserver"
|
|
6660
6644
|
},
|
|
6661
|
-
"
|
|
6662
|
-
|
|
6663
|
-
|
|
6664
|
-
"kind": "method",
|
|
6665
|
-
"name": "checkValidity",
|
|
6666
|
-
"return": {
|
|
6667
|
-
"type": {
|
|
6668
|
-
"text": "boolean"
|
|
6669
|
-
}
|
|
6670
|
-
}
|
|
6645
|
+
"privacy": "private",
|
|
6646
|
+
"readonly": true,
|
|
6647
|
+
"default": "new MutationObserver(() => this.requestUpdate())"
|
|
6671
6648
|
},
|
|
6672
6649
|
{
|
|
6673
6650
|
"kind": "method",
|
|
6674
|
-
"name": "
|
|
6651
|
+
"name": "stackOrder",
|
|
6652
|
+
"privacy": "private",
|
|
6675
6653
|
"return": {
|
|
6676
6654
|
"type": {
|
|
6677
|
-
"text": "
|
|
6655
|
+
"text": "number | null"
|
|
6678
6656
|
}
|
|
6679
|
-
}
|
|
6680
|
-
|
|
6681
|
-
|
|
6682
|
-
|
|
6683
|
-
|
|
6684
|
-
|
|
6685
|
-
|
|
6686
|
-
"text": "boolean"
|
|
6657
|
+
},
|
|
6658
|
+
"parameters": [
|
|
6659
|
+
{
|
|
6660
|
+
"name": "element",
|
|
6661
|
+
"type": {
|
|
6662
|
+
"text": "Element"
|
|
6663
|
+
}
|
|
6687
6664
|
}
|
|
6688
|
-
|
|
6665
|
+
],
|
|
6666
|
+
"description": "Reads the `stack-order` attribute of an element, returning null when it does not declare one."
|
|
6689
6667
|
},
|
|
6690
6668
|
{
|
|
6691
6669
|
"kind": "method",
|
|
6692
|
-
"name": "
|
|
6670
|
+
"name": "applyStackOrder",
|
|
6671
|
+
"privacy": "private",
|
|
6693
6672
|
"return": {
|
|
6694
6673
|
"type": {
|
|
6695
|
-
"text": "
|
|
6674
|
+
"text": "number | null"
|
|
6696
6675
|
}
|
|
6697
6676
|
},
|
|
6698
6677
|
"parameters": [
|
|
6699
6678
|
{
|
|
6700
|
-
"name": "
|
|
6679
|
+
"name": "element",
|
|
6701
6680
|
"type": {
|
|
6702
|
-
"text": "
|
|
6681
|
+
"text": "HTMLElement"
|
|
6682
|
+
}
|
|
6683
|
+
},
|
|
6684
|
+
{
|
|
6685
|
+
"name": "promoted",
|
|
6686
|
+
"type": {
|
|
6687
|
+
"text": "boolean"
|
|
6703
6688
|
}
|
|
6704
6689
|
}
|
|
6705
|
-
]
|
|
6706
|
-
|
|
6707
|
-
{
|
|
6708
|
-
"kind": "method",
|
|
6709
|
-
"name": "handleValueChange"
|
|
6710
|
-
},
|
|
6711
|
-
{
|
|
6712
|
-
"kind": "field",
|
|
6713
|
-
"name": "handleInput",
|
|
6714
|
-
"privacy": "private"
|
|
6715
|
-
},
|
|
6716
|
-
{
|
|
6717
|
-
"kind": "field",
|
|
6718
|
-
"name": "handleClear",
|
|
6719
|
-
"privacy": "private"
|
|
6690
|
+
],
|
|
6691
|
+
"description": "Applies the declared stack order to an element. `--zn-stacked` is 0 until the container\nquery in our stylesheet flips it to 1, so ordering only kicks in once stacked."
|
|
6720
6692
|
}
|
|
6721
6693
|
],
|
|
6722
6694
|
"events": [
|
|
6723
6695
|
{
|
|
6724
|
-
"description": "Emitted
|
|
6725
|
-
"name": "zn-
|
|
6726
|
-
},
|
|
6727
|
-
{
|
|
6728
|
-
"description": "Emitted when the clear button is activated.",
|
|
6729
|
-
"name": "zn-clear"
|
|
6696
|
+
"description": "Emitted as an example.",
|
|
6697
|
+
"name": "zn-event-name"
|
|
6730
6698
|
}
|
|
6731
6699
|
],
|
|
6732
6700
|
"attributes": [
|
|
6733
6701
|
{
|
|
6734
|
-
"name": "
|
|
6702
|
+
"name": "layout",
|
|
6735
6703
|
"type": {
|
|
6736
6704
|
"text": "string"
|
|
6737
6705
|
},
|
|
6738
|
-
"
|
|
6739
|
-
"fieldName": "
|
|
6706
|
+
"default": "''",
|
|
6707
|
+
"fieldName": "layout"
|
|
6740
6708
|
},
|
|
6741
6709
|
{
|
|
6742
|
-
"name": "
|
|
6710
|
+
"name": "stack-at",
|
|
6743
6711
|
"type": {
|
|
6744
6712
|
"text": "string"
|
|
6745
6713
|
},
|
|
6746
6714
|
"default": "''",
|
|
6747
|
-
"description": "
|
|
6748
|
-
"fieldName": "
|
|
6715
|
+
"description": "Container width the columns collapse to a single column below, as one of the named zinc\ncontainer sizes (sm, smp, ph, md, lg, hd, 3k, 4k). Defaults to `lg` when a child declares\n`stack-order` or `stack-split`, otherwise the columns never explicitly stack.",
|
|
6716
|
+
"fieldName": "stackAt"
|
|
6749
6717
|
},
|
|
6750
6718
|
{
|
|
6751
|
-
"name": "
|
|
6719
|
+
"name": "mc",
|
|
6752
6720
|
"type": {
|
|
6753
|
-
"text": "
|
|
6721
|
+
"text": "number"
|
|
6754
6722
|
},
|
|
6755
|
-
"default": "
|
|
6756
|
-
"
|
|
6757
|
-
"fieldName": "label"
|
|
6723
|
+
"default": "0",
|
|
6724
|
+
"fieldName": "maxColumns"
|
|
6758
6725
|
},
|
|
6759
6726
|
{
|
|
6760
|
-
"name": "
|
|
6727
|
+
"name": "no-gap",
|
|
6761
6728
|
"type": {
|
|
6762
|
-
"text": "
|
|
6729
|
+
"text": "boolean"
|
|
6763
6730
|
},
|
|
6764
|
-
"default": "
|
|
6765
|
-
"
|
|
6766
|
-
"fieldName": "helpText"
|
|
6731
|
+
"default": "false",
|
|
6732
|
+
"fieldName": "noGap"
|
|
6767
6733
|
},
|
|
6768
6734
|
{
|
|
6769
|
-
"name": "
|
|
6735
|
+
"name": "border",
|
|
6770
6736
|
"type": {
|
|
6771
6737
|
"text": "boolean"
|
|
6772
6738
|
},
|
|
6773
6739
|
"default": "false",
|
|
6774
|
-
"
|
|
6775
|
-
"fieldName": "disabled"
|
|
6740
|
+
"fieldName": "border"
|
|
6776
6741
|
},
|
|
6777
6742
|
{
|
|
6778
|
-
"name": "
|
|
6743
|
+
"name": "pad",
|
|
6779
6744
|
"type": {
|
|
6780
6745
|
"text": "boolean"
|
|
6781
6746
|
},
|
|
6782
|
-
"
|
|
6783
|
-
"description": "Makes the select a required field.",
|
|
6784
|
-
"fieldName": "required"
|
|
6747
|
+
"fieldName": "pad"
|
|
6785
6748
|
},
|
|
6786
6749
|
{
|
|
6787
|
-
"name": "
|
|
6750
|
+
"name": "divide",
|
|
6788
6751
|
"type": {
|
|
6789
6752
|
"text": "boolean"
|
|
6790
6753
|
},
|
|
6791
6754
|
"default": "false",
|
|
6792
|
-
"
|
|
6793
|
-
|
|
6755
|
+
"fieldName": "divide"
|
|
6756
|
+
},
|
|
6757
|
+
{
|
|
6758
|
+
"name": "pad-x",
|
|
6759
|
+
"type": {
|
|
6760
|
+
"text": "boolean"
|
|
6761
|
+
},
|
|
6762
|
+
"fieldName": "padX"
|
|
6763
|
+
},
|
|
6764
|
+
{
|
|
6765
|
+
"name": "pad-y",
|
|
6766
|
+
"type": {
|
|
6767
|
+
"text": "boolean"
|
|
6768
|
+
},
|
|
6769
|
+
"fieldName": "padY"
|
|
6794
6770
|
}
|
|
6795
6771
|
],
|
|
6796
6772
|
"superclass": {
|
|
6797
6773
|
"name": "ZincElement",
|
|
6798
6774
|
"module": "/src/internal/zinc-element"
|
|
6799
6775
|
},
|
|
6800
|
-
"summary": "
|
|
6801
|
-
"tagNameWithoutPrefix": "
|
|
6802
|
-
"tagName": "zn-
|
|
6776
|
+
"summary": "Short summary of the component's intended use.",
|
|
6777
|
+
"tagNameWithoutPrefix": "cols",
|
|
6778
|
+
"tagName": "zn-cols",
|
|
6803
6779
|
"customElement": true,
|
|
6804
|
-
"jsDoc": "/**\n * @summary
|
|
6805
|
-
"documentation": "https://zinc.style/components/
|
|
6780
|
+
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/columns\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
6781
|
+
"documentation": "https://zinc.style/components/columns",
|
|
6806
6782
|
"status": "experimental",
|
|
6807
6783
|
"since": "1.0",
|
|
6808
6784
|
"dependencies": [
|
|
6809
|
-
"zn-
|
|
6810
|
-
"zn-option"
|
|
6785
|
+
"zn-example"
|
|
6811
6786
|
]
|
|
6812
6787
|
}
|
|
6813
6788
|
],
|
|
@@ -6816,272 +6791,297 @@
|
|
|
6816
6791
|
"kind": "js",
|
|
6817
6792
|
"name": "default",
|
|
6818
6793
|
"declaration": {
|
|
6819
|
-
"name": "
|
|
6820
|
-
"module": "components/
|
|
6794
|
+
"name": "ZnCols",
|
|
6795
|
+
"module": "components/cols/cols.js"
|
|
6821
6796
|
}
|
|
6822
6797
|
}
|
|
6823
6798
|
]
|
|
6824
6799
|
},
|
|
6825
6800
|
{
|
|
6826
6801
|
"kind": "javascript-module",
|
|
6827
|
-
"path": "components/
|
|
6802
|
+
"path": "components/color-select/color-select.js",
|
|
6828
6803
|
"declarations": [
|
|
6829
6804
|
{
|
|
6830
6805
|
"kind": "class",
|
|
6831
6806
|
"description": "",
|
|
6832
|
-
"name": "
|
|
6833
|
-
"cssProperties": [
|
|
6834
|
-
{
|
|
6835
|
-
"description": "An example CSS custom property.",
|
|
6836
|
-
"name": "--example"
|
|
6837
|
-
}
|
|
6838
|
-
],
|
|
6807
|
+
"name": "ZnColorSelect",
|
|
6839
6808
|
"cssParts": [
|
|
6840
6809
|
{
|
|
6841
|
-
"description": "The
|
|
6842
|
-
"name": "
|
|
6843
|
-
}
|
|
6844
|
-
],
|
|
6845
|
-
"slots": [
|
|
6810
|
+
"description": "The color swatch shown in the closed control.",
|
|
6811
|
+
"name": "swatch"
|
|
6812
|
+
},
|
|
6846
6813
|
{
|
|
6847
|
-
"description": "The
|
|
6848
|
-
"name": ""
|
|
6814
|
+
"description": "The container that wraps the swatch and expand button (forwarded from zn-select).",
|
|
6815
|
+
"name": "combobox"
|
|
6849
6816
|
},
|
|
6850
6817
|
{
|
|
6851
|
-
"description": "
|
|
6852
|
-
"name": "
|
|
6818
|
+
"description": "The help text's wrapper (forwarded from zn-select).",
|
|
6819
|
+
"name": "form-control-help-text"
|
|
6820
|
+
},
|
|
6821
|
+
{
|
|
6822
|
+
"description": "The select's wrapper (forwarded from zn-select).",
|
|
6823
|
+
"name": "form-control-input"
|
|
6853
6824
|
}
|
|
6854
6825
|
],
|
|
6855
6826
|
"members": [
|
|
6856
6827
|
{
|
|
6857
6828
|
"kind": "field",
|
|
6858
|
-
"name": "
|
|
6829
|
+
"name": "dependencies",
|
|
6830
|
+
"type": {
|
|
6831
|
+
"text": "object"
|
|
6832
|
+
},
|
|
6833
|
+
"static": true,
|
|
6834
|
+
"default": "{ 'zn-select': ZnSelect, 'zn-option': ZnOption, }"
|
|
6835
|
+
},
|
|
6836
|
+
{
|
|
6837
|
+
"kind": "field",
|
|
6838
|
+
"name": "select",
|
|
6839
|
+
"type": {
|
|
6840
|
+
"text": "ZnSelect"
|
|
6841
|
+
}
|
|
6842
|
+
},
|
|
6843
|
+
{
|
|
6844
|
+
"kind": "field",
|
|
6845
|
+
"name": "name",
|
|
6859
6846
|
"type": {
|
|
6860
6847
|
"text": "string"
|
|
6861
6848
|
},
|
|
6862
|
-
"
|
|
6863
|
-
"attribute": "
|
|
6864
|
-
"reflects": true
|
|
6849
|
+
"description": "The name of the select. Used for form submission.",
|
|
6850
|
+
"attribute": "name"
|
|
6865
6851
|
},
|
|
6866
6852
|
{
|
|
6867
6853
|
"kind": "field",
|
|
6868
|
-
"name": "
|
|
6854
|
+
"name": "value",
|
|
6869
6855
|
"type": {
|
|
6870
6856
|
"text": "string"
|
|
6871
6857
|
},
|
|
6872
6858
|
"default": "''",
|
|
6873
|
-
"description": "
|
|
6874
|
-
"attribute": "
|
|
6875
|
-
"reflects": true
|
|
6859
|
+
"description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
|
|
6860
|
+
"attribute": "value"
|
|
6876
6861
|
},
|
|
6877
6862
|
{
|
|
6878
6863
|
"kind": "field",
|
|
6879
|
-
"name": "
|
|
6864
|
+
"name": "label",
|
|
6880
6865
|
"type": {
|
|
6881
|
-
"text": "
|
|
6866
|
+
"text": "string"
|
|
6882
6867
|
},
|
|
6883
|
-
"default": "
|
|
6884
|
-
"
|
|
6885
|
-
"
|
|
6868
|
+
"default": "''",
|
|
6869
|
+
"description": "The select's label.",
|
|
6870
|
+
"attribute": "label"
|
|
6886
6871
|
},
|
|
6887
6872
|
{
|
|
6888
6873
|
"kind": "field",
|
|
6889
|
-
"name": "
|
|
6874
|
+
"name": "helpText",
|
|
6890
6875
|
"type": {
|
|
6891
|
-
"text": "
|
|
6876
|
+
"text": "string"
|
|
6892
6877
|
},
|
|
6893
|
-
"default": "
|
|
6894
|
-
"
|
|
6878
|
+
"default": "''",
|
|
6879
|
+
"description": "The select's help text.",
|
|
6880
|
+
"attribute": "help-text"
|
|
6895
6881
|
},
|
|
6896
6882
|
{
|
|
6897
6883
|
"kind": "field",
|
|
6898
|
-
"name": "
|
|
6884
|
+
"name": "disabled",
|
|
6899
6885
|
"type": {
|
|
6900
6886
|
"text": "boolean"
|
|
6901
6887
|
},
|
|
6902
6888
|
"default": "false",
|
|
6903
|
-
"
|
|
6889
|
+
"description": "Disables the select.",
|
|
6890
|
+
"attribute": "disabled",
|
|
6891
|
+
"reflects": true
|
|
6904
6892
|
},
|
|
6905
6893
|
{
|
|
6906
6894
|
"kind": "field",
|
|
6907
|
-
"name": "
|
|
6895
|
+
"name": "required",
|
|
6908
6896
|
"type": {
|
|
6909
6897
|
"text": "boolean"
|
|
6910
6898
|
},
|
|
6911
|
-
"
|
|
6899
|
+
"default": "false",
|
|
6900
|
+
"description": "Makes the select a required field.",
|
|
6901
|
+
"attribute": "required",
|
|
6902
|
+
"reflects": true
|
|
6912
6903
|
},
|
|
6913
6904
|
{
|
|
6914
6905
|
"kind": "field",
|
|
6915
|
-
"name": "
|
|
6906
|
+
"name": "clearable",
|
|
6916
6907
|
"type": {
|
|
6917
6908
|
"text": "boolean"
|
|
6918
6909
|
},
|
|
6919
6910
|
"default": "false",
|
|
6920
|
-
"
|
|
6911
|
+
"description": "Shows a clear button when a color is selected.",
|
|
6912
|
+
"attribute": "clearable"
|
|
6921
6913
|
},
|
|
6922
6914
|
{
|
|
6923
6915
|
"kind": "field",
|
|
6924
|
-
"name": "
|
|
6925
|
-
"
|
|
6926
|
-
|
|
6927
|
-
|
|
6928
|
-
"attribute": "pad-x"
|
|
6916
|
+
"name": "formControlController",
|
|
6917
|
+
"privacy": "private",
|
|
6918
|
+
"readonly": true,
|
|
6919
|
+
"default": "new FormControlController(this)"
|
|
6929
6920
|
},
|
|
6930
6921
|
{
|
|
6931
6922
|
"kind": "field",
|
|
6932
|
-
"name": "
|
|
6923
|
+
"name": "validity",
|
|
6933
6924
|
"type": {
|
|
6934
|
-
"text": "
|
|
6925
|
+
"text": "ValidityState"
|
|
6935
6926
|
},
|
|
6936
|
-
"
|
|
6927
|
+
"readonly": true
|
|
6937
6928
|
},
|
|
6938
6929
|
{
|
|
6939
6930
|
"kind": "field",
|
|
6940
|
-
"name": "
|
|
6931
|
+
"name": "validationMessage",
|
|
6941
6932
|
"type": {
|
|
6942
|
-
"text": "
|
|
6933
|
+
"text": "string"
|
|
6943
6934
|
},
|
|
6944
|
-
"
|
|
6945
|
-
"readonly": true,
|
|
6946
|
-
"default": "new MutationObserver(() => this.requestUpdate())"
|
|
6935
|
+
"readonly": true
|
|
6947
6936
|
},
|
|
6948
6937
|
{
|
|
6949
6938
|
"kind": "method",
|
|
6950
|
-
"name": "
|
|
6951
|
-
"privacy": "private",
|
|
6939
|
+
"name": "checkValidity",
|
|
6952
6940
|
"return": {
|
|
6953
6941
|
"type": {
|
|
6954
|
-
"text": "
|
|
6942
|
+
"text": "boolean"
|
|
6955
6943
|
}
|
|
6956
|
-
}
|
|
6957
|
-
|
|
6958
|
-
|
|
6959
|
-
|
|
6960
|
-
|
|
6961
|
-
|
|
6962
|
-
|
|
6944
|
+
}
|
|
6945
|
+
},
|
|
6946
|
+
{
|
|
6947
|
+
"kind": "method",
|
|
6948
|
+
"name": "getForm",
|
|
6949
|
+
"return": {
|
|
6950
|
+
"type": {
|
|
6951
|
+
"text": "HTMLFormElement | null"
|
|
6963
6952
|
}
|
|
6964
|
-
|
|
6965
|
-
"description": "Reads the `stack-order` attribute of an element, returning null when it does not declare one."
|
|
6953
|
+
}
|
|
6966
6954
|
},
|
|
6967
6955
|
{
|
|
6968
6956
|
"kind": "method",
|
|
6969
|
-
"name": "
|
|
6970
|
-
"privacy": "private",
|
|
6957
|
+
"name": "reportValidity",
|
|
6971
6958
|
"return": {
|
|
6972
6959
|
"type": {
|
|
6973
|
-
"text": "
|
|
6960
|
+
"text": "boolean"
|
|
6961
|
+
}
|
|
6962
|
+
}
|
|
6963
|
+
},
|
|
6964
|
+
{
|
|
6965
|
+
"kind": "method",
|
|
6966
|
+
"name": "setCustomValidity",
|
|
6967
|
+
"return": {
|
|
6968
|
+
"type": {
|
|
6969
|
+
"text": "void"
|
|
6974
6970
|
}
|
|
6975
6971
|
},
|
|
6976
6972
|
"parameters": [
|
|
6977
6973
|
{
|
|
6978
|
-
"name": "
|
|
6979
|
-
"type": {
|
|
6980
|
-
"text": "HTMLElement"
|
|
6981
|
-
}
|
|
6982
|
-
},
|
|
6983
|
-
{
|
|
6984
|
-
"name": "promoted",
|
|
6974
|
+
"name": "message",
|
|
6985
6975
|
"type": {
|
|
6986
|
-
"text": "
|
|
6976
|
+
"text": "string"
|
|
6987
6977
|
}
|
|
6988
6978
|
}
|
|
6989
|
-
]
|
|
6990
|
-
|
|
6979
|
+
]
|
|
6980
|
+
},
|
|
6981
|
+
{
|
|
6982
|
+
"kind": "method",
|
|
6983
|
+
"name": "handleValueChange"
|
|
6984
|
+
},
|
|
6985
|
+
{
|
|
6986
|
+
"kind": "field",
|
|
6987
|
+
"name": "handleInput",
|
|
6988
|
+
"privacy": "private"
|
|
6989
|
+
},
|
|
6990
|
+
{
|
|
6991
|
+
"kind": "field",
|
|
6992
|
+
"name": "handleClear",
|
|
6993
|
+
"privacy": "private"
|
|
6991
6994
|
}
|
|
6992
6995
|
],
|
|
6993
6996
|
"events": [
|
|
6994
6997
|
{
|
|
6995
|
-
"description": "Emitted
|
|
6996
|
-
"name": "zn-
|
|
6998
|
+
"description": "Emitted when the selected color changes.",
|
|
6999
|
+
"name": "zn-input"
|
|
7000
|
+
},
|
|
7001
|
+
{
|
|
7002
|
+
"description": "Emitted when the clear button is activated.",
|
|
7003
|
+
"name": "zn-clear"
|
|
6997
7004
|
}
|
|
6998
7005
|
],
|
|
6999
7006
|
"attributes": [
|
|
7000
7007
|
{
|
|
7001
|
-
"name": "
|
|
7008
|
+
"name": "name",
|
|
7002
7009
|
"type": {
|
|
7003
7010
|
"text": "string"
|
|
7004
7011
|
},
|
|
7005
|
-
"
|
|
7006
|
-
"fieldName": "
|
|
7012
|
+
"description": "The name of the select. Used for form submission.",
|
|
7013
|
+
"fieldName": "name"
|
|
7007
7014
|
},
|
|
7008
7015
|
{
|
|
7009
|
-
"name": "
|
|
7016
|
+
"name": "value",
|
|
7010
7017
|
"type": {
|
|
7011
7018
|
"text": "string"
|
|
7012
7019
|
},
|
|
7013
7020
|
"default": "''",
|
|
7014
|
-
"description": "
|
|
7015
|
-
"fieldName": "
|
|
7021
|
+
"description": "The selected color (lowercase name, e.g. \"red\"). Used for form submission.",
|
|
7022
|
+
"fieldName": "value"
|
|
7016
7023
|
},
|
|
7017
7024
|
{
|
|
7018
|
-
"name": "
|
|
7025
|
+
"name": "label",
|
|
7019
7026
|
"type": {
|
|
7020
|
-
"text": "
|
|
7027
|
+
"text": "string"
|
|
7021
7028
|
},
|
|
7022
|
-
"default": "
|
|
7023
|
-
"
|
|
7029
|
+
"default": "''",
|
|
7030
|
+
"description": "The select's label.",
|
|
7031
|
+
"fieldName": "label"
|
|
7024
7032
|
},
|
|
7025
7033
|
{
|
|
7026
|
-
"name": "
|
|
7034
|
+
"name": "help-text",
|
|
7027
7035
|
"type": {
|
|
7028
|
-
"text": "
|
|
7036
|
+
"text": "string"
|
|
7029
7037
|
},
|
|
7030
|
-
"default": "
|
|
7031
|
-
"
|
|
7038
|
+
"default": "''",
|
|
7039
|
+
"description": "The select's help text.",
|
|
7040
|
+
"fieldName": "helpText"
|
|
7032
7041
|
},
|
|
7033
7042
|
{
|
|
7034
|
-
"name": "
|
|
7043
|
+
"name": "disabled",
|
|
7035
7044
|
"type": {
|
|
7036
7045
|
"text": "boolean"
|
|
7037
7046
|
},
|
|
7038
7047
|
"default": "false",
|
|
7039
|
-
"
|
|
7040
|
-
|
|
7041
|
-
{
|
|
7042
|
-
"name": "pad",
|
|
7043
|
-
"type": {
|
|
7044
|
-
"text": "boolean"
|
|
7045
|
-
},
|
|
7046
|
-
"fieldName": "pad"
|
|
7048
|
+
"description": "Disables the select.",
|
|
7049
|
+
"fieldName": "disabled"
|
|
7047
7050
|
},
|
|
7048
7051
|
{
|
|
7049
|
-
"name": "
|
|
7052
|
+
"name": "required",
|
|
7050
7053
|
"type": {
|
|
7051
7054
|
"text": "boolean"
|
|
7052
7055
|
},
|
|
7053
7056
|
"default": "false",
|
|
7054
|
-
"
|
|
7055
|
-
|
|
7056
|
-
{
|
|
7057
|
-
"name": "pad-x",
|
|
7058
|
-
"type": {
|
|
7059
|
-
"text": "boolean"
|
|
7060
|
-
},
|
|
7061
|
-
"fieldName": "padX"
|
|
7057
|
+
"description": "Makes the select a required field.",
|
|
7058
|
+
"fieldName": "required"
|
|
7062
7059
|
},
|
|
7063
7060
|
{
|
|
7064
|
-
"name": "
|
|
7061
|
+
"name": "clearable",
|
|
7065
7062
|
"type": {
|
|
7066
7063
|
"text": "boolean"
|
|
7067
7064
|
},
|
|
7068
|
-
"
|
|
7065
|
+
"default": "false",
|
|
7066
|
+
"description": "Shows a clear button when a color is selected.",
|
|
7067
|
+
"fieldName": "clearable"
|
|
7069
7068
|
}
|
|
7070
7069
|
],
|
|
7071
7070
|
"superclass": {
|
|
7072
7071
|
"name": "ZincElement",
|
|
7073
7072
|
"module": "/src/internal/zinc-element"
|
|
7074
7073
|
},
|
|
7075
|
-
"summary": "
|
|
7076
|
-
"tagNameWithoutPrefix": "
|
|
7077
|
-
"tagName": "zn-
|
|
7074
|
+
"summary": "A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.",
|
|
7075
|
+
"tagNameWithoutPrefix": "color-select",
|
|
7076
|
+
"tagName": "zn-color-select",
|
|
7078
7077
|
"customElement": true,
|
|
7079
|
-
"jsDoc": "/**\n * @summary
|
|
7080
|
-
"documentation": "https://zinc.style/components/
|
|
7078
|
+
"jsDoc": "/**\n * @summary A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color's swatch.\n * @documentation https://zinc.style/components/color-select\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-select\n * @dependency zn-option\n *\n * @event zn-input - Emitted when the selected color changes.\n * @event zn-clear - Emitted when the clear button is activated.\n *\n * @csspart swatch - The color swatch shown in the closed control.\n * @csspart combobox - The container that wraps the swatch and expand button (forwarded from zn-select).\n * @csspart form-control-help-text - The help text's wrapper (forwarded from zn-select).\n * @csspart form-control-input - The select's wrapper (forwarded from zn-select).\n */",
|
|
7079
|
+
"documentation": "https://zinc.style/components/color-select",
|
|
7081
7080
|
"status": "experimental",
|
|
7082
7081
|
"since": "1.0",
|
|
7083
7082
|
"dependencies": [
|
|
7084
|
-
"zn-
|
|
7083
|
+
"zn-select",
|
|
7084
|
+
"zn-option"
|
|
7085
7085
|
]
|
|
7086
7086
|
}
|
|
7087
7087
|
],
|
|
@@ -7090,8 +7090,8 @@
|
|
|
7090
7090
|
"kind": "js",
|
|
7091
7091
|
"name": "default",
|
|
7092
7092
|
"declaration": {
|
|
7093
|
-
"name": "
|
|
7094
|
-
"module": "components/
|
|
7093
|
+
"name": "ZnColorSelect",
|
|
7094
|
+
"module": "components/color-select/color-select.js"
|
|
7095
7095
|
}
|
|
7096
7096
|
}
|
|
7097
7097
|
]
|
|
@@ -12889,157 +12889,506 @@
|
|
|
12889
12889
|
},
|
|
12890
12890
|
{
|
|
12891
12891
|
"kind": "method",
|
|
12892
|
-
"name": "handleFormSubmit",
|
|
12892
|
+
"name": "handleFormSubmit",
|
|
12893
|
+
"privacy": "private",
|
|
12894
|
+
"parameters": [
|
|
12895
|
+
{
|
|
12896
|
+
"name": "e",
|
|
12897
|
+
"type": {
|
|
12898
|
+
"text": "Event"
|
|
12899
|
+
}
|
|
12900
|
+
},
|
|
12901
|
+
{
|
|
12902
|
+
"name": "label",
|
|
12903
|
+
"type": {
|
|
12904
|
+
"text": "string"
|
|
12905
|
+
}
|
|
12906
|
+
}
|
|
12907
|
+
]
|
|
12908
|
+
},
|
|
12909
|
+
{
|
|
12910
|
+
"kind": "method",
|
|
12911
|
+
"name": "renderValueControl",
|
|
12912
|
+
"privacy": "private",
|
|
12913
|
+
"return": {
|
|
12914
|
+
"type": {
|
|
12915
|
+
"text": "TemplateResult"
|
|
12916
|
+
}
|
|
12917
|
+
},
|
|
12918
|
+
"parameters": [
|
|
12919
|
+
{
|
|
12920
|
+
"name": "label",
|
|
12921
|
+
"type": {
|
|
12922
|
+
"text": "PredefinedLabel"
|
|
12923
|
+
}
|
|
12924
|
+
}
|
|
12925
|
+
]
|
|
12926
|
+
},
|
|
12927
|
+
{
|
|
12928
|
+
"kind": "method",
|
|
12929
|
+
"name": "renderRow",
|
|
12930
|
+
"privacy": "private",
|
|
12931
|
+
"return": {
|
|
12932
|
+
"type": {
|
|
12933
|
+
"text": "TemplateResult"
|
|
12934
|
+
}
|
|
12935
|
+
},
|
|
12936
|
+
"parameters": [
|
|
12937
|
+
{
|
|
12938
|
+
"name": "label",
|
|
12939
|
+
"type": {
|
|
12940
|
+
"text": "string"
|
|
12941
|
+
}
|
|
12942
|
+
},
|
|
12943
|
+
{
|
|
12944
|
+
"name": "control",
|
|
12945
|
+
"type": {
|
|
12946
|
+
"text": "TemplateResult"
|
|
12947
|
+
}
|
|
12948
|
+
}
|
|
12949
|
+
]
|
|
12950
|
+
}
|
|
12951
|
+
],
|
|
12952
|
+
"attributes": [
|
|
12953
|
+
{
|
|
12954
|
+
"name": "value",
|
|
12955
|
+
"type": {
|
|
12956
|
+
"text": "string"
|
|
12957
|
+
},
|
|
12958
|
+
"default": "''",
|
|
12959
|
+
"description": "The selected label key. Also acts as the filter while typing.",
|
|
12960
|
+
"fieldName": "value"
|
|
12961
|
+
},
|
|
12962
|
+
{
|
|
12963
|
+
"name": "inputValue",
|
|
12964
|
+
"type": {
|
|
12965
|
+
"text": "string"
|
|
12966
|
+
},
|
|
12967
|
+
"default": "''",
|
|
12968
|
+
"description": "The value entered for the selected label. Submitted as `label:value` when present.",
|
|
12969
|
+
"fieldName": "inputValue"
|
|
12970
|
+
},
|
|
12971
|
+
{
|
|
12972
|
+
"name": "input-size",
|
|
12973
|
+
"type": {
|
|
12974
|
+
"text": "'x-small' | 'small' | 'medium' | 'large'"
|
|
12975
|
+
},
|
|
12976
|
+
"default": "'medium'",
|
|
12977
|
+
"description": "The size of the main input.",
|
|
12978
|
+
"fieldName": "inputSize"
|
|
12979
|
+
},
|
|
12980
|
+
{
|
|
12981
|
+
"name": "name",
|
|
12982
|
+
"type": {
|
|
12983
|
+
"text": "string"
|
|
12984
|
+
},
|
|
12985
|
+
"default": "'label'",
|
|
12986
|
+
"description": "The name of the control. Used for form submission.",
|
|
12987
|
+
"fieldName": "name"
|
|
12988
|
+
},
|
|
12989
|
+
{
|
|
12990
|
+
"name": "title",
|
|
12991
|
+
"type": {
|
|
12992
|
+
"text": "string"
|
|
12993
|
+
},
|
|
12994
|
+
"description": "The title of the main input.",
|
|
12995
|
+
"fieldName": "title"
|
|
12996
|
+
},
|
|
12997
|
+
{
|
|
12998
|
+
"name": "disabled",
|
|
12999
|
+
"type": {
|
|
13000
|
+
"text": "boolean"
|
|
13001
|
+
},
|
|
13002
|
+
"default": "false",
|
|
13003
|
+
"description": "Disables the control.",
|
|
13004
|
+
"fieldName": "disabled"
|
|
13005
|
+
},
|
|
13006
|
+
{
|
|
13007
|
+
"name": "allow-custom",
|
|
13008
|
+
"type": {
|
|
13009
|
+
"text": "boolean"
|
|
13010
|
+
},
|
|
13011
|
+
"default": "false",
|
|
13012
|
+
"description": "Allows labels that aren't in the predefined list.",
|
|
13013
|
+
"fieldName": "allowCustom"
|
|
13014
|
+
},
|
|
13015
|
+
{
|
|
13016
|
+
"name": "predefined-labels",
|
|
13017
|
+
"type": {
|
|
13018
|
+
"text": "(PredefinedLabel | string)[]"
|
|
13019
|
+
},
|
|
13020
|
+
"default": "[]",
|
|
13021
|
+
"description": "The predefined labels. Entries are either a string or `{name, options}`.",
|
|
13022
|
+
"fieldName": "predefinedLabels"
|
|
13023
|
+
}
|
|
13024
|
+
],
|
|
13025
|
+
"superclass": {
|
|
13026
|
+
"name": "ZincElement",
|
|
13027
|
+
"module": "/src/internal/zinc-element"
|
|
13028
|
+
},
|
|
13029
|
+
"summary": "This component provides a labeled input with support for predefined and custom labels,\nallowing users to select or enter label-value pairs within a dropdown interface.",
|
|
13030
|
+
"tagNameWithoutPrefix": "defined-label",
|
|
13031
|
+
"tagName": "zn-defined-label",
|
|
13032
|
+
"customElement": true,
|
|
13033
|
+
"jsDoc": "/**\n * @summary This component provides a labeled input with support for predefined and custom labels,\n * allowing users to select or enter label-value pairs within a dropdown interface.\n * @documentation https://zinc.style/components/defined-label\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n * @dependency zn-dropdown\n * @dependency zn-input\n * @dependency zn-option\n * @dependency zn-select\n *\n * @csspart input - The component's main input.\n * @csspart input-value - The label's value inputs.\n */",
|
|
13034
|
+
"documentation": "https://zinc.style/components/defined-label",
|
|
13035
|
+
"status": "experimental",
|
|
13036
|
+
"since": "1.0",
|
|
13037
|
+
"dependencies": [
|
|
13038
|
+
"zn-button",
|
|
13039
|
+
"zn-dropdown",
|
|
13040
|
+
"zn-input",
|
|
13041
|
+
"zn-option",
|
|
13042
|
+
"zn-select"
|
|
13043
|
+
]
|
|
13044
|
+
}
|
|
13045
|
+
],
|
|
13046
|
+
"exports": [
|
|
13047
|
+
{
|
|
13048
|
+
"kind": "js",
|
|
13049
|
+
"name": "default",
|
|
13050
|
+
"declaration": {
|
|
13051
|
+
"name": "ZnDefinedLabel",
|
|
13052
|
+
"module": "components/defined-label/defined-label.js"
|
|
13053
|
+
}
|
|
13054
|
+
}
|
|
13055
|
+
]
|
|
13056
|
+
},
|
|
13057
|
+
{
|
|
13058
|
+
"kind": "javascript-module",
|
|
13059
|
+
"path": "components/dialog/dialog.js",
|
|
13060
|
+
"declarations": [
|
|
13061
|
+
{
|
|
13062
|
+
"kind": "class",
|
|
13063
|
+
"description": "",
|
|
13064
|
+
"name": "ZnDialog",
|
|
13065
|
+
"cssProperties": [
|
|
13066
|
+
{
|
|
13067
|
+
"description": "The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.",
|
|
13068
|
+
"name": "--width"
|
|
13069
|
+
},
|
|
13070
|
+
{
|
|
13071
|
+
"description": "The amount of padding to use for the header.",
|
|
13072
|
+
"name": "--header-spacing"
|
|
13073
|
+
},
|
|
13074
|
+
{
|
|
13075
|
+
"description": "The amount of padding to use for the body.",
|
|
13076
|
+
"name": "--body-spacing"
|
|
13077
|
+
},
|
|
13078
|
+
{
|
|
13079
|
+
"description": "The amount of padding to use for the footer.",
|
|
13080
|
+
"name": "--footer-spacing"
|
|
13081
|
+
}
|
|
13082
|
+
],
|
|
13083
|
+
"cssParts": [
|
|
13084
|
+
{
|
|
13085
|
+
"description": "The component's base wrapper.",
|
|
13086
|
+
"name": "base"
|
|
13087
|
+
},
|
|
13088
|
+
{
|
|
13089
|
+
"description": "The dialog's header. This element wraps the title and header actions.",
|
|
13090
|
+
"name": "header"
|
|
13091
|
+
},
|
|
13092
|
+
{
|
|
13093
|
+
"description": "Optional actions to add to the header. Works best with `<zn-button>` elements.",
|
|
13094
|
+
"name": "header-actions"
|
|
13095
|
+
},
|
|
13096
|
+
{
|
|
13097
|
+
"description": "The dialog's title.",
|
|
13098
|
+
"name": "title"
|
|
13099
|
+
},
|
|
13100
|
+
{
|
|
13101
|
+
"description": "The dialog's close button.",
|
|
13102
|
+
"name": "close-button"
|
|
13103
|
+
},
|
|
13104
|
+
{
|
|
13105
|
+
"description": "The close buttons exported `base` part.",
|
|
13106
|
+
"name": "close-button__base"
|
|
13107
|
+
},
|
|
13108
|
+
{
|
|
13109
|
+
"description": "The dialog's body.",
|
|
13110
|
+
"name": "body"
|
|
13111
|
+
},
|
|
13112
|
+
{
|
|
13113
|
+
"description": "The dialog's footer.",
|
|
13114
|
+
"name": "footer"
|
|
13115
|
+
}
|
|
13116
|
+
],
|
|
13117
|
+
"slots": [
|
|
13118
|
+
{
|
|
13119
|
+
"description": "The default slot.",
|
|
13120
|
+
"name": ""
|
|
13121
|
+
},
|
|
13122
|
+
{
|
|
13123
|
+
"description": "The dialog's label. Alternatively you can use the `label` attribute.",
|
|
13124
|
+
"name": "label"
|
|
13125
|
+
},
|
|
13126
|
+
{
|
|
13127
|
+
"description": "Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.",
|
|
13128
|
+
"name": "header-icon"
|
|
13129
|
+
},
|
|
13130
|
+
{
|
|
13131
|
+
"description": "Optional Intro text to display below the icon, when using the variant `announcement`.",
|
|
13132
|
+
"name": "announcement-intro"
|
|
13133
|
+
},
|
|
13134
|
+
{
|
|
13135
|
+
"description": "Optional actions to add to the header. Works best with `<zn-button>` elements.",
|
|
13136
|
+
"name": "header-actions"
|
|
13137
|
+
},
|
|
13138
|
+
{
|
|
13139
|
+
"description": "The dialog's footer. This is typically used for buttons representing various options.",
|
|
13140
|
+
"name": "footer"
|
|
13141
|
+
},
|
|
13142
|
+
{
|
|
13143
|
+
"description": "Optional text to include below the footer buttons, when using the variant `announcement`.",
|
|
13144
|
+
"name": "footer-text"
|
|
13145
|
+
}
|
|
13146
|
+
],
|
|
13147
|
+
"members": [
|
|
13148
|
+
{
|
|
13149
|
+
"kind": "field",
|
|
13150
|
+
"name": "dependencies",
|
|
13151
|
+
"type": {
|
|
13152
|
+
"text": "object"
|
|
13153
|
+
},
|
|
13154
|
+
"static": true,
|
|
13155
|
+
"default": "{ 'zn-button': ZnButton }"
|
|
13156
|
+
},
|
|
13157
|
+
{
|
|
13158
|
+
"kind": "field",
|
|
13159
|
+
"name": "hasSlotController",
|
|
13160
|
+
"privacy": "private",
|
|
13161
|
+
"readonly": true,
|
|
13162
|
+
"default": "new HasSlotController(this, '[default]', 'footer')"
|
|
13163
|
+
},
|
|
13164
|
+
{
|
|
13165
|
+
"kind": "field",
|
|
13166
|
+
"name": "closeWatcher",
|
|
13167
|
+
"type": {
|
|
13168
|
+
"text": "CloseWatcher | null"
|
|
13169
|
+
},
|
|
13170
|
+
"privacy": "private"
|
|
13171
|
+
},
|
|
13172
|
+
{
|
|
13173
|
+
"kind": "field",
|
|
13174
|
+
"name": "dialog",
|
|
13175
|
+
"type": {
|
|
13176
|
+
"text": "HTMLDialogElement"
|
|
13177
|
+
}
|
|
13178
|
+
},
|
|
13179
|
+
{
|
|
13180
|
+
"kind": "field",
|
|
13181
|
+
"name": "closer",
|
|
13182
|
+
"type": {
|
|
13183
|
+
"text": "HTMLButtonElement"
|
|
13184
|
+
}
|
|
13185
|
+
},
|
|
13186
|
+
{
|
|
13187
|
+
"kind": "field",
|
|
13188
|
+
"name": "variant",
|
|
13189
|
+
"type": {
|
|
13190
|
+
"text": "'default' | 'warning' | 'announcement'"
|
|
13191
|
+
},
|
|
13192
|
+
"default": "'default'",
|
|
13193
|
+
"description": "The dialog's theme variant.",
|
|
13194
|
+
"attribute": "variant",
|
|
13195
|
+
"reflects": true
|
|
13196
|
+
},
|
|
13197
|
+
{
|
|
13198
|
+
"kind": "field",
|
|
13199
|
+
"name": "size",
|
|
13200
|
+
"type": {
|
|
13201
|
+
"text": "'small' | 'medium' | 'large' | 'custom'"
|
|
13202
|
+
},
|
|
13203
|
+
"default": "'medium'",
|
|
13204
|
+
"description": "The dialog's size.",
|
|
13205
|
+
"attribute": "size",
|
|
13206
|
+
"reflects": true
|
|
13207
|
+
},
|
|
13208
|
+
{
|
|
13209
|
+
"kind": "field",
|
|
13210
|
+
"name": "open",
|
|
13211
|
+
"type": {
|
|
13212
|
+
"text": "boolean"
|
|
13213
|
+
},
|
|
13214
|
+
"default": "false",
|
|
13215
|
+
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
13216
|
+
"attribute": "open",
|
|
13217
|
+
"reflects": true
|
|
13218
|
+
},
|
|
13219
|
+
{
|
|
13220
|
+
"kind": "field",
|
|
13221
|
+
"name": "label",
|
|
13222
|
+
"type": {
|
|
13223
|
+
"text": "string"
|
|
13224
|
+
},
|
|
13225
|
+
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
13226
|
+
"attribute": "label",
|
|
13227
|
+
"reflects": true
|
|
13228
|
+
},
|
|
13229
|
+
{
|
|
13230
|
+
"kind": "field",
|
|
13231
|
+
"name": "cosmic",
|
|
13232
|
+
"type": {
|
|
13233
|
+
"text": "boolean"
|
|
13234
|
+
},
|
|
13235
|
+
"default": "false",
|
|
13236
|
+
"attribute": "cosmic",
|
|
13237
|
+
"reflects": true
|
|
13238
|
+
},
|
|
13239
|
+
{
|
|
13240
|
+
"kind": "field",
|
|
13241
|
+
"name": "noHeader",
|
|
13242
|
+
"type": {
|
|
13243
|
+
"text": "boolean"
|
|
13244
|
+
},
|
|
13245
|
+
"default": "false",
|
|
13246
|
+
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
13247
|
+
"attribute": "no-header",
|
|
13248
|
+
"reflects": true
|
|
13249
|
+
},
|
|
13250
|
+
{
|
|
13251
|
+
"kind": "field",
|
|
13252
|
+
"name": "trigger",
|
|
13253
|
+
"type": {
|
|
13254
|
+
"text": "string"
|
|
13255
|
+
},
|
|
13256
|
+
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
13257
|
+
"attribute": "trigger",
|
|
13258
|
+
"reflects": true
|
|
13259
|
+
},
|
|
13260
|
+
{
|
|
13261
|
+
"kind": "method",
|
|
13262
|
+
"name": "requestClose",
|
|
12893
13263
|
"privacy": "private",
|
|
12894
13264
|
"parameters": [
|
|
12895
13265
|
{
|
|
12896
|
-
"name": "
|
|
12897
|
-
"type": {
|
|
12898
|
-
"text": "Event"
|
|
12899
|
-
}
|
|
12900
|
-
},
|
|
12901
|
-
{
|
|
12902
|
-
"name": "label",
|
|
13266
|
+
"name": "source",
|
|
12903
13267
|
"type": {
|
|
12904
|
-
"text": "
|
|
13268
|
+
"text": "'close-button' | 'keyboard' | 'overlay'"
|
|
12905
13269
|
}
|
|
12906
13270
|
}
|
|
12907
13271
|
]
|
|
12908
13272
|
},
|
|
12909
13273
|
{
|
|
12910
13274
|
"kind": "method",
|
|
12911
|
-
"name": "
|
|
12912
|
-
"privacy": "private"
|
|
12913
|
-
"return": {
|
|
12914
|
-
"type": {
|
|
12915
|
-
"text": "TemplateResult"
|
|
12916
|
-
}
|
|
12917
|
-
},
|
|
12918
|
-
"parameters": [
|
|
12919
|
-
{
|
|
12920
|
-
"name": "label",
|
|
12921
|
-
"type": {
|
|
12922
|
-
"text": "PredefinedLabel"
|
|
12923
|
-
}
|
|
12924
|
-
}
|
|
12925
|
-
]
|
|
13275
|
+
"name": "addOpenListeners",
|
|
13276
|
+
"privacy": "private"
|
|
12926
13277
|
},
|
|
12927
13278
|
{
|
|
12928
13279
|
"kind": "method",
|
|
12929
|
-
"name": "
|
|
12930
|
-
"privacy": "private"
|
|
12931
|
-
|
|
12932
|
-
|
|
12933
|
-
|
|
12934
|
-
|
|
12935
|
-
|
|
12936
|
-
|
|
12937
|
-
|
|
12938
|
-
|
|
12939
|
-
|
|
12940
|
-
|
|
12941
|
-
|
|
12942
|
-
|
|
12943
|
-
|
|
12944
|
-
|
|
12945
|
-
|
|
12946
|
-
"text": "TemplateResult"
|
|
12947
|
-
}
|
|
12948
|
-
}
|
|
12949
|
-
]
|
|
13280
|
+
"name": "removeOpenListeners",
|
|
13281
|
+
"privacy": "private"
|
|
13282
|
+
},
|
|
13283
|
+
{
|
|
13284
|
+
"kind": "method",
|
|
13285
|
+
"name": "show",
|
|
13286
|
+
"description": "Shows the dialog."
|
|
13287
|
+
},
|
|
13288
|
+
{
|
|
13289
|
+
"kind": "method",
|
|
13290
|
+
"name": "hide",
|
|
13291
|
+
"description": "Hides the dialog."
|
|
13292
|
+
},
|
|
13293
|
+
{
|
|
13294
|
+
"kind": "field",
|
|
13295
|
+
"name": "closeClickHandler",
|
|
13296
|
+
"privacy": "private"
|
|
12950
13297
|
}
|
|
12951
13298
|
],
|
|
12952
|
-
"
|
|
13299
|
+
"events": [
|
|
13300
|
+
{
|
|
13301
|
+
"description": "Emitted when the dialog is opens.",
|
|
13302
|
+
"name": "zn-show"
|
|
13303
|
+
},
|
|
13304
|
+
{
|
|
13305
|
+
"description": "Emitted when the dialog is closed.",
|
|
13306
|
+
"name": "zn-close"
|
|
13307
|
+
},
|
|
12953
13308
|
{
|
|
12954
|
-
"name": "value",
|
|
12955
13309
|
"type": {
|
|
12956
|
-
"text": "
|
|
13310
|
+
"text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
|
|
12957
13311
|
},
|
|
12958
|
-
"
|
|
12959
|
-
"
|
|
12960
|
-
|
|
12961
|
-
|
|
13312
|
+
"description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.",
|
|
13313
|
+
"name": "zn-request-close"
|
|
13314
|
+
}
|
|
13315
|
+
],
|
|
13316
|
+
"attributes": [
|
|
12962
13317
|
{
|
|
12963
|
-
"name": "
|
|
13318
|
+
"name": "variant",
|
|
12964
13319
|
"type": {
|
|
12965
|
-
"text": "
|
|
13320
|
+
"text": "'default' | 'warning' | 'announcement'"
|
|
12966
13321
|
},
|
|
12967
|
-
"default": "''",
|
|
12968
|
-
"description": "The
|
|
12969
|
-
"fieldName": "
|
|
13322
|
+
"default": "'default'",
|
|
13323
|
+
"description": "The dialog's theme variant.",
|
|
13324
|
+
"fieldName": "variant"
|
|
12970
13325
|
},
|
|
12971
13326
|
{
|
|
12972
|
-
"name": "
|
|
13327
|
+
"name": "size",
|
|
12973
13328
|
"type": {
|
|
12974
|
-
"text": "'
|
|
13329
|
+
"text": "'small' | 'medium' | 'large' | 'custom'"
|
|
12975
13330
|
},
|
|
12976
13331
|
"default": "'medium'",
|
|
12977
|
-
"description": "The size
|
|
12978
|
-
"fieldName": "
|
|
13332
|
+
"description": "The dialog's size.",
|
|
13333
|
+
"fieldName": "size"
|
|
12979
13334
|
},
|
|
12980
13335
|
{
|
|
12981
|
-
"name": "
|
|
13336
|
+
"name": "open",
|
|
12982
13337
|
"type": {
|
|
12983
|
-
"text": "
|
|
13338
|
+
"text": "boolean"
|
|
12984
13339
|
},
|
|
12985
|
-
"default": "
|
|
12986
|
-
"description": "
|
|
12987
|
-
"fieldName": "
|
|
13340
|
+
"default": "false",
|
|
13341
|
+
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
13342
|
+
"fieldName": "open"
|
|
12988
13343
|
},
|
|
12989
13344
|
{
|
|
12990
|
-
"name": "
|
|
13345
|
+
"name": "label",
|
|
12991
13346
|
"type": {
|
|
12992
13347
|
"text": "string"
|
|
12993
13348
|
},
|
|
12994
|
-
"description": "The
|
|
12995
|
-
"fieldName": "
|
|
13349
|
+
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
13350
|
+
"fieldName": "label"
|
|
12996
13351
|
},
|
|
12997
13352
|
{
|
|
12998
|
-
"name": "
|
|
13353
|
+
"name": "cosmic",
|
|
12999
13354
|
"type": {
|
|
13000
13355
|
"text": "boolean"
|
|
13001
13356
|
},
|
|
13002
13357
|
"default": "false",
|
|
13003
|
-
"
|
|
13004
|
-
"fieldName": "disabled"
|
|
13358
|
+
"fieldName": "cosmic"
|
|
13005
13359
|
},
|
|
13006
13360
|
{
|
|
13007
|
-
"name": "
|
|
13361
|
+
"name": "no-header",
|
|
13008
13362
|
"type": {
|
|
13009
13363
|
"text": "boolean"
|
|
13010
13364
|
},
|
|
13011
13365
|
"default": "false",
|
|
13012
|
-
"description": "
|
|
13013
|
-
"fieldName": "
|
|
13366
|
+
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
13367
|
+
"fieldName": "noHeader"
|
|
13014
13368
|
},
|
|
13015
13369
|
{
|
|
13016
|
-
"name": "
|
|
13370
|
+
"name": "trigger",
|
|
13017
13371
|
"type": {
|
|
13018
|
-
"text": "
|
|
13372
|
+
"text": "string"
|
|
13019
13373
|
},
|
|
13020
|
-
"
|
|
13021
|
-
"
|
|
13022
|
-
"fieldName": "predefinedLabels"
|
|
13374
|
+
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
13375
|
+
"fieldName": "trigger"
|
|
13023
13376
|
}
|
|
13024
13377
|
],
|
|
13025
13378
|
"superclass": {
|
|
13026
13379
|
"name": "ZincElement",
|
|
13027
13380
|
"module": "/src/internal/zinc-element"
|
|
13028
13381
|
},
|
|
13029
|
-
"summary": "
|
|
13030
|
-
"tagNameWithoutPrefix": "
|
|
13031
|
-
"tagName": "zn-
|
|
13382
|
+
"summary": "Short summary of the component's intended use.",
|
|
13383
|
+
"tagNameWithoutPrefix": "dialog",
|
|
13384
|
+
"tagName": "zn-dialog",
|
|
13032
13385
|
"customElement": true,
|
|
13033
|
-
"jsDoc": "/**\n * @summary
|
|
13034
|
-
"documentation": "https://zinc.style/components/
|
|
13386
|
+
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/dialog\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n *\n * @event zn-show - Emitted when the dialog is opens.\n * @event zn-close - Emitted when the dialog is closed.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to\n * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n * destructive behavior such as data loss.\n *\n * @slot - The default slot.\n * @slot label - The dialog's label. Alternatively you can use the `label` attribute.\n * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied\n * to the icon depending on the dialog variant.\n * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`.\n * @slot header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.\n * @slot footer - The dialog's footer. This is typically used for buttons representing various options.\n * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The dialog's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.\n * @csspart title - The dialog's title.\n * @csspart close-button - The dialog's close button.\n * @csspart close-button__base - The close buttons exported `base` part.\n * @csspart body - The dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n */",
|
|
13387
|
+
"documentation": "https://zinc.style/components/dialog",
|
|
13035
13388
|
"status": "experimental",
|
|
13036
13389
|
"since": "1.0",
|
|
13037
13390
|
"dependencies": [
|
|
13038
|
-
"zn-button"
|
|
13039
|
-
"zn-dropdown",
|
|
13040
|
-
"zn-input",
|
|
13041
|
-
"zn-option",
|
|
13042
|
-
"zn-select"
|
|
13391
|
+
"zn-button"
|
|
13043
13392
|
]
|
|
13044
13393
|
}
|
|
13045
13394
|
],
|
|
@@ -13048,8 +13397,8 @@
|
|
|
13048
13397
|
"kind": "js",
|
|
13049
13398
|
"name": "default",
|
|
13050
13399
|
"declaration": {
|
|
13051
|
-
"name": "
|
|
13052
|
-
"module": "components/
|
|
13400
|
+
"name": "ZnDialog",
|
|
13401
|
+
"module": "components/dialog/dialog.js"
|
|
13053
13402
|
}
|
|
13054
13403
|
}
|
|
13055
13404
|
]
|
|
@@ -13480,355 +13829,6 @@
|
|
|
13480
13829
|
}
|
|
13481
13830
|
]
|
|
13482
13831
|
},
|
|
13483
|
-
{
|
|
13484
|
-
"kind": "javascript-module",
|
|
13485
|
-
"path": "components/dialog/dialog.js",
|
|
13486
|
-
"declarations": [
|
|
13487
|
-
{
|
|
13488
|
-
"kind": "class",
|
|
13489
|
-
"description": "",
|
|
13490
|
-
"name": "ZnDialog",
|
|
13491
|
-
"cssProperties": [
|
|
13492
|
-
{
|
|
13493
|
-
"description": "The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.",
|
|
13494
|
-
"name": "--width"
|
|
13495
|
-
},
|
|
13496
|
-
{
|
|
13497
|
-
"description": "The amount of padding to use for the header.",
|
|
13498
|
-
"name": "--header-spacing"
|
|
13499
|
-
},
|
|
13500
|
-
{
|
|
13501
|
-
"description": "The amount of padding to use for the body.",
|
|
13502
|
-
"name": "--body-spacing"
|
|
13503
|
-
},
|
|
13504
|
-
{
|
|
13505
|
-
"description": "The amount of padding to use for the footer.",
|
|
13506
|
-
"name": "--footer-spacing"
|
|
13507
|
-
}
|
|
13508
|
-
],
|
|
13509
|
-
"cssParts": [
|
|
13510
|
-
{
|
|
13511
|
-
"description": "The component's base wrapper.",
|
|
13512
|
-
"name": "base"
|
|
13513
|
-
},
|
|
13514
|
-
{
|
|
13515
|
-
"description": "The dialog's header. This element wraps the title and header actions.",
|
|
13516
|
-
"name": "header"
|
|
13517
|
-
},
|
|
13518
|
-
{
|
|
13519
|
-
"description": "Optional actions to add to the header. Works best with `<zn-button>` elements.",
|
|
13520
|
-
"name": "header-actions"
|
|
13521
|
-
},
|
|
13522
|
-
{
|
|
13523
|
-
"description": "The dialog's title.",
|
|
13524
|
-
"name": "title"
|
|
13525
|
-
},
|
|
13526
|
-
{
|
|
13527
|
-
"description": "The dialog's close button.",
|
|
13528
|
-
"name": "close-button"
|
|
13529
|
-
},
|
|
13530
|
-
{
|
|
13531
|
-
"description": "The close buttons exported `base` part.",
|
|
13532
|
-
"name": "close-button__base"
|
|
13533
|
-
},
|
|
13534
|
-
{
|
|
13535
|
-
"description": "The dialog's body.",
|
|
13536
|
-
"name": "body"
|
|
13537
|
-
},
|
|
13538
|
-
{
|
|
13539
|
-
"description": "The dialog's footer.",
|
|
13540
|
-
"name": "footer"
|
|
13541
|
-
}
|
|
13542
|
-
],
|
|
13543
|
-
"slots": [
|
|
13544
|
-
{
|
|
13545
|
-
"description": "The default slot.",
|
|
13546
|
-
"name": ""
|
|
13547
|
-
},
|
|
13548
|
-
{
|
|
13549
|
-
"description": "The dialog's label. Alternatively you can use the `label` attribute.",
|
|
13550
|
-
"name": "label"
|
|
13551
|
-
},
|
|
13552
|
-
{
|
|
13553
|
-
"description": "Optional icon to add to the left of the dialog's label (title). A color will be applied to the icon depending on the dialog variant.",
|
|
13554
|
-
"name": "header-icon"
|
|
13555
|
-
},
|
|
13556
|
-
{
|
|
13557
|
-
"description": "Optional Intro text to display below the icon, when using the variant `announcement`.",
|
|
13558
|
-
"name": "announcement-intro"
|
|
13559
|
-
},
|
|
13560
|
-
{
|
|
13561
|
-
"description": "Optional actions to add to the header. Works best with `<zn-button>` elements.",
|
|
13562
|
-
"name": "header-actions"
|
|
13563
|
-
},
|
|
13564
|
-
{
|
|
13565
|
-
"description": "The dialog's footer. This is typically used for buttons representing various options.",
|
|
13566
|
-
"name": "footer"
|
|
13567
|
-
},
|
|
13568
|
-
{
|
|
13569
|
-
"description": "Optional text to include below the footer buttons, when using the variant `announcement`.",
|
|
13570
|
-
"name": "footer-text"
|
|
13571
|
-
}
|
|
13572
|
-
],
|
|
13573
|
-
"members": [
|
|
13574
|
-
{
|
|
13575
|
-
"kind": "field",
|
|
13576
|
-
"name": "dependencies",
|
|
13577
|
-
"type": {
|
|
13578
|
-
"text": "object"
|
|
13579
|
-
},
|
|
13580
|
-
"static": true,
|
|
13581
|
-
"default": "{ 'zn-button': ZnButton }"
|
|
13582
|
-
},
|
|
13583
|
-
{
|
|
13584
|
-
"kind": "field",
|
|
13585
|
-
"name": "hasSlotController",
|
|
13586
|
-
"privacy": "private",
|
|
13587
|
-
"readonly": true,
|
|
13588
|
-
"default": "new HasSlotController(this, '[default]', 'footer')"
|
|
13589
|
-
},
|
|
13590
|
-
{
|
|
13591
|
-
"kind": "field",
|
|
13592
|
-
"name": "closeWatcher",
|
|
13593
|
-
"type": {
|
|
13594
|
-
"text": "CloseWatcher | null"
|
|
13595
|
-
},
|
|
13596
|
-
"privacy": "private"
|
|
13597
|
-
},
|
|
13598
|
-
{
|
|
13599
|
-
"kind": "field",
|
|
13600
|
-
"name": "dialog",
|
|
13601
|
-
"type": {
|
|
13602
|
-
"text": "HTMLDialogElement"
|
|
13603
|
-
}
|
|
13604
|
-
},
|
|
13605
|
-
{
|
|
13606
|
-
"kind": "field",
|
|
13607
|
-
"name": "closer",
|
|
13608
|
-
"type": {
|
|
13609
|
-
"text": "HTMLButtonElement"
|
|
13610
|
-
}
|
|
13611
|
-
},
|
|
13612
|
-
{
|
|
13613
|
-
"kind": "field",
|
|
13614
|
-
"name": "variant",
|
|
13615
|
-
"type": {
|
|
13616
|
-
"text": "'default' | 'warning' | 'announcement'"
|
|
13617
|
-
},
|
|
13618
|
-
"default": "'default'",
|
|
13619
|
-
"description": "The dialog's theme variant.",
|
|
13620
|
-
"attribute": "variant",
|
|
13621
|
-
"reflects": true
|
|
13622
|
-
},
|
|
13623
|
-
{
|
|
13624
|
-
"kind": "field",
|
|
13625
|
-
"name": "size",
|
|
13626
|
-
"type": {
|
|
13627
|
-
"text": "'small' | 'medium' | 'large' | 'custom'"
|
|
13628
|
-
},
|
|
13629
|
-
"default": "'medium'",
|
|
13630
|
-
"description": "The dialog's size.",
|
|
13631
|
-
"attribute": "size",
|
|
13632
|
-
"reflects": true
|
|
13633
|
-
},
|
|
13634
|
-
{
|
|
13635
|
-
"kind": "field",
|
|
13636
|
-
"name": "open",
|
|
13637
|
-
"type": {
|
|
13638
|
-
"text": "boolean"
|
|
13639
|
-
},
|
|
13640
|
-
"default": "false",
|
|
13641
|
-
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
13642
|
-
"attribute": "open",
|
|
13643
|
-
"reflects": true
|
|
13644
|
-
},
|
|
13645
|
-
{
|
|
13646
|
-
"kind": "field",
|
|
13647
|
-
"name": "label",
|
|
13648
|
-
"type": {
|
|
13649
|
-
"text": "string"
|
|
13650
|
-
},
|
|
13651
|
-
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
13652
|
-
"attribute": "label",
|
|
13653
|
-
"reflects": true
|
|
13654
|
-
},
|
|
13655
|
-
{
|
|
13656
|
-
"kind": "field",
|
|
13657
|
-
"name": "cosmic",
|
|
13658
|
-
"type": {
|
|
13659
|
-
"text": "boolean"
|
|
13660
|
-
},
|
|
13661
|
-
"default": "false",
|
|
13662
|
-
"attribute": "cosmic",
|
|
13663
|
-
"reflects": true
|
|
13664
|
-
},
|
|
13665
|
-
{
|
|
13666
|
-
"kind": "field",
|
|
13667
|
-
"name": "noHeader",
|
|
13668
|
-
"type": {
|
|
13669
|
-
"text": "boolean"
|
|
13670
|
-
},
|
|
13671
|
-
"default": "false",
|
|
13672
|
-
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
13673
|
-
"attribute": "no-header",
|
|
13674
|
-
"reflects": true
|
|
13675
|
-
},
|
|
13676
|
-
{
|
|
13677
|
-
"kind": "field",
|
|
13678
|
-
"name": "trigger",
|
|
13679
|
-
"type": {
|
|
13680
|
-
"text": "string"
|
|
13681
|
-
},
|
|
13682
|
-
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
13683
|
-
"attribute": "trigger",
|
|
13684
|
-
"reflects": true
|
|
13685
|
-
},
|
|
13686
|
-
{
|
|
13687
|
-
"kind": "method",
|
|
13688
|
-
"name": "requestClose",
|
|
13689
|
-
"privacy": "private",
|
|
13690
|
-
"parameters": [
|
|
13691
|
-
{
|
|
13692
|
-
"name": "source",
|
|
13693
|
-
"type": {
|
|
13694
|
-
"text": "'close-button' | 'keyboard' | 'overlay'"
|
|
13695
|
-
}
|
|
13696
|
-
}
|
|
13697
|
-
]
|
|
13698
|
-
},
|
|
13699
|
-
{
|
|
13700
|
-
"kind": "method",
|
|
13701
|
-
"name": "addOpenListeners",
|
|
13702
|
-
"privacy": "private"
|
|
13703
|
-
},
|
|
13704
|
-
{
|
|
13705
|
-
"kind": "method",
|
|
13706
|
-
"name": "removeOpenListeners",
|
|
13707
|
-
"privacy": "private"
|
|
13708
|
-
},
|
|
13709
|
-
{
|
|
13710
|
-
"kind": "method",
|
|
13711
|
-
"name": "show",
|
|
13712
|
-
"description": "Shows the dialog."
|
|
13713
|
-
},
|
|
13714
|
-
{
|
|
13715
|
-
"kind": "method",
|
|
13716
|
-
"name": "hide",
|
|
13717
|
-
"description": "Hides the dialog."
|
|
13718
|
-
},
|
|
13719
|
-
{
|
|
13720
|
-
"kind": "field",
|
|
13721
|
-
"name": "closeClickHandler",
|
|
13722
|
-
"privacy": "private"
|
|
13723
|
-
}
|
|
13724
|
-
],
|
|
13725
|
-
"events": [
|
|
13726
|
-
{
|
|
13727
|
-
"description": "Emitted when the dialog is opens.",
|
|
13728
|
-
"name": "zn-show"
|
|
13729
|
-
},
|
|
13730
|
-
{
|
|
13731
|
-
"description": "Emitted when the dialog is closed.",
|
|
13732
|
-
"name": "zn-close"
|
|
13733
|
-
},
|
|
13734
|
-
{
|
|
13735
|
-
"type": {
|
|
13736
|
-
"text": "{ source: 'close-button' | 'keyboard' | 'overlay' }"
|
|
13737
|
-
},
|
|
13738
|
-
"description": "Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.",
|
|
13739
|
-
"name": "zn-request-close"
|
|
13740
|
-
}
|
|
13741
|
-
],
|
|
13742
|
-
"attributes": [
|
|
13743
|
-
{
|
|
13744
|
-
"name": "variant",
|
|
13745
|
-
"type": {
|
|
13746
|
-
"text": "'default' | 'warning' | 'announcement'"
|
|
13747
|
-
},
|
|
13748
|
-
"default": "'default'",
|
|
13749
|
-
"description": "The dialog's theme variant.",
|
|
13750
|
-
"fieldName": "variant"
|
|
13751
|
-
},
|
|
13752
|
-
{
|
|
13753
|
-
"name": "size",
|
|
13754
|
-
"type": {
|
|
13755
|
-
"text": "'small' | 'medium' | 'large' | 'custom'"
|
|
13756
|
-
},
|
|
13757
|
-
"default": "'medium'",
|
|
13758
|
-
"description": "The dialog's size.",
|
|
13759
|
-
"fieldName": "size"
|
|
13760
|
-
},
|
|
13761
|
-
{
|
|
13762
|
-
"name": "open",
|
|
13763
|
-
"type": {
|
|
13764
|
-
"text": "boolean"
|
|
13765
|
-
},
|
|
13766
|
-
"default": "false",
|
|
13767
|
-
"description": "Indicated whether of not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's state.",
|
|
13768
|
-
"fieldName": "open"
|
|
13769
|
-
},
|
|
13770
|
-
{
|
|
13771
|
-
"name": "label",
|
|
13772
|
-
"type": {
|
|
13773
|
-
"text": "string"
|
|
13774
|
-
},
|
|
13775
|
-
"description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
|
|
13776
|
-
"fieldName": "label"
|
|
13777
|
-
},
|
|
13778
|
-
{
|
|
13779
|
-
"name": "cosmic",
|
|
13780
|
-
"type": {
|
|
13781
|
-
"text": "boolean"
|
|
13782
|
-
},
|
|
13783
|
-
"default": "false",
|
|
13784
|
-
"fieldName": "cosmic"
|
|
13785
|
-
},
|
|
13786
|
-
{
|
|
13787
|
-
"name": "no-header",
|
|
13788
|
-
"type": {
|
|
13789
|
-
"text": "boolean"
|
|
13790
|
-
},
|
|
13791
|
-
"default": "false",
|
|
13792
|
-
"description": "Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way to close the dialog.",
|
|
13793
|
-
"fieldName": "noHeader"
|
|
13794
|
-
},
|
|
13795
|
-
{
|
|
13796
|
-
"name": "trigger",
|
|
13797
|
-
"type": {
|
|
13798
|
-
"text": "string"
|
|
13799
|
-
},
|
|
13800
|
-
"description": "The dialog's trigger element. This is used to open the dialog when clicked. If you do not provide a trigger, you\nwill need to manually open the dialog using the `show()` method.",
|
|
13801
|
-
"fieldName": "trigger"
|
|
13802
|
-
}
|
|
13803
|
-
],
|
|
13804
|
-
"superclass": {
|
|
13805
|
-
"name": "ZincElement",
|
|
13806
|
-
"module": "/src/internal/zinc-element"
|
|
13807
|
-
},
|
|
13808
|
-
"summary": "Short summary of the component's intended use.",
|
|
13809
|
-
"tagNameWithoutPrefix": "dialog",
|
|
13810
|
-
"tagName": "zn-dialog",
|
|
13811
|
-
"customElement": true,
|
|
13812
|
-
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/dialog\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-button\n *\n * @event zn-show - Emitted when the dialog is opens.\n * @event zn-close - Emitted when the dialog is closed.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to\n * close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling\n * `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n * destructive behavior such as data loss.\n *\n * @slot - The default slot.\n * @slot label - The dialog's label. Alternatively you can use the `label` attribute.\n * @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied\n * to the icon depending on the dialog variant.\n * @slot announcement-intro - Optional Intro text to display below the icon, when using the variant `announcement`.\n * @slot header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.\n * @slot footer - The dialog's footer. This is typically used for buttons representing various options.\n * @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The dialog's header. This element wraps the title and header actions.\n * @csspart header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.\n * @csspart title - The dialog's title.\n * @csspart close-button - The dialog's close button.\n * @csspart close-button__base - The close buttons exported `base` part.\n * @csspart body - The dialog's body.\n * @csspart footer - The dialog's footer.\n *\n * @cssproperty --width - The preferred width of the dialog. Note the dialog will shrink to accommodate smaller screens.\n * @cssproperty --header-spacing - The amount of padding to use for the header.\n * @cssproperty --body-spacing - The amount of padding to use for the body.\n * @cssproperty --footer-spacing - The amount of padding to use for the footer.\n */",
|
|
13813
|
-
"documentation": "https://zinc.style/components/dialog",
|
|
13814
|
-
"status": "experimental",
|
|
13815
|
-
"since": "1.0",
|
|
13816
|
-
"dependencies": [
|
|
13817
|
-
"zn-button"
|
|
13818
|
-
]
|
|
13819
|
-
}
|
|
13820
|
-
],
|
|
13821
|
-
"exports": [
|
|
13822
|
-
{
|
|
13823
|
-
"kind": "js",
|
|
13824
|
-
"name": "default",
|
|
13825
|
-
"declaration": {
|
|
13826
|
-
"name": "ZnDialog",
|
|
13827
|
-
"module": "components/dialog/dialog.js"
|
|
13828
|
-
}
|
|
13829
|
-
}
|
|
13830
|
-
]
|
|
13831
|
-
},
|
|
13832
13832
|
{
|
|
13833
13833
|
"kind": "javascript-module",
|
|
13834
13834
|
"path": "components/editor/editor.js",
|
|
@@ -54179,7 +54179,7 @@
|
|
|
54179
54179
|
"package": {
|
|
54180
54180
|
"name": "@kubex/zinc",
|
|
54181
54181
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
54182
|
-
"version": "1.1.
|
|
54182
|
+
"version": "1.1.182",
|
|
54183
54183
|
"author": "",
|
|
54184
54184
|
"license": "MIT"
|
|
54185
54185
|
}
|