@aquera/nile-elements 0.1.8 → 0.1.9
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/README.md +4 -0
- package/demo/index.html +0 -10
- package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.cjs.js.map +1 -1
- package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
- package/dist/nile-accordion/nile-accordion.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordion.cjs.js.map +1 -1
- package/dist/nile-accordion/nile-accordion.css.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordion.css.cjs.js.map +1 -1
- package/dist/nile-accordion/nile-accordion.css.esm.js +54 -23
- package/dist/nile-accordion/nile-accordion.esm.js +9 -8
- package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.cjs.js.map +1 -1
- package/dist/nile-avatar/nile-avatar.test.esm.js +11 -1
- package/dist/nile-code-editor/nile-code-editor.css.cjs.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.css.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.css.esm.js +3 -3
- package/dist/src/nile-accordion/nile-accordian.test.js +24 -29
- package/dist/src/nile-accordion/nile-accordian.test.js.map +1 -1
- package/dist/src/nile-accordion/nile-accordion.css.js +53 -22
- package/dist/src/nile-accordion/nile-accordion.css.js.map +1 -1
- package/dist/src/nile-accordion/nile-accordion.d.ts +31 -16
- package/dist/src/nile-accordion/nile-accordion.js +68 -34
- package/dist/src/nile-accordion/nile-accordion.js.map +1 -1
- package/dist/src/nile-avatar/nile-avatar.test.d.ts +1 -0
- package/dist/src/nile-avatar/nile-avatar.test.js +64 -30
- package/dist/src/nile-avatar/nile-avatar.test.js.map +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.css.js +3 -3
- package/dist/src/nile-code-editor/nile-code-editor.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-accordion/nile-accordian.test.ts +30 -57
- package/src/nile-accordion/nile-accordion.css.ts +53 -22
- package/src/nile-accordion/nile-accordion.ts +61 -33
- package/src/nile-avatar/nile-avatar.test.ts +84 -33
- package/src/nile-code-editor/nile-code-editor.css.ts +3 -3
- package/vscode-html-custom-data.json +82 -43
|
@@ -23,36 +23,51 @@ import { watch } from '../internal/watch';
|
|
|
23
23
|
let NileAccordion = class NileAccordion extends NileElement {
|
|
24
24
|
constructor() {
|
|
25
25
|
/**
|
|
26
|
-
* @summary
|
|
26
|
+
* @summary Accordian show a brief summary and expand to show additional content.
|
|
27
27
|
*
|
|
28
28
|
* @dependency nile-icon
|
|
29
29
|
*
|
|
30
|
-
* @slot - The
|
|
31
|
-
* @slot summary - The
|
|
30
|
+
* @slot - The accordian' main content.
|
|
31
|
+
* @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.
|
|
32
32
|
* @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.
|
|
33
33
|
* @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.
|
|
34
34
|
*
|
|
35
|
-
* @event nile-show - Emitted when the
|
|
36
|
-
* @event nile-after-show - Emitted after the
|
|
37
|
-
* @event nile-hide - Emitted when the
|
|
38
|
-
* @event nile-after-hide - Emitted after the
|
|
35
|
+
* @event nile-show - Emitted when the accordian opens.
|
|
36
|
+
* @event nile-after-show - Emitted after the accordian opens and all animations are complete.
|
|
37
|
+
* @event nile-hide - Emitted when the accordian closes.
|
|
38
|
+
* @event nile-after-hide - Emitted after the accordian closes and all animations are complete.
|
|
39
39
|
*
|
|
40
40
|
* @csspart base - The component's base wrapper.
|
|
41
41
|
* @csspart header - The header that wraps both the summary and the expand/collapse icon.
|
|
42
42
|
* @csspart summary - The container that wraps the summary.
|
|
43
43
|
* @csspart summary-icon - The container that wraps the expand/collapse icons.
|
|
44
|
-
* @csspart content - The
|
|
44
|
+
* @csspart content - The accordian content.
|
|
45
45
|
*
|
|
46
|
-
* @animation
|
|
47
|
-
* @animation
|
|
46
|
+
* @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.
|
|
47
|
+
* @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.
|
|
48
48
|
*/
|
|
49
49
|
super(...arguments);
|
|
50
50
|
/**
|
|
51
|
-
* Indicates whether or not the
|
|
52
|
-
* can use the `show()` and `hide()` methods and this attribute will reflect the
|
|
51
|
+
* Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you
|
|
52
|
+
* can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.
|
|
53
53
|
*/
|
|
54
54
|
this.open = false;
|
|
55
|
-
/**
|
|
55
|
+
/**
|
|
56
|
+
* Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.
|
|
57
|
+
* Defaults to `'light'`.
|
|
58
|
+
*/
|
|
59
|
+
this.variant = 'light';
|
|
60
|
+
/**
|
|
61
|
+
* Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.
|
|
62
|
+
* Defaults to `'right'`.
|
|
63
|
+
*/
|
|
64
|
+
this.expandIconPlacement = 'right';
|
|
65
|
+
/**
|
|
66
|
+
* Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.
|
|
67
|
+
* Defaults to `'md'`.
|
|
68
|
+
*/
|
|
69
|
+
this.size = 'md';
|
|
70
|
+
/** Disables the accordian so it can't be toggled. */
|
|
56
71
|
this.disabled = false;
|
|
57
72
|
}
|
|
58
73
|
firstUpdated() {
|
|
@@ -99,7 +114,7 @@ let NileAccordion = class NileAccordion extends NileElement {
|
|
|
99
114
|
}
|
|
100
115
|
await stopAnimations(this.body);
|
|
101
116
|
this.body.hidden = false;
|
|
102
|
-
const { keyframes, options } = getAnimation(this, '
|
|
117
|
+
const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });
|
|
103
118
|
await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
|
|
104
119
|
this.body.style.height = 'auto';
|
|
105
120
|
this.emit('nile-after-show');
|
|
@@ -112,14 +127,14 @@ let NileAccordion = class NileAccordion extends NileElement {
|
|
|
112
127
|
return;
|
|
113
128
|
}
|
|
114
129
|
await stopAnimations(this.body);
|
|
115
|
-
const { keyframes, options } = getAnimation(this, '
|
|
130
|
+
const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });
|
|
116
131
|
await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
|
|
117
132
|
this.body.hidden = true;
|
|
118
133
|
this.body.style.height = 'auto';
|
|
119
134
|
this.emit('nile-after-hide');
|
|
120
135
|
}
|
|
121
136
|
}
|
|
122
|
-
/** Shows the
|
|
137
|
+
/** Shows the accordian. */
|
|
123
138
|
async show() {
|
|
124
139
|
if (this.open || this.disabled) {
|
|
125
140
|
return undefined;
|
|
@@ -127,7 +142,7 @@ let NileAccordion = class NileAccordion extends NileElement {
|
|
|
127
142
|
this.open = true;
|
|
128
143
|
return waitForEvent(this, 'nile-after-show');
|
|
129
144
|
}
|
|
130
|
-
/** Hides the
|
|
145
|
+
/** Hides the accordian */
|
|
131
146
|
async hide() {
|
|
132
147
|
if (!this.open || this.disabled) {
|
|
133
148
|
return undefined;
|
|
@@ -136,21 +151,27 @@ let NileAccordion = class NileAccordion extends NileElement {
|
|
|
136
151
|
return waitForEvent(this, 'nile-after-hide');
|
|
137
152
|
}
|
|
138
153
|
render() {
|
|
139
|
-
const isRtl =
|
|
154
|
+
const isRtl = true;
|
|
140
155
|
return html `
|
|
141
156
|
<div
|
|
142
157
|
part="base"
|
|
143
158
|
class=${classMap({
|
|
144
|
-
|
|
145
|
-
'
|
|
146
|
-
'
|
|
147
|
-
'
|
|
159
|
+
accordian: true,
|
|
160
|
+
'accordian--open': this.open,
|
|
161
|
+
'accordian--disabled': this.disabled,
|
|
162
|
+
'accordian--sm': this.size == 'sm',
|
|
163
|
+
'accordian--md': this.size == 'md',
|
|
164
|
+
'accordian--lg': this.size == 'lg',
|
|
148
165
|
})}
|
|
149
166
|
>
|
|
150
167
|
<div
|
|
151
168
|
part="header"
|
|
152
169
|
id="header"
|
|
153
|
-
class="
|
|
170
|
+
class="${classMap({
|
|
171
|
+
'accordian__header': true,
|
|
172
|
+
'accordian__header--dark': this.variant == 'dark',
|
|
173
|
+
'accordian__header--arrow-left': 'left' == this.expandIconPlacement
|
|
174
|
+
})}"
|
|
154
175
|
role="button"
|
|
155
176
|
aria-expanded=${this.open ? 'true' : 'false'}
|
|
156
177
|
aria-controls="content"
|
|
@@ -159,9 +180,9 @@ let NileAccordion = class NileAccordion extends NileElement {
|
|
|
159
180
|
@click=${this.handleSummaryClick}
|
|
160
181
|
@keydown=${this.handleSummaryKeyDown}
|
|
161
182
|
>
|
|
162
|
-
<slot name="summary" part="summary" class="
|
|
183
|
+
<slot name="summary" part="summary" class="accordian__summary">${this.summary}</slot>
|
|
163
184
|
|
|
164
|
-
<span part="summary-icon" class="
|
|
185
|
+
<span part="summary-icon" class="accordian__summary-icon">
|
|
165
186
|
<slot name="expand-icon">
|
|
166
187
|
<nile-icon name="arrowright"></nile-icon>
|
|
167
188
|
</slot>
|
|
@@ -171,8 +192,12 @@ let NileAccordion = class NileAccordion extends NileElement {
|
|
|
171
192
|
</span>
|
|
172
193
|
</div>
|
|
173
194
|
|
|
174
|
-
<div class="
|
|
175
|
-
<slot part="content" id="content"
|
|
195
|
+
<div class="accordian__body" role="region" aria-labelledby="header">
|
|
196
|
+
<slot part="content" id="content"
|
|
197
|
+
class="${classMap({
|
|
198
|
+
'accordian__content': true,
|
|
199
|
+
'accordian__content--arrow-left': this.expandIconPlacement == 'left'
|
|
200
|
+
})}"></slot>
|
|
176
201
|
</div>
|
|
177
202
|
</div>
|
|
178
203
|
`;
|
|
@@ -180,20 +205,29 @@ let NileAccordion = class NileAccordion extends NileElement {
|
|
|
180
205
|
};
|
|
181
206
|
NileAccordion.styles = styles;
|
|
182
207
|
__decorate([
|
|
183
|
-
query('.
|
|
184
|
-
], NileAccordion.prototype, "
|
|
208
|
+
query('.accordian')
|
|
209
|
+
], NileAccordion.prototype, "accordian", void 0);
|
|
185
210
|
__decorate([
|
|
186
|
-
query('.
|
|
211
|
+
query('.accordian__header')
|
|
187
212
|
], NileAccordion.prototype, "header", void 0);
|
|
188
213
|
__decorate([
|
|
189
|
-
query('.
|
|
214
|
+
query('.accordian__body')
|
|
190
215
|
], NileAccordion.prototype, "body", void 0);
|
|
191
216
|
__decorate([
|
|
192
|
-
query('.
|
|
217
|
+
query('.accordian__expand-icon-slot')
|
|
193
218
|
], NileAccordion.prototype, "expandIconSlot", void 0);
|
|
194
219
|
__decorate([
|
|
195
220
|
property({ type: Boolean, reflect: true })
|
|
196
221
|
], NileAccordion.prototype, "open", void 0);
|
|
222
|
+
__decorate([
|
|
223
|
+
property({ reflect: true })
|
|
224
|
+
], NileAccordion.prototype, "variant", void 0);
|
|
225
|
+
__decorate([
|
|
226
|
+
property({ reflect: true })
|
|
227
|
+
], NileAccordion.prototype, "expandIconPlacement", void 0);
|
|
228
|
+
__decorate([
|
|
229
|
+
property({ reflect: true })
|
|
230
|
+
], NileAccordion.prototype, "size", void 0);
|
|
197
231
|
__decorate([
|
|
198
232
|
property()
|
|
199
233
|
], NileAccordion.prototype, "summary", void 0);
|
|
@@ -207,14 +241,14 @@ NileAccordion = __decorate([
|
|
|
207
241
|
customElement('nile-accordion')
|
|
208
242
|
], NileAccordion);
|
|
209
243
|
export { NileAccordion };
|
|
210
|
-
setDefaultAnimation('
|
|
244
|
+
setDefaultAnimation('accordian.show', {
|
|
211
245
|
keyframes: [
|
|
212
246
|
{ height: '0', opacity: '0' },
|
|
213
247
|
{ height: 'auto', opacity: '1' }
|
|
214
248
|
],
|
|
215
249
|
options: { duration: 250, easing: 'linear' }
|
|
216
250
|
});
|
|
217
|
-
setDefaultAnimation('
|
|
251
|
+
setDefaultAnimation('accordian.hide', {
|
|
218
252
|
keyframes: [
|
|
219
253
|
{ height: 'auto', opacity: '1' },
|
|
220
254
|
{ height: '0', opacity: '0' }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-accordion.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport {styles} from './nile-accordion.css';\nimport NileElement from '../internal/nile-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile detail component.\n *\n * @tag nile-accordion\n *\n */\n@customElement('nile-accordion')\nexport class NileAccordion extends NileElement {\n\n/**\n * @summary Details show a brief summary and expand to show additional content.\n *\n * @dependency nile-icon\n *\n * @slot - The details' main content.\n * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the details opens.\n * @event nile-after-show - Emitted after the details opens and all animations are complete.\n * @event nile-hide - Emitted when the details closes.\n * @event nile-after-hide - Emitted after the details closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The details content.\n *\n * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.\n * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.\n */\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.details') details: HTMLElement;\n@query('.details__header') header: HTMLElement;\n@query('.details__body') body: HTMLElement;\n@query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/**\n * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.\n */\n@property({ type: Boolean, reflect: true }) open = false;\n\n/** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */\n@property() summary: string;\n\n/** Disables the details so it can't be toggled. */\n@property({ type: Boolean, reflect: true }) disabled = false;\n\nfirstUpdated() {\n this.body.hidden = !this.open;\n this.body.style.height = this.open ? 'auto' : '0';\n}\n\nprivate handleSummaryClick() {\n if (!this.disabled) {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n}\n\nprivate handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n}\n\n@watch('open', { waitUntilFirstUpdate: true })\nasync handleOpenChange() {\n if (this.open) {\n // Show\n const nileShow = this.emit('nile-show', { cancelable: true });\n if (nileShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, 'details.show', { dir: 'ltr' });\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = 'auto';\n\n this.emit('nile-after-show');\n } else {\n // Hide\n const nileHide = this.emit('nile-hide', { cancelable: true });\n if (nileHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, 'details.hide', { dir: 'ltr' });\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = 'auto';\n\n this.emit('nile-after-hide');\n }\n}\n\n/** Shows the details. */\nasync show() {\n if (this.open || this.disabled) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'nile-after-show');\n}\n\n/** Hides the details */\nasync hide() {\n if (!this.open || this.disabled) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'nile-after-hide');\n}\n\nrender() {\n const isRtl = false;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n details: true,\n 'details--open': this.open,\n 'details--disabled': this.disabled,\n 'details--rtl': isRtl\n })}\n >\n <div\n part=\"header\"\n id=\"header\"\n class=\"details__header\"\n role=\"button\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=\"content\"\n aria-disabled=${this.disabled ? 'true' : 'false'}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"summary\" part=\"summary\" class=\"details__summary\">${this.summary}</slot>\n\n <span part=\"summary-icon\" class=\"details__summary-icon\">\n <slot name=\"expand-icon\">\n <nile-icon name=\"arrowright\"></nile-icon>\n </slot>\n <slot name=\"collapse-icon\">\n <nile-icon name=\"arrowright\"></nile-icon>\n </slot>\n </span>\n </div>\n\n <div class=\"details__body\" role=\"region\" aria-labelledby=\"header\">\n <slot part=\"content\" id=\"content\" class=\"details__content\"></slot>\n </div>\n </div>\n `;\n}\n}\n\nsetDefaultAnimation('details.show', {\nkeyframes: [\n { height: '0', opacity: '0' },\n { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('details.hide', {\nkeyframes: [\n { height: 'auto', opacity: '1' },\n { height: '0', opacity: '0' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nexport default NileAccordion;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-accordion': NileAccordion;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"nile-accordion.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, CSSResultArray, TemplateResult} from 'lit';\nimport {styles} from './nile-accordion.css';\nimport NileElement from '../internal/nile-element';\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * Nile detail component.\n *\n * @tag nile-accordion\n *\n */\n@customElement('nile-accordion')\nexport class NileAccordion extends NileElement {\n\n/**\n * @summary Accordian show a brief summary and expand to show additional content.\n *\n * @dependency nile-icon\n *\n * @slot - The accordian' main content.\n * @slot summary - The accordian' summary. Alternatively, you can use the `summary` attribute.\n * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.\n * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.\n *\n * @event nile-show - Emitted when the accordian opens.\n * @event nile-after-show - Emitted after the accordian opens and all animations are complete.\n * @event nile-hide - Emitted when the accordian closes.\n * @event nile-after-hide - Emitted after the accordian closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header that wraps both the summary and the expand/collapse icon.\n * @csspart summary - The container that wraps the summary.\n * @csspart summary-icon - The container that wraps the expand/collapse icons.\n * @csspart content - The accordian content.\n *\n * @animation accordian.show - The animation to use when showing accordian. You can use `height: auto` with this animation.\n * @animation accordian.hide - The animation to use when hiding accordian. You can use `height: auto` with this animation.\n */\n\nstatic styles: CSSResultGroup = styles;\n\n\n@query('.accordian') accordian: HTMLElement;\n@query('.accordian__header') header: HTMLElement;\n@query('.accordian__body') body: HTMLElement;\n@query('.accordian__expand-icon-slot') expandIconSlot: HTMLSlotElement;\n\n/**\n * Indicates whether or not the accordian is open. You can toggle this attribute to show and hide the accordian, or you\n * can use the `show()` and `hide()` methods and this attribute will reflect the accordian' open state.\n */\n@property({ type: Boolean, reflect: true }) open = false;\n\n/**\n * Indicates the visual style of the accordian component. Accepted values are `'dark'` or `'light'`.\n * Defaults to `'light'`.\n */\n@property({ reflect: true }) variant: 'dark' | 'light' = 'light';\n\n/**\n * Specifies the direction of the arrow indicator. Accepted values are `'left'` or `'right'`.\n * Defaults to `'right'`.\n */\n@property({ reflect: true }) expandIconPlacement: 'left' | 'right' = 'right';\n\n/**\n * Specifies the size of the accordian component. Accepted values are `'sm'`, `'md'`, or `'lg'`.\n * Defaults to `'md'`.\n */\n@property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n/** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */\n@property() summary: string;\n\n/** Disables the accordian so it can't be toggled. */\n@property({ type: Boolean, reflect: true }) disabled = false;\n\nfirstUpdated() {\n this.body.hidden = !this.open;\n this.body.style.height = this.open ? 'auto' : '0';\n}\n\nprivate handleSummaryClick() {\n if (!this.disabled) {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n}\n\nprivate handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n}\n\n@watch('open', { waitUntilFirstUpdate: true })\nasync handleOpenChange() {\n if (this.open) {\n // Show\n const nileShow = this.emit('nile-show', { cancelable: true });\n if (nileShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.hidden = false;\n\n const { keyframes, options } = getAnimation(this, 'accordian.show', { dir: 'ltr' });\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.style.height = 'auto';\n\n this.emit('nile-after-show');\n } else {\n // Hide\n const nileHide = this.emit('nile-hide', { cancelable: true });\n if (nileHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, 'accordian.hide', { dir: 'ltr' });\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.body.hidden = true;\n this.body.style.height = 'auto';\n\n this.emit('nile-after-hide');\n }\n}\n\n/** Shows the accordian. */\nasync show() {\n if (this.open || this.disabled) {\n return undefined;\n }\n\n this.open = true;\n return waitForEvent(this, 'nile-after-show');\n}\n\n/** Hides the accordian */\nasync hide() {\n if (!this.open || this.disabled) {\n return undefined;\n }\n\n this.open = false;\n return waitForEvent(this, 'nile-after-hide');\n}\n\nrender() {\n const isRtl = true;\n\n return html`\n <div\n part=\"base\"\n class=${classMap({\n accordian: true,\n 'accordian--open': this.open,\n 'accordian--disabled': this.disabled,\n 'accordian--sm':this.size=='sm',\n 'accordian--md':this.size=='md',\n 'accordian--lg':this.size=='lg',\n })}\n >\n <div\n part=\"header\"\n id=\"header\"\n class=\"${classMap({\n 'accordian__header':true,\n 'accordian__header--dark':this.variant=='dark',\n 'accordian__header--arrow-left':'left'==this.expandIconPlacement\n })}\"\n role=\"button\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=\"content\"\n aria-disabled=${this.disabled ? 'true' : 'false'}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"summary\" part=\"summary\" class=\"accordian__summary\">${this.summary}</slot>\n\n <span part=\"summary-icon\" class=\"accordian__summary-icon\">\n <slot name=\"expand-icon\">\n <nile-icon name=\"arrowright\"></nile-icon>\n </slot>\n <slot name=\"collapse-icon\">\n <nile-icon name=\"arrowright\"></nile-icon>\n </slot>\n </span>\n </div>\n\n <div class=\"accordian__body\" role=\"region\" aria-labelledby=\"header\">\n <slot part=\"content\" id=\"content\" \n class=\"${classMap({\n 'accordian__content':true,\n 'accordian__content--arrow-left':this.expandIconPlacement=='left'\n })}\"></slot>\n </div>\n </div>\n `;\n}\n}\n\nsetDefaultAnimation('accordian.show', {\nkeyframes: [\n { height: '0', opacity: '0' },\n { height: 'auto', opacity: '1' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nsetDefaultAnimation('accordian.hide', {\nkeyframes: [\n { height: 'auto', opacity: '1' },\n { height: '0', opacity: '0' }\n],\noptions: { duration: 250, easing: 'linear' }\n});\n\nexport default NileAccordion;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-accordion': NileAccordion;\n }\n}\n"]}
|
|
@@ -1,58 +1,92 @@
|
|
|
1
1
|
import { html, fixture, expect } from '@open-wc/testing';
|
|
2
2
|
import './nile-avatar';
|
|
3
|
+
import '../nile-icon';
|
|
4
|
+
const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
|
|
3
5
|
describe('NileAvatar', () => {
|
|
4
|
-
it('should display an image when the src is provided', async () => {
|
|
5
|
-
const el = await fixture(html `<nile-avatar src="https://example.com/avatar.png"></nile-avatar>`);
|
|
6
|
+
it('should display an image when the src is provided and variant is "image"', async () => {
|
|
7
|
+
const el = await fixture(html `<nile-avatar src="https://example.com/avatar.png" variant="image"></nile-avatar>`);
|
|
6
8
|
const img = el.shadowRoot.querySelector('img');
|
|
7
9
|
expect(img).to.exist;
|
|
8
10
|
expect(img.getAttribute('src')).to.equal('https://example.com/avatar.png');
|
|
9
11
|
});
|
|
10
|
-
it('should
|
|
11
|
-
const el = await fixture(html `<nile-avatar name="John Doe"></nile-avatar>`);
|
|
12
|
+
it('should fall back to text initials when image fails to load and variant is "text"', async () => {
|
|
13
|
+
const el = await fixture(html `<nile-avatar name="John Doe" variant="image" src="https://example.com/avatar.png"></nile-avatar>`);
|
|
12
14
|
const img = el.shadowRoot.querySelector('img');
|
|
13
15
|
img.dispatchEvent(new Event('error'));
|
|
14
16
|
await el.updateComplete;
|
|
17
|
+
const icon = el.shadowRoot.querySelector('nile-icon');
|
|
18
|
+
expect(icon).to.exist;
|
|
19
|
+
expect(icon.getAttribute('name')).to.equal('user');
|
|
20
|
+
});
|
|
21
|
+
it('should display initials when variant is "text" and name is provided', async () => {
|
|
22
|
+
const el = await fixture(html `<nile-avatar name="John Doe" variant="text"></nile-avatar>`);
|
|
15
23
|
const initialsDiv = el.shadowRoot.querySelector('.text__avatar');
|
|
16
24
|
expect(initialsDiv).to.exist;
|
|
17
25
|
expect(initialsDiv.textContent.trim()).to.equal('JD');
|
|
18
26
|
});
|
|
19
|
-
it('should
|
|
20
|
-
const el = await fixture(html `<nile-avatar
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
const initialsDiv = el.shadowRoot.querySelector('.text__avatar');
|
|
25
|
-
expect(initialsDiv).to.have.style('background-color', 'rgb(255, 0, 0)');
|
|
26
|
-
expect(initialsDiv).to.have.style('color', 'rgb(0, 255, 0)');
|
|
27
|
+
it('should display an icon when variant is "icon"', async () => {
|
|
28
|
+
const el = await fixture(html `<nile-avatar variant="icon" icon="user"></nile-avatar>`);
|
|
29
|
+
const icon = el.shadowRoot.querySelector('nile-icon');
|
|
30
|
+
expect(icon).to.exist;
|
|
31
|
+
expect(icon.getAttribute('name')).to.equal('user');
|
|
27
32
|
});
|
|
28
33
|
it('should apply the appropriate size class based on the size property', async () => {
|
|
29
|
-
const el = await fixture(html `<nile-avatar size="
|
|
30
|
-
const
|
|
31
|
-
expect(
|
|
34
|
+
const el = await fixture(html `<nile-avatar size="lg"></nile-avatar>`);
|
|
35
|
+
const div = el.shadowRoot.querySelector('.text__avatar') || el.shadowRoot.querySelector('img');
|
|
36
|
+
expect(div).to.have.class('avatar__large');
|
|
32
37
|
});
|
|
33
|
-
it('should have rounded class when isRounded is true', async () => {
|
|
38
|
+
it('should have the rounded class when isRounded is true', async () => {
|
|
34
39
|
const el = await fixture(html `<nile-avatar isRounded></nile-avatar>`);
|
|
35
|
-
const
|
|
36
|
-
expect(
|
|
37
|
-
});
|
|
38
|
-
it('should display a default icon when image fails to load and no name is provided', async () => {
|
|
39
|
-
const el = await fixture(html `<nile-avatar></nile-avatar>`);
|
|
40
|
-
const img = el.shadowRoot.querySelector('img');
|
|
41
|
-
img.dispatchEvent(new Event('error'));
|
|
42
|
-
await el.updateComplete;
|
|
43
|
-
const defaultIcon = el.shadowRoot.querySelector('nile-icon');
|
|
44
|
-
expect(defaultIcon).to.exist;
|
|
45
|
-
expect(defaultIcon.getAttribute('name')).to.equal('user');
|
|
40
|
+
const div = el.shadowRoot.querySelector('.text__avatar') || el.shadowRoot.querySelector('img');
|
|
41
|
+
expect(div).to.have.class('avatar__rounded');
|
|
46
42
|
});
|
|
47
|
-
it('should reflect properties to attributes', async () => {
|
|
48
|
-
const el = await fixture(html `<nile-avatar
|
|
43
|
+
it('should reflect properties to attributes correctly', async () => {
|
|
44
|
+
const el = await fixture(html `<nile-avatar
|
|
45
|
+
src="https://example.com/avatar.png"
|
|
46
|
+
name="Jane Doe"
|
|
47
|
+
bg-color="#123456"
|
|
48
|
+
text-color="#654321"
|
|
49
|
+
border-color="#abcdef"
|
|
50
|
+
size="sm"
|
|
51
|
+
isRounded
|
|
52
|
+
variant="image"
|
|
53
|
+
icon="user"
|
|
54
|
+
></nile-avatar>`);
|
|
49
55
|
expect(el.getAttribute('src')).to.equal('https://example.com/avatar.png');
|
|
50
56
|
expect(el.getAttribute('name')).to.equal('Jane Doe');
|
|
51
57
|
expect(el.getAttribute('bg-color')).to.equal('#123456');
|
|
52
58
|
expect(el.getAttribute('text-color')).to.equal('#654321');
|
|
53
59
|
expect(el.getAttribute('border-color')).to.equal('#abcdef');
|
|
54
|
-
expect(el.getAttribute('size')).to.equal('
|
|
60
|
+
expect(el.getAttribute('size')).to.equal('sm');
|
|
61
|
+
expect(el.getAttribute('variant')).to.equal('image');
|
|
62
|
+
expect(el.getAttribute('icon')).to.equal('user');
|
|
55
63
|
expect(el.hasAttribute('isRounded')).to.be.true;
|
|
56
64
|
});
|
|
65
|
+
it('should use provided background and text colors when bg-color and text-color are set', async () => {
|
|
66
|
+
const el = await fixture(html `<nile-avatar name="John Doe" bg-color="#ff0000" text-color="#00ff00"></nile-avatar>`);
|
|
67
|
+
const initialsDiv = el.shadowRoot.querySelector('.text__avatar');
|
|
68
|
+
expect(initialsDiv).to.have.style('background-color', 'rgb(255, 0, 0)');
|
|
69
|
+
expect(initialsDiv).to.have.style('color', 'rgb(0, 255, 0)');
|
|
70
|
+
});
|
|
71
|
+
it('should display a default icon when variant is "icon" and icon is not provided', async () => {
|
|
72
|
+
const el = await fixture(html `<nile-avatar variant="icon"></nile-avatar>`);
|
|
73
|
+
const icon = el.shadowRoot.querySelector('nile-icon');
|
|
74
|
+
expect(icon).to.exist;
|
|
75
|
+
expect(icon.getAttribute('name')).to.equal('user');
|
|
76
|
+
});
|
|
77
|
+
it('should use the default initials if name is not provided and variant is "text"', async () => {
|
|
78
|
+
const el = await fixture(html `<nile-avatar variant="text"></nile-avatar>`);
|
|
79
|
+
const initialsDiv = el.shadowRoot.querySelector('.text__avatar');
|
|
80
|
+
expect(initialsDiv).to.exist;
|
|
81
|
+
expect(initialsDiv.textContent.trim()).to.equal('');
|
|
82
|
+
});
|
|
83
|
+
it('should handle image error gracefully by switching to fallback content', async () => {
|
|
84
|
+
const el = await fixture(html `<nile-avatar variant="image" src="invalid_url"></nile-avatar>`);
|
|
85
|
+
const img = el.shadowRoot.querySelector('img');
|
|
86
|
+
img.dispatchEvent(new Event('error'));
|
|
87
|
+
await el.updateComplete;
|
|
88
|
+
const fallbackContent = el.shadowRoot.querySelector('.text__avatar') || el.shadowRoot.querySelector('nile-icon');
|
|
89
|
+
expect(fallbackContent).to.exist;
|
|
90
|
+
});
|
|
57
91
|
});
|
|
58
92
|
//# sourceMappingURL=nile-avatar.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-avatar.test.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport './nile-avatar';\nimport {NileAvatar} from './nile-avatar';\n\ndescribe('NileAvatar', () => {\n it('should display an image when the src is provided', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar src=\"https://example.com/avatar.png\"></nile-avatar>`);\n const img = el.shadowRoot!.querySelector('img');\n expect(img).to.exist;\n expect(img!.getAttribute('src')).to.equal('https://example.com/avatar.png');\n });\n\n it('should display initials when the image fails to load and name is provided', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar name=\"John Doe\"></nile-avatar>`);\n const img = el.shadowRoot!.querySelector('img');\n img!.dispatchEvent(new Event('error'));\n await el.updateComplete;\n const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');\n expect(initialsDiv).to.exist;\n expect(initialsDiv!.textContent!.trim()).to.equal('JD');\n });\n\n it('should use provided background and text colors when bg-color and text-color are set', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar name=\"John Doe\" bg-color=\"#ff0000\" text-color=\"#00ff00\"></nile-avatar>`);\n const img = el.shadowRoot!.querySelector('img');\n img!.dispatchEvent(new Event('error'));\n await el.updateComplete;\n const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');\n expect(initialsDiv).to.have.style('background-color', 'rgb(255, 0, 0)');\n expect(initialsDiv).to.have.style('color', 'rgb(0, 255, 0)');\n });\n\n it('should apply the appropriate size class based on the size property', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar size=\"large\"></nile-avatar>`);\n const img = el.shadowRoot!.querySelector('img');\n expect(img).to.have.class('avatar__large');\n });\n\n it('should have rounded class when isRounded is true', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar isRounded></nile-avatar>`);\n const img = el.shadowRoot!.querySelector('img');\n expect(img).to.have.class('avatar__rounded');\n });\n\n it('should display a default icon when image fails to load and no name is provided', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar></nile-avatar>`);\n const img = el.shadowRoot!.querySelector('img');\n img!.dispatchEvent(new Event('error'));\n await el.updateComplete;\n const defaultIcon = el.shadowRoot!.querySelector('nile-icon');\n expect(defaultIcon).to.exist;\n expect(defaultIcon!.getAttribute('name')).to.equal('user');\n });\n\n it('should reflect properties to attributes', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar src=\"https://example.com/avatar.png\" name=\"Jane Doe\" bg-color=\"#123456\" text-color=\"#654321\" border-color=\"#abcdef\" size=\"small\" isRounded></nile-avatar>`);\n expect(el.getAttribute('src')).to.equal('https://example.com/avatar.png');\n expect(el.getAttribute('name')).to.equal('Jane Doe');\n expect(el.getAttribute('bg-color')).to.equal('#123456');\n expect(el.getAttribute('text-color')).to.equal('#654321');\n expect(el.getAttribute('border-color')).to.equal('#abcdef');\n expect(el.getAttribute('size')).to.equal('small');\n expect(el.hasAttribute('isRounded')).to.be.true;\n });\n});"]}
|
|
1
|
+
{"version":3,"file":"nile-avatar.test.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport './nile-avatar';\nimport '../nile-icon'\nimport { NileAvatar } from './nile-avatar';\nconst wait=(ms:number=50000)=>new Promise(resolve => setTimeout(resolve, ms))\n\n\ndescribe('NileAvatar', () => {\n it('should display an image when the src is provided and variant is \"image\"', async () => {\n const el = await fixture<NileAvatar>(\n html`<nile-avatar src=\"https://example.com/avatar.png\" variant=\"image\"></nile-avatar>`\n );\n const img = el.shadowRoot!.querySelector('img');\n expect(img).to.exist;\n expect(img!.getAttribute('src')).to.equal('https://example.com/avatar.png');\n });\n\n it('should fall back to text initials when image fails to load and variant is \"text\"', async () => {\n const el = await fixture<NileAvatar>(\n html`<nile-avatar name=\"John Doe\" variant=\"image\" src=\"https://example.com/avatar.png\"></nile-avatar>`\n );\n const img = el.shadowRoot!.querySelector('img');\n img!.dispatchEvent(new Event('error'));\n await el.updateComplete;\n const icon = el.shadowRoot!.querySelector('nile-icon');\n expect(icon).to.exist;\n expect(icon!.getAttribute('name')).to.equal('user');\n });\n\n it('should display initials when variant is \"text\" and name is provided', async () => {\n const el = await fixture<NileAvatar>(\n html`<nile-avatar name=\"John Doe\" variant=\"text\"></nile-avatar>`\n );\n const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');\n expect(initialsDiv).to.exist;\n expect(initialsDiv!.textContent!.trim()).to.equal('JD');\n });\n\n it('should display an icon when variant is \"icon\"', async () => {\n const el = await fixture<NileAvatar>(\n html`<nile-avatar variant=\"icon\" icon=\"user\"></nile-avatar>`\n );\n const icon = el.shadowRoot!.querySelector('nile-icon');\n expect(icon).to.exist;\n expect(icon!.getAttribute('name')).to.equal('user');\n });\n\n it('should apply the appropriate size class based on the size property', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar size=\"lg\"></nile-avatar>`);\n const div = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('img');\n expect(div).to.have.class('avatar__large');\n });\n\n it('should have the rounded class when isRounded is true', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar isRounded></nile-avatar>`);\n const div = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('img');\n expect(div).to.have.class('avatar__rounded');\n });\n\n it('should reflect properties to attributes correctly', async () => {\n const el = await fixture<NileAvatar>(\n html`<nile-avatar\n src=\"https://example.com/avatar.png\"\n name=\"Jane Doe\"\n bg-color=\"#123456\"\n text-color=\"#654321\"\n border-color=\"#abcdef\"\n size=\"sm\"\n isRounded\n variant=\"image\"\n icon=\"user\"\n ></nile-avatar>`\n );\n expect(el.getAttribute('src')).to.equal('https://example.com/avatar.png');\n expect(el.getAttribute('name')).to.equal('Jane Doe');\n expect(el.getAttribute('bg-color')).to.equal('#123456');\n expect(el.getAttribute('text-color')).to.equal('#654321');\n expect(el.getAttribute('border-color')).to.equal('#abcdef');\n expect(el.getAttribute('size')).to.equal('sm');\n expect(el.getAttribute('variant')).to.equal('image');\n expect(el.getAttribute('icon')).to.equal('user');\n expect(el.hasAttribute('isRounded')).to.be.true;\n });\n\n it('should use provided background and text colors when bg-color and text-color are set', async () => {\n const el = await fixture<NileAvatar>(\n html`<nile-avatar name=\"John Doe\" bg-color=\"#ff0000\" text-color=\"#00ff00\"></nile-avatar>`\n );\n const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');\n expect(initialsDiv).to.have.style('background-color', 'rgb(255, 0, 0)');\n expect(initialsDiv).to.have.style('color', 'rgb(0, 255, 0)');\n });\n\n it('should display a default icon when variant is \"icon\" and icon is not provided', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar variant=\"icon\"></nile-avatar>`);\n const icon = el.shadowRoot!.querySelector('nile-icon');\n expect(icon).to.exist;\n expect(icon!.getAttribute('name')).to.equal('user');\n });\n\n it('should use the default initials if name is not provided and variant is \"text\"', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar variant=\"text\"></nile-avatar>`);\n const initialsDiv = el.shadowRoot!.querySelector('.text__avatar');\n expect(initialsDiv).to.exist;\n expect(initialsDiv!.textContent!.trim()).to.equal('');\n });\n\n it('should handle image error gracefully by switching to fallback content', async () => {\n const el = await fixture<NileAvatar>(html`<nile-avatar variant=\"image\" src=\"invalid_url\"></nile-avatar>`);\n const img = el.shadowRoot!.querySelector('img');\n img!.dispatchEvent(new Event('error'));\n await el.updateComplete;\n const fallbackContent = el.shadowRoot!.querySelector('.text__avatar') || el.shadowRoot!.querySelector('nile-icon');\n expect(fallbackContent).to.exist;\n });\n});\n"]}
|
|
@@ -45,13 +45,13 @@ export const styles = css `
|
|
|
45
45
|
|
|
46
46
|
.code-editor__icon__container {
|
|
47
47
|
display: none;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
align-self: start;
|
|
50
|
+
padding: 5px 5px 0px 0px;
|
|
48
51
|
}
|
|
49
52
|
|
|
50
53
|
.code-mirror:hover > .code-editor__icon__container {
|
|
51
|
-
cursor: pointer;
|
|
52
54
|
display: flex;
|
|
53
|
-
align-self: start;
|
|
54
|
-
padding: 5px 5px 0px 0px;
|
|
55
55
|
}
|
|
56
56
|
`;
|
|
57
57
|
export default [styles];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-code-editor.css.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CodeEditor CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .code-mirror {\n display: flex;\n justify-content: flex-end;\n flex-direction: row-reverse;\n padding: 5px;\n border-radius: 5px;\n border: 1px solid rgb(204, 204, 204);\n }\n\n .no-scroller .cm-scroller{\n scrollbar-width:none;\n }\n\n .error {\n border-color: #e5434d;\n }\n\n .noborder {\n border: none;\n }\n\n .cm-editor {\n flex: 1;\n min-width: 0;\n }\n\n .ͼ1.cm-focused {\n outline: none;\n }\n\n .code-editor__icon__container {\n display: none;\n }\n \n .code-mirror:hover > .code-editor__icon__container {\n
|
|
1
|
+
{"version":3,"file":"nile-code-editor.css.js","sourceRoot":"","sources":["../../../src/nile-code-editor/nile-code-editor.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * CodeEditor CSS\n */\nexport const styles = css`\n :host {\n display: block;\n }\n\n .code-mirror {\n display: flex;\n justify-content: flex-end;\n flex-direction: row-reverse;\n padding: 5px;\n border-radius: 5px;\n border: 1px solid rgb(204, 204, 204);\n }\n\n .no-scroller .cm-scroller{\n scrollbar-width:none;\n }\n\n .error {\n border-color: #e5434d;\n }\n\n .noborder {\n border: none;\n }\n\n .cm-editor {\n flex: 1;\n min-width: 0;\n }\n\n .ͼ1.cm-focused {\n outline: none;\n }\n\n .code-editor__icon__container {\n display: none;\n cursor: pointer;\n align-self: start;\n padding: 5px 5px 0px 0px;\n }\n \n .code-mirror:hover > .code-editor__icon__container {\n display: flex;\n }\n`;\n\nexport default [styles];\n"]}
|