@nuralyui/button 0.0.10 → 0.0.11

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 (43) hide show
  1. package/demo/{hy-buttons-demo.d.ts → nr-buttons-demo.d.ts} +3 -3
  2. package/demo/nr-buttons-demo.d.ts.map +1 -0
  3. package/demo/nr-buttons-demo.js +211 -0
  4. package/demo/nr-buttons-demo.js.map +1 -0
  5. package/index.d.ts +1 -1
  6. package/index.js +1 -1
  7. package/index.js.map +1 -1
  8. package/nr-button.component.d.ts +36 -0
  9. package/nr-button.component.d.ts.map +1 -0
  10. package/{hy-button.component.js → nr-button.component.js} +45 -19
  11. package/nr-button.component.js.map +1 -0
  12. package/nr-button.style.d.ts +19 -0
  13. package/nr-button.style.d.ts.map +1 -0
  14. package/{hy-button.style.js → nr-button.style.js} +220 -20
  15. package/nr-button.style.js.map +1 -0
  16. package/{hy-button.constants.d.ts → nr-button.types.d.ts} +2 -2
  17. package/nr-button.types.d.ts.map +1 -0
  18. package/nr-button.types.js +2 -0
  19. package/nr-button.types.js.map +1 -0
  20. package/package.json +11 -3
  21. package/react.d.ts +2 -2
  22. package/react.d.ts.map +1 -1
  23. package/react.js +4 -4
  24. package/react.js.map +1 -1
  25. package/test/nr-button_test.d.ts +2 -0
  26. package/test/nr-button_test.d.ts.map +1 -0
  27. package/test/{hy-button_test.js → nr-button_test.js} +15 -15
  28. package/test/nr-button_test.js.map +1 -0
  29. package/demo/hy-buttons-demo.d.ts.map +0 -1
  30. package/demo/hy-buttons-demo.js +0 -211
  31. package/demo/hy-buttons-demo.js.map +0 -1
  32. package/hy-button.component.d.ts +0 -21
  33. package/hy-button.component.d.ts.map +0 -1
  34. package/hy-button.component.js.map +0 -1
  35. package/hy-button.constants.d.ts.map +0 -1
  36. package/hy-button.constants.js +0 -2
  37. package/hy-button.constants.js.map +0 -1
  38. package/hy-button.style.d.ts +0 -2
  39. package/hy-button.style.d.ts.map +0 -1
  40. package/hy-button.style.js.map +0 -1
  41. package/test/hy-button_test.d.ts +0 -2
  42. package/test/hy-button_test.d.ts.map +0 -1
  43. package/test/hy-button_test.js.map +0 -1
package/react.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { createComponent } from '@lit-labs/react';
2
2
  import * as React from 'react';
