@nordhealth/components 1.0.0-alpha.40 → 1.0.0-alpha.41
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 +154 -154
- package/lib/Select.js +1 -1
- package/lib/Select.js.map +1 -1
- package/package.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -2787,6 +2787,105 @@
|
|
|
2787
2787
|
}
|
|
2788
2788
|
]
|
|
2789
2789
|
},
|
|
2790
|
+
{
|
|
2791
|
+
"kind": "javascript-module",
|
|
2792
|
+
"path": "src/table/Table.ts",
|
|
2793
|
+
"declarations": [
|
|
2794
|
+
{
|
|
2795
|
+
"kind": "class",
|
|
2796
|
+
"description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
|
|
2797
|
+
"name": "Table",
|
|
2798
|
+
"slots": [
|
|
2799
|
+
{
|
|
2800
|
+
"description": "The table.",
|
|
2801
|
+
"name": ""
|
|
2802
|
+
}
|
|
2803
|
+
],
|
|
2804
|
+
"members": [
|
|
2805
|
+
{
|
|
2806
|
+
"kind": "field",
|
|
2807
|
+
"name": "density",
|
|
2808
|
+
"type": {
|
|
2809
|
+
"text": "\"condensed\" | \"default\" | \"relaxed\""
|
|
2810
|
+
},
|
|
2811
|
+
"default": "\"default\"",
|
|
2812
|
+
"description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
|
|
2813
|
+
"attribute": "density",
|
|
2814
|
+
"reflects": true
|
|
2815
|
+
},
|
|
2816
|
+
{
|
|
2817
|
+
"kind": "method",
|
|
2818
|
+
"name": "renderStyles",
|
|
2819
|
+
"privacy": "private",
|
|
2820
|
+
"description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
|
|
2821
|
+
},
|
|
2822
|
+
{
|
|
2823
|
+
"kind": "method",
|
|
2824
|
+
"name": "createRenderRoot",
|
|
2825
|
+
"privacy": "protected",
|
|
2826
|
+
"description": "opt out of shadow dom"
|
|
2827
|
+
},
|
|
2828
|
+
{
|
|
2829
|
+
"kind": "field",
|
|
2830
|
+
"name": "_warningLogged",
|
|
2831
|
+
"type": {
|
|
2832
|
+
"text": "boolean"
|
|
2833
|
+
},
|
|
2834
|
+
"privacy": "private",
|
|
2835
|
+
"static": true,
|
|
2836
|
+
"default": "false",
|
|
2837
|
+
"inheritedFrom": {
|
|
2838
|
+
"name": "DraftComponentMixin",
|
|
2839
|
+
"module": "src/common/mixins/DraftComponentMixin.ts"
|
|
2840
|
+
}
|
|
2841
|
+
}
|
|
2842
|
+
],
|
|
2843
|
+
"attributes": [
|
|
2844
|
+
{
|
|
2845
|
+
"name": "density",
|
|
2846
|
+
"type": {
|
|
2847
|
+
"text": "\"condensed\" | \"default\" | \"relaxed\""
|
|
2848
|
+
},
|
|
2849
|
+
"default": "\"default\"",
|
|
2850
|
+
"description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
|
|
2851
|
+
"fieldName": "density"
|
|
2852
|
+
}
|
|
2853
|
+
],
|
|
2854
|
+
"mixins": [
|
|
2855
|
+
{
|
|
2856
|
+
"name": "DraftComponentMixin",
|
|
2857
|
+
"module": "/src/common/mixins/DraftComponentMixin.js"
|
|
2858
|
+
}
|
|
2859
|
+
],
|
|
2860
|
+
"superclass": {
|
|
2861
|
+
"name": "LitElement",
|
|
2862
|
+
"package": "lit"
|
|
2863
|
+
},
|
|
2864
|
+
"status": "draft",
|
|
2865
|
+
"category": "list",
|
|
2866
|
+
"tagName": "nord-table",
|
|
2867
|
+
"customElement": true
|
|
2868
|
+
}
|
|
2869
|
+
],
|
|
2870
|
+
"exports": [
|
|
2871
|
+
{
|
|
2872
|
+
"kind": "js",
|
|
2873
|
+
"name": "default",
|
|
2874
|
+
"declaration": {
|
|
2875
|
+
"name": "Table",
|
|
2876
|
+
"module": "src/table/Table.ts"
|
|
2877
|
+
}
|
|
2878
|
+
},
|
|
2879
|
+
{
|
|
2880
|
+
"kind": "custom-element-definition",
|
|
2881
|
+
"name": "nord-table",
|
|
2882
|
+
"declaration": {
|
|
2883
|
+
"name": "Table",
|
|
2884
|
+
"module": "src/table/Table.ts"
|
|
2885
|
+
}
|
|
2886
|
+
}
|
|
2887
|
+
]
|
|
2888
|
+
},
|
|
2790
2889
|
{
|
|
2791
2890
|
"kind": "javascript-module",
|
|
2792
2891
|
"path": "src/spinner/Spinner.ts",
|
|
@@ -2906,41 +3005,50 @@
|
|
|
2906
3005
|
},
|
|
2907
3006
|
{
|
|
2908
3007
|
"kind": "javascript-module",
|
|
2909
|
-
"path": "src/
|
|
3008
|
+
"path": "src/stack/Stack.ts",
|
|
2910
3009
|
"declarations": [
|
|
2911
3010
|
{
|
|
2912
3011
|
"kind": "class",
|
|
2913
|
-
"description": "
|
|
2914
|
-
"name": "
|
|
3012
|
+
"description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
|
|
3013
|
+
"name": "Stack",
|
|
2915
3014
|
"slots": [
|
|
2916
3015
|
{
|
|
2917
|
-
"description": "The
|
|
3016
|
+
"description": "The stack content.",
|
|
2918
3017
|
"name": ""
|
|
2919
3018
|
}
|
|
2920
3019
|
],
|
|
2921
3020
|
"members": [
|
|
2922
3021
|
{
|
|
2923
3022
|
"kind": "field",
|
|
2924
|
-
"name": "
|
|
3023
|
+
"name": "gap",
|
|
2925
3024
|
"type": {
|
|
2926
|
-
"text": "\"
|
|
3025
|
+
"text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
|
|
2927
3026
|
},
|
|
2928
|
-
"default": "\"
|
|
2929
|
-
"description": "
|
|
2930
|
-
"attribute": "
|
|
3027
|
+
"default": "\"m\"",
|
|
3028
|
+
"description": "The space injected between components.",
|
|
3029
|
+
"attribute": "gap",
|
|
2931
3030
|
"reflects": true
|
|
2932
3031
|
},
|
|
2933
3032
|
{
|
|
2934
|
-
"kind": "
|
|
2935
|
-
"name": "
|
|
2936
|
-
"
|
|
2937
|
-
|
|
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
|
|
2938
3042
|
},
|
|
2939
3043
|
{
|
|
2940
|
-
"kind": "
|
|
2941
|
-
"name": "
|
|
2942
|
-
"
|
|
2943
|
-
|
|
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
|
|
2944
3052
|
},
|
|
2945
3053
|
{
|
|
2946
3054
|
"kind": "field",
|
|
@@ -2959,13 +3067,30 @@
|
|
|
2959
3067
|
],
|
|
2960
3068
|
"attributes": [
|
|
2961
3069
|
{
|
|
2962
|
-
"name": "
|
|
3070
|
+
"name": "gap",
|
|
2963
3071
|
"type": {
|
|
2964
|
-
"text": "\"
|
|
3072
|
+
"text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
|
|
2965
3073
|
},
|
|
2966
|
-
"default": "\"
|
|
2967
|
-
"description": "
|
|
2968
|
-
"fieldName": "
|
|
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"
|
|
2969
3094
|
}
|
|
2970
3095
|
],
|
|
2971
3096
|
"mixins": [
|
|
@@ -2979,8 +3104,8 @@
|
|
|
2979
3104
|
"package": "lit"
|
|
2980
3105
|
},
|
|
2981
3106
|
"status": "draft",
|
|
2982
|
-
"category": "
|
|
2983
|
-
"tagName": "nord-
|
|
3107
|
+
"category": "structure",
|
|
3108
|
+
"tagName": "nord-stack",
|
|
2984
3109
|
"customElement": true
|
|
2985
3110
|
}
|
|
2986
3111
|
],
|
|
@@ -2989,16 +3114,16 @@
|
|
|
2989
3114
|
"kind": "js",
|
|
2990
3115
|
"name": "default",
|
|
2991
3116
|
"declaration": {
|
|
2992
|
-
"name": "
|
|
2993
|
-
"module": "src/
|
|
3117
|
+
"name": "Stack",
|
|
3118
|
+
"module": "src/stack/Stack.ts"
|
|
2994
3119
|
}
|
|
2995
3120
|
},
|
|
2996
3121
|
{
|
|
2997
3122
|
"kind": "custom-element-definition",
|
|
2998
|
-
"name": "nord-
|
|
3123
|
+
"name": "nord-stack",
|
|
2999
3124
|
"declaration": {
|
|
3000
|
-
"name": "
|
|
3001
|
-
"module": "src/
|
|
3125
|
+
"name": "Stack",
|
|
3126
|
+
"module": "src/stack/Stack.ts"
|
|
3002
3127
|
}
|
|
3003
3128
|
}
|
|
3004
3129
|
]
|
|
@@ -3557,131 +3682,6 @@
|
|
|
3557
3682
|
}
|
|
3558
3683
|
]
|
|
3559
3684
|
},
|
|
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",
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,D as t,p as
|
|
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};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status draft\n * @category form\n * @slot - Default slot for holding <option> elements.\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@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(DraftComponentMixin(LitElement)))) {\n static styles = [formFieldStyle, style]\n\n protected inputId = \"select\"\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <div slot=\"after\">${unsafeHTML(dropdownIcon)}</div>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","export default '<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>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","getDescribedBy","getInvalid","placeholder","value","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","text","formFieldStyle","style","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status draft\n * @category form\n * @slot - Default slot for holding <option> elements.\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@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(DraftComponentMixin(LitElement)))) {\n static styles = [formFieldStyle, style]\n\n protected inputId = \"select\"\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <div slot=\"after\">${unsafeHTML(dropdownIcon)}</div>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","export default '<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>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","getDescribedBy","getInvalid","placeholder","value","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","text","formFieldStyle","style","customElement"],"mappings":"w3DA+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,EAAoBC,OAAtGC,kCAGYC,aAAU,SAEpBC,SACE,MAAMC,EAAiBF,KAAKG,QACtBC,EAAaJ,KAAKK,cAAcH,GAEtC,OAAOI,CAAI,gBAEPN,KAAKO,wDAIDC,EAAIR,KAAKS,qBACNT,KAAKU,uBACEV,KAAKW,wBACLX,KAAKY,mBACVC,EAAUb,KAAKc,mBACZd,KAAKe,mCACIF,EAAUb,KAAKgB,oCACnBH,EAAUb,KAAKiB,kBAE5BjB,KAAKkB,aAAeZ,CAAI,oDAAwCN,KAAKmB,UAASnB,KAAKkB,0BACnFhB,EAAekB,KAAIC,GAAUrB,KAAKsB,aAAaD,sDAGZrB,KAAKW,sBAAoBX,KAAKuB,qFAEjEnB,sBACkBoB,EC9Df,ofDkEPxB,KAAKyB,gBAICtB,cACV,OAAOuB,MAAMC,KAAK3B,KAAK4B,iBAAiB,WAGlCvB,cAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOF,QAAUnB,KAAKmB,QAE9D,OAAIU,EACKA,EAASE,KAGd/B,KAAKkB,YACAlB,KAAKkB,YAGVf,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBACOO,EAAUQ,EAAOF,sBAAoBE,EAAOV,wBAAsBU,EAAOF,QAAUnB,KAAKmB,UACpGE,EAAOU,kBA/DRtC,SAAS,CAACuC,EAAgBC,GADdxC,KADpByC,EAAc,gBACMzC,SAAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nordhealth/components",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.41",
|
|
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": "
|
|
140
|
+
"gitHead": "5d9dcdc8687b6cbfeba431b1520fafe6eb5719f5"
|
|
141
141
|
}
|