@nordhealth/components 1.0.0-alpha.41 → 1.0.0-alpha.42

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.
@@ -679,184 +679,6 @@
679
679
  }
680
680
  ]
681
681
  },
682
- {
683
- "kind": "javascript-module",
684
- "path": "src/common/collection.ts",
685
- "declarations": [
686
- {
687
- "kind": "function",
688
- "name": "groupBy",
689
- "parameters": [
690
- {
691
- "name": "array",
692
- "type": {
693
- "text": "Array<TObject>"
694
- },
695
- "description": "the collection of objects to group"
696
- },
697
- {
698
- "name": "key",
699
- "type": {
700
- "text": "TKey"
701
- },
702
- "description": "the property to group by"
703
- }
704
- ],
705
- "description": "Groups an array objects by property value",
706
- "return": {
707
- "type": {
708
- "text": ""
709
- }
710
- }
711
- }
712
- ],
713
- "exports": [
714
- {
715
- "kind": "js",
716
- "name": "groupBy",
717
- "declaration": {
718
- "name": "groupBy",
719
- "module": "src/common/collection.ts"
720
- }
721
- }
722
- ]
723
- },
724
- {
725
- "kind": "javascript-module",
726
- "path": "src/common/events.ts",
727
- "declarations": [
728
- {
729
- "kind": "class",
730
- "description": "A base class for events which defaults to bubbling and composed",
731
- "name": "NordEvent",
732
- "superclass": {
733
- "name": "Event",
734
- "module": "src/common/events.ts"
735
- },
736
- "status": null,
737
- "category": null
738
- }
739
- ],
740
- "exports": [
741
- {
742
- "kind": "js",
743
- "name": "NordEvent",
744
- "declaration": {
745
- "name": "NordEvent",
746
- "module": "src/common/events.ts"
747
- }
748
- }
749
- ]
750
- },
751
- {
752
- "kind": "javascript-module",
753
- "path": "src/common/focus.ts",
754
- "declarations": [
755
- {
756
- "kind": "function",
757
- "name": "getFocusedElement",
758
- "return": {
759
- "type": {
760
- "text": "Element | undefined"
761
- }
762
- },
763
- "parameters": [
764
- {
765
- "name": "root",
766
- "type": {
767
- "text": "Document | ShadowRoot"
768
- }
769
- }
770
- ],
771
- "description": "Gets the currently focused element, taking shadow roots into account."
772
- }
773
- ],
774
- "exports": [
775
- {
776
- "kind": "js",
777
- "name": "getFocusedElement",
778
- "declaration": {
779
- "name": "getFocusedElement",
780
- "module": "src/common/focus.ts"
781
- }
782
- }
783
- ]
784
- },
785
- {
786
- "kind": "javascript-module",
787
- "path": "src/common/number.ts",
788
- "declarations": [
789
- {
790
- "kind": "function",
791
- "name": "wrap",
792
- "parameters": [
793
- {
794
- "name": "val",
795
- "type": {
796
- "text": "number"
797
- }
798
- },
799
- {
800
- "name": "min",
801
- "type": {
802
- "text": "number"
803
- }
804
- },
805
- {
806
- "name": "max",
807
- "type": {
808
- "text": "number"
809
- }
810
- }
811
- ],
812
- "description": "Wraps a value so that it always falls within min/max,\nwhere a value greater than max gets set to min, and vice versa"
813
- }
814
- ],
815
- "exports": [
816
- {
817
- "kind": "js",
818
- "name": "wrap",
819
- "declaration": {
820
- "name": "wrap",
821
- "module": "src/common/number.ts"
822
- }
823
- }
824
- ]
825
- },
826
- {
827
- "kind": "javascript-module",
828
- "path": "src/common/ref.ts",
829
- "declarations": [
830
- {
831
- "kind": "function",
832
- "name": "mergeRefs",
833
- "return": {
834
- "type": {
835
- "text": "RefCallback"
836
- }
837
- },
838
- "parameters": [
839
- {
840
- "name": "refs",
841
- "type": {
842
- "text": "Ref[]"
843
- }
844
- }
845
- ],
846
- "description": "Creates a ref callback which will assign the element to every given ref"
847
- }
848
- ],
849
- "exports": [
850
- {
851
- "kind": "js",
852
- "name": "mergeRefs",
853
- "declaration": {
854
- "name": "mergeRefs",
855
- "module": "src/common/ref.ts"
856
- }
857
- }
858
- ]
859
- },
860
682
  {
861
683
  "kind": "javascript-module",
862
684
  "path": "src/command-menu/CommandMenu.ts",
@@ -1660,8 +1482,186 @@
1660
1482
  "kind": "custom-element-definition",
1661
1483
  "name": "nord-icon",
1662
1484
  "declaration": {
1663
- "name": "Icon",
1664
- "module": "src/icon/Icon.ts"
1485
+ "name": "Icon",
1486
+ "module": "src/icon/Icon.ts"
1487
+ }
1488
+ }
1489
+ ]
1490
+ },
1491
+ {
1492
+ "kind": "javascript-module",
1493
+ "path": "src/common/collection.ts",
1494
+ "declarations": [
1495
+ {
1496
+ "kind": "function",
1497
+ "name": "groupBy",
1498
+ "parameters": [
1499
+ {
1500
+ "name": "array",
1501
+ "type": {
1502
+ "text": "Array<TObject>"
1503
+ },
1504
+ "description": "the collection of objects to group"
1505
+ },
1506
+ {
1507
+ "name": "key",
1508
+ "type": {
1509
+ "text": "TKey"
1510
+ },
1511
+ "description": "the property to group by"
1512
+ }
1513
+ ],
1514
+ "description": "Groups an array objects by property value",
1515
+ "return": {
1516
+ "type": {
1517
+ "text": ""
1518
+ }
1519
+ }
1520
+ }
1521
+ ],
1522
+ "exports": [
1523
+ {
1524
+ "kind": "js",
1525
+ "name": "groupBy",
1526
+ "declaration": {
1527
+ "name": "groupBy",
1528
+ "module": "src/common/collection.ts"
1529
+ }
1530
+ }
1531
+ ]
1532
+ },
1533
+ {
1534
+ "kind": "javascript-module",
1535
+ "path": "src/common/events.ts",
1536
+ "declarations": [
1537
+ {
1538
+ "kind": "class",
1539
+ "description": "A base class for events which defaults to bubbling and composed",
1540
+ "name": "NordEvent",
1541
+ "superclass": {
1542
+ "name": "Event",
1543
+ "module": "src/common/events.ts"
1544
+ },
1545
+ "status": null,
1546
+ "category": null
1547
+ }
1548
+ ],
1549
+ "exports": [
1550
+ {
1551
+ "kind": "js",
1552
+ "name": "NordEvent",
1553
+ "declaration": {
1554
+ "name": "NordEvent",
1555
+ "module": "src/common/events.ts"
1556
+ }
1557
+ }
1558
+ ]
1559
+ },
1560
+ {
1561
+ "kind": "javascript-module",
1562
+ "path": "src/common/focus.ts",
1563
+ "declarations": [
1564
+ {
1565
+ "kind": "function",
1566
+ "name": "getFocusedElement",
1567
+ "return": {
1568
+ "type": {
1569
+ "text": "Element | undefined"
1570
+ }
1571
+ },
1572
+ "parameters": [
1573
+ {
1574
+ "name": "root",
1575
+ "type": {
1576
+ "text": "Document | ShadowRoot"
1577
+ }
1578
+ }
1579
+ ],
1580
+ "description": "Gets the currently focused element, taking shadow roots into account."
1581
+ }
1582
+ ],
1583
+ "exports": [
1584
+ {
1585
+ "kind": "js",
1586
+ "name": "getFocusedElement",
1587
+ "declaration": {
1588
+ "name": "getFocusedElement",
1589
+ "module": "src/common/focus.ts"
1590
+ }
1591
+ }
1592
+ ]
1593
+ },
1594
+ {
1595
+ "kind": "javascript-module",
1596
+ "path": "src/common/number.ts",
1597
+ "declarations": [
1598
+ {
1599
+ "kind": "function",
1600
+ "name": "wrap",
1601
+ "parameters": [
1602
+ {
1603
+ "name": "val",
1604
+ "type": {
1605
+ "text": "number"
1606
+ }
1607
+ },
1608
+ {
1609
+ "name": "min",
1610
+ "type": {
1611
+ "text": "number"
1612
+ }
1613
+ },
1614
+ {
1615
+ "name": "max",
1616
+ "type": {
1617
+ "text": "number"
1618
+ }
1619
+ }
1620
+ ],
1621
+ "description": "Wraps a value so that it always falls within min/max,\nwhere a value greater than max gets set to min, and vice versa"
1622
+ }
1623
+ ],
1624
+ "exports": [
1625
+ {
1626
+ "kind": "js",
1627
+ "name": "wrap",
1628
+ "declaration": {
1629
+ "name": "wrap",
1630
+ "module": "src/common/number.ts"
1631
+ }
1632
+ }
1633
+ ]
1634
+ },
1635
+ {
1636
+ "kind": "javascript-module",
1637
+ "path": "src/common/ref.ts",
1638
+ "declarations": [
1639
+ {
1640
+ "kind": "function",
1641
+ "name": "mergeRefs",
1642
+ "return": {
1643
+ "type": {
1644
+ "text": "RefCallback"
1645
+ }
1646
+ },
1647
+ "parameters": [
1648
+ {
1649
+ "name": "refs",
1650
+ "type": {
1651
+ "text": "Ref[]"
1652
+ }
1653
+ }
1654
+ ],
1655
+ "description": "Creates a ref callback which will assign the element to every given ref"
1656
+ }
1657
+ ],
1658
+ "exports": [
1659
+ {
1660
+ "kind": "js",
1661
+ "name": "mergeRefs",
1662
+ "declaration": {
1663
+ "name": "mergeRefs",
1664
+ "module": "src/common/ref.ts"
1665
1665
  }
1666
1666
  }
1667
1667
  ]
@@ -3003,131 +3003,6 @@
3003
3003
  }