3
- import { HyButtonElement } from './hy-button.component.js';
4
- export const HyButton = createComponent({
5
- tagName: 'hy-button',
6
- elementClass: HyButtonElement,
3
+ import { NrButtonElement } from './nr-button.component.js';
4
+ export const NrButton = createComponent({
5
+ tagName: 'nr-button',
6
+ elementClass: NrButtonElement,
7
7
  react: React,
8
8
  events: {
9
9
  click: 'click',
package/react.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,eAAe,EAAC,MAAM,0BAA0B,CAAC;AACzD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {HyButtonElement} from './hy-button.component.js';\nexport const HyButton = createComponent({\n tagName: 'hy-button',\n elementClass: HyButtonElement,\n react: React,\n events: {\n click: 'click',\n },\n});\n"]}
1
+ {"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;KACf;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrButtonElement } from './nr-button.component.js';\nexport const NrButton = createComponent({\n tagName: 'nr-button',\n elementClass: NrButtonElement,\n react: React,\n events: {\n click: 'click',\n },\n});\n"]}
package/test/nr-button_test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import '../nr-button.component';
2
+ //# sourceMappingURL=nr-button_test.d.ts.map
package/test/nr-button_test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nr-button_test.d.ts","sourceRoot":"","sources":["../../../../src/components/button/test/nr-button_test.ts"],"names":[],"mappings":"AAGA,OAAO,wBAAwB,CAAC"}
package/test/{hy-button_test.js → nr-button_test.js} RENAMED
@@ -8,11 +8,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
8
8
  });
9
9
  };
10
10
  import { html, fixture, expect } from '@open-wc/testing';
11
- import { EMPTY_STRING } from '../hy-button.constants.js';
12
- import '../hy-button.component';
13
- suite('HyButtonElement', () => {
11
+ import { EMPTY_STRING } from '../nr-button.types.js';
12
+ import '../nr-button.component';
13
+ suite('NrButtonElement', () => {
14
14
  test('has default properties', () => __awaiter(void 0, void 0, void 0, function* () {
15
- const el = yield fixture(html `<hy-button></hy-button>`);
15
+ const el = yield fixture(html `<nr-button></nr-button>`);
16
16
  const button = el.shadowRoot.querySelector('button');
17
17
  const icon = el.shadowRoot.querySelector('hy-icon');
18
18
  expect(el.disabled).to.be.false;
@@ -30,13 +30,13 @@ suite('HyButtonElement', () => {
30
30
  }));
31
31
  test('has a label', () => __awaiter(void 0, void 0, void 0, function* () {
32
32
  const buttonLabel = 'Test content';
33
- const el = yield fixture(html `<hy-button>${buttonLabel}</hy-button>`);
33
+ const el = yield fixture(html `<nr-button>${buttonLabel}</nr-button>`);
34
34
  const slot = el.shadowRoot.querySelector('slot');
35
35
  const assignedNode = slot.assignedNodes();
36
36
  expect(assignedNode[0].textContent).to.equal(buttonLabel);
37
37
  }));
38
38
  test('fires onClick event when clicked', () => __awaiter(void 0, void 0, void 0, function* () {
39
- const el = yield fixture(html `<hy-button></hy-button>`);
39
+ const el = yield fixture(html `<nr-button></nr-button>`);
40
40
  const button = el.shadowRoot.querySelector('button');
41
41
  let eventFired = false;
42
42
  el.addEventListener('click', () => {
@@ -46,12 +46,12 @@ suite('HyButtonElement', () => {
46
46
  expect(eventFired).to.be.true;
47
47
  }));
48
48
  test('has a disabled property on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
49
- const el = yield fixture(html `<hy-button disabled></hy-button>`);
49
+ const el = yield fixture(html `<nr-button disabled></nr-button>`);
50
50
  const button = el.shadowRoot.querySelector('button');
51
51
  expect(button.disabled).to.be.true;
52
52
  }));
53
53
  test('does not fire onClick event when disabled', () => __awaiter(void 0, void 0, void 0, function* () {
54
- const el = yield fixture(html `<hy-button disabled></hy-button>`);
54
+ const el = yield fixture(html `<nr-button disabled></nr-button>`);
55
55
  const button = el.shadowRoot.querySelector('button');
56
56
  let eventFired = false;
57
57
  el.addEventListener('click', () => {
@@ -62,30 +62,30 @@ suite('HyButtonElement', () => {
62
62
  }));
63
63
  test('renders the icon', () => __awaiter(void 0, void 0, void 0, function* () {
64
64
  const iconName = 'sample-icon';
65
- const el = yield fixture(html `<hy-button icon=${iconName}></hy-button>`);
65
+ const el = yield fixture(html `<nr-button icon=${iconName}></nr-button>`);
66
66
  const icon = el.shadowRoot.querySelector('hy-icon');
67
67
  expect(icon).to.exist;
68
68
  expect(icon).to.have.attribute('name', iconName);
69
69
  }));
70
70
  test('applies the correct classe for dashed', () => __awaiter(void 0, void 0, void 0, function* () {
71
- const el = yield fixture(html `<hy-button dashed></hy-button>`);
71
+ const el = yield fixture(html `<nr-button dashed></nr-button>`);
72
72
  const button = el.shadowRoot.querySelector('button');
73
73
  expect(button).to.have.class('button-dashed');
74
74
  }));
75
75
  test('reflects the loading property as data-state on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
76
- const el = yield fixture(html `<hy-button loading></hy-button>`);
76
+ const el = yield fixture(html `<nr-button loading></nr-button>`);
77
77
  const button = el.shadowRoot.querySelector('button');
78
78
  expect(button).to.have.attribute('data-state', 'loading');
79
79
  }));
80
80
  test('reflects the size property as data-size on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
81
- const el = yield fixture(html `<hy-button size=${"Large" /* ButtonSize.Large */}></hy-button>`);
81
+ const el = yield fixture(html `<nr-button size=${"large" /* ButtonSize.Large */}></nr-button>`);
82
82
  const button = el.shadowRoot.querySelector('button');
83
- expect(button).to.have.attribute('data-size', "Large" /* ButtonSize.Large */);
83
+ expect(button).to.have.attribute('data-size', "large" /* ButtonSize.Large */);
84
84
  }));
85
85
  test('reflects the type property as data-type on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
86
- const el = yield fixture(html `<hy-button type=${"primary" /* ButtonType.Primary */}></hy-button>`);
86
+ const el = yield fixture(html `<nr-button type=${"primary" /* ButtonType.Primary */}></nr-button>`);
87
87
  const button = el.shadowRoot.querySelector('button');
88
88
  expect(button).to.have.attribute('data-type', "primary" /* ButtonType.Primary */);
89
89
  }));
90
90
  });
91
- //# sourceMappingURL=hy-button_test.js.map
91
+ //# sourceMappingURL=nr-button_test.js.map
package/test/nr-button_test.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nr-button_test.js","sourceRoot":"","sources":["../../../../src/components/button/test/nr-button_test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect } from '@open-wc/testing';\nimport { NrButtonElement } from '../nr-button.component';\nimport { ButtonSize, ButtonType, EMPTY_STRING } from '../nr-button.types.js';\nimport '../nr-button.component';\n\nsuite('NrButtonElement', () => {\n test('has default properties', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button></nr-button>`);\n const button: HTMLButtonElement = el.shadowRoot!.querySelector('button')!;\n const icon = el.shadowRoot!.querySelector('hy-icon');\n\n expect(el.disabled).to.be.false;\n expect(el.loading).to.be.false;\n expect(el.size).to.equal(EMPTY_STRING);\n expect(el.type).to.equal(ButtonType.Default);\n expect(el.dashed).to.be.false;\n expect(el.icon).to.equal(EMPTY_STRING);\n expect(button).to.not.have.class('button-dashed');\n expect(button).to.not.have.attribute('data-size');\n expect(button).to.not.have.attribute('data-state');\n expect(button).to.have.attribute('data-type', ButtonType.Default);\n expect(button.disabled).to.be.false;\n expect(icon).to.not.exist;\n });\n\n test('has a label', async () => {\n const buttonLabel = 'Test content';\n const el: NrButtonElement = await fixture(html`<nr-button>${buttonLabel}</nr-button>`);\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(assignedNode[0].textContent).to.equal(buttonLabel);\n });\n test('fires onClick event when clicked', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n let eventFired = false;\n el.addEventListener('click', () => {\n eventFired = true;\n });\n button.click();\n expect(eventFired).to.be.true;\n });\n\n test('has a disabled property on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button disabled></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button.disabled).to.be.true;\n });\n test('does not fire onClick event when disabled', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button disabled></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n let eventFired = false;\n el.addEventListener('click', () => {\n eventFired = true;\n });\n button.click();\n expect(eventFired).to.be.false;\n });\n\n test('renders the icon', async () => {\n const iconName = 'sample-icon';\n const el: NrButtonElement = await fixture(html`<nr-button icon=${iconName}></nr-button>`);\n const icon = el.shadowRoot!.querySelector('hy-icon');\n expect(icon).to.exist;\n expect(icon).to.have.attribute('name', iconName);\n });\n\n test('applies the correct classe for dashed', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button dashed></nr-button>`);\n const button = el.shadowRoot!.querySelector('button');\n expect(button).to.have.class('button-dashed');\n });\n test('reflects the loading property as data-state on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button loading></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-state', 'loading');\n });\n\n test('reflects the size property as data-size on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button size=${ButtonSize.Large}></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-size', ButtonSize.Large);\n });\n\n test('reflects the type property as data-type on the button element', async () => {\n const el: NrButtonElement = await fixture(html`<nr-button type=${ButtonType.Primary}></nr-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-type', ButtonType.Primary);\n });\n});\n"]}
package/demo/hy-buttons-demo.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-buttons-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/button/demo/hy-buttons-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AACvC,qBACa,mBAAoB,SAAQ,UAAU;IACxC,MAAM;CA6LhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,mBAAmB,CAAC;KACxC;CACF"}
package/demo/hy-buttons-demo.js DELETED
@@ -1,211 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Google Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
7
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
8
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
9
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
10
- return c > 3 && r && Object.defineProperty(target, key, r), r;
11
- };
12
- import { LitElement, html } from 'lit';
13
- import { customElement } from 'lit/decorators.js';
14
- import '../hy-button.component';
15
- import '../../../helpers/ThemeHandler';
16
- let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
17
- render() {
18
- return html `
19
- <theme-handler>
20
- <h1>Sizes</h1>
21
- <br />
22
- <hy-button> Default Button</hy-button>
23
- <hy-button size="small">Small Button</hy-button>
24
- <hy-button size="large">Large Button</hy-button>
25
- <br /><br />
26
- <hy-button .icon="${['search']}"> Default Button</hy-button>
27
- <hy-button .icon="${['search']}" size="small">Small Button</hy-button>
28
- <hy-button .icon="${['search']}" size="large">Large Button</hy-button>
29
-
30
- <br /><br />
31
- <hy-button .icon="${['search']}"></hy-button>
32
- <hy-button .icon="${['search']}" size="small"></hy-button>
33
- <hy-button .icon="${['search']}" size="large"></hy-button>
34
- <br /><br />
35
-
36
- <h1>Types</h1>
37
- <br /><br />
38
-
39
- <table>
40
- <tbody>
41
- <tr>
42
- <td></td>
43
- <td>Primary</td>
44
- <td>Secondary</td>
45
- <td>Ghost</td>
46
- <td>Danger</td>
47
- <td>Default</td>
48
- </tr>
49
- <tr>
50
- <td>Default</td>
51
- <td>
52
- <hy-button type="primary"><span>Primary Button</span></hy-button>
53
- </td>
54
- <td>
55
- <hy-button type="secondary"><span>Secondary Button </span></hy-button>
56
- </td>
57
- <td>
58
- <hy-button type="ghost"> <span>Ghost button</span></hy-button>
59
- </td>
60
- <td>
61
- <hy-button type="danger"><span>Danger Button </span></hy-button>
62
- </td>
63
- <td>
64
- <hy-button><span>Default Button</span></hy-button>
65
- </td>
66
- </tr>
67
- <tr>
68
- <td>Dashed</td>
69
- <td>
70
- <hy-button type="primary" ?dashed=${true}><span>Primary Button text only</span></hy-button>
71
- </td>
72
- <td>
73
- <hy-button type="secondary" ?dashed=${true}><span>Secondary dashed</span></hy-button>
74
- </td>
75
- <td>
76
- <hy-button type="ghost" ?dashed=${true}><span>Ghost dashed</span></hy-button>
77
- </td>
78
- <td>
79
- <hy-button type="danger" ?dashed=${true}><span>Danger dashed</span></hy-button>
80
- </td>
81
- <td>
82
- <hy-button ?dashed=${true}><span>Default dashed</span></hy-button>
83
- </td>
84
- </tr>
85
- <tr>
86
- <td>Loading</td>
87
- <td>
88
- <hy-button type="primary" loading><span>Primary Button loading</span></hy-button>
89
- </td>
90
- <td>
91
- <hy-button type="secondary" loading><span>Secondary button loading </span></hy-button>
92
- </td>
93
- <td>
94
- <hy-button type="ghost" loading><span>Ghost button loading</span></hy-button>
95
- </td>
96
- <td>
97
- <hy-button type="danger" loading><span>Danger button loading</span></hy-button>
98
- </td>
99
- <td>
100
- <hy-button loading><span>Default button loading</span></hy-button>
101
- </td>
102
- </tr>
103
- <tr>
104
- <td>Disabled</td>
105
- <td>
106
- <hy-button type="primary" disabled><span>Primary Button disabled</span></hy-button>
107
- </td>
108
- <td>
109
- <hy-button type="secondary" disabled><span>Secondary Button disabled</span></hy-button>
110
- </td>
111
- <td>
112
- <hy-button type="ghost" disabled> <span>Ghost button disabled</span></hy-button>
113
- </td>
114
- <td>
115
- <hy-button type="danger" disabled><span>Danger Button disabled</span></hy-button>
116
- </td>
117
- <td>
118
- <hy-button disabled><span>Default Button disabled</span></hy-button>
119
- </td>
120
- </tr>
121
- <tr>
122
- <td>Icon with text default: icon left</td>
123
- <td>
124
- <hy-button type="primary" .icon="${['search']}"><span> Primary button icon+text</span></hy-button>
125
- </td>
126
- <td>
127
- <hy-button type="secondary" .icon="${['search']}"><span> Secondary button icon+text</span></hy-button>
128
- </td>
129
- <td>
130
- <hy-button type="ghost" .icon="${['search']}"><span> Ghost button icon+text</span></hy-button>
131
- </td>
132
- <td>
133
- <hy-button type="danger" .icon="${['search']}"><span> Danger button icon+text</span></hy-button>
134
- </td>
135
- <td>
136
- <hy-button .icon="${['search']}"><span> Default button icon+text</span></hy-button>
137
- </td>
138
- </tr>
139
- <tr>
140
- <td>Icon with text: icon right</td>
141
- <td>
142
- <hy-button type="primary" .icon="${['search']}" iconPosition="right"
143
- ><span> Primary button icon+text</span></hy-button
144
- >
145
- </td>
146
- <td>
147
- <hy-button type="secondary" .icon="${['search']}" iconPosition="right"
148
- ><span> Secondary button icon+text</span></hy-button
149
- >
150
- </td>
151
- <td>
152
- <hy-button type="ghost" .icon="${['search']}" iconPosition="right"
153
- ><span> Ghost button icon+text</span></hy-button
154
- >
155
- </td>
156
- <td>
157
- <hy-button type="danger" .icon="${['search']}" iconPosition="right"
158
- ><span> Danger button icon+text</span></hy-button
159
- >
160
- </td>
161
- <td>
162
- <hy-button .icon="${['search']}" iconPosition="right"><span> Default button icon+text</span></hy-button>
163
- </td>
164
- </tr>
165
- <tr>
166
- <td>Icon with text: icon both side</td>
167
- <td>
168
- <hy-button type="primary" .icon="${['search', 'bomb']}" iconPosition="right"
169
- ><span> Primary button icon+text</span></hy-button
170
- >
171
- </td>
172
- <td>
173
- <hy-button type="secondary" .icon="${['search', 'bomb']}" iconPosition="right"
174
- ><span> Secondary button icon+text</span></hy-button
175
- >
176
- </td>
177
- <td>
178
- <hy-button type="ghost" .icon="${['search', 'bomb']}" iconPosition="right"
179
- ><span> Ghost button icon+text</span></hy-button
180
- >
181
- </td>
182
- <td>
183
- <hy-button type="danger" .icon="${['search', 'bomb']}" iconPosition="right"
184
- ><span> Danger button icon+text</span></hy-button
185
- >
186
- </td>
187
- <td>
188
- <hy-button .icon="${['search', 'bomb']}" iconPosition="right"
189
- ><span> Default button icon+text</span></hy-button
190
- >
191
- </td>
192
- </tr>
193
- <tr>
194
- <td>Icon only</td>
195
- <td><hy-button type="primary" .icon="${['search']}"></hy-button></td>
196
- <td><hy-button type="secondary" .icon="${['search']}"></hy-button></td>
197
- <td><hy-button type="ghost" .icon="${['search']}"></hy-button></td>
198
- <td><hy-button type="danger" .icon="${['search']}"></hy-button></td>
199
- <td><hy-button .icon="${['search']}"></hy-button></td>
200
- </tr>
201
- </tbody>
202
- </table>
203
- </theme-handler>
204
- `;
205
- }
206
- };
207
- ElButtonDemoElement = __decorate([
208
- customElement('hy-buttons-demo')
209
- ], ElButtonDemoElement);
210
- export { ElButtonDemoElement };
211
- //# sourceMappingURL=hy-buttons-demo.js.map
package/demo/hy-buttons-demo.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-buttons-demo.js","sourceRoot":"","sources":["../../../../src/components/button/demo/hy-buttons-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,wBAAwB,CAAC;AAChC,OAAO,+BAA+B,CAAC;AAEvC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IACxC,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;4BAQa,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;;;4BAGV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAqCc,IAAI;;;sDAGF,IAAI;;;kDAGR,IAAI;;;mDAGH,IAAI;;;qCAGlB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA0CU,CAAC,QAAQ,CAAC;;;qDAGR,CAAC,QAAQ,CAAC;;;iDAGd,CAAC,QAAQ,CAAC;;;kDAGT,CAAC,QAAQ,CAAC;;;oCAGxB,CAAC,QAAQ,CAAC;;;;;;mDAMK,CAAC,QAAQ,CAAC;;;;;qDAKR,CAAC,QAAQ,CAAC;;;;;iDAKd,CAAC,QAAQ,CAAC;;;;;kDAKT,CAAC,QAAQ,CAAC;;;;;oCAKxB,CAAC,QAAQ,CAAC;;;;;;mDAMK,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;qDAKhB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;iDAKtB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;kDAKjB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;oCAKhC,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;;;qDAOD,CAAC,QAAQ,CAAC;uDACR,CAAC,QAAQ,CAAC;mDACd,CAAC,QAAQ,CAAC;oDACT,CAAC,QAAQ,CAAC;sCACxB,CAAC,QAAQ,CAAC;;;;;KAK3C,CAAC;IACJ,CAAC;CACF,CAAA;AA9LY,mBAAmB;IAD/B,aAAa,CAAC,iBAAiB,CAAC;GACpB,mBAAmB,CA8L/B;SA9LY,mBAAmB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport '../hy-button.component';\nimport '../../../helpers/ThemeHandler';\n@customElement('hy-buttons-demo')\nexport class ElButtonDemoElement extends LitElement {\n override render() {\n return html`\n <theme-handler>\n <h1>Sizes</h1>\n <br />\n <hy-button> Default Button</hy-button>\n <hy-button size=\"small\">Small Button</hy-button>\n <hy-button size=\"large\">Large Button</hy-button>\n <br /><br />\n <hy-button .icon=\"${['search']}\"> Default Button</hy-button>\n <hy-button .icon=\"${['search']}\" size=\"small\">Small Button</hy-button>\n <hy-button .icon=\"${['search']}\" size=\"large\">Large Button</hy-button>\n\n <br /><br />\n <hy-button .icon=\"${['search']}\"></hy-button>\n <hy-button .icon=\"${['search']}\" size=\"small\"></hy-button>\n <hy-button .icon=\"${['search']}\" size=\"large\"></hy-button>\n <br /><br />\n\n <h1>Types</h1>\n <br /><br />\n\n <table>\n <tbody>\n <tr>\n <td></td>\n <td>Primary</td>\n <td>Secondary</td>\n <td>Ghost</td>\n <td>Danger</td>\n <td>Default</td>\n </tr>\n <tr>\n <td>Default</td>\n <td>\n <hy-button type=\"primary\"><span>Primary Button</span></hy-button>\n </td>\n <td>\n <hy-button type=\"secondary\"><span>Secondary Button </span></hy-button>\n </td>\n <td>\n <hy-button type=\"ghost\"> <span>Ghost button</span></hy-button>\n </td>\n <td>\n <hy-button type=\"danger\"><span>Danger Button </span></hy-button>\n </td>\n <td>\n <hy-button><span>Default Button</span></hy-button>\n </td>\n </tr>\n <tr>\n <td>Dashed</td>\n <td>\n <hy-button type=\"primary\" ?dashed=${true}><span>Primary Button text only</span></hy-button>\n </td>\n <td>\n <hy-button type=\"secondary\" ?dashed=${true}><span>Secondary dashed</span></hy-button>\n </td>\n <td>\n <hy-button type=\"ghost\" ?dashed=${true}><span>Ghost dashed</span></hy-button>\n </td>\n <td>\n <hy-button type=\"danger\" ?dashed=${true}><span>Danger dashed</span></hy-button>\n </td>\n <td>\n <hy-button ?dashed=${true}><span>Default dashed</span></hy-button>\n </td>\n </tr>\n <tr>\n <td>Loading</td>\n <td>\n <hy-button type=\"primary\" loading><span>Primary Button loading</span></hy-button>\n </td>\n <td>\n <hy-button type=\"secondary\" loading><span>Secondary button loading </span></hy-button>\n </td>\n <td>\n <hy-button type=\"ghost\" loading><span>Ghost button loading</span></hy-button>\n </td>\n <td>\n <hy-button type=\"danger\" loading><span>Danger button loading</span></hy-button>\n </td>\n <td>\n <hy-button loading><span>Default button loading</span></hy-button>\n </td>\n </tr>\n <tr>\n <td>Disabled</td>\n <td>\n <hy-button type=\"primary\" disabled><span>Primary Button disabled</span></hy-button>\n </td>\n <td>\n <hy-button type=\"secondary\" disabled><span>Secondary Button disabled</span></hy-button>\n </td>\n <td>\n <hy-button type=\"ghost\" disabled> <span>Ghost button disabled</span></hy-button>\n </td>\n <td>\n <hy-button type=\"danger\" disabled><span>Danger Button disabled</span></hy-button>\n </td>\n <td>\n <hy-button disabled><span>Default Button disabled</span></hy-button>\n </td>\n </tr>\n <tr>\n <td>Icon with text default: icon left</td>\n <td>\n <hy-button type=\"primary\" .icon=\"${['search']}\"><span> Primary button icon+text</span></hy-button>\n </td>\n <td>\n <hy-button type=\"secondary\" .icon=\"${['search']}\"><span> Secondary button icon+text</span></hy-button>\n </td>\n <td>\n <hy-button type=\"ghost\" .icon=\"${['search']}\"><span> Ghost button icon+text</span></hy-button>\n </td>\n <td>\n <hy-button type=\"danger\" .icon=\"${['search']}\"><span> Danger button icon+text</span></hy-button>\n </td>\n <td>\n <hy-button .icon=\"${['search']}\"><span> Default button icon+text</span></hy-button>\n </td>\n </tr>\n <tr>\n <td>Icon with text: icon right</td>\n <td>\n <hy-button type=\"primary\" .icon=\"${['search']}\" iconPosition=\"right\"\n ><span> Primary button icon+text</span></hy-button\n >\n </td>\n <td>\n <hy-button type=\"secondary\" .icon=\"${['search']}\" iconPosition=\"right\"\n ><span> Secondary button icon+text</span></hy-button\n >\n </td>\n <td>\n <hy-button type=\"ghost\" .icon=\"${['search']}\" iconPosition=\"right\"\n ><span> Ghost button icon+text</span></hy-button\n >\n </td>\n <td>\n <hy-button type=\"danger\" .icon=\"${['search']}\" iconPosition=\"right\"\n ><span> Danger button icon+text</span></hy-button\n >\n </td>\n <td>\n <hy-button .icon=\"${['search']}\" iconPosition=\"right\"><span> Default button icon+text</span></hy-button>\n </td>\n </tr>\n <tr>\n <td>Icon with text: icon both side</td>\n <td>\n <hy-button type=\"primary\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n ><span> Primary button icon+text</span></hy-button\n >\n </td>\n <td>\n <hy-button type=\"secondary\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n ><span> Secondary button icon+text</span></hy-button\n >\n </td>\n <td>\n <hy-button type=\"ghost\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n ><span> Ghost button icon+text</span></hy-button\n >\n </td>\n <td>\n <hy-button type=\"danger\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n ><span> Danger button icon+text</span></hy-button\n >\n </td>\n <td>\n <hy-button .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n ><span> Default button icon+text</span></hy-button\n >\n </td>\n </tr>\n <tr>\n <td>Icon only</td>\n <td><hy-button type=\"primary\" .icon=\"${['search']}\"></hy-button></td>\n <td><hy-button type=\"secondary\" .icon=\"${['search']}\"></hy-button></td>\n <td><hy-button type=\"ghost\" .icon=\"${['search']}\"></hy-button></td>\n <td><hy-button type=\"danger\" .icon=\"${['search']}\"></hy-button></td>\n <td><hy-button .icon=\"${['search']}\"></hy-button></td>\n </tr>\n </tbody>\n </table>\n </theme-handler>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-buttons-demo': ElButtonDemoElement;\n }\n}\n"]}
package/hy-button.component.d.ts DELETED
@@ -1,21 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2023 Nuraly, Laabidi Aymen
4
- * SPDX-License-Identifier: MIT
5
- */
6
- import { LitElement } from 'lit';
7
- import { IconPosition } from './hy-button.constants.js';
8
- declare const HyButtonElement_base: (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & typeof LitElement;
9
- export declare class HyButtonElement extends HyButtonElement_base {
10
- disabled: boolean;
11
- loading: boolean;
12
- size: string;
13
- type: String;
14
- dashed: boolean;
15
- icon: string[];
16
- iconPosition: IconPosition;
17
- render(): import("lit").TemplateResult<1>;
18
- static styles: import("lit").CSSResult[];
19
- }
20
- export {};
21
- //# sourceMappingURL=hy-button.component.d.ts.map
package/hy-button.component.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/hy-button.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAO,UAAU,EAAU,MAAM,KAAK,CAAC;AAE9C,OAAO,EAA2B,YAAY,EAAC,MAAM,0BAA0B,CAAC;;AAIhF,qBACa,eAAgB,SAAQ,oBAA2B;IAE9D,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,IAAI,SAAgB;IAGpB,IAAI,SAAgC;IAGpC,MAAM,UAAS;IAGf,IAAI,EAAG,MAAM,EAAE,CAAC;IAGhB,YAAY,eAAqB;IAExB,MAAM;IAkBf,OAAgB,MAAM,4BAAU;CACjC"}
package/hy-button.component.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-button.component.js","sourceRoot":"","sources":["../../../src/components/button/hy-button.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAa,YAAY,EAAe,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAC;AAG5D,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,eAAe,CAAC,UAAU,CAAC;IAAhE;;QAEE,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAGhB,SAAI,GAAG,YAAY,CAAC;QAGpB,SAAI,GAAG,kCAA4B,CAAC;QAGpC,WAAM,GAAG,KAAK,CAAC;QAMf,iBAAY,kCAAqB;IAqBnC,CAAC;IAnBU,MAAM;;QACb,OAAO,IAAI,CAAA;;qBAEM,IAAI,CAAC,QAAQ;qBACb,IAAI,CAAC,IAAI;oBACV,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;sBAC7B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;sBAClC,IAAI,CAAC,YAAY;iBACtB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;;;YAGvC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EAAC,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;;YAE7E,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,KAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;;;KAGzF,CAAC;IACJ,CAAC;CAEF,CAAA;AADiB,sBAAM,GAAG,MAAO,CAAA;AAtChC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDACT;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDACV;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACL;AAGpB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACW;AAGpC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;+CACX;AAGf;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;6CACR;AAGhB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;qDACO;AApBtB,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAyC3B;SAzCY,eAAe","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {ButtonType, EMPTY_STRING, IconPosition} from './hy-button.constants.js';\nimport {styles} from './hy-button.style.js';\nimport {ThemeAwareMixin} from '../../shared/theme-mixin.js';\n\n@customElement('hy-button')\nexport class HyButtonElement extends ThemeAwareMixin(LitElement) {\n @property({type: Boolean})\n disabled = false;\n\n @property({type: Boolean})\n loading = false;\n\n @property({type: String})\n size = EMPTY_STRING;\n\n @property({type: String})\n type = ButtonType.Default as String;\n\n @property({type: Boolean})\n dashed = false;\n\n @property({type: Array})\n icon!: string[];\n\n @property({reflect: true})\n iconPosition = IconPosition.Left;\n\n override render() {\n return html`\n <button\n ?disabled=\"${this.disabled}\"\n data-type=\"${this.type}\"\n data-size=${this.size ? this.size : nothing}\n data-state=\"${this.loading ? 'loading' : nothing}\"\n data-theme=\"${this.currentTheme}\"\n class=\"${this.dashed ? 'button-dashed' : ''}\"\n >\n <span id=\"container\">\n ${this.icon?.length ? html` <hy-icon name=${this.icon[0]}></hy-icon>` : nothing}\n <slot id=\"slot\"></slot>\n ${this.icon?.length == 2 ? html` <hy-icon name=${this.icon[1]}></hy-icon>` : nothing}\n </span>\n </button>\n `;\n }\n static override styles = styles;\n}\n"]}
package/hy-button.constants.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-button.constants.d.ts","sourceRoot":"","sources":["../../../src/components/button/hy-button.constants.ts"],"names":[],"mappings":"AAAA,0BAAkB,UAAU;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,0BAAkB,YAAY;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AACD,eAAO,MAAM,YAAY,KAAK,CAAC"}
package/hy-button.constants.js DELETED
@@ -1,2 +0,0 @@
1
- export const EMPTY_STRING = '';
2
- //# sourceMappingURL=hy-button.constants.js.map
package/hy-button.constants.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-button.constants.js","sourceRoot":"","sources":["../../../src/components/button/hy-button.constants.ts"],"names":[],"mappings":"AAkBA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum ButtonType {\n Primary = 'primary',\n Secondary = 'secondary',\n Danger = 'danger',\n Ghost = 'ghost',\n Default = 'default',\n}\n\nexport const enum ButtonSize {\n Small = 'small',\n Default = 'default',\n Large = 'Large',\n}\n\nexport const enum IconPosition {\n Left = 'left',\n Right = 'right',\n}\nexport const EMPTY_STRING = '';\n"]}
package/hy-button.style.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const styles: import("lit").CSSResult[];
2
- //# sourceMappingURL=hy-button.style.d.ts.map
package/hy-button.style.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-button.style.d.ts","sourceRoot":"","sources":["../../../src/components/button/hy-button.style.ts"],"names":[],"mappings":"AAoYA,eAAO,MAAM,MAAM,2BAAiB,CAAC"}
package/hy-button.style.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-button.style.js","sourceRoot":"","sources":["../../../src/components/button/hy-button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgYvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst buttonStyles = css`\n #container {\n display: flex;\n justify-content: center;\n align-items: center;\n width:100%;\n height:100%;\n }\n\n :host([iconPosition='right']) #container {\n flex-direction: row-reverse;\n }\n\n hy-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2px;\n }\n\n button {\n height: var(--hybrid-button-height,var(--hybrid-button-local-height));\n width: var(--hybrid-button-width,var(--hybrid-button-local-width));\n border-left: var(--hybrid-button-border-left,var(--hybrid-button-local-border-left));\n border-right: var(--hybrid-button-border-right,var(--hybrid-button-local-border-right));\n border-top: var(--hybrid-button-border-top,var(--hybrid-button-local-border-top));\n border-bottom: var(--hybrid-button-border-bottom,var(--hybrid-button-local-border-bottom));\n border-top-left-radius:var(--hybrid-button-border-top-left-radius,var(--hybrid-button-local-border-top-left-radius)) ;\n border-top-right-radius: var(--hybrid-button-border-top-right-radius,var(--hybrid-button-local-border-top-right-radius));\n border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius,var(--hybrid-button-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius,var(--hybrid-button-local-border-bottom-right-radius));\n background-color: var(--hybrid-button-background-color,var(--hybrid-button-local-background-color));\n color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n font-weight: var(--hybrid-button-font-weight,var(--hybrid-button-local-font-weight));\n text-transform: var(--hybrid-button-text-transform,var(--hybrid-button-local-text-transform));\n padding-top: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));\n padding-bottom: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n }\n button hy-icon {\n --hybrid-icon-color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n --hybrid-icon-width: var(--hybrid-button-icon-width,var(--hybrid-button-local-icon-width));\n --hybrid-icon-height: var(--hybrid-button-icon-height,var(--hybrid-button-local-icon-height));\n\n }\n\n button:hover:not(:disabled) {\n cursor: pointer;\n border-color: var(--hybrid-button-hover-border-color,var(--hybrid-button-local-hover-border-color));\n background-color: var(--hybrid-button-hover-background-color,var(--hybrid-button-local-hover-background-color));\n color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n }\n button:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n }\n\n button:active:not(:disabled) {\n outline: none;\n border-color: var(--hybrid-button-active-border-color,var(--hybrid-button-local-active-border-color));\n color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n }\n button:active:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n }\n\n button:disabled {\n cursor: auto;\n background-color: var(--hybrid-button-disabled-background-color,var(--hybrid-button-local-disabled-background-color));\n color: var(--hybrid-button-disabled-text-color,var(--hybrid-button-local-disabled-text-color));\n border-color: var(--hybrid-button-disabled-border-color,var(--hybrid-button-local-disabled-border-color));\n }\n\n button[data-size='small'] {\n padding-top: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n padding-bottom: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n padding-right: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n padding-left: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n font-size: var(--hybrid-small-button-font-size,var(--hybrid-small-button-local-font-size));\n }\n\n button[data-size='large'] {\n padding-top: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n padding-bottom: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n padding-right: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n padding-left: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n font-size: var(--hybrid-large-button-font-size,var(--hybrid-large-button-local-font-size));\n }\n\n button[data-state='loading'] {\n opacity: 0.5;\n }\n button[data-type='danger'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger'] {\n border-color: var(--hybrid-button-danger-border-color,var(--hybrid-button-local-danger-border-color));\n background-color: var(--hybrid-button-danger-background-color,var(--hybrid-button-local-danger-background-color));\n color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger'].button-dashed {\n border-color: var(--hybrid-button-danger-dashed-border-color,var(--hybrid-button-local-danger-dashed-border-color));\n }\n button[data-type='danger']:disabled {\n border-color: var(--hybrid-button-danger-disabled-border-color,var(--hybrid-button-local-danger-disabled-border-color));\n background-color: var(--hybrid-button-danger-disabled-background-color,var(--hybrid-button-local-danger-disabled-background-color));\n color: var(--hybrid-button-danger-disabled-text-color,var(--hybrid-button-local-danger-disabled-text-color));\n }\n\n button[data-type='danger']:hover:not(:disabled) {\n background-color: var(--hybrid-button-danger-hover-background-color,var(--hybrid-button-local-danger-hover-background-color));\n border-color: var(--hybrid-button-danger-hover-border-color,var(--hybrid-button-local-danger-hover-border-color));\n color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n button[data-type='danger']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n }\n\n button[data-type='danger']:active:not(:disabled) {\n background-color: var(--hybrid-button-danger-active-background-color,var(--hybrid-button-local-danger-active-background-color));\n border-color: var(--hybrid-button-danger-active-border-color,var(--hybrid-button-local-danger-active-border-color));\n outline: var(--hybrid-button-danger-outline,var(--hybrid-button-local-danger-outline));\n outline-offset: var(--hybrid-button-danger-outline-offset,var(--hybrid-button-local-danger-outline-offset));\n }\n button[data-type='primary'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary'] {\n border-color: var(--hybrid-button-primary-border-color,var(--hybrid-button-local-primary-border-color));\n background-color: var(--hybrid-button-primary-background-color,var(--hybrid-button-local-primary-background-color));\n color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary'].button-dashed {\n border-color: var(--hybrid-button-primary-dashed-border-color,var(--hybrid-button-local-primary-dashed-border-color));\n }\n\n button[data-type='primary']:disabled {\n border-color: var(--hybrid-button-primary-disabled-border-color,var(--hybrid-button-local-primary-disabled-border-color));\n background-color: var(--hybrid-button-primary-disabled-background-color,var(--hybrid-button-local-primary-disabled-background-color));\n color: var(--hybrid-button-primary-disabled-text-color,var(--hybrid-button-local-primary-disabled-text-color));\n }\n\n button[data-type='primary']:hover:not(:disabled) {\n background-color: var(--hybrid-button-primary-hover-background-color,var(--hybrid-button-local-primary-hover-background-color));\n border-color: var(--hybrid-button-primary-hover-border-color,var(--hybrid-button-local-primary-hover-border-color));\n color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n }\n button[data-type='primary']:active:not(:disabled) {\n border-color: var(--hybrid-button-primary-active-border-color,var(--hybrid-button-local-primary-active-border-color));\n background-color: var(--hybrid-button-primary-active-background-color,var(--hybrid-button-local-primary-active-background-color));\n outline: var(--hybrid-button-primary-outline,var(--hybrid-button-local-primary-outline));\n outline-offset: var(--hybrid-button-primary-outline-offset,var(--hybrid-button-local-primary-outline-offset));\n }\n button[data-type='ghost'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n }\n button[data-type='ghost'] {\n background-color: var(--hybrid-button-ghost-background-color,var(--hybrid-button-local-ghost-background-color));\n color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n border-color: var(--hybrid-button-ghost-border-color,var(--hybrid-button-local-ghost-border-color));\n }\n button[data-type='ghost'].button-dashed {\n border-color: var(--hybrid-button-ghost-dashed-border-color,var(--hybrid-button-local-ghost-dashed-border-color));\n }\n button[data-type='ghost']:disabled {\n background-color: var(--hybrid-button-ghost-disabled-background-color,var(--hybrid-button-local-ghost-disabled-background-color));\n color: var(--hybrid-button-ghost-disabled-text-color,var(--hybrid-button-local-ghost-disabled-text-color));\n border-color: var(--hybrid-button-ghost-disabled-border-color,var(--hybrid-button-local-ghost-disabled-border-color));\n }\n\n button[data-type='ghost']:hover:not(:disabled) {\n background-color: var(--hybrid-button-ghost-hover-background-color,var(--hybrid-button-local-ghost-hover-background-color));\n color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n border-color: var(--hybrid-button-local-ghost-hover-border-color,var(--hybrid-button-local-ghost-hover-border-color));\n }\n button[data-type='ghost']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n }\n button[data-type='ghost']:active:not(:disabled) {\n background-color: var(--hybrid-button-ghost-active-background-color,var(--hybrid-button-local-ghost-active-background-color));\n border-color: var(--hybrid-button-ghost-active-border-color,var(--hybrid-button-local-ghost-active-border-color));\n }\n button[data-type='secondary'] hy-icon {\n --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n }\n button[data-type='secondary'] {\n background-color: var(--hybrid-button-secondary-background-color,var(--hybrid-button-local-secondary-background-color));\n color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n border-color: var(--hybrid-button-secondary-border-color,var(--hybrid-button-local-secondary-border-color));\n }\n button[data-type='secondary'].button-dashed {\n border-color: var(--hybrid-button-secondary-dashed-border-color,var(--hybrid-button-local-secondary-dashed-border-color));\n }\n button[data-type='secondary']:disabled {\n background-color: var(--hybrid-button-secondary-disabled-background-color,var(--hybrid-button-local-secondary-disabled-background-color));\n color: var(--hybrid-button-secondary-disabled-text-color,var(--hybrid-button-local-secondary-disabled-text-color));\n border-color: var(--hybrid-button-secondary-disabled-border-color,var(--hybrid-button-local-secondary-disabled-border-color));\n }\n button[data-type='secondary']:hover:not(:disabled) {\n background-color: var(--hybrid-button-secondary-hover-background-color,var(--hybrid-button-local-secondary-hover-background-color));\n color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n border-color: var(--hybrid-button-secondary-hover-border-color,var(--hybrid-button-local-secondary-hover-border-color));\n }\n button[data-type='secondary']:hover:not(:disabled) hy-icon {\n --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n }\n\n button[data-type='secondary']:active:not(:disabled) {\n background-color: var(--hybrid-button-secondary-active-background-color,var(--hybrid-button-local-secondary-active-background-color));\n border-color: var(--hybrid-button-secondary-active-border-color,var(--hybrid-button-local-secondary-active-border-color));\n outline: var(--hybrid-button-secondary-outline,var(--hybrid-button-local-secondary-outline));\n outline-offset: var(--hybrid-button-secondary-outline-offset,var(--hybrid-button-local-secondary-outline-offset));\n }\n .button-dashed {\n border-style: dashed;\n }\n :host {\n /* Default Button Style */\n --hybrid-button-local-border-top: 2px solid #d0d0d0;\n --hybrid-button-local-border-bottom: 2px solid #d0d0d0;\n --hybrid-button-local-border-left: 2px solid #d0d0d0;\n --hybrid-button-local-border-right: 2px solid #d0d0d0;\n --hybrid-button-local-border-top-left-radius: 0px;\n --hybrid-button-local-border-top-right-radius: 0px;\n --hybrid-button-local-border-bottom-left-radius: 0px;\n --hybrid-button-local-border-bottom-right-radius: 0px;\n --hybrid-button-local-background-color: #f9f9f9;\n --hybrid-button-local-text-color: #393939;\n --hybrid-button-local-hover-border-color: #1677ff;\n --hybrid-button-local-hover-color: #1677ff;\n --hybrid-button-local-font-size: 0.9rem;\n --hybrid-button-local-font-weight: normal;\n --hybrid-button-local-text-transform: none;\n --hybrid-button-local-active-border-color: #1661b1;\n --hybrid-button-local-active-color: #184d86;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n --hybrid-button-local-disabled-text-color: #8d8d8d;\n --hybrid-button-local-disabled-border-color: #bbb;\n --hybrid-button-local-height: auto;\n --hybrid-button-local-width: auto;\n --hybrid-button-local-padding-y: 0.5rem;\n --hybrid-button-local-padding-x: 0.6rem;\n --hybrid-button-local-icon-width:18px;\n --hybrid-button-local-icon-height:14px;\n\n /* Primary Button Style */\n --hybrid-button-local-primary-border-color: #0f62fe;\n --hybrid-button-local-primary-background-color: #0f62fe;\n --hybrid-button-local-primary-text-color: #ffffff;\n --hybrid-button-local-primary-outline: 1px solid white;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-hover-background-color: #0353e9;\n --hybrid-button-local-primary-hover-border-color: #0353e9;\n --hybrid-button-local-primary-active-background-color: #0f62fe;\n --hybrid-button-local-primary-active-border-color: #0f62fe;\n --hybrid-button-local-primary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-background-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-border-color: #c6c6c6;\n --hybrid-button-local-primary-dashed-border-color: #ffffff;\n\n /* Danger button style */\n --hybrid-button-local-danger-background-color: #da1e28;\n --hybrid-button-local-danger-text-color: #ffffff;\n --hybrid-button-local-danger-border-color: #da1e28;\n --hybrid-button-local-danger-outline: 1px solid white;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #0f62fe;\n --hybrid-button-local-danger-disabled-background-color: #c6c6c6;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #c6c6c6;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n\n /* Ghost button style */\n --hybrid-button-local-ghost-background-color: #ffffff;\n --hybrid-button-local-ghost-text-color: #0f62fe;\n --hybrid-button-local-ghost-border-color: #ffffff;\n --hybrid-button-local-ghost-active-background-color: #ffffff;\n --hybrid-button-local-ghost-active-text-color: #054ada;\n --hybrid-button-local-ghost-active-border-color: #0f62fe;\n --hybrid-button-local-ghost-hover-background-color: #e5e5e5;\n --hybrid-button-local-ghost-hover-border-color: #e5e5e5;\n --hybrid-button-local-ghost-hover-text-color: #054ada;\n --hybrid-button-local-ghost-disabled-background-color: #ffffff;\n --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;\n --hybrid-button-local-ghost-disabled-border-color: #ffffff;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* Secondary button style */\n\n --hybrid-button-local-secondary-background-color: #393939;\n --hybrid-button-local-secondary-border-color: #393939;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-outline: 1px solid white;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #4c4c4c;\n --hybrid-button-local-secondary-hover-border-color: #4c4c4c;\n --hybrid-button-local-secondary-active-background-color: #393939;\n --hybrid-button-local-secondary-active-border-color: #0f62fe;\n --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* Sizes */\n\n --hybrid-large-button-local-padding-y: 0.5rem;\n --hybrid-large-button-local-padding-x: 0.9rem;\n --hybrid-large-button-local-font-size: 1rem;\n\n --hybrid-small-button-local-padding-y: 0.5rem;\n --hybrid-small-button-local-padding-x: 0.4rem;\n --hybrid-small-button-local-font-size: 0.7rem;\n }\n\n /* Dark theme styles using data-theme attribute on button element */\n button[data-theme=\"dark\"] { \n\n --hybrid-button-local-background-color: #000000;\n --hybrid-button-local-text-color: #ffffff;\n --hybrid-button-local-hover-border-color: #6f6f6f;\n --hybrid-button-local-hover-color: #6f6f6f;\n --hybrid-button-local-active-border-color: #c6c6c6;\n --hybrid-button-local-active-color: #c6c6c6;\n --hybrid-button-local-disabled-background-color: #c6c6c6;\n\n /* Primary button style */\n --hybrid-button-local-primary-outline: 1px solid black;\n --hybrid-button-local-primary-outline-offset: -3px;\n --hybrid-button-local-primary-active-border-color: #ffffff;\n --hybrid-button-local-primary-disabled-text-color: #c6c6c6;\n --hybrid-button-local-primary-disabled-background-color: #8d8d8d;\n --hybrid-button-local-primary-disabled-border-color: #8d8d8d;\n\n /* Secondary button style */\n --hybrid-button-local-secondary-background-color: #6f6f6f;\n --hybrid-button-local-secondary-border-color: #6f6f6f;\n --hybrid-button-local-secondary-text-color: #ffffff;\n --hybrid-button-local-secondary-active-border-color: #ffffff;\n --hybrid-button-local-secondary-active-background-color: #6f6f6f;\n --hybrid-button-local-secondary-outline: 1px solid black;\n --hybrid-button-local-secondary-outline-offset: -3px;\n --hybrid-button-local-secondary-hover-background-color: #606060;\n --hybrid-button-local-secondary-hover-border-color: #606060;\n --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;\n --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;\n --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n /* Ghost button style */\n --hybrid-button-local-ghost-background-color: transparent;\n --hybrid-button-local-ghost-text-color: #78a9ff;\n --hybrid-button-local-ghost-border-color: transparent;\n --hybrid-button-local-ghost-active-background-color: transparent;\n --hybrid-button-local-ghost-active-text-color: #a6c8ff;\n --hybrid-button-local-ghost-active-border-color: #ffffff;\n --hybrid-button-local-ghost-hover-background-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-border-color: #4c4c4c;\n --hybrid-button-local-ghost-hover-text-color: #a6c8ff;\n --hybrid-button-local-ghost-disabled-background-color: transparent;\n --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;\n --hybrid-button-local-ghost-disabled-border-color: transparent;\n --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n /* Danger button style */\n --hybrid-button-local-danger-outline: 1px solid #000000;\n --hybrid-button-local-danger-outline-offset: -3px;\n --hybrid-button-local-danger-hover-background-color: #ba1b23;\n --hybrid-button-local-danger-hover-border-color: #ba1b23;\n --hybrid-button-local-danger-active-background-color: #da1e28;\n --hybrid-button-local-danger-active-border-color: #ffffff;\n --hybrid-button-local-danger-disabled-background-color: #6f6f6f;\n --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n --hybrid-button-local-danger-disabled-border-color: #6f6f6f;\n --hybrid-button-local-danger-dashed-border-color: #ffffff;\n }\n`;\n\nexport const styles = [buttonStyles];\n"]}
package/test/hy-button_test.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import '../hy-button.component';
2
- //# sourceMappingURL=hy-button_test.d.ts.map
package/test/hy-button_test.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-button_test.d.ts","sourceRoot":"","sources":["../../../../src/components/button/test/hy-button_test.ts"],"names":[],"mappings":"AAGA,OAAO,wBAAwB,CAAC"}
package/test/hy-button_test.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-button_test.js","sourceRoot":"","sources":["../../../../src/components/button/test/hy-button_test.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport {HyButtonElement} from '../hy-button.component';\nimport {ButtonSize, ButtonType, EMPTY_STRING} from '../hy-button.constants.js';\nimport '../hy-button.component';\n\nsuite('HyButtonElement', () => {\n test('has default properties', async () => {\n const el: HyButtonElement = await fixture(html`<hy-button></hy-button>`);\n const button: HTMLButtonElement = el.shadowRoot!.querySelector('button')!;\n const icon = el.shadowRoot!.querySelector('hy-icon');\n\n expect(el.disabled).to.be.false;\n expect(el.loading).to.be.false;\n expect(el.size).to.equal(EMPTY_STRING);\n expect(el.type).to.equal(ButtonType.Default);\n expect(el.dashed).to.be.false;\n expect(el.icon).to.equal(EMPTY_STRING);\n expect(button).to.not.have.class('button-dashed');\n expect(button).to.not.have.attribute('data-size');\n expect(button).to.not.have.attribute('data-state');\n expect(button).to.have.attribute('data-type', ButtonType.Default);\n expect(button.disabled).to.be.false;\n expect(icon).to.not.exist;\n });\n\n test('has a label', async () => {\n const buttonLabel = 'Test content';\n const el: HyButtonElement = await fixture(html`<hy-button>${buttonLabel}</hy-button>`);\n const slot = el.shadowRoot!.querySelector('slot');\n const assignedNode = slot!.assignedNodes();\n expect(assignedNode[0].textContent).to.equal(buttonLabel);\n });\n test('fires onClick event when clicked', async () => {\n const el: HyButtonElement = await fixture(html`<hy-button></hy-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n let eventFired = false;\n el.addEventListener('click', () => {\n eventFired = true;\n });\n button.click();\n expect(eventFired).to.be.true;\n });\n\n test('has a disabled property on the button element', async () => {\n const el: HyButtonElement = await fixture(html`<hy-button disabled></hy-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button.disabled).to.be.true;\n });\n test('does not fire onClick event when disabled', async () => {\n const el: HyButtonElement = await fixture(html`<hy-button disabled></hy-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n let eventFired = false;\n el.addEventListener('click', () => {\n eventFired = true;\n });\n button.click();\n expect(eventFired).to.be.false;\n });\n\n test('renders the icon', async () => {\n const iconName = 'sample-icon';\n const el: HyButtonElement = await fixture(html`<hy-button icon=${iconName}></hy-button>`);\n const icon = el.shadowRoot!.querySelector('hy-icon');\n expect(icon).to.exist;\n expect(icon).to.have.attribute('name', iconName);\n });\n\n test('applies the correct classe for dashed', async () => {\n const el: HyButtonElement = await fixture(html`<hy-button dashed></hy-button>`);\n const button = el.shadowRoot!.querySelector('button');\n expect(button).to.have.class('button-dashed');\n });\n test('reflects the loading property as data-state on the button element', async () => {\n const el: HyButtonElement = await fixture(html`<hy-button loading></hy-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-state', 'loading');\n });\n\n test('reflects the size property as data-size on the button element', async () => {\n const el: HyButtonElement = await fixture(html`<hy-button size=${ButtonSize.Large}></hy-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-size', ButtonSize.Large);\n });\n\n test('reflects the type property as data-type on the button element', async () => {\n const el: HyButtonElement = await fixture(html`<hy-button type=${ButtonType.Primary}></hy-button>`);\n const button = el.shadowRoot!.querySelector('button')!;\n expect(button).to.have.attribute('data-type', ButtonType.Primary);\n });\n});\n"]}