@nordhealth/components 1.0.0-rc.1 → 1.0.0-rc.2
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/custom-elements.json +874 -872
- package/lib/{Calendar-fc4a86a2.js → Calendar-243918b5.js} +1 -1
- package/lib/{Calendar-fc4a86a2.js.map → Calendar-243918b5.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/CommandMenu.js.map +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/Icon.js +1 -1
- package/lib/Icon.js.map +1 -1
- package/lib/Popout.js +1 -1
- package/lib/Popout.js.map +1 -1
- package/lib/bundle.js +2 -2
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/popout/Popout.d.ts +12 -15
- package/package.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -531,330 +531,410 @@
|
|
|
531
531
|
},
|
|
532
532
|
{
|
|
533
533
|
"kind": "javascript-module",
|
|
534
|
-
"path": "src/
|
|
534
|
+
"path": "src/button/Button.ts",
|
|
535
535
|
"declarations": [
|
|
536
536
|
{
|
|
537
537
|
"kind": "class",
|
|
538
|
-
"description": "
|
|
539
|
-
"name": "
|
|
540
|
-
"
|
|
538
|
+
"description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
|
|
539
|
+
"name": "Button",
|
|
540
|
+
"slots": [
|
|
541
541
|
{
|
|
542
|
-
"
|
|
543
|
-
"name": "
|
|
544
|
-
"type": {
|
|
545
|
-
"text": "string"
|
|
546
|
-
},
|
|
547
|
-
"privacy": "private",
|
|
548
|
-
"default": "\"dialog-header\""
|
|
542
|
+
"description": "The button content",
|
|
543
|
+
"name": ""
|
|
549
544
|
},
|
|
550
545
|
{
|
|
551
|
-
"
|
|
552
|
-
"name": "
|
|
553
|
-
"type": {
|
|
554
|
-
"text": "HTMLElement"
|
|
555
|
-
},
|
|
556
|
-
"privacy": "private"
|
|
546
|
+
"description": "Used to place content at the start of button text. Typically used for icons.",
|
|
547
|
+
"name": "start"
|
|
557
548
|
},
|
|
549
|
+
{
|
|
550
|
+
"description": "Used to place content at the end of button text. Typically used for icons.",
|
|
551
|
+
"name": "end"
|
|
552
|
+
}
|
|
553
|
+
],
|
|
554
|
+
"members": [
|
|
558
555
|
{
|
|
559
556
|
"kind": "field",
|
|
560
|
-
"name": "
|
|
561
|
-
"type": {
|
|
562
|
-
"text": "HTMLButtonElement"
|
|
563
|
-
},
|
|
557
|
+
"name": "buttonRef",
|
|
564
558
|
"privacy": "private"
|
|
565
559
|
},
|
|
566
560
|
{
|
|
567
561
|
"kind": "field",
|
|
568
|
-
"name": "
|
|
562
|
+
"name": "events",
|
|
569
563
|
"privacy": "private",
|
|
570
|
-
"default": "new
|
|
564
|
+
"default": "new EventController(this)"
|
|
571
565
|
},
|
|
572
566
|
{
|
|
573
567
|
"kind": "field",
|
|
574
|
-
"name": "
|
|
568
|
+
"name": "lightDom",
|
|
575
569
|
"privacy": "private",
|
|
576
|
-
"default": "new
|
|
570
|
+
"default": "new LightDomController(this, {\n render: () => this.renderLightDom(),\n })"
|
|
577
571
|
},
|
|
578
572
|
{
|
|
579
573
|
"kind": "field",
|
|
580
|
-
"name": "
|
|
581
|
-
"
|
|
574
|
+
"name": "variant",
|
|
575
|
+
"type": {
|
|
576
|
+
"text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
|
|
577
|
+
},
|
|
578
|
+
"default": "\"default\"",
|
|
579
|
+
"description": "The style variant of the button.",
|
|
580
|
+
"attribute": "variant",
|
|
581
|
+
"reflects": true
|
|
582
582
|
},
|
|
583
583
|
{
|
|
584
584
|
"kind": "field",
|
|
585
|
-
"name": "
|
|
585
|
+
"name": "type",
|
|
586
586
|
"type": {
|
|
587
|
-
"text": "
|
|
587
|
+
"text": "\"button\" | \"submit\" | \"reset\""
|
|
588
588
|
},
|
|
589
|
-
"
|
|
590
|
-
"description": "
|
|
589
|
+
"default": "\"submit\"",
|
|
590
|
+
"description": "The type of the button.",
|
|
591
|
+
"attribute": "type",
|
|
592
|
+
"reflects": true
|
|
591
593
|
},
|
|
592
594
|
{
|
|
593
595
|
"kind": "field",
|
|
594
|
-
"name": "
|
|
596
|
+
"name": "size",
|
|
595
597
|
"type": {
|
|
596
|
-
"text": "
|
|
598
|
+
"text": "\"s\" | \"m\" | \"l\""
|
|
597
599
|
},
|
|
598
|
-
"default": "
|
|
600
|
+
"default": "\"m\"",
|
|
601
|
+
"description": "The size of the button.\nThis affects font-size and padding.",
|
|
602
|
+
"attribute": "size",
|
|
603
|
+
"reflects": true
|
|
599
604
|
},
|
|
600
605
|
{
|
|
601
606
|
"kind": "field",
|
|
602
|
-
"name": "
|
|
607
|
+
"name": "accessibleExpanded",
|
|
603
608
|
"type": {
|
|
604
|
-
"text": "
|
|
609
|
+
"text": "\"true\" | \"false\" | undefined"
|
|
605
610
|
},
|
|
606
|
-
"
|
|
607
|
-
"
|
|
608
|
-
"attribute": "value"
|
|
611
|
+
"privacy": "private",
|
|
612
|
+
"attribute": "aria-expanded"
|
|
609
613
|
},
|
|
610
614
|
{
|
|
611
615
|
"kind": "field",
|
|
612
|
-
"name": "
|
|
616
|
+
"name": "accessibleHasPopup",
|
|
613
617
|
"type": {
|
|
614
|
-
"text": "
|
|
618
|
+
"text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
|
|
615
619
|
},
|
|
616
|
-
"
|
|
617
|
-
"attribute": "
|
|
620
|
+
"privacy": "private",
|
|
621
|
+
"attribute": "aria-haspopup"
|
|
618
622
|
},
|
|
619
623
|
{
|
|
620
624
|
"kind": "field",
|
|
621
|
-
"name": "
|
|
625
|
+
"name": "href",
|
|
622
626
|
"type": {
|
|
623
|
-
"text": "string"
|
|
627
|
+
"text": "string | undefined"
|
|
624
628
|
},
|
|
625
|
-
"
|
|
626
|
-
"
|
|
627
|
-
"
|
|
629
|
+
"description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
|
|
630
|
+
"attribute": "href",
|
|
631
|
+
"reflects": true
|
|
628
632
|
},
|
|
629
633
|
{
|
|
630
634
|
"kind": "field",
|
|
631
|
-
"name": "
|
|
635
|
+
"name": "download",
|
|
632
636
|
"type": {
|
|
633
|
-
"text": "
|
|
637
|
+
"text": "boolean"
|
|
634
638
|
},
|
|
635
|
-
"default": "
|
|
636
|
-
"description": "
|
|
637
|
-
"attribute": "
|
|
639
|
+
"default": "false",
|
|
640
|
+
"description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
|
|
641
|
+
"attribute": "download"
|
|
638
642
|
},
|
|
639
643
|
{
|
|
640
644
|
"kind": "field",
|
|
641
|
-
"name": "
|
|
645
|
+
"name": "target",
|
|
642
646
|
"type": {
|
|
643
|
-
"text": "
|
|
647
|
+
"text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
|
|
644
648
|
},
|
|
645
|
-
"default": "
|
|
646
|
-
"description": "
|
|
649
|
+
"default": "\"_self\"",
|
|
650
|
+
"description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
|
|
651
|
+
"attribute": "target",
|
|
652
|
+
"reflects": true
|
|
647
653
|
},
|
|
648
654
|
{
|
|
649
655
|
"kind": "field",
|
|
650
|
-
"name": "
|
|
656
|
+
"name": "expand",
|
|
651
657
|
"type": {
|
|
652
658
|
"text": "boolean"
|
|
653
659
|
},
|
|
654
|
-
"
|
|
655
|
-
"
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
"kind": "field",
|
|
659
|
-
"name": "focusedDay",
|
|
660
|
-
"privacy": "private",
|
|
661
|
-
"default": "new Date()"
|
|
662
|
-
},
|
|
663
|
-
{
|
|
664
|
-
"kind": "method",
|
|
665
|
-
"name": "focus",
|
|
666
|
-
"parameters": [
|
|
667
|
-
{
|
|
668
|
-
"name": "options",
|
|
669
|
-
"optional": true,
|
|
670
|
-
"type": {
|
|
671
|
-
"text": "FocusOptions & { target: \"day\" | \"month\" }"
|
|
672
|
-
},
|
|
673
|
-
"description": "An object which controls aspects of the focusing process."
|
|
674
|
-
}
|
|
675
|
-
],
|
|
676
|
-
"description": "Programmatically move focus to the calendar."
|
|
677
|
-
},
|
|
678
|
-
{
|
|
679
|
-
"kind": "method",
|
|
680
|
-
"name": "createDateFormatter",
|
|
681
|
-
"privacy": "private"
|
|
682
|
-
},
|
|
683
|
-
{
|
|
684
|
-
"kind": "field",
|
|
685
|
-
"name": "handleDaySelect",
|
|
686
|
-
"privacy": "private"
|
|
687
|
-
},
|
|
688
|
-
{
|
|
689
|
-
"kind": "method",
|
|
690
|
-
"name": "addDays",
|
|
691
|
-
"privacy": "private",
|
|
692
|
-
"parameters": [
|
|
693
|
-
{
|
|
694
|
-
"name": "days",
|
|
695
|
-
"type": {
|
|
696
|
-
"text": "number"
|
|
697
|
-
}
|
|
698
|
-
}
|
|
699
|
-
]
|
|
660
|
+
"default": "false",
|
|
661
|
+
"description": "Controls whether the button expands to fill the width of its container.",
|
|
662
|
+
"attribute": "expand",
|
|
663
|
+
"reflects": true
|
|
700
664
|
},
|
|
701
665
|
{
|
|
702
666
|
"kind": "method",
|
|
703
|
-
"name": "
|
|
667
|
+
"name": "renderLink",
|
|
704
668
|
"privacy": "private",
|
|
705
669
|
"parameters": [
|
|
706
670
|
{
|
|
707
|
-
"name": "
|
|
671
|
+
"name": "innards",
|
|
708
672
|
"type": {
|
|
709
|
-
"text": "
|
|
673
|
+
"text": "TemplateResult"
|
|
710
674
|
}
|
|
711
675
|
}
|
|
712
|
-
]
|
|
676
|
+
],
|
|
677
|
+
"description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
|
|
713
678
|
},
|
|
714
679
|
{
|
|
715
680
|
"kind": "method",
|
|
716
|
-
"name": "
|
|
681
|
+
"name": "renderButton",
|
|
717
682
|
"privacy": "private",
|
|
718
683
|
"parameters": [
|
|
719
684
|
{
|
|
720
|
-
"name": "
|
|
685
|
+
"name": "innards",
|
|
721
686
|
"type": {
|
|
722
|
-
"text": "
|
|
687
|
+
"text": "TemplateResult"
|
|
723
688
|
}
|
|
724
689
|
}
|
|
725
690
|
]
|
|
726
691
|
},
|
|
727
692
|
{
|
|
728
693
|
"kind": "method",
|
|
729
|
-
"name": "
|
|
694
|
+
"name": "renderLightDom",
|
|
730
695
|
"privacy": "private"
|
|
731
696
|
},
|
|
732
697
|
{
|
|
733
|
-
"kind": "
|
|
734
|
-
"name": "
|
|
698
|
+
"kind": "field",
|
|
699
|
+
"name": "handleOuterClick",
|
|
735
700
|
"privacy": "private"
|
|
736
701
|
},
|
|
737
702
|
{
|
|
738
703
|
"kind": "method",
|
|
739
|
-
"name": "
|
|
740
|
-
"privacy": "private",
|
|
741
|
-
"parameters": [
|
|
742
|
-
{
|
|
743
|
-
"name": "month",
|
|
744
|
-
"type": {
|
|
745
|
-
"text": "number"
|
|
746
|
-
}
|
|
747
|
-
}
|
|
748
|
-
]
|
|
749
|
-
},
|
|
750
|
-
{
|
|
751
|
-
"kind": "method",
|
|
752
|
-
"name": "setYear",
|
|
753
|
-
"privacy": "private",
|
|
754
|
-
"parameters": [
|
|
755
|
-
{
|
|
756
|
-
"name": "year",
|
|
757
|
-
"type": {
|
|
758
|
-
"text": "number"
|
|
759
|
-
}
|
|
760
|
-
}
|
|
761
|
-
]
|
|
762
|
-
},
|
|
763
|
-
{
|
|
764
|
-
"kind": "method",
|
|
765
|
-
"name": "setFocusedDay",
|
|
704
|
+
"name": "handleClick",
|
|
766
705
|
"privacy": "private",
|
|
767
706
|
"parameters": [
|
|
768
707
|
{
|
|
769
|
-
"name": "
|
|
708
|
+
"name": "e",
|
|
770
709
|
"type": {
|
|
771
|
-
"text": "
|
|
710
|
+
"text": "Event"
|
|
772
711
|
}
|
|
773
712
|
}
|
|
774
713
|
]
|
|
775
714
|
},
|
|
776
715
|
{
|
|
777
716
|
"kind": "field",
|
|
778
|
-
"name": "
|
|
779
|
-
"
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
"
|
|
783
|
-
"
|
|
784
|
-
"
|
|
717
|
+
"name": "disabled",
|
|
718
|
+
"type": {
|
|
719
|
+
"text": "boolean"
|
|
720
|
+
},
|
|
721
|
+
"default": "false",
|
|
722
|
+
"description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
|
|
723
|
+
"attribute": "disabled",
|
|
724
|
+
"reflects": true,
|
|
725
|
+
"inheritedFrom": {
|
|
726
|
+
"name": "InputMixin",
|
|
727
|
+
"module": "src/common/mixins/InputMixin.ts"
|
|
728
|
+
}
|
|
785
729
|
},
|
|
786
730
|
{
|
|
787
731
|
"kind": "field",
|
|
788
|
-
"name": "
|
|
789
|
-
"
|
|
732
|
+
"name": "name",
|
|
733
|
+
"type": {
|
|
734
|
+
"text": "string | undefined"
|
|
735
|
+
},
|
|
736
|
+
"description": "The name of the form component.",
|
|
737
|
+
"attribute": "name",
|
|
738
|
+
"inheritedFrom": {
|
|
739
|
+
"name": "InputMixin",
|
|
740
|
+
"module": "src/common/mixins/InputMixin.ts"
|
|
741
|
+
}
|
|
790
742
|
},
|
|
791
743
|
{
|
|
792
744
|
"kind": "field",
|
|
793
|
-
"name": "
|
|
794
|
-
"
|
|
745
|
+
"name": "value",
|
|
746
|
+
"type": {
|
|
747
|
+
"text": "string"
|
|
748
|
+
},
|
|
749
|
+
"default": "\"\"",
|
|
750
|
+
"description": "The value of the form component.",
|
|
751
|
+
"attribute": "value",
|
|
752
|
+
"inheritedFrom": {
|
|
753
|
+
"name": "InputMixin",
|
|
754
|
+
"module": "src/common/mixins/InputMixin.ts"
|
|
755
|
+
}
|
|
795
756
|
},
|
|
796
757
|
{
|
|
797
758
|
"kind": "field",
|
|
798
|
-
"name": "
|
|
799
|
-
"privacy": "
|
|
759
|
+
"name": "form",
|
|
760
|
+
"privacy": "protected",
|
|
761
|
+
"description": "Gets the form, if any, associated with the form element.",
|
|
762
|
+
"inheritedFrom": {
|
|
763
|
+
"name": "InputMixin",
|
|
764
|
+
"module": "src/common/mixins/InputMixin.ts"
|
|
765
|
+
}
|
|
800
766
|
},
|
|
801
767
|
{
|
|
802
768
|
"kind": "field",
|
|
803
|
-
"name": "
|
|
804
|
-
"privacy": "
|
|
769
|
+
"name": "focusableRef",
|
|
770
|
+
"privacy": "protected",
|
|
771
|
+
"inheritedFrom": {
|
|
772
|
+
"name": "FocusableMixin",
|
|
773
|
+
"module": "src/common/mixins/FocusableMixin.ts"
|
|
774
|
+
}
|
|
775
|
+
},
|
|
776
|
+
{
|
|
777
|
+
"kind": "method",
|
|
778
|
+
"name": "focus",
|
|
779
|
+
"parameters": [
|
|
780
|
+
{
|
|
781
|
+
"name": "options",
|
|
782
|
+
"optional": true,
|
|
783
|
+
"type": {
|
|
784
|
+
"text": "FocusOptions"
|
|
785
|
+
},
|
|
786
|
+
"description": "An object which controls aspects of the focusing process."
|
|
787
|
+
}
|
|
788
|
+
],
|
|
789
|
+
"description": "Programmatically move focus to the component.",
|
|
790
|
+
"inheritedFrom": {
|
|
791
|
+
"name": "FocusableMixin",
|
|
792
|
+
"module": "src/common/mixins/FocusableMixin.ts"
|
|
793
|
+
}
|
|
794
|
+
},
|
|
795
|
+
{
|
|
796
|
+
"kind": "method",
|
|
797
|
+
"name": "blur",
|
|
798
|
+
"description": "Programmatically remove focus from the component.",
|
|
799
|
+
"inheritedFrom": {
|
|
800
|
+
"name": "FocusableMixin",
|
|
801
|
+
"module": "src/common/mixins/FocusableMixin.ts"
|
|
802
|
+
}
|
|
803
|
+
},
|
|
804
|
+
{
|
|
805
|
+
"kind": "method",
|
|
806
|
+
"name": "click",
|
|
807
|
+
"description": "Programmatically simulates a click on the component.",
|
|
808
|
+
"inheritedFrom": {
|
|
809
|
+
"name": "FocusableMixin",
|
|
810
|
+
"module": "src/common/mixins/FocusableMixin.ts"
|
|
811
|
+
}
|
|
805
812
|
}
|
|
806
813
|
],
|
|
807
|
-
"
|
|
814
|
+
"attributes": [
|
|
808
815
|
{
|
|
809
|
-
"name": "
|
|
816
|
+
"name": "variant",
|
|
810
817
|
"type": {
|
|
811
|
-
"text": "
|
|
818
|
+
"text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
|
|
812
819
|
},
|
|
813
|
-
"
|
|
820
|
+
"default": "\"default\"",
|
|
821
|
+
"description": "The style variant of the button.",
|
|
822
|
+
"fieldName": "variant"
|
|
814
823
|
},
|
|
815
824
|
{
|
|
825
|
+
"name": "type",
|
|
816
826
|
"type": {
|
|
817
|
-
"text": "
|
|
827
|
+
"text": "\"button\" | \"submit\" | \"reset\""
|
|
818
828
|
},
|
|
819
|
-
"
|
|
820
|
-
"
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
"attributes": [
|
|
829
|
+
"default": "\"submit\"",
|
|
830
|
+
"description": "The type of the button.",
|
|
831
|
+
"fieldName": "type"
|
|
832
|
+
},
|
|
824
833
|
{
|
|
825
|
-
"name": "
|
|
834
|
+
"name": "size",
|
|
826
835
|
"type": {
|
|
827
|
-
"text": "
|
|
836
|
+
"text": "\"s\" | \"m\" | \"l\""
|
|
828
837
|
},
|
|
829
|
-
"default": "\"\"",
|
|
830
|
-
"description": "The
|
|
831
|
-
"fieldName": "
|
|
838
|
+
"default": "\"m\"",
|
|
839
|
+
"description": "The size of the button.\nThis affects font-size and padding.",
|
|
840
|
+
"fieldName": "size"
|
|
832
841
|
},
|
|
833
842
|
{
|
|
834
|
-
"name": "
|
|
843
|
+
"name": "aria-expanded",
|
|
835
844
|
"type": {
|
|
836
|
-
"text": "
|
|
845
|
+
"text": "\"true\" | \"false\" | undefined"
|
|
837
846
|
},
|
|
838
|
-
"
|
|
839
|
-
"fieldName": "firstDayOfWeek"
|
|
847
|
+
"fieldName": "accessibleExpanded"
|
|
840
848
|
},
|
|
841
849
|
{
|
|
842
|
-
"name": "
|
|
850
|
+
"name": "aria-haspopup",
|
|
843
851
|
"type": {
|
|
844
|
-
"text": "
|
|
852
|
+
"text": "| \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\" | undefined"
|
|
845
853
|
},
|
|
846
|
-
"
|
|
847
|
-
"description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
|
|
848
|
-
"fieldName": "min"
|
|
854
|
+
"fieldName": "accessibleHasPopup"
|
|
849
855
|
},
|
|
850
856
|
{
|
|
851
|
-
"name": "
|
|
857
|
+
"name": "href",
|
|
858
|
+
"type": {
|
|
859
|
+
"text": "string | undefined"
|
|
860
|
+
},
|
|
861
|
+
"description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
|
|
862
|
+
"fieldName": "href"
|
|
863
|
+
},
|
|
864
|
+
{
|
|
865
|
+
"name": "download",
|
|
866
|
+
"type": {
|
|
867
|
+
"text": "boolean"
|
|
868
|
+
},
|
|
869
|
+
"default": "false",
|
|
870
|
+
"description": "When provided together with a href property, the button will\ntrigger a file download instead of a page visit.",
|
|
871
|
+
"fieldName": "download"
|
|
872
|
+
},
|
|
873
|
+
{
|
|
874
|
+
"name": "target",
|
|
875
|
+
"type": {
|
|
876
|
+
"text": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\""
|
|
877
|
+
},
|
|
878
|
+
"default": "\"_self\"",
|
|
879
|
+
"description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
|
|
880
|
+
"fieldName": "target"
|
|
881
|
+
},
|
|
882
|
+
{
|
|
883
|
+
"name": "expand",
|
|
884
|
+
"type": {
|
|
885
|
+
"text": "boolean"
|
|
886
|
+
},
|
|
887
|
+
"default": "false",
|
|
888
|
+
"description": "Controls whether the button expands to fill the width of its container.",
|
|
889
|
+
"fieldName": "expand"
|
|
890
|
+
},
|
|
891
|
+
{
|
|
892
|
+
"name": "disabled",
|
|
893
|
+
"type": {
|
|
894
|
+
"text": "boolean"
|
|
895
|
+
},
|
|
896
|
+
"default": "false",
|
|
897
|
+
"description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
|
|
898
|
+
"fieldName": "disabled",
|
|
899
|
+
"inheritedFrom": {
|
|
900
|
+
"name": "InputMixin",
|
|
901
|
+
"module": "src/common/mixins/InputMixin.ts"
|
|
902
|
+
}
|
|
903
|
+
},
|
|
904
|
+
{
|
|
905
|
+
"name": "name",
|
|
906
|
+
"type": {
|
|
907
|
+
"text": "string | undefined"
|
|
908
|
+
},
|
|
909
|
+
"description": "The name of the form component.",
|
|
910
|
+
"fieldName": "name",
|
|
911
|
+
"inheritedFrom": {
|
|
912
|
+
"name": "InputMixin",
|
|
913
|
+
"module": "src/common/mixins/InputMixin.ts"
|
|
914
|
+
}
|
|
915
|
+
},
|
|
916
|
+
{
|
|
917
|
+
"name": "value",
|
|
852
918
|
"type": {
|
|
853
919
|
"text": "string"
|
|
854
920
|
},
|
|
855
921
|
"default": "\"\"",
|
|
856
|
-
"description": "
|
|
857
|
-
"fieldName": "
|
|
922
|
+
"description": "The value of the form component.",
|
|
923
|
+
"fieldName": "value",
|
|
924
|
+
"inheritedFrom": {
|
|
925
|
+
"name": "InputMixin",
|
|
926
|
+
"module": "src/common/mixins/InputMixin.ts"
|
|
927
|
+
}
|
|
928
|
+
}
|
|
929
|
+
],
|
|
930
|
+
"mixins": [
|
|
931
|
+
{
|
|
932
|
+
"name": "InputMixin",
|
|
933
|
+
"module": "/src/common/mixins/InputMixin.js"
|
|
934
|
+
},
|
|
935
|
+
{
|
|
936
|
+
"name": "FocusableMixin",
|
|
937
|
+
"module": "/src/common/mixins/FocusableMixin.js"
|
|
858
938
|
}
|
|
859
939
|
],
|
|
860
940
|
"superclass": {
|
|
@@ -862,8 +942,8 @@
|
|
|
862
942
|
"package": "lit"
|
|
863
943
|
},
|
|
864
944
|
"status": "ready",
|
|
865
|
-
"category": "
|
|
866
|
-
"tagName": "nord-
|
|
945
|
+
"category": "action",
|
|
946
|
+
"tagName": "nord-button",
|
|
867
947
|
"customElement": true
|
|
868
948
|
}
|
|
869
949
|
],
|
|
@@ -872,537 +952,347 @@
|
|
|
872
952
|
"kind": "js",
|
|
873
953
|
"name": "default",
|
|
874
954
|
"declaration": {
|
|
875
|
-
"name": "
|
|
876
|
-
"module": "src/
|
|
955
|
+
"name": "Button",
|
|
956
|
+
"module": "src/button/Button.ts"
|
|
877
957
|
}
|
|
878
958
|
},
|
|
879
959
|
{
|
|
880
960
|
"kind": "custom-element-definition",
|
|
881
|
-
"name": "nord-
|
|
961
|
+
"name": "nord-button",
|
|
882
962
|
"declaration": {
|
|
883
|
-
"name": "
|
|
884
|
-
"module": "src/
|
|
963
|
+
"name": "Button",
|
|
964
|
+
"module": "src/button/Button.ts"
|
|
885
965
|
}
|
|
886
966
|
}
|
|
887
967
|
],
|
|
888
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use
|
|
968
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use clear and accurate labels.\n- Use established button colors appropriately. For example, only use a danger button style for an action that’s difficult or impossible to undo.\n- Prioritize the most important actions. Too many buttons will cause confusion.\n- Be consistent with positioning of buttons in the user interface.\n- Use strong, actionable verbs in labels such as “Add”, “Close”, “Cancel”, or “Save”.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use buttons to link to other pages. Use regular link or a plain style instead where necessary.\n- Don’t use buttons for navigation where the link appears within or following a sentence.\n- Don’t use labels such as “Read more”, “Click here” or “More”.\n\n</div>\n\n---\n\n## Content guidelines\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">View user settings</div>\n<div class=\"n-usage n-usage-dont\">Click here</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">My tasks</div>\n<div class=\"n-usage n-usage-dont\">My Tasks</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Add item</div>\n<div class=\"n-usage n-usage-dont\">Add an item</div>\n\n---\n\n## Variants\n\nThis section describes the different component variants, their purpose, and when to use each variant.\n\n| Name | Purpose |\n| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `default` | Default style is the most common button variant. Only switch to another variant if you need to adjust the visual weight of the element. |\n| `primary` | Primary style is reserved for main call-to-actions. Should be used only once per content area or panel, e.g. for a “Save” action. |\n| `dashed` | Dashed style should be used for actions that trigger filtering. |\n| `danger` | Danger style should be used for actions that delete data or otherwise make it hard to undo the action. |\n| `plain` | Used for less important or less common actions. Can be also used for linking to other pages. |\n| `disabled` | Used for actions that aren’t currently available or not available anymore. Also prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. |\n\n---\n\n## Additional considerations\n\n- Users of assistive technology expect a button to submit data or do an action. If you need the button to navigate into another view, use the `href` property which will output `<a>` tag instead of a `<button>`.\n- When you need to disable a button, use `disabled` property as it conveys this information correctly to assistive technologies like screen readers.\n- Button component provides 3 size variants; small, medium and large. The large size should only be used for marketing purposes or on areas such as an empty space/content notice.\n"
|
|
889
969
|
},
|
|
890
970
|
{
|
|
891
971
|
"kind": "javascript-module",
|
|
892
|
-
"path": "src/calendar/
|
|
972
|
+
"path": "src/calendar/Calendar.ts",
|
|
893
973
|
"declarations": [
|
|
894
974
|
{
|
|
895
975
|
"kind": "class",
|
|
896
|
-
"description": "",
|
|
897
|
-
"name": "
|
|
976
|
+
"description": "Calendar allows user to pick a date. It comes with built-in\nfunctionality that allows you to set a minimum and a maximum allowed date.\nPlease note that the date must be passed in ISO-8601 format.",
|
|
977
|
+
"name": "Calendar",
|
|
898
978
|
"members": [
|
|
899
979
|
{
|
|
900
980
|
"kind": "field",
|
|
901
|
-
"name": "
|
|
981
|
+
"name": "dialogLabelId",
|
|
902
982
|
"type": {
|
|
903
|
-
"text": "
|
|
983
|
+
"text": "string"
|
|
904
984
|
},
|
|
905
|
-
"
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
"superclass": {
|
|
909
|
-
"name": "NordEvent",
|
|
910
|
-
"module": "/src/common/events.js"
|
|
911
|
-
}
|
|
912
|
-
}
|
|
913
|
-
],
|
|
914
|
-
"exports": [
|
|
915
|
-
{
|
|
916
|
-
"kind": "js",
|
|
917
|
-
"name": "DateSelectEvent",
|
|
918
|
-
"declaration": {
|
|
919
|
-
"name": "DateSelectEvent",
|
|
920
|
-
"module": "src/calendar/DateSelectEvent.ts"
|
|
921
|
-
}
|
|
922
|
-
}
|
|
923
|
-
],
|
|
924
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
|
|
925
|
-
},
|
|
926
|
-
{
|
|
927
|
-
"kind": "javascript-module",
|
|
928
|
-
"path": "src/calendar/calendar-localization.ts",
|
|
929
|
-
"declarations": [
|
|
930
|
-
{
|
|
931
|
-
"kind": "variable",
|
|
932
|
-
"name": "localization",
|
|
933
|
-
"type": {
|
|
934
|
-
"text": "CalendarLocalizedText"
|
|
935
|
-
},
|
|
936
|
-
"default": "{\n prevMonthLabel: \"Previous month\",\n nextMonthLabel: \"Next month\",\n monthSelectLabel: \"Month\",\n yearSelectLabel: \"Year\",\n calendarHeading: \"Choose a date\",\n dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n monthNames: [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ],\n monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n locale: \"en-GB\",\n}"
|
|
937
|
-
}
|
|
938
|
-
],
|
|
939
|
-
"exports": [
|
|
940
|
-
{
|
|
941
|
-
"kind": "js",
|
|
942
|
-
"name": "default",
|
|
943
|
-
"declaration": {
|
|
944
|
-
"name": "localization",
|
|
945
|
-
"module": "src/calendar/calendar-localization.ts"
|
|
946
|
-
}
|
|
947
|
-
}
|
|
948
|
-
],
|
|
949
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
|
|
950
|
-
},
|
|
951
|
-
{
|
|
952
|
-
"kind": "javascript-module",
|
|
953
|
-
"path": "src/calendar/month-view.ts",
|
|
954
|
-
"declarations": [
|
|
955
|
-
{
|
|
956
|
-
"kind": "function",
|
|
957
|
-
"name": "dayView",
|
|
958
|
-
"parameters": [
|
|
985
|
+
"privacy": "private",
|
|
986
|
+
"default": "\"dialog-header\""
|
|
987
|
+
},
|
|
959
988
|
{
|
|
960
|
-
"
|
|
989
|
+
"kind": "field",
|
|
990
|
+
"name": "monthSelectNode",
|
|
961
991
|
"type": {
|
|
962
|
-
"text": "
|
|
963
|
-
}
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
},
|
|
967
|
-
{
|
|
968
|
-
"kind": "function",
|
|
969
|
-
"name": "monthView",
|
|
970
|
-
"parameters": [
|
|
992
|
+
"text": "HTMLElement"
|
|
993
|
+
},
|
|
994
|
+
"privacy": "private"
|
|
995
|
+
},
|
|
971
996
|
{
|
|
972
|
-
"
|
|
997
|
+
"kind": "field",
|
|
998
|
+
"name": "focusedDayNode",
|
|
973
999
|
"type": {
|
|
974
|
-
"text": "
|
|
975
|
-
}
|
|
976
|
-
|
|
977
|
-
]
|
|
978
|
-
}
|
|
979
|
-
],
|
|
980
|
-
"exports": [
|
|
981
|
-
{
|
|
982
|
-
"kind": "js",
|
|
983
|
-
"name": "dayView",
|
|
984
|
-
"declaration": {
|
|
985
|
-
"name": "dayView",
|
|
986
|
-
"module": "src/calendar/month-view.ts"
|
|
987
|
-
}
|
|
988
|
-
},
|
|
989
|
-
{
|
|
990
|
-
"kind": "js",
|
|
991
|
-
"name": "monthView",
|
|
992
|
-
"declaration": {
|
|
993
|
-
"name": "monthView",
|
|
994
|
-
"module": "src/calendar/month-view.ts"
|
|
995
|
-
}
|
|
996
|
-
}
|
|
997
|
-
],
|
|
998
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
|
|
999
|
-
},
|
|
1000
|
-
{
|
|
1001
|
-
"kind": "javascript-module",
|
|
1002
|
-
"path": "src/button/Button.ts",
|
|
1003
|
-
"declarations": [
|
|
1004
|
-
{
|
|
1005
|
-
"kind": "class",
|
|
1006
|
-
"description": "Buttons are used for interface actions. Primary style should be\nused only once per section for main call-to-action, while other\nstyles can appear more frequently.",
|
|
1007
|
-
"name": "Button",
|
|
1008
|
-
"slots": [
|
|
1009
|
-
{
|
|
1010
|
-
"description": "The button content",
|
|
1011
|
-
"name": ""
|
|
1000
|
+
"text": "HTMLButtonElement"
|
|
1001
|
+
},
|
|
1002
|
+
"privacy": "private"
|
|
1012
1003
|
},
|
|
1013
1004
|
{
|
|
1014
|
-
"
|
|
1015
|
-
"name": "
|
|
1005
|
+
"kind": "field",
|
|
1006
|
+
"name": "direction",
|
|
1007
|
+
"privacy": "private",
|
|
1008
|
+
"default": "new DirectionController(this)"
|
|
1016
1009
|
},
|
|
1017
|
-
{
|
|
1018
|
-
"description": "Used to place content at the end of button text. Typically used for icons.",
|
|
1019
|
-
"name": "end"
|
|
1020
|
-
}
|
|
1021
|
-
],
|
|
1022
|
-
"members": [
|
|
1023
1010
|
{
|
|
1024
1011
|
"kind": "field",
|
|
1025
|
-
"name": "
|
|
1026
|
-
"privacy": "private"
|
|
1012
|
+
"name": "swipe",
|
|
1013
|
+
"privacy": "private",
|
|
1014
|
+
"default": "new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })"
|
|
1027
1015
|
},
|
|
1028
1016
|
{
|
|
1029
1017
|
"kind": "field",
|
|
1030
|
-
"name": "
|
|
1031
|
-
"privacy": "private"
|
|
1032
|
-
"default": "new EventController(this)"
|
|
1018
|
+
"name": "shortcuts",
|
|
1019
|
+
"privacy": "private"
|
|
1033
1020
|
},
|
|
1034
1021
|
{
|
|
1035
1022
|
"kind": "field",
|
|
1036
|
-
"name": "
|
|
1023
|
+
"name": "dateFormatShort",
|
|
1024
|
+
"type": {
|
|
1025
|
+
"text": "Intl.DateTimeFormat"
|
|
1026
|
+
},
|
|
1037
1027
|
"privacy": "private",
|
|
1038
|
-
"
|
|
1028
|
+
"description": "Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\nthese are used to format dates exclusively for the benefit of screen readers.\n\nWe prefer DateTimeFormat over date.toLocaleDateString, as the former has\nbetter performance when formatting large number of dates. See:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance"
|
|
1039
1029
|
},
|
|
1040
1030
|
{
|
|
1041
1031
|
"kind": "field",
|
|
1042
|
-
"name": "
|
|
1032
|
+
"name": "localization",
|
|
1043
1033
|
"type": {
|
|
1044
|
-
"text": "
|
|
1034
|
+
"text": "CalendarLocalizedText"
|
|
1045
1035
|
},
|
|
1046
|
-
"default": "
|
|
1047
|
-
"description": "The style variant of the button.",
|
|
1048
|
-
"attribute": "variant",
|
|
1049
|
-
"reflects": true
|
|
1036
|
+
"default": "localization"
|
|
1050
1037
|
},
|
|
1051
1038
|
{
|
|
1052
1039
|
"kind": "field",
|
|
1053
|
-
"name": "
|
|
1040
|
+
"name": "value",
|
|
1054
1041
|
"type": {
|
|
1055
|
-
"text": "
|
|
1042
|
+
"text": "string"
|
|
1056
1043
|
},
|
|
1057
|
-
"default": "\"
|
|
1058
|
-
"description": "The
|
|
1059
|
-
"attribute": "
|
|
1060
|
-
"reflects": true
|
|
1044
|
+
"default": "\"\"",
|
|
1045
|
+
"description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
|
|
1046
|
+
"attribute": "value"
|
|
1061
1047
|
},
|
|
1062
1048
|
{
|
|
1063
1049
|
"kind": "field",
|
|
1064
|
-
"name": "
|
|
1050
|
+
"name": "firstDayOfWeek",
|
|
1065
1051
|
"type": {
|
|
1066
|
-
"text": "
|
|
1052
|
+
"text": "DaysOfWeek"
|
|
1067
1053
|
},
|
|
1068
|
-
"
|
|
1069
|
-
"
|
|
1070
|
-
"attribute": "size",
|
|
1071
|
-
"reflects": true
|
|
1054
|
+
"description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
|
|
1055
|
+
"attribute": "firstDayOfWeek"
|
|
1072
1056
|
},
|
|
1073
1057
|
{
|
|
1074
1058
|
"kind": "field",
|
|
1075
|
-
"name": "
|
|
1059
|
+
"name": "min",
|
|
1076
1060
|
"type": {
|
|
1077
|
-
"text": "
|
|
1061
|
+
"text": "string"
|
|
1078
1062
|
},
|
|
1079
|
-
"
|
|
1080
|
-
"
|
|
1063
|
+
"default": "\"\"",
|
|
1064
|
+
"description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
|
|
1065
|
+
"attribute": "min"
|
|
1081
1066
|
},
|
|
1082
1067
|
{
|
|
1083
1068
|
"kind": "field",
|
|
1084
|
-
"name": "
|
|
1069
|
+
"name": "max",
|
|
1085
1070
|
"type": {
|
|
1086
|
-
"text": "
|
|
1071
|
+
"text": "string"
|
|
1087
1072
|
},
|
|
1088
|
-
"
|
|
1089
|
-
"
|
|
1073
|
+
"default": "\"\"",
|
|
1074
|
+
"description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
|
|
1075
|
+
"attribute": "max"
|
|
1090
1076
|
},
|
|
1091
1077
|
{
|
|
1092
1078
|
"kind": "field",
|
|
1093
|
-
"name": "
|
|
1079
|
+
"name": "isDateDisabled",
|
|
1094
1080
|
"type": {
|
|
1095
|
-
"text": "
|
|
1081
|
+
"text": "DateDisabledPredicate"
|
|
1096
1082
|
},
|
|
1097
|
-
"
|
|
1098
|
-
"
|
|
1099
|
-
"reflects": true
|
|
1083
|
+
"default": "isDateDisabled",
|
|
1084
|
+
"description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends."
|
|
1100
1085
|
},
|
|
1101
1086
|
{
|
|
1102
1087
|
"kind": "field",
|
|
1103
|
-
"name": "
|
|
1088
|
+
"name": "activeFocus",
|
|
1104
1089
|
"type": {
|
|
1105
1090
|
"text": "boolean"
|
|
1106
1091
|
},
|
|
1107
|
-
"
|
|
1108
|
-
"
|
|
1109
|
-
"attribute": "download"
|
|
1092
|
+
"privacy": "private",
|
|
1093
|
+
"default": "false"
|
|
1110
1094
|
},
|
|
1111
1095
|
{
|
|
1112
1096
|
"kind": "field",
|
|
1113
|
-
"name": "
|
|
1114
|
-
"
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
"
|
|
1119
|
-
"
|
|
1120
|
-
"
|
|
1097
|
+
"name": "focusedDay",
|
|
1098
|
+
"privacy": "private",
|
|
1099
|
+
"default": "new Date()"
|
|
1100
|
+
},
|
|
1101
|
+
{
|
|
1102
|
+
"kind": "method",
|
|
1103
|
+
"name": "focus",
|
|
1104
|
+
"parameters": [
|
|
1105
|
+
{
|
|
1106
|
+
"name": "options",
|
|
1107
|
+
"optional": true,
|
|
1108
|
+
"type": {
|
|
1109
|
+
"text": "FocusOptions & { target: \"day\" | \"month\" }"
|
|
1110
|
+
},
|
|
1111
|
+
"description": "An object which controls aspects of the focusing process."
|
|
1112
|
+
}
|
|
1113
|
+
],
|
|
1114
|
+
"description": "Programmatically move focus to the calendar."
|
|
1115
|
+
},
|
|
1116
|
+
{
|
|
1117
|
+
"kind": "method",
|
|
1118
|
+
"name": "createDateFormatter",
|
|
1119
|
+
"privacy": "private"
|
|
1121
1120
|
},
|
|
1122
1121
|
{
|
|
1123
1122
|
"kind": "field",
|
|
1124
|
-
"name": "
|
|
1125
|
-
"
|
|
1126
|
-
"text": "boolean"
|
|
1127
|
-
},
|
|
1128
|
-
"default": "false",
|
|
1129
|
-
"description": "Controls whether the button expands to fill the width of its container.",
|
|
1130
|
-
"attribute": "expand",
|
|
1131
|
-
"reflects": true
|
|
1123
|
+
"name": "handleDaySelect",
|
|
1124
|
+
"privacy": "private"
|
|
1132
1125
|
},
|
|
1133
1126
|
{
|
|
1134
1127
|
"kind": "method",
|
|
1135
|
-
"name": "
|
|
1128
|
+
"name": "addDays",
|
|
1136
1129
|
"privacy": "private",
|
|
1137
1130
|
"parameters": [
|
|
1138
1131
|
{
|
|
1139
|
-
"name": "
|
|
1132
|
+
"name": "days",
|
|
1140
1133
|
"type": {
|
|
1141
|
-
"text": "
|
|
1134
|
+
"text": "number"
|
|
1142
1135
|
}
|
|
1143
1136
|
}
|
|
1144
|
-
]
|
|
1145
|
-
"description": "We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\nLinks cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\nAlong with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order."
|
|
1137
|
+
]
|
|
1146
1138
|
},
|
|
1147
1139
|
{
|
|
1148
1140
|
"kind": "method",
|
|
1149
|
-
"name": "
|
|
1141
|
+
"name": "addMonths",
|
|
1150
1142
|
"privacy": "private",
|
|
1151
1143
|
"parameters": [
|
|
1152
1144
|
{
|
|
1153
|
-
"name": "
|
|
1145
|
+
"name": "months",
|
|
1154
1146
|
"type": {
|
|
1155
|
-
"text": "
|
|
1147
|
+
"text": "number"
|
|
1156
1148
|
}
|
|
1157
1149
|
}
|
|
1158
1150
|
]
|
|
1159
1151
|
},
|
|
1160
1152
|
{
|
|
1161
1153
|
"kind": "method",
|
|
1162
|
-
"name": "
|
|
1163
|
-
"privacy": "private"
|
|
1164
|
-
},
|
|
1165
|
-
{
|
|
1166
|
-
"kind": "field",
|
|
1167
|
-
"name": "handleOuterClick",
|
|
1168
|
-
"privacy": "private"
|
|
1169
|
-
},
|
|
1170
|
-
{
|
|
1171
|
-
"kind": "method",
|
|
1172
|
-
"name": "handleClick",
|
|
1154
|
+
"name": "addYears",
|
|
1173
1155
|
"privacy": "private",
|
|
1174
1156
|
"parameters": [
|
|
1175
1157
|
{
|
|
1176
|
-
"name": "
|
|
1158
|
+
"name": "years",
|
|
1177
1159
|
"type": {
|
|
1178
|
-
"text": "
|
|
1160
|
+
"text": "number"
|
|
1179
1161
|
}
|
|
1180
1162
|
}
|
|
1181
1163
|
]
|
|
1182
1164
|
},
|
|
1183
1165
|
{
|
|
1184
|
-
"kind": "
|
|
1185
|
-
"name": "
|
|
1186
|
-
"
|
|
1187
|
-
"text": "boolean"
|
|
1188
|
-
},
|
|
1189
|
-
"default": "false",
|
|
1190
|
-
"description": "Makes the component disabled. This prevents users from\nbeing able to interact with the component, and conveys\nits inactive state to assistive technologies.",
|
|
1191
|
-
"attribute": "disabled",
|
|
1192
|
-
"reflects": true,
|
|
1193
|
-
"inheritedFrom": {
|
|
1194
|
-
"name": "InputMixin",
|
|
1195
|
-
"module": "src/common/mixins/InputMixin.ts"
|
|
1196
|
-
}
|
|
1197
|
-
},
|
|
1198
|
-
{
|
|
1199
|
-
"kind": "field",
|
|
1200
|
-
"name": "name",
|
|
1201
|
-
"type": {
|
|
1202
|
-
"text": "string | undefined"
|
|
1203
|
-
},
|
|
1204
|
-
"description": "The name of the form component.",
|
|
1205
|
-
"attribute": "name",
|
|
1206
|
-
"inheritedFrom": {
|
|
1207
|
-
"name": "InputMixin",
|
|
1208
|
-
"module": "src/common/mixins/InputMixin.ts"
|
|
1209
|
-
}
|
|
1210
|
-
},
|
|
1211
|
-
{
|
|
1212
|
-
"kind": "field",
|
|
1213
|
-
"name": "value",
|
|
1214
|
-
"type": {
|
|
1215
|
-
"text": "string"
|
|
1216
|
-
},
|
|
1217
|
-
"default": "\"\"",
|
|
1218
|
-
"description": "The value of the form component.",
|
|
1219
|
-
"attribute": "value",
|
|
1220
|
-
"inheritedFrom": {
|
|
1221
|
-
"name": "InputMixin",
|
|
1222
|
-
"module": "src/common/mixins/InputMixin.ts"
|
|
1223
|
-
}
|
|
1224
|
-
},
|
|
1225
|
-
{
|
|
1226
|
-
"kind": "field",
|
|
1227
|
-
"name": "form",
|
|
1228
|
-
"privacy": "protected",
|
|
1229
|
-
"description": "Gets the form, if any, associated with the form element.",
|
|
1230
|
-
"inheritedFrom": {
|
|
1231
|
-
"name": "InputMixin",
|
|
1232
|
-
"module": "src/common/mixins/InputMixin.ts"
|
|
1233
|
-
}
|
|
1166
|
+
"kind": "method",
|
|
1167
|
+
"name": "startOfWeek",
|
|
1168
|
+
"privacy": "private"
|
|
1234
1169
|
},
|
|
1235
1170
|
{
|
|
1236
|
-
"kind": "
|
|
1237
|
-
"name": "
|
|
1238
|
-
"privacy": "
|
|
1239
|
-
"inheritedFrom": {
|
|
1240
|
-
"name": "FocusableMixin",
|
|
1241
|
-
"module": "src/common/mixins/FocusableMixin.ts"
|
|
1242
|
-
}
|
|
1171
|
+
"kind": "method",
|
|
1172
|
+
"name": "endOfWeek",
|
|
1173
|
+
"privacy": "private"
|
|
1243
1174
|
},
|
|
1244
1175
|
{
|
|
1245
1176
|
"kind": "method",
|
|
1246
|
-
"name": "
|
|
1177
|
+
"name": "setMonth",
|
|
1178
|
+
"privacy": "private",
|
|
1247
1179
|
"parameters": [
|
|
1248
1180
|
{
|
|
1249
|
-
"name": "
|
|
1250
|
-
"optional": true,
|
|
1181
|
+
"name": "month",
|
|
1251
1182
|
"type": {
|
|
1252
|
-
"text": "
|
|
1253
|
-
}
|
|
1254
|
-
"description": "An object which controls aspects of the focusing process."
|
|
1183
|
+
"text": "number"
|
|
1184
|
+
}
|
|
1255
1185
|
}
|
|
1256
|
-
]
|
|
1257
|
-
"description": "Programmatically move focus to the component.",
|
|
1258
|
-
"inheritedFrom": {
|
|
1259
|
-
"name": "FocusableMixin",
|
|
1260
|
-
"module": "src/common/mixins/FocusableMixin.ts"
|
|
1261
|
-
}
|
|
1186
|
+
]
|
|
1262
1187
|
},
|
|
1263
1188
|
{
|
|
1264
1189
|
"kind": "method",
|
|
1265
|
-
"name": "
|
|
1266
|
-
"
|
|
1267
|
-
"
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1190
|
+
"name": "setYear",
|
|
1191
|
+
"privacy": "private",
|
|
1192
|
+
"parameters": [
|
|
1193
|
+
{
|
|
1194
|
+
"name": "year",
|
|
1195
|
+
"type": {
|
|
1196
|
+
"text": "number"
|
|
1197
|
+
}
|
|
1198
|
+
}
|
|
1199
|
+
]
|
|
1271
1200
|
},
|
|
1272
1201
|
{
|
|
1273
1202
|
"kind": "method",
|
|
1274
|
-
"name": "
|
|
1275
|
-
"
|
|
1276
|
-
"
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
"name": "variant",
|
|
1285
|
-
"type": {
|
|
1286
|
-
"text": "\"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\""
|
|
1287
|
-
},
|
|
1288
|
-
"default": "\"default\"",
|
|
1289
|
-
"description": "The style variant of the button.",
|
|
1290
|
-
"fieldName": "variant"
|
|
1203
|
+
"name": "setFocusedDay",
|
|
1204
|
+
"privacy": "private",
|
|
1205
|
+
"parameters": [
|
|
1206
|
+
{
|
|
1207
|
+
"name": "day",
|
|
1208
|
+
"type": {
|
|
1209
|
+
"text": "Date"
|
|
1210
|
+
}
|
|
1211
|
+
}
|
|
1212
|
+
]
|
|
1291
1213
|
},
|
|
1292
1214
|
{
|
|
1293
|
-
"
|
|
1294
|
-
"
|
|
1295
|
-
|
|
1296
|
-
},
|
|
1297
|
-
"default": "\"submit\"",
|
|
1298
|
-
"description": "The type of the button.",
|
|
1299
|
-
"fieldName": "type"
|
|
1215
|
+
"kind": "field",
|
|
1216
|
+
"name": "handleMonthSelect",
|
|
1217
|
+
"privacy": "private"
|
|
1300
1218
|
},
|
|
1301
1219
|
{
|
|
1302
|
-
"
|
|
1303
|
-
"
|
|
1304
|
-
|
|
1305
|
-
},
|
|
1306
|
-
"default": "\"m\"",
|
|
1307
|
-
"description": "The size of the button.\nThis affects font-size and padding.",
|
|
1308
|
-
"fieldName": "size"
|
|
1220
|
+
"kind": "field",
|
|
1221
|
+
"name": "handleYearSelect",
|
|
1222
|
+
"privacy": "private"
|
|
1309
1223
|
},
|
|
1310
1224
|
{
|
|
1311
|
-
"
|
|
1312
|
-
"
|
|
1313
|
-
|
|
1314
|
-
},
|
|
1315
|
-
"fieldName": "accessibleExpanded"
|
|
1225
|
+
"kind": "field",
|
|
1226
|
+
"name": "handleNextMonthClick",
|
|
1227
|
+
"privacy": "private"
|
|
1316
1228
|
},
|
|
1317
1229
|
{
|
|
1318
|
-
"
|
|
1319
|
-
"
|
|
1320
|
-
|
|
1321
|
-
},
|
|
1322
|
-
"fieldName": "accessibleHasPopup"
|
|
1230
|
+
"kind": "field",
|
|
1231
|
+
"name": "handlePreviousMonthClick",
|
|
1232
|
+
"privacy": "private"
|
|
1323
1233
|
},
|
|
1324
1234
|
{
|
|
1325
|
-
"
|
|
1326
|
-
"
|
|
1327
|
-
|
|
1328
|
-
},
|
|
1329
|
-
"description": "When provided, renders the button as a link,\nwith its href attribute set to the given value.",
|
|
1330
|
-
"fieldName": "href"
|
|
1235
|
+
"kind": "field",
|
|
1236
|
+
"name": "enableActiveFocus",
|
|
1237
|
+
"privacy": "private"
|
|
1331
1238
|
},
|
|
1332
1239
|
{
|
|
1333
|
-
"
|
|
1334
|
-
"
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
"fieldName": "download"
|
|
1340
|
-
},
|
|
1240
|
+
"kind": "field",
|
|
1241
|
+
"name": "disableActiveFocus",
|
|
1242
|
+
"privacy": "private"
|
|
1243
|
+
}
|
|
1244
|
+
],
|
|
1245
|
+
"events": [
|
|
1341
1246
|
{
|
|
1342
|
-
"name": "
|
|
1247
|
+
"name": "nord-focus-date",
|
|
1343
1248
|
"type": {
|
|
1344
|
-
"text": "
|
|
1249
|
+
"text": "DateSelectEvent"
|
|
1345
1250
|
},
|
|
1346
|
-
"
|
|
1347
|
-
"description": "When provided together with a href property, determines where\nto open the linked URL. The keywords have special meanings for\nwhere to load the URL: “_self” means the current browsing context,\n“_blank” usually a new tab but users can configure browsers this to\nopen a new window instead, “_parent” means the parent browsing\ncontext of the current one, but if no parent exists, behaves as\n_self, and finally “top” means the topmost browsing context.",
|
|
1348
|
-
"fieldName": "target"
|
|
1251
|
+
"description": "Dispatched when the calendar's focused date changes."
|
|
1349
1252
|
},
|
|
1350
1253
|
{
|
|
1351
|
-
"name": "expand",
|
|
1352
1254
|
"type": {
|
|
1353
|
-
"text": "
|
|
1255
|
+
"text": "DateSelectEvent"
|
|
1354
1256
|
},
|
|
1355
|
-
"
|
|
1356
|
-
"
|
|
1357
|
-
|
|
1358
|
-
|
|
1257
|
+
"description": "Dispatched when a date is selected and the value changes.",
|
|
1258
|
+
"name": "change"
|
|
1259
|
+
}
|
|
1260
|
+
],
|
|
1261
|
+
"attributes": [
|
|
1359
1262
|
{
|
|
1360
|
-
"name": "
|
|
1263
|
+
"name": "value",
|
|
1361
1264
|
"type": {
|
|
1362
|
-
"text": "
|
|
1265
|
+
"text": "string"
|
|
1363
1266
|
},
|
|
1364
|
-
"default": "
|
|
1365
|
-
"description": "
|
|
1366
|
-
"fieldName": "
|
|
1367
|
-
"inheritedFrom": {
|
|
1368
|
-
"name": "InputMixin",
|
|
1369
|
-
"module": "src/common/mixins/InputMixin.ts"
|
|
1370
|
-
}
|
|
1267
|
+
"default": "\"\"",
|
|
1268
|
+
"description": "The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.",
|
|
1269
|
+
"fieldName": "value"
|
|
1371
1270
|
},
|
|
1372
1271
|
{
|
|
1373
|
-
"name": "
|
|
1272
|
+
"name": "firstDayOfWeek",
|
|
1374
1273
|
"type": {
|
|
1375
|
-
"text": "
|
|
1274
|
+
"text": "DaysOfWeek"
|
|
1376
1275
|
},
|
|
1377
|
-
"description": "
|
|
1378
|
-
"fieldName": "
|
|
1379
|
-
"inheritedFrom": {
|
|
1380
|
-
"name": "InputMixin",
|
|
1381
|
-
"module": "src/common/mixins/InputMixin.ts"
|
|
1382
|
-
}
|
|
1276
|
+
"description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
|
|
1277
|
+
"fieldName": "firstDayOfWeek"
|
|
1383
1278
|
},
|
|
1384
1279
|
{
|
|
1385
|
-
"name": "
|
|
1280
|
+
"name": "min",
|
|
1386
1281
|
"type": {
|
|
1387
1282
|
"text": "string"
|
|
1388
1283
|
},
|
|
1389
1284
|
"default": "\"\"",
|
|
1390
|
-
"description": "
|
|
1391
|
-
"fieldName": "
|
|
1392
|
-
"inheritedFrom": {
|
|
1393
|
-
"name": "InputMixin",
|
|
1394
|
-
"module": "src/common/mixins/InputMixin.ts"
|
|
1395
|
-
}
|
|
1396
|
-
}
|
|
1397
|
-
],
|
|
1398
|
-
"mixins": [
|
|
1399
|
-
{
|
|
1400
|
-
"name": "InputMixin",
|
|
1401
|
-
"module": "/src/common/mixins/InputMixin.js"
|
|
1285
|
+
"description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
|
|
1286
|
+
"fieldName": "min"
|
|
1402
1287
|
},
|
|
1403
1288
|
{
|
|
1404
|
-
"name": "
|
|
1405
|
-
"
|
|
1289
|
+
"name": "max",
|
|
1290
|
+
"type": {
|
|
1291
|
+
"text": "string"
|
|
1292
|
+
},
|
|
1293
|
+
"default": "\"\"",
|
|
1294
|
+
"description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
|
|
1295
|
+
"fieldName": "max"
|
|
1406
1296
|
}
|
|
1407
1297
|
],
|
|
1408
1298
|
"superclass": {
|
|
@@ -1410,8 +1300,8 @@
|
|
|
1410
1300
|
"package": "lit"
|
|
1411
1301
|
},
|
|
1412
1302
|
"status": "ready",
|
|
1413
|
-
"category": "
|
|
1414
|
-
"tagName": "nord-
|
|
1303
|
+
"category": "list",
|
|
1304
|
+
"tagName": "nord-calendar",
|
|
1415
1305
|
"customElement": true
|
|
1416
1306
|
}
|
|
1417
1307
|
],
|
|
@@ -1420,20 +1310,130 @@
|
|
|
1420
1310
|
"kind": "js",
|
|
1421
1311
|
"name": "default",
|
|
1422
1312
|
"declaration": {
|
|
1423
|
-
"name": "
|
|
1424
|
-
"module": "src/
|
|
1313
|
+
"name": "Calendar",
|
|
1314
|
+
"module": "src/calendar/Calendar.ts"
|
|
1425
1315
|
}
|
|
1426
1316
|
},
|
|
1427
1317
|
{
|
|
1428
1318
|
"kind": "custom-element-definition",
|
|
1429
|
-
"name": "nord-
|
|
1319
|
+
"name": "nord-calendar",
|
|
1430
1320
|
"declaration": {
|
|
1431
|
-
"name": "
|
|
1432
|
-
"module": "src/
|
|
1321
|
+
"name": "Calendar",
|
|
1322
|
+
"module": "src/calendar/Calendar.ts"
|
|
1433
1323
|
}
|
|
1434
1324
|
}
|
|
1435
1325
|
],
|
|
1436
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use
|
|
1326
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
|
|
1327
|
+
},
|
|
1328
|
+
{
|
|
1329
|
+
"kind": "javascript-module",
|
|
1330
|
+
"path": "src/calendar/DateSelectEvent.ts",
|
|
1331
|
+
"declarations": [
|
|
1332
|
+
{
|
|
1333
|
+
"kind": "class",
|
|
1334
|
+
"description": "",
|
|
1335
|
+
"name": "DateSelectEvent",
|
|
1336
|
+
"members": [
|
|
1337
|
+
{
|
|
1338
|
+
"kind": "field",
|
|
1339
|
+
"name": "date",
|
|
1340
|
+
"type": {
|
|
1341
|
+
"text": "Date"
|
|
1342
|
+
},
|
|
1343
|
+
"default": "date"
|
|
1344
|
+
}
|
|
1345
|
+
],
|
|
1346
|
+
"superclass": {
|
|
1347
|
+
"name": "NordEvent",
|
|
1348
|
+
"module": "/src/common/events.js"
|
|
1349
|
+
}
|
|
1350
|
+
}
|
|
1351
|
+
],
|
|
1352
|
+
"exports": [
|
|
1353
|
+
{
|
|
1354
|
+
"kind": "js",
|
|
1355
|
+
"name": "DateSelectEvent",
|
|
1356
|
+
"declaration": {
|
|
1357
|
+
"name": "DateSelectEvent",
|
|
1358
|
+
"module": "src/calendar/DateSelectEvent.ts"
|
|
1359
|
+
}
|
|
1360
|
+
}
|
|
1361
|
+
],
|
|
1362
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
|
|
1363
|
+
},
|
|
1364
|
+
{
|
|
1365
|
+
"kind": "javascript-module",
|
|
1366
|
+
"path": "src/calendar/calendar-localization.ts",
|
|
1367
|
+
"declarations": [
|
|
1368
|
+
{
|
|
1369
|
+
"kind": "variable",
|
|
1370
|
+
"name": "localization",
|
|
1371
|
+
"type": {
|
|
1372
|
+
"text": "CalendarLocalizedText"
|
|
1373
|
+
},
|
|
1374
|
+
"default": "{\n prevMonthLabel: \"Previous month\",\n nextMonthLabel: \"Next month\",\n monthSelectLabel: \"Month\",\n yearSelectLabel: \"Year\",\n calendarHeading: \"Choose a date\",\n dayNames: [\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"],\n monthNames: [\n \"January\",\n \"February\",\n \"March\",\n \"April\",\n \"May\",\n \"June\",\n \"July\",\n \"August\",\n \"September\",\n \"October\",\n \"November\",\n \"December\",\n ],\n monthNamesShort: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"],\n locale: \"en-GB\",\n}"
|
|
1375
|
+
}
|
|
1376
|
+
],
|
|
1377
|
+
"exports": [
|
|
1378
|
+
{
|
|
1379
|
+
"kind": "js",
|
|
1380
|
+
"name": "default",
|
|
1381
|
+
"declaration": {
|
|
1382
|
+
"name": "localization",
|
|
1383
|
+
"module": "src/calendar/calendar-localization.ts"
|
|
1384
|
+
}
|
|
1385
|
+
}
|
|
1386
|
+
],
|
|
1387
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
|
|
1388
|
+
},
|
|
1389
|
+
{
|
|
1390
|
+
"kind": "javascript-module",
|
|
1391
|
+
"path": "src/calendar/month-view.ts",
|
|
1392
|
+
"declarations": [
|
|
1393
|
+
{
|
|
1394
|
+
"kind": "function",
|
|
1395
|
+
"name": "dayView",
|
|
1396
|
+
"parameters": [
|
|
1397
|
+
{
|
|
1398
|
+
"name": "{\n focusedDay,\n today,\n day,\n onDaySelect,\n onKeyboardNavigation,\n disabled,\n inRange,\n isSelected,\n dateFormatter,\n}",
|
|
1399
|
+
"type": {
|
|
1400
|
+
"text": "DatePickerDayProps"
|
|
1401
|
+
}
|
|
1402
|
+
}
|
|
1403
|
+
]
|
|
1404
|
+
},
|
|
1405
|
+
{
|
|
1406
|
+
"kind": "function",
|
|
1407
|
+
"name": "monthView",
|
|
1408
|
+
"parameters": [
|
|
1409
|
+
{
|
|
1410
|
+
"name": "{\n onFocusIn,\n onFocusOut,\n selectedDate,\n focusedDate,\n labelledById,\n localization,\n firstDayOfWeek,\n min,\n max,\n dateFormatter,\n isDateDisabled,\n onDateSelect,\n onKeyboardNavigation,\n}",
|
|
1411
|
+
"type": {
|
|
1412
|
+
"text": "MonthViewArgs"
|
|
1413
|
+
}
|
|
1414
|
+
}
|
|
1415
|
+
]
|
|
1416
|
+
}
|
|
1417
|
+
],
|
|
1418
|
+
"exports": [
|
|
1419
|
+
{
|
|
1420
|
+
"kind": "js",
|
|
1421
|
+
"name": "dayView",
|
|
1422
|
+
"declaration": {
|
|
1423
|
+
"name": "dayView",
|
|
1424
|
+
"module": "src/calendar/month-view.ts"
|
|
1425
|
+
}
|
|
1426
|
+
},
|
|
1427
|
+
{
|
|
1428
|
+
"kind": "js",
|
|
1429
|
+
"name": "monthView",
|
|
1430
|
+
"declaration": {
|
|
1431
|
+
"name": "monthView",
|
|
1432
|
+
"module": "src/calendar/month-view.ts"
|
|
1433
|
+
}
|
|
1434
|
+
}
|
|
1435
|
+
],
|
|
1436
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when the user needs to choose a single date or a date range.\n- Close calendar after a single date is selected, unless a range with a start and end date is required.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for entering date of birth. Use input component instead.\n- Don’t use for choosing a date that is over 10 years in the future or the past.\n\n</div>\n\n---\n\n## Keyboard accessibility\n\nCalendar component is built to closely follow [W3C Date Picker Dialog example](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/datepicker-dialog.html) with some small exceptions to e.g. better support iOS VoiceOver and Android TalkBack.\n\n### Month/year buttons\n\n- `Space, Enter`: Changes the month and/or year displayed.\n\n### Calendar grid\n\n- `Space, Enter`: Selects a date.\n- `Arrow up`: Moves focus to the same day of the previous week.\n- `Arrow down`: Moves focus to the same day of the next week.\n- `Arrow right`: Moves focus to the next day. In right-to-left languages, moves focus to the previous day.\n- `Arrow left`: Moves focus to the previous day. In right-to-left languages, moves focus to the next day.\n- `Home`: Moves focus to the first day (e.g Monday) of the current week.\n- `End`: Moves focus to the last day (e.g. Sunday) of the current week.\n- `Page Up`: Changes the grid of dates to the previous month and sets focus on the same day of the same week.\n- `Shift + Page Up`: Changes the grid of dates to the previous year and sets focus on the same day of the same week.\n- `Page Down`: Changes the grid of dates to the next month and sets focus on the same day of the same week.\n- `Shift + Page Down`: Changes the grid of dates to the next year and sets focus on the same day of the same week.\n"
|
|
1437
1437
|
},
|
|
1438
1438
|
{
|
|
1439
1439
|
"kind": "javascript-module",
|
|
@@ -4911,6 +4911,51 @@
|
|
|
4911
4911
|
],
|
|
4912
4912
|
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for grouping other types of content.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending dropdown items in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoud all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n"
|
|
4913
4913
|
},
|
|
4914
|
+
{
|
|
4915
|
+
"kind": "javascript-module",
|
|
4916
|
+
"path": "src/empty-state/EmptyState.ts",
|
|
4917
|
+
"declarations": [
|
|
4918
|
+
{
|
|
4919
|
+
"kind": "class",
|
|
4920
|
+
"description": "Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",
|
|
4921
|
+
"name": "EmptyState",
|
|
4922
|
+
"slots": [
|
|
4923
|
+
{
|
|
4924
|
+
"description": "default slot",
|
|
4925
|
+
"name": ""
|
|
4926
|
+
}
|
|
4927
|
+
],
|
|
4928
|
+
"members": [],
|
|
4929
|
+
"superclass": {
|
|
4930
|
+
"name": "LitElement",
|
|
4931
|
+
"package": "lit"
|
|
4932
|
+
},
|
|
4933
|
+
"status": "new",
|
|
4934
|
+
"category": "feedback",
|
|
4935
|
+
"tagName": "nord-empty-state",
|
|
4936
|
+
"customElement": true
|
|
4937
|
+
}
|
|
4938
|
+
],
|
|
4939
|
+
"exports": [
|
|
4940
|
+
{
|
|
4941
|
+
"kind": "js",
|
|
4942
|
+
"name": "default",
|
|
4943
|
+
"declaration": {
|
|
4944
|
+
"name": "EmptyState",
|
|
4945
|
+
"module": "src/empty-state/EmptyState.ts"
|
|
4946
|
+
}
|
|
4947
|
+
},
|
|
4948
|
+
{
|
|
4949
|
+
"kind": "custom-element-definition",
|
|
4950
|
+
"name": "nord-empty-state",
|
|
4951
|
+
"declaration": {
|
|
4952
|
+
"name": "EmptyState",
|
|
4953
|
+
"module": "src/empty-state/EmptyState.ts"
|
|
4954
|
+
}
|
|
4955
|
+
}
|
|
4956
|
+
],
|
|
4957
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use when another component or part of UI has no items or data to show.\n- Help users by clearly explaining the benefit and utility of a product or feature.\n- Be encouraging and never make users feel unsuccessful or guilty.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use as a generic banner to highlight specific content.\n\n</div>\n\n---\n\n## Content guidelines\n\nEmpty state headings should state to the user what’s wrong or why there’s no content:\n\n<div class=\"n-usage n-usage-do\">No results found</div>\n<div class=\"n-usage n-usage-dont\">Error</div>\n\nWhen writing empty state headings, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">You don’t have access to this content</div>\n<div class=\"n-usage n-usage-dont\">You Don’t Have Access To This Content</div>\n\nDescriptions in empty states should add useful and relevant additional information:\n\n<div class=\"n-usage n-usage-do\">We were unable to connect to the service. Click Retry to try again or View log to learn what happened.</div>\n<div class=\"n-usage n-usage-dont\">No connection.</div>\n\nButton labels should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:\n\n<div class=\"n-usage n-usage-do\">Clear filters</div>\n<div class=\"n-usage n-usage-dont\">Clear</div>\n\nWhen writing button labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">View log</div>\n<div class=\"n-usage n-usage-dont\">View Log</div>\n\nAvoid unnecessary words and articles in button labels, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Request access</div>\n<div class=\"n-usage n-usage-dont\">Request an access</div>\n"
|
|
4958
|
+
},
|
|
4914
4959
|
{
|
|
4915
4960
|
"kind": "javascript-module",
|
|
4916
4961
|
"path": "src/dropdown-item/DropdownItem.ts",
|
|
@@ -5031,52 +5076,7 @@
|
|
|
5031
5076
|
},
|
|
5032
5077
|
"status": "draft",
|
|
5033
5078
|
"category": "action",
|
|
5034
|
-
"tagName": "nord-dropdown-item",
|
|
5035
|
-
"customElement": true
|
|
5036
|
-
}
|
|
5037
|
-
],
|
|
5038
|
-
"exports": [
|
|
5039
|
-
{
|
|
5040
|
-
"kind": "js",
|
|
5041
|
-
"name": "default",
|
|
5042
|
-
"declaration": {
|
|
5043
|
-
"name": "DropdownItem",
|
|
5044
|
-
"module": "src/dropdown-item/DropdownItem.ts"
|
|
5045
|
-
}
|
|
5046
|
-
},
|
|
5047
|
-
{
|
|
5048
|
-
"kind": "custom-element-definition",
|
|
5049
|
-
"name": "nord-dropdown-item",
|
|
5050
|
-
"declaration": {
|
|
5051
|
-
"name": "DropdownItem",
|
|
5052
|
-
"module": "src/dropdown-item/DropdownItem.ts"
|
|
5053
|
-
}
|
|
5054
|
-
}
|
|
5055
|
-
],
|
|
5056
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use dropdown item outside of dropdown group and dropdown components.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending dropdown items in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoud all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n"
|
|
5057
|
-
},
|
|
5058
|
-
{
|
|
5059
|
-
"kind": "javascript-module",
|
|
5060
|
-
"path": "src/empty-state/EmptyState.ts",
|
|
5061
|
-
"declarations": [
|
|
5062
|
-
{
|
|
5063
|
-
"kind": "class",
|
|
5064
|
-
"description": "Empty state can be used when there is no data to display to\ndescribe what the user can do next. Empty state provides\nexplanation and guidance to help user progress.",
|
|
5065
|
-
"name": "EmptyState",
|
|
5066
|
-
"slots": [
|
|
5067
|
-
{
|
|
5068
|
-
"description": "default slot",
|
|
5069
|
-
"name": ""
|
|
5070
|
-
}
|
|
5071
|
-
],
|
|
5072
|
-
"members": [],
|
|
5073
|
-
"superclass": {
|
|
5074
|
-
"name": "LitElement",
|
|
5075
|
-
"package": "lit"
|
|
5076
|
-
},
|
|
5077
|
-
"status": "new",
|
|
5078
|
-
"category": "feedback",
|
|
5079
|
-
"tagName": "nord-empty-state",
|
|
5079
|
+
"tagName": "nord-dropdown-item",
|
|
5080
5080
|
"customElement": true
|
|
5081
5081
|
}
|
|
5082
5082
|
],
|
|
@@ -5085,20 +5085,20 @@
|
|
|
5085
5085
|
"kind": "js",
|
|
5086
5086
|
"name": "default",
|
|
5087
5087
|
"declaration": {
|
|
5088
|
-
"name": "
|
|
5089
|
-
"module": "src/
|
|
5088
|
+
"name": "DropdownItem",
|
|
5089
|
+
"module": "src/dropdown-item/DropdownItem.ts"
|
|
5090
5090
|
}
|
|
5091
5091
|
},
|
|
5092
5092
|
{
|
|
5093
5093
|
"kind": "custom-element-definition",
|
|
5094
|
-
"name": "nord-
|
|
5094
|
+
"name": "nord-dropdown-item",
|
|
5095
5095
|
"declaration": {
|
|
5096
|
-
"name": "
|
|
5097
|
-
"module": "src/
|
|
5096
|
+
"name": "DropdownItem",
|
|
5097
|
+
"module": "src/dropdown-item/DropdownItem.ts"
|
|
5098
5098
|
}
|
|
5099
5099
|
}
|
|
5100
5100
|
],
|
|
5101
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n-
|
|
5101
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Group dropdown items into dropdown groups based on related categories.\n- Use group headings to clarify the category of a section.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use dropdown item outside of dropdown group and dropdown components.\n\n</div>\n\n---\n\n## Content guidelines\n\nDropdown items should be always written in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Create user</div>\n<div class=\"n-usage n-usage-dont\">Create User</div>\n\nDropdown items should always lead with a strong verb that encourages action. Use the `{verb}+{noun}` format except in the case of common actions like Save, Close or Cancel:\n\n<div class=\"n-usage n-usage-do\">Edit row</div>\n<div class=\"n-usage n-usage-dont\">Editing options</div>\n\nAvoid unnecessary words and articles in dropdown items, such as “the”, “an” or “a”:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme</div>\n\nAvoid ending dropdown items in punctuation:\n\n<div class=\"n-usage n-usage-do\">Switch user</div>\n<div class=\"n-usage n-usage-dont\">Switch user.</div>\n\nAvoud all caps for dropdown items:\n\n<div class=\"n-usage n-usage-do\">Rename</div>\n<div class=\"n-usage n-usage-dont\">RENAME</div>\n\nKeep dropdown items to a single line of text:\n\n<div class=\"n-usage n-usage-do\">Change theme</div>\n<div class=\"n-usage n-usage-dont\">Change the theme<br/>of the veterinary application.</div>\n"
|
|
5102
5102
|
},
|
|
5103
5103
|
{
|
|
5104
5104
|
"kind": "javascript-module",
|
|
@@ -6710,6 +6710,14 @@
|
|
|
6710
6710
|
},
|
|
6711
6711
|
"privacy": "private"
|
|
6712
6712
|
},
|
|
6713
|
+
{
|
|
6714
|
+
"kind": "field",
|
|
6715
|
+
"name": "cleanupAutoUpdate",
|
|
6716
|
+
"type": {
|
|
6717
|
+
"text": "ReturnType<typeof autoUpdate> | undefined"
|
|
6718
|
+
},
|
|
6719
|
+
"privacy": "private"
|
|
6720
|
+
},
|
|
6713
6721
|
{
|
|
6714
6722
|
"kind": "field",
|
|
6715
6723
|
"name": "dismiss",
|
|
@@ -6773,21 +6781,6 @@
|
|
|
6773
6781
|
"attribute": "id",
|
|
6774
6782
|
"reflects": true
|
|
6775
6783
|
},
|
|
6776
|
-
{
|
|
6777
|
-
"kind": "field",
|
|
6778
|
-
"name": "updatePosition",
|
|
6779
|
-
"privacy": "private",
|
|
6780
|
-
"description": "Get the position of the element toggling the popout\nand position the popout underneath it, taking into account the optional placement."
|
|
6781
|
-
},
|
|
6782
|
-
{
|
|
6783
|
-
"kind": "field",
|
|
6784
|
-
"name": "autoUpdate",
|
|
6785
|
-
"type": {
|
|
6786
|
-
"text": "ReturnType<typeof autoUpdate> | undefined"
|
|
6787
|
-
},
|
|
6788
|
-
"privacy": "private",
|
|
6789
|
-
"description": "Efficiently update the position of the popout."
|
|
6790
|
-
},
|
|
6791
6784
|
{
|
|
6792
6785
|
"kind": "method",
|
|
6793
6786
|
"name": "show",
|
|
@@ -6800,11 +6793,20 @@
|
|
|
6800
6793
|
{
|
|
6801
6794
|
"name": "moveFocusToButton",
|
|
6802
6795
|
"default": "true",
|
|
6803
|
-
"description": "prevent focus returning to the target\nbutton. Default is true."
|
|
6796
|
+
"description": "prevent focus returning to the target\nbutton. Default is true.",
|
|
6797
|
+
"type": {
|
|
6798
|
+
"text": "boolean"
|
|
6799
|
+
}
|
|
6804
6800
|
}
|
|
6805
6801
|
],
|
|
6806
6802
|
"description": "Hide the popout."
|
|
6807
6803
|
},
|
|
6804
|
+
{
|
|
6805
|
+
"kind": "field",
|
|
6806
|
+
"name": "updatePosition",
|
|
6807
|
+
"privacy": "private",
|
|
6808
|
+
"description": "Get the position of the element toggling the popout\nand position the popout underneath it, taking into account the optional placement."
|
|
6809
|
+
},
|
|
6808
6810
|
{
|
|
6809
6811
|
"kind": "field",
|
|
6810
6812
|
"name": "toggleOpen",
|
|
@@ -9464,263 +9466,87 @@
|
|
|
9464
9466
|
{
|
|
9465
9467
|
"name": "delay",
|
|
9466
9468
|
"type": {
|
|
9467
|
-
"text": "number"
|
|
9468
|
-
},
|
|
9469
|
-
"default": "300",
|
|
9470
|
-
"description": "The delay in milliseconds before the tooltip is opened.",
|
|
9471
|
-
"fieldName": "delay"
|
|
9472
|
-
}
|
|
9473
|
-
],
|
|
9474
|
-
"superclass": {
|
|
9475
|
-
"name": "LitElement",
|
|
9476
|
-
"package": "lit"
|
|
9477
|
-
},
|
|
9478
|
-
"status": "ready",
|
|
9479
|
-
"category": "overlay",
|
|
9480
|
-
"tagName": "nord-tooltip",
|
|
9481
|
-
"customElement": true
|
|
9482
|
-
}
|
|
9483
|
-
],
|
|
9484
|
-
"exports": [
|
|
9485
|
-
{
|
|
9486
|
-
"kind": "js",
|
|
9487
|
-
"name": "default",
|
|
9488
|
-
"declaration": {
|
|
9489
|
-
"name": "Tooltip",
|
|
9490
|
-
"module": "src/tooltip/Tooltip.ts"
|
|
9491
|
-
}
|
|
9492
|
-
},
|
|
9493
|
-
{
|
|
9494
|
-
"kind": "custom-element-definition",
|
|
9495
|
-
"name": "nord-tooltip",
|
|
9496
|
-
"declaration": {
|
|
9497
|
-
"name": "Tooltip",
|
|
9498
|
-
"module": "src/tooltip/Tooltip.ts"
|
|
9499
|
-
}
|
|
9500
|
-
}
|
|
9501
|
-
],
|
|
9502
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a tooltip if an interactive element requires more explanation.\n- Use a tooltip to provide additional information, such as UI shortcuts.\n- Use the `label` attribute on icons used for shortcuts for accessibility.\n- Use clear and accurate phrasing.\n- Be consistent with positioning of tooltips in the user interface.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use interactive elements such as links or buttons inside a tooltip.\n- Don’t rely on tooltips when you have room to provide more explanation.\n- Don’t depend on tooltips for vital information.\n\n</div>\n\n---\n\n## Content guidelines\n\nTooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data as a CSV, <u>more information on CSVs</u></div>\n\nTooltips should provide useful information and not repeat information that is already present.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data</div>\n\nWhen writing tooltips, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export Data As a Spreadsheet</div>\n\nUse tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.\n\n---\n\n## Additional considerations\n\n- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.\n- Don’t use tooltip to communicate critical information, including errors.\n- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.\n"
|
|
9503
|
-
},
|
|
9504
|
-
{
|
|
9505
|
-
"kind": "javascript-module",
|
|
9506
|
-
"path": "src/visually-hidden/VisuallyHidden.ts",
|
|
9507
|
-
"declarations": [
|
|
9508
|
-
{
|
|
9509
|
-
"kind": "class",
|
|
9510
|
-
"description": "Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",
|
|
9511
|
-
"name": "VisuallyHidden",
|
|
9512
|
-
"slots": [
|
|
9513
|
-
{
|
|
9514
|
-
"description": "The visually hidden content.",
|
|
9515
|
-
"name": ""
|
|
9516
|
-
}
|
|
9517
|
-
],
|
|
9518
|
-
"members": [],
|
|
9519
|
-
"superclass": {
|
|
9520
|
-
"name": "LitElement",
|
|
9521
|
-
"package": "lit"
|
|
9522
|
-
},
|
|
9523
|
-
"status": "ready",
|
|
9524
|
-
"category": "text",
|
|
9525
|
-
"tagName": "nord-visually-hidden",
|
|
9526
|
-
"customElement": true
|
|
9527
|
-
}
|
|
9528
|
-
],
|
|
9529
|
-
"exports": [
|
|
9530
|
-
{
|
|
9531
|
-
"kind": "js",
|
|
9532
|
-
"name": "default",
|
|
9533
|
-
"declaration": {
|
|
9534
|
-
"name": "VisuallyHidden",
|
|
9535
|
-
"module": "src/visually-hidden/VisuallyHidden.ts"
|
|
9536
|
-
}
|
|
9537
|
-
},
|
|
9538
|
-
{
|
|
9539
|
-
"kind": "custom-element-definition",
|
|
9540
|
-
"name": "nord-visually-hidden",
|
|
9541
|
-
"declaration": {
|
|
9542
|
-
"name": "VisuallyHidden",
|
|
9543
|
-
"module": "src/visually-hidden/VisuallyHidden.ts"
|
|
9544
|
-
}
|
|
9545
|
-
}
|
|
9546
|
-
],
|
|
9547
|
-
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to hide text visually from the screen, but keep it available to assistive technologies, such as screen readers.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for hiding interactive content.\n\n</div>\n"
|
|
9548
|
-
},
|
|
9549
|
-
{
|
|
9550
|
-
"kind": "javascript-module",
|
|
9551
|
-
"path": "src/common/directives/cond.ts",
|
|
9552
|
-
"declarations": [
|
|
9553
|
-
{
|
|
9554
|
-
"kind": "variable",
|
|
9555
|
-
"name": "cond"
|
|
9556
|
-
}
|
|
9557
|
-
],
|
|
9558
|
-
"exports": [
|
|
9559
|
-
{
|
|
9560
|
-
"kind": "js",
|
|
9561
|
-
"name": "cond",
|
|
9562
|
-
"declaration": {
|
|
9563
|
-
"name": "cond",
|
|
9564
|
-
"module": "src/common/directives/cond.ts"
|
|
9565
|
-
}
|
|
9566
|
-
}
|
|
9567
|
-
]
|
|
9568
|
-
},
|
|
9569
|
-
{
|
|
9570
|
-
"kind": "javascript-module",
|
|
9571
|
-
"path": "src/common/directives/wrapIf.ts",
|
|
9572
|
-
"declarations": [
|
|
9573
|
-
{
|
|
9574
|
-
"kind": "function",
|
|
9575
|
-
"name": "wrapIf",
|
|
9576
|
-
"return": {
|
|
9577
|
-
"type": {
|
|
9578
|
-
"text": "TInner"
|
|
9579
|
-
}
|
|
9580
|
-
},
|
|
9581
|
-
"parameters": [
|
|
9582
|
-
{
|
|
9583
|
-
"name": "condition",
|
|
9584
|
-
"type": {
|
|
9585
|
-
"text": "false"
|
|
9586
|
-
}
|
|
9587
|
-
},
|
|
9588
|
-
{
|
|
9589
|
-
"name": "inner",
|
|
9590
|
-
"type": {
|
|
9591
|
-
"text": "() => TInner"
|
|
9592
|
-
}
|
|
9593
|
-
},
|
|
9594
|
-
{
|
|
9595
|
-
"name": "wrapper",
|
|
9596
|
-
"type": {
|
|
9597
|
-
"text": "(inner: TInner) => TWrapper"
|
|
9598
|
-
}
|
|
9599
|
-
}
|
|
9600
|
-
]
|
|
9601
|
-
},
|
|
9602
|
-
{
|
|
9603
|
-
"kind": "function",
|
|
9604
|
-
"name": "wrapIf",
|
|
9605
|
-
"return": {
|
|
9606
|
-
"type": {
|
|
9607
|
-
"text": "TWrapper"
|
|
9608
|
-
}
|
|
9609
|
-
},
|
|
9610
|
-
"parameters": [
|
|
9611
|
-
{
|
|
9612
|
-
"name": "condition",
|
|
9613
|
-
"type": {
|
|
9614
|
-
"text": "true"
|
|
9615
|
-
}
|
|
9616
|
-
},
|
|
9617
|
-
{
|
|
9618
|
-
"name": "inner",
|
|
9619
|
-
"type": {
|
|
9620
|
-
"text": "() => TInner"
|
|
9621
|
-
}
|
|
9622
|
-
},
|
|
9623
|
-
{
|
|
9624
|
-
"name": "wrapper",
|
|
9625
|
-
"type": {
|
|
9626
|
-
"text": "(inner: TInner) => TWrapper"
|
|
9627
|
-
}
|
|
9628
|
-
}
|
|
9629
|
-
]
|
|
9630
|
-
},
|
|
9631
|
-
{
|
|
9632
|
-
"kind": "function",
|
|
9633
|
-
"name": "wrapIf",
|
|
9634
|
-
"return": {
|
|
9635
|
-
"type": {
|
|
9636
|
-
"text": "TInner | TWrapper"
|
|
9637
|
-
}
|
|
9638
|
-
},
|
|
9639
|
-
"parameters": [
|
|
9640
|
-
{
|
|
9641
|
-
"name": "condition",
|
|
9642
|
-
"type": {
|
|
9643
|
-
"text": "unknown"
|
|
9644
|
-
}
|
|
9645
|
-
},
|
|
9646
|
-
{
|
|
9647
|
-
"name": "inner",
|
|
9648
|
-
"type": {
|
|
9649
|
-
"text": "() => TInner"
|
|
9650
|
-
}
|
|
9651
|
-
},
|
|
9652
|
-
{
|
|
9653
|
-
"name": "wrapper",
|
|
9654
|
-
"type": {
|
|
9655
|
-
"text": "(inner: TInner) => TWrapper"
|
|
9656
|
-
}
|
|
9657
|
-
}
|
|
9658
|
-
]
|
|
9659
|
-
},
|
|
9660
|
-
{
|
|
9661
|
-
"kind": "function",
|
|
9662
|
-
"name": "wrapIf",
|
|
9663
|
-
"parameters": [
|
|
9664
|
-
{
|
|
9665
|
-
"name": "condition",
|
|
9666
|
-
"type": {
|
|
9667
|
-
"text": "any"
|
|
9668
|
-
}
|
|
9669
|
-
},
|
|
9670
|
-
{
|
|
9671
|
-
"name": "inner",
|
|
9672
|
-
"type": {
|
|
9673
|
-
"text": "() => TInner"
|
|
9674
|
-
}
|
|
9675
|
-
},
|
|
9676
|
-
{
|
|
9677
|
-
"name": "wrapper",
|
|
9678
|
-
"type": {
|
|
9679
|
-
"text": "(innards: TInner) => TWrapper"
|
|
9680
|
-
}
|
|
9469
|
+
"text": "number"
|
|
9470
|
+
},
|
|
9471
|
+
"default": "300",
|
|
9472
|
+
"description": "The delay in milliseconds before the tooltip is opened.",
|
|
9473
|
+
"fieldName": "delay"
|
|
9681
9474
|
}
|
|
9682
9475
|
],
|
|
9683
|
-
"
|
|
9684
|
-
"
|
|
9685
|
-
|
|
9686
|
-
|
|
9687
|
-
|
|
9476
|
+
"superclass": {
|
|
9477
|
+
"name": "LitElement",
|
|
9478
|
+
"package": "lit"
|
|
9479
|
+
},
|
|
9480
|
+
"status": "ready",
|
|
9481
|
+
"category": "overlay",
|
|
9482
|
+
"tagName": "nord-tooltip",
|
|
9483
|
+
"customElement": true
|
|
9688
9484
|
}
|
|
9689
9485
|
],
|
|
9690
9486
|
"exports": [
|
|
9691
9487
|
{
|
|
9692
9488
|
"kind": "js",
|
|
9693
|
-
"name": "
|
|
9489
|
+
"name": "default",
|
|
9694
9490
|
"declaration": {
|
|
9695
|
-
"name": "
|
|
9696
|
-
"module": "src/
|
|
9491
|
+
"name": "Tooltip",
|
|
9492
|
+
"module": "src/tooltip/Tooltip.ts"
|
|
9697
9493
|
}
|
|
9698
9494
|
},
|
|
9699
9495
|
{
|
|
9700
|
-
"kind": "
|
|
9701
|
-
"name": "
|
|
9496
|
+
"kind": "custom-element-definition",
|
|
9497
|
+
"name": "nord-tooltip",
|
|
9702
9498
|
"declaration": {
|
|
9703
|
-
"name": "
|
|
9704
|
-
"module": "src/
|
|
9499
|
+
"name": "Tooltip",
|
|
9500
|
+
"module": "src/tooltip/Tooltip.ts"
|
|
9705
9501
|
}
|
|
9706
|
-
}
|
|
9502
|
+
}
|
|
9503
|
+
],
|
|
9504
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use a tooltip if an interactive element requires more explanation.\n- Use a tooltip to provide additional information, such as UI shortcuts.\n- Use the `label` attribute on icons used for shortcuts for accessibility.\n- Use clear and accurate phrasing.\n- Be consistent with positioning of tooltips in the user interface.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use interactive elements such as links or buttons inside a tooltip.\n- Don’t rely on tooltips when you have room to provide more explanation.\n- Don’t depend on tooltips for vital information.\n\n</div>\n\n---\n\n## Content guidelines\n\nTooltips should be clear and informative, but not imperative to using the interface they refer to. They should not contain interactive elements such as buttons or links.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data as a CSV, <u>more information on CSVs</u></div>\n\nTooltips should provide useful information and not repeat information that is already present.\n\n<div class=\"n-usage n-usage-do\">Export – Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export – Export data</div>\n\nWhen writing tooltips, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):\n\n<div class=\"n-usage n-usage-do\">Export data as a spreadsheet</div>\n<div class=\"n-usage n-usage-dont\">Export Data As a Spreadsheet</div>\n\nUse tooltips sparingly. If your UI is requiring a lot of tooltips, consider revising the interface to provide better explanations and better labelling.\n\n---\n\n## Additional considerations\n\n- Always provide a tooltip for icon-only buttons or a button with an associated keyboard shortcut.\n- Don’t use tooltip to communicate critical information, including errors.\n- Use sparingly. If you’re building something that requires a lot of tooltips, take a step back and work on clarifying the design and the language used instead.\n"
|
|
9505
|
+
},
|
|
9506
|
+
{
|
|
9507
|
+
"kind": "javascript-module",
|
|
9508
|
+
"path": "src/visually-hidden/VisuallyHidden.ts",
|
|
9509
|
+
"declarations": [
|
|
9510
|
+
{
|
|
9511
|
+
"kind": "class",
|
|
9512
|
+
"description": "Visually hidden is used when an element needs to be available\nto assistive technologies like screen readers, but be otherwise\nhidden.",
|
|
9513
|
+
"name": "VisuallyHidden",
|
|
9514
|
+
"slots": [
|
|
9515
|
+
{
|
|
9516
|
+
"description": "The visually hidden content.",
|
|
9517
|
+
"name": ""
|
|
9518
|
+
}
|
|
9519
|
+
],
|
|
9520
|
+
"members": [],
|
|
9521
|
+
"superclass": {
|
|
9522
|
+
"name": "LitElement",
|
|
9523
|
+
"package": "lit"
|
|
9524
|
+
},
|
|
9525
|
+
"status": "ready",
|
|
9526
|
+
"category": "text",
|
|
9527
|
+
"tagName": "nord-visually-hidden",
|
|
9528
|
+
"customElement": true
|
|
9529
|
+
}
|
|
9530
|
+
],
|
|
9531
|
+
"exports": [
|
|
9707
9532
|
{
|
|
9708
9533
|
"kind": "js",
|
|
9709
|
-
"name": "
|
|
9534
|
+
"name": "default",
|
|
9710
9535
|
"declaration": {
|
|
9711
|
-
"name": "
|
|
9712
|
-
"module": "src/
|
|
9536
|
+
"name": "VisuallyHidden",
|
|
9537
|
+
"module": "src/visually-hidden/VisuallyHidden.ts"
|
|
9713
9538
|
}
|
|
9714
9539
|
},
|
|
9715
9540
|
{
|
|
9716
|
-
"kind": "
|
|
9717
|
-
"name": "
|
|
9541
|
+
"kind": "custom-element-definition",
|
|
9542
|
+
"name": "nord-visually-hidden",
|
|
9718
9543
|
"declaration": {
|
|
9719
|
-
"name": "
|
|
9720
|
-
"module": "src/
|
|
9544
|
+
"name": "VisuallyHidden",
|
|
9545
|
+
"module": "src/visually-hidden/VisuallyHidden.ts"
|
|
9721
9546
|
}
|
|
9722
9547
|
}
|
|
9723
|
-
]
|
|
9548
|
+
],
|
|
9549
|
+
"readme": "## Usage\n\nThis section includes guidelines for designers and developers about the usage of this component in different contexts.\n\n<div class=\"n-usage n-usage-do\">\n\n### Do\n\n- Use to hide text visually from the screen, but keep it available to assistive technologies, such as screen readers.\n\n</div>\n<div class=\"n-usage n-usage-dont\">\n\n### Don’t\n\n- Don’t use for hiding interactive content.\n\n</div>\n"
|
|
9724
9550
|
},
|
|
9725
9551
|
{
|
|
9726
9552
|
"kind": "javascript-module",
|
|
@@ -10657,6 +10483,182 @@
|
|
|
10657
10483
|
}
|
|
10658
10484
|
]
|
|
10659
10485
|
},
|
|
10486
|
+
{
|
|
10487
|
+
"kind": "javascript-module",
|
|
10488
|
+
"path": "src/common/directives/cond.ts",
|
|
10489
|
+
"declarations": [
|
|
10490
|
+
{
|
|
10491
|
+
"kind": "variable",
|
|
10492
|
+
"name": "cond"
|
|
10493
|
+
}
|
|
10494
|
+
],
|
|
10495
|
+
"exports": [
|
|
10496
|
+
{
|
|
10497
|
+
"kind": "js",
|
|
10498
|
+
"name": "cond",
|
|
10499
|
+
"declaration": {
|
|
10500
|
+
"name": "cond",
|
|
10501
|
+
"module": "src/common/directives/cond.ts"
|
|
10502
|
+
}
|
|
10503
|
+
}
|
|
10504
|
+
]
|
|
10505
|
+
},
|
|
10506
|
+
{
|
|
10507
|
+
"kind": "javascript-module",
|
|
10508
|
+
"path": "src/common/directives/wrapIf.ts",
|
|
10509
|
+
"declarations": [
|
|
10510
|
+
{
|
|
10511
|
+
"kind": "function",
|
|
10512
|
+
"name": "wrapIf",
|
|
10513
|
+
"return": {
|
|
10514
|
+
"type": {
|
|
10515
|
+
"text": "TInner"
|
|
10516
|
+
}
|
|
10517
|
+
},
|
|
10518
|
+
"parameters": [
|
|
10519
|
+
{
|
|
10520
|
+
"name": "condition",
|
|
10521
|
+
"type": {
|
|
10522
|
+
"text": "false"
|
|
10523
|
+
}
|
|
10524
|
+
},
|
|
10525
|
+
{
|
|
10526
|
+
"name": "inner",
|
|
10527
|
+
"type": {
|
|
10528
|
+
"text": "() => TInner"
|
|
10529
|
+
}
|
|
10530
|
+
},
|
|
10531
|
+
{
|
|
10532
|
+
"name": "wrapper",
|
|
10533
|
+
"type": {
|
|
10534
|
+
"text": "(inner: TInner) => TWrapper"
|
|
10535
|
+
}
|
|
10536
|
+
}
|
|
10537
|
+
]
|
|
10538
|
+
},
|
|
10539
|
+
{
|
|
10540
|
+
"kind": "function",
|
|
10541
|
+
"name": "wrapIf",
|
|
10542
|
+
"return": {
|
|
10543
|
+
"type": {
|
|
10544
|
+
"text": "TWrapper"
|
|
10545
|
+
}
|
|
10546
|
+
},
|
|
10547
|
+
"parameters": [
|
|
10548
|
+
{
|
|
10549
|
+
"name": "condition",
|
|
10550
|
+
"type": {
|
|
10551
|
+
"text": "true"
|
|
10552
|
+
}
|
|
10553
|
+
},
|
|
10554
|
+
{
|
|
10555
|
+
"name": "inner",
|
|
10556
|
+
"type": {
|
|
10557
|
+
"text": "() => TInner"
|
|
10558
|
+
}
|
|
10559
|
+
},
|
|
10560
|
+
{
|
|
10561
|
+
"name": "wrapper",
|
|
10562
|
+
"type": {
|
|
10563
|
+
"text": "(inner: TInner) => TWrapper"
|
|
10564
|
+
}
|
|
10565
|
+
}
|
|
10566
|
+
]
|
|
10567
|
+
},
|
|
10568
|
+
{
|
|
10569
|
+
"kind": "function",
|
|
10570
|
+
"name": "wrapIf",
|
|
10571
|
+
"return": {
|
|
10572
|
+
"type": {
|
|
10573
|
+
"text": "TInner | TWrapper"
|
|
10574
|
+
}
|
|
10575
|
+
},
|
|
10576
|
+
"parameters": [
|
|
10577
|
+
{
|
|
10578
|
+
"name": "condition",
|
|
10579
|
+
"type": {
|
|
10580
|
+
"text": "unknown"
|
|
10581
|
+
}
|
|
10582
|
+
},
|
|
10583
|
+
{
|
|
10584
|
+
"name": "inner",
|
|
10585
|
+
"type": {
|
|
10586
|
+
"text": "() => TInner"
|
|
10587
|
+
}
|
|
10588
|
+
},
|
|
10589
|
+
{
|
|
10590
|
+
"name": "wrapper",
|
|
10591
|
+
"type": {
|
|
10592
|
+
"text": "(inner: TInner) => TWrapper"
|
|
10593
|
+
}
|
|
10594
|
+
}
|
|
10595
|
+
]
|
|
10596
|
+
},
|
|
10597
|
+
{
|
|
10598
|
+
"kind": "function",
|
|
10599
|
+
"name": "wrapIf",
|
|
10600
|
+
"parameters": [
|
|
10601
|
+
{
|
|
10602
|
+
"name": "condition",
|
|
10603
|
+
"type": {
|
|
10604
|
+
"text": "any"
|
|
10605
|
+
}
|
|
10606
|
+
},
|
|
10607
|
+
{
|
|
10608
|
+
"name": "inner",
|
|
10609
|
+
"type": {
|
|
10610
|
+
"text": "() => TInner"
|
|
10611
|
+
}
|
|
10612
|
+
},
|
|
10613
|
+
{
|
|
10614
|
+
"name": "wrapper",
|
|
10615
|
+
"type": {
|
|
10616
|
+
"text": "(innards: TInner) => TWrapper"
|
|
10617
|
+
}
|
|
10618
|
+
}
|
|
10619
|
+
],
|
|
10620
|
+
"return": {
|
|
10621
|
+
"type": {
|
|
10622
|
+
"text": ""
|
|
10623
|
+
}
|
|
10624
|
+
}
|
|
10625
|
+
}
|
|
10626
|
+
],
|
|
10627
|
+
"exports": [
|
|
10628
|
+
{
|
|
10629
|
+
"kind": "js",
|
|
10630
|
+
"name": "wrapIf",
|
|
10631
|
+
"declaration": {
|
|
10632
|
+
"name": "wrapIf",
|
|
10633
|
+
"module": "src/common/directives/wrapIf.ts"
|
|
10634
|
+
}
|
|
10635
|
+
},
|
|
10636
|
+
{
|
|
10637
|
+
"kind": "js",
|
|
10638
|
+
"name": "wrapIf",
|
|
10639
|
+
"declaration": {
|
|
10640
|
+
"name": "wrapIf",
|
|
10641
|
+
"module": "src/common/directives/wrapIf.ts"
|
|
10642
|
+
}
|
|
10643
|
+
},
|
|
10644
|
+
{
|
|
10645
|
+
"kind": "js",
|
|
10646
|
+
"name": "wrapIf",
|
|
10647
|
+
"declaration": {
|
|
10648
|
+
"name": "wrapIf",
|
|
10649
|
+
"module": "src/common/directives/wrapIf.ts"
|
|
10650
|
+
}
|
|
10651
|
+
},
|
|
10652
|
+
{
|
|
10653
|
+
"kind": "js",
|
|
10654
|
+
"name": "wrapIf",
|
|
10655
|
+
"declaration": {
|
|
10656
|
+
"name": "wrapIf",
|
|
10657
|
+
"module": "src/common/directives/wrapIf.ts"
|
|
10658
|
+
}
|
|
10659
|
+
}
|
|
10660
|
+
]
|
|
10661
|
+
},
|
|
10660
10662
|
{
|
|
10661
10663
|
"kind": "javascript-module",
|
|
10662
10664
|
"path": "src/common/mixins/DraftComponentMixin.ts",
|