3004
3004
  ]
3005
3005
  },
3006
- {
3007
- "kind": "javascript-module",
3008
- "path": "src/stack/Stack.ts",
3009
- "declarations": [
3010
- {
3011
- "kind": "class",
3012
- "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
3013
- "name": "Stack",
3014
- "slots": [
3015
- {
3016
- "description": "The stack content.",
3017
- "name": ""
3018
- }
3019
- ],
3020
- "members": [
3021
- {
3022
- "kind": "field",
3023
- "name": "gap",
3024
- "type": {
3025
- "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
3026
- },
3027
- "default": "\"m\"",
3028
- "description": "The space injected between components.",
3029
- "attribute": "gap",
3030
- "reflects": true
3031
- },
3032
- {
3033
- "kind": "field",
3034
- "name": "direction",
3035
- "type": {
3036
- "text": "\"vertical\" | \"horizontal\""
3037
- },
3038
- "default": "\"vertical\"",
3039
- "description": "The direction of the stack.",
3040
- "attribute": "direction",
3041
- "reflects": true
3042
- },
3043
- {
3044
- "kind": "field",
3045
- "name": "alignItems",
3046
- "type": {
3047
- "text": "\"center\" | \"start\" | \"end\" | undefined"
3048
- },
3049
- "description": "How to align the child items inside the stack.",
3050
- "attribute": "align-items",
3051
- "reflects": true
3052
- },
3053
- {
3054
- "kind": "field",
3055
- "name": "_warningLogged",
3056
- "type": {
3057
- "text": "boolean"
3058
- },
3059
- "privacy": "private",
3060
- "static": true,
3061
- "default": "false",
3062
- "inheritedFrom": {
3063
- "name": "DraftComponentMixin",
3064
- "module": "src/common/mixins/DraftComponentMixin.ts"
3065
- }
3066
- }
3067
- ],
3068
- "attributes": [
3069
- {
3070
- "name": "gap",
3071
- "type": {
3072
- "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
3073
- },
3074
- "default": "\"m\"",
3075
- "description": "The space injected between components.",
3076
- "fieldName": "gap"
3077
- },
3078
- {
3079
- "name": "direction",
3080
- "type": {
3081
- "text": "\"vertical\" | \"horizontal\""
3082
- },
3083
- "default": "\"vertical\"",
3084
- "description": "The direction of the stack.",
3085
- "fieldName": "direction"
3086
- },
3087
- {
3088
- "name": "align-items",
3089
- "type": {
3090
- "text": "\"center\" | \"start\" | \"end\" | undefined"
3091
- },
3092
- "description": "How to align the child items inside the stack.",
3093
- "fieldName": "alignItems"
3094
- }
3095
- ],
3096
- "mixins": [
3097
- {
3098
- "name": "DraftComponentMixin",
3099
- "module": "/src/common/mixins/DraftComponentMixin.js"
3100
- }
3101
- ],
3102
- "superclass": {
3103
- "name": "LitElement",
3104
- "package": "lit"
3105
- },
3106
- "status": "draft",
3107
- "category": "structure",
3108
- "tagName": "nord-stack",
3109
- "customElement": true
3110
- }
3111
- ],
3112
- "exports": [
3113
- {
3114
- "kind": "js",
3115
- "name": "default",
3116
- "declaration": {
3117
- "name": "Stack",
3118
- "module": "src/stack/Stack.ts"
3119
- }
3120
- },
3121
- {
3122
- "kind": "custom-element-definition",
3123
- "name": "nord-stack",
3124
- "declaration": {
3125
- "name": "Stack",
3126
- "module": "src/stack/Stack.ts"
3127
- }
3128
- }
3129
- ]
3130
- },
3131
3006
  {
3132
3007
  "kind": "javascript-module",
3133
3008
  "path": "src/textarea/Textarea.ts",
@@ -3682,6 +3557,131 @@
3682
3557
  }
