@nuralyui/button 0.0.14 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +921 -0
- package/button.component.d.ts +65 -25
- package/button.component.js +138 -52
- package/button.component.js.map +1 -1
- package/button.style.d.ts +6 -15
- package/button.style.js +406 -545
- package/button.style.js.map +1 -1
- package/button.types.d.ts +38 -2
- package/button.types.js.map +1 -1
- package/package.json +29 -2
- package/button.component.d.ts.map +0 -1
- package/button.style.d.ts.map +0 -1
- package/button.style.variables.d.ts +0 -11
- package/button.style.variables.d.ts.map +0 -1
- package/button.style.variables.js +0 -194
- package/button.style.variables.js.map +0 -1
- package/button.types.d.ts.map +0 -1
- package/demo/buttons-demo.d.ts +0 -17
- package/demo/buttons-demo.d.ts.map +0 -1
- package/demo/buttons-demo.js +0 -273
- package/demo/buttons-demo.js.map +0 -1
- package/index.d.ts.map +0 -1
- package/mixins/index.d.ts +0 -14
- package/mixins/index.d.ts.map +0 -1
- package/mixins/index.js +0 -10
- package/mixins/index.js.map +0 -1
- package/mixins/keyboard-mixin.d.ts +0 -52
- package/mixins/keyboard-mixin.d.ts.map +0 -1
- package/mixins/keyboard-mixin.js +0 -78
- package/mixins/keyboard-mixin.js.map +0 -1
- package/mixins/link-mixin.d.ts +0 -67
- package/mixins/link-mixin.d.ts.map +0 -1
- package/mixins/link-mixin.js +0 -87
- package/mixins/link-mixin.js.map +0 -1
- package/mixins/ripple-mixin.d.ts +0 -53
- package/mixins/ripple-mixin.d.ts.map +0 -1
- package/mixins/ripple-mixin.js +0 -77
- package/mixins/ripple-mixin.js.map +0 -1
- package/react.d.ts.map +0 -1
- package/test/nr-button_test.d.ts +0 -2
- package/test/nr-button_test.d.ts.map +0 -1
- package/test/nr-button_test.js +0 -91
- package/test/nr-button_test.js.map +0 -1
package/mixins/link-mixin.js
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
/**
|
|
7
|
-
* Mixin that provides link behavior for button components
|
|
8
|
-
* Handles the distinction between button and anchor elements
|
|
9
|
-
*
|
|
10
|
-
* @param superClass - The base class to extend
|
|
11
|
-
* @returns Enhanced class with link capabilities
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```typescript
|
|
15
|
-
* export class MyButton extends LinkMixin(LitElement) {
|
|
16
|
-
* @property({ type: String }) type = ButtonType.Default;
|
|
17
|
-
* @property({ type: String }) href = '';
|
|
18
|
-
* @property({ type: String }) target = '';
|
|
19
|
-
*
|
|
20
|
-
* render() {
|
|
21
|
-
* const tag = this.getElementTag();
|
|
22
|
-
* const attrs = this.getLinkAttributes();
|
|
23
|
-
*
|
|
24
|
-
* return html`
|
|
25
|
-
* <${tag} ...${attrs}>
|
|
26
|
-
* <slot></slot>
|
|
27
|
-
* </${tag}>
|
|
28
|
-
* `;
|
|
29
|
-
* }
|
|
30
|
-
* }
|
|
31
|
-
* ```
|
|
32
|
-
*/
|
|
33
|
-
export const LinkMixin = (superClass) => {
|
|
34
|
-
class LinkMixinClass extends superClass {
|
|
35
|
-
/**
|
|
36
|
-
* Check if the button should render as a link
|
|
37
|
-
*/
|
|
38
|
-
isLinkType() {
|
|
39
|
-
return this.type === "link" /* ButtonType.Link */ && !!this.href;
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* Get the appropriate element tag based on button type
|
|
43
|
-
*/
|
|
44
|
-
getElementTag() {
|
|
45
|
-
return this.isLinkType() ? 'a' : 'button';
|
|
46
|
-
}
|
|
47
|
-
/**
|
|
48
|
-
* Get link-specific attributes for anchor elements
|
|
49
|
-
*/
|
|
50
|
-
getLinkAttributes() {
|
|
51
|
-
const attributes = {};
|
|
52
|
-
if (this.isLinkType()) {
|
|
53
|
-
attributes.href = this.href;
|
|
54
|
-
if (this.target) {
|
|
55
|
-
attributes.target = this.target;
|
|
56
|
-
// Add security attributes for external links
|
|
57
|
-
if (this.target === '_blank') {
|
|
58
|
-
attributes.rel = 'noopener noreferrer';
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
attributes.role = 'link';
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
attributes.role = 'button';
|
|
65
|
-
}
|
|
66
|
-
return attributes;
|
|
67
|
-
}
|
|
68
|
-
/**
|
|
69
|
-
* Handle link navigation with proper event dispatching
|
|
70
|
-
*/
|
|
71
|
-
handleLinkNavigation(event) {
|
|
72
|
-
if (this.isLinkType()) {
|
|
73
|
-
// Dispatch custom navigation event if EventHandling mixin is available
|
|
74
|
-
if (typeof this.dispatchCustomEvent === 'function') {
|
|
75
|
-
this.dispatchCustomEvent('link-navigation', {
|
|
76
|
-
href: this.href,
|
|
77
|
-
target: this.target,
|
|
78
|
-
timestamp: Date.now(),
|
|
79
|
-
originalEvent: event
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
return LinkMixinClass;
|
|
86
|
-
};
|
|
87
|
-
//# sourceMappingURL=link-mixin.js.map
|
package/mixins/link-mixin.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"link-mixin.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/link-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0CH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAoC,UAAa,EAAE,EAAE;IAC5E,MAAM,cAAe,SAAQ,UAAU;QAMrC;;WAEG;QACH,UAAU;YACR,OAAO,IAAI,CAAC,IAAI,iCAAoB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACtD,CAAC;QAED;;WAEG;QACH,aAAa;YACX,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC5C,CAAC;QAED;;WAEG;QACH,iBAAiB;YACf,MAAM,UAAU,GAAwB,EAAE,CAAC;YAE3C,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;gBACrB,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBAE5B,IAAI,IAAI,CAAC,MAAM,EAAE;oBACf,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;oBAEhC,6CAA6C;oBAC7C,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;wBAC5B,UAAU,CAAC,GAAG,GAAG,qBAAqB,CAAC;qBACxC;iBACF;gBAED,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC;aAC1B;iBAAM;gBACL,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;aAC5B;YAED,OAAO,UAAU,CAAC;QACpB,CAAC;QAED;;WAEG;QACH,oBAAoB,CAAC,KAAY;YAC/B,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;gBACrB,uEAAuE;gBACvE,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;oBAC1D,IAAY,CAAC,mBAAmB,CAAC,iBAAiB,EAAE;wBACnD,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;wBACrB,aAAa,EAAE,KAAK;qBACrB,CAAC,CAAC;iBACJ;aACF;QACH,CAAC;KACF;IAED,OAAO,cAA8C,CAAC;AACxD,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\nimport { ButtonType } from '../button.types.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support link behavior\n */\nexport interface LinkCapable {\n /**\n * Button type that determines if it should render as link\n */\n type: ButtonType;\n \n /**\n * URL for link buttons\n */\n href: string;\n \n /**\n * Target attribute for link buttons\n */\n target: string;\n \n /**\n * Get the appropriate element tag (button or a)\n */\n getElementTag(): string;\n \n /**\n * Get link-specific attributes\n */\n getLinkAttributes(): Record<string, any>;\n \n /**\n * Check if component should render as a link\n */\n isLinkType(): boolean;\n}\n\n/**\n * Mixin that provides link behavior for button components\n * Handles the distinction between button and anchor elements\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with link capabilities\n * \n * @example\n * ```typescript\n * export class MyButton extends LinkMixin(LitElement) {\n * @property({ type: String }) type = ButtonType.Default;\n * @property({ type: String }) href = '';\n * @property({ type: String }) target = '';\n * \n * render() {\n * const tag = this.getElementTag();\n * const attrs = this.getLinkAttributes();\n * \n * return html`\n * <${tag} ...${attrs}>\n * <slot></slot>\n * </${tag}>\n * `;\n * }\n * }\n * ```\n */\nexport const LinkMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n class LinkMixinClass extends superClass implements LinkCapable {\n \n declare type: ButtonType;\n declare href: string;\n declare target: string;\n \n /**\n * Check if the button should render as a link\n */\n isLinkType(): boolean {\n return this.type === ButtonType.Link && !!this.href;\n }\n \n /**\n * Get the appropriate element tag based on button type\n */\n getElementTag(): string {\n return this.isLinkType() ? 'a' : 'button';\n }\n \n /**\n * Get link-specific attributes for anchor elements\n */\n getLinkAttributes(): Record<string, any> {\n const attributes: Record<string, any> = {};\n \n if (this.isLinkType()) {\n attributes.href = this.href;\n \n if (this.target) {\n attributes.target = this.target;\n \n // Add security attributes for external links\n if (this.target === '_blank') {\n attributes.rel = 'noopener noreferrer';\n }\n }\n \n attributes.role = 'link';\n } else {\n attributes.role = 'button';\n }\n \n return attributes;\n }\n \n /**\n * Handle link navigation with proper event dispatching\n */\n handleLinkNavigation(event: Event): void {\n if (this.isLinkType()) {\n // Dispatch custom navigation event if EventHandling mixin is available\n if (typeof (this as any).dispatchCustomEvent === 'function') {\n (this as any).dispatchCustomEvent('link-navigation', {\n href: this.href,\n target: this.target,\n timestamp: Date.now(),\n originalEvent: event\n });\n }\n }\n }\n }\n\n return LinkMixinClass as Constructor<LinkCapable> & T;\n};\n"]}
|
package/mixins/ripple-mixin.d.ts
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
import { LitElement } from 'lit';
|
|
7
|
-
declare type Constructor<T = {}> = new (...args: any[]) => T;
|
|
8
|
-
/**
|
|
9
|
-
* Interface for components that support ripple effect
|
|
10
|
-
*/
|
|
11
|
-
export interface RippleCapable {
|
|
12
|
-
/**
|
|
13
|
-
* Whether ripple effect is enabled
|
|
14
|
-
*/
|
|
15
|
-
ripple: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* Whether the component is disabled (affects ripple)
|
|
18
|
-
*/
|
|
19
|
-
disabled: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* Create ripple effect at click position
|
|
22
|
-
*/
|
|
23
|
-
createRipple(event: MouseEvent): void;
|
|
24
|
-
/**
|
|
25
|
-
* Handle click events with ripple effect
|
|
26
|
-
*/
|
|
27
|
-
handleRippleClick(event: MouseEvent): void;
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* Mixin that provides ripple effect functionality for button-like components
|
|
31
|
-
*
|
|
32
|
-
* @param superClass - The base class to extend
|
|
33
|
-
* @returns Enhanced class with ripple effect capabilities
|
|
34
|
-
*
|
|
35
|
-
* @example
|
|
36
|
-
* ```typescript
|
|
37
|
-
* export class MyButton extends RippleMixin(LitElement) {
|
|
38
|
-
* @property({ type: Boolean }) ripple = true;
|
|
39
|
-
* @property({ type: Boolean }) disabled = false;
|
|
40
|
-
*
|
|
41
|
-
* render() {
|
|
42
|
-
* return html`
|
|
43
|
-
* <button @click="${this.handleRippleClick}">
|
|
44
|
-
* <slot></slot>
|
|
45
|
-
* </button>
|
|
46
|
-
* `;
|
|
47
|
-
* }
|
|
48
|
-
* }
|
|
49
|
-
* ```
|
|
50
|
-
*/
|
|
51
|
-
export declare const RippleMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<RippleCapable> & T;
|
|
52
|
-
export {};
|
|
53
|
-
//# sourceMappingURL=ripple-mixin.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ripple-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/ripple-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,sFA2DvB,CAAC"}
|
package/mixins/ripple-mixin.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
/**
|
|
7
|
-
* Mixin that provides ripple effect functionality for button-like components
|
|
8
|
-
*
|
|
9
|
-
* @param superClass - The base class to extend
|
|
10
|
-
* @returns Enhanced class with ripple effect capabilities
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```typescript
|
|
14
|
-
* export class MyButton extends RippleMixin(LitElement) {
|
|
15
|
-
* @property({ type: Boolean }) ripple = true;
|
|
16
|
-
* @property({ type: Boolean }) disabled = false;
|
|
17
|
-
*
|
|
18
|
-
* render() {
|
|
19
|
-
* return html`
|
|
20
|
-
* <button @click="${this.handleRippleClick}">
|
|
21
|
-
* <slot></slot>
|
|
22
|
-
* </button>
|
|
23
|
-
* `;
|
|
24
|
-
* }
|
|
25
|
-
* }
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
export const RippleMixin = (superClass) => {
|
|
29
|
-
class RippleMixinClass extends superClass {
|
|
30
|
-
/**
|
|
31
|
-
* Creates ripple effect on button click
|
|
32
|
-
* @param event - The click event
|
|
33
|
-
*/
|
|
34
|
-
createRipple(event) {
|
|
35
|
-
if (!this.ripple || this.disabled)
|
|
36
|
-
return;
|
|
37
|
-
const button = event.currentTarget;
|
|
38
|
-
const rect = button.getBoundingClientRect();
|
|
39
|
-
const size = Math.max(rect.width, rect.height);
|
|
40
|
-
const x = event.clientX - rect.left - size / 2;
|
|
41
|
-
const y = event.clientY - rect.top - size / 2;
|
|
42
|
-
const ripple = document.createElement('span');
|
|
43
|
-
ripple.className = 'ripple';
|
|
44
|
-
ripple.style.width = ripple.style.height = size + 'px';
|
|
45
|
-
ripple.style.left = x + 'px';
|
|
46
|
-
ripple.style.top = y + 'px';
|
|
47
|
-
// Remove any existing ripples
|
|
48
|
-
const existingRipples = button.querySelectorAll('.ripple');
|
|
49
|
-
existingRipples.forEach(r => r.remove());
|
|
50
|
-
button.appendChild(ripple);
|
|
51
|
-
// Remove ripple after animation
|
|
52
|
-
setTimeout(() => {
|
|
53
|
-
ripple.remove();
|
|
54
|
-
}, 600);
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* Handle click events with ripple effect and dispatch custom event
|
|
58
|
-
* @param event - The click event
|
|
59
|
-
*/
|
|
60
|
-
handleRippleClick(event) {
|
|
61
|
-
this.createRipple(event);
|
|
62
|
-
// Dispatch custom button click event if EventHandling mixin is available
|
|
63
|
-
if (typeof this.dispatchCustomEvent === 'function') {
|
|
64
|
-
this.dispatchCustomEvent('button-click', {
|
|
65
|
-
disabled: this.disabled,
|
|
66
|
-
timestamp: Date.now(),
|
|
67
|
-
coordinates: {
|
|
68
|
-
x: event.clientX,
|
|
69
|
-
y: event.clientY
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
return RippleMixinClass;
|
|
76
|
-
};
|
|
77
|
-
//# sourceMappingURL=ripple-mixin.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ripple-mixin.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/ripple-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+BH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAoC,UAAa,EAAE,EAAE;IAC9E,MAAM,gBAAiB,SAAQ,UAAU;QAKvC;;;WAGG;QACH,YAAY,CAAC,KAAiB;YAC5B,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1C,MAAM,MAAM,GAAG,KAAK,CAAC,aAA4B,CAAC;YAClD,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;YAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC;YAC/C,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,GAAG,CAAC,CAAC;YAE9C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAC9C,MAAM,CAAC,SAAS,GAAG,QAAQ,CAAC;YAC5B,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;YACvD,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;YAC7B,MAAM,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;YAE5B,8BAA8B;YAC9B,MAAM,eAAe,GAAG,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC3D,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;YAEzC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;YAE3B,gCAAgC;YAChC,UAAU,CAAC,GAAG,EAAE;gBACd,MAAM,CAAC,MAAM,EAAE,CAAC;YAClB,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;QAED;;;WAGG;QACH,iBAAiB,CAAC,KAAiB;YACjC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YAEzB,yEAAyE;YACzE,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;gBAC1D,IAAY,CAAC,mBAAmB,CAAC,cAAc,EAAE;oBAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ;oBACvB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;oBACrB,WAAW,EAAE;wBACX,CAAC,EAAE,KAAK,CAAC,OAAO;wBAChB,CAAC,EAAE,KAAK,CAAC,OAAO;qBACjB;iBACF,CAAC,CAAC;aACJ;QACH,CAAC;KACF;IAED,OAAO,gBAAkD,CAAC;AAC5D,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support ripple effect\n */\nexport interface RippleCapable {\n /**\n * Whether ripple effect is enabled\n */\n ripple: boolean;\n \n /**\n * Whether the component is disabled (affects ripple)\n */\n disabled: boolean;\n \n /**\n * Create ripple effect at click position\n */\n createRipple(event: MouseEvent): void;\n \n /**\n * Handle click events with ripple effect\n */\n handleRippleClick(event: MouseEvent): void;\n}\n\n/**\n * Mixin that provides ripple effect functionality for button-like components\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with ripple effect capabilities\n * \n * @example\n * ```typescript\n * export class MyButton extends RippleMixin(LitElement) {\n * @property({ type: Boolean }) ripple = true;\n * @property({ type: Boolean }) disabled = false;\n * \n * render() {\n * return html`\n * <button @click=\"${this.handleRippleClick}\">\n * <slot></slot>\n * </button>\n * `;\n * }\n * }\n * ```\n */\nexport const RippleMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n class RippleMixinClass extends superClass implements RippleCapable {\n \n declare ripple: boolean;\n declare disabled: boolean;\n \n /**\n * Creates ripple effect on button click\n * @param event - The click event\n */\n createRipple(event: MouseEvent): void {\n if (!this.ripple || this.disabled) return;\n\n const button = event.currentTarget as HTMLElement;\n const rect = button.getBoundingClientRect();\n const size = Math.max(rect.width, rect.height);\n const x = event.clientX - rect.left - size / 2;\n const y = event.clientY - rect.top - size / 2;\n\n const ripple = document.createElement('span');\n ripple.className = 'ripple';\n ripple.style.width = ripple.style.height = size + 'px';\n ripple.style.left = x + 'px';\n ripple.style.top = y + 'px';\n\n // Remove any existing ripples\n const existingRipples = button.querySelectorAll('.ripple');\n existingRipples.forEach(r => r.remove());\n\n button.appendChild(ripple);\n\n // Remove ripple after animation\n setTimeout(() => {\n ripple.remove();\n }, 600);\n }\n\n /**\n * Handle click events with ripple effect and dispatch custom event\n * @param event - The click event\n */\n handleRippleClick(event: MouseEvent): void {\n this.createRipple(event);\n \n // Dispatch custom button click event if EventHandling mixin is available\n if (typeof (this as any).dispatchCustomEvent === 'function') {\n (this as any).dispatchCustomEvent('button-click', {\n disabled: this.disabled,\n timestamp: Date.now(),\n coordinates: {\n x: event.clientX,\n y: event.clientY\n }\n });\n }\n }\n }\n\n return RippleMixinClass as Constructor<RippleCapable> & T;\n};\n"]}
|
package/react.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/button/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,eAAO,MAAM,QAAQ;;EAOnB,CAAC"}
|
package/test/nr-button_test.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"nr-button_test.d.ts","sourceRoot":"","sources":["../../../../src/components/button/test/nr-button_test.ts"],"names":[],"mappings":"AAGA,OAAO,qBAAqB,CAAC"}
|
package/test/nr-button_test.js
DELETED
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
-
});
|
|
9
|
-
};
|
|
10
|
-
import { html, fixture, expect } from '@open-wc/testing';
|
|
11
|
-
import { EMPTY_STRING } from '../button.types.js';
|
|
12
|
-
import '../button.component';
|
|
13
|
-
suite('NrButtonElement', () => {
|
|
14
|
-
test('has default properties', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
15
|
-
const el = yield fixture(html `<nr-button></nr-button>`);
|
|
16
|
-
const button = el.shadowRoot.querySelector('button');
|
|
17
|
-
const icon = el.shadowRoot.querySelector('hy-icon');
|
|
18
|
-
expect(el.disabled).to.be.false;
|
|
19
|
-
expect(el.loading).to.be.false;
|
|
20
|
-
expect(el.size).to.equal(EMPTY_STRING);
|
|
21
|
-
expect(el.type).to.equal("default" /* ButtonType.Default */);
|
|
22
|
-
expect(el.dashed).to.be.false;
|
|
23
|
-
expect(el.icon).to.equal(EMPTY_STRING);
|
|
24
|
-
expect(button).to.not.have.class('button-dashed');
|
|
25
|
-
expect(button).to.not.have.attribute('data-size');
|
|
26
|
-
expect(button).to.not.have.attribute('data-state');
|
|
27
|
-
expect(button).to.have.attribute('data-type', "default" /* ButtonType.Default */);
|
|
28
|
-
expect(button.disabled).to.be.false;
|
|
29
|
-
expect(icon).to.not.exist;
|
|
30
|
-
}));
|
|
31
|
-
test('has a label', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
32
|
-
const buttonLabel = 'Test content';
|
|
33
|
-
const el = yield fixture(html `<nr-button>${buttonLabel}</nr-button>`);
|
|
34
|
-
const slot = el.shadowRoot.querySelector('slot');
|
|
35
|
-
const assignedNode = slot.assignedNodes();
|
|
36
|
-
expect(assignedNode[0].textContent).to.equal(buttonLabel);
|
|
37
|
-
}));
|
|
38
|
-
test('fires onClick event when clicked', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
39
|
-
const el = yield fixture(html `<nr-button></nr-button>`);
|
|
40
|
-
const button = el.shadowRoot.querySelector('button');
|
|
41
|
-
let eventFired = false;
|
|
42
|
-
el.addEventListener('click', () => {
|
|
43
|
-
eventFired = true;
|
|
44
|
-
});
|
|
45
|
-
button.click();
|
|
46
|
-
expect(eventFired).to.be.true;
|
|
47
|
-
}));
|
|
48
|
-
test('has a disabled property on the button element', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
49
|
-
const el = yield fixture(html `<nr-button disabled></nr-button>`);
|
|
50
|
-
const button = el.shadowRoot.querySelector('button');
|
|
51
|
-
expect(button.disabled).to.be.true;
|
|
52
|
-
}));
|
|
53
|
-
test('does not fire onClick event when disabled', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
54
|
-
const el = yield fixture(html `<nr-button disabled></nr-button>`);
|
|
55
|
-
const button = el.shadowRoot.querySelector('button');
|
|
56
|
-
let eventFired = false;
|
|
57
|
-
el.addEventListener('click', () => {
|
|
58
|
-
eventFired = true;
|
|
59
|
-
});
|
|
60
|
-
button.click();
|
|
61
|
-
expect(eventFired).to.be.false;
|
|
62
|
-
}));
|
|
63
|
-
test('renders the icon', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
64
|
-
const iconName = 'sample-icon';
|
|
65
|
-
const el = yield fixture(html `<nr-button icon=${iconName}></nr-button>`);
|
|
66
|
-
const icon = el.shadowRoot.querySelector('hy-icon');
|
|
67
|
-
expect(icon).to.exist;
|
|
68
|
-
expect(icon).to.have.attribute('name', iconName);
|
|
69
|
-
}));
|
|
70
|
-
test('applies the correct classe for dashed', () => __awaiter(void 0, void 0, void 0, function* () {
|
|
71
|
-
const el = yield fixture(html `<nr-button dashed></nr-button>`);
|
|
72
|
-
const button = el.shadowRoot.querySelector('button');
|
|
73
|
-
expect(button).to.have.class('button-dashed');
|
|
74
|
-
}));
|
|
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 `<nr-button loading></nr-button>`);
|
|
77
|
-
const button = el.shadowRoot.querySelector('button');
|
|
78
|
-
expect(button).to.have.attribute('data-state', 'loading');
|
|
79
|
-
}));
|
|
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 `<nr-button size=${"large" /* ButtonSize.Large */}></nr-button>`);
|
|
82
|
-
const button = el.shadowRoot.querySelector('button');
|
|
83
|
-
expect(button).to.have.attribute('data-size', "large" /* ButtonSize.Large */);
|
|
84
|
-
}));
|
|
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 `<nr-button type=${"primary" /* ButtonType.Primary */}></nr-button>`);
|
|
87
|
-
const button = el.shadowRoot.querySelector('button');
|
|
88
|
-
expect(button).to.have.attribute('data-type', "primary" /* ButtonType.Primary */);
|
|
89
|
-
}));
|
|
90
|
-
});
|
|
91
|
-
//# sourceMappingURL=nr-button_test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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 '../button.component';\nimport { ButtonSize, ButtonType, EMPTY_STRING } from '../button.types.js';\nimport '../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"]}
|