@indigina/ui-kit 1.1.96 → 1.1.97
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/esm2022/lib/components/kit-button/kit-button.component.mjs +2 -2
- package/esm2022/lib/directives/kit-badge/kit-badge.directive.mjs +34 -25
- package/fesm2022/indigina-ui-kit.mjs +35 -26
- package/fesm2022/indigina-ui-kit.mjs.map +1 -1
- package/lib/directives/kit-badge/kit-badge.directive.d.ts +11 -6
- package/package.json +1 -1
- package/styles/components/badge.scss +3 -1
|
@@ -42,11 +42,11 @@ export class KitButtonComponent {
|
|
|
42
42
|
this.KitSvgIconType = KitSvgIconType;
|
|
43
43
|
}
|
|
44
44
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-
|
|
45
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
46
46
|
}
|
|
47
47
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitButtonComponent, decorators: [{
|
|
48
48
|
type: Component,
|
|
49
|
-
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-
|
|
49
|
+
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"] }]
|
|
50
50
|
}], propDecorators: { disabled: [{
|
|
51
51
|
type: Input
|
|
52
52
|
}], label: [{
|
|
@@ -1,49 +1,58 @@
|
|
|
1
|
-
import { Directive,
|
|
1
|
+
import { Directive, effect, input } from '@angular/core';
|
|
2
2
|
import { KitBadgeTheme } from './kit-badge.const';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class KitBadgeDirective {
|
|
5
5
|
constructor(elementRef, renderer) {
|
|
6
6
|
this.elementRef = elementRef;
|
|
7
7
|
this.renderer = renderer;
|
|
8
|
+
/**
|
|
9
|
+
* Defines the content of the badge
|
|
10
|
+
*/
|
|
11
|
+
this.kitBadgeText = input();
|
|
8
12
|
/**
|
|
9
13
|
* Defines the theme color of the badge
|
|
10
14
|
*/
|
|
11
|
-
this.kitBadgeTheme = KitBadgeTheme.DEFAULT;
|
|
15
|
+
this.kitBadgeTheme = input(KitBadgeTheme.DEFAULT);
|
|
16
|
+
/**
|
|
17
|
+
* Defines whether the badge will be visible
|
|
18
|
+
*/
|
|
19
|
+
this.kitBadgeVisible = input(true);
|
|
12
20
|
this.badgeElement = null;
|
|
13
|
-
|
|
14
|
-
ngOnInit() {
|
|
15
|
-
this.createBadge();
|
|
21
|
+
effect(() => this.kitBadgeVisible() ? this.createBadge() : this.removeBadge());
|
|
16
22
|
}
|
|
17
23
|
ngOnDestroy() {
|
|
18
|
-
|
|
19
|
-
this.renderer.removeChild(this.elementRef.nativeElement, this.badgeElement);
|
|
20
|
-
}
|
|
24
|
+
this.removeBadge();
|
|
21
25
|
}
|
|
22
26
|
createBadge() {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
this.
|
|
27
|
+
if (!this.badgeElement) {
|
|
28
|
+
this.badgeElement = this.renderer.createElement('span');
|
|
29
|
+
this.elementRef.nativeElement.classList.add('kit-badge');
|
|
30
|
+
this.renderer.appendChild(this.elementRef.nativeElement, this.badgeElement);
|
|
31
|
+
}
|
|
32
|
+
this.updateBadge();
|
|
33
|
+
}
|
|
34
|
+
updateBadge() {
|
|
35
|
+
const text = this.kitBadgeText() ?? '';
|
|
36
|
+
const hasText = text !== '';
|
|
37
|
+
const typeClass = hasText && 'kit-badge-text' || 'kit-badge-status';
|
|
38
|
+
const cssClasses = `kit-badge-content ${this.kitBadgeTheme()} ${typeClass}`;
|
|
29
39
|
this.renderer.setAttribute(this.badgeElement, 'class', cssClasses);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
40
|
+
hasText && this.renderer.setProperty(this.badgeElement, 'textContent', text);
|
|
41
|
+
}
|
|
42
|
+
removeBadge() {
|
|
43
|
+
if (!this.badgeElement) {
|
|
44
|
+
return;
|
|
33
45
|
}
|
|
34
|
-
this.renderer.
|
|
46
|
+
this.renderer.removeChild(this.elementRef.nativeElement, this.badgeElement);
|
|
47
|
+
this.badgeElement = null;
|
|
35
48
|
}
|
|
36
49
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
37
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
50
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.6", type: KitBadgeDirective, selector: "[kitBadge]", inputs: { kitBadgeText: { classPropertyName: "kitBadgeText", publicName: "kitBadgeText", isSignal: true, isRequired: false, transformFunction: null }, kitBadgeTheme: { classPropertyName: "kitBadgeTheme", publicName: "kitBadgeTheme", isSignal: true, isRequired: false, transformFunction: null }, kitBadgeVisible: { classPropertyName: "kitBadgeVisible", publicName: "kitBadgeVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
38
51
|
}
|
|
39
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitBadgeDirective, decorators: [{
|
|
40
53
|
type: Directive,
|
|
41
54
|
args: [{
|
|
42
55
|
selector: '[kitBadge]',
|
|
43
56
|
}]
|
|
44
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }]
|
|
45
|
-
|
|
46
|
-
}], kitBadgeTheme: [{
|
|
47
|
-
type: Input
|
|
48
|
-
}] } });
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWJhZGdlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC9zcmMvbGliL2RpcmVjdGl2ZXMva2l0LWJhZGdlL2tpdC1iYWRnZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxLQUFLLEVBQWdDLE1BQU0sZUFBZSxDQUFDO0FBQzNGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7QUFLbEQsTUFBTSxPQUFPLGlCQUFpQjtJQWE1QixZQUNVLFVBQXNCLEVBQ3RCLFFBQW1CO1FBRG5CLGVBQVUsR0FBVixVQUFVLENBQVk7UUFDdEIsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQVQ3Qjs7V0FFRztRQUNNLGtCQUFhLEdBQWtCLGFBQWEsQ0FBQyxPQUFPLENBQUM7UUFFdEQsaUJBQVksR0FBdUIsSUFBSSxDQUFDO0lBTWhELENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDdEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQzlFLENBQUM7SUFDSCxDQUFDO0lBRU8sV0FBVztRQUNqQixNQUFNLFNBQVMsR0FBb0IsSUFBSSxDQUFDLFlBQVksSUFBSSxFQUFFLENBQUM7UUFDM0QsTUFBTSxZQUFZLEdBQVksU0FBUyxLQUFLLEVBQUUsQ0FBQztRQUMvQyxNQUFNLGNBQWMsR0FBVyxZQUFZLElBQUksZ0JBQWdCLElBQUksa0JBQWtCLENBQUM7UUFDdEYsTUFBTSxVQUFVLEdBQVcscUJBQXFCLElBQUksQ0FBQyxhQUFhLElBQUksY0FBYyxFQUFFLENBQUM7UUFDdkYsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN4RCxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ3pELElBQUksQ0FBQyxRQUFRLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsT0FBTyxFQUFFLFVBQVUsQ0FBQyxDQUFDO1FBQ25FLElBQUksWUFBWSxFQUFFLENBQUM7WUFDakIsTUFBTSxJQUFJLEdBQVcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUM7WUFDcEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxJQUFJLENBQUMsQ0FBQztRQUNyRCxDQUFDO1FBRUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzlFLENBQUM7OEdBM0NVLGlCQUFpQjtrR0FBakIsaUJBQWlCOzsyRkFBakIsaUJBQWlCO2tCQUg3QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxZQUFZO2lCQUN2Qjt1R0FLVSxZQUFZO3NCQUFwQixLQUFLO2dCQUtHLGFBQWE7c0JBQXJCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdCwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLaXRCYWRnZVRoZW1lIH0gZnJvbSAnLi9raXQtYmFkZ2UuY29uc3QnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdba2l0QmFkZ2VdJyxcbn0pXG5leHBvcnQgY2xhc3MgS2l0QmFkZ2VEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIC8qKlxuICAgKiBEZWZpbmVzIHRoZSBjb250ZW50IG9mIHRoZSBiYWRnZVxuICAgKi9cbiAgQElucHV0KCkga2l0QmFkZ2VUZXh0Pzogc3RyaW5nIHwgbnVtYmVyO1xuXG4gIC8qKlxuICAgKiBEZWZpbmVzIHRoZSB0aGVtZSBjb2xvciBvZiB0aGUgYmFkZ2VcbiAgICovXG4gIEBJbnB1dCgpIGtpdEJhZGdlVGhlbWU6IEtpdEJhZGdlVGhlbWUgPSBLaXRCYWRnZVRoZW1lLkRFRkFVTFQ7XG5cbiAgcHJpdmF0ZSBiYWRnZUVsZW1lbnQ6IEhUTUxFbGVtZW50IHwgbnVsbCA9IG51bGw7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMixcbiAgKSB7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmNyZWF0ZUJhZGdlKCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5iYWRnZUVsZW1lbnQpIHtcbiAgICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2hpbGQodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsIHRoaXMuYmFkZ2VFbGVtZW50KTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGNyZWF0ZUJhZGdlKCk6IHZvaWQge1xuICAgIGNvbnN0IGJhZGdlVGV4dDogc3RyaW5nIHwgbnVtYmVyID0gdGhpcy5raXRCYWRnZVRleHQgPz8gJyc7XG4gICAgY29uc3QgaGFzQmFkZ2VUZXh0OiBib29sZWFuID0gYmFkZ2VUZXh0ICE9PSAnJztcbiAgICBjb25zdCBiYWRnZVR5cGVDbGFzczogc3RyaW5nID0gaGFzQmFkZ2VUZXh0ICYmICdraXQtYmFkZ2UtdGV4dCcgfHwgJ2tpdC1iYWRnZS1zdGF0dXMnO1xuICAgIGNvbnN0IGNzc0NsYXNzZXM6IHN0cmluZyA9IGBraXQtYmFkZ2UtY29udGVudCAke3RoaXMua2l0QmFkZ2VUaGVtZX0gJHtiYWRnZVR5cGVDbGFzc31gO1xuICAgIHRoaXMuYmFkZ2VFbGVtZW50ID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdzcGFuJyk7XG4gICAgdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY2xhc3NMaXN0LmFkZCgna2l0LWJhZGdlJyk7XG4gICAgdGhpcy5yZW5kZXJlci5zZXRBdHRyaWJ1dGUodGhpcy5iYWRnZUVsZW1lbnQsICdjbGFzcycsIGNzc0NsYXNzZXMpO1xuICAgIGlmIChoYXNCYWRnZVRleHQpIHtcbiAgICAgIGNvbnN0IHRleHQ6IHN0cmluZyA9IHRoaXMucmVuZGVyZXIuY3JlYXRlVGV4dChiYWRnZVRleHQudG9TdHJpbmcoKSk7XG4gICAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHRoaXMuYmFkZ2VFbGVtZW50LCB0ZXh0KTtcbiAgICB9XG5cbiAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LCB0aGlzLmJhZGdlRWxlbWVudCk7XG4gIH1cbn1cbiJdfQ==
|
|
57
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2l0LWJhZGdlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWtpdC9zcmMvbGliL2RpcmVjdGl2ZXMva2l0LWJhZGdlL2tpdC1iYWRnZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQWMsS0FBSyxFQUFxQyxNQUFNLGVBQWUsQ0FBQztBQUN4RyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7O0FBS2xELE1BQU0sT0FBTyxpQkFBaUI7SUFrQjVCLFlBQ1UsVUFBc0IsRUFDdEIsUUFBbUI7UUFEbkIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUN0QixhQUFRLEdBQVIsUUFBUSxDQUFXO1FBbkI3Qjs7V0FFRztRQUNNLGlCQUFZLEdBQTZDLEtBQUssRUFBRSxDQUFDO1FBRTFFOztXQUVHO1FBQ00sa0JBQWEsR0FBK0IsS0FBSyxDQUFnQixhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7UUFFakc7O1dBRUc7UUFDTSxvQkFBZSxHQUF5QixLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFckQsaUJBQVksR0FBdUIsSUFBSSxDQUFDO1FBTTlDLE1BQU0sQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDakYsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVPLFdBQVc7UUFDakIsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1lBQ3hELElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsV0FBVyxDQUFDLENBQUM7WUFDekQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQzlFLENBQUM7UUFFRCxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVPLFdBQVc7UUFDakIsTUFBTSxJQUFJLEdBQW9CLElBQUksQ0FBQyxZQUFZLEVBQUUsSUFBSSxFQUFFLENBQUM7UUFDeEQsTUFBTSxPQUFPLEdBQVksSUFBSSxLQUFLLEVBQUUsQ0FBQztRQUNyQyxNQUFNLFNBQVMsR0FBVyxPQUFPLElBQUksZ0JBQWdCLElBQUksa0JBQWtCLENBQUM7UUFDNUUsTUFBTSxVQUFVLEdBQVcscUJBQXFCLElBQUksQ0FBQyxhQUFhLEVBQUUsSUFBSSxTQUFTLEVBQUUsQ0FBQztRQUNwRixJQUFJLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLE9BQU8sRUFBRSxVQUFVLENBQUMsQ0FBQztRQUNuRSxPQUFPLElBQUksSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxhQUFhLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDL0UsQ0FBQztJQUVPLFdBQVc7UUFDakIsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUN2QixPQUFPO1FBQ1QsQ0FBQztRQUVELElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUM1RSxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztJQUMzQixDQUFDOzhHQXZEVSxpQkFBaUI7a0dBQWpCLGlCQUFpQjs7MkZBQWpCLGlCQUFpQjtrQkFIN0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtpQkFDdkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIGVmZmVjdCwgRWxlbWVudFJlZiwgaW5wdXQsIElucHV0U2lnbmFsLCBPbkRlc3Ryb3ksIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2l0QmFkZ2VUaGVtZSB9IGZyb20gJy4va2l0LWJhZGdlLmNvbnN0JztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2tpdEJhZGdlXScsXG59KVxuZXhwb3J0IGNsYXNzIEtpdEJhZGdlRGlyZWN0aXZlIGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgLyoqXG4gICAqIERlZmluZXMgdGhlIGNvbnRlbnQgb2YgdGhlIGJhZGdlXG4gICAqL1xuICByZWFkb25seSBraXRCYWRnZVRleHQ6IElucHV0U2lnbmFsPHN0cmluZyB8IG51bWJlciB8IHVuZGVmaW5lZD4gPSBpbnB1dCgpO1xuXG4gIC8qKlxuICAgKiBEZWZpbmVzIHRoZSB0aGVtZSBjb2xvciBvZiB0aGUgYmFkZ2VcbiAgICovXG4gIHJlYWRvbmx5IGtpdEJhZGdlVGhlbWU6IElucHV0U2lnbmFsPEtpdEJhZGdlVGhlbWU+ID0gaW5wdXQ8S2l0QmFkZ2VUaGVtZT4oS2l0QmFkZ2VUaGVtZS5ERUZBVUxUKTtcblxuICAvKipcbiAgICogRGVmaW5lcyB3aGV0aGVyIHRoZSBiYWRnZSB3aWxsIGJlIHZpc2libGVcbiAgICovXG4gIHJlYWRvbmx5IGtpdEJhZGdlVmlzaWJsZTogSW5wdXRTaWduYWw8Ym9vbGVhbj4gPSBpbnB1dCh0cnVlKTtcblxuICBwcml2YXRlIGJhZGdlRWxlbWVudDogSFRNTEVsZW1lbnQgfCBudWxsID0gbnVsbDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXG4gICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyLFxuICApIHtcbiAgICBlZmZlY3QoKCkgPT4gdGhpcy5raXRCYWRnZVZpc2libGUoKSA/IHRoaXMuY3JlYXRlQmFkZ2UoKSA6IHRoaXMucmVtb3ZlQmFkZ2UoKSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnJlbW92ZUJhZGdlKCk7XG4gIH1cblxuICBwcml2YXRlIGNyZWF0ZUJhZGdlKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5iYWRnZUVsZW1lbnQpIHtcbiAgICAgIHRoaXMuYmFkZ2VFbGVtZW50ID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdzcGFuJyk7XG4gICAgICB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jbGFzc0xpc3QuYWRkKCdraXQtYmFkZ2UnKTtcbiAgICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsIHRoaXMuYmFkZ2VFbGVtZW50KTtcbiAgICB9XG5cbiAgICB0aGlzLnVwZGF0ZUJhZGdlKCk7XG4gIH1cblxuICBwcml2YXRlIHVwZGF0ZUJhZGdlKCk6IHZvaWQge1xuICAgIGNvbnN0IHRleHQ6IHN0cmluZyB8IG51bWJlciA9IHRoaXMua2l0QmFkZ2VUZXh0KCkgPz8gJyc7XG4gICAgY29uc3QgaGFzVGV4dDogYm9vbGVhbiA9IHRleHQgIT09ICcnO1xuICAgIGNvbnN0IHR5cGVDbGFzczogc3RyaW5nID0gaGFzVGV4dCAmJiAna2l0LWJhZGdlLXRleHQnIHx8ICdraXQtYmFkZ2Utc3RhdHVzJztcbiAgICBjb25zdCBjc3NDbGFzc2VzOiBzdHJpbmcgPSBga2l0LWJhZGdlLWNvbnRlbnQgJHt0aGlzLmtpdEJhZGdlVGhlbWUoKX0gJHt0eXBlQ2xhc3N9YDtcbiAgICB0aGlzLnJlbmRlcmVyLnNldEF0dHJpYnV0ZSh0aGlzLmJhZGdlRWxlbWVudCwgJ2NsYXNzJywgY3NzQ2xhc3Nlcyk7XG4gICAgaGFzVGV4dCAmJiB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KHRoaXMuYmFkZ2VFbGVtZW50LCAndGV4dENvbnRlbnQnLCB0ZXh0KTtcbiAgfVxuXG4gIHByaXZhdGUgcmVtb3ZlQmFkZ2UoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLmJhZGdlRWxlbWVudCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMucmVuZGVyZXIucmVtb3ZlQ2hpbGQodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQsIHRoaXMuYmFkZ2VFbGVtZW50KTtcbiAgICB0aGlzLmJhZGdlRWxlbWVudCA9IG51bGw7XG4gIH1cbn1cbiJdfQ==
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, Output, NgModule, Directive, forwardRef, input, signal, TemplateRef, ContentChild, ViewChild, HostListener, Host, Self, Injectable, Inject, ElementRef, ContentChildren, contentChildren, contentChild } from '@angular/core';
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, EventEmitter, ViewEncapsulation, Output, NgModule, Directive, forwardRef, input, signal, TemplateRef, ContentChild, ViewChild, HostListener, Host, Self, Injectable, Inject, effect, ElementRef, ContentChildren, contentChildren, contentChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@progress/kendo-angular-buttons';
|
|
4
4
|
import { ButtonModule, ButtonGroupModule } from '@progress/kendo-angular-buttons';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -267,11 +267,11 @@ class KitButtonComponent {
|
|
|
267
267
|
this.KitSvgIconType = KitSvgIconType;
|
|
268
268
|
}
|
|
269
269
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
270
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-
|
|
270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KitButtonComponent, selector: "kit-button", inputs: { disabled: "disabled", label: "label", type: "type", icon: "icon", iconType: "iconType", kind: "kind", iconPosition: "iconPosition", buttonClass: "buttonClass", active: "active" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: KitSvgIconComponent, selector: "kit-svg-icon", inputs: ["icon", "iconClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
271
271
|
}
|
|
272
272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitButtonComponent, decorators: [{
|
|
273
273
|
type: Component,
|
|
274
|
-
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-
|
|
274
|
+
args: [{ selector: 'kit-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"kit-button\">\n <button kendoButton\n [disabled]=\"disabled\"\n [class.no-label]=\"!label\"\n [class.active]=\"active\"\n [ngClass]=\"[type, kind, iconPosition, buttonClass]\"\n (click)=\"clicked.emit()\">\n {{ label }}\n @if (icon) {\n <kit-svg-icon class=\"kit-button-icon\"\n [icon]=\"icon\"\n [ngClass]=\"iconType ?? KitSvgIconType.FILL\"\n ></kit-svg-icon>\n }\n </button>\n</div>\n", styles: [".kit-button .k-button-text{display:flex;align-items:center;gap:8px}.kit-button-icon{display:block}.kit-button .k-button{font-weight:400;border:1px solid transparent;transition:none}.kit-button .k-button:focus{box-shadow:none}.kit-button .k-button:disabled{color:var(--ui-kit-color-grey-12);border:1px solid var(--ui-kit-color-grey-11);background:var(--ui-kit-color-grey-13)}.kit-button .k-button:disabled .kit-button-icon.fill{fill:var(--ui-kit-color-grey-12);stroke:none}.kit-button .k-button:disabled .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-12);fill:none}.kit-button .primary{color:var(--ui-kit-color-white);background:var(--ui-kit-color-main)}.kit-button .primary:hover{background:var(--ui-kit-color-hover)}.kit-button .primary.active,.kit-button .primary:active{background:var(--ui-kit-color-main)}.kit-button .primary .kit-button-icon.fill{fill:var(--ui-kit-color-white);stroke:none}.kit-button .primary .kit-button-icon.stroke{stroke:var(--ui-kit-color-white);fill:none}.kit-button .ghost{color:var(--ui-kit-color-grey-10);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .ghost:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .ghost:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .ghost.active,.kit-button .ghost:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-grey-11);background:var(--ui-kit-color-white)}.kit-button .ghost.active .kit-button-icon.fill,.kit-button .ghost:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .ghost.active .kit-button-icon.stroke,.kit-button .ghost:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .ghost .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .ghost .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .text{color:var(--ui-kit-color-grey-10);background:none}.kit-button .text:disabled{border:none;background:none}.kit-button .text:hover,.kit-button .text.active,.kit-button .text:active{background:var(--ui-kit-color-grey-13)}.kit-button .text:hover{color:var(--ui-kit-color-hover)}.kit-button .text:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .text:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .text.active,.kit-button .text:active{color:var(--ui-kit-color-main)}.kit-button .text.active .kit-button-icon.fill,.kit-button .text:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .text.active .kit-button-icon.stroke,.kit-button .text:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .text .kit-button-icon.fill{fill:var(--ui-kit-color-grey-10);stroke:none}.kit-button .text .kit-button-icon.stroke{stroke:var(--ui-kit-color-grey-10);fill:none}.kit-button .link{color:var(--ui-kit-color-main);background:none}.kit-button .link:disabled{border:none;background:none}.kit-button .link:hover{color:var(--ui-kit-color-hover)}.kit-button .link:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .link:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .link.active,.kit-button .link:active{color:var(--ui-kit-color-main)}.kit-button .link.active .kit-button-icon.fill,.kit-button .link:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link.active .kit-button-icon.stroke,.kit-button .link:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .link .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .link .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main);border-style:dashed;background:var(--ui-kit-color-white)}.kit-button .dashed:disabled{border-style:dashed}.kit-button .dashed:hover{color:var(--ui-kit-color-hover);border-color:var(--ui-kit-color-hover)}.kit-button .dashed:hover .kit-button-icon.fill{fill:var(--ui-kit-color-hover);stroke:none}.kit-button .dashed:hover .kit-button-icon.stroke{stroke:var(--ui-kit-color-hover);fill:none}.kit-button .dashed.active,.kit-button .dashed:active{color:var(--ui-kit-color-main);border-color:var(--ui-kit-color-main)}.kit-button .dashed.active .kit-button-icon.fill,.kit-button .dashed:active .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed.active .kit-button-icon.stroke,.kit-button .dashed:active .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .dashed .kit-button-icon.fill{fill:var(--ui-kit-color-main);stroke:none}.kit-button .dashed .kit-button-icon.stroke{stroke:var(--ui-kit-color-main);fill:none}.kit-button .large{padding:0 16px;height:40px;font-size:16px;border-radius:8px}.kit-button .large .kit-button-icon{width:18px;height:18px}.kit-button .medium{padding:0 16px;height:32px;font-size:14px;border-radius:6px}.kit-button .medium .kit-button-icon{width:16px;height:16px}.kit-button .small{padding:0 8px;height:24px;font-size:14px;border-radius:4px}.kit-button .small .kit-button-icon{width:14px;height:14px}.kit-button .leading .k-button-text{flex-direction:row-reverse}.kit-button .trailing .k-button-text{flex-direction:row}.kit-button .no-label.large{padding:0 11px}.kit-button .no-label.medium{padding:0 8px}.kit-button .no-label.small{padding:0 6px}\n"] }]
|
|
275
275
|
}], propDecorators: { disabled: [{
|
|
276
276
|
type: Input
|
|
277
277
|
}], label: [{
|
|
@@ -4091,47 +4091,56 @@ class KitBadgeDirective {
|
|
|
4091
4091
|
constructor(elementRef, renderer) {
|
|
4092
4092
|
this.elementRef = elementRef;
|
|
4093
4093
|
this.renderer = renderer;
|
|
4094
|
+
/**
|
|
4095
|
+
* Defines the content of the badge
|
|
4096
|
+
*/
|
|
4097
|
+
this.kitBadgeText = input();
|
|
4094
4098
|
/**
|
|
4095
4099
|
* Defines the theme color of the badge
|
|
4096
4100
|
*/
|
|
4097
|
-
this.kitBadgeTheme = KitBadgeTheme.DEFAULT;
|
|
4101
|
+
this.kitBadgeTheme = input(KitBadgeTheme.DEFAULT);
|
|
4102
|
+
/**
|
|
4103
|
+
* Defines whether the badge will be visible
|
|
4104
|
+
*/
|
|
4105
|
+
this.kitBadgeVisible = input(true);
|
|
4098
4106
|
this.badgeElement = null;
|
|
4099
|
-
|
|
4100
|
-
ngOnInit() {
|
|
4101
|
-
this.createBadge();
|
|
4107
|
+
effect(() => this.kitBadgeVisible() ? this.createBadge() : this.removeBadge());
|
|
4102
4108
|
}
|
|
4103
4109
|
ngOnDestroy() {
|
|
4104
|
-
|
|
4105
|
-
this.renderer.removeChild(this.elementRef.nativeElement, this.badgeElement);
|
|
4106
|
-
}
|
|
4110
|
+
this.removeBadge();
|
|
4107
4111
|
}
|
|
4108
4112
|
createBadge() {
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
this.
|
|
4113
|
+
if (!this.badgeElement) {
|
|
4114
|
+
this.badgeElement = this.renderer.createElement('span');
|
|
4115
|
+
this.elementRef.nativeElement.classList.add('kit-badge');
|
|
4116
|
+
this.renderer.appendChild(this.elementRef.nativeElement, this.badgeElement);
|
|
4117
|
+
}
|
|
4118
|
+
this.updateBadge();
|
|
4119
|
+
}
|
|
4120
|
+
updateBadge() {
|
|
4121
|
+
const text = this.kitBadgeText() ?? '';
|
|
4122
|
+
const hasText = text !== '';
|
|
4123
|
+
const typeClass = hasText && 'kit-badge-text' || 'kit-badge-status';
|
|
4124
|
+
const cssClasses = `kit-badge-content ${this.kitBadgeTheme()} ${typeClass}`;
|
|
4115
4125
|
this.renderer.setAttribute(this.badgeElement, 'class', cssClasses);
|
|
4116
|
-
|
|
4117
|
-
|
|
4118
|
-
|
|
4126
|
+
hasText && this.renderer.setProperty(this.badgeElement, 'textContent', text);
|
|
4127
|
+
}
|
|
4128
|
+
removeBadge() {
|
|
4129
|
+
if (!this.badgeElement) {
|
|
4130
|
+
return;
|
|
4119
4131
|
}
|
|
4120
|
-
this.renderer.
|
|
4132
|
+
this.renderer.removeChild(this.elementRef.nativeElement, this.badgeElement);
|
|
4133
|
+
this.badgeElement = null;
|
|
4121
4134
|
}
|
|
4122
4135
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitBadgeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4123
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
4136
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.6", type: KitBadgeDirective, selector: "[kitBadge]", inputs: { kitBadgeText: { classPropertyName: "kitBadgeText", publicName: "kitBadgeText", isSignal: true, isRequired: false, transformFunction: null }, kitBadgeTheme: { classPropertyName: "kitBadgeTheme", publicName: "kitBadgeTheme", isSignal: true, isRequired: false, transformFunction: null }, kitBadgeVisible: { classPropertyName: "kitBadgeVisible", publicName: "kitBadgeVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
4124
4137
|
}
|
|
4125
4138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitBadgeDirective, decorators: [{
|
|
4126
4139
|
type: Directive,
|
|
4127
4140
|
args: [{
|
|
4128
4141
|
selector: '[kitBadge]',
|
|
4129
4142
|
}]
|
|
4130
|
-
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }]
|
|
4131
|
-
type: Input
|
|
4132
|
-
}], kitBadgeTheme: [{
|
|
4133
|
-
type: Input
|
|
4134
|
-
}] } });
|
|
4143
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
|
|
4135
4144
|
|
|
4136
4145
|
class KitBadgeModule {
|
|
4137
4146
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KitBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|