@openkit-labs/ngx-kit-ui 0.0.31 → 0.0.33
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.
|
@@ -3303,6 +3303,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
3303
3303
|
|
|
3304
3304
|
class KitGridComponent {
|
|
3305
3305
|
display = 'grid';
|
|
3306
|
+
/** Whether the grid should expand to fill the full width of its parent */
|
|
3307
|
+
fullWidth = false;
|
|
3308
|
+
get widthStyle() {
|
|
3309
|
+
return this.fullWidth ? '100%' : null;
|
|
3310
|
+
}
|
|
3306
3311
|
cols = 'none';
|
|
3307
3312
|
rows = 'none';
|
|
3308
3313
|
minCols;
|
|
@@ -3311,7 +3316,6 @@ class KitGridComponent {
|
|
|
3311
3316
|
maxColWidth;
|
|
3312
3317
|
minRowHeight;
|
|
3313
3318
|
maxRowHeight;
|
|
3314
|
-
gap;
|
|
3315
3319
|
rowGap;
|
|
3316
3320
|
colGap;
|
|
3317
3321
|
justifyItems;
|
|
@@ -3354,12 +3358,6 @@ class KitGridComponent {
|
|
|
3354
3358
|
}
|
|
3355
3359
|
return 'none';
|
|
3356
3360
|
}
|
|
3357
|
-
get gapStyle() {
|
|
3358
|
-
if (this.gap !== undefined) {
|
|
3359
|
-
return `${this.gap}px`;
|
|
3360
|
-
}
|
|
3361
|
-
return null;
|
|
3362
|
-
}
|
|
3363
3361
|
get rowGapStyle() {
|
|
3364
3362
|
if (this.rowGap !== undefined) {
|
|
3365
3363
|
return `${this.rowGap}px`;
|
|
@@ -3385,7 +3383,7 @@ class KitGridComponent {
|
|
|
3385
3383
|
return this.alignContent ?? null;
|
|
3386
3384
|
}
|
|
3387
3385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3388
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitGridComponent, isStandalone: true, selector: "kit-grid", inputs: { cols: "cols", rows: "rows", minCols: "minCols", maxCols: "maxCols", minColWidth: "minColWidth", maxColWidth: "maxColWidth", minRowHeight: "minRowHeight", maxRowHeight: "maxRowHeight",
|
|
3386
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitGridComponent, isStandalone: true, selector: "kit-grid", inputs: { fullWidth: "fullWidth", cols: "cols", rows: "rows", minCols: "minCols", maxCols: "maxCols", minColWidth: "minColWidth", maxColWidth: "maxColWidth", minRowHeight: "minRowHeight", maxRowHeight: "maxRowHeight", rowGap: "rowGap", colGap: "colGap", justifyItems: "justifyItems", alignItems: "alignItems", justifyContent: "justifyContent", alignContent: "alignContent" }, host: { properties: { "style.display": "this.display", "style.width": "this.widthStyle", "style.grid-template-columns": "this.gridTemplateColumns", "style.grid-template-rows": "this.gridTemplateRows", "style.row-gap": "this.rowGapStyle", "style.column-gap": "this.colGapStyle", "style.justify-items": "this.justifyItemsStyle", "style.align-items": "this.alignItemsStyle", "style.justify-content": "this.justifyContentStyle", "style.align-content": "this.alignContentStyle" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{box-sizing:border-box}\n"] });
|
|
3389
3387
|
}
|
|
3390
3388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
3391
3389
|
type: Component,
|
|
@@ -3393,6 +3391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
3393
3391
|
}], propDecorators: { display: [{
|
|
3394
3392
|
type: HostBinding,
|
|
3395
3393
|
args: ['style.display']
|
|
3394
|
+
}], fullWidth: [{
|
|
3395
|
+
type: Input
|
|
3396
|
+
}], widthStyle: [{
|
|
3397
|
+
type: HostBinding,
|
|
3398
|
+
args: ['style.width']
|
|
3396
3399
|
}], cols: [{
|
|
3397
3400
|
type: Input
|
|
3398
3401
|
}], rows: [{
|
|
@@ -3409,8 +3412,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
3409
3412
|
type: Input
|
|
3410
3413
|
}], maxRowHeight: [{
|
|
3411
3414
|
type: Input
|
|
3412
|
-
}], gap: [{
|
|
3413
|
-
type: Input
|
|
3414
3415
|
}], rowGap: [{
|
|
3415
3416
|
type: Input
|
|
3416
3417
|
}], colGap: [{
|
|
@@ -3429,9 +3430,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
3429
3430
|
}], gridTemplateRows: [{
|
|
3430
3431
|
type: HostBinding,
|
|
3431
3432
|
args: ['style.grid-template-rows']
|
|
3432
|
-
}], gapStyle: [{
|
|
3433
|
-
type: HostBinding,
|
|
3434
|
-
args: ['style.gap']
|
|
3435
3433
|
}], rowGapStyle: [{
|
|
3436
3434
|
type: HostBinding,
|
|
3437
3435
|
args: ['style.row-gap']
|
|
@@ -4514,11 +4512,11 @@ class KitTabViewComponent {
|
|
|
4514
4512
|
}
|
|
4515
4513
|
}
|
|
4516
4514
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTabViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4517
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitTabViewComponent, isStandalone: true, selector: "kit-tab-view", inputs: { tabs: "tabs" }, queries: [{ propertyName: "tabContents", predicate: KitTabContentComponent }], viewQueries: [{ propertyName: "tabHeaderElement", first: true, predicate: ["tabHeader"], descendants: true }], ngImport: i0, template: "<div class=\"kit-tab-view-container\">\n\n <div class=\"kit-tab-header\"\n #tabHeader>\n\n @for (tab of (tabs.length > 0 ? tabs : generatedTabs); track tab) {\n <div\n class=\"kit-tab-item\"\n [class.kit-tab-item--active]=\"tab.active\"\n (click)=\"selectTab(tab.index)\"\n role=\"tab\"\n [attr.aria-selected]=\"tab.active\">\n {{ tab.title }}\n </div>\n }\n\n </div>\n\n <div class=\"kit-tab-content\"\n role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.kit-tab-view-container{width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.kit-tab-header{display:flex;flex-wrap:nowrap;
|
|
4515
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: KitTabViewComponent, isStandalone: true, selector: "kit-tab-view", inputs: { tabs: "tabs" }, queries: [{ propertyName: "tabContents", predicate: KitTabContentComponent }], viewQueries: [{ propertyName: "tabHeaderElement", first: true, predicate: ["tabHeader"], descendants: true }], ngImport: i0, template: "<div class=\"kit-tab-view-container\">\n\n <div class=\"kit-tab-header\"\n #tabHeader>\n\n @for (tab of (tabs.length > 0 ? tabs : generatedTabs); track tab) {\n <div\n class=\"kit-tab-item\"\n [class.kit-tab-item--active]=\"tab.active\"\n (click)=\"selectTab(tab.index)\"\n role=\"tab\"\n [attr.aria-selected]=\"tab.active\">\n {{ tab.title }}\n </div>\n }\n\n </div>\n\n <div class=\"kit-tab-content\"\n role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.kit-tab-view-container{width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.kit-tab-header{display:flex;flex-wrap:nowrap;margin-bottom:var(--kit-input-padding, 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;box-sizing:border-box;position:relative;scroll-behavior:smooth}.kit-tab-header::-webkit-scrollbar{display:none}.kit-tab-item{padding:12px 16px;cursor:pointer;font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);color:var(--kit-text-color-secondary, #6c757d);background-color:transparent;border:none;border-bottom:2px solid transparent;transition:color .2s ease,background-color .2s ease;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.kit-tab-item:hover{color:var(--kit-color-primary, #0066cc);background-color:#0066cc0d}.kit-tab-item:focus{outline:2px solid var(--kit-color-primary, #0066cc);outline-offset:-2px}.kit-tab-item:after{content:\"\";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background-color:var(--kit-color-primary, #0066cc);transition:width .3s ease,left .3s ease;transform:translate(-50%)}.kit-tab-item--active{color:var(--kit-color-primary, #0066cc);font-weight:var(--kit-font-weight-label, 500);border-bottom-color:transparent}.kit-tab-item--active:after{width:100%}.kit-tab-item--active:hover{background-color:#0066cc1a}.kit-tab-content{flex:1;min-height:0;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}\n"] });
|
|
4518
4516
|
}
|
|
4519
4517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitTabViewComponent, decorators: [{
|
|
4520
4518
|
type: Component,
|
|
4521
|
-
args: [{ selector: 'kit-tab-view', standalone: true, imports: [], template: "<div class=\"kit-tab-view-container\">\n\n <div class=\"kit-tab-header\"\n #tabHeader>\n\n @for (tab of (tabs.length > 0 ? tabs : generatedTabs); track tab) {\n <div\n class=\"kit-tab-item\"\n [class.kit-tab-item--active]=\"tab.active\"\n (click)=\"selectTab(tab.index)\"\n role=\"tab\"\n [attr.aria-selected]=\"tab.active\">\n {{ tab.title }}\n </div>\n }\n\n </div>\n\n <div class=\"kit-tab-content\"\n role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.kit-tab-view-container{width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.kit-tab-header{display:flex;flex-wrap:nowrap;
|
|
4519
|
+
args: [{ selector: 'kit-tab-view', standalone: true, imports: [], template: "<div class=\"kit-tab-view-container\">\n\n <div class=\"kit-tab-header\"\n #tabHeader>\n\n @for (tab of (tabs.length > 0 ? tabs : generatedTabs); track tab) {\n <div\n class=\"kit-tab-item\"\n [class.kit-tab-item--active]=\"tab.active\"\n (click)=\"selectTab(tab.index)\"\n role=\"tab\"\n [attr.aria-selected]=\"tab.active\">\n {{ tab.title }}\n </div>\n }\n\n </div>\n\n <div class=\"kit-tab-content\"\n role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [":host{display:block;width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.kit-tab-view-container{width:100%;max-width:100%;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}.kit-tab-header{display:flex;flex-wrap:nowrap;margin-bottom:var(--kit-input-padding, 16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;width:100%;max-width:100%;box-sizing:border-box;position:relative;scroll-behavior:smooth}.kit-tab-header::-webkit-scrollbar{display:none}.kit-tab-item{padding:12px 16px;cursor:pointer;font-size:var(--kit-font-size-body, 1rem);font-weight:var(--kit-font-weight-body, 400);line-height:var(--kit-line-height-body, 1.5);color:var(--kit-text-color-secondary, #6c757d);background-color:transparent;border:none;border-bottom:2px solid transparent;transition:color .2s ease,background-color .2s ease;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap;flex-shrink:0}.kit-tab-item:hover{color:var(--kit-color-primary, #0066cc);background-color:#0066cc0d}.kit-tab-item:focus{outline:2px solid var(--kit-color-primary, #0066cc);outline-offset:-2px}.kit-tab-item:after{content:\"\";position:absolute;bottom:-2px;left:50%;width:0;height:2px;background-color:var(--kit-color-primary, #0066cc);transition:width .3s ease,left .3s ease;transform:translate(-50%)}.kit-tab-item--active{color:var(--kit-color-primary, #0066cc);font-weight:var(--kit-font-weight-label, 500);border-bottom-color:transparent}.kit-tab-item--active:after{width:100%}.kit-tab-item--active:hover{background-color:#0066cc1a}.kit-tab-content{flex:1;min-height:0;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}\n"] }]
|
|
4522
4520
|
}], propDecorators: { tabContents: [{
|
|
4523
4521
|
type: ContentChildren,
|
|
4524
4522
|
args: [KitTabContentComponent]
|
|
@@ -4631,11 +4629,11 @@ class KitCardComponent {
|
|
|
4631
4629
|
}
|
|
4632
4630
|
}
|
|
4633
4631
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4634
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { elevation: "elevation", clickable: "clickable", disabled: "disabled", fullWidth: "fullWidth", fullHeight: "fullHeight" }, outputs: { clicked: "clicked" }, host: { properties: { "class.clickable": "this.isClickable", "class.full-width": "this.isFullWidth", "class.full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div [ngClass]=\"cardClasses\"\n [attr.role]=\"clickable ? 'button' : null\"\n [attr.tabindex]=\"clickable && !disabled ? '0' : null\"\n [attr.aria-disabled]=\"clickable && disabled ? 'true' : null\"\n (click)=\"handleClick($event)\">\n\n <div class=\"kit-card__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{display:inline-block}:host.full-width{display:block;width:100%}:host.full-width .kit-card{width:100%}:host.full-height{height:100%}:host.full-height .kit-card{height:100%}:host.clickable{cursor:pointer}.kit-card{position:relative;display:flex;flex-direction:column;background-color:var(--kit-card-background-color, #ffffff);border-radius:var(--kit-card-border-radius, 16px);transition:box-shadow .2s ease,transform .1s ease;overflow:hidden;box-sizing:border-box;border:var(--kit-card-border-width, 1px) solid var(--kit-card-border-color, transparent)}.kit-card .kit-card__content{display:flex;flex-direction:column;width:100%;padding:var(--kit-card-padding, 16px);box-sizing:border-box}.kit-card.kit-card--none{box-shadow:none}.kit-card.kit-card--low{box-shadow:var(--kit-card-shadow-low, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))}.kit-card.kit-card--medium{box-shadow:var(--kit-card-shadow-medium, 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--high{box-shadow:var(--kit-card-shadow-high, 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.kit-card.kit-card--clickable:hover:not(.kit-card--disabled){transform:var(--kit-card-hover-transform, translateY(-2px));box-shadow:var(--kit-card-hover-shadow, 0 4px 8px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable:active:not(.kit-card--disabled){transform:var(--kit-card-active-transform, translateY(0));box-shadow:var(--kit-card-active-shadow, 0 2px 4px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24))}.kit-card.kit-card--clickable:focus:not(.kit-card--disabled){outline:none;box-shadow:var(--kit-card-focus-shadow, 0 0 0 3px rgba(var(--kit-color-primary-rgb, 0, 102, 204), .2))}.kit-card.kit-card--disabled{cursor:not-allowed;opacity:var(--kit-card-disabled-opacity, .6);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
4632
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: KitCardComponent, isStandalone: true, selector: "kit-card", inputs: { elevation: "elevation", clickable: "clickable", disabled: "disabled", fullWidth: "fullWidth", fullHeight: "fullHeight" }, outputs: { clicked: "clicked" }, host: { properties: { "class.clickable": "this.isClickable", "class.full-width": "this.isFullWidth", "class.full-height": "this.isFullHeight" } }, ngImport: i0, template: "<div [ngClass]=\"cardClasses\"\n [attr.role]=\"clickable ? 'button' : null\"\n [attr.tabindex]=\"clickable && !disabled ? '0' : null\"\n [attr.aria-disabled]=\"clickable && disabled ? 'true' : null\"\n (click)=\"handleClick($event)\">\n\n <div class=\"kit-card__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{display:inline-block;min-width:0}:host.full-width{display:block;width:100%}:host.full-width .kit-card{width:100%}:host.full-height{display:block;height:100%}:host.full-height .kit-card{height:100%}:host.full-height .kit-card .kit-card__content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.clickable{cursor:pointer}.kit-card{position:relative;display:flex;flex-direction:column;background-color:var(--kit-card-background-color, #ffffff);border-radius:var(--kit-card-border-radius, 16px);transition:box-shadow .2s ease,transform .1s ease;overflow:hidden;box-sizing:border-box;border:var(--kit-card-border-width, 1px) solid var(--kit-card-border-color, transparent)}.kit-card .kit-card__content{display:flex;flex-direction:column;width:100%;min-width:0;padding:var(--kit-card-padding, 16px);box-sizing:border-box}.kit-card.kit-card--none{box-shadow:none}.kit-card.kit-card--low{box-shadow:var(--kit-card-shadow-low, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))}.kit-card.kit-card--medium{box-shadow:var(--kit-card-shadow-medium, 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--high{box-shadow:var(--kit-card-shadow-high, 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.kit-card.kit-card--clickable:hover:not(.kit-card--disabled){transform:var(--kit-card-hover-transform, translateY(-2px));box-shadow:var(--kit-card-hover-shadow, 0 4px 8px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable:active:not(.kit-card--disabled){transform:var(--kit-card-active-transform, translateY(0));box-shadow:var(--kit-card-active-shadow, 0 2px 4px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24))}.kit-card.kit-card--clickable:focus:not(.kit-card--disabled){outline:none;box-shadow:var(--kit-card-focus-shadow, 0 0 0 3px rgba(var(--kit-color-primary-rgb, 0, 102, 204), .2))}.kit-card.kit-card--disabled{cursor:not-allowed;opacity:var(--kit-card-disabled-opacity, .6);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
4635
4633
|
}
|
|
4636
4634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitCardComponent, decorators: [{
|
|
4637
4635
|
type: Component,
|
|
4638
|
-
args: [{ selector: 'kit-card', standalone: true, imports: [NgClass], template: "<div [ngClass]=\"cardClasses\"\n [attr.role]=\"clickable ? 'button' : null\"\n [attr.tabindex]=\"clickable && !disabled ? '0' : null\"\n [attr.aria-disabled]=\"clickable && disabled ? 'true' : null\"\n (click)=\"handleClick($event)\">\n\n <div class=\"kit-card__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{display:inline-block}:host.full-width{display:block;width:100%}:host.full-width .kit-card{width:100%}:host.full-height{height:100%}:host.full-height .kit-card{height:100%}:host.clickable{cursor:pointer}.kit-card{position:relative;display:flex;flex-direction:column;background-color:var(--kit-card-background-color, #ffffff);border-radius:var(--kit-card-border-radius, 16px);transition:box-shadow .2s ease,transform .1s ease;overflow:hidden;box-sizing:border-box;border:var(--kit-card-border-width, 1px) solid var(--kit-card-border-color, transparent)}.kit-card .kit-card__content{display:flex;flex-direction:column;width:100%;padding:var(--kit-card-padding, 16px);box-sizing:border-box}.kit-card.kit-card--none{box-shadow:none}.kit-card.kit-card--low{box-shadow:var(--kit-card-shadow-low, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))}.kit-card.kit-card--medium{box-shadow:var(--kit-card-shadow-medium, 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--high{box-shadow:var(--kit-card-shadow-high, 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.kit-card.kit-card--clickable:hover:not(.kit-card--disabled){transform:var(--kit-card-hover-transform, translateY(-2px));box-shadow:var(--kit-card-hover-shadow, 0 4px 8px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable:active:not(.kit-card--disabled){transform:var(--kit-card-active-transform, translateY(0));box-shadow:var(--kit-card-active-shadow, 0 2px 4px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24))}.kit-card.kit-card--clickable:focus:not(.kit-card--disabled){outline:none;box-shadow:var(--kit-card-focus-shadow, 0 0 0 3px rgba(var(--kit-color-primary-rgb, 0, 102, 204), .2))}.kit-card.kit-card--disabled{cursor:not-allowed;opacity:var(--kit-card-disabled-opacity, .6);pointer-events:none}\n"] }]
|
|
4636
|
+
args: [{ selector: 'kit-card', standalone: true, imports: [NgClass], template: "<div [ngClass]=\"cardClasses\"\n [attr.role]=\"clickable ? 'button' : null\"\n [attr.tabindex]=\"clickable && !disabled ? '0' : null\"\n [attr.aria-disabled]=\"clickable && disabled ? 'true' : null\"\n (click)=\"handleClick($event)\">\n\n <div class=\"kit-card__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [":host{display:inline-block;min-width:0}:host.full-width{display:block;width:100%}:host.full-width .kit-card{width:100%}:host.full-height{display:block;height:100%}:host.full-height .kit-card{height:100%}:host.full-height .kit-card .kit-card__content{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}:host.clickable{cursor:pointer}.kit-card{position:relative;display:flex;flex-direction:column;background-color:var(--kit-card-background-color, #ffffff);border-radius:var(--kit-card-border-radius, 16px);transition:box-shadow .2s ease,transform .1s ease;overflow:hidden;box-sizing:border-box;border:var(--kit-card-border-width, 1px) solid var(--kit-card-border-color, transparent)}.kit-card .kit-card__content{display:flex;flex-direction:column;width:100%;min-width:0;padding:var(--kit-card-padding, 16px);box-sizing:border-box}.kit-card.kit-card--none{box-shadow:none}.kit-card.kit-card--low{box-shadow:var(--kit-card-shadow-low, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24))}.kit-card.kit-card--medium{box-shadow:var(--kit-card-shadow-medium, 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--high{box-shadow:var(--kit-card-shadow-high, 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.kit-card.kit-card--clickable:hover:not(.kit-card--disabled){transform:var(--kit-card-hover-transform, translateY(-2px));box-shadow:var(--kit-card-hover-shadow, 0 4px 8px rgba(0, 0, 0, .16), 0 4px 8px rgba(0, 0, 0, .23))}.kit-card.kit-card--clickable:active:not(.kit-card--disabled){transform:var(--kit-card-active-transform, translateY(0));box-shadow:var(--kit-card-active-shadow, 0 2px 4px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24))}.kit-card.kit-card--clickable:focus:not(.kit-card--disabled){outline:none;box-shadow:var(--kit-card-focus-shadow, 0 0 0 3px rgba(var(--kit-color-primary-rgb, 0, 102, 204), .2))}.kit-card.kit-card--disabled{cursor:not-allowed;opacity:var(--kit-card-disabled-opacity, .6);pointer-events:none}\n"] }]
|
|
4639
4637
|
}], propDecorators: { elevation: [{
|
|
4640
4638
|
type: Input
|
|
4641
4639
|
}], clickable: [{
|