@kouji-ui/components 0.6.1 → 0.6.3
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.
|
@@ -1486,7 +1486,7 @@ class KjButtonComponent {
|
|
|
1486
1486
|
<ng-content />
|
|
1487
1487
|
}
|
|
1488
1488
|
</button>
|
|
1489
|
-
`, isInline: true, styles: ["@layer kj.component{.kj-button{
|
|
1489
|
+
`, isInline: true, styles: ["@layer kj.component{.kj-button{display:inline-flex;align-items:center;justify-content:var(--kj-button-justify, center);gap:var(--kj-button-gap, var(--kj-space-sm));min-width:var(--kj-button-min-width, auto);height:var(--kj-button-height, auto);align-self:center;background:var(--kj-button-bg, var(--kj-bg-primary));color:var(--kj-button-fg, var(--kj-fg-on-primary));border:var(--kj-button-border-width, var(--kj-border)) var(--kj-button-border-style, solid) var(--kj-button-border-color, transparent);border-radius:var(--kj-button-radius, var(--kj-radius-field));padding:var(--kj-button-padding-y, var(--kj-space-sm)) var(--kj-button-padding-x, var(--kj-space-md));font:var(--kj-button-font-weight, 600) var(--kj-button-font-size, var(--kj-text-sm)) / 1.2 var(--kj-button-font, var(--kj-font-sans));letter-spacing:var(--kj-button-letter-spacing, -.01em);transition:color var(--kj-transition),border-color var(--kj-transition),box-shadow var(--kj-transition),transform var(--kj-transition),opacity var(--kj-transition);cursor:pointer;text-decoration:none}.kj-button[data-variant=destructive]{--kj-button-bg: var(--kj-bg-danger);--kj-button-fg: var(--kj-fg-on-danger)}.kj-button[data-variant=destructive]:hover{--kj-button-bg: color-mix(in oklch, var(--kj-bg-danger), black 8%)}.kj-button[data-variant=ghost]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: transparent}.kj-button[data-variant=ghost]:hover{--kj-button-bg: color-mix(in oklab, var(--kj-fg-default) 10%, transparent)}.kj-button[data-variant=outline]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: var(--kj-border-default)}.kj-button[data-variant=outline]:hover{--kj-button-bg: var(--kj-bg-surface)}.kj-button[data-variant=link]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-primary);--kj-button-padding-x: 0;--kj-button-padding-y: 0;--kj-button-shadow: none;--kj-button-shadow-hover: none;--kj-button-shadow-active: none;text-decoration:underline;text-underline-offset:4px}.kj-button[data-variant=link]:hover{--kj-button-bg: transparent;--kj-button-fg: color-mix(in oklch, var(--kj-fg-primary), black 8%)}.kj-button[data-size=xs]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: 0;--kj-button-font-size: .75rem;--kj-button-height: var(--kj-ctl-h-xs)}.kj-button[data-size=sm]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: .25rem;--kj-button-font-size: .8125rem;--kj-button-height: var(--kj-ctl-h-sm)}.kj-button[data-size=md]{--kj-button-height: var(--kj-ctl-h-md)}.kj-button[data-size=lg]{--kj-button-padding-x: var(--kj-space-lg);--kj-button-padding-y: .625rem;--kj-button-font-size: 1rem;--kj-button-height: var(--kj-ctl-h-lg)}.kj-button[data-size=xl]{--kj-button-padding-x: var(--kj-space-2xl);--kj-button-padding-y: .875rem;--kj-button-font-size: 1.0625rem;--kj-button-gap: var(--kj-space-md);--kj-button-height: var(--kj-ctl-h-xl)}.kj-button[data-size=icon]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: var(--kj-space-sm);--kj-button-height: var(--kj-ctl-h-md);aspect-ratio:1}.kj-button[data-full=true]{width:100%}.kj-button:hover{--kj-button-bg: var(--kj-button-bg-hover, color-mix(in oklch, var(--kj-bg-primary), black 8%));transform:translateY(var(--kj-button-hover-translate, var(--kj-hover-translate, -2px)))}.kj-button[data-variant=default]:hover{--kj-button-fg: var(--kj-button-fg-hover, var(--kj-fg-on-primary))}.kj-button[data-variant=default]{box-shadow:var(--kj-button-shadow, none)}.kj-button[data-variant=default]:hover{box-shadow:var(--kj-button-shadow-hover, var(--kj-button-shadow, none))}.kj-button[data-variant=default]:active{box-shadow:var(--kj-button-shadow-active, var(--kj-button-shadow, none))}.kj-button:active{transform:var(--kj-button-translate-active, none)}.kj-button:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-button[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-button[data-size=icon]{min-width:2.75rem;min-height:2.75rem}.kj-button[aria-busy=true]{opacity:.7;cursor:progress}.kj-button[aria-pressed=true]{--kj-button-bg: var(--kj-bg-field);box-shadow:inset 0 1px 2px #0000001f}.kj-button__spinner{display:inline-block;width:1em;height:1em;vertical-align:-.125em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kj-button-spinner-rotate .6s linear infinite}}@keyframes kj-button-spinner-rotate{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: KjButton, selector: "[kjButton]", inputs: ["kjDisabled", "kjLoading", "kjFullWidth", "kjPressed"], outputs: ["kjPressedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1490
1490
|
}
|
|
1491
1491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjButtonComponent, decorators: [{
|
|
1492
1492
|
type: Component,
|
|
@@ -1509,7 +1509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1509
1509
|
<ng-content />
|
|
1510
1510
|
}
|
|
1511
1511
|
</button>
|
|
1512
|
-
`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-button{
|
|
1512
|
+
`, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-button{display:inline-flex;align-items:center;justify-content:var(--kj-button-justify, center);gap:var(--kj-button-gap, var(--kj-space-sm));min-width:var(--kj-button-min-width, auto);height:var(--kj-button-height, auto);align-self:center;background:var(--kj-button-bg, var(--kj-bg-primary));color:var(--kj-button-fg, var(--kj-fg-on-primary));border:var(--kj-button-border-width, var(--kj-border)) var(--kj-button-border-style, solid) var(--kj-button-border-color, transparent);border-radius:var(--kj-button-radius, var(--kj-radius-field));padding:var(--kj-button-padding-y, var(--kj-space-sm)) var(--kj-button-padding-x, var(--kj-space-md));font:var(--kj-button-font-weight, 600) var(--kj-button-font-size, var(--kj-text-sm)) / 1.2 var(--kj-button-font, var(--kj-font-sans));letter-spacing:var(--kj-button-letter-spacing, -.01em);transition:color var(--kj-transition),border-color var(--kj-transition),box-shadow var(--kj-transition),transform var(--kj-transition),opacity var(--kj-transition);cursor:pointer;text-decoration:none}.kj-button[data-variant=destructive]{--kj-button-bg: var(--kj-bg-danger);--kj-button-fg: var(--kj-fg-on-danger)}.kj-button[data-variant=destructive]:hover{--kj-button-bg: color-mix(in oklch, var(--kj-bg-danger), black 8%)}.kj-button[data-variant=ghost]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: transparent}.kj-button[data-variant=ghost]:hover{--kj-button-bg: color-mix(in oklab, var(--kj-fg-default) 10%, transparent)}.kj-button[data-variant=outline]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-default);--kj-button-border-color: var(--kj-border-default)}.kj-button[data-variant=outline]:hover{--kj-button-bg: var(--kj-bg-surface)}.kj-button[data-variant=link]{--kj-button-bg: transparent;--kj-button-fg: var(--kj-fg-primary);--kj-button-padding-x: 0;--kj-button-padding-y: 0;--kj-button-shadow: none;--kj-button-shadow-hover: none;--kj-button-shadow-active: none;text-decoration:underline;text-underline-offset:4px}.kj-button[data-variant=link]:hover{--kj-button-bg: transparent;--kj-button-fg: color-mix(in oklch, var(--kj-fg-primary), black 8%)}.kj-button[data-size=xs]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: 0;--kj-button-font-size: .75rem;--kj-button-height: var(--kj-ctl-h-xs)}.kj-button[data-size=sm]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: .25rem;--kj-button-font-size: .8125rem;--kj-button-height: var(--kj-ctl-h-sm)}.kj-button[data-size=md]{--kj-button-height: var(--kj-ctl-h-md)}.kj-button[data-size=lg]{--kj-button-padding-x: var(--kj-space-lg);--kj-button-padding-y: .625rem;--kj-button-font-size: 1rem;--kj-button-height: var(--kj-ctl-h-lg)}.kj-button[data-size=xl]{--kj-button-padding-x: var(--kj-space-2xl);--kj-button-padding-y: .875rem;--kj-button-font-size: 1.0625rem;--kj-button-gap: var(--kj-space-md);--kj-button-height: var(--kj-ctl-h-xl)}.kj-button[data-size=icon]{--kj-button-padding-x: var(--kj-space-sm);--kj-button-padding-y: var(--kj-space-sm);--kj-button-height: var(--kj-ctl-h-md);aspect-ratio:1}.kj-button[data-full=true]{width:100%}.kj-button:hover{--kj-button-bg: var(--kj-button-bg-hover, color-mix(in oklch, var(--kj-bg-primary), black 8%));transform:translateY(var(--kj-button-hover-translate, var(--kj-hover-translate, -2px)))}.kj-button[data-variant=default]:hover{--kj-button-fg: var(--kj-button-fg-hover, var(--kj-fg-on-primary))}.kj-button[data-variant=default]{box-shadow:var(--kj-button-shadow, none)}.kj-button[data-variant=default]:hover{box-shadow:var(--kj-button-shadow-hover, var(--kj-button-shadow, none))}.kj-button[data-variant=default]:active{box-shadow:var(--kj-button-shadow-active, var(--kj-button-shadow, none))}.kj-button:active{transform:var(--kj-button-translate-active, none)}.kj-button:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:2px}.kj-button[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}.kj-button[data-size=icon]{min-width:2.75rem;min-height:2.75rem}.kj-button[aria-busy=true]{opacity:.7;cursor:progress}.kj-button[aria-pressed=true]{--kj-button-bg: var(--kj-bg-field);box-shadow:inset 0 1px 2px #0000001f}.kj-button__spinner{display:inline-block;width:1em;height:1em;vertical-align:-.125em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kj-button-spinner-rotate .6s linear infinite}}@keyframes kj-button-spinner-rotate{to{transform:rotate(360deg)}}\n"] }]
|
|
1513
1513
|
}], propDecorators: { kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLoading", required: false }] }], kjFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFullWidth", required: false }] }], kjPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPressed", required: false }] }, { type: i0.Output, args: ["kjPressedChange"] }], kjType: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjType", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }] } });
|
|
1514
1514
|
|
|
1515
1515
|
/**
|
|
@@ -8818,7 +8818,7 @@ class KjInputComponent {
|
|
|
8818
8818
|
[kjInvalid]="invalid()"
|
|
8819
8819
|
[kjDisabled]="disabled()"
|
|
8820
8820
|
/>
|
|
8821
|
-
`, isInline: true, styles: ["@layer kj.component{.kj-input{--kj-input-bg: var(--kj-bg-field);--kj-input-fg: var(--kj-fg-default);--kj-input-border-color: var(--kj-border-default);--kj-input-border-style: solid;--kj-input-border-width: var(--kj-border);--kj-input-radius: var(--kj-radius-field);--kj-input-padding-x: var(--kj-space-md);--kj-input-padding-y: var(--kj-space-sm);--kj-input-font: var(--kj-font-sans);--kj-input-font-size: var(--kj-text-sm);--kj-input-placeholder-fg: var(--kj-fg-muted);--kj-input-height:
|
|
8821
|
+
`, isInline: true, styles: ["@layer kj.component{.kj-input{--kj-input-bg: var(--kj-bg-field);--kj-input-fg: var(--kj-fg-default);--kj-input-border-color: var(--kj-border-default);--kj-input-border-style: solid;--kj-input-border-width: var(--kj-border);--kj-input-radius: var(--kj-radius-field);--kj-input-padding-x: var(--kj-space-md);--kj-input-padding-y: var(--kj-space-sm);--kj-input-font: var(--kj-font-sans);--kj-input-font-size: var(--kj-text-sm);--kj-input-placeholder-fg: var(--kj-fg-muted);--kj-input-height: var(--kj-ctl-h-md);display:inline-flex;width:100%;height:var(--kj-input-height);background:var(--kj-input-bg);color:var(--kj-input-fg);border:var(--kj-input-border-width) var(--kj-input-border-style) var(--kj-input-border-color);border-radius:var(--kj-input-radius);padding:var(--kj-input-padding-y) var(--kj-input-padding-x);font:var(--kj-input-font-size) / 1.4 var(--kj-input-font);transition:var(--kj-transition)}.kj-input[data-size=xs]{--kj-input-height: var(--kj-ctl-h-xs);--kj-input-font-size: .75rem;--kj-input-padding-x: var(--kj-space-sm);--kj-input-padding-y: 0}.kj-input[data-size=sm]{--kj-input-height: var(--kj-ctl-h-sm);--kj-input-font-size: .8125rem}.kj-input[data-size=lg]{--kj-input-height: var(--kj-ctl-h-lg);--kj-input-font-size: 1rem}.kj-input[data-variant=sunken]{--kj-input-bg: var(--kj-bg-body)}.kj-input::placeholder{color:var(--kj-input-placeholder-fg)}.kj-input:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px;--kj-input-border-color: var(--kj-border-focus, var(--kj-bg-primary))}.kj-input[aria-invalid=true]{--kj-input-border-color: var(--kj-border-danger, var(--kj-fg-danger))}.kj-input[aria-disabled=true],.kj-input:disabled{opacity:.55;cursor:not-allowed}.kj-input[type=color]{inline-size:44px;block-size:32px;padding:2px;cursor:pointer}}\n"], dependencies: [{ kind: "directive", type: KjInput, selector: "[kjInput]", inputs: ["kjInvalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8822
8822
|
}
|
|
8823
8823
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjInputComponent, decorators: [{
|
|
8824
8824
|
type: Component,
|
|
@@ -8846,7 +8846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
8846
8846
|
`, encapsulation: ViewEncapsulation.None, host: {
|
|
8847
8847
|
'style': 'display: contents;',
|
|
8848
8848
|
'[attr.data-type]': 'type()',
|
|
8849
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-input{--kj-input-bg: var(--kj-bg-field);--kj-input-fg: var(--kj-fg-default);--kj-input-border-color: var(--kj-border-default);--kj-input-border-style: solid;--kj-input-border-width: var(--kj-border);--kj-input-radius: var(--kj-radius-field);--kj-input-padding-x: var(--kj-space-md);--kj-input-padding-y: var(--kj-space-sm);--kj-input-font: var(--kj-font-sans);--kj-input-font-size: var(--kj-text-sm);--kj-input-placeholder-fg: var(--kj-fg-muted);--kj-input-height:
|
|
8849
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-input{--kj-input-bg: var(--kj-bg-field);--kj-input-fg: var(--kj-fg-default);--kj-input-border-color: var(--kj-border-default);--kj-input-border-style: solid;--kj-input-border-width: var(--kj-border);--kj-input-radius: var(--kj-radius-field);--kj-input-padding-x: var(--kj-space-md);--kj-input-padding-y: var(--kj-space-sm);--kj-input-font: var(--kj-font-sans);--kj-input-font-size: var(--kj-text-sm);--kj-input-placeholder-fg: var(--kj-fg-muted);--kj-input-height: var(--kj-ctl-h-md);display:inline-flex;width:100%;height:var(--kj-input-height);background:var(--kj-input-bg);color:var(--kj-input-fg);border:var(--kj-input-border-width) var(--kj-input-border-style) var(--kj-input-border-color);border-radius:var(--kj-input-radius);padding:var(--kj-input-padding-y) var(--kj-input-padding-x);font:var(--kj-input-font-size) / 1.4 var(--kj-input-font);transition:var(--kj-transition)}.kj-input[data-size=xs]{--kj-input-height: var(--kj-ctl-h-xs);--kj-input-font-size: .75rem;--kj-input-padding-x: var(--kj-space-sm);--kj-input-padding-y: 0}.kj-input[data-size=sm]{--kj-input-height: var(--kj-ctl-h-sm);--kj-input-font-size: .8125rem}.kj-input[data-size=lg]{--kj-input-height: var(--kj-ctl-h-lg);--kj-input-font-size: 1rem}.kj-input[data-variant=sunken]{--kj-input-bg: var(--kj-bg-body)}.kj-input::placeholder{color:var(--kj-input-placeholder-fg)}.kj-input:focus-visible{outline:2px solid var(--kj-bg-primary);outline-offset:2px;--kj-input-border-color: var(--kj-border-focus, var(--kj-bg-primary))}.kj-input[aria-invalid=true]{--kj-input-border-color: var(--kj-border-danger, var(--kj-fg-danger))}.kj-input[aria-disabled=true],.kj-input:disabled{opacity:.55;cursor:not-allowed}.kj-input[type=color]{inline-size:44px;block-size:32px;padding:2px;cursor:pointer}}\n"] }]
|
|
8850
8850
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], innerInput: [{
|
|
8851
8851
|
type: ViewChild,
|
|
8852
8852
|
args: [KjInput, { static: true }]
|
|
@@ -17186,7 +17186,7 @@ class KjTableComponent {
|
|
|
17186
17186
|
|
|
17187
17187
|
<ng-content />
|
|
17188
17188
|
</div>
|
|
17189
|
-
`, isInline: true, styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0;font-family:var(--kj-font-sans);font-size:var(--kj-text-sm);--kj-table-row-height:
|
|
17189
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0;font-family:var(--kj-font-sans);font-size:var(--kj-text-sm);--kj-table-row-height: var(--kj-row-h)}:host([data-density=\"compact\"]){--kj-table-row-height: 1.75rem}:host([data-density=\"comfortable\"]){--kj-table-row-height: 2.75rem}.kj-table-wrapper{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;position:relative}.kj-table-body{position:relative;overflow:auto;display:block;flex:1 1 auto;min-height:0;min-width:0}.kj-table-body thead th{position:sticky;top:0;z-index:2;background:var(--kj-table-header-bg, var(--kj-bg-surface))}.kj-table-body thead th[data-pin]{z-index:3}.kj-table-body>table{min-width:100%}:host th,:host td{height:var(--kj-table-row-height)}:host table{width:100%;border-collapse:collapse;background:var(--kj-bg-surface);color:var(--kj-fg-default)}:host th,:host td{text-align:left;padding:var(--kj-base-space-sm) var(--kj-base-space-md);border-bottom:1px solid var(--kj-border-default);position:relative}:host th{font-weight:600;background:var(--kj-bg-elevated)}:host th[aria-sort]{-webkit-user-select:none;user-select:none}.kj-table-sort-indicator{display:inline-flex;align-items:center;margin-inline-start:var(--kj-base-space-xs, .25rem);color:var(--kj-fg-subtle, var(--kj-fg-muted));transition:color var(--kj-transition);vertical-align:middle}:host th[data-sort=asc] .kj-table-sort-indicator,:host th[data-sort=desc] .kj-table-sort-indicator{color:var(--kj-fg-primary)}:host th[aria-sort]:hover .kj-table-sort-indicator,:host th[aria-sort]:focus-visible .kj-table-sort-indicator{color:var(--kj-fg-default)}:host([data-density=\"compact\"]) th,:host([data-density=\"compact\"]) td{padding:var(--kj-base-space-xs) var(--kj-base-space-sm)}:host([data-density=\"comfortable\"]) th,:host([data-density=\"comfortable\"]) td{padding:var(--kj-base-space-md) var(--kj-base-space-lg)}:host([data-variant=\"striped\"]) tbody tr:nth-child(2n) td{background:var(--kj-bg-elevated)}:host([data-variant=\"clean\"]) th,:host([data-variant=\"clean\"]) td{border-bottom-color:transparent}:host td:focus-visible,:host th:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:-2px}:host td.kj-table-cell--editing{position:relative}:host td .kj-table-cell-ghost{visibility:hidden;white-space:pre;display:inline-block;pointer-events:none}:host td.kj-table-cell--editing ::ng-deep kj-text-editor,:host td.kj-table-cell--editing ::ng-deep kj-number-editor,:host td.kj-table-cell--editing ::ng-deep kj-select-editor,:host td.kj-table-cell--editing ::ng-deep kj-date-editor,:host td.kj-table-cell--editing ::ng-deep kj-boolean-editor{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;padding:inherit!important;background:var(--kj-bg-surface);z-index:1}:host td.kj-table-cell--editing ::ng-deep kj-input,:host td.kj-table-cell--editing ::ng-deep kj-number-input,:host td.kj-table-cell--editing ::ng-deep kj-select{display:flex!important;width:100%!important;min-width:0!important;box-sizing:border-box}:host td.kj-table-cell--editing ::ng-deep input,:host td.kj-table-cell--editing ::ng-deep .kj-select-trigger{width:100%!important;min-width:0!important;box-sizing:border-box}:host td .kj-table-editor-anchor{display:none}:host tr[data-selected] td{background:color-mix(in oklab,var(--kj-bg-primary, var(--kj-bg-accent, currentColor)) 12%,var(--kj-bg-surface))}:host tr[data-selected] td:first-child{box-shadow:inset 3px 0 0 0 var(--kj-bg-primary, var(--kj-fg-primary))}:host td[data-pin=left],:host th[data-pin=left]{position:sticky;left:0;z-index:1;background:var(--kj-bg-surface)}:host td[data-pin=right],:host th[data-pin=right]{position:sticky;right:0;z-index:1;background:var(--kj-bg-surface)}:host td[data-pin=left]:not(:has(+td[data-pin=left])),:host th[data-pin=left]:not(:has(+th[data-pin=left])){border-right:1px solid var(--kj-border-strong, var(--kj-border-default));box-shadow:4px 0 6px -4px #00000040}:host tr>:not([data-pin=right])+td[data-pin=right],:host tr>:not([data-pin=right])+th[data-pin=right]{border-left:1px solid var(--kj-border-strong, var(--kj-border-default));box-shadow:-4px 0 6px -4px #00000040}:host([data-variant=\"striped\"]) tbody tr:nth-child(2n) td[data-pin]{background:var(--kj-bg-elevated)}.kj-table-resize-handle{position:absolute;top:25%;right:0;width:6px;height:50%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;background:transparent;border-right:2px solid var(--kj-border-strong, var(--kj-border-default));transition:border-color var(--kj-transition),background var(--kj-transition),width var(--kj-transition)}.kj-table-resize-handle:hover,.kj-table-resize-handle:focus-visible{border-right-color:var(--kj-border-focus);background:color-mix(in srgb,var(--kj-border-focus) 20%,transparent);width:8px;outline:none}:host th[data-resizing] .kj-table-resize-handle{top:0;height:9999px;width:0;background:transparent;border-right:2px solid var(--kj-border-focus, var(--kj-bg-primary));transform:translate(var(--kj-resize-delta, 0px));pointer-events:none;z-index:3;transition:none}:host th.kj-table-select-cell,:host td.kj-table-select-cell{width:2.5rem;padding-inline:var(--kj-base-space-sm);text-align:center;vertical-align:middle}.kj-table-select-cell kj-checkbox{display:inline-flex;align-items:center;justify-content:center}.kj-table-filter-row>th{font-weight:400;background:var(--kj-bg-surface);border-top:1px solid var(--kj-border-muted, var(--kj-border-default))}.kj-table-filter-cell{padding-top:var(--kj-base-space-xs);padding-bottom:var(--kj-base-space-xs);vertical-align:middle}.kj-table-filter-cell .kj-table-filter-anchor+*,.kj-table-filter-cell kj-input,.kj-table-filter-cell kj-number-input,.kj-table-filter-cell kj-date-picker,.kj-table-filter-cell kj-select{width:100%}.kj-table-filter-anchor{display:block;width:100%}:host .kj-table-editor-anchor .kj-input,:host .kj-table-editor-anchor .kj-select{--kj-input-height: 1.75rem;--kj-input-font-size: var(--kj-text-xs);--kj-input-padding-x: var(--kj-base-space-sm);--kj-input-padding-y: 0;--kj-input-radius: var(--kj-radius-selector)}.kj-table-empty,.kj-table-error,.kj-table-loading{display:flex;align-items:center;justify-content:center;padding:var(--kj-base-space-lg);color:var(--kj-fg-muted)}:host([data-empty]) .kj-table-body,:host([data-error]) .kj-table-body{flex:0 1 auto}.kj-table-empty,.kj-table-error{flex:1 1 auto;min-height:0}.kj-table-loading{position:absolute;inset:0;background:color-mix(in srgb,var(--kj-bg-surface) 70%,transparent);pointer-events:none}.kj-table-loading[data-has-rows]{inset:0 0 auto;height:2px;background:var(--kj-bg-primary);padding:0;animation:kj-table-loading-pulse 1.4s ease-in-out infinite}.kj-table-loading[data-has-rows] .kj-table-loading-fallback,.kj-table-loading[data-has-rows] ::ng-deep [kjLoading]{display:none}@keyframes kj-table-loading-pulse{0%,to{opacity:.55}50%{opacity:1}}.kj-table-error{color:var(--kj-fg-error, var(--kj-fg-default))}.kj-table-loading-fallback{font-size:var(--kj-text-sm)}.kj-table-expansion-row>td{background:var(--kj-bg-elevated)}.kj-table-tbody-pinned[data-pin=top]>tr>td{background:var(--kj-bg-elevated);border-bottom:2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));box-shadow:0 4px 6px -4px #00000040;position:sticky;top:0;z-index:2}.kj-table-tbody-pinned[data-pin=bottom]>tr>td{background:var(--kj-bg-elevated);border-top:2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));box-shadow:0 -4px 6px -4px #00000040;position:sticky;bottom:0;z-index:2}.kj-table-group-toggle{display:inline-flex;align-items:center;gap:var(--kj-base-space-xs, .25rem);background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}.kj-table-group-toggle__chevron{display:inline-block;width:.75rem;font-family:var(--kj-font-mono);color:var(--kj-fg-muted);transition:transform var(--kj-transition)}.kj-table-group-toggle[aria-expanded=true] .kj-table-group-toggle__chevron{transform:rotate(90deg)}.kj-table-group-toggle__count{margin-inline-start:var(--kj-base-space-xs, .25rem);font-size:.75em;color:var(--kj-fg-muted);font-variant-numeric:tabular-nums}:host tbody tr[data-row-grouped] td{background:var(--kj-bg-elevated);font-weight:600}\n"], dependencies: [{ kind: "directive", type: KjTableHeader, selector: "[kjTableHeader]", inputs: ["kjHeader"] }, { kind: "directive", type: KjTableRow, selector: "[kjTableRow]", inputs: ["kjRow"] }, { kind: "directive", type: KjTableCell, selector: "[kjTableCell]", inputs: ["kjCell"] }, { kind: "directive", type: KjTableKeyboardNav, selector: "[kjTableKeyboardNav]" }, { kind: "directive", type: KjTableVirtual, selector: "[kjTableVirtual]", inputs: ["kjCount", "kjEstimateSize", "kjOverscan"], exportAs: ["kjTableVirtual"] }, { kind: "directive", type: KjIconDirective, selector: "span[kjIcon], i[kjIcon]", inputs: ["kjIcon", "kjIconLabel", "kjIconColor", "kjIconSize"] }, { kind: "component", type: KjCheckboxComponent, selector: "kj-checkbox", inputs: ["checked", "disabled", "indeterminate", "size"], outputs: ["checkedChange"] }, { kind: "directive", type: KjCellEditorOutlet, selector: "[kjCellEditorOutlet]", inputs: ["kjEditor", "kjValue", "kjMeta"], outputs: ["commit", "editCancel"] }, { kind: "directive", type: KjFilterCellOutlet, selector: "[kjFilterCell]", inputs: ["kjColumn", "kjFilter"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17190
17190
|
}
|
|
17191
17191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTableComponent, decorators: [{
|
|
17192
17192
|
type: Component,
|
|
@@ -17566,7 +17566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
17566
17566
|
|
|
17567
17567
|
<ng-content />
|
|
17568
17568
|
</div>
|
|
17569
|
-
`, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0;font-family:var(--kj-font-sans);font-size:var(--kj-text-sm);--kj-table-row-height:
|
|
17569
|
+
`, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0;font-family:var(--kj-font-sans);font-size:var(--kj-text-sm);--kj-table-row-height: var(--kj-row-h)}:host([data-density=\"compact\"]){--kj-table-row-height: 1.75rem}:host([data-density=\"comfortable\"]){--kj-table-row-height: 2.75rem}.kj-table-wrapper{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;position:relative}.kj-table-body{position:relative;overflow:auto;display:block;flex:1 1 auto;min-height:0;min-width:0}.kj-table-body thead th{position:sticky;top:0;z-index:2;background:var(--kj-table-header-bg, var(--kj-bg-surface))}.kj-table-body thead th[data-pin]{z-index:3}.kj-table-body>table{min-width:100%}:host th,:host td{height:var(--kj-table-row-height)}:host table{width:100%;border-collapse:collapse;background:var(--kj-bg-surface);color:var(--kj-fg-default)}:host th,:host td{text-align:left;padding:var(--kj-base-space-sm) var(--kj-base-space-md);border-bottom:1px solid var(--kj-border-default);position:relative}:host th{font-weight:600;background:var(--kj-bg-elevated)}:host th[aria-sort]{-webkit-user-select:none;user-select:none}.kj-table-sort-indicator{display:inline-flex;align-items:center;margin-inline-start:var(--kj-base-space-xs, .25rem);color:var(--kj-fg-subtle, var(--kj-fg-muted));transition:color var(--kj-transition);vertical-align:middle}:host th[data-sort=asc] .kj-table-sort-indicator,:host th[data-sort=desc] .kj-table-sort-indicator{color:var(--kj-fg-primary)}:host th[aria-sort]:hover .kj-table-sort-indicator,:host th[aria-sort]:focus-visible .kj-table-sort-indicator{color:var(--kj-fg-default)}:host([data-density=\"compact\"]) th,:host([data-density=\"compact\"]) td{padding:var(--kj-base-space-xs) var(--kj-base-space-sm)}:host([data-density=\"comfortable\"]) th,:host([data-density=\"comfortable\"]) td{padding:var(--kj-base-space-md) var(--kj-base-space-lg)}:host([data-variant=\"striped\"]) tbody tr:nth-child(2n) td{background:var(--kj-bg-elevated)}:host([data-variant=\"clean\"]) th,:host([data-variant=\"clean\"]) td{border-bottom-color:transparent}:host td:focus-visible,:host th:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:-2px}:host td.kj-table-cell--editing{position:relative}:host td .kj-table-cell-ghost{visibility:hidden;white-space:pre;display:inline-block;pointer-events:none}:host td.kj-table-cell--editing ::ng-deep kj-text-editor,:host td.kj-table-cell--editing ::ng-deep kj-number-editor,:host td.kj-table-cell--editing ::ng-deep kj-select-editor,:host td.kj-table-cell--editing ::ng-deep kj-date-editor,:host td.kj-table-cell--editing ::ng-deep kj-boolean-editor{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;padding:inherit!important;background:var(--kj-bg-surface);z-index:1}:host td.kj-table-cell--editing ::ng-deep kj-input,:host td.kj-table-cell--editing ::ng-deep kj-number-input,:host td.kj-table-cell--editing ::ng-deep kj-select{display:flex!important;width:100%!important;min-width:0!important;box-sizing:border-box}:host td.kj-table-cell--editing ::ng-deep input,:host td.kj-table-cell--editing ::ng-deep .kj-select-trigger{width:100%!important;min-width:0!important;box-sizing:border-box}:host td .kj-table-editor-anchor{display:none}:host tr[data-selected] td{background:color-mix(in oklab,var(--kj-bg-primary, var(--kj-bg-accent, currentColor)) 12%,var(--kj-bg-surface))}:host tr[data-selected] td:first-child{box-shadow:inset 3px 0 0 0 var(--kj-bg-primary, var(--kj-fg-primary))}:host td[data-pin=left],:host th[data-pin=left]{position:sticky;left:0;z-index:1;background:var(--kj-bg-surface)}:host td[data-pin=right],:host th[data-pin=right]{position:sticky;right:0;z-index:1;background:var(--kj-bg-surface)}:host td[data-pin=left]:not(:has(+td[data-pin=left])),:host th[data-pin=left]:not(:has(+th[data-pin=left])){border-right:1px solid var(--kj-border-strong, var(--kj-border-default));box-shadow:4px 0 6px -4px #00000040}:host tr>:not([data-pin=right])+td[data-pin=right],:host tr>:not([data-pin=right])+th[data-pin=right]{border-left:1px solid var(--kj-border-strong, var(--kj-border-default));box-shadow:-4px 0 6px -4px #00000040}:host([data-variant=\"striped\"]) tbody tr:nth-child(2n) td[data-pin]{background:var(--kj-bg-elevated)}.kj-table-resize-handle{position:absolute;top:25%;right:0;width:6px;height:50%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;background:transparent;border-right:2px solid var(--kj-border-strong, var(--kj-border-default));transition:border-color var(--kj-transition),background var(--kj-transition),width var(--kj-transition)}.kj-table-resize-handle:hover,.kj-table-resize-handle:focus-visible{border-right-color:var(--kj-border-focus);background:color-mix(in srgb,var(--kj-border-focus) 20%,transparent);width:8px;outline:none}:host th[data-resizing] .kj-table-resize-handle{top:0;height:9999px;width:0;background:transparent;border-right:2px solid var(--kj-border-focus, var(--kj-bg-primary));transform:translate(var(--kj-resize-delta, 0px));pointer-events:none;z-index:3;transition:none}:host th.kj-table-select-cell,:host td.kj-table-select-cell{width:2.5rem;padding-inline:var(--kj-base-space-sm);text-align:center;vertical-align:middle}.kj-table-select-cell kj-checkbox{display:inline-flex;align-items:center;justify-content:center}.kj-table-filter-row>th{font-weight:400;background:var(--kj-bg-surface);border-top:1px solid var(--kj-border-muted, var(--kj-border-default))}.kj-table-filter-cell{padding-top:var(--kj-base-space-xs);padding-bottom:var(--kj-base-space-xs);vertical-align:middle}.kj-table-filter-cell .kj-table-filter-anchor+*,.kj-table-filter-cell kj-input,.kj-table-filter-cell kj-number-input,.kj-table-filter-cell kj-date-picker,.kj-table-filter-cell kj-select{width:100%}.kj-table-filter-anchor{display:block;width:100%}:host .kj-table-editor-anchor .kj-input,:host .kj-table-editor-anchor .kj-select{--kj-input-height: 1.75rem;--kj-input-font-size: var(--kj-text-xs);--kj-input-padding-x: var(--kj-base-space-sm);--kj-input-padding-y: 0;--kj-input-radius: var(--kj-radius-selector)}.kj-table-empty,.kj-table-error,.kj-table-loading{display:flex;align-items:center;justify-content:center;padding:var(--kj-base-space-lg);color:var(--kj-fg-muted)}:host([data-empty]) .kj-table-body,:host([data-error]) .kj-table-body{flex:0 1 auto}.kj-table-empty,.kj-table-error{flex:1 1 auto;min-height:0}.kj-table-loading{position:absolute;inset:0;background:color-mix(in srgb,var(--kj-bg-surface) 70%,transparent);pointer-events:none}.kj-table-loading[data-has-rows]{inset:0 0 auto;height:2px;background:var(--kj-bg-primary);padding:0;animation:kj-table-loading-pulse 1.4s ease-in-out infinite}.kj-table-loading[data-has-rows] .kj-table-loading-fallback,.kj-table-loading[data-has-rows] ::ng-deep [kjLoading]{display:none}@keyframes kj-table-loading-pulse{0%,to{opacity:.55}50%{opacity:1}}.kj-table-error{color:var(--kj-fg-error, var(--kj-fg-default))}.kj-table-loading-fallback{font-size:var(--kj-text-sm)}.kj-table-expansion-row>td{background:var(--kj-bg-elevated)}.kj-table-tbody-pinned[data-pin=top]>tr>td{background:var(--kj-bg-elevated);border-bottom:2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));box-shadow:0 4px 6px -4px #00000040;position:sticky;top:0;z-index:2}.kj-table-tbody-pinned[data-pin=bottom]>tr>td{background:var(--kj-bg-elevated);border-top:2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));box-shadow:0 -4px 6px -4px #00000040;position:sticky;bottom:0;z-index:2}.kj-table-group-toggle{display:inline-flex;align-items:center;gap:var(--kj-base-space-xs, .25rem);background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}.kj-table-group-toggle__chevron{display:inline-block;width:.75rem;font-family:var(--kj-font-mono);color:var(--kj-fg-muted);transition:transform var(--kj-transition)}.kj-table-group-toggle[aria-expanded=true] .kj-table-group-toggle__chevron{transform:rotate(90deg)}.kj-table-group-toggle__count{margin-inline-start:var(--kj-base-space-xs, .25rem);font-size:.75em;color:var(--kj-fg-muted);font-variant-numeric:tabular-nums}:host tbody tr[data-row-grouped] td{background:var(--kj-bg-elevated);font-weight:600}\n"] }]
|
|
17570
17570
|
}], ctorParameters: () => [], propDecorators: { kjResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjResource", required: false }] }], kjDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDensity", required: false }] }], kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLoading", required: false }] }], kjSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelection", required: false }] }, { type: i0.Output, args: ["kjSelectionChange"] }], kjSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelectionMode", required: false }] }], kjShowSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowSelectionColumn", required: false }] }], kjStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageKey", required: false }] }], kjStorageAdapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageAdapter", required: false }] }], kjVirtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVirtual", required: false }] }], kjEstimatedRowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEstimatedRowSize", required: false }] }], kjEnableFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableFilters", required: false }] }], kjEnableResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableResize", required: false }] }], kjEnableRowPinning: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableRowPinning", required: false }] }], kjEditOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEditOnDoubleClick", required: false }] }], kjPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPageSize", required: false }] }], kjRowExpansionTpl: [{ type: i0.ContentChild, args: ['kjRowExpansion', { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KjCellTemplateDirective), { isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KjTableEmptyTemplate), { isSignal: true }] }], loadingTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KjTableLoadingTemplate), { isSignal: true }] }], errorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KjTableErrorTemplate), { isSignal: true }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }] } });
|
|
17571
17571
|
// ── helpers ───────────────────────────────────────────────────────────────
|
|
17572
17572
|
function cellMeta(col) {
|