@truenas/ui-components 0.1.24 → 0.1.26
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.
|
@@ -2592,6 +2592,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
2592
2592
|
args: [{ selector: 'tn-expansion-panel', standalone: true, imports: [CommonModule], animations: [expandCollapseAnimation], template: "<div [ngClass]=\"classes()\">\n <button class=\"tn-expansion-panel__header\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"effectiveExpanded()\"\n [attr.aria-controls]=\"contentId\"\n [attr.aria-disabled]=\"disabled()\"\n (click)=\"toggle()\">\n @if (title()) {\n <div class=\"tn-expansion-panel__title\">\n {{ title() }}\n </div>\n }\n <ng-content select=\"[slot=title]\" />\n\n <div class=\"tn-expansion-panel__indicator\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m6 9 6 6 6-6\"/>\n </svg>\n </div>\n </button>\n\n <div class=\"tn-expansion-panel__content\"\n [id]=\"contentId\"\n [attr.aria-hidden]=\"!effectiveExpanded()\"\n [@expandCollapse]=\"effectiveExpanded() ? 'expanded' : 'collapsed'\">\n <ng-content />\n </div>\n</div>", styles: [".tn-expansion-panel{border-radius:8px;transition:box-shadow .3s ease;overflow:hidden}.tn-expansion-panel--elevation-none{box-shadow:none}.tn-expansion-panel--elevation-low{box-shadow:0 1px 3px #0000001a}.tn-expansion-panel--elevation-medium{box-shadow:0 4px 6px #0000001a}.tn-expansion-panel--elevation-high{box-shadow:0 10px 15px #0000001a}.tn-expansion-panel--bordered{border:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel--background{background-color:var(--tn-bg2, #ffffff)}.tn-expansion-panel--disabled{opacity:.6;cursor:not-allowed}.tn-expansion-panel--disabled .tn-expansion-panel__header{cursor:not-allowed}.tn-expansion-panel--expanded .tn-expansion-panel__indicator svg{transform:rotate(180deg)}.tn-expansion-panel--padding-small .tn-expansion-panel__header{padding:12px 16px}.tn-expansion-panel--padding-small .tn-expansion-panel__content{padding:0 16px 16px}.tn-expansion-panel--padding-medium .tn-expansion-panel__header{padding:16px 24px}.tn-expansion-panel--padding-medium .tn-expansion-panel__content{padding:0 24px 24px}.tn-expansion-panel--padding-large .tn-expansion-panel__header{padding:24px 32px}.tn-expansion-panel--padding-large .tn-expansion-panel__content{padding:0 32px 32px}.tn-expansion-panel--title-header .tn-expansion-panel__title{font-size:1.125rem;font-weight:600;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-header .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-body .tn-expansion-panel__indicator{color:var(--tn-fg1, #1f2937)}.tn-expansion-panel--title-link .tn-expansion-panel__title{font-size:1rem;font-weight:400;color:var(--tn-primary, #3b82f6);text-decoration:none}.tn-expansion-panel--title-link .tn-expansion-panel__indicator{color:var(--tn-primary, #3b82f6)}.tn-expansion-panel--title-link .tn-expansion-panel__header:hover:not(:disabled) .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel--title-link .tn-expansion-panel__header:focus .tn-expansion-panel__title{text-decoration:underline}.tn-expansion-panel__header{width:100%;background:none;border:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-family:inherit;text-align:left;transition:background-color .2s ease}.tn-expansion-panel--bordered .tn-expansion-panel__header,.tn-expansion-panel--bordered.tn-expansion-panel--expanded .tn-expansion-panel__header{border-bottom:1px solid var(--tn-lines, #e5e7eb)}.tn-expansion-panel__header:hover:not(:disabled){background-color:var(--tn-alt-bg1, rgba(0, 0, 0, .05))}.tn-expansion-panel__header:focus{outline:2px solid var(--tn-primary, #3b82f6);outline-offset:-2px}.tn-expansion-panel__header:disabled{cursor:not-allowed}.tn-expansion-panel__title{margin:0;line-height:1.5;flex:1;transition:text-decoration .2s ease}.tn-expansion-panel__indicator{display:flex;align-items:center;justify-content:center;margin-left:16px;transition:transform .2s ease,color .2s ease}.tn-expansion-panel__indicator svg{transition:transform .2s ease}.tn-expansion-panel__content{overflow:hidden}.tn-expansion-panel__content:not(.tn-expansion-panel--expanded){border-bottom:none}\n"] }]
|
|
2593
2593
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], titleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleStyle", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], toggleEvent: [{ type: i0.Output, args: ["toggleEvent"] }] } });
|
|
2594
2594
|
|
|
2595
|
+
/**
|
|
2596
|
+
* Directive to mark content for projection into the checkbox label area.
|
|
2597
|
+
* Use when the label needs rich content (links, icons, etc.) instead of plain text.
|
|
2598
|
+
*
|
|
2599
|
+
* @example
|
|
2600
|
+
* ```html
|
|
2601
|
+
* <tn-checkbox formControlName="terms">
|
|
2602
|
+
* <span tnCheckboxLabel>I agree to the <a href="/terms">Terms</a></span>
|
|
2603
|
+
* </tn-checkbox>
|
|
2604
|
+
* ```
|
|
2605
|
+
*/
|
|
2606
|
+
class TnCheckboxLabelDirective {
|
|
2607
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCheckboxLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2608
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TnCheckboxLabelDirective, isStandalone: true, selector: "[tnCheckboxLabel]", ngImport: i0 });
|
|
2609
|
+
}
|
|
2610
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCheckboxLabelDirective, decorators: [{
|
|
2611
|
+
type: Directive,
|
|
2612
|
+
args: [{
|
|
2613
|
+
selector: '[tnCheckboxLabel]',
|
|
2614
|
+
standalone: true,
|
|
2615
|
+
}]
|
|
2616
|
+
}] });
|
|
2595
2617
|
class TnCheckboxComponent {
|
|
2596
2618
|
checkboxEl = viewChild.required('checkboxEl');
|
|
2597
2619
|
label = input('Checkbox', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
@@ -2603,9 +2625,12 @@ class TnCheckboxComponent {
|
|
|
2603
2625
|
error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
|
|
2604
2626
|
checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
2605
2627
|
change = output();
|
|
2628
|
+
labelContent = contentChildren(TnCheckboxLabelDirective, ...(ngDevMode ? [{ debugName: "labelContent" }] : []));
|
|
2629
|
+
hasProjectedLabel = computed(() => this.labelContent().length > 0, ...(ngDevMode ? [{ debugName: "hasProjectedLabel" }] : []));
|
|
2606
2630
|
id = `tn-checkbox-${Math.random().toString(36).substr(2, 9)}`;
|
|
2607
2631
|
// Internal state for CVA
|
|
2608
2632
|
internalChecked = signal(false, ...(ngDevMode ? [{ debugName: "internalChecked" }] : []));
|
|
2633
|
+
cvaControlled = signal(false, ...(ngDevMode ? [{ debugName: "cvaControlled" }] : []));
|
|
2609
2634
|
// CVA disabled state management
|
|
2610
2635
|
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
2611
2636
|
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
@@ -2627,10 +2652,11 @@ class TnCheckboxComponent {
|
|
|
2627
2652
|
this.focusMonitor.stopMonitoring(checkboxEl);
|
|
2628
2653
|
}
|
|
2629
2654
|
}
|
|
2630
|
-
//
|
|
2631
|
-
effectiveChecked = computed(() => this.internalChecked()
|
|
2655
|
+
// CVA takes precedence once a form control has written a value
|
|
2656
|
+
effectiveChecked = computed(() => this.cvaControlled() ? this.internalChecked() : this.checked(), ...(ngDevMode ? [{ debugName: "effectiveChecked" }] : []));
|
|
2632
2657
|
// ControlValueAccessor implementation
|
|
2633
2658
|
writeValue(value) {
|
|
2659
|
+
this.cvaControlled.set(true);
|
|
2634
2660
|
this.internalChecked.set(value !== null && value !== undefined ? value : false);
|
|
2635
2661
|
}
|
|
2636
2662
|
registerOnChange(fn) {
|
|
@@ -2670,7 +2696,7 @@ class TnCheckboxComponent {
|
|
|
2670
2696
|
useExisting: forwardRef(() => TnCheckboxComponent),
|
|
2671
2697
|
multi: true
|
|
2672
2698
|
}
|
|
2673
|
-
], viewQueries: [{ propertyName: "checkboxEl", first: true, predicate: ["checkboxEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n <label class=\"tn-checkbox__label\" [for]=\"id\">\n <input\n #checkboxEl\n type=\"checkbox\"\n class=\"tn-checkbox__input\"\n [id]=\"id\"\n [checked]=\"effectiveChecked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.data-testid]=\"testId()\"\n [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tn-checkbox__checkmark\"></span>\n @if (!hideLabel()) {\n <span class=\"tn-checkbox__text\"
|
|
2699
|
+
], queries: [{ propertyName: "labelContent", predicate: TnCheckboxLabelDirective, isSignal: true }], viewQueries: [{ propertyName: "checkboxEl", first: true, predicate: ["checkboxEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n <label class=\"tn-checkbox__label\" [for]=\"id\">\n <input\n #checkboxEl\n type=\"checkbox\"\n class=\"tn-checkbox__input\"\n [id]=\"id\"\n [checked]=\"effectiveChecked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.data-testid]=\"testId()\"\n [attr.aria-label]=\"hasProjectedLabel() ? label() : null\"\n [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tn-checkbox__checkmark\"></span>\n @if (!hideLabel()) {\n <span class=\"tn-checkbox__text\">\n @if (hasProjectedLabel()) {\n <ng-content select=\"[tnCheckboxLabel]\" />\n } @else {\n {{ label() }}\n }\n </span>\n }\n </label>\n\n @if (error()) {\n <div\n class=\"tn-checkbox__error\"\n role=\"alert\"\n aria-live=\"polite\"\n [id]=\"id + '-error'\"\n >\n {{ error() }}\n </div>\n }\n</div>", styles: [".tn-checkbox{display:flex;flex-direction:column;gap:4px}.tn-checkbox__label{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--tn-font-family-body, \"Inter\", sans-serif);font-size:14px;line-height:1.5;color:var(--tn-fg1, #333)}.tn-checkbox__label:hover:not(.tn-checkbox--disabled) .tn-checkbox__checkmark{border-color:var(--tn-primary, #0095d5)}.tn-checkbox__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-checkbox__input:checked~.tn-checkbox__checkmark{background-color:var(--tn-primary, #0095d5);border-color:var(--tn-primary, #0095d5)}.tn-checkbox__input:checked~.tn-checkbox__checkmark:after{display:block}.tn-checkbox__input:indeterminate~.tn-checkbox__checkmark{background-color:var(--tn-primary, #0095d5);border-color:var(--tn-primary, #0095d5)}.tn-checkbox__input:indeterminate~.tn-checkbox__checkmark:after{display:block;content:\"\";left:4px;top:8px;width:8px;height:2px;background:var(--tn-primary-txt, #fff);border-radius:1px;transform:none}.tn-checkbox__input:focus~.tn-checkbox__checkmark{outline:2px solid var(--tn-primary, #0095d5);outline-offset:2px}.tn-checkbox__input:disabled~.tn-checkbox__checkmark{background-color:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #e0e0e0);cursor:not-allowed}.tn-checkbox__input:disabled:checked~.tn-checkbox__checkmark{background-color:var(--tn-lines, #e0e0e0);border-color:var(--tn-lines, #e0e0e0)}.tn-checkbox__checkmark{position:relative;height:16px;width:16px;background-color:var(--tn-bg1, #fff);border:1px solid var(--tn-lines, #ccc);border-radius:2px;transition:all .2s ease;flex-shrink:0}.tn-checkbox__checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:8px;border:solid var(--tn-primary-txt, #fff);border-width:0 2px 2px 0;transform:rotate(45deg)}.tn-checkbox__text{flex:1;min-width:0}.tn-checkbox__error{color:var(--tn-red, #dc2626);font-size:12px;font-family:var(--tn-font-family-body, \"Inter\", sans-serif);margin-top:4px;display:flex;align-items:center;gap:4px}.tn-checkbox--disabled .tn-checkbox__label{cursor:not-allowed;color:var(--tn-fg2, #666);opacity:.6}.tn-checkbox--disabled .tn-checkbox__text{color:var(--tn-fg2, #666)}.tn-checkbox--error .tn-checkbox__checkmark{border-color:var(--tn-red, #dc2626)}.tn-checkbox--indeterminate .tn-checkbox__checkmark{background-color:var(--tn-primary, #0095d5);border-color:var(--tn-primary, #0095d5)}.tn-checkbox__input:focus-visible~.tn-checkbox__checkmark{outline:2px solid var(--tn-primary, #0095d5);outline-offset:2px}@media(prefers-contrast:high){.tn-checkbox__checkmark{border-width:2px}}@media(prefers-reduced-motion:reduce){.tn-checkbox__checkmark{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }] });
|
|
2674
2700
|
}
|
|
2675
2701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCheckboxComponent, decorators: [{
|
|
2676
2702
|
type: Component,
|
|
@@ -2680,8 +2706,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
2680
2706
|
useExisting: forwardRef(() => TnCheckboxComponent),
|
|
2681
2707
|
multi: true
|
|
2682
2708
|
}
|
|
2683
|
-
], template: "<div [ngClass]=\"classes()\">\n <label class=\"tn-checkbox__label\" [for]=\"id\">\n <input\n #checkboxEl\n type=\"checkbox\"\n class=\"tn-checkbox__input\"\n [id]=\"id\"\n [checked]=\"effectiveChecked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.data-testid]=\"testId()\"\n [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tn-checkbox__checkmark\"></span>\n @if (!hideLabel()) {\n <span class=\"tn-checkbox__text\"
|
|
2684
|
-
}], propDecorators: { checkboxEl: [{ type: i0.ViewChild, args: ['checkboxEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
|
|
2709
|
+
], template: "<div [ngClass]=\"classes()\">\n <label class=\"tn-checkbox__label\" [for]=\"id\">\n <input\n #checkboxEl\n type=\"checkbox\"\n class=\"tn-checkbox__input\"\n [id]=\"id\"\n [checked]=\"effectiveChecked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.data-testid]=\"testId()\"\n [attr.aria-label]=\"hasProjectedLabel() ? label() : null\"\n [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n [attr.aria-invalid]=\"error() ? 'true' : null\"\n (change)=\"onCheckboxChange($event)\"\n />\n <span class=\"tn-checkbox__checkmark\"></span>\n @if (!hideLabel()) {\n <span class=\"tn-checkbox__text\">\n @if (hasProjectedLabel()) {\n <ng-content select=\"[tnCheckboxLabel]\" />\n } @else {\n {{ label() }}\n }\n </span>\n }\n </label>\n\n @if (error()) {\n <div\n class=\"tn-checkbox__error\"\n role=\"alert\"\n aria-live=\"polite\"\n [id]=\"id + '-error'\"\n >\n {{ error() }}\n </div>\n }\n</div>", styles: [".tn-checkbox{display:flex;flex-direction:column;gap:4px}.tn-checkbox__label{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--tn-font-family-body, \"Inter\", sans-serif);font-size:14px;line-height:1.5;color:var(--tn-fg1, #333)}.tn-checkbox__label:hover:not(.tn-checkbox--disabled) .tn-checkbox__checkmark{border-color:var(--tn-primary, #0095d5)}.tn-checkbox__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-checkbox__input:checked~.tn-checkbox__checkmark{background-color:var(--tn-primary, #0095d5);border-color:var(--tn-primary, #0095d5)}.tn-checkbox__input:checked~.tn-checkbox__checkmark:after{display:block}.tn-checkbox__input:indeterminate~.tn-checkbox__checkmark{background-color:var(--tn-primary, #0095d5);border-color:var(--tn-primary, #0095d5)}.tn-checkbox__input:indeterminate~.tn-checkbox__checkmark:after{display:block;content:\"\";left:4px;top:8px;width:8px;height:2px;background:var(--tn-primary-txt, #fff);border-radius:1px;transform:none}.tn-checkbox__input:focus~.tn-checkbox__checkmark{outline:2px solid var(--tn-primary, #0095d5);outline-offset:2px}.tn-checkbox__input:disabled~.tn-checkbox__checkmark{background-color:var(--tn-bg2, #f5f5f5);border-color:var(--tn-lines, #e0e0e0);cursor:not-allowed}.tn-checkbox__input:disabled:checked~.tn-checkbox__checkmark{background-color:var(--tn-lines, #e0e0e0);border-color:var(--tn-lines, #e0e0e0)}.tn-checkbox__checkmark{position:relative;height:16px;width:16px;background-color:var(--tn-bg1, #fff);border:1px solid var(--tn-lines, #ccc);border-radius:2px;transition:all .2s ease;flex-shrink:0}.tn-checkbox__checkmark:after{content:\"\";position:absolute;display:none;left:5px;top:2px;width:4px;height:8px;border:solid var(--tn-primary-txt, #fff);border-width:0 2px 2px 0;transform:rotate(45deg)}.tn-checkbox__text{flex:1;min-width:0}.tn-checkbox__error{color:var(--tn-red, #dc2626);font-size:12px;font-family:var(--tn-font-family-body, \"Inter\", sans-serif);margin-top:4px;display:flex;align-items:center;gap:4px}.tn-checkbox--disabled .tn-checkbox__label{cursor:not-allowed;color:var(--tn-fg2, #666);opacity:.6}.tn-checkbox--disabled .tn-checkbox__text{color:var(--tn-fg2, #666)}.tn-checkbox--error .tn-checkbox__checkmark{border-color:var(--tn-red, #dc2626)}.tn-checkbox--indeterminate .tn-checkbox__checkmark{background-color:var(--tn-primary, #0095d5);border-color:var(--tn-primary, #0095d5)}.tn-checkbox__input:focus-visible~.tn-checkbox__checkmark{outline:2px solid var(--tn-primary, #0095d5);outline-offset:2px}@media(prefers-contrast:high){.tn-checkbox__checkmark{border-width:2px}}@media(prefers-reduced-motion:reduce){.tn-checkbox__checkmark{transition:none}}\n"] }]
|
|
2710
|
+
}], propDecorators: { checkboxEl: [{ type: i0.ViewChild, args: ['checkboxEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], labelContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TnCheckboxLabelDirective), { isSignal: true }] }] } });
|
|
2711
|
+
|
|
2712
|
+
/**
|
|
2713
|
+
* Harness for interacting with tn-checkbox in tests.
|
|
2714
|
+
* Provides methods for checking, unchecking, and querying checkbox state.
|
|
2715
|
+
*
|
|
2716
|
+
* @example
|
|
2717
|
+
* ```typescript
|
|
2718
|
+
* // Find and check a checkbox
|
|
2719
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness.with({ label: 'Accept terms' }));
|
|
2720
|
+
* await checkbox.check();
|
|
2721
|
+
* expect(await checkbox.isChecked()).toBe(true);
|
|
2722
|
+
*
|
|
2723
|
+
* // Toggle a checkbox
|
|
2724
|
+
* await checkbox.toggle();
|
|
2725
|
+
* expect(await checkbox.isChecked()).toBe(false);
|
|
2726
|
+
*
|
|
2727
|
+
* // Find by testId
|
|
2728
|
+
* const terms = await loader.getHarness(TnCheckboxHarness.with({ testId: 'terms-checkbox' }));
|
|
2729
|
+
* ```
|
|
2730
|
+
*/
|
|
2731
|
+
class TnCheckboxHarness extends ComponentHarness {
|
|
2732
|
+
/**
|
|
2733
|
+
* The selector for the host element of a `TnCheckboxComponent` instance.
|
|
2734
|
+
*/
|
|
2735
|
+
static hostSelector = 'tn-checkbox';
|
|
2736
|
+
_input = this.locatorFor('.tn-checkbox__input');
|
|
2737
|
+
_label = this.locatorFor('.tn-checkbox__label');
|
|
2738
|
+
_text = this.locatorForOptional('.tn-checkbox__text');
|
|
2739
|
+
_error = this.locatorForOptional('.tn-checkbox__error');
|
|
2740
|
+
/**
|
|
2741
|
+
* Gets a `HarnessPredicate` that can be used to search for a checkbox
|
|
2742
|
+
* with specific attributes.
|
|
2743
|
+
*
|
|
2744
|
+
* @param options Options for filtering which checkbox instances are considered a match.
|
|
2745
|
+
* @returns A `HarnessPredicate` configured with the given options.
|
|
2746
|
+
*
|
|
2747
|
+
* @example
|
|
2748
|
+
* ```typescript
|
|
2749
|
+
* // Find by label text
|
|
2750
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness.with({ label: 'Accept' }));
|
|
2751
|
+
*
|
|
2752
|
+
* // Find by label regex
|
|
2753
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness.with({ label: /terms/i }));
|
|
2754
|
+
*
|
|
2755
|
+
* // Find by testId
|
|
2756
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness.with({ testId: 'my-checkbox' }));
|
|
2757
|
+
* ```
|
|
2758
|
+
*/
|
|
2759
|
+
static with(options = {}) {
|
|
2760
|
+
return new HarnessPredicate(TnCheckboxHarness, options)
|
|
2761
|
+
.addOption('label', options.label, (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))
|
|
2762
|
+
.addOption('testId', options.testId, async (harness, testId) => {
|
|
2763
|
+
return (await harness.getTestId()) === testId;
|
|
2764
|
+
});
|
|
2765
|
+
}
|
|
2766
|
+
/**
|
|
2767
|
+
* Gets the checkbox label text content.
|
|
2768
|
+
*
|
|
2769
|
+
* @returns Promise resolving to the label text.
|
|
2770
|
+
*
|
|
2771
|
+
* @example
|
|
2772
|
+
* ```typescript
|
|
2773
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2774
|
+
* expect(await checkbox.getLabelText()).toBe('Accept terms');
|
|
2775
|
+
* ```
|
|
2776
|
+
*/
|
|
2777
|
+
async getLabelText() {
|
|
2778
|
+
const text = await this._text();
|
|
2779
|
+
return text ? (await text.text()).trim() : '';
|
|
2780
|
+
}
|
|
2781
|
+
/**
|
|
2782
|
+
* Checks whether the checkbox is currently checked.
|
|
2783
|
+
*
|
|
2784
|
+
* @returns Promise resolving to true if the checkbox is checked.
|
|
2785
|
+
*
|
|
2786
|
+
* @example
|
|
2787
|
+
* ```typescript
|
|
2788
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2789
|
+
* expect(await checkbox.isChecked()).toBe(false);
|
|
2790
|
+
* ```
|
|
2791
|
+
*/
|
|
2792
|
+
async isChecked() {
|
|
2793
|
+
const input = await this._input();
|
|
2794
|
+
return (await input.getProperty('checked')) ?? false;
|
|
2795
|
+
}
|
|
2796
|
+
/**
|
|
2797
|
+
* Checks whether the checkbox is disabled.
|
|
2798
|
+
*
|
|
2799
|
+
* @returns Promise resolving to true if the checkbox is disabled.
|
|
2800
|
+
*
|
|
2801
|
+
* @example
|
|
2802
|
+
* ```typescript
|
|
2803
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2804
|
+
* expect(await checkbox.isDisabled()).toBe(false);
|
|
2805
|
+
* ```
|
|
2806
|
+
*/
|
|
2807
|
+
async isDisabled() {
|
|
2808
|
+
const input = await this._input();
|
|
2809
|
+
return (await input.getProperty('disabled')) ?? false;
|
|
2810
|
+
}
|
|
2811
|
+
/**
|
|
2812
|
+
* Checks whether the checkbox is required.
|
|
2813
|
+
*
|
|
2814
|
+
* @returns Promise resolving to true if the checkbox is required.
|
|
2815
|
+
*
|
|
2816
|
+
* @example
|
|
2817
|
+
* ```typescript
|
|
2818
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2819
|
+
* expect(await checkbox.isRequired()).toBe(true);
|
|
2820
|
+
* ```
|
|
2821
|
+
*/
|
|
2822
|
+
async isRequired() {
|
|
2823
|
+
const input = await this._input();
|
|
2824
|
+
return (await input.getProperty('required')) ?? false;
|
|
2825
|
+
}
|
|
2826
|
+
/**
|
|
2827
|
+
* Checks whether the checkbox is in the indeterminate state.
|
|
2828
|
+
*
|
|
2829
|
+
* @returns Promise resolving to true if the checkbox is indeterminate.
|
|
2830
|
+
*
|
|
2831
|
+
* @example
|
|
2832
|
+
* ```typescript
|
|
2833
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2834
|
+
* expect(await checkbox.isIndeterminate()).toBe(false);
|
|
2835
|
+
* ```
|
|
2836
|
+
*/
|
|
2837
|
+
async isIndeterminate() {
|
|
2838
|
+
const input = await this._input();
|
|
2839
|
+
return (await input.getProperty('indeterminate')) ?? false;
|
|
2840
|
+
}
|
|
2841
|
+
/**
|
|
2842
|
+
* Gets the test ID attribute value.
|
|
2843
|
+
*
|
|
2844
|
+
* @returns Promise resolving to the test ID string, or null.
|
|
2845
|
+
*
|
|
2846
|
+
* @example
|
|
2847
|
+
* ```typescript
|
|
2848
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2849
|
+
* expect(await checkbox.getTestId()).toBe('terms-checkbox');
|
|
2850
|
+
* ```
|
|
2851
|
+
*/
|
|
2852
|
+
async getTestId() {
|
|
2853
|
+
const input = await this._input();
|
|
2854
|
+
return input.getAttribute('data-testid');
|
|
2855
|
+
}
|
|
2856
|
+
/**
|
|
2857
|
+
* Gets the error message text, if any.
|
|
2858
|
+
*
|
|
2859
|
+
* @returns Promise resolving to the error message, or null if none.
|
|
2860
|
+
*
|
|
2861
|
+
* @example
|
|
2862
|
+
* ```typescript
|
|
2863
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2864
|
+
* expect(await checkbox.getErrorText()).toBe('You must accept the terms');
|
|
2865
|
+
* ```
|
|
2866
|
+
*/
|
|
2867
|
+
async getErrorText() {
|
|
2868
|
+
const error = await this._error();
|
|
2869
|
+
return error ? (await error.text()).trim() : null;
|
|
2870
|
+
}
|
|
2871
|
+
/**
|
|
2872
|
+
* Checks the checkbox. No-op if already checked.
|
|
2873
|
+
*
|
|
2874
|
+
* @example
|
|
2875
|
+
* ```typescript
|
|
2876
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2877
|
+
* await checkbox.check();
|
|
2878
|
+
* expect(await checkbox.isChecked()).toBe(true);
|
|
2879
|
+
* ```
|
|
2880
|
+
*/
|
|
2881
|
+
async check() {
|
|
2882
|
+
if (!(await this.isChecked())) {
|
|
2883
|
+
await this.toggle();
|
|
2884
|
+
}
|
|
2885
|
+
}
|
|
2886
|
+
/**
|
|
2887
|
+
* Unchecks the checkbox. No-op if already unchecked.
|
|
2888
|
+
*
|
|
2889
|
+
* @example
|
|
2890
|
+
* ```typescript
|
|
2891
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2892
|
+
* await checkbox.uncheck();
|
|
2893
|
+
* expect(await checkbox.isChecked()).toBe(false);
|
|
2894
|
+
* ```
|
|
2895
|
+
*/
|
|
2896
|
+
async uncheck() {
|
|
2897
|
+
if (await this.isChecked()) {
|
|
2898
|
+
await this.toggle();
|
|
2899
|
+
}
|
|
2900
|
+
}
|
|
2901
|
+
/**
|
|
2902
|
+
* Toggles the checkbox checked state by clicking the label.
|
|
2903
|
+
*
|
|
2904
|
+
* @example
|
|
2905
|
+
* ```typescript
|
|
2906
|
+
* const checkbox = await loader.getHarness(TnCheckboxHarness);
|
|
2907
|
+
* await checkbox.toggle();
|
|
2908
|
+
* ```
|
|
2909
|
+
*/
|
|
2910
|
+
async toggle() {
|
|
2911
|
+
const label = await this._label();
|
|
2912
|
+
await label.click();
|
|
2913
|
+
}
|
|
2914
|
+
}
|
|
2685
2915
|
|
|
2686
2916
|
class TnRadioComponent {
|
|
2687
2917
|
radioEl = viewChild.required('radioEl');
|
|
@@ -10418,5 +10648,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
|
|
|
10418
10648
|
* Generated bundle index. Do not edit.
|
|
10419
10649
|
*/
|
|
10420
10650
|
|
|
10421
|
-
export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
|
|
10651
|
+
export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, StripMntPrefixPipe, THEME_MAP, THEME_STORAGE_KEY, TN_THEME_DEFINITIONS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnCalendarComponent, TnCalendarHeaderComponent, TnCardComponent, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnConfirmDialogComponent, TnDateInputComponent, TnDateRangeInputComponent, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnFilePickerComponent, TnFilePickerPopupComponent, TnFormFieldComponent, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTabsComponent, TnTabsHarness, TnTheme, TnThemeService, TnTimeInputComponent, TnTooltipComponent, TnTooltipDirective, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeNodeComponent, TnTreeNodeOutletDirective, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, createLucideLibrary, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, libIconMarker, registerLucideIcons, setupLucideIntegration, tnIconMarker };
|
|
10422
10652
|
//# sourceMappingURL=truenas-ui-components.mjs.map
|