@aquera/nile-elements 0.0.6-5 → 0.0.6-6
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/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/index.d.ts +1 -37
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/index.js +1 -120
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/index.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.css.d.ts +12 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.css.js +63 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.css.js.map +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.d.ts +45 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.js +80 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.js.map +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.d.ts +2 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js +1 -0
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js.map +1 -1
- package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.iife.js +179 -172
- package/dist/nile-badge/index.cjs.js +1 -1
- package/dist/nile-badge/index.cjs.js.map +1 -1
- package/dist/nile-badge/index.esm.js +1 -55
- package/dist/nile-badge/nile-badge.cjs.js +2 -0
- package/dist/nile-badge/nile-badge.cjs.js.map +1 -0
- package/dist/nile-badge/nile-badge.css.cjs.js +2 -0
- package/dist/nile-badge/nile-badge.css.cjs.js.map +1 -0
- package/dist/nile-badge/nile-badge.css.esm.js +51 -0
- package/dist/nile-badge/nile-badge.esm.js +12 -0
- package/dist/nile-switcher/nile-switcher.cjs.js +1 -1
- package/dist/nile-switcher/nile-switcher.cjs.js.map +1 -1
- package/dist/nile-switcher/nile-switcher.esm.js +14 -14
- package/dist/src/nile-badge/index.d.ts +1 -37
- package/dist/src/nile-badge/index.js +1 -120
- package/dist/src/nile-badge/index.js.map +1 -1
- package/dist/src/nile-badge/nile-badge.css.d.ts +12 -0
- package/dist/src/nile-badge/nile-badge.css.js +63 -0
- package/dist/src/nile-badge/nile-badge.css.js.map +1 -0
- package/dist/src/nile-badge/nile-badge.d.ts +45 -0
- package/dist/src/nile-badge/nile-badge.js +80 -0
- package/dist/src/nile-badge/nile-badge.js.map +1 -0
- package/dist/src/nile-switcher/nile-switcher.d.ts +2 -0
- package/dist/src/nile-switcher/nile-switcher.js +1 -0
- package/dist/src/nile-switcher/nile-switcher.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-badge/index.ts +1 -119
- package/src/nile-badge/nile-badge.css.ts +64 -0
- package/src/nile-badge/nile-badge.ts +94 -0
- package/src/nile-switcher/nile-switcher.ts +3 -0
@@ -1,37 +1 @@
|
|
1
|
-
|
2
|
-
/**
|
3
|
-
* An nile-badge element.
|
4
|
-
*
|
5
|
-
* @fires count-changed - Indicates when the count changes
|
6
|
-
* @slot - This element has a slot
|
7
|
-
* @csspart button - The button
|
8
|
-
*/
|
9
|
-
export declare class NileBadge extends LitElement {
|
10
|
-
static styles: import("lit").CSSResult;
|
11
|
-
/**
|
12
|
-
* Button Lab
|
13
|
-
*/
|
14
|
-
name: number;
|
15
|
-
/**
|
16
|
-
* Button Lab
|
17
|
-
*/
|
18
|
-
icon: string;
|
19
|
-
/**
|
20
|
-
* Button Lab
|
21
|
-
*/
|
22
|
-
active: boolean;
|
23
|
-
get buttonClassMap(): {
|
24
|
-
'nds-badge--active': boolean;
|
25
|
-
};
|
26
|
-
/**
|
27
|
-
* Button Lab
|
28
|
-
*/
|
29
|
-
href: string;
|
30
|
-
_hasSlotContent(slotName: string): void;
|
31
|
-
render(): import("lit-html").TemplateResult<1>;
|
32
|
-
}
|
33
|
-
declare global {
|
34
|
-
interface HTMLElementTagNameMap {
|
35
|
-
'nile-badge': NileBadge;
|
36
|
-
}
|
37
|
-
}
|
1
|
+
export { NileBadge } from './nile-badge';
|
@@ -1,121 +1,2 @@
|
|
1
|
-
|
2
|
-
import { LitElement, html, css } from 'lit';
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
4
|
-
import { classMap } from 'lit/directives/class-map.js';
|
5
|
-
/**
|
6
|
-
* An nile-badge element.
|
7
|
-
*
|
8
|
-
* @fires count-changed - Indicates when the count changes
|
9
|
-
* @slot - This element has a slot
|
10
|
-
* @csspart button - The button
|
11
|
-
*/
|
12
|
-
let NileBadge = class NileBadge extends LitElement {
|
13
|
-
constructor() {
|
14
|
-
super(...arguments);
|
15
|
-
/**
|
16
|
-
* Button Lab
|
17
|
-
*/
|
18
|
-
this.name = 0;
|
19
|
-
/**
|
20
|
-
* Button Lab
|
21
|
-
*/
|
22
|
-
this.icon = '';
|
23
|
-
/**
|
24
|
-
* Button Lab
|
25
|
-
*/
|
26
|
-
this.active = false;
|
27
|
-
/**
|
28
|
-
* Button Lab
|
29
|
-
*/
|
30
|
-
this.href = '/';
|
31
|
-
}
|
32
|
-
get buttonClassMap() {
|
33
|
-
return {
|
34
|
-
'nds-badge--active': this.active,
|
35
|
-
};
|
36
|
-
}
|
37
|
-
_hasSlotContent(slotName) {
|
38
|
-
const slot = this.querySelector(`slot[name=${slotName}]`);
|
39
|
-
console.log(slot, 'slot');
|
40
|
-
}
|
41
|
-
render() {
|
42
|
-
const { name, icon, href } = this;
|
43
|
-
const hrefPath = `/${href}`;
|
44
|
-
return html `
|
45
|
-
<a class="nds-badge ${classMap(this.buttonClassMap)}">
|
46
|
-
<span class="nds-badge__link">${this.name}</span>
|
47
|
-
</a>
|
48
|
-
`;
|
49
|
-
}
|
50
|
-
};
|
51
|
-
NileBadge.styles = css `
|
52
|
-
:host {
|
53
|
-
display: block;
|
54
|
-
}
|
55
|
-
.nds-badge {
|
56
|
-
width: 24px;
|
57
|
-
height: 24px;
|
58
|
-
border-radius: 9rem;
|
59
|
-
font-size: 14px;
|
60
|
-
justify-content: space-around;
|
61
|
-
font-weight: bold;
|
62
|
-
display: flex;
|
63
|
-
background-color: rgb(221, 221, 221);
|
64
|
-
flex-wrap: nowrap;
|
65
|
-
align-items: center;
|
66
|
-
color: var(--nile-colors-dark-900);
|
67
|
-
}
|
68
|
-
|
69
|
-
.nds-badge:hover {
|
70
|
-
background: rgba(0, 94, 166, 0.1);
|
71
|
-
}
|
72
|
-
|
73
|
-
.nds-badge__link {
|
74
|
-
font-family: var(--nile-font-family-sans-serif);
|
75
|
-
font-style: normal;
|
76
|
-
font-weight: 400;
|
77
|
-
font-size: 14px;
|
78
|
-
line-height: 1;
|
79
|
-
letter-spacing: 0.2px;
|
80
|
-
text-decoration: none;
|
81
|
-
font-size: 12px;
|
82
|
-
}
|
83
|
-
|
84
|
-
.nds-badge__link:hover {
|
85
|
-
color: var(--nile-colors-dark-900);
|
86
|
-
}
|
87
|
-
|
88
|
-
.nds-badge--active {
|
89
|
-
background-color: var(--nile-colors-primary-700);
|
90
|
-
color: var(--nile-colors-neutral-100);
|
91
|
-
}
|
92
|
-
|
93
|
-
.nds-badge--active:hover {
|
94
|
-
background-color: var(---nile-colors-primary-700);
|
95
|
-
}
|
96
|
-
|
97
|
-
.nds-badge__icon {
|
98
|
-
margin-bottom: 0;
|
99
|
-
height: 14px;
|
100
|
-
}
|
101
|
-
`;
|
102
|
-
__decorate([
|
103
|
-
property()
|
104
|
-
], NileBadge.prototype, "name", void 0);
|
105
|
-
__decorate([
|
106
|
-
property()
|
107
|
-
], NileBadge.prototype, "icon", void 0);
|
108
|
-
__decorate([
|
109
|
-
property()
|
110
|
-
], NileBadge.prototype, "active", void 0);
|
111
|
-
__decorate([
|
112
|
-
property()
|
113
|
-
], NileBadge.prototype, "href", void 0);
|
114
|
-
NileBadge = __decorate([
|
115
|
-
customElement('nile-badge')
|
116
|
-
], NileBadge);
|
117
|
-
export { NileBadge };
|
118
|
-
// <span class="nds-badge__icon">
|
119
|
-
// <nile-icon name="${this.icon}" size="14" color="#000"></nile-icon>
|
120
|
-
// </span>
|
1
|
+
export { NileBadge } from './nile-badge';
|
121
2
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-badge/index.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { NileBadge } from './nile-badge';\n"]}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
/**
|
8
|
+
* Tag CSS
|
9
|
+
*/
|
10
|
+
export declare const styles: import("lit-element").CSSResult;
|
11
|
+
declare const _default: import("lit-element").CSSResult[];
|
12
|
+
export default _default;
|
@@ -0,0 +1,63 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { css } from 'lit-element';
|
8
|
+
/**
|
9
|
+
* Tag CSS
|
10
|
+
*/
|
11
|
+
export const styles = css `
|
12
|
+
:host {
|
13
|
+
}
|
14
|
+
|
15
|
+
.badge {
|
16
|
+
padding: 0 4px;
|
17
|
+
border-radius: 4px;
|
18
|
+
height: 16px;
|
19
|
+
font-size: 10.24px;
|
20
|
+
display: inline-flex;
|
21
|
+
align-items: center;/
|
22
|
+
justify-content: center;
|
23
|
+
}
|
24
|
+
|
25
|
+
.badge__content {
|
26
|
+
font-family: Colfax-regular;
|
27
|
+
font-size: 10.24px;
|
28
|
+
font-style: normal;
|
29
|
+
font-weight: 400;
|
30
|
+
letter-spacing: 0.2px;
|
31
|
+
}
|
32
|
+
|
33
|
+
.badge--primary {
|
34
|
+
background: #005EA6;
|
35
|
+
}
|
36
|
+
|
37
|
+
.badge--success {
|
38
|
+
background: #A5F3E1;
|
39
|
+
}
|
40
|
+
|
41
|
+
.badge--normal {
|
42
|
+
background: #E5E9EB;
|
43
|
+
}
|
44
|
+
|
45
|
+
.badge--warning {
|
46
|
+
background: #F3E0A5;
|
47
|
+
}
|
48
|
+
|
49
|
+
.badge--error {
|
50
|
+
background: #F3A5AA;
|
51
|
+
}
|
52
|
+
|
53
|
+
.badge--info {
|
54
|
+
background: #A5D3F3;
|
55
|
+
}
|
56
|
+
|
57
|
+
.badge--rounded {
|
58
|
+
border-radius: 100px;
|
59
|
+
padding: 0 6px;
|
60
|
+
}
|
61
|
+
`;
|
62
|
+
export default [styles];
|
63
|
+
//# sourceMappingURL=nile-badge.css.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDxB,CAAC;AACF,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-element';\n\n/**\n * Tag CSS\n */\nexport const styles = css`\n :host {\n }\n\n .badge {\n padding: 0 4px;\n border-radius: 4px;\n height: 16px;\n font-size: 10.24px;\n display: inline-flex;\n align-items: center;/\n justify-content: center;\n }\n\n .badge__content {\n font-family: Colfax-regular;\n font-size: 10.24px;\n font-style: normal;\n font-weight: 400;\n letter-spacing: 0.2px;\n }\n\n .badge--primary {\n background: #005EA6;\n }\n\n .badge--success {\n background: #A5F3E1;\n }\n\n .badge--normal {\n background: #E5E9EB;\n }\n\n .badge--warning {\n background: #F3E0A5;\n }\n\n .badge--error {\n background: #F3A5AA;\n }\n\n .badge--info {\n background: #A5D3F3;\n }\n\n .badge--rounded {\n border-radius: 100px;\n padding: 0 6px;\n }\n`;\nexport default [styles];\n"]}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { TemplateResult } from 'lit-element';
|
8
|
+
import '../nile-icon-button/nile-icon-button';
|
9
|
+
import NileElement from '../internal/nile-element';
|
10
|
+
import type { CSSResultGroup } from 'lit';
|
11
|
+
/**
|
12
|
+
* Nile icon component.
|
13
|
+
*
|
14
|
+
* @tag nile-badge
|
15
|
+
*
|
16
|
+
*/
|
17
|
+
/**
|
18
|
+
* @summary badges are used as labels to organize things or to indicate a selection.
|
19
|
+
* @status stable
|
20
|
+
*
|
21
|
+
* @dependency nile-icon-button
|
22
|
+
*
|
23
|
+
* @slot - The badge's content.
|
24
|
+
*
|
25
|
+
* @event nile-remove - Emitted when the remove button is activated.
|
26
|
+
*
|
27
|
+
* @csspart base - The component's base wrapper.
|
28
|
+
* @csspart content - The badge's content.
|
29
|
+
* @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.
|
30
|
+
* @csspart remove-button__base - The remove button's exported `base` part.
|
31
|
+
*/
|
32
|
+
export declare class NileBadge extends NileElement {
|
33
|
+
static styles: CSSResultGroup;
|
34
|
+
/** The badge's theme variant. */
|
35
|
+
variant: 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info';
|
36
|
+
/** Draws a pill-style badge with rounded edges. */
|
37
|
+
rounded: boolean;
|
38
|
+
render(): TemplateResult<1>;
|
39
|
+
}
|
40
|
+
export default NileBadge;
|
41
|
+
declare global {
|
42
|
+
interface HTMLElementTagNameMap {
|
43
|
+
'nile-badge': NileBadge;
|
44
|
+
}
|
45
|
+
}
|
@@ -0,0 +1,80 @@
|
|
1
|
+
/**
|
2
|
+
* Copyright Aquera Inc 2023
|
3
|
+
*
|
4
|
+
* This source code is licensed under the BSD-3-Clause license found in the
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
6
|
+
*/
|
7
|
+
import { __decorate } from "tslib";
|
8
|
+
import { html, property, } from 'lit-element';
|
9
|
+
import { styles } from './nile-badge.css';
|
10
|
+
import '../nile-icon-button/nile-icon-button';
|
11
|
+
import { classMap } from 'lit/directives/class-map.js';
|
12
|
+
import { customElement } from 'lit/decorators.js';
|
13
|
+
import NileElement from '../internal/nile-element';
|
14
|
+
/**
|
15
|
+
* Nile icon component.
|
16
|
+
*
|
17
|
+
* @tag nile-badge
|
18
|
+
*
|
19
|
+
*/
|
20
|
+
/**
|
21
|
+
* @summary badges are used as labels to organize things or to indicate a selection.
|
22
|
+
* @status stable
|
23
|
+
*
|
24
|
+
* @dependency nile-icon-button
|
25
|
+
*
|
26
|
+
* @slot - The badge's content.
|
27
|
+
*
|
28
|
+
* @event nile-remove - Emitted when the remove button is activated.
|
29
|
+
*
|
30
|
+
* @csspart base - The component's base wrapper.
|
31
|
+
* @csspart content - The badge's content.
|
32
|
+
* @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.
|
33
|
+
* @csspart remove-button__base - The remove button's exported `base` part.
|
34
|
+
*/
|
35
|
+
let NileBadge = class NileBadge extends NileElement {
|
36
|
+
constructor() {
|
37
|
+
super(...arguments);
|
38
|
+
/** The badge's theme variant. */
|
39
|
+
this.variant = 'normal';
|
40
|
+
/** Draws a pill-style badge with rounded edges. */
|
41
|
+
this.rounded = false;
|
42
|
+
}
|
43
|
+
render() {
|
44
|
+
return html `
|
45
|
+
<span
|
46
|
+
part="base"
|
47
|
+
class=${classMap({
|
48
|
+
badge: true,
|
49
|
+
// Types
|
50
|
+
'badge--primary': this.variant === 'primary',
|
51
|
+
'badge--success': this.variant === 'success',
|
52
|
+
'badge--normal': this.variant === 'normal',
|
53
|
+
'badge--warning': this.variant === 'warning',
|
54
|
+
'badge--error': this.variant === 'error',
|
55
|
+
'badge--info': this.variant === 'info',
|
56
|
+
'badge--rounded': this.rounded,
|
57
|
+
})}
|
58
|
+
>
|
59
|
+
|
60
|
+
|
61
|
+
<slot part="content" class="badge__content"></slot>
|
62
|
+
|
63
|
+
|
64
|
+
</span>
|
65
|
+
`;
|
66
|
+
}
|
67
|
+
};
|
68
|
+
NileBadge.styles = styles;
|
69
|
+
__decorate([
|
70
|
+
property({ reflect: true })
|
71
|
+
], NileBadge.prototype, "variant", void 0);
|
72
|
+
__decorate([
|
73
|
+
property({ type: Boolean, reflect: true })
|
74
|
+
], NileBadge.prototype, "rounded", void 0);
|
75
|
+
NileBadge = __decorate([
|
76
|
+
customElement('nile-badge')
|
77
|
+
], NileBadge);
|
78
|
+
export { NileBadge };
|
79
|
+
export default NileBadge;
|
80
|
+
//# sourceMappingURL=nile-badge.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"nile-badge.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAGL,iCAAiC;QACJ,YAAO,GAMvB,QAAQ,CAAC;QAEtB,mDAAmD;QACP,YAAO,GAAG,KAAK,CAAC;IA4B9D,CAAC;IAzBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YAEX,QAAQ;YACR,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,gBAAgB,EAAE,IAAI,CAAC,OAAO;SAC/B,CAAC;;;;;;;;KAQL,CAAC;IACJ,CAAC;;AAvCM,gBAAM,GAAmB,MAAM,CAAC;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAMN;AAGsB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAiB;AAbjD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyCrB;SAzCY,SAAS;AA2CtB,eAAe,SAAS,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 {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { styles } from './nile-badge.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-badge\n *\n */\n\n/**\n * @summary badges are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The badge's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The badge's content.\n * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-badge')\nexport class NileBadge extends NileElement {\n static styles: CSSResultGroup = styles;\n\n /** The badge's theme variant. */\n @property({ reflect: true }) variant:\n | 'primary'\n | 'success'\n | 'normal'\n | 'warning'\n | 'error'\n | 'info' = 'normal';\n\n /** Draws a pill-style badge with rounded edges. */\n @property({ type: Boolean, reflect: true }) rounded = false;\n\n\n render() {\n return html`\n <span\n part=\"base\"\n class=${classMap({\n badge: true,\n\n // Types\n 'badge--primary': this.variant === 'primary',\n 'badge--success': this.variant === 'success',\n 'badge--normal': this.variant === 'normal',\n 'badge--warning': this.variant === 'warning',\n 'badge--error': this.variant === 'error',\n 'badge--info': this.variant === 'info',\n 'badge--rounded': this.rounded,\n })}\n >\n\n\n <slot part=\"content\" class=\"badge__content\"></slot>\n\n\n </span>\n `;\n }\n}\n\nexport default NileBadge;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-badge': NileBadge;\n }\n}\n"]}
|
@@ -18,6 +18,8 @@ import { CSSResultGroup } from 'lit';
|
|
18
18
|
*
|
19
19
|
|
20
20
|
* @event nile-change - Emitted when the control's value changes.
|
21
|
+
* @event nile-switch - Emitted when the nile component is being switched.
|
22
|
+
|
21
23
|
*/
|
22
24
|
export interface switchconfig {
|
23
25
|
toggleSwitch: boolean;
|
@@ -83,6 +83,7 @@ let NileSwitcher = class NileSwitcher extends NileElement {
|
|
83
83
|
...this.nileSwitchConfig,
|
84
84
|
toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
|
85
85
|
};
|
86
|
+
this.emit('nile-switch', { config: this.nileSwitchConfig });
|
86
87
|
}
|
87
88
|
singleFieldSwitcher(defaultInput, switchInput, toggleField) {
|
88
89
|
const defaultInputType = defaultInput.inputType;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-switcher.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAkB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;
|
1
|
+
{"version":3,"file":"nile-switcher.js","sourceRoot":"","sources":["../../../src/nile-switcher/nile-switcher.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 { html, property, TemplateResult } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-switcher.css';\nimport NileElement from '../internal/nile-element';\nimport { CSSResultGroup } from 'lit';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * @summary Allows you to switch between nile elements\n\n * @dependency nile-icon\n * @dependency nile-input\n * @dependency nile-checkbox\n * @dependency nile-dropdown\n * @dependency nile-textarea\n *\n \n * @event nile-change - Emitted when the control's value changes.\n * @event nile-switch - Emitted when the nile component is being switched.\n \n */\n\nexport interface switchconfig {\n toggleSwitch: boolean;\n defaultInput: switchInputType;\n switchInput: switchInputType;\n}\n\nexport interface switchInputType {\n inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';\n value?: String | boolean;\n label?: String;\n placeholder?: string;\n options?: Array<any>;\n multiple?: boolean;\n}\n\n@customElement('nile-switcher')\nexport class NileSwitcher extends NileElement {\n /**\n * The styles for nile switcher\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n static styles: CSSResultGroup = styles;\n @property() nileSwitchConfig: switchconfig;\n\n connectedCallback() {\n super.connectedCallback();\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n renderNileText(defaultInput: switchInputType) {\n const { value, label, placeholder } = defaultInput;\n return html`<nile-input\n .value=${value}\n .label=${label}\n .placeholder=${placeholder}\n @nile-input=${this.handleChange}\n ></nile-input>`;\n }\n\n renderNileTextArea(switchInput: switchInputType) {\n const { value } = switchInput;\n return html`<nile-textarea\n .value=${value}\n @nile-input=${this.handleChange}\n ></nile-textarea>`;\n }\n\n renderNileCheckBox(defaultInput: switchInputType) {\n const { value, label } = defaultInput;\n\n return html`<nile-checkbox\n .checked=${value}\n .label=${label}\n @valueChange=\"${this.handleChangeCheckbox}\"\n ></nile-checkbox>`;\n }\n\n handleChange(event: CustomEvent) {\n this.emit('nile-change', { value: event.detail.value });\n }\n\n handleChangeCheckbox(event: CustomEvent) {\n this.emit('nile-change', { value: event.detail.checked });\n }\n\n renderDropdown(defaultInput: switchInputType) {\n const { options, multiple, placeholder } = defaultInput;\n return html`<nile-select\n .placeholder=${placeholder}\n .multiple=\"${multiple}\"\n @nile-change=\"${this.handleChange}\"\n >\n ${options &&\n options.map((option: any) => {\n return html`<nile-option .value=\"${option}\">${option} </nile-option>`;\n })}\n </nile-select>`;\n }\n\n renderIcon() {\n const icon = !this.nileSwitchConfig.toggleSwitch\n ? 'header-functions'\n : 'stringinput';\n return html`<nile-icon\n size=\"14\"\n class=${classMap({\n 'pointer-cursor': true,\n 'flex-start': icon === 'stringinput',\n })}\n .name=${icon}\n color=\"#005EA6\"\n @click=${this.toggleField}\n ></nile-icon>`;\n }\n\n toggleField() {\n this.nileSwitchConfig = {\n ...this.nileSwitchConfig,\n toggleSwitch: !this.nileSwitchConfig.toggleSwitch,\n };\n this.emit('nile-switch', { config: this.nileSwitchConfig });\n }\n\n singleFieldSwitcher(\n defaultInput: switchInputType,\n switchInput: switchInputType,\n toggleField: boolean\n ) {\n const defaultInputType = defaultInput.inputType;\n const switchInputType = switchInput.inputType;\n return html`\n ${!toggleField\n ? choose(\n defaultInputType,\n [\n ['text', () => this.renderNileText(defaultInput)],\n ['checkbox', () => this.renderNileCheckBox(defaultInput)],\n [\n 'dropdown',\n () => this.renderDropdown(this.nileSwitchConfig.defaultInput),\n ],\n ],\n () => this.renderNileText(defaultInput)\n )\n : choose(\n switchInputType,\n [['text-area', () => this.renderNileTextArea(switchInput)]],\n\n () => this.renderNileTextArea(switchInput)\n )}\n ${this.renderIcon()}\n `;\n }\n public render(): TemplateResult {\n const {\n toggleSwitch: toggleField,\n defaultInput,\n switchInput,\n } = this.nileSwitchConfig;\n\n return html`<div class=\"input-container\">\n ${this.singleFieldSwitcher(defaultInput, switchInput, toggleField)}\n </div>`;\n }\n}\n\nexport default NileSwitcher;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-switcher': NileSwitcher;\n }\n}\n"]}
|