@spectrum-web-components/accordion 0.6.0 → 0.6.3
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 +14 -62
- package/package.json +8 -7
- package/src/Accordion.d.ts +5 -12
- package/src/Accordion.js +22 -70
- package/src/Accordion.js.map +1 -1
- package/src/AccordionItem.d.ts +1 -0
- package/src/AccordionItem.js +1 -0
- package/src/AccordionItem.js.map +1 -1
- package/src/accordion-item.css.js +7 -1
- package/src/accordion-item.css.js.map +1 -1
- package/src/spectrum-accordion-item.css.js +7 -1
- package/src/spectrum-accordion-item.css.js.map +1 -1
- package/test/accordion-item.test.js +0 -99
- package/test/accordion-item.test.js.map +0 -1
- package/test/accordion.test-vrt.js +0 -15
- package/test/accordion.test-vrt.js.map +0 -1
- package/test/accordion.test.js +0 -209
- package/test/accordion.test.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -75,37 +75,14 @@
|
|
|
75
75
|
},
|
|
76
76
|
"privacy": "private"
|
|
77
77
|
},
|
|
78
|
-
{
|
|
79
|
-
"kind": "method",
|
|
80
|
-
"name": "focus",
|
|
81
|
-
"privacy": "public",
|
|
82
|
-
"return": {
|
|
83
|
-
"type": {
|
|
84
|
-
"text": "void"
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
78
|
{
|
|
89
79
|
"kind": "field",
|
|
90
|
-
"name": "
|
|
91
|
-
"
|
|
92
|
-
"text": "Accordion | AccordionItem"
|
|
93
|
-
},
|
|
94
|
-
"privacy": "private"
|
|
80
|
+
"name": "rovingTabindexController",
|
|
81
|
+
"default": "new RovingTabindexController<AccordionItem>(\n this,\n {\n focusInIndex: (elements: AccordionItem[]) => {\n return elements.findIndex((el) => {\n return !el.disabled;\n });\n },\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n }\n )"
|
|
95
82
|
},
|
|
96
83
|
{
|
|
97
84
|
"kind": "method",
|
|
98
|
-
"name": "
|
|
99
|
-
"privacy": "public",
|
|
100
|
-
"return": {
|
|
101
|
-
"type": {
|
|
102
|
-
"text": "void"
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
{
|
|
107
|
-
"kind": "method",
|
|
108
|
-
"name": "stopListeningToKeyboard",
|
|
85
|
+
"name": "focus",
|
|
109
86
|
"privacy": "public",
|
|
110
87
|
"return": {
|
|
111
88
|
"type": {
|
|
@@ -115,57 +92,31 @@
|
|
|
115
92
|
},
|
|
116
93
|
{
|
|
117
94
|
"kind": "method",
|
|
118
|
-
"name": "
|
|
95
|
+
"name": "onToggle",
|
|
119
96
|
"privacy": "private",
|
|
120
97
|
"return": {
|
|
121
98
|
"type": {
|
|
122
|
-
"text": "void"
|
|
99
|
+
"text": "Promise<void>"
|
|
123
100
|
}
|
|
124
101
|
},
|
|
125
102
|
"parameters": [
|
|
126
103
|
{
|
|
127
104
|
"name": "event",
|
|
128
105
|
"type": {
|
|
129
|
-
"text": "
|
|
106
|
+
"text": "Event"
|
|
130
107
|
}
|
|
131
108
|
}
|
|
132
109
|
]
|
|
133
110
|
},
|
|
134
111
|
{
|
|
135
112
|
"kind": "method",
|
|
136
|
-
"name": "
|
|
113
|
+
"name": "handleSlotchange",
|
|
137
114
|
"privacy": "private",
|
|
138
115
|
"return": {
|
|
139
116
|
"type": {
|
|
140
117
|
"text": "void"
|
|
141
118
|
}
|
|
142
|
-
}
|
|
143
|
-
"parameters": [
|
|
144
|
-
{
|
|
145
|
-
"name": "direction",
|
|
146
|
-
"type": {
|
|
147
|
-
"text": "number"
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
]
|
|
151
|
-
},
|
|
152
|
-
{
|
|
153
|
-
"kind": "method",
|
|
154
|
-
"name": "onToggle",
|
|
155
|
-
"privacy": "private",
|
|
156
|
-
"return": {
|
|
157
|
-
"type": {
|
|
158
|
-
"text": "Promise<void>"
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
"parameters": [
|
|
162
|
-
{
|
|
163
|
-
"name": "event",
|
|
164
|
-
"type": {
|
|
165
|
-
"text": "Event"
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
]
|
|
119
|
+
}
|
|
169
120
|
}
|
|
170
121
|
],
|
|
171
122
|
"attributes": [
|
|
@@ -180,8 +131,8 @@
|
|
|
180
131
|
}
|
|
181
132
|
],
|
|
182
133
|
"superclass": {
|
|
183
|
-
"name": "
|
|
184
|
-
"package": "@spectrum-web-components/
|
|
134
|
+
"name": "SpectrumElement",
|
|
135
|
+
"package": "@spectrum-web-components/base"
|
|
185
136
|
},
|
|
186
137
|
"tagName": "sp-accordion",
|
|
187
138
|
"customElement": true
|
|
@@ -298,7 +249,8 @@
|
|
|
298
249
|
"name": "sp-accordion-item-toggle",
|
|
299
250
|
"type": {
|
|
300
251
|
"text": "CustomEvent"
|
|
301
|
-
}
|
|
252
|
+
},
|
|
253
|
+
"description": "Announce that an accordion item has been toggled while allowing the event to be cancelled."
|
|
302
254
|
}
|
|
303
255
|
],
|
|
304
256
|
"attributes": [
|
|
@@ -353,7 +305,7 @@
|
|
|
353
305
|
{
|
|
354
306
|
"kind": "variable",
|
|
355
307
|
"name": "styles",
|
|
356
|
-
"default": "css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(
|
|
308
|
+
"default": "css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);content:\"\";position:absolute;top:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);width:var(\n--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)\n)}#content{display:none;padding-bottom:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-left:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-right:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-top:0}:host([dir=ltr][open])>#heading>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#heading>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([dir=ltr][open])>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(\n--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)\n)}#indicator{color:var(\n--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)\n)}#header{color:var(\n--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)\n)}#header:hover{background-color:var(\n--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)\n);color:var(\n--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)\n)}#header:hover+#indicator{color:var(\n--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}#header.focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#header:focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([open]) #header:hover{background-color:transparent}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header+#indicator{color:var(\n--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host{--spectrum-accordion-item-header-height:46px}#indicator{top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2)}#heading{height:auto;position:relative}#header{min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([open])>#header:after{height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}\n`"
|
|
357
309
|
}
|
|
358
310
|
],
|
|
359
311
|
"exports": [
|
|
@@ -418,7 +370,7 @@
|
|
|
418
370
|
{
|
|
419
371
|
"kind": "variable",
|
|
420
372
|
"name": "styles",
|
|
421
|
-
"default": "css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2);transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0;position:relative}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(
|
|
373
|
+
"default": "css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2);transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0;position:relative}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);content:\"\";position:absolute;top:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);width:var(\n--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)\n)}#content{display:none;padding-bottom:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-left:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-right:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-top:0}:host([dir=ltr][open])>#heading>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#heading>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([dir=ltr][open])>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([open])>#header:after{height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(\n--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)\n)}#indicator{color:var(\n--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)\n)}#header{color:var(\n--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)\n)}#header:hover{background-color:var(\n--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)\n);color:var(\n--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)\n)}#header:hover+#indicator{color:var(\n--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}#header.focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#header:focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([open]) #header:hover{background-color:transparent}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header+#indicator{color:var(\n--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}\n`"
|
|
422
374
|
}
|
|
423
375
|
],
|
|
424
376
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/accordion",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -46,19 +46,20 @@
|
|
|
46
46
|
"lit-html"
|
|
47
47
|
],
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@spectrum-web-components/base": "^0.5.
|
|
50
|
-
"@spectrum-web-components/icon": "^0.11.
|
|
51
|
-
"@spectrum-web-components/icons-ui": "^0.8.
|
|
52
|
-
"@spectrum-web-components/
|
|
49
|
+
"@spectrum-web-components/base": "^0.5.1",
|
|
50
|
+
"@spectrum-web-components/icon": "^0.11.2",
|
|
51
|
+
"@spectrum-web-components/icons-ui": "^0.8.2",
|
|
52
|
+
"@spectrum-web-components/reactive-controllers": "^0.1.0",
|
|
53
|
+
"@spectrum-web-components/shared": "^0.13.3",
|
|
53
54
|
"tslib": "^2.0.0"
|
|
54
55
|
},
|
|
55
56
|
"devDependencies": {
|
|
56
|
-
"@spectrum-css/accordion": "^3.0.
|
|
57
|
+
"@spectrum-css/accordion": "^3.0.12"
|
|
57
58
|
},
|
|
58
59
|
"types": "./src/index.d.ts",
|
|
59
60
|
"customElements": "custom-elements.json",
|
|
60
61
|
"sideEffects": [
|
|
61
62
|
"./sp-*.js"
|
|
62
63
|
],
|
|
63
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "279380c6d72c0819fe224b405844af9ddcb87f8a"
|
|
64
65
|
}
|
package/src/Accordion.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { CSSResultArray,
|
|
1
|
+
import { CSSResultArray, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
|
+
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
2
3
|
import { AccordionItem } from './AccordionItem.js';
|
|
3
|
-
import { Focusable } from '@spectrum-web-components/shared';
|
|
4
4
|
/**
|
|
5
5
|
* @element sp-accordion
|
|
6
6
|
* @slot - The sp-accordion-item children to display.
|
|
7
7
|
*/
|
|
8
|
-
export declare class Accordion extends
|
|
8
|
+
export declare class Accordion extends SpectrumElement {
|
|
9
9
|
static get styles(): CSSResultArray;
|
|
10
10
|
/**
|
|
11
11
|
* Allows multiple accordion items to be opened at the same time
|
|
@@ -13,16 +13,9 @@ export declare class Accordion extends Focusable {
|
|
|
13
13
|
allowMultiple: boolean;
|
|
14
14
|
private defaultNodes;
|
|
15
15
|
private get items();
|
|
16
|
+
rovingTabindexController: RovingTabindexController<AccordionItem>;
|
|
16
17
|
focus(): void;
|
|
17
|
-
/**
|
|
18
|
-
* @private
|
|
19
|
-
*/
|
|
20
|
-
get focusElement(): Accordion | AccordionItem;
|
|
21
|
-
startListeningToKeyboard(): void;
|
|
22
|
-
stopListeningToKeyboard(): void;
|
|
23
|
-
private handleKeydown;
|
|
24
|
-
private focusItemByOffset;
|
|
25
18
|
private onToggle;
|
|
19
|
+
private handleSlotchange;
|
|
26
20
|
protected render(): TemplateResult;
|
|
27
|
-
protected firstUpdated(changed: PropertyValues): void;
|
|
28
21
|
}
|
package/src/Accordion.js
CHANGED
|
@@ -10,21 +10,31 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
|
-
import { html, } from '@spectrum-web-components/base';
|
|
13
|
+
import { html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
14
|
import { property, queryAssignedNodes, } from '@spectrum-web-components/base/src/decorators.js';
|
|
15
|
+
import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
|
|
15
16
|
import styles from './accordion.css.js';
|
|
16
|
-
import { Focusable, getActiveElement } from '@spectrum-web-components/shared';
|
|
17
17
|
/**
|
|
18
18
|
* @element sp-accordion
|
|
19
19
|
* @slot - The sp-accordion-item children to display.
|
|
20
20
|
*/
|
|
21
|
-
export class Accordion extends
|
|
21
|
+
export class Accordion extends SpectrumElement {
|
|
22
22
|
constructor() {
|
|
23
23
|
super(...arguments);
|
|
24
24
|
/**
|
|
25
25
|
* Allows multiple accordion items to be opened at the same time
|
|
26
26
|
*/
|
|
27
27
|
this.allowMultiple = false;
|
|
28
|
+
this.rovingTabindexController = new RovingTabindexController(this, {
|
|
29
|
+
focusInIndex: (elements) => {
|
|
30
|
+
return elements.findIndex((el) => {
|
|
31
|
+
return !el.disabled;
|
|
32
|
+
});
|
|
33
|
+
},
|
|
34
|
+
direction: 'vertical',
|
|
35
|
+
elements: () => this.items,
|
|
36
|
+
isFocusableElement: (el) => !el.disabled,
|
|
37
|
+
});
|
|
28
38
|
}
|
|
29
39
|
static get styles() {
|
|
30
40
|
return [styles];
|
|
@@ -33,67 +43,10 @@ export class Accordion extends Focusable {
|
|
|
33
43
|
return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== 'undefined');
|
|
34
44
|
}
|
|
35
45
|
focus() {
|
|
36
|
-
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
super.focus();
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* @private
|
|
43
|
-
*/
|
|
44
|
-
get focusElement() {
|
|
45
|
-
const items = this.items;
|
|
46
|
-
if (items && !items.length) {
|
|
47
|
-
return this;
|
|
48
|
-
}
|
|
49
|
-
let index = 0;
|
|
50
|
-
while (index < items.length && items[index] && items[index].disabled) {
|
|
51
|
-
index += 1;
|
|
52
|
-
}
|
|
53
|
-
if (items[index]) {
|
|
54
|
-
return items[index];
|
|
55
|
-
}
|
|
56
|
-
/* c8 ignore next */
|
|
57
|
-
return this;
|
|
58
|
-
}
|
|
59
|
-
startListeningToKeyboard() {
|
|
60
|
-
const items = this.items;
|
|
61
|
-
/* c8 ignore next 3 */
|
|
62
|
-
if (items && !items.length) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
this.addEventListener('keydown', this.handleKeydown);
|
|
66
|
-
}
|
|
67
|
-
stopListeningToKeyboard() {
|
|
68
|
-
this.removeEventListener('keydown', this.handleKeydown);
|
|
69
|
-
}
|
|
70
|
-
handleKeydown(event) {
|
|
71
|
-
const { code } = event;
|
|
72
|
-
/* c8 ignore next 3 */
|
|
73
|
-
if (code !== 'ArrowDown' && code !== 'ArrowUp') {
|
|
74
|
-
return;
|
|
75
|
-
}
|
|
76
|
-
event.preventDefault();
|
|
77
|
-
const direction = code === 'ArrowDown' ? 1 : -1;
|
|
78
|
-
this.focusItemByOffset(direction);
|
|
79
|
-
}
|
|
80
|
-
focusItemByOffset(direction) {
|
|
81
|
-
const items = this.items;
|
|
82
|
-
const focused = items.indexOf(getActiveElement(this));
|
|
83
|
-
let next = focused;
|
|
84
|
-
let nextItem = items[next];
|
|
85
|
-
// cycle through the available items in the directions of the offset to find the next non-disabled item
|
|
86
|
-
while (nextItem && (nextItem.disabled || next === focused)) {
|
|
87
|
-
next = (items.length + next + direction) % items.length;
|
|
88
|
-
nextItem = items[next];
|
|
89
|
-
}
|
|
90
|
-
// if there are no non-disabled items, skip the work to focus a child
|
|
91
|
-
if (!nextItem || nextItem.disabled || next === focused) {
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
nextItem.focus();
|
|
46
|
+
this.rovingTabindexController.focus();
|
|
95
47
|
}
|
|
96
48
|
async onToggle(event) {
|
|
49
|
+
const target = event.target;
|
|
97
50
|
// Let the event pass through the DOM so that it can be
|
|
98
51
|
// prevented from the outside if a user so desires.
|
|
99
52
|
await 0;
|
|
@@ -101,7 +54,6 @@ export class Accordion extends Focusable {
|
|
|
101
54
|
// No toggling when `allowMultiple` or the user prevents it.
|
|
102
55
|
return;
|
|
103
56
|
}
|
|
104
|
-
const target = event.target;
|
|
105
57
|
const items = [...this.items];
|
|
106
58
|
/* c8 ignore next 3 */
|
|
107
59
|
if (items && !items.length) {
|
|
@@ -115,17 +67,17 @@ export class Accordion extends Focusable {
|
|
|
115
67
|
}
|
|
116
68
|
});
|
|
117
69
|
}
|
|
70
|
+
handleSlotchange() {
|
|
71
|
+
this.rovingTabindexController.clearElementCache();
|
|
72
|
+
}
|
|
118
73
|
render() {
|
|
119
74
|
return html `
|
|
120
|
-
<slot
|
|
75
|
+
<slot
|
|
76
|
+
@sp-accordion-item-toggle=${this.onToggle}
|
|
77
|
+
@slotchange=${this.handleSlotchange}
|
|
78
|
+
></slot>
|
|
121
79
|
`;
|
|
122
80
|
}
|
|
123
|
-
firstUpdated(changed) {
|
|
124
|
-
super.firstUpdated(changed);
|
|
125
|
-
this.addEventListener('focusin', this.startListeningToKeyboard);
|
|
126
|
-
this.addEventListener('focusout', this.stopListeningToKeyboard);
|
|
127
|
-
this.addEventListener('sp-accordion-item-toggle', this.onToggle);
|
|
128
|
-
}
|
|
129
81
|
}
|
|
130
82
|
__decorate([
|
|
131
83
|
property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })
|
package/src/Accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["Accordion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["Accordion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,EACJ,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,kBAAkB,GACrB,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,qEAAqE,CAAC;AAI/G,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,eAAe;IAA9C;;QAKI;;WAEG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAW7B,6BAAwB,GAAG,IAAI,wBAAwB,CACnD,IAAI,EACJ;YACI,YAAY,EAAE,CAAC,QAAyB,EAAE,EAAE;gBACxC,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE;oBAC7B,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC;gBACxB,CAAC,CAAC,CAAC;YACP,CAAC;YACD,SAAS,EAAE,UAAU;YACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK;YAC1B,kBAAkB,EAAE,CAAC,EAAiB,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ;SAC1D,CACJ,CAAC;IAyCN,CAAC;IAxEU,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAWD,IAAY,KAAK;QACb,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACxC,CAAC,IAAiB,EAAE,EAAE,CAAC,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CAC1C,CAAC;IACzB,CAAC;IAgBM,KAAK;QACR,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,CAAC;IAC1C,CAAC;IAEO,KAAK,CAAC,QAAQ,CAAC,KAAY;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAuB,CAAC;QAC7C,uDAAuD;QACvD,mDAAmD;QACnD,MAAM,CAAC,CAAC;QACR,IAAI,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,gBAAgB,EAAE;YAC9C,4DAA4D;YAC5D,OAAO;SACV;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAoB,CAAC;QACjD,sBAAsB;QACtB,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACxB,uCAAuC;YACvC,OAAO;SACV;QACD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACnB,IAAI,IAAI,KAAK,MAAM,EAAE;gBACjB,sDAAsD;gBACtD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACrB;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,wBAAwB,CAAC,iBAAiB,EAAE,CAAC;IACtD,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;4CAEyB,IAAI,CAAC,QAAQ;8BAC3B,IAAI,CAAC,gBAAgB;;SAE1C,CAAC;IACN,CAAC;CACJ;AAhEG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAC3C;AAG7B;IADC,kBAAkB,EAAE;+CAC4B","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n queryAssignedNodes,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport { AccordionItem } from './AccordionItem.js';\n\nimport styles from './accordion.css.js';\n\n/**\n * @element sp-accordion\n * @slot - The sp-accordion-item children to display.\n */\nexport class Accordion extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /**\n * Allows multiple accordion items to be opened at the same time\n */\n @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' })\n public allowMultiple = false;\n\n @queryAssignedNodes()\n private defaultNodes!: NodeListOf<AccordionItem>;\n\n private get items(): AccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== 'undefined'\n ) as AccordionItem[];\n }\n\n rovingTabindexController = new RovingTabindexController<AccordionItem>(\n this,\n {\n focusInIndex: (elements: AccordionItem[]) => {\n return elements.findIndex((el) => {\n return !el.disabled;\n });\n },\n direction: 'vertical',\n elements: () => this.items,\n isFocusableElement: (el: AccordionItem) => !el.disabled,\n }\n );\n\n public focus(): void {\n this.rovingTabindexController.focus();\n }\n\n private async onToggle(event: Event): Promise<void> {\n const target = event.target as AccordionItem;\n // Let the event pass through the DOM so that it can be\n // prevented from the outside if a user so desires.\n await 0;\n if (this.allowMultiple || event.defaultPrevented) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as AccordionItem[];\n /* c8 ignore next 3 */\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach((item) => {\n if (item !== target) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private handleSlotchange(): void {\n this.rovingTabindexController.clearElementCache();\n }\n\n protected render(): TemplateResult {\n return html`\n <slot\n @sp-accordion-item-toggle=${this.onToggle}\n @slotchange=${this.handleSlotchange}\n ></slot>\n `;\n }\n}\n"]}
|
package/src/AccordionItem.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
|
|
|
4
4
|
/**
|
|
5
5
|
* @element sp-accordion-item
|
|
6
6
|
* @slot - The content of the item that is hidden when the item is not open
|
|
7
|
+
* @fires sp-accordion-item-toggle - Announce that an accordion item has been toggled while allowing the event to be cancelled.
|
|
7
8
|
*/
|
|
8
9
|
export declare class AccordionItem extends Focusable {
|
|
9
10
|
static get styles(): CSSResultArray;
|
package/src/AccordionItem.js
CHANGED
|
@@ -19,6 +19,7 @@ import styles from './accordion-item.css.js';
|
|
|
19
19
|
/**
|
|
20
20
|
* @element sp-accordion-item
|
|
21
21
|
* @slot - The content of the item that is hidden when the item is not open
|
|
22
|
+
* @fires sp-accordion-item-toggle - Announce that an accordion item has been toggled while allowing the event to be cancelled.
|
|
22
23
|
*/
|
|
23
24
|
export class AccordionItem extends Focusable {
|
|
24
25
|
constructor() {
|
package/src/AccordionItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["AccordionItem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,GAGP,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAC;AAC7E,OAAO,+DAA+D,CAAC;AACvE,OAAO,iBAAiB,MAAM,gEAAgE,CAAC;AAE/F,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C
|
|
1
|
+
{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["AccordionItem.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EAEH,IAAI,GAGP,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,iDAAiD,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAC;AAC7E,OAAO,+DAA+D,CAAC;AACvE,OAAO,iBAAiB,MAAM,gEAAgE,CAAC;AAE/F,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAS;IAkBxC;QACI,KAAK,EAAE,CAAC;QAbL,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,EAAE,CAAC;QAGX,aAAQ,GAAG,KAAK,CAAC;QAQpB,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACrD,CAAC;IApBM,MAAM,KAAK,MAAM;QACpB,OAAO,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IACvC,CAAC;IAWD,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAgB,CAAC;IACnE,CAAC;IAOO,SAAS,CAAC,KAAoB;QAClC,sBAAsB;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YAClD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,EAAE,CAAC;SACjB;IACL,CAAC;IAEO,OAAO;QACX,sBAAsB;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO;SACV;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAEO,MAAM;QACV,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CACnC,IAAI,WAAW,CAAC,0BAA0B,EAAE;YACxC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,IAAI;SACnB,CAAC,CACL,CAAC;QACF,IAAI,CAAC,YAAY,EAAE;YACf,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;SAC1B;IACL,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;;;6BAIU,IAAI,CAAC,OAAO;oCACL,IAAI,CAAC,IAAI;;;sBAGvB,IAAI,CAAC,KAAK;;;;;;;;;;SAUvB,CAAC;IACN,CAAC;IAES,OAAO,CAAC,OAAuB;QACrC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACf,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;aAC9C;iBAAM;gBACH,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aACzC;SACJ;IACL,CAAC;CACJ;AAlFG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACvB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACxB;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACnB","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';\nimport chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';\n\nimport styles from './accordion-item.css.js';\n\n/**\n * @element sp-accordion-item\n * @slot - The content of the item that is hidden when the item is not open\n * @fires sp-accordion-item-toggle - Announce that an accordion item has been toggled while allowing the event to be cancelled.\n */\nexport class AccordionItem extends Focusable {\n public static get styles(): CSSResultArray {\n return [styles, chevronIconStyles];\n }\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n @property({ type: String, reflect: true })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n public get focusElement(): HTMLElement {\n return this.shadowRoot.querySelector('#header') as HTMLElement;\n }\n\n constructor() {\n super();\n this.addEventListener('keydown', this.onKeyDown);\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n /* c8 ignore next 3 */\n if (this.disabled) {\n return;\n }\n if (event.code === 'Enter' || event.code === 'Space') {\n event.preventDefault();\n this.toggle();\n }\n }\n\n private onClick(): void {\n /* c8 ignore next 3 */\n if (this.disabled) {\n return;\n }\n this.toggle();\n }\n\n private toggle(): void {\n this.open = !this.open;\n const applyDefault = this.dispatchEvent(\n new CustomEvent('sp-accordion-item-toggle', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this.open = !this.open;\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <h3 id=\"heading\">\n <button\n id=\"header\"\n @click=${this.onClick}\n aria-expanded=${this.open}\n aria-controls=\"content\"\n >\n ${this.label}\n </button>\n <sp-icon-chevron100\n id=\"indicator\"\n class=\"spectrum-UIIcon-ChevronRight100\"\n ></sp-icon-chevron100>\n </h3>\n <div id=\"content\" role=\"region\" aria-labelledby=\"header\">\n <slot></slot>\n </div>\n `;\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('disabled')) {\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n }\n }\n}\n"]}
|
|
@@ -54,7 +54,13 @@ var(--spectrum-alias-border-size-thick)
|
|
|
54
54
|
var(--spectrum-global-font-letter-spacing-medium)
|
|
55
55
|
)/100);line-height:var(
|
|
56
56
|
--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)
|
|
57
|
-
);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(
|
|
57
|
+
);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(
|
|
58
|
+
--spectrum-accordion-item-border-size,
|
|
59
|
+
var(--spectrum-alias-border-size-thin)
|
|
60
|
+
)*-1);content:"";position:absolute;top:calc(var(
|
|
61
|
+
--spectrum-accordion-item-border-size,
|
|
62
|
+
var(--spectrum-alias-border-size-thin)
|
|
63
|
+
)*-1);width:var(
|
|
58
64
|
--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)
|
|
59
65
|
)}#content{display:none;padding-bottom:var(
|
|
60
66
|
--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-item.css.js","sourceRoot":"","sources":["accordion-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"accordion-item.css.js","sourceRoot":"","sources":["accordion-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);content:\"\";position:absolute;top:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);width:var(\n--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)\n)}#content{display:none;padding-bottom:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-left:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-right:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-top:0}:host([dir=ltr][open])>#heading>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#heading>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([dir=ltr][open])>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(\n--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)\n)}#indicator{color:var(\n--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)\n)}#header{color:var(\n--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)\n)}#header:hover{background-color:var(\n--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)\n);color:var(\n--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)\n)}#header:hover+#indicator{color:var(\n--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}#header.focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#header:focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([open]) #header:hover{background-color:transparent}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header+#indicator{color:var(\n--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}:host{--spectrum-accordion-item-header-height:46px}#indicator{top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2)}#heading{height:auto;position:relative}#header{min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([open])>#header:after{height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}\n`;\nexport default styles;"]}
|
|
@@ -60,7 +60,13 @@ var(--spectrum-global-font-letter-spacing-medium)
|
|
|
60
60
|
);margin:0;min-height:calc(100% - var(
|
|
61
61
|
--spectrum-accordion-item-border-size,
|
|
62
62
|
var(--spectrum-alias-border-size-thin)
|
|
63
|
-
));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(
|
|
63
|
+
));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(
|
|
64
|
+
--spectrum-accordion-item-border-size,
|
|
65
|
+
var(--spectrum-alias-border-size-thin)
|
|
66
|
+
)*-1);content:"";position:absolute;top:calc(var(
|
|
67
|
+
--spectrum-accordion-item-border-size,
|
|
68
|
+
var(--spectrum-alias-border-size-thin)
|
|
69
|
+
)*-1);width:var(
|
|
64
70
|
--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)
|
|
65
71
|
)}#content{display:none;padding-bottom:var(
|
|
66
72
|
--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-accordion-item.css.js","sourceRoot":"","sources":["spectrum-accordion-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-accordion-item.css.js","sourceRoot":"","sources":["spectrum-accordion-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([dir=ltr]) #indicator{left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #indicator{transform:matrix(-1,0,0,1,0,0)}#indicator{display:block;position:absolute;top:calc(50% - var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n)/2);transition:transform ease var(--spectrum-accordion-animation-duration)}:host{border-bottom:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent;display:list-item;margin:0;position:relative;z-index:inherit}:host(:first-of-type){border-top:var(\n--spectrum-accordion-item-border-size,var(--spectrum-alias-border-size-thin)\n) solid transparent}#heading{box-sizing:border-box;margin:0;position:relative}:host([dir=ltr]) #header{padding-left:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=rtl]) #header{padding-right:calc(var(\n--spectrum-accordion-item-padding-x,\nvar(--spectrum-global-dimension-size-225)\n) + var(\n--spectrum-accordion-icon-height,\nvar(--spectrum-global-dimension-size-125)\n) + var(\n--spectrum-accordion-icon-gap,\nvar(--spectrum-global-dimension-size-100)\n) + var(\n--spectrum-accordion-item-border-left-size,\nvar(--spectrum-alias-border-size-thick)\n))}:host([dir=ltr]) #header{padding-right:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=rtl]) #header{padding-left:var(\n--spectrum-accordion-item-padding-x,var(--spectrum-global-dimension-size-225)\n)}:host([dir=ltr]) #header{text-align:left}:host([dir=rtl]) #header{text-align:right}#header{align-items:center;-webkit-appearance:none;appearance:none;background-color:inherit;border:0;box-sizing:border-box;cursor:pointer;display:flex;font-family:inherit;font-size:var(\n--spectrum-accordion-item-title-text-size,var(--spectrum-global-dimension-font-size-50)\n);font-weight:500;justify-content:flex-start;letter-spacing:calc(var(\n--spectrum-accordion-item-title-tracking,\nvar(--spectrum-global-font-letter-spacing-medium)\n)/100);line-height:var(\n--spectrum-accordion-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin:0;min-height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n));padding-bottom:var(--spectrum-accordion-item-title-padding-y);padding-top:var(--spectrum-accordion-item-title-padding-y);position:relative;text-overflow:ellipsis;text-transform:uppercase;width:100%}#header:focus{outline:none}:host([dir=ltr]) #header:focus:after{left:0}:host([dir=rtl]) #header:focus:after{right:0}#header:focus:after{bottom:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);content:\"\";position:absolute;top:calc(var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1);width:var(\n--spectrum-accordion-item-border-left-size,var(--spectrum-alias-border-size-thick)\n)}#content{display:none;padding-bottom:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-left:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-right:var(\n--spectrum-accordion-item-content-padding,var(--spectrum-global-dimension-size-200)\n);padding-top:0}:host([dir=ltr][open])>#heading>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#heading>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([dir=ltr][open])>#indicator{transform:rotate(90deg)}:host([dir=rtl][open])>#indicator{transform:matrix(-1,0,0,1,0,0) rotate(90deg)}:host([open])>#header:after{height:calc(100% - var(\n--spectrum-accordion-item-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([open])>#content{display:block}:host([disabled]) #header{cursor:default}:host{border-color:var(\n--spectrum-accordion-border-color,var(--spectrum-global-color-gray-300)\n)}#indicator{color:var(\n--spectrum-accordion-icon-color,var(--spectrum-global-color-gray-600)\n)}#header{color:var(\n--spectrum-accordion-text-color,var(--spectrum-global-color-gray-700)\n)}#header:hover{background-color:var(\n--spectrum-accordion-item-background-color-hover,var(--spectrum-global-color-gray-200)\n);color:var(\n--spectrum-accordion-text-color-hover,var(--spectrum-global-color-gray-900)\n)}#header:hover+#indicator{color:var(\n--spectrum-accordion-icon-color-hover,var(--spectrum-alias-icon-color-hover)\n)}#header.focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}#header:focus-visible:after{background-color:var(\n--spectrum-accordion-item-border-left-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([open]) #header:hover{background-color:transparent}:host([disabled]) #header,:host([disabled]) #header.focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header,:host([disabled]) #header:focus-visible,:host([disabled]) #header:hover{background-color:transparent;color:var(\n--spectrum-accordion-text-color-disabled,var(--spectrum-global-color-gray-500)\n)}:host([disabled]) #header+#indicator{color:var(\n--spectrum-accordion-icon-color-disabled,var(--spectrum-alias-icon-color-disabled)\n)}\n`;\nexport default styles;"]}
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
|
13
|
-
import { spy } from 'sinon';
|
|
14
|
-
import '../sp-accordion-item.js';
|
|
15
|
-
import { enterEvent, spaceEvent } from '../../../test/testing-helpers.js';
|
|
16
|
-
describe('Accordion Item', () => {
|
|
17
|
-
it('can exist with no parent accessibly', async () => {
|
|
18
|
-
const el = await fixture(html `
|
|
19
|
-
<sp-accordion-item label="item">
|
|
20
|
-
<div>Item 1</div>
|
|
21
|
-
</sp-accordion-item>
|
|
22
|
-
`);
|
|
23
|
-
await elementUpdated(el);
|
|
24
|
-
await expect(el).to.be.accessible();
|
|
25
|
-
});
|
|
26
|
-
it('can be `[disabled]`', async () => {
|
|
27
|
-
const toggleSpy = spy();
|
|
28
|
-
const handleToggle = () => toggleSpy();
|
|
29
|
-
const el = await fixture(html `
|
|
30
|
-
<sp-accordion-item
|
|
31
|
-
disabled
|
|
32
|
-
@sp-accordion-item-toggle=${handleToggle}
|
|
33
|
-
>
|
|
34
|
-
<div>Item 1</div>
|
|
35
|
-
</sp-accordion-item>
|
|
36
|
-
`);
|
|
37
|
-
const root = el.shadowRoot;
|
|
38
|
-
const button = root.querySelector('#header');
|
|
39
|
-
await elementUpdated(el);
|
|
40
|
-
expect(toggleSpy.callCount).to.equal(0);
|
|
41
|
-
button.click();
|
|
42
|
-
await elementUpdated(el);
|
|
43
|
-
expect(toggleSpy.callCount).to.equal(0);
|
|
44
|
-
el.disabled = false;
|
|
45
|
-
await elementUpdated(el);
|
|
46
|
-
button.click();
|
|
47
|
-
await elementUpdated(el);
|
|
48
|
-
expect(toggleSpy.callCount).to.equal(1);
|
|
49
|
-
});
|
|
50
|
-
it('dispatches toggle event on enter key', async () => {
|
|
51
|
-
let open = false;
|
|
52
|
-
const onAccordionToggle = () => {
|
|
53
|
-
open = true;
|
|
54
|
-
};
|
|
55
|
-
const el = await fixture(html `
|
|
56
|
-
<sp-accordion-item
|
|
57
|
-
disabled
|
|
58
|
-
@sp-accordion-item-toggle=${onAccordionToggle}
|
|
59
|
-
>
|
|
60
|
-
<div>Item 1</div>
|
|
61
|
-
</sp-accordion-item>
|
|
62
|
-
`);
|
|
63
|
-
await elementUpdated(el);
|
|
64
|
-
expect(open).to.be.false;
|
|
65
|
-
el.dispatchEvent(enterEvent);
|
|
66
|
-
await elementUpdated(el);
|
|
67
|
-
expect(open).to.be.false;
|
|
68
|
-
el.disabled = false;
|
|
69
|
-
await elementUpdated(el);
|
|
70
|
-
el.dispatchEvent(enterEvent);
|
|
71
|
-
await elementUpdated(el);
|
|
72
|
-
expect(open).to.be.true;
|
|
73
|
-
});
|
|
74
|
-
it('dispatches toggle event on space key', async () => {
|
|
75
|
-
let open = false;
|
|
76
|
-
const onAccordionToggle = () => {
|
|
77
|
-
open = true;
|
|
78
|
-
};
|
|
79
|
-
const el = await fixture(html `
|
|
80
|
-
<sp-accordion-item
|
|
81
|
-
disabled
|
|
82
|
-
@sp-accordion-item-toggle=${onAccordionToggle}
|
|
83
|
-
>
|
|
84
|
-
<div>Item 1</div>
|
|
85
|
-
</sp-accordion-item>
|
|
86
|
-
`);
|
|
87
|
-
await elementUpdated(el);
|
|
88
|
-
expect(open).to.be.false;
|
|
89
|
-
el.dispatchEvent(spaceEvent);
|
|
90
|
-
await elementUpdated(el);
|
|
91
|
-
expect(open).to.be.false;
|
|
92
|
-
el.disabled = false;
|
|
93
|
-
await elementUpdated(el);
|
|
94
|
-
el.dispatchEvent(spaceEvent);
|
|
95
|
-
await elementUpdated(el);
|
|
96
|
-
expect(open).to.be.true;
|
|
97
|
-
});
|
|
98
|
-
});
|
|
99
|
-
//# sourceMappingURL=accordion-item.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-item.test.js","sourceRoot":"","sources":["accordion-item.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAE1E,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;;aAIH,CACJ,CAAC;QAEF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;QACjC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC;QACxB,MAAM,YAAY,GAAG,GAAS,EAAE,CAAC,SAAS,EAAE,CAAC;QAC7C,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;gDAGgC,YAAY;;;;aAI/C,CACJ,CAAC;QAEF,MAAM,IAAI,GAAG,EAAE,CAAC,UAAwB,CAAC;QACzC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CAAgB,CAAC;QAE5D,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAExC,MAAM,CAAC,KAAK,EAAE,CAAC;QAEf,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAExC,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC;QACpB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,KAAK,EAAE,CAAC;QAEf,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QAClD,IAAI,IAAI,GAAG,KAAK,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAS,EAAE;YACjC,IAAI,GAAG,IAAI,CAAC;QAChB,CAAC,CAAC;QACF,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;gDAGgC,iBAAiB;;;;aAIpD,CACJ,CAAC;QAEF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAEzB,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAE7B,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAEzB,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC;QACpB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAE7B,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QAClD,IAAI,IAAI,GAAG,KAAK,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAS,EAAE;YACjC,IAAI,GAAG,IAAI,CAAC;QAChB,CAAC,CAAC;QACF,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;;gDAGgC,iBAAiB;;;;aAIpD,CACJ,CAAC;QAEF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAEzB,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAE7B,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;QAEzB,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC;QACpB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAE7B,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC5B,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\nimport { spy } from 'sinon';\n\nimport '../sp-accordion-item.js';\nimport { AccordionItem } from '../src/AccordionItem';\nimport { enterEvent, spaceEvent } from '../../../test/testing-helpers.js';\n\ndescribe('Accordion Item', () => {\n it('can exist with no parent accessibly', async () => {\n const el = await fixture<AccordionItem>(\n html`\n <sp-accordion-item label=\"item\">\n <div>Item 1</div>\n </sp-accordion-item>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('can be `[disabled]`', async () => {\n const toggleSpy = spy();\n const handleToggle = (): void => toggleSpy();\n const el = await fixture<AccordionItem>(\n html`\n <sp-accordion-item\n disabled\n @sp-accordion-item-toggle=${handleToggle}\n >\n <div>Item 1</div>\n </sp-accordion-item>\n `\n );\n\n const root = el.shadowRoot as ShadowRoot;\n const button = root.querySelector('#header') as HTMLElement;\n\n await elementUpdated(el);\n\n expect(toggleSpy.callCount).to.equal(0);\n\n button.click();\n\n await elementUpdated(el);\n\n expect(toggleSpy.callCount).to.equal(0);\n\n el.disabled = false;\n await elementUpdated(el);\n\n button.click();\n\n await elementUpdated(el);\n\n expect(toggleSpy.callCount).to.equal(1);\n });\n\n it('dispatches toggle event on enter key', async () => {\n let open = false;\n const onAccordionToggle = (): void => {\n open = true;\n };\n const el = await fixture<AccordionItem>(\n html`\n <sp-accordion-item\n disabled\n @sp-accordion-item-toggle=${onAccordionToggle}\n >\n <div>Item 1</div>\n </sp-accordion-item>\n `\n );\n\n await elementUpdated(el);\n\n expect(open).to.be.false;\n\n el.dispatchEvent(enterEvent);\n\n await elementUpdated(el);\n\n expect(open).to.be.false;\n\n el.disabled = false;\n await elementUpdated(el);\n\n el.dispatchEvent(enterEvent);\n\n await elementUpdated(el);\n\n expect(open).to.be.true;\n });\n\n it('dispatches toggle event on space key', async () => {\n let open = false;\n const onAccordionToggle = (): void => {\n open = true;\n };\n const el = await fixture<AccordionItem>(\n html`\n <sp-accordion-item\n disabled\n @sp-accordion-item-toggle=${onAccordionToggle}\n >\n <div>Item 1</div>\n </sp-accordion-item>\n `\n );\n\n await elementUpdated(el);\n\n expect(open).to.be.false;\n\n el.dispatchEvent(spaceEvent);\n\n await elementUpdated(el);\n\n expect(open).to.be.false;\n\n el.disabled = false;\n await elementUpdated(el);\n\n el.dispatchEvent(spaceEvent);\n\n await elementUpdated(el);\n\n expect(open).to.be.true;\n });\n});\n"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/accordion.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('AccordionStories', stories);
|
|
15
|
-
//# sourceMappingURL=accordion.test-vrt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.test-vrt.js","sourceRoot":"","sources":["accordion.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/accordion.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('AccordionStories', stories);\n"]}
|
package/test/accordion.test.js
DELETED
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
|
|
13
|
-
import '../sp-accordion.js';
|
|
14
|
-
import { Default } from '../stories/accordion.stories.js';
|
|
15
|
-
import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
|
|
16
|
-
import { arrowDownEvent, arrowUpEvent, shiftTabEvent, } from '../../../test/testing-helpers.js';
|
|
17
|
-
import { spy } from 'sinon';
|
|
18
|
-
describe('Accordion', () => {
|
|
19
|
-
it('renders with items accessibly', async () => {
|
|
20
|
-
const el = await fixture(Default());
|
|
21
|
-
await elementUpdated(el);
|
|
22
|
-
await expect(el).to.be.accessible();
|
|
23
|
-
});
|
|
24
|
-
it('does not accept focus when empty', async () => {
|
|
25
|
-
const el = await fixture(html `
|
|
26
|
-
<sp-accordion></sp-accordion>
|
|
27
|
-
`);
|
|
28
|
-
await elementUpdated(el);
|
|
29
|
-
expect(document.activeElement === el).to.be.false;
|
|
30
|
-
el.focus();
|
|
31
|
-
await elementUpdated(el);
|
|
32
|
-
expect(document.activeElement === el).to.be.false;
|
|
33
|
-
});
|
|
34
|
-
it('does not accept keyboard events when items are not present', async () => {
|
|
35
|
-
const errorSpy = spy();
|
|
36
|
-
const el = await fixture(html `
|
|
37
|
-
<sp-accordion>
|
|
38
|
-
<sp-accordion-item disabled label="Heading 2">
|
|
39
|
-
<div>Item 2</div>
|
|
40
|
-
</sp-accordion-item>
|
|
41
|
-
</sp-accordion>
|
|
42
|
-
`);
|
|
43
|
-
await elementUpdated(el);
|
|
44
|
-
const item = el.querySelector('sp-accordion-item');
|
|
45
|
-
window.addEventListener('error', () => errorSpy());
|
|
46
|
-
el.dispatchEvent(new FocusEvent('focusin'));
|
|
47
|
-
item.remove();
|
|
48
|
-
el.dispatchEvent(new KeyboardEvent('keydown', {
|
|
49
|
-
code: 'ArrowDown',
|
|
50
|
-
}));
|
|
51
|
-
expect(errorSpy.callCount).to.equal(0);
|
|
52
|
-
});
|
|
53
|
-
it('does not accept focus when all children [disabled]', async () => {
|
|
54
|
-
const el = await fixture(html `
|
|
55
|
-
<sp-accordion>
|
|
56
|
-
<sp-accordion-item disabled label="Heading 1">
|
|
57
|
-
<div>Item 1</div>
|
|
58
|
-
</sp-accordion-item>
|
|
59
|
-
<sp-accordion-item disabled label="Heading 2">
|
|
60
|
-
<div>Item 2</div>
|
|
61
|
-
</sp-accordion-item>
|
|
62
|
-
</sp-accordion>
|
|
63
|
-
`);
|
|
64
|
-
await elementUpdated(el);
|
|
65
|
-
expect(document.activeElement === el).to.be.false;
|
|
66
|
-
el.focus();
|
|
67
|
-
await elementUpdated(el);
|
|
68
|
-
expect(document.activeElement === el).to.be.false;
|
|
69
|
-
});
|
|
70
|
-
it('only allows one open item by default', async () => {
|
|
71
|
-
const el = await fixture(Default());
|
|
72
|
-
await elementUpdated(el);
|
|
73
|
-
const firstItem = el.querySelector('sp-accordion-item:nth-of-type(1)');
|
|
74
|
-
const secondItem = el.querySelector('sp-accordion-item:nth-of-type(2)');
|
|
75
|
-
const firstButton = firstItem.focusElement;
|
|
76
|
-
const secondButton = secondItem.focusElement;
|
|
77
|
-
firstButton.click();
|
|
78
|
-
await elementUpdated(el);
|
|
79
|
-
let openItems = el.querySelectorAll('sp-accordion-item[open]');
|
|
80
|
-
expect(openItems.length).to.equal(1);
|
|
81
|
-
secondButton.click();
|
|
82
|
-
await elementUpdated(el);
|
|
83
|
-
openItems = el.querySelectorAll('sp-accordion-item[open]');
|
|
84
|
-
expect(openItems.length).to.equal(1);
|
|
85
|
-
});
|
|
86
|
-
it('can have `toggle` events canceled', async () => {
|
|
87
|
-
const el = await fixture(Default());
|
|
88
|
-
await elementUpdated(el);
|
|
89
|
-
const firstItem = el.querySelector('sp-accordion-item:nth-of-type(1)');
|
|
90
|
-
const secondItem = el.querySelector('sp-accordion-item:nth-of-type(2)');
|
|
91
|
-
const firstButton = firstItem.focusElement;
|
|
92
|
-
const secondButton = secondItem.focusElement;
|
|
93
|
-
firstButton.click();
|
|
94
|
-
await elementUpdated(el);
|
|
95
|
-
expect(firstItem.open).to.be.true;
|
|
96
|
-
expect(secondItem.open).to.be.false;
|
|
97
|
-
el.addEventListener('sp-accordion-item-toggle', (event) => event.preventDefault());
|
|
98
|
-
secondButton.click();
|
|
99
|
-
await elementUpdated(el);
|
|
100
|
-
expect(firstItem.open).to.be.true;
|
|
101
|
-
expect(secondItem.open).to.be.false;
|
|
102
|
-
});
|
|
103
|
-
it('allows more than one open item when `[allow-multiple]`', async () => {
|
|
104
|
-
const el = await fixture(Default());
|
|
105
|
-
el.allowMultiple = true;
|
|
106
|
-
await elementUpdated(el);
|
|
107
|
-
const firstItem = el.querySelector('sp-accordion-item:nth-of-type(1)');
|
|
108
|
-
const secondItem = el.querySelector('sp-accordion-item:nth-of-type(2)');
|
|
109
|
-
const firstButton = firstItem.focusElement;
|
|
110
|
-
const secondButton = secondItem.focusElement;
|
|
111
|
-
firstButton.click();
|
|
112
|
-
await elementUpdated(el);
|
|
113
|
-
expect(firstItem.open).to.be.true;
|
|
114
|
-
expect(secondItem.open).to.be.false;
|
|
115
|
-
secondButton.click();
|
|
116
|
-
await elementUpdated(el);
|
|
117
|
-
expect(firstItem.open).to.be.true;
|
|
118
|
-
expect(secondItem.open).to.be.true;
|
|
119
|
-
});
|
|
120
|
-
it('ensures that the correct item is open and that items can be closed', async () => {
|
|
121
|
-
const el = await fixture(Default());
|
|
122
|
-
await elementUpdated(el);
|
|
123
|
-
const firstItem = el.querySelector('sp-accordion-item:nth-of-type(1)');
|
|
124
|
-
const secondItem = el.querySelector('sp-accordion-item:nth-of-type(2)');
|
|
125
|
-
const firstButton = firstItem.focusElement;
|
|
126
|
-
const secondButton = secondItem.focusElement;
|
|
127
|
-
firstButton.click();
|
|
128
|
-
await elementUpdated(el);
|
|
129
|
-
expect(firstItem.open).to.be.true;
|
|
130
|
-
expect(secondItem.open).to.be.false;
|
|
131
|
-
secondButton.click();
|
|
132
|
-
await elementUpdated(el);
|
|
133
|
-
expect(firstItem.open).to.be.false;
|
|
134
|
-
expect(secondItem.open).to.be.true;
|
|
135
|
-
secondButton.click();
|
|
136
|
-
await elementUpdated(el);
|
|
137
|
-
expect(firstItem.open).to.be.false;
|
|
138
|
-
expect(secondItem.open).to.be.false;
|
|
139
|
-
});
|
|
140
|
-
it('ensures that the correct item is open and that items can be closed when [allow-multiple]', async () => {
|
|
141
|
-
const el = await fixture(Default());
|
|
142
|
-
el.allowMultiple = true;
|
|
143
|
-
await elementUpdated(el);
|
|
144
|
-
const firstItem = el.querySelector('sp-accordion-item:nth-of-type(1)');
|
|
145
|
-
const secondItem = el.querySelector('sp-accordion-item:nth-of-type(2)');
|
|
146
|
-
const firstButton = firstItem.focusElement;
|
|
147
|
-
const secondButton = secondItem.focusElement;
|
|
148
|
-
firstButton.click();
|
|
149
|
-
await elementUpdated(el);
|
|
150
|
-
expect(firstItem.open).to.be.true;
|
|
151
|
-
expect(secondItem.open).to.be.false;
|
|
152
|
-
secondButton.click();
|
|
153
|
-
await elementUpdated(el);
|
|
154
|
-
expect(firstItem.open).to.be.true;
|
|
155
|
-
expect(secondItem.open).to.be.true;
|
|
156
|
-
secondButton.click();
|
|
157
|
-
await elementUpdated(el);
|
|
158
|
-
expect(firstItem.open).to.be.true;
|
|
159
|
-
expect(secondItem.open).to.be.false;
|
|
160
|
-
});
|
|
161
|
-
it('handles focus and keyboard input and ignores disabled items', async () => {
|
|
162
|
-
const el = await fixture(html `
|
|
163
|
-
<sp-accordion allow-multiple>
|
|
164
|
-
<sp-accordion-item disabled label="Heading 1">
|
|
165
|
-
<div>Item 1</div>
|
|
166
|
-
</sp-accordion-item>
|
|
167
|
-
<sp-accordion-item label="Heading 2">
|
|
168
|
-
<div>Item 2</div>
|
|
169
|
-
</sp-accordion-item>
|
|
170
|
-
<sp-accordion-item label="Heading 3">
|
|
171
|
-
<div>Item 3</div>
|
|
172
|
-
</sp-accordion-item>
|
|
173
|
-
<sp-accordion-item label="Heading 4">
|
|
174
|
-
<div>Item 4</div>
|
|
175
|
-
</sp-accordion-item>
|
|
176
|
-
<sp-accordion-item label="Heading 5">
|
|
177
|
-
<div>Item 5</div>
|
|
178
|
-
</sp-accordion-item>
|
|
179
|
-
<sp-accordion-item disabled label="Heading 6">
|
|
180
|
-
<div>Item 6</div>
|
|
181
|
-
</sp-accordion-item>
|
|
182
|
-
</sp-accordion>
|
|
183
|
-
`);
|
|
184
|
-
await elementUpdated(el);
|
|
185
|
-
const secondItem = el.querySelector('sp-accordion-item:nth-of-type(2)');
|
|
186
|
-
const thirdToLastItem = el.querySelector('sp-accordion-item:nth-last-of-type(3)');
|
|
187
|
-
const secondToLastItem = el.querySelector('sp-accordion-item:nth-last-of-type(2)');
|
|
188
|
-
el.focus();
|
|
189
|
-
await elementUpdated(el);
|
|
190
|
-
expect(document.activeElement === secondItem).to.be.true;
|
|
191
|
-
el.dispatchEvent(arrowUpEvent);
|
|
192
|
-
el.dispatchEvent(arrowUpEvent);
|
|
193
|
-
expect(document.activeElement === thirdToLastItem).to.be.true;
|
|
194
|
-
el.dispatchEvent(arrowDownEvent);
|
|
195
|
-
expect(document.activeElement === secondToLastItem).to.be.true;
|
|
196
|
-
el.dispatchEvent(arrowDownEvent);
|
|
197
|
-
expect(document.activeElement === secondItem).to.be.true;
|
|
198
|
-
document.body.focus();
|
|
199
|
-
el.focus();
|
|
200
|
-
const focused = el.focusElement;
|
|
201
|
-
expect(document.activeElement === focused).to.be.true;
|
|
202
|
-
focused.dispatchEvent(shiftTabEvent);
|
|
203
|
-
await elementUpdated(el);
|
|
204
|
-
const outsideFocused = document.activeElement;
|
|
205
|
-
expect(typeof outsideFocused).not.to.equal(AccordionItem);
|
|
206
|
-
expect(typeof outsideFocused).not.to.equal(Accordion);
|
|
207
|
-
});
|
|
208
|
-
});
|
|
209
|
-
//# sourceMappingURL=accordion.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.test.js","sourceRoot":"","sources":["accordion.test.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { elementUpdated, expect, fixture, html } from '@open-wc/testing';\n\nimport '../sp-accordion.js';\nimport { Default } from '../stories/accordion.stories.js';\nimport { Accordion, AccordionItem } from '@spectrum-web-components/accordion';\nimport {\n arrowDownEvent,\n arrowUpEvent,\n shiftTabEvent,\n} from '../../../test/testing-helpers.js';\nimport { spy } from 'sinon';\n\ndescribe('Accordion', () => {\n it('renders with items accessibly', async () => {\n const el = await fixture<Accordion>(Default());\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('does not accept focus when empty', async () => {\n const el = await fixture<Accordion>(\n html`\n <sp-accordion></sp-accordion>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('does not accept keyboard events when items are not present', async () => {\n const errorSpy = spy();\n const el = await fixture<Accordion>(\n html`\n <sp-accordion>\n <sp-accordion-item disabled label=\"Heading 2\">\n <div>Item 2</div>\n </sp-accordion-item>\n </sp-accordion>\n `\n );\n\n await elementUpdated(el);\n const item = el.querySelector('sp-accordion-item') as AccordionItem;\n window.addEventListener('error', () => errorSpy());\n\n el.dispatchEvent(new FocusEvent('focusin'));\n item.remove();\n el.dispatchEvent(\n new KeyboardEvent('keydown', {\n code: 'ArrowDown',\n })\n );\n\n expect(errorSpy.callCount).to.equal(0);\n });\n it('does not accept focus when all children [disabled]', async () => {\n const el = await fixture<Accordion>(\n html`\n <sp-accordion>\n <sp-accordion-item disabled label=\"Heading 1\">\n <div>Item 1</div>\n </sp-accordion-item>\n <sp-accordion-item disabled label=\"Heading 2\">\n <div>Item 2</div>\n </sp-accordion-item>\n </sp-accordion>\n `\n );\n\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n\n el.focus();\n await elementUpdated(el);\n\n expect(document.activeElement === el).to.be.false;\n });\n it('only allows one open item by default', async () => {\n const el = await fixture<Accordion>(Default());\n await elementUpdated(el);\n const firstItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(1)'\n ) as AccordionItem;\n const secondItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(2)'\n ) as AccordionItem;\n\n const firstButton = firstItem.focusElement;\n const secondButton = secondItem.focusElement;\n\n firstButton.click();\n await elementUpdated(el);\n let openItems = el.querySelectorAll('sp-accordion-item[open]');\n expect(openItems.length).to.equal(1);\n\n secondButton.click();\n await elementUpdated(el);\n openItems = el.querySelectorAll('sp-accordion-item[open]');\n expect(openItems.length).to.equal(1);\n });\n it('can have `toggle` events canceled', async () => {\n const el = await fixture<Accordion>(Default());\n await elementUpdated(el);\n const firstItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(1)'\n ) as AccordionItem;\n const secondItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(2)'\n ) as AccordionItem;\n\n const firstButton = firstItem.focusElement;\n const secondButton = secondItem.focusElement;\n\n firstButton.click();\n await elementUpdated(el);\n expect(firstItem.open).to.be.true;\n expect(secondItem.open).to.be.false;\n\n el.addEventListener('sp-accordion-item-toggle', (event: Event) =>\n event.preventDefault()\n );\n\n secondButton.click();\n await elementUpdated(el);\n expect(firstItem.open).to.be.true;\n expect(secondItem.open).to.be.false;\n });\n it('allows more than one open item when `[allow-multiple]`', async () => {\n const el = await fixture<Accordion>(Default());\n el.allowMultiple = true;\n await elementUpdated(el);\n\n const firstItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(1)'\n ) as AccordionItem;\n const secondItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(2)'\n ) as AccordionItem;\n\n const firstButton = firstItem.focusElement;\n const secondButton = secondItem.focusElement;\n\n firstButton.click();\n await elementUpdated(el);\n\n expect(firstItem.open).to.be.true;\n expect(secondItem.open).to.be.false;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(firstItem.open).to.be.true;\n expect(secondItem.open).to.be.true;\n });\n it('ensures that the correct item is open and that items can be closed', async () => {\n const el = await fixture<Accordion>(Default());\n\n await elementUpdated(el);\n const firstItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(1)'\n ) as AccordionItem;\n const secondItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(2)'\n ) as AccordionItem;\n\n const firstButton = firstItem.focusElement;\n const secondButton = secondItem.focusElement;\n\n firstButton.click();\n await elementUpdated(el);\n expect(firstItem.open).to.be.true;\n expect(secondItem.open).to.be.false;\n\n secondButton.click();\n await elementUpdated(el);\n expect(firstItem.open).to.be.false;\n expect(secondItem.open).to.be.true;\n\n secondButton.click();\n await elementUpdated(el);\n expect(firstItem.open).to.be.false;\n expect(secondItem.open).to.be.false;\n });\n\n it('ensures that the correct item is open and that items can be closed when [allow-multiple]', async () => {\n const el = await fixture<Accordion>(Default());\n el.allowMultiple = true;\n await elementUpdated(el);\n\n const firstItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(1)'\n ) as AccordionItem;\n const secondItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(2)'\n ) as AccordionItem;\n\n const firstButton = firstItem.focusElement;\n const secondButton = secondItem.focusElement;\n\n firstButton.click();\n await elementUpdated(el);\n\n expect(firstItem.open).to.be.true;\n expect(secondItem.open).to.be.false;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(firstItem.open).to.be.true;\n expect(secondItem.open).to.be.true;\n\n secondButton.click();\n await elementUpdated(el);\n\n expect(firstItem.open).to.be.true;\n expect(secondItem.open).to.be.false;\n });\n it('handles focus and keyboard input and ignores disabled items', async () => {\n const el = await fixture<Accordion>(\n html`\n <sp-accordion allow-multiple>\n <sp-accordion-item disabled label=\"Heading 1\">\n <div>Item 1</div>\n </sp-accordion-item>\n <sp-accordion-item label=\"Heading 2\">\n <div>Item 2</div>\n </sp-accordion-item>\n <sp-accordion-item label=\"Heading 3\">\n <div>Item 3</div>\n </sp-accordion-item>\n <sp-accordion-item label=\"Heading 4\">\n <div>Item 4</div>\n </sp-accordion-item>\n <sp-accordion-item label=\"Heading 5\">\n <div>Item 5</div>\n </sp-accordion-item>\n <sp-accordion-item disabled label=\"Heading 6\">\n <div>Item 6</div>\n </sp-accordion-item>\n </sp-accordion>\n `\n );\n\n await elementUpdated(el);\n\n const secondItem = el.querySelector(\n 'sp-accordion-item:nth-of-type(2)'\n ) as AccordionItem;\n const thirdToLastItem = el.querySelector(\n 'sp-accordion-item:nth-last-of-type(3)'\n ) as AccordionItem;\n const secondToLastItem = el.querySelector(\n 'sp-accordion-item:nth-last-of-type(2)'\n ) as AccordionItem;\n\n el.focus();\n\n await elementUpdated(el);\n expect(document.activeElement === secondItem).to.be.true;\n\n el.dispatchEvent(arrowUpEvent);\n el.dispatchEvent(arrowUpEvent);\n\n expect(document.activeElement === thirdToLastItem).to.be.true;\n\n el.dispatchEvent(arrowDownEvent);\n\n expect(document.activeElement === secondToLastItem).to.be.true;\n\n el.dispatchEvent(arrowDownEvent);\n expect(document.activeElement === secondItem).to.be.true;\n\n document.body.focus();\n\n el.focus();\n const focused = el.focusElement as AccordionItem;\n expect(document.activeElement === focused).to.be.true;\n\n focused.dispatchEvent(shiftTabEvent);\n await elementUpdated(el);\n\n const outsideFocused = document.activeElement as HTMLElement;\n\n expect(typeof outsideFocused).not.to.equal(AccordionItem);\n expect(typeof outsideFocused).not.to.equal(Accordion);\n });\n});\n"]}
|