@kodaris/krubble-components 1.0.27 → 1.0.30
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/breaking-changes.json +1 -0
- package/custom-elements.json +78 -53
- package/dist/button/button.d.ts +7 -1
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +45 -5
- package/dist/button/button.js.map +1 -1
- package/dist/krubble-components.bundled.js +45 -5
- package/dist/krubble-components.bundled.js.map +1 -1
- package/dist/krubble-components.bundled.min.js +173 -137
- package/dist/krubble-components.bundled.min.js.map +1 -1
- package/dist/krubble-components.umd.js +45 -5
- package/dist/krubble-components.umd.js.map +1 -1
- package/dist/krubble-components.umd.min.js +166 -130
- package/dist/krubble-components.umd.min.js.map +1 -1
- package/package.json +9 -3
- package/postinstall.cjs +30 -0
package/dist/button/button.d.ts
CHANGED
|
@@ -6,7 +6,8 @@ export interface KRButtonOption {
|
|
|
6
6
|
/**
|
|
7
7
|
* A customizable button component.
|
|
8
8
|
*
|
|
9
|
-
* @slot - The button content
|
|
9
|
+
* @slot - The button content (text)
|
|
10
|
+
* @slot icon - Optional icon to display alongside the button text
|
|
10
11
|
* @fires click - Fired when the button is clicked
|
|
11
12
|
* @fires option-select - Fired when a dropdown option is selected
|
|
12
13
|
*/
|
|
@@ -40,6 +41,11 @@ export declare class KRButton extends LitElement {
|
|
|
40
41
|
* Dropdown options - when provided, button becomes a dropdown
|
|
41
42
|
*/
|
|
42
43
|
options: KRButtonOption[];
|
|
44
|
+
/**
|
|
45
|
+
* Position of the icon relative to the text content.
|
|
46
|
+
* @attr icon-position
|
|
47
|
+
*/
|
|
48
|
+
iconPosition: 'left' | 'right';
|
|
43
49
|
private _state;
|
|
44
50
|
private _stateText;
|
|
45
51
|
private _dropdownOpened;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BA+PpB;IAEF;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAU;IAErC;;OAEG;IAEH,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAa;IAEtD;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IAEH,OAAO,EAAE,cAAc,EAAE,CAAM;IAE/B;;;OAGG;IAEH,YAAY,EAAE,MAAM,GAAG,OAAO,CAAU;IAGxC,OAAO,CAAC,MAAM,CAAoD;IAGlE,OAAO,CAAC,UAAU,CAAM;IAGxB,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,aAAa,CAAC,CAAS;IAE/B,iBAAiB;IASjB,oBAAoB;IAOpB,OAAO,CAAC,gBAAgB,CAKtB;IAEF,OAAO,CAAC,cAAc,CAYpB;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,kBAAkB;IAU1B;;OAEG;IACH,WAAW;IAMX;;;;OAIG;IACH,WAAW,CAAC,IAAI,SAAY,EAAE,QAAQ,SAAO;IAS7C;;;;OAIG;IACH,SAAS,CAAC,IAAI,SAAU,EAAE,QAAQ,SAAO;IASzC;;OAEG;IACH,KAAK;IAML,OAAO,CAAC,kBAAkB;cAOP,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWzD,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/button/button.js
CHANGED
|
@@ -9,7 +9,8 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
9
9
|
/**
|
|
10
10
|
* A customizable button component.
|
|
11
11
|
*
|
|
12
|
-
* @slot - The button content
|
|
12
|
+
* @slot - The button content (text)
|
|
13
|
+
* @slot icon - Optional icon to display alongside the button text
|
|
13
14
|
* @fires click - Fired when the button is clicked
|
|
14
15
|
* @fires option-select - Fired when a dropdown option is selected
|
|
15
16
|
*/
|
|
@@ -36,6 +37,11 @@ let KRButton = class KRButton extends LitElement {
|
|
|
36
37
|
* Dropdown options - when provided, button becomes a dropdown
|
|
37
38
|
*/
|
|
38
39
|
this.options = [];
|
|
40
|
+
/**
|
|
41
|
+
* Position of the icon relative to the text content.
|
|
42
|
+
* @attr icon-position
|
|
43
|
+
*/
|
|
44
|
+
this.iconPosition = 'left';
|
|
39
45
|
this._state = 'idle';
|
|
40
46
|
this._stateText = '';
|
|
41
47
|
this._dropdownOpened = false;
|
|
@@ -169,7 +175,10 @@ let KRButton = class KRButton extends LitElement {
|
|
|
169
175
|
}
|
|
170
176
|
render() {
|
|
171
177
|
const content = html `
|
|
172
|
-
<
|
|
178
|
+
<span class="content">
|
|
179
|
+
<slot name="icon"></slot>
|
|
180
|
+
<slot></slot>
|
|
181
|
+
</span>
|
|
173
182
|
${this.options.length ? html `<svg class="caret" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>` : nothing}
|
|
174
183
|
${this._state !== 'idle'
|
|
175
184
|
? html `<span class="state-overlay">
|
|
@@ -318,9 +327,9 @@ KRButton.styles = css `
|
|
|
318
327
|
}
|
|
319
328
|
|
|
320
329
|
/* Content */
|
|
321
|
-
:host(.kr-button--loading)
|
|
322
|
-
:host(.kr-button--success)
|
|
323
|
-
:host(.kr-button--error)
|
|
330
|
+
:host(.kr-button--loading) .content,
|
|
331
|
+
:host(.kr-button--success) .content,
|
|
332
|
+
:host(.kr-button--error) .content {
|
|
324
333
|
visibility: hidden;
|
|
325
334
|
}
|
|
326
335
|
|
|
@@ -421,6 +430,34 @@ KRButton.styles = css `
|
|
|
421
430
|
color: inherit;
|
|
422
431
|
text-decoration: none;
|
|
423
432
|
}
|
|
433
|
+
|
|
434
|
+
/* Content wrapper for icon + text layout */
|
|
435
|
+
.content {
|
|
436
|
+
display: inline-flex;
|
|
437
|
+
align-items: center;
|
|
438
|
+
gap: 6px;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
:host([icon-position="right"]) .content {
|
|
442
|
+
flex-direction: row-reverse;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
/* Icon styling */
|
|
446
|
+
::slotted([slot="icon"]) {
|
|
447
|
+
width: 18px;
|
|
448
|
+
height: 18px;
|
|
449
|
+
flex-shrink: 0;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
:host(.kr-button--small) ::slotted([slot="icon"]) {
|
|
453
|
+
width: 14px;
|
|
454
|
+
height: 14px;
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
:host(.kr-button--large) ::slotted([slot="icon"]) {
|
|
458
|
+
width: 22px;
|
|
459
|
+
height: 22px;
|
|
460
|
+
}
|
|
424
461
|
`;
|
|
425
462
|
__decorate([
|
|
426
463
|
property({ type: String, reflect: true })
|
|
@@ -443,6 +480,9 @@ __decorate([
|
|
|
443
480
|
__decorate([
|
|
444
481
|
property({ type: Array })
|
|
445
482
|
], KRButton.prototype, "options", void 0);
|
|
483
|
+
__decorate([
|
|
484
|
+
property({ type: String, reflect: true, attribute: 'icon-position' })
|
|
485
|
+
], KRButton.prototype, "iconPosition", void 0);
|
|
446
486
|
__decorate([
|
|
447
487
|
state()
|
|
448
488
|
], KRButton.prototype, "_state", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAOnE
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"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"}
|
|
@@ -442,7 +442,8 @@ var __decorate$e = (undefined && undefined.__decorate) || function (decorators,
|
|
|
442
442
|
/**
|
|
443
443
|
* A customizable button component.
|
|
444
444
|
*
|
|
445
|
-
* @slot - The button content
|
|
445
|
+
* @slot - The button content (text)
|
|
446
|
+
* @slot icon - Optional icon to display alongside the button text
|
|
446
447
|
* @fires click - Fired when the button is clicked
|
|
447
448
|
* @fires option-select - Fired when a dropdown option is selected
|
|
448
449
|
*/
|
|
@@ -469,6 +470,11 @@ let KRButton = class KRButton extends i$2 {
|
|
|
469
470
|
* Dropdown options - when provided, button becomes a dropdown
|
|
470
471
|
*/
|
|
471
472
|
this.options = [];
|
|
473
|
+
/**
|
|
474
|
+
* Position of the icon relative to the text content.
|
|
475
|
+
* @attr icon-position
|
|
476
|
+
*/
|
|
477
|
+
this.iconPosition = 'left';
|
|
472
478
|
this._state = 'idle';
|
|
473
479
|
this._stateText = '';
|
|
474
480
|
this._dropdownOpened = false;
|
|
@@ -602,7 +608,10 @@ let KRButton = class KRButton extends i$2 {
|
|
|
602
608
|
}
|
|
603
609
|
render() {
|
|
604
610
|
const content = b `
|
|
605
|
-
<
|
|
611
|
+
<span class="content">
|
|
612
|
+
<slot name="icon"></slot>
|
|
613
|
+
<slot></slot>
|
|
614
|
+
</span>
|
|
606
615
|
${this.options.length ? b `<svg class="caret" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>` : A}
|
|
607
616
|
${this._state !== 'idle'
|
|
608
617
|
? b `<span class="state-overlay">
|
|
@@ -751,9 +760,9 @@ KRButton.styles = i$5 `
|
|
|
751
760
|
}
|
|
752
761
|
|
|
753
762
|
/* Content */
|
|
754
|
-
:host(.kr-button--loading)
|
|
755
|
-
:host(.kr-button--success)
|
|
756
|
-
:host(.kr-button--error)
|
|
763
|
+
:host(.kr-button--loading) .content,
|
|
764
|
+
:host(.kr-button--success) .content,
|
|
765
|
+
:host(.kr-button--error) .content {
|
|
757
766
|
visibility: hidden;
|
|
758
767
|
}
|
|
759
768
|
|
|
@@ -854,6 +863,34 @@ KRButton.styles = i$5 `
|
|
|
854
863
|
color: inherit;
|
|
855
864
|
text-decoration: none;
|
|
856
865
|
}
|
|
866
|
+
|
|
867
|
+
/* Content wrapper for icon + text layout */
|
|
868
|
+
.content {
|
|
869
|
+
display: inline-flex;
|
|
870
|
+
align-items: center;
|
|
871
|
+
gap: 6px;
|
|
872
|
+
}
|
|
873
|
+
|
|
874
|
+
:host([icon-position="right"]) .content {
|
|
875
|
+
flex-direction: row-reverse;
|
|
876
|
+
}
|
|
877
|
+
|
|
878
|
+
/* Icon styling */
|
|
879
|
+
::slotted([slot="icon"]) {
|
|
880
|
+
width: 18px;
|
|
881
|
+
height: 18px;
|
|
882
|
+
flex-shrink: 0;
|
|
883
|
+
}
|
|
884
|
+
|
|
885
|
+
:host(.kr-button--small) ::slotted([slot="icon"]) {
|
|
886
|
+
width: 14px;
|
|
887
|
+
height: 14px;
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
:host(.kr-button--large) ::slotted([slot="icon"]) {
|
|
891
|
+
width: 22px;
|
|
892
|
+
height: 22px;
|
|
893
|
+
}
|
|
857
894
|
`;
|
|
858
895
|
__decorate$e([
|
|
859
896
|
n$1({ type: String, reflect: true })
|
|
@@ -876,6 +913,9 @@ __decorate$e([
|
|
|
876
913
|
__decorate$e([
|
|
877
914
|
n$1({ type: Array })
|
|
878
915
|
], KRButton.prototype, "options", void 0);
|
|
916
|
+
__decorate$e([
|
|
917
|
+
n$1({ type: String, reflect: true, attribute: 'icon-position' })
|
|
918
|
+
], KRButton.prototype, "iconPosition", void 0);
|
|
879
919
|
__decorate$e([
|
|
880
920
|
r$1()
|
|
881
921
|
], KRButton.prototype, "_state", void 0);
|