3683
3558
  ]
3684
3559
  },
3560
+ {
3561
+ "kind": "javascript-module",
3562
+ "path": "src/stack/Stack.ts",
3563
+ "declarations": [
3564
+ {
3565
+ "kind": "class",
3566
+ "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
3567
+ "name": "Stack",
3568
+ "slots": [
3569
+ {
3570
+ "description": "The stack content.",
3571
+ "name": ""
3572
+ }
3573
+ ],
3574
+ "members": [
3575
+ {
3576
+ "kind": "field",
3577
+ "name": "gap",
3578
+ "type": {
3579
+ "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
3580
+ },
3581
+ "default": "\"m\"",
3582
+ "description": "The space injected between components.",
3583
+ "attribute": "gap",
3584
+ "reflects": true
3585
+ },
3586
+ {
3587
+ "kind": "field",
3588
+ "name": "direction",
3589
+ "type": {
3590
+ "text": "\"vertical\" | \"horizontal\""
3591
+ },
3592
+ "default": "\"vertical\"",
3593
+ "description": "The direction of the stack.",
3594
+ "attribute": "direction",
3595
+ "reflects": true
3596
+ },
3597
+ {
3598
+ "kind": "field",
3599
+ "name": "alignItems",
3600
+ "type": {
3601
+ "text": "\"center\" | \"start\" | \"end\" | undefined"
3602
+ },
3603
+ "description": "How to align the child items inside the stack.",
3604
+ "attribute": "align-items",
3605
+ "reflects": true
3606
+ },
3607
+ {
3608
+ "kind": "field",
3609
+ "name": "_warningLogged",
3610
+ "type": {
3611
+ "text": "boolean"
3612
+ },
3613
+ "privacy": "private",
3614
+ "static": true,
3615
+ "default": "false",
3616
+ "inheritedFrom": {
3617
+ "name": "DraftComponentMixin",
3618
+ "module": "src/common/mixins/DraftComponentMixin.ts"
3619
+ }
3620
+ }
3621
+ ],
3622
+ "attributes": [
3623
+ {
3624
+ "name": "gap",
3625
+ "type": {
3626
+ "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
3627
+ },
3628
+ "default": "\"m\"",
3629
+ "description": "The space injected between components.",
3630
+ "fieldName": "gap"
3631
+ },
3632
+ {
3633
+ "name": "direction",
3634
+ "type": {
3635
+ "text": "\"vertical\" | \"horizontal\""
3636
+ },
3637
+ "default": "\"vertical\"",
3638
+ "description": "The direction of the stack.",
3639
+ "fieldName": "direction"
3640
+ },
3641
+ {
3642
+ "name": "align-items",
3643
+ "type": {
3644
+ "text": "\"center\" | \"start\" | \"end\" | undefined"
3645
+ },
3646
+ "description": "How to align the child items inside the stack.",
3647
+ "fieldName": "alignItems"
3648
+ }
3649
+ ],
3650
+ "mixins": [
3651
+ {
3652
+ "name": "DraftComponentMixin",
3653
+ "module": "/src/common/mixins/DraftComponentMixin.js"
3654
+ }
3655
+ ],
3656
+ "superclass": {
3657
+ "name": "LitElement",
3658
+ "package": "lit"
3659
+ },
3660
+ "status": "draft",
3661
+ "category": "structure",
3662
+ "tagName": "nord-stack",
3663
+ "customElement": true
3664
+ }
3665
+ ],
3666
+ "exports": [
3667
+ {
3668
+ "kind": "js",
3669
+ "name": "default",
3670
+ "declaration": {
3671
+ "name": "Stack",
3672
+ "module": "src/stack/Stack.ts"
3673
+ }
3674
+ },
3675
+ {
3676
+ "kind": "custom-element-definition",
3677
+ "name": "nord-stack",
3678
+ "declaration": {
3679
+ "name": "Stack",
3680
+ "module": "src/stack/Stack.ts"
3681
+ }
3682
+ }
3683
+ ]
3684
+ },
3685
3685
  {
3686
3686
  "kind": "javascript-module",
3687
3687
  "path": "src/visually-hidden/VisuallyHidden.ts",
@@ -1,2 +1,2 @@
1
- import{p as t,T as e,_ as r,r as n}from"./DraftComponentMixin-4bb26f5d.js";import{e as o}from"./property-03f59dce.js";import{S as i}from"./SlotController-fda28afb.js";import{N as a}from"./events-731d0007.js";function l(n){class l extends n{constructor(){super(...arguments),this.slots=new i(this),this.inputId="input",this.label="",this.hideLabel=!1,this.required=!1,this.expand=!1,this.handleFormData=t=>{var e;this.name&&t.formData.append(this.name,null!==(e=this.value)&&void 0!==e?e:"")}}connectedCallback(){var t;super.connectedCallback(),null===(t=this.form)||void 0===t||t.addEventListener("formdata",this.handleFormData)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.form)||void 0===t||t.removeEventListener("formdata",this.handleFormData)}handleChange(t){const e=t.target;this.value=e.value,this.dispatchEvent(new a("change"))}renderLabel(){const r=t`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label> ${this.hasHint?this.renderHint():e}`;return this.hideLabel?t`<nord-visually-hidden>${r}</nord-visually-hidden>`:t`<div class="n-label-container">${r}</div>`}renderHint(){return t`<div class="n-caption n-hint" id="hint"><slot name="hint">${this.hint}</slot></div>`}renderError(){return this.hasError?t`<div class="n-caption n-error" id="error" role="alert"><slot name="error">${this.error}</slot></div>`:e}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?"hint error":t?"hint":e?"error":void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return null!=this.hint||this.slots.hasSlottedContent("hint")}get hasError(){return null!=this.error||this.slots.hasSlottedContent("error")}}return r([o()],l.prototype,"label",void 0),r([o()],l.prototype,"hint",void 0),r([o({type:Boolean,attribute:"hide-label"})],l.prototype,"hideLabel",void 0),r([o()],l.prototype,"placeholder",void 0),r([o()],l.prototype,"error",void 0),r([o({type:Boolean})],l.prototype,"required",void 0),r([o({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),l}const s=n`:host{all:initial;display:block;font-family:var(--n-font-family);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}.n-caption{font-size:var(--n-font-size-s);line-height:1.3}.n-label-container{padding-block-end:calc(var(--n-space-s) * 1.5);display:inline-block}label{display:block;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);line-height:var(--n-line-height-heading)}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-error{margin-block-start:calc(var(--n-space-s));color:var(--n-color-text-error)}`;export{l as F,s};
2
- //# sourceMappingURL=FormField-02dd3b4f.js.map
1
+ import{p as t,T as e,_ as r,r as n}from"./DraftComponentMixin-4bb26f5d.js";import{e as o}from"./property-03f59dce.js";import{S as i}from"./SlotController-fda28afb.js";import{N as a}from"./events-731d0007.js";function l(n){class l extends n{constructor(){super(...arguments),this.slots=new i(this),this.inputId="input",this.label="",this.hideLabel=!1,this.required=!1,this.expand=!1,this.handleFormData=t=>{var e;this.name&&t.formData.append(this.name,null!==(e=this.value)&&void 0!==e?e:"")}}connectedCallback(){var t;super.connectedCallback(),null===(t=this.form)||void 0===t||t.addEventListener("formdata",this.handleFormData)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.form)||void 0===t||t.removeEventListener("formdata",this.handleFormData)}handleChange(t){const e=t.target;this.value=e.value,this.dispatchEvent(new a("change"))}renderLabel(){const r=t`<label for="${this.inputId}"><slot name="label">${this.label}</slot></label> ${this.hasHint?this.renderHint():e}`;return this.hideLabel?t`<nord-visually-hidden>${r}</nord-visually-hidden>`:t`<div class="n-label-container">${r}</div>`}renderHint(){return t`<div class="n-caption n-hint" id="hint"><slot name="hint">${this.hint}</slot></div>`}renderError(){return this.hasError?t`<div class="n-caption n-error" id="error" role="alert"><slot name="error">${this.error}</slot></div>`:e}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?"hint error":t?"hint":e?"error":void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return null!=this.hint||this.slots.hasSlottedContent("hint")}get hasError(){return null!=this.error||this.slots.hasSlottedContent("error")}}return r([o()],l.prototype,"label",void 0),r([o()],l.prototype,"hint",void 0),r([o({type:Boolean,attribute:"hide-label"})],l.prototype,"hideLabel",void 0),r([o()],l.prototype,"placeholder",void 0),r([o()],l.prototype,"error",void 0),r([o({type:Boolean})],l.prototype,"required",void 0),r([o({reflect:!0,type:Boolean})],l.prototype,"expand",void 0),l}const s=n`:host{all:initial;display:block;font-family:var(--n-font-family);line-height:var(--n-line-height);font-feature-settings:var(--n-font-features)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}.n-caption{font-size:var(--n-font-size-s);line-height:1.3}.n-label-container{padding-block-end:var(--n-space-s);display:inline-block}label{display:block;color:var(--n-color-text);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);line-height:var(--n-line-height-heading)}.n-hint{padding-block-start:calc(var(--n-space-s)/ 2);color:var(--n-color-text-weaker)}.n-error{margin-block-start:calc(var(--n-space-s));color:var(--n-color-text-error)}`;export{l as F,s};
2
+ //# sourceMappingURL=FormField-6bddeef9.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FormField-02dd3b4f.js","sources":["../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { html, LitElement, nothing, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n hint?: string\n hideLabel: boolean\n placeholder?: string\n error?: string\n expand: boolean\n\n protected inputId: string\n protected slots: SlotController\n\n protected handleChange(e: Event): void\n protected renderLabel(): TemplateResult\n protected renderError(): TemplateResult\n protected getDescribedBy(): string | undefined\n protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n /**\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n class FormAssociatedElement extends superClass {\n protected slots = new SlotController(this)\n\n protected inputId = \"input\"\n\n /**\n * Label for the input.\n */\n @property() label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property() hint?: string\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Placeholder text to display within the input.\n */\n @property() placeholder?: string\n\n /**\n * Optional error to be shown with the input. Alternatively use the error slot.\n */\n @property() error?: string\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ type: Boolean }) required = false\n\n /**\n * Controls whether the input expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n connectedCallback() {\n super.connectedCallback()\n this.form?.addEventListener(\"formdata\", this.handleFormData)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.form?.removeEventListener(\"formdata\", this.handleFormData)\n }\n\n private handleFormData = (e: FormDataEvent) => {\n if (this.name) {\n e.formData.append(this.name, this.value ?? \"\")\n }\n }\n\n protected handleChange(e: Event) {\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n protected renderLabel() {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n ${this.hasHint ? this.renderHint() : nothing}\n `\n\n return this.hideLabel\n ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n : html`<div class=\"n-label-container\">${label}</div>`\n }\n\n private renderHint() {\n return html`\n <div class=\"n-caption n-hint\" id=\"hint\">\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n }\n\n protected renderError() {\n if (!this.hasError) {\n return nothing\n }\n\n return html`\n <div class=\"n-caption n-error\" id=\"error\" role=\"alert\">\n <slot name=\"error\">${this.error}</slot>\n </div>\n `\n }\n\n protected getDescribedBy() {\n const { hasHint, hasError } = this\n\n if (hasHint && hasError) {\n return \"hint error\"\n }\n if (hasHint) {\n return \"hint\"\n }\n if (hasError) {\n return \"error\"\n }\n\n return undefined\n }\n\n protected getInvalid() {\n return this.hasError ? \"true\" : undefined\n }\n\n protected get hasHint() {\n return this.hint != null || this.slots.hasSlottedContent(\"hint\")\n }\n\n protected get hasError() {\n return this.error != null || this.slots.hasSlottedContent(\"error\")\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormAssociatedMixin","superClass","FormAssociatedElement","constructor","this","SlotController","e","name","formData","append","value","connectedCallback","super","form","addEventListener","handleFormData","disconnectedCallback","removeEventListener","handleChange","target","dispatchEvent","NordEvent","renderLabel","label","html","inputId","hasHint","renderHint","nothing","hideLabel","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","slots","hasSlottedContent","__decorate","property","type","Boolean","attribute","reflect"],"mappings":"yNA6BgBA,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApCE,kCACYC,WAAQ,IAAIC,EAAeD,MAE3BA,aAAU,QAKRA,WAAgB,GAU0BA,gBAAY,EAiBrCA,eAAW,EAKIA,aAAS,EAY7CA,oBAAkBE,UACpBF,KAAKG,MACPD,EAAEE,SAASC,OAAOL,KAAKG,eAAMH,KAAKM,qBAAS,KAZ/CC,0BACEC,MAAMD,8BACNP,KAAKS,qBAAMC,iBAAiB,WAAYV,KAAKW,gBAG/CC,6BACEJ,MAAMI,iCACNZ,KAAKS,qBAAMI,oBAAoB,WAAYb,KAAKW,gBASxCG,aAAaZ,GACrB,MAAMa,EAASb,EAAEa,OACjBf,KAAKM,MAAQS,EAAOT,MAKpBN,KAAKgB,cAAc,IAAIC,EAAU,WAGzBC,cACR,MAAMC,EAAQC,CAAI,eACHpB,KAAKqB,+BACKrB,KAAKmB,wBAG1BnB,KAAKsB,QAAUtB,KAAKuB,aAAeC,IAGvC,OAAOxB,KAAKyB,UACRL,CAAI,yBAAyBD,2BAC7BC,CAAI,kCAAkCD,UAGpCI,aACN,OAAOH,CAAI,6DAEapB,KAAK0B,oBAKrBC,cACR,OAAK3B,KAAK4B,SAIHR,CAAI,6EAEcpB,KAAK6B,qBALrBL,EAUDM,iBACR,MAAMR,QAAEA,EAAOM,SAAEA,GAAa5B,KAE9B,OAAIsB,GAAWM,EACN,aAELN,EACK,OAELM,EACK,aADT,EAOQG,aACR,OAAO/B,KAAK4B,SAAW,YAASI,EAGpBV,cACZ,OAAoB,MAAbtB,KAAK0B,MAAgB1B,KAAKiC,MAAMC,kBAAkB,QAG7CN,eACZ,OAAqB,MAAd5B,KAAK6B,OAAiB7B,KAAKiC,MAAMC,kBAAkB,UAI9D,OA3HcC,GAAXC,iCAKWD,GAAXC,gCAKqDD,GAArDC,EAAS,CAAEC,KAAMC,QAASC,UAAW,gDAK1BJ,GAAXC,uCAKWD,GAAXC,iCAO4BD,GAA5BC,EAAS,CAAEC,KAAMC,0CAK0BH,GAA3CC,EAAS,CAAEI,SAAS,EAAMH,KAAMC,wCA2F5BxC"}
1
+ {"version":3,"file":"FormField-6bddeef9.js","sources":["../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { html, LitElement, nothing, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n hint?: string\n hideLabel: boolean\n placeholder?: string\n error?: string\n expand: boolean\n\n protected inputId: string\n protected slots: SlotController\n\n protected handleChange(e: Event): void\n protected renderLabel(): TemplateResult\n protected renderError(): TemplateResult\n protected getDescribedBy(): string | undefined\n protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n /**\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n class FormAssociatedElement extends superClass {\n protected slots = new SlotController(this)\n\n protected inputId = \"input\"\n\n /**\n * Label for the input.\n */\n @property() label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property() hint?: string\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Placeholder text to display within the input.\n */\n @property() placeholder?: string\n\n /**\n * Optional error to be shown with the input. Alternatively use the error slot.\n */\n @property() error?: string\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ type: Boolean }) required = false\n\n /**\n * Controls whether the input expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n connectedCallback() {\n super.connectedCallback()\n this.form?.addEventListener(\"formdata\", this.handleFormData)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n this.form?.removeEventListener(\"formdata\", this.handleFormData)\n }\n\n private handleFormData = (e: FormDataEvent) => {\n if (this.name) {\n e.formData.append(this.name, this.value ?? \"\")\n }\n }\n\n protected handleChange(e: Event) {\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n protected renderLabel() {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n ${this.hasHint ? this.renderHint() : nothing}\n `\n\n return this.hideLabel\n ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n : html`<div class=\"n-label-container\">${label}</div>`\n }\n\n private renderHint() {\n return html`\n <div class=\"n-caption n-hint\" id=\"hint\">\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n }\n\n protected renderError() {\n if (!this.hasError) {\n return nothing\n }\n\n return html`\n <div class=\"n-caption n-error\" id=\"error\" role=\"alert\">\n <slot name=\"error\">${this.error}</slot>\n </div>\n `\n }\n\n protected getDescribedBy() {\n const { hasHint, hasError } = this\n\n if (hasHint && hasError) {\n return \"hint error\"\n }\n if (hasHint) {\n return \"hint\"\n }\n if (hasError) {\n return \"error\"\n }\n\n return undefined\n }\n\n protected getInvalid() {\n return this.hasError ? \"true\" : undefined\n }\n\n protected get hasHint() {\n return this.hint != null || this.slots.hasSlottedContent(\"hint\")\n }\n\n protected get hasError() {\n return this.error != null || this.slots.hasSlottedContent(\"error\")\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormAssociatedMixin","superClass","FormAssociatedElement","constructor","this","SlotController","e","name","formData","append","value","connectedCallback","super","form","addEventListener","handleFormData","disconnectedCallback","removeEventListener","handleChange","target","dispatchEvent","NordEvent","renderLabel","label","html","inputId","hasHint","renderHint","nothing","hideLabel","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","slots","hasSlottedContent","__decorate","property","type","Boolean","attribute","reflect"],"mappings":"yNA6BgBA,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApCE,kCACYC,WAAQ,IAAIC,EAAeD,MAE3BA,aAAU,QAKRA,WAAgB,GAU0BA,gBAAY,EAiBrCA,eAAW,EAKIA,aAAS,EAY7CA,oBAAkBE,UACpBF,KAAKG,MACPD,EAAEE,SAASC,OAAOL,KAAKG,eAAMH,KAAKM,qBAAS,KAZ/CC,0BACEC,MAAMD,8BACNP,KAAKS,qBAAMC,iBAAiB,WAAYV,KAAKW,gBAG/CC,6BACEJ,MAAMI,iCACNZ,KAAKS,qBAAMI,oBAAoB,WAAYb,KAAKW,gBASxCG,aAAaZ,GACrB,MAAMa,EAASb,EAAEa,OACjBf,KAAKM,MAAQS,EAAOT,MAKpBN,KAAKgB,cAAc,IAAIC,EAAU,WAGzBC,cACR,MAAMC,EAAQC,CAAI,eACHpB,KAAKqB,+BACKrB,KAAKmB,wBAG1BnB,KAAKsB,QAAUtB,KAAKuB,aAAeC,IAGvC,OAAOxB,KAAKyB,UACRL,CAAI,yBAAyBD,2BAC7BC,CAAI,kCAAkCD,UAGpCI,aACN,OAAOH,CAAI,6DAEapB,KAAK0B,oBAKrBC,cACR,OAAK3B,KAAK4B,SAIHR,CAAI,6EAEcpB,KAAK6B,qBALrBL,EAUDM,iBACR,MAAMR,QAAEA,EAAOM,SAAEA,GAAa5B,KAE9B,OAAIsB,GAAWM,EACN,aAELN,EACK,OAELM,EACK,aADT,EAOQG,aACR,OAAO/B,KAAK4B,SAAW,YAASI,EAGpBV,cACZ,OAAoB,MAAbtB,KAAK0B,MAAgB1B,KAAKiC,MAAMC,kBAAkB,QAG7CN,eACZ,OAAqB,MAAd5B,KAAK6B,OAAiB7B,KAAKiC,MAAMC,kBAAkB,UAI9D,OA3HcC,GAAXC,iCAKWD,GAAXC,gCAKqDD,GAArDC,EAAS,CAAEC,KAAMC,QAASC,UAAW,gDAK1BJ,GAAXC,uCAKWD,GAAXC,iCAO4BD,GAA5BC,EAAS,CAAEC,KAAMC,0CAK0BH,GAA3CC,EAAS,CAAEI,SAAS,EAAMH,KAAMC,wCA2F5BxC"}
package/lib/Input.js CHANGED
@@ -1,2 +1,2 @@
1
- import{r as e,D as t,T as i,p as s,_ as r,n,s as o}from"./DraftComponentMixin-4bb26f5d.js";import{e as a}from"./property-03f59dce.js";import{l}from"./if-defined-617ae549.js";import{n as d}from"./ref-65ef7607.js";import{o as p}from"./unsafe-html-21f62902.js";import{I as c,F as m}from"./InputMixin-6c108de4.js";import{F as h,s as f}from"./FormField-02dd3b4f.js";import"./VisuallyHidden.js";import{s as u}from"./TextField-bfdc253c.js";import"./directive-e9ce14b4.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const v=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let b=class extends(h(c(m(t(o))))){constructor(){super(...arguments),this.type="text"}render(){var e;const t="search"===this.type||this.slots.hasSlottedContent("before"),r="number"===this.type,n="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):i;return s`${this.renderLabel()}<div class="n-input-container">${t?s`<slot name="before">${n}</slot>`:i} <input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${r?"text":this.type}" inputmode="${l(r?"numeric":void 0)}" pattern="${l(r?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}};b.styles=[f,u,v],r([a()],b.prototype,"type",void 0),b=r([n("nord-input")],b);var $=b;export{$ as default};
1
+ import{r as e,D as t,T as i,p as s,_ as r,n,s as o}from"./DraftComponentMixin-4bb26f5d.js";import{e as a}from"./property-03f59dce.js";import{l}from"./if-defined-617ae549.js";import{n as d}from"./ref-65ef7607.js";import{o as p}from"./unsafe-html-21f62902.js";import{I as c,F as m}from"./InputMixin-6c108de4.js";import{F as h,s as f}from"./FormField-6bddeef9.js";import"./VisuallyHidden.js";import{s as u}from"./TextField-bfdc253c.js";import"./directive-e9ce14b4.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const v=e`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let b=class extends(h(c(m(t(o))))){constructor(){super(...arguments),this.type="text"}render(){var e;const t="search"===this.type||this.slots.hasSlottedContent("before"),r="number"===this.type,n="search"===this.type?p('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):i;return s`${this.renderLabel()}<div class="n-input-container">${t?s`<slot name="before">${n}</slot>`:i} <input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${r?"text":this.type}" inputmode="${l(r?"numeric":void 0)}" pattern="${l(r?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${l(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}};b.styles=[f,u,v],r([a()],b.prototype,"type",void 0),b=r([n("nord-input")],b);var $=b;export{$ as default};
2
2
  //# sourceMappingURL=Input.js.map
package/lib/Select.js CHANGED
@@ -1,2 +1,2 @@
1
- import{r as e,D as t,p as n,_ as o,n as r,s as i}from"./DraftComponentMixin-4bb26f5d.js";import{l as s}from"./if-defined-617ae549.js";import{n as a}from"./ref-65ef7607.js";import{o as l}from"./unsafe-html-21f62902.js";import"./Button.js";import"./VisuallyHidden.js";import{I as d,F as c}from"./InputMixin-6c108de4.js";import{F as p,s as b}from"./FormField-02dd3b4f.js";import"./directive-e9ce14b4.js";import"./property-03f59dce.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const u=e`.n-select-container{position:relative;inline-size:fit-content}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-primary);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=after] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(p(d(c(t(i))))){constructor(){super(...arguments),this.inputId="select"}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t}<div slot="after">${l('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${s(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[b,u],v=o([r("nord-select")],v);var h=v;export{h as default};
1
+ import{r as e,D as t,p as n,_ as o,n as r,s as i}from"./DraftComponentMixin-4bb26f5d.js";import{l as s}from"./if-defined-617ae549.js";import{n as a}from"./ref-65ef7607.js";import{o as l}from"./unsafe-html-21f62902.js";import"./Button.js";import"./VisuallyHidden.js";import{I as d,F as c}from"./InputMixin-6c108de4.js";import{F as p,s as b}from"./FormField-6bddeef9.js";import"./directive-e9ce14b4.js";import"./property-03f59dce.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const u=e`.n-select-container{position:relative;inline-size:fit-content}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-primary);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=after] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(p(d(c(t(i))))){constructor(){super(...arguments),this.inputId="select"}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t}<div slot="after">${l('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${s(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[b,u],v=o([r("nord-select")],v);var h=v;export{h as default};
2
2
  //# sourceMappingURL=Select.js.map
package/lib/Textarea.js CHANGED
@@ -1,2 +1,2 @@
1
- import{r as e,D as t,p as i,_ as s,n as r,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as o}from"./property-03f59dce.js";import{l as n}from"./if-defined-617ae549.js";import{n as l}from"./ref-65ef7607.js";import{I as d,F as h}from"./InputMixin-6c108de4.js";import{F as p,s as c}from"./FormField-02dd3b4f.js";import"./VisuallyHidden.js";import{s as u}from"./TextField-bfdc253c.js";import"./directive-e9ce14b4.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const f=e`.n-input{resize:none;min-block-size:var(--n-textarea-height,76px);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block}:host([resize=vertical]) .n-input{resize:vertical}:host([resize=auto]) .n-input{overflow:hidden}`;let m=class extends(p(d(h(t(a))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}updated(e){(e.has("resize")||e.has("value"))&&this.resizeToFitContent()}render(){var e;return i`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?required="${this.required}" name="${n(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${n(this.placeholder)}" @change="${this.handleChange}" @input="${this.resizeToFitContent}" aria-describedby="${n(this.getDescribedBy())}" aria-invalid="${n(this.getInvalid())}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};m.styles=[c,u,f],s([o({reflect:!0})],m.prototype,"resize",void 0),m=s([r("nord-textarea")],m);var v=m;export{v as default};
1
+ import{r as e,D as t,p as i,_ as s,n as r,s as a}from"./DraftComponentMixin-4bb26f5d.js";import{e as o}from"./property-03f59dce.js";import{l as n}from"./if-defined-617ae549.js";import{n as l}from"./ref-65ef7607.js";import{I as d,F as h}from"./InputMixin-6c108de4.js";import{F as p,s as c}from"./FormField-6bddeef9.js";import"./VisuallyHidden.js";import{s as u}from"./TextField-bfdc253c.js";import"./directive-e9ce14b4.js";import"./SlotController-fda28afb.js";import"./events-731d0007.js";const f=e`.n-input{resize:none;min-block-size:var(--n-textarea-height,76px);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block}:host([resize=vertical]) .n-input{resize:vertical}:host([resize=auto]) .n-input{overflow:hidden}`;let m=class extends(p(d(h(t(a))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}updated(e){(e.has("resize")||e.has("value"))&&this.resizeToFitContent()}render(){var e;return i`${this.renderLabel()}<div class="n-input-container"><textarea ${l(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?required="${this.required}" name="${n(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${n(this.placeholder)}" @change="${this.handleChange}" @input="${this.resizeToFitContent}" aria-describedby="${n(this.getDescribedBy())}" aria-invalid="${n(this.getInvalid())}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};m.styles=[c,u,f],s([o({reflect:!0})],m.prototype,"resize",void 0),m=s([r("nord-textarea")],m);var v=m;export{v as default};
2
2
  //# sourceMappingURL=Textarea.js.map
package/lib/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{I as Icon}from"./Icon-559d954d.js";export{default as CommandMenu}from"./CommandMenu.js";export{C as CommandMenuAction}from"./CommandMenuAction-b286bcbb.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Spinner}from"./Spinner.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";import"./if-defined-617ae549.js";import"./ref-65ef7607.js";import"./directive-e9ce14b4.js";import"./InputMixin-6c108de4.js";import"./SlotController-fda28afb.js";import"./unsafe-html-21f62902.js";import"./FormField-02dd3b4f.js";import"./events-731d0007.js";import"./TextField-bfdc253c.js";import"./KeyboardController-28c7135b.js";import"./events.js";
1
+ export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{I as Icon}from"./Icon-559d954d.js";export{default as CommandMenu}from"./CommandMenu.js";export{C as CommandMenuAction}from"./CommandMenuAction-b286bcbb.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Spinner}from"./Spinner.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";import"./DraftComponentMixin-4bb26f5d.js";import"./property-03f59dce.js";import"./if-defined-617ae549.js";import"./ref-65ef7607.js";import"./directive-e9ce14b4.js";import"./InputMixin-6c108de4.js";import"./SlotController-fda28afb.js";import"./unsafe-html-21f62902.js";import"./FormField-6bddeef9.js";import"./events-731d0007.js";import"./TextField-bfdc253c.js";import"./KeyboardController-28c7135b.js";import"./events.js";
2
2
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,4 @@
1
1
  import "../stack/Stack.js";
2
2
  import "../table/Table.js";
3
+ import "../input/Input.js";
4
+ import "../button/Button.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nordhealth/components",
3
- "version": "1.0.0-alpha.41",
3
+ "version": "1.0.0-alpha.42",
4
4
  "description": "This package includes Nord Design System web components",
5
5
  "author": "Nordhealth <info@nordhealth.com>",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -137,5 +137,5 @@
137
137
  }
138
138
  ]
139
139
  },
140
- "gitHead": "5d9dcdc8687b6cbfeba431b1520fafe6eb5719f5"
140
+ "gitHead": "f54bdbb7f3a8b8db741aef32372f6dfed6630b77"
141
141
  }