kaspacom-ui
Version:
UI Component Library for KaspaCom DeFi Applications
380 lines (375 loc) • 362 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, Inject, Component, input, output, ContentChild, EventEmitter, forwardRef, Output, inject, signal, Injectable, effect, ViewChild, ChangeDetectionStrategy, PLATFORM_ID, HostListener, Directive } from '@angular/core';
import * as i1 from '@angular/common';
import { DOCUMENT, NgStyle, NgClass, CommonModule, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
import { trigger, transition, style, animate, state } from '@angular/animations';
import * as i2 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
import { Overlay, OverlayModule } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { Subject, debounceTime, takeUntil, first, BehaviorSubject, Subscription } from 'rxjs';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
class KcIconComponent {
constructor(_document) {
this._document = _document;
this.disabled = false;
this.size = 'sm';
this.iconSize = 'sm';
this.isDefaultColor = true;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcIconComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: KcIconComponent, isStandalone: true, selector: "kc-icon", inputs: { iconClass: "iconClass", disabled: "disabled", size: "size", iconSize: "iconSize", classes: "classes", isDefaultColor: "isDefaultColor", color: "color" }, ngImport: i0, template: "<div\r\n [class]=\"'icon-wrapper ' + classes\"\r\n [ngStyle]=\"{color: color ? color : ''}\"\r\n [ngClass]=\"{\r\n disabled: disabled,\r\n xs: size === 'xs',\r\n sm: size === 'sm',\r\n md: size === 'md',\r\n lg: size === 'lg',\r\n xlg: size === 'xlg',\r\n 'default-color': isDefaultColor\r\n }\"\r\n>\r\n <div class=\"{{ iconClass }}\" [ngClass]=\"{icon: color ? false : true}\"></div>\r\n</div>\r\n", styles: [".icon-wrapper{display:flex;align-items:center;justify-content:center;transition:all .2s ease}.icon-wrapper.default-color{color:var(--kaspa-20)}.icon-wrapper.disabled{color:var(--gray-60);opacity:.5}.icon-wrapper.xxs{width:12px;height:12px;line-height:12px}.icon-wrapper.xxs div{font-size:12px}.icon-wrapper.xs{width:16px;height:16px;line-height:16px}.icon-wrapper.xs div{font-size:16px}.icon-wrapper.sm{width:20px;height:20px;line-height:20px}.icon-wrapper.sm div{font-size:20px}.icon-wrapper.md{width:24px;height:24px;line-height:24px}.icon-wrapper.md div{font-size:24px}.icon-wrapper.lg{width:32px;height:32px;line-height:32px}.icon-wrapper.lg div{font-size:32px}.icon-wrapper.xlg{width:68px;height:68px;line-height:68px}.icon-wrapper.xlg div{font-size:68px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcIconComponent, decorators: [{
type: Component,
args: [{ selector: 'kc-icon', standalone: true, imports: [NgStyle, NgClass], template: "<div\r\n [class]=\"'icon-wrapper ' + classes\"\r\n [ngStyle]=\"{color: color ? color : ''}\"\r\n [ngClass]=\"{\r\n disabled: disabled,\r\n xs: size === 'xs',\r\n sm: size === 'sm',\r\n md: size === 'md',\r\n lg: size === 'lg',\r\n xlg: size === 'xlg',\r\n 'default-color': isDefaultColor\r\n }\"\r\n>\r\n <div class=\"{{ iconClass }}\" [ngClass]=\"{icon: color ? false : true}\"></div>\r\n</div>\r\n", styles: [".icon-wrapper{display:flex;align-items:center;justify-content:center;transition:all .2s ease}.icon-wrapper.default-color{color:var(--kaspa-20)}.icon-wrapper.disabled{color:var(--gray-60);opacity:.5}.icon-wrapper.xxs{width:12px;height:12px;line-height:12px}.icon-wrapper.xxs div{font-size:12px}.icon-wrapper.xs{width:16px;height:16px;line-height:16px}.icon-wrapper.xs div{font-size:16px}.icon-wrapper.sm{width:20px;height:20px;line-height:20px}.icon-wrapper.sm div{font-size:20px}.icon-wrapper.md{width:24px;height:24px;line-height:24px}.icon-wrapper.md div{font-size:24px}.icon-wrapper.lg{width:32px;height:32px;line-height:32px}.icon-wrapper.lg div{font-size:32px}.icon-wrapper.xlg{width:68px;height:68px;line-height:68px}.icon-wrapper.xlg div{font-size:68px}\n"] }]
}], ctorParameters: () => [{ type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }], propDecorators: { iconClass: [{
type: Input
}], disabled: [{
type: Input
}], size: [{
type: Input
}], iconSize: [{
type: Input
}], classes: [{
type: Input
}], isDefaultColor: [{
type: Input
}], color: [{
type: Input
}] } });
class KcBaseModalComponent {
constructor(el) {
this.el = el;
// Inputs
this.showCloseButton = input(true);
this.title = input(undefined);
this.titleIconClass = input(undefined);
this.showHeaderSeperator = input(true);
this.autoWidth = input(false);
// Component size constants for the template
this.componentSizes = {
XS: 'xs',
SM: 'sm',
MD: 'md',
LG: 'lg',
XLG: 'xlg'
};
// Outputs
this.close = output();
}
onClose() {
this.el.nativeElement.classList.add('closing');
setTimeout(() => {
this.close.emit();
}, 300);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcBaseModalComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: KcBaseModalComponent, isStandalone: true, selector: "kc-base-modal", inputs: { showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleIconClass: { classPropertyName: "titleIconClass", publicName: "titleIconClass", isSignal: true, isRequired: false, transformFunction: null }, showHeaderSeperator: { classPropertyName: "showHeaderSeperator", publicName: "showHeaderSeperator", isSignal: true, isRequired: false, transformFunction: null }, autoWidth: { classPropertyName: "autoWidth", publicName: "autoWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"modal-overlay\">\n <div class=\"modal-container\" [class.auto-width]=\"autoWidth()\">\n <div class=\"modal-header\" [class.header-separator]=\"showHeaderSeperator()\">\n <div class=\"modal-title\">\n <span *ngIf=\"titleIconClass()\" class=\"modal-title-icon\">\n <kc-icon [iconClass]=\"titleIconClass()!\" [size]=\"componentSizes['MD']\"></kc-icon>\n </span>\n <span *ngIf=\"title()\" class=\"modal-title-text typo-title-3\">{{ title() }}</span>\n </div>\n <div class=\"modal-header-controls\">\n <ng-content select=\"[rightSideSlot]\"></ng-content>\n <button *ngIf=\"showCloseButton()\" class=\"close-button\" (click)=\"onClose()\">\n <kc-icon iconClass=\"icon-close\"></kc-icon>\n </button>\n </div>\n </div>\n <div class=\"modal-content typo-text-3\">\n <ng-content></ng-content>\n </div>\n </div>\n</div> ", styles: [":host{display:contents}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;animation:fadeIn .25s ease-out forwards}@media (max-width: 480px){.modal-overlay{align-items:flex-end}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.modal-container{background-color:var(--gray-10);border:1px solid var(--gray-20);border-radius:16px;width:90%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 20px #0006;transform-origin:bottom center;will-change:transform,opacity;animation:slideUp .35s ease-out forwards}.modal-container.auto-width{width:auto;min-width:300px;max-width:90vw}@media (max-width: 768px){.modal-container.auto-width{min-width:280px;max-width:95vw}}@media (max-width: 480px){.modal-container.auto-width{width:100%;min-width:unset;max-width:unset}}@media (max-width: 768px){.modal-container{width:95%;max-height:95vh}}@media (max-width: 480px){.modal-container{width:100%;height:90vh;min-height:90vh;max-height:90vh;border-radius:16px 16px 0 0}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background-color:transparent}.modal-header.header-separator{border-bottom:1px solid var(--gray-20)}.modal-title{display:flex;align-items:center;gap:10px}.modal-title .modal-title-icon{display:flex;align-items:center;color:var(--gray-45)}.modal-title .modal-title-text{color:var(--primary-text)}.modal-header-controls{display:flex;align-items:center;gap:12px}.close-button{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:background-color .2s ease}.close-button:hover{background-color:var(--universal-tertiary-color)}.close-button kc-icon{color:var(--gray-60);font-size:20px}.modal-content{flex:1;padding:20px;overflow-y:auto;width:100%}:host-context(.closing) .modal-overlay{animation:fadeOut .2s ease-in forwards}:host-context(.closing) .modal-container{animation:slideDown .3s ease-in forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KcIconComponent, selector: "kc-icon", inputs: ["iconClass", "disabled", "size", "iconSize", "classes", "isDefaultColor", "color"] }], animations: [
trigger('modalSlide', [
transition(':enter', [
style({ transform: 'translateY(100%)', opacity: 0 }),
animate('350ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
]),
transition(':leave', [
animate('300ms ease-in', style({ transform: 'translateY(100%)', opacity: 0 }))
])
]),
trigger('overlayFade', [
transition(':enter', [
style({ opacity: 0 }),
animate('250ms ease-out', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms ease-in', style({ opacity: 0 }))
])
])
] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcBaseModalComponent, decorators: [{
type: Component,
args: [{ selector: 'kc-base-modal', standalone: true, imports: [CommonModule, KcIconComponent], animations: [
trigger('modalSlide', [
transition(':enter', [
style({ transform: 'translateY(100%)', opacity: 0 }),
animate('350ms ease-out', style({ transform: 'translateY(0)', opacity: 1 }))
]),
transition(':leave', [
animate('300ms ease-in', style({ transform: 'translateY(100%)', opacity: 0 }))
])
]),
trigger('overlayFade', [
transition(':enter', [
style({ opacity: 0 }),
animate('250ms ease-out', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms ease-in', style({ opacity: 0 }))
])
])
], template: "<div class=\"modal-overlay\">\n <div class=\"modal-container\" [class.auto-width]=\"autoWidth()\">\n <div class=\"modal-header\" [class.header-separator]=\"showHeaderSeperator()\">\n <div class=\"modal-title\">\n <span *ngIf=\"titleIconClass()\" class=\"modal-title-icon\">\n <kc-icon [iconClass]=\"titleIconClass()!\" [size]=\"componentSizes['MD']\"></kc-icon>\n </span>\n <span *ngIf=\"title()\" class=\"modal-title-text typo-title-3\">{{ title() }}</span>\n </div>\n <div class=\"modal-header-controls\">\n <ng-content select=\"[rightSideSlot]\"></ng-content>\n <button *ngIf=\"showCloseButton()\" class=\"close-button\" (click)=\"onClose()\">\n <kc-icon iconClass=\"icon-close\"></kc-icon>\n </button>\n </div>\n </div>\n <div class=\"modal-content typo-text-3\">\n <ng-content></ng-content>\n </div>\n </div>\n</div> ", styles: [":host{display:contents}.modal-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;animation:fadeIn .25s ease-out forwards}@media (max-width: 480px){.modal-overlay{align-items:flex-end}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}.modal-container{background-color:var(--gray-10);border:1px solid var(--gray-20);border-radius:16px;width:90%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 20px #0006;transform-origin:bottom center;will-change:transform,opacity;animation:slideUp .35s ease-out forwards}.modal-container.auto-width{width:auto;min-width:300px;max-width:90vw}@media (max-width: 768px){.modal-container.auto-width{min-width:280px;max-width:95vw}}@media (max-width: 480px){.modal-container.auto-width{width:100%;min-width:unset;max-width:unset}}@media (max-width: 768px){.modal-container{width:95%;max-height:95vh}}@media (max-width: 480px){.modal-container{width:100%;height:90vh;min-height:90vh;max-height:90vh;border-radius:16px 16px 0 0}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background-color:transparent}.modal-header.header-separator{border-bottom:1px solid var(--gray-20)}.modal-title{display:flex;align-items:center;gap:10px}.modal-title .modal-title-icon{display:flex;align-items:center;color:var(--gray-45)}.modal-title .modal-title-text{color:var(--primary-text)}.modal-header-controls{display:flex;align-items:center;gap:12px}.close-button{background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:background-color .2s ease}.close-button:hover{background-color:var(--universal-tertiary-color)}.close-button kc-icon{color:var(--gray-60);font-size:20px}.modal-content{flex:1;padding:20px;overflow-y:auto;width:100%}:host-context(.closing) .modal-overlay{animation:fadeOut .2s ease-in forwards}:host-context(.closing) .modal-container{animation:slideDown .3s ease-in forwards}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }] });
class KcSpinnerComponent {
constructor() {
this.size = input('md');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: KcSpinnerComponent, isStandalone: true, selector: "kc-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
<div class="spinner" [ngClass]="size()"></div>
`, isInline: true, styles: [".spinner{--spinner-color: var(--white, #ffffff);border:2px solid rgba(255,255,255,.1);border-radius:50%;border-top:2px solid var(--spinner-color);animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xs{width:12px;height:12px;border-width:1px}.sm{width:16px;height:16px;border-width:2px}.md{width:20px;height:20px;border-width:2px}.lg{width:24px;height:24px;border-width:3px}.xlg{width:32px;height:32px;border-width:3px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcSpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'kc-spinner', standalone: true, imports: [NgClass], template: `
<div class="spinner" [ngClass]="size()"></div>
`, styles: [".spinner{--spinner-color: var(--white, #ffffff);border:2px solid rgba(255,255,255,.1);border-radius:50%;border-top:2px solid var(--spinner-color);animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.xs{width:12px;height:12px;border-width:1px}.sm{width:16px;height:16px;border-width:2px}.md{width:20px;height:20px;border-width:2px}.lg{width:24px;height:24px;border-width:3px}.xlg{width:32px;height:32px;border-width:3px}\n"] }]
}] });
class KcButtonComponent {
constructor() {
this.text = input('');
this.variant = input('primary');
this.size = input('md');
this.isLoading = input(false);
this.isFullWidth = input(false);
this.isDisabled = input(false);
this.role = input(null);
this.prefixIcon = input(undefined);
this.suffixIcon = input(undefined);
this.prefixIconColor = input(undefined);
this.suffixIconColor = input(undefined);
this.loadingText = input(undefined);
this.buttonClick = output();
}
handleClick(event) {
if (!this.isDisabled() && !this.isLoading()) {
this.buttonClick.emit(event);
}
}
getSpinnerSize() {
// Map button size to appropriate spinner size
const sizeMap = {
'xs': 'xs',
'sm': 'xs',
'md': 'sm',
'lg': 'md',
'xlg': 'lg'
};
return sizeMap[this.size()];
}
getTypographyClass() {
// Map button size to appropriate typography class
const typographyMap = {
'xs': 'typo-button-small',
'sm': 'typo-button-small',
'md': 'typo-button-medium',
'lg': 'typo-button-large',
'xlg': 'typo-button-large'
};
return typographyMap[this.size()];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: KcButtonComponent, isStandalone: true, selector: "kc-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isFullWidth: { classPropertyName: "isFullWidth", publicName: "isFullWidth", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixIconColor: { classPropertyName: "prefixIconColor", publicName: "prefixIconColor", isSignal: true, isRequired: false, transformFunction: null }, suffixIconColor: { classPropertyName: "suffixIconColor", publicName: "suffixIconColor", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "style.display": "isFullWidth() ? 'block' : 'inline-block'", "style.width": "isFullWidth() ? '100%' : 'auto'" } }, queries: [{ propertyName: "prefixTemplateRef", first: true, predicate: ["prefixTemplate"], descendants: true }], ngImport: i0, template: `
<button
class="app-button"
[ngClass]="[
variant(),
size(),
isFullWidth() ? 'full-width' : '',
isDisabled() || isLoading() ? 'disabled' : '',
isLoading() ? 'loading' : '',
role() ? 'role-' + role() : '',
getTypographyClass()
]"
[disabled]="isDisabled() || isLoading()"
(click)="handleClick($event)"
>
<div class="button-content">
@if (isLoading()) {
<div class="loading-content">
<kc-spinner [size]="getSpinnerSize()"></kc-spinner>
@if (loadingText()) {
<span>{{ loadingText() }}</span>
}
</div>
} @else {
<div class="button-inner-content">
@if (prefixIcon()) {
<kc-icon [iconClass]="prefixIcon()!" [color]="prefixIconColor()"></kc-icon>
}
@if (prefixTemplateRef) {
<ng-container [ngTemplateOutlet]="prefixTemplateRef"></ng-container>
}
@if (text()) {
<span>{{ text() }}</span>
}
@if (suffixIcon()) {
<kc-icon [iconClass]="suffixIcon()!" [color]="suffixIconColor()"></kc-icon>
}
</div>
}
</div>
</button>
`, isInline: true, styles: [".app-button{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border:none;border-radius:100px;cursor:pointer;transition:all .2s ease;position:relative;width:100%;transform:translateY(-4px);box-shadow:0 4px #0000004d,0 5px 4px #00000040}.app-button:focus{outline:none;box-shadow:0 4px #0000004d,0 5px 4px #00000040,0 0 0 3px #6bc7ba66}.app-button:active:not(.disabled){transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 2px #0003;font-weight:600}.app-button:hover:not(.disabled){filter:brightness(1.1);box-shadow:0 4px #0000004d,0 6px 6px #00000059}.xs{padding:4px 12px;font-size:.75rem;min-height:28px}.sm{padding:6px 16px;font-size:.8125rem;min-height:32px}.md{padding:8px 20px;font-size:.875rem;min-height:36px}.lg{padding:10px 24px;font-size:1rem;min-height:44px}.xlg{padding:12px 32px;font-size:1.125rem;min-height:52px}.primary{background-color:var(--kaspa-20);color:var(--vampire-black);box-shadow:0 4px #0000004d,0 5px 5px #0000004d}.primary:active:not(.disabled){background-color:var(--kaspa-30);transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 2px #00000040}.primary:focus{box-shadow:0 4px #0000004d,0 5px 5px #0000004d,0 0 0 3px #6bc7ba66}.primary app-spinner{--spinner-color: var(--vampire-black, #000000)}.secondary{background-color:var(--purple-20);color:var(--white);box-shadow:0 4px #0000004d,0 5px 5px #0000004d}.secondary:hover:not(.disabled){filter:brightness(1.1)}.secondary:active:not(.disabled){background-color:var(--purple-30);transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 2px #00000040}.secondary:focus{box-shadow:0 4px #0000004d,0 5px 5px #0000004d,0 0 0 3px #b43aed66}.secondary app-spinner{--spinner-color: var(--white, #ffffff)}.tertiary{background-color:var(--universal-tertiary-color);color:var(--white);border:1px solid var(--universal-tertiary-color);box-shadow:0 4px #00000021,0 5px 4px #0000001a}.tertiary:hover:not(.disabled){background-color:var(--universal-tertiary-2);border-color:var(--universal-tertiary-2);color:var(--white)}.tertiary:active:not(.disabled){background-color:var(--universal-tertiary-2);transform:translateY(-1px);box-shadow:0 1px #0000001a,0 2px 1px #0000001a;color:var(--white)}.tertiary:focus{box-shadow:0 4px #00000012,0 5px 4px #0000001a,0 0 0 3px #ffffff12}.tertiary app-spinner{--spinner-color: var(--white, #ffffff)}.gradient_1{background:var(--gradient-1);color:var(--vampire-black);box-shadow:0 4px #0000004d,0 5px 6px #0000004d;position:relative;z-index:1;background-size:100% 100%;transition:all .3s ease}.gradient_1:before{content:\"\";position:absolute;inset:0;background:var(--gradient-1);background-size:200% 100%;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s ease;filter:brightness(1.1)}.gradient_1:hover:not(.disabled){box-shadow:0 4px #0000004d,0 5px 8px #0006;background-size:150% 100%}.gradient_1:hover:not(.disabled):before{opacity:1;animation:gradient-slide 3s linear infinite}.gradient_1:active:not(.disabled){transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 3px #0000004d}.gradient_1:focus{box-shadow:0 4px #0000004d,0 5px 6px #0000004d,0 0 0 3px #b43aed4d}.gradient_1 app-spinner{--spinner-color: var(--vampire-black, #000000)}.gradient_2{background:var(--gradient-2);color:var(--white);box-shadow:0 4px #0000004d,0 5px 6px #0000004d;position:relative;z-index:1;background-size:200% 100%;transition:all .3s ease}.gradient_2:before{content:\"\";position:absolute;inset:0;background:var(--gradient-2);background-size:200% 100%;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s ease;filter:brightness(1.1)}.gradient_2:hover:not(.disabled){box-shadow:0 4px #0000004d,0 5px 8px #0006}.gradient_2:hover:not(.disabled):before{opacity:1;animation:gradient-slide-reverse 4s linear infinite}.gradient_2:active:not(.disabled){transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 3px #0000004d}.gradient_2:focus{box-shadow:0 4px #0000004d,0 5px 6px #0000004d,0 0 0 3px #7477ff66}.gradient_2 app-spinner{--spinner-color: var(--white, #ffffff)}@keyframes gradient-slide{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes gradient-slide-reverse{0%{background-position:100% 50%}50%{background-position:0% 50%}to{background-position:100% 50%}}.app-button.disabled{cursor:not-allowed;pointer-events:none;box-shadow:none!important;background-color:var(--gray-40)!important;color:var(--gray-30)!important;opacity:.7;border-color:transparent!important}.app-button.disabled.primary,.app-button.disabled.secondary,.app-button.disabled.tertiary,.app-button.disabled.gradient_1,.app-button.disabled.gradient_2,.app-button.disabled[class*=role-]{filter:grayscale(90%);background-image:none!important}.app-button.disabled app-spinner{--spinner-color: var(--gray-30) !important}.hidden{visibility:hidden}.loading{position:relative;overflow:hidden}.loading:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff26,#ffffff80,#ffffff26);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;pointer-events:none}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.role-success{background-color:var(--green-20)!important;color:var(--vampire-black)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-success:active:not(.disabled){background-color:var(--green-30)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-success:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #96ffa566!important}.role-success app-spinner{--spinner-color: var(--vampire-black, #000000) !important}.role-info{background-color:var(--blue-20)!important;color:var(--white)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-info:active:not(.disabled){background-color:var(--blue-30)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-info:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #7477ff66!important}.role-info app-spinner{--spinner-color: var(--white, #ffffff) !important}.role-warning{background-color:var(--orange-20)!important;color:var(--vampire-black)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-warning:active:not(.disabled){background-color:var(--orange-30)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-warning:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #ffd27d66!important}.role-warning app-spinner{--spinner-color: var(--vampire-black, #000000) !important}.role-danger{background-color:var(--red-20)!important;color:var(--white)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-danger:active:not(.disabled){background-color:var(--red-30)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-danger:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #ff747466!important}.role-danger app-spinner{--spinner-color: var(--white, #ffffff) !important}.role-neutral{background-color:var(--gray-45)!important;color:var(--white)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-neutral:active:not(.disabled){background-color:var(--gray-60)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-neutral:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #bdbdbd66!important}.role-neutral app-spinner{--spinner-color: var(--white, #ffffff) !important}.button-content{display:flex;align-items:center;justify-content:center;width:100%;position:relative}.button-inner-content,.loading-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.centered-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KcSpinnerComponent, selector: "kc-spinner", inputs: ["size"] }, { kind: "component", type: KcIconComponent, selector: "kc-icon", inputs: ["iconClass", "disabled", "size", "iconSize", "classes", "isDefaultColor", "color"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'kc-button', standalone: true, imports: [NgClass, NgTemplateOutlet, KcSpinnerComponent, KcIconComponent], template: `
<button
class="app-button"
[ngClass]="[
variant(),
size(),
isFullWidth() ? 'full-width' : '',
isDisabled() || isLoading() ? 'disabled' : '',
isLoading() ? 'loading' : '',
role() ? 'role-' + role() : '',
getTypographyClass()
]"
[disabled]="isDisabled() || isLoading()"
(click)="handleClick($event)"
>
<div class="button-content">
@if (isLoading()) {
<div class="loading-content">
<kc-spinner [size]="getSpinnerSize()"></kc-spinner>
@if (loadingText()) {
<span>{{ loadingText() }}</span>
}
</div>
} @else {
<div class="button-inner-content">
@if (prefixIcon()) {
<kc-icon [iconClass]="prefixIcon()!" [color]="prefixIconColor()"></kc-icon>
}
@if (prefixTemplateRef) {
<ng-container [ngTemplateOutlet]="prefixTemplateRef"></ng-container>
}
@if (text()) {
<span>{{ text() }}</span>
}
@if (suffixIcon()) {
<kc-icon [iconClass]="suffixIcon()!" [color]="suffixIconColor()"></kc-icon>
}
</div>
}
</div>
</button>
`, host: {
'[style.display]': "isFullWidth() ? 'block' : 'inline-block'",
'[style.width]': "isFullWidth() ? '100%' : 'auto'"
}, styles: [".app-button{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;border:none;border-radius:100px;cursor:pointer;transition:all .2s ease;position:relative;width:100%;transform:translateY(-4px);box-shadow:0 4px #0000004d,0 5px 4px #00000040}.app-button:focus{outline:none;box-shadow:0 4px #0000004d,0 5px 4px #00000040,0 0 0 3px #6bc7ba66}.app-button:active:not(.disabled){transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 2px #0003;font-weight:600}.app-button:hover:not(.disabled){filter:brightness(1.1);box-shadow:0 4px #0000004d,0 6px 6px #00000059}.xs{padding:4px 12px;font-size:.75rem;min-height:28px}.sm{padding:6px 16px;font-size:.8125rem;min-height:32px}.md{padding:8px 20px;font-size:.875rem;min-height:36px}.lg{padding:10px 24px;font-size:1rem;min-height:44px}.xlg{padding:12px 32px;font-size:1.125rem;min-height:52px}.primary{background-color:var(--kaspa-20);color:var(--vampire-black);box-shadow:0 4px #0000004d,0 5px 5px #0000004d}.primary:active:not(.disabled){background-color:var(--kaspa-30);transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 2px #00000040}.primary:focus{box-shadow:0 4px #0000004d,0 5px 5px #0000004d,0 0 0 3px #6bc7ba66}.primary app-spinner{--spinner-color: var(--vampire-black, #000000)}.secondary{background-color:var(--purple-20);color:var(--white);box-shadow:0 4px #0000004d,0 5px 5px #0000004d}.secondary:hover:not(.disabled){filter:brightness(1.1)}.secondary:active:not(.disabled){background-color:var(--purple-30);transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 2px #00000040}.secondary:focus{box-shadow:0 4px #0000004d,0 5px 5px #0000004d,0 0 0 3px #b43aed66}.secondary app-spinner{--spinner-color: var(--white, #ffffff)}.tertiary{background-color:var(--universal-tertiary-color);color:var(--white);border:1px solid var(--universal-tertiary-color);box-shadow:0 4px #00000021,0 5px 4px #0000001a}.tertiary:hover:not(.disabled){background-color:var(--universal-tertiary-2);border-color:var(--universal-tertiary-2);color:var(--white)}.tertiary:active:not(.disabled){background-color:var(--universal-tertiary-2);transform:translateY(-1px);box-shadow:0 1px #0000001a,0 2px 1px #0000001a;color:var(--white)}.tertiary:focus{box-shadow:0 4px #00000012,0 5px 4px #0000001a,0 0 0 3px #ffffff12}.tertiary app-spinner{--spinner-color: var(--white, #ffffff)}.gradient_1{background:var(--gradient-1);color:var(--vampire-black);box-shadow:0 4px #0000004d,0 5px 6px #0000004d;position:relative;z-index:1;background-size:100% 100%;transition:all .3s ease}.gradient_1:before{content:\"\";position:absolute;inset:0;background:var(--gradient-1);background-size:200% 100%;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s ease;filter:brightness(1.1)}.gradient_1:hover:not(.disabled){box-shadow:0 4px #0000004d,0 5px 8px #0006;background-size:150% 100%}.gradient_1:hover:not(.disabled):before{opacity:1;animation:gradient-slide 3s linear infinite}.gradient_1:active:not(.disabled){transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 3px #0000004d}.gradient_1:focus{box-shadow:0 4px #0000004d,0 5px 6px #0000004d,0 0 0 3px #b43aed4d}.gradient_1 app-spinner{--spinner-color: var(--vampire-black, #000000)}.gradient_2{background:var(--gradient-2);color:var(--white);box-shadow:0 4px #0000004d,0 5px 6px #0000004d;position:relative;z-index:1;background-size:200% 100%;transition:all .3s ease}.gradient_2:before{content:\"\";position:absolute;inset:0;background:var(--gradient-2);background-size:200% 100%;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s ease;filter:brightness(1.1)}.gradient_2:hover:not(.disabled){box-shadow:0 4px #0000004d,0 5px 8px #0006}.gradient_2:hover:not(.disabled):before{opacity:1;animation:gradient-slide-reverse 4s linear infinite}.gradient_2:active:not(.disabled){transform:translateY(-1px);box-shadow:0 1px #0000004d,0 2px 3px #0000004d}.gradient_2:focus{box-shadow:0 4px #0000004d,0 5px 6px #0000004d,0 0 0 3px #7477ff66}.gradient_2 app-spinner{--spinner-color: var(--white, #ffffff)}@keyframes gradient-slide{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes gradient-slide-reverse{0%{background-position:100% 50%}50%{background-position:0% 50%}to{background-position:100% 50%}}.app-button.disabled{cursor:not-allowed;pointer-events:none;box-shadow:none!important;background-color:var(--gray-40)!important;color:var(--gray-30)!important;opacity:.7;border-color:transparent!important}.app-button.disabled.primary,.app-button.disabled.secondary,.app-button.disabled.tertiary,.app-button.disabled.gradient_1,.app-button.disabled.gradient_2,.app-button.disabled[class*=role-]{filter:grayscale(90%);background-image:none!important}.app-button.disabled app-spinner{--spinner-color: var(--gray-30) !important}.hidden{visibility:hidden}.loading{position:relative;overflow:hidden}.loading:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff26,#ffffff80,#ffffff26);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;pointer-events:none}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.role-success{background-color:var(--green-20)!important;color:var(--vampire-black)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-success:active:not(.disabled){background-color:var(--green-30)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-success:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #96ffa566!important}.role-success app-spinner{--spinner-color: var(--vampire-black, #000000) !important}.role-info{background-color:var(--blue-20)!important;color:var(--white)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-info:active:not(.disabled){background-color:var(--blue-30)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-info:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #7477ff66!important}.role-info app-spinner{--spinner-color: var(--white, #ffffff) !important}.role-warning{background-color:var(--orange-20)!important;color:var(--vampire-black)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-warning:active:not(.disabled){background-color:var(--orange-30)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-warning:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #ffd27d66!important}.role-warning app-spinner{--spinner-color: var(--vampire-black, #000000) !important}.role-danger{background-color:var(--red-20)!important;color:var(--white)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-danger:active:not(.disabled){background-color:var(--red-30)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-danger:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #ff747466!important}.role-danger app-spinner{--spinner-color: var(--white, #ffffff) !important}.role-neutral{background-color:var(--gray-45)!important;color:var(--white)!important;box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d!important}.role-neutral:active:not(.disabled){background-color:var(--gray-60)!important;transform:translateY(-1px)!important;box-shadow:0 1px 0 0 #0000004d ! important,0 2px 2px #00000040!important}.role-neutral:focus{box-shadow:0 4px 0 0 #0000004d ! important,0 5px 5px #0000004d ! important,0 0 0 3px #bdbdbd66!important}.role-neutral app-spinner{--spinner-color: var(--white, #ffffff) !important}.button-content{display:flex;align-items:center;justify-content:center;width:100%;position:relative}.button-inner-content,.loading-content{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}.centered-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5}\n"] }]
}], propDecorators: { prefixTemplateRef: [{
type: ContentChild,
args: ['prefixTemplate', { static: false }]
}] } });
class KcCheckboxComponent {
constructor() {
// Inputs
this.size = input('md');
this.isDisabled = input(false);
this.label = input('');
this.isChecked = input(false);
// State
this.checked = false;
// Output
this.checkedChange = new EventEmitter();
// ControlValueAccessor
this.onChange = () => { };
this.onTouched = () => { };
}
ngOnInit() {
// Initialize the checked state from the isChecked input
this.checked = this.isChecked();
}
ngOnChanges(changes) {
// Update checked state when isChecked input changes
if (changes['isChecked']) {
this.checked = this.isChecked();
}
}
// Calculate size class
sizeClass() {
// With string-based types, we can just return the size directly
return this.size();
}
// Toggle the checkbox
toggle() {
if (this.isDisabled()) {
return;
}
this.onTouched();
this.checked = !this.checked;
// Update the input value
// Emit event for ngModel binding
this.checkedChange.emit(this.checked);
// Emit event for reactive forms
this.onChange(this.checked);
}
// ControlValueAccessor implementation
writeValue(value) {
this.checked = !!value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
// Update the disabled state
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: KcCheckboxComponent, isStandalone: true, selector: "kc-checkbox", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => KcCheckboxComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: `
<div
class="checkbox-container"
[class.checked]="checked"
[class.disabled]="isDisabled()"
[ngClass]="sizeClass()"
(click)="toggle()"
>
<div class="checkbox">
<div class="checkbox-inner" [class.checked]="checked">
<svg *ngIf="checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<label *ngIf="label()" class="checkbox-label">{{ label() }}</label>
</div>
`, isInline: true, styles: [".checkbox-container{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-container.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox{display:flex;align-items:center;justify-content:center}.checkbox-inner{border-radius:4px;border:2px solid var(--gray-50);background-color:var(--gray-20);display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-sizing:border-box;position:relative}.checkbox-inner.checked{border-color:var(--kaspa-50);background-color:var(--kaspa-50)}.checkbox-inner svg{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%}.checkbox-container.xs .checkbox-inner{width:14px;height:14px;min-width:14px;min-height:14px}.checkbox-container.sm .checkbox-inner{width:16px;height:16px;min-width:16px;min-height:16px}.checkbox-container.md .checkbox-inner{width:18px;height:18px;min-width:18px;min-height:18px}.checkbox-container.lg .checkbox-inner{width:20px;height:20px;min-width:20px;min-height:20px}.checkbox-container.xlg .checkbox-inner{width:24px;height:24px;min-width:24px;min-height:24px}.checkbox-container.xs svg{width:10px!important;height:10px!important}.checkbox-container.sm svg{width:12px!important;height:12px!important}.checkbox-container.md svg{width:14px!important;height:14px!important}.checkbox-container.lg svg{width:16px!important;height:16px!important}.checkbox-container.xlg svg{width:18px!important;height:18px!important}.checkbox-container.xs .checkbox-label{font-size:.75rem}.checkbox-container.sm .checkbox-label{font-size:.875rem}.checkbox-container.md .checkbox-label{font-size:1rem}.checkbox-container.lg .checkbox-label{font-size:1.125rem}.checkbox-container.xlg .checkbox-label{font-size:1.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KcCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'kc-checkbox', standalone: true, imports: [CommonModule, FormsModule], template: `
<div
class="checkbox-container"
[class.checked]="checked"
[class.disabled]="isDisabled()"
[ngClass]="sizeClass()"
(click)="toggle()"
>
<div class="checkbox">
<div class="checkbox-inner" [class.checked]="checked">
<svg *ngIf="checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
</div>
<label *ngIf="label()" class="checkbox-label">{{ label() }}</label>
</div>
`, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => KcCheckboxComponent),
multi: true
}
], styles: [".checkbox-container{display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-container.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.checkbox{display:flex;align-items:center;justify-content:center}.checkbox-inner{border-radius:4px;border:2px solid var(--gray-50);background-color:var(--gray-20);display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-sizing:border-box;position:relative}.checkbox-inner.checked{border-color:var(--kaspa-50);background-color:var(--kaspa-50)}.checkbox-inner svg{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%}.checkbox-container.xs .checkbox-inner{width:14px;height:14px;min-width:14px;min-height:14px}.checkbox-container.sm .checkbox-inner{width:16px;height:16px;min-width:16px;min-height:16px}.checkbox-container.md .checkbox-inner{width:18px;height:18px;min-width:18px;min-height:18px}.checkbox-container.lg .checkbox-inner{width:20px;height:20px;min-width:20px;min-height:20px}.checkbox-container.xlg .checkbox-inner{width:24px;height:24px;min-width:24px;min-height:24px}.checkbox-containe