@openkit-labs/ngx-kit-ui 0.0.32 → 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;
|
|
@@ -3378,7 +3383,7 @@ class KitGridComponent {
|
|
|
3378
3383
|
return this.alignContent ?? null;
|
|
3379
3384
|
}
|
|
3380
3385
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3381
|
-
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", rowGap: "rowGap", colGap: "colGap", justifyItems: "justifyItems", alignItems: "alignItems", justifyContent: "justifyContent", alignContent: "alignContent" }, host: { properties: { "style.display": "this.display", "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"] });
|
|
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"] });
|
|
3382
3387
|
}
|
|
3383
3388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitGridComponent, decorators: [{
|
|
3384
3389
|
type: Component,
|
|
@@ -3386,6 +3391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
3386
3391
|
}], propDecorators: { display: [{
|
|
3387
3392
|
type: HostBinding,
|
|
3388
3393
|
args: ['style.display']
|
|
3394
|
+
}], fullWidth: [{
|
|
3395
|
+
type: Input
|
|
3396
|
+
}], widthStyle: [{
|
|
3397
|
+
type: HostBinding,
|
|
3398
|
+
args: ['style.width']
|
|
3389
3399
|
}], cols: [{
|
|
3390
3400
|
type: Input
|
|
3391
3401
|
}], rows: [{
|
|
@@ -4619,11 +4629,11 @@ class KitCardComponent {
|
|
|
4619
4629
|
}
|
|
4620
4630
|
}
|
|
4621
4631
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4622
|
-
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{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%;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"] }] });
|
|
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"] }] });
|
|
4623
4633
|
}
|
|
4624
4634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: KitCardComponent, decorators: [{
|
|
4625
4635
|
type: Component,
|
|
4626
|
-
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{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%;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"] }]
|
|
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"] }]
|
|
4627
4637
|
}], propDecorators: { elevation: [{
|
|
4628
4638
|
type: Input
|
|
4629
4639
|
}], clickable: [{
|