@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.
Files changed (46) hide show
  1. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/index.d.ts +1 -37
  2. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/index.js +1 -120
  3. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/index.js.map +1 -1
  4. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.css.d.ts +12 -0
  5. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.css.js +63 -0
  6. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.css.js.map +1 -0
  7. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.d.ts +45 -0
  8. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.js +80 -0
  9. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-badge/nile-badge.js.map +1 -0
  10. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.d.ts +2 -0
  11. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js +1 -0
  12. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/src/nile-switcher/nile-switcher.js.map +1 -1
  13. package/.rollup.cache/opt/atlassian/pipelines/agent/build/packages/nile-elements/dist/tsconfig.tsbuildinfo +1 -1
  14. package/dist/index.cjs.js +1 -1
  15. package/dist/index.esm.js +1 -1
  16. package/dist/index.iife.js +179 -172
  17. package/dist/nile-badge/index.cjs.js +1 -1
  18. package/dist/nile-badge/index.cjs.js.map +1 -1
  19. package/dist/nile-badge/index.esm.js +1 -55
  20. package/dist/nile-badge/nile-badge.cjs.js +2 -0
  21. package/dist/nile-badge/nile-badge.cjs.js.map +1 -0
  22. package/dist/nile-badge/nile-badge.css.cjs.js +2 -0
  23. package/dist/nile-badge/nile-badge.css.cjs.js.map +1 -0
  24. package/dist/nile-badge/nile-badge.css.esm.js +51 -0
  25. package/dist/nile-badge/nile-badge.esm.js +12 -0
  26. package/dist/nile-switcher/nile-switcher.cjs.js +1 -1
  27. package/dist/nile-switcher/nile-switcher.cjs.js.map +1 -1
  28. package/dist/nile-switcher/nile-switcher.esm.js +14 -14
  29. package/dist/src/nile-badge/index.d.ts +1 -37
  30. package/dist/src/nile-badge/index.js +1 -120
  31. package/dist/src/nile-badge/index.js.map +1 -1
  32. package/dist/src/nile-badge/nile-badge.css.d.ts +12 -0
  33. package/dist/src/nile-badge/nile-badge.css.js +63 -0
  34. package/dist/src/nile-badge/nile-badge.css.js.map +1 -0
  35. package/dist/src/nile-badge/nile-badge.d.ts +45 -0
  36. package/dist/src/nile-badge/nile-badge.js +80 -0
  37. package/dist/src/nile-badge/nile-badge.js.map +1 -0
  38. package/dist/src/nile-switcher/nile-switcher.d.ts +2 -0
  39. package/dist/src/nile-switcher/nile-switcher.js +1 -0
  40. package/dist/src/nile-switcher/nile-switcher.js.map +1 -1
  41. package/dist/tsconfig.tsbuildinfo +1 -1
  42. package/package.json +1 -1
  43. package/src/nile-badge/index.ts +1 -119
  44. package/src/nile-badge/nile-badge.css.ts +64 -0
  45. package/src/nile-badge/nile-badge.ts +94 -0
  46. package/src/nile-switcher/nile-switcher.ts +3 -0
@@ -1,37 +1 @@
1
- import { LitElement } from 'lit';
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
- import { __decorate } from "tslib";
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":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD;;;;;;GAMG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAqDL;;WAEG;QAEH,SAAI,GAAG,CAAC,CAAC;QAET;;WAEG;QAEH,SAAI,GAAW,EAAE,CAAC;QAElB;;WAEG;QAEH,WAAM,GAAY,KAAK,CAAC;QAQxB;;WAEG;QAEH,SAAI,GAAG,GAAG,CAAC;IAgBb,CAAC;IA1BC,IAAI,cAAc;QAChB,OAAO;YACL,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC;IACJ,CAAC;IAQD,eAAe,CAAC,QAAgB;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,QAAQ,GAAG,CAAC,CAAC;QAC1D,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC5B,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAA;4BACa,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC;wCACjB,IAAI,CAAC,IAAI;;KAE5C,CAAC;IACJ,CAAC;;AA/Fe,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkD3B,CAAC;AAMF;IADC,QAAQ,EAAE;uCACF;AAMT;IADC,QAAQ,EAAE;uCACO;AAMlB;IADC,QAAQ,EAAE;yCACa;AAYxB;IADC,QAAQ,EAAE;uCACA;AAjFA,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAiGrB;SAjGY,SAAS;AAyGtB,iCAAiC;AACjC,qEAAqE;AACrE,UAAU","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n/**\n * An nile-badge element.\n *\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n@customElement('nile-badge')\nexport class NileBadge extends LitElement {\n static override styles = css`\n :host {\n display: block;\n }\n .nds-badge {\n width: 24px;\n height: 24px;\n border-radius: 9rem;\n font-size: 14px;\n justify-content: space-around;\n font-weight: bold;\n display: flex;\n background-color: rgb(221, 221, 221);\n flex-wrap: nowrap;\n align-items: center;\n color: var(--nile-colors-dark-900);\n }\n\n .nds-badge:hover {\n background: rgba(0, 94, 166, 0.1);\n }\n \n .nds-badge__link {\n font-family: var(--nile-font-family-sans-serif);\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 1;\n letter-spacing: 0.2px;\n text-decoration: none;\n font-size: 12px;\n }\n\n .nds-badge__link:hover {\n color: var(--nile-colors-dark-900);\n }\n \n .nds-badge--active {\n background-color: var(--nile-colors-primary-700);\n color: var(--nile-colors-neutral-100);\n }\n\n .nds-badge--active:hover {\n background-color: var(---nile-colors-primary-700);\n }\n\n .nds-badge__icon {\n margin-bottom: 0;\n height: 14px;\n }\n `;\n\n /**\n * Button Lab\n */\n @property()\n name = 0;\n\n /**\n * Button Lab\n */\n @property()\n icon: string = '';\n\n /**\n * Button Lab\n */\n @property()\n active: boolean = false;\n\n get buttonClassMap() {\n return {\n 'nds-badge--active': this.active,\n };\n }\n\n /**\n * Button Lab\n */\n @property()\n href = '/';\n\n _hasSlotContent(slotName: string) {\n const slot = this.querySelector(`slot[name=${slotName}]`);\n console.log(slot, 'slot');\n }\n\n override render() {\n const { name, icon, href } = this;\n const hrefPath = `/${href}`;\n return html`\n <a class=\"nds-badge ${classMap(this.buttonClassMap)}\">\n <span class=\"nds-badge__link\">${this.name}</span>\n </a>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-badge': NileBadge;\n }\n}\n\n// <span class=\"nds-badge__icon\">\n// <nile-icon name=\"${this.icon}\" size=\"14\" color=\"#000\"></nile-icon>\n// </span>\n"]}
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":"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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 */\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 }\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"]}
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"]}