@nucleus-suite-pe/core 0.5.0 → 0.6.1
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, makeEnvironmentProviders, inject, Injector, signal, computed, Injectable, effect, input, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, output, TemplateRef, Directive, contentChildren, untracked } from '@angular/core';
|
|
2
|
+
import { InjectionToken, makeEnvironmentProviders, inject, Injector, signal, computed, Injectable, effect, input, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, model, output, TemplateRef, Directive, contentChildren, untracked } from '@angular/core';
|
|
3
3
|
import { HttpContextToken, HttpClient, HttpContext, HttpErrorResponse } from '@angular/common/http';
|
|
4
4
|
import { firstValueFrom, catchError, throwError, from, switchMap } from 'rxjs';
|
|
5
5
|
import { definePreset } from '@primeuix/themes';
|
|
@@ -986,6 +986,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
986
986
|
`, styles: [":host{display:inline-flex}\n"] }]
|
|
987
987
|
}], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
|
|
988
988
|
|
|
989
|
+
class NucleusCard {
|
|
990
|
+
heading = input('', ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
|
|
991
|
+
subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
992
|
+
size = input('full', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
993
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
994
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusCard, isStandalone: true, selector: "nucleus-card", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" } }, ngImport: i0, template: `
|
|
995
|
+
@if (heading() || subtitle()) {
|
|
996
|
+
<div class="head">
|
|
997
|
+
@if (heading()) {
|
|
998
|
+
<h2>{{ heading() }}</h2>
|
|
999
|
+
}
|
|
1000
|
+
@if (subtitle()) {
|
|
1001
|
+
<p class="subtitle">{{ subtitle() }}</p>
|
|
1002
|
+
}
|
|
1003
|
+
</div>
|
|
1004
|
+
}
|
|
1005
|
+
|
|
1006
|
+
<ng-content />
|
|
1007
|
+
|
|
1008
|
+
<div class="actions">
|
|
1009
|
+
<ng-content select="[nucleusCardActions]" />
|
|
1010
|
+
</div>
|
|
1011
|
+
`, isInline: true, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:color-mix(in srgb,var(--ac-surface) 70%,transparent)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:600}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1012
|
+
}
|
|
1013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusCard, decorators: [{
|
|
1014
|
+
type: Component,
|
|
1015
|
+
args: [{ selector: 'nucleus-card', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.data-size]': 'size()' }, template: `
|
|
1016
|
+
@if (heading() || subtitle()) {
|
|
1017
|
+
<div class="head">
|
|
1018
|
+
@if (heading()) {
|
|
1019
|
+
<h2>{{ heading() }}</h2>
|
|
1020
|
+
}
|
|
1021
|
+
@if (subtitle()) {
|
|
1022
|
+
<p class="subtitle">{{ subtitle() }}</p>
|
|
1023
|
+
}
|
|
1024
|
+
</div>
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
<ng-content />
|
|
1028
|
+
|
|
1029
|
+
<div class="actions">
|
|
1030
|
+
<ng-content select="[nucleusCardActions]" />
|
|
1031
|
+
</div>
|
|
1032
|
+
`, styles: [":host{display:block;padding:22px 24px;border:1px solid var(--ac-border);border-radius:12px;background:color-mix(in srgb,var(--ac-surface) 70%,transparent)}:host([data-size=\"sm\"]){max-width:34rem}:host([data-size=\"md\"]){max-width:48rem}:host([data-size=\"lg\"]){max-width:64rem}.head{margin-bottom:18px}h2{margin:0;font-size:16px;font-weight:600}.subtitle{margin:4px 0 0;color:var(--ac-text-muted);font-size:13px}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.actions:empty{display:none}\n"] }]
|
|
1033
|
+
}], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
1034
|
+
|
|
1035
|
+
class NucleusTabs {
|
|
1036
|
+
tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
1037
|
+
active = model.required(...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
1038
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1039
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusTabs, isStandalone: true, selector: "nucleus-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { active: "activeChange" }, ngImport: i0, template: `
|
|
1040
|
+
<div class="bar" role="tablist">
|
|
1041
|
+
@for (tab of tabs(); track tab.id) {
|
|
1042
|
+
<button
|
|
1043
|
+
type="button"
|
|
1044
|
+
class="tab"
|
|
1045
|
+
role="tab"
|
|
1046
|
+
[class.is-active]="tab.id === active()"
|
|
1047
|
+
[attr.aria-selected]="tab.id === active()"
|
|
1048
|
+
(click)="active.set(tab.id)"
|
|
1049
|
+
>
|
|
1050
|
+
@if (tab.icon) {
|
|
1051
|
+
<i [class]="tab.icon" aria-hidden="true"></i>
|
|
1052
|
+
}
|
|
1053
|
+
{{ tab.label }}
|
|
1054
|
+
@if (tab.badge !== undefined) {
|
|
1055
|
+
<span class="badge">{{ tab.badge }}</span>
|
|
1056
|
+
}
|
|
1057
|
+
</button>
|
|
1058
|
+
}
|
|
1059
|
+
</div>
|
|
1060
|
+
`, isInline: true, styles: [":host{display:block;margin-bottom:12px}.bar{display:flex;overflow-x:auto;justify-content:flex-start;gap:4px;border-bottom:1px solid var(--ac-border);scrollbar-width:none}.bar::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--ac-text-muted);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .12s ease,border-color .12s ease}.tab:hover{color:var(--ac-text)}.tab.is-active{border-bottom-color:var(--ac-accent);color:var(--ac-text)}.tab i{font-size:13px}.badge{padding:1px 7px;border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 12%,transparent);font-size:11px}.tab.is-active .badge{background:color-mix(in srgb,var(--ac-accent) 26%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1061
|
+
}
|
|
1062
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusTabs, decorators: [{
|
|
1063
|
+
type: Component,
|
|
1064
|
+
args: [{ selector: 'nucleus-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
1065
|
+
<div class="bar" role="tablist">
|
|
1066
|
+
@for (tab of tabs(); track tab.id) {
|
|
1067
|
+
<button
|
|
1068
|
+
type="button"
|
|
1069
|
+
class="tab"
|
|
1070
|
+
role="tab"
|
|
1071
|
+
[class.is-active]="tab.id === active()"
|
|
1072
|
+
[attr.aria-selected]="tab.id === active()"
|
|
1073
|
+
(click)="active.set(tab.id)"
|
|
1074
|
+
>
|
|
1075
|
+
@if (tab.icon) {
|
|
1076
|
+
<i [class]="tab.icon" aria-hidden="true"></i>
|
|
1077
|
+
}
|
|
1078
|
+
{{ tab.label }}
|
|
1079
|
+
@if (tab.badge !== undefined) {
|
|
1080
|
+
<span class="badge">{{ tab.badge }}</span>
|
|
1081
|
+
}
|
|
1082
|
+
</button>
|
|
1083
|
+
}
|
|
1084
|
+
</div>
|
|
1085
|
+
`, styles: [":host{display:block;margin-bottom:12px}.bar{display:flex;overflow-x:auto;justify-content:flex-start;gap:4px;border-bottom:1px solid var(--ac-border);scrollbar-width:none}.bar::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--ac-text-muted);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .12s ease,border-color .12s ease}.tab:hover{color:var(--ac-text)}.tab.is-active{border-bottom-color:var(--ac-accent);color:var(--ac-text)}.tab i{font-size:13px}.badge{padding:1px 7px;border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 12%,transparent);font-size:11px}.tab.is-active .badge{background:color-mix(in srgb,var(--ac-accent) 26%,transparent)}\n"] }]
|
|
1086
|
+
}], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }, { type: i0.Output, args: ["activeChange"] }] } });
|
|
1087
|
+
|
|
989
1088
|
class NucleusPage {
|
|
990
1089
|
heading = signal('', ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
|
|
991
1090
|
lead = signal('', ...(ngDevMode ? [{ debugName: "lead" }] : /* istanbul ignore next */ []));
|
|
@@ -1037,11 +1136,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
1037
1136
|
args: [{ providedIn: 'root' }]
|
|
1038
1137
|
}] });
|
|
1039
1138
|
|
|
1139
|
+
function resolveFieldSize(field) {
|
|
1140
|
+
if (field.size)
|
|
1141
|
+
return field.size;
|
|
1142
|
+
if (field.kind === 'textarea')
|
|
1143
|
+
return 'full';
|
|
1144
|
+
const max = field.maxlength;
|
|
1145
|
+
if (max === undefined)
|
|
1146
|
+
return 'md';
|
|
1147
|
+
if (max <= 8)
|
|
1148
|
+
return 'xs';
|
|
1149
|
+
if (max <= 20)
|
|
1150
|
+
return 'sm';
|
|
1151
|
+
if (max <= 40)
|
|
1152
|
+
return 'md';
|
|
1153
|
+
if (max <= 80)
|
|
1154
|
+
return 'lg';
|
|
1155
|
+
return 'full';
|
|
1156
|
+
}
|
|
1157
|
+
|
|
1040
1158
|
class NucleusForm {
|
|
1041
1159
|
fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
|
|
1042
1160
|
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1043
1161
|
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1044
|
-
|
|
1162
|
+
columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
1045
1163
|
valueChange = output();
|
|
1046
1164
|
read(field) {
|
|
1047
1165
|
return this.value()[field.key] ?? null;
|
|
@@ -1059,9 +1177,13 @@ class NucleusForm {
|
|
|
1059
1177
|
isDisabled(field) {
|
|
1060
1178
|
return this.readonly() || field.disabled === true;
|
|
1061
1179
|
}
|
|
1062
|
-
|
|
1180
|
+
fieldClass(field) {
|
|
1063
1181
|
const span = field.span ?? 1;
|
|
1064
|
-
return `is-span-${span === 'full' ? 'full' : span}`;
|
|
1182
|
+
return `is-span-${span === 'full' ? 'full' : span} is-size-${resolveFieldSize(field)}`;
|
|
1183
|
+
}
|
|
1184
|
+
gridClass() {
|
|
1185
|
+
const columns = this.columns();
|
|
1186
|
+
return columns ? `is-cap-${Math.min(Math.max(columns, 1), 4)}` : '';
|
|
1065
1187
|
}
|
|
1066
1188
|
optionsOf(field) {
|
|
1067
1189
|
return [...(field.options ?? [])];
|
|
@@ -1070,7 +1192,7 @@ class NucleusForm {
|
|
|
1070
1192
|
return field.kind ?? 'text';
|
|
1071
1193
|
}
|
|
1072
1194
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1073
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusForm, isStandalone: true, selector: "nucleus-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null },
|
|
1195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusForm, isStandalone: true, selector: "nucleus-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"grid\" [class]=\"gridClass()\">\n @for (field of fields(); track field.key) {\n <div class=\"field\" [class]=\"fieldClass(field)\">\n @if (kindOf(field) !== 'checkbox' && kindOf(field) !== 'switch') {\n <label [attr.for]=\"'nf-' + field.key\">{{ field.label }}</label>\n }\n\n @switch (kindOf(field)) {\n @case ('textarea') {\n <textarea\n pTextarea\n [id]=\"'nf-' + field.key\"\n [rows]=\"field.rows ?? 3\"\n [ngModel]=\"text(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [attr.maxlength]=\"field.maxlength ?? null\"\n [attr.placeholder]=\"field.placeholder ?? null\"\n [ngModelOptions]=\"{ standalone: true }\"\n fluid\n ></textarea>\n }\n @case ('select') {\n <p-select\n [inputId]=\"'nf-' + field.key\"\n [options]=\"optionsOf(field)\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"read(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [showClear]=\"field.clearable === true\"\n [ngModelOptions]=\"{ standalone: true }\"\n fluid\n />\n }\n @case ('checkbox') {\n <div class=\"inline\">\n <p-checkbox\n [inputId]=\"'nf-' + field.key\"\n [binary]=\"true\"\n [ngModel]=\"checked(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <label [attr.for]=\"'nf-' + field.key\" class=\"inline-label\">{{ field.label }}</label>\n </div>\n }\n @case ('switch') {\n <div class=\"inline\">\n <p-toggleswitch\n [inputId]=\"'nf-' + field.key\"\n [ngModel]=\"checked(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <label [attr.for]=\"'nf-' + field.key\" class=\"inline-label\">{{ field.label }}</label>\n </div>\n }\n @default {\n <input\n pInputText\n [id]=\"'nf-' + field.key\"\n [type]=\"kindOf(field) === 'number' ? 'number' : kindOf(field)\"\n [ngModel]=\"text(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [attr.maxlength]=\"field.maxlength ?? null\"\n [attr.placeholder]=\"field.placeholder ?? null\"\n [ngModelOptions]=\"{ standalone: true }\"\n autocomplete=\"off\"\n fluid\n />\n }\n }\n\n @if (field.hint) {\n <p class=\"hint\">{{ field.hint }}</p>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.grid{display:grid;grid-template-columns:1fr;gap:18px 20px}.field{display:flex;min-width:0;flex-direction:column;gap:6px}.field label{color:var(--ac-text-muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.field .hint{margin:0;max-width:52ch;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.inline{display:flex;min-height:38px;align-items:center;gap:10px}.inline-label{color:var(--ac-text);font-size:13px;letter-spacing:normal;text-transform:none}.is-size-xs :is(input,textarea,.p-select,.p-inputtext){max-width:6rem}.is-size-sm :is(input,textarea,.p-select,.p-inputtext){max-width:11rem}.is-size-md :is(input,textarea,.p-select,.p-inputtext){max-width:17rem}.is-size-lg :is(input,textarea,.p-select,.p-inputtext){max-width:26rem}.is-span-full{grid-column:1 / -1}@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.is-span-2,.is-span-3,.is-span-4{grid-column:span 2}}@media(min-width:1080px){.grid:not(.is-cap-1):not(.is-cap-2){grid-template-columns:repeat(3,minmax(0,1fr))}.grid:not(.is-cap-1):not(.is-cap-2) .is-span-2{grid-column:span 2}.grid:not(.is-cap-1):not(.is-cap-2) :is(.is-span-3,.is-span-4){grid-column:span 3}}@media(min-width:1500px){.grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3){grid-template-columns:repeat(4,minmax(0,1fr))}.grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3) .is-span-3{grid-column:span 3}.grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3) .is-span-4{grid-column:span 4}}.grid.is-cap-1{grid-template-columns:1fr}.grid.is-cap-1 .field{grid-column:1 / -1}\n"], dependencies: [{ kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1074
1196
|
}
|
|
1075
1197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusForm, decorators: [{
|
|
1076
1198
|
type: Component,
|
|
@@ -1081,8 +1203,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
1081
1203
|
TextareaModule,
|
|
1082
1204
|
ToggleSwitchModule,
|
|
1083
1205
|
FormsModule,
|
|
1084
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid\" [class
|
|
1085
|
-
}], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }],
|
|
1206
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"grid\" [class]=\"gridClass()\">\n @for (field of fields(); track field.key) {\n <div class=\"field\" [class]=\"fieldClass(field)\">\n @if (kindOf(field) !== 'checkbox' && kindOf(field) !== 'switch') {\n <label [attr.for]=\"'nf-' + field.key\">{{ field.label }}</label>\n }\n\n @switch (kindOf(field)) {\n @case ('textarea') {\n <textarea\n pTextarea\n [id]=\"'nf-' + field.key\"\n [rows]=\"field.rows ?? 3\"\n [ngModel]=\"text(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [attr.maxlength]=\"field.maxlength ?? null\"\n [attr.placeholder]=\"field.placeholder ?? null\"\n [ngModelOptions]=\"{ standalone: true }\"\n fluid\n ></textarea>\n }\n @case ('select') {\n <p-select\n [inputId]=\"'nf-' + field.key\"\n [options]=\"optionsOf(field)\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [ngModel]=\"read(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [showClear]=\"field.clearable === true\"\n [ngModelOptions]=\"{ standalone: true }\"\n fluid\n />\n }\n @case ('checkbox') {\n <div class=\"inline\">\n <p-checkbox\n [inputId]=\"'nf-' + field.key\"\n [binary]=\"true\"\n [ngModel]=\"checked(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <label [attr.for]=\"'nf-' + field.key\" class=\"inline-label\">{{ field.label }}</label>\n </div>\n }\n @case ('switch') {\n <div class=\"inline\">\n <p-toggleswitch\n [inputId]=\"'nf-' + field.key\"\n [ngModel]=\"checked(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n <label [attr.for]=\"'nf-' + field.key\" class=\"inline-label\">{{ field.label }}</label>\n </div>\n }\n @default {\n <input\n pInputText\n [id]=\"'nf-' + field.key\"\n [type]=\"kindOf(field) === 'number' ? 'number' : kindOf(field)\"\n [ngModel]=\"text(field)\"\n (ngModelChange)=\"write(field, $event)\"\n [disabled]=\"isDisabled(field)\"\n [attr.maxlength]=\"field.maxlength ?? null\"\n [attr.placeholder]=\"field.placeholder ?? null\"\n [ngModelOptions]=\"{ standalone: true }\"\n autocomplete=\"off\"\n fluid\n />\n }\n }\n\n @if (field.hint) {\n <p class=\"hint\">{{ field.hint }}</p>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.grid{display:grid;grid-template-columns:1fr;gap:18px 20px}.field{display:flex;min-width:0;flex-direction:column;gap:6px}.field label{color:var(--ac-text-muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.field .hint{margin:0;max-width:52ch;color:var(--ac-text-muted);font-size:12px;line-height:1.45}.inline{display:flex;min-height:38px;align-items:center;gap:10px}.inline-label{color:var(--ac-text);font-size:13px;letter-spacing:normal;text-transform:none}.is-size-xs :is(input,textarea,.p-select,.p-inputtext){max-width:6rem}.is-size-sm :is(input,textarea,.p-select,.p-inputtext){max-width:11rem}.is-size-md :is(input,textarea,.p-select,.p-inputtext){max-width:17rem}.is-size-lg :is(input,textarea,.p-select,.p-inputtext){max-width:26rem}.is-span-full{grid-column:1 / -1}@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.is-span-2,.is-span-3,.is-span-4{grid-column:span 2}}@media(min-width:1080px){.grid:not(.is-cap-1):not(.is-cap-2){grid-template-columns:repeat(3,minmax(0,1fr))}.grid:not(.is-cap-1):not(.is-cap-2) .is-span-2{grid-column:span 2}.grid:not(.is-cap-1):not(.is-cap-2) :is(.is-span-3,.is-span-4){grid-column:span 3}}@media(min-width:1500px){.grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3){grid-template-columns:repeat(4,minmax(0,1fr))}.grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3) .is-span-3{grid-column:span 3}.grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3) .is-span-4{grid-column:span 4}}.grid.is-cap-1{grid-template-columns:1fr}.grid.is-cap-1 .field{grid-column:1 / -1}\n"] }]
|
|
1207
|
+
}], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
1086
1208
|
|
|
1087
1209
|
class NucleusCell {
|
|
1088
1210
|
nucleusCell = input.required(...(ngDevMode ? [{ debugName: "nucleusCell" }] : /* istanbul ignore next */ []));
|
|
@@ -1106,6 +1228,7 @@ class NucleusList {
|
|
|
1106
1228
|
minWidth = input('640px', ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
|
|
1107
1229
|
rowClass = input(() => '', ...(ngDevMode ? [{ debugName: "rowClass" }] : /* istanbul ignore next */ []));
|
|
1108
1230
|
action = output();
|
|
1231
|
+
toggle = output();
|
|
1109
1232
|
cells = contentChildren(NucleusCell, ...(ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []));
|
|
1110
1233
|
tableStyle = computed(() => ({ 'min-width': this.minWidth() }), ...(ngDevMode ? [{ debugName: "tableStyle" }] : /* istanbul ignore next */ []));
|
|
1111
1234
|
showEmpty = computed(() => !this.loading() && this.rows().length === 0, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
|
|
@@ -1127,13 +1250,27 @@ class NucleusList {
|
|
|
1127
1250
|
run(entry, row) {
|
|
1128
1251
|
this.action.emit({ id: entry.id, row });
|
|
1129
1252
|
}
|
|
1253
|
+
isChecked(column, row) {
|
|
1254
|
+
return column.checked ? column.checked(row) : false;
|
|
1255
|
+
}
|
|
1256
|
+
isLocked(column, row) {
|
|
1257
|
+
return column.disabled ? column.disabled(row) : false;
|
|
1258
|
+
}
|
|
1259
|
+
hintOf(column, row) {
|
|
1260
|
+
return column.hint ? column.hint(row) : '';
|
|
1261
|
+
}
|
|
1262
|
+
flip(column, row) {
|
|
1263
|
+
if (this.isLocked(column, row))
|
|
1264
|
+
return;
|
|
1265
|
+
this.toggle.emit({ key: column.key, row, value: !this.isChecked(column, row) });
|
|
1266
|
+
}
|
|
1130
1267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusList, isStandalone: true, selector: "nucleus-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, queries: [{ propertyName: "cells", predicate: NucleusCell, isSignal: true }], ngImport: i0, template: "<div class=\"head\">\n <ng-content select=\"[nucleusListTitle]\" />\n <div class=\"head-actions\">\n <ng-content select=\"[nucleusListActions]\" />\n </div>\n</div>\n\n@if (showEmpty()) {\n <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n <p-table [value]=\"rows()\" styleClass=\"ns-table\" [tableStyle]=\"tableStyle()\">\n <ng-template #header>\n <tr>\n @for (column of columns(); track column.key) {\n <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n {{ column.header }}\n </th>\n }\n @if (actions().length) {\n <th class=\"align-right\"></th>\n }\n </tr>\n </ng-template>\n\n <ng-template #body let-row>\n <tr [class]=\"rowClass()(row)\">\n @for (column of columns(); track column.key) {\n <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n @if (cellTemplate(column.key); as custom) {\n <ng-container\n [ngTemplateOutlet]=\"custom\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n />\n } @else {\n {{ text(column, row) }}\n @if (tagOf(column, row); as tag) {\n <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n }\n }\n </td>\n }\n\n @if (actions().length) {\n <td class=\"align-right actions\">\n @for (entry of visibleActions(row); track entry.id) {\n <p-button\n [icon]=\"entry.icon\"\n [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n size=\"small\"\n [text]=\"true\"\n [rounded]=\"true\"\n [pTooltip]=\"entry.label\"\n tooltipPosition=\"left\"\n [ariaLabel]=\"entry.label\"\n (onClick)=\"run(entry, row)\"\n />\n }\n </td>\n }\n </tr>\n </ng-template>\n </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NucleusList, isStandalone: true, selector: "nucleus-list", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action", toggle: "toggle" }, queries: [{ propertyName: "cells", predicate: NucleusCell, isSignal: true }], ngImport: i0, template: "<div class=\"head\">\n <ng-content select=\"[nucleusListTitle]\" />\n <div class=\"head-actions\">\n <ng-content select=\"[nucleusListActions]\" />\n </div>\n</div>\n\n@if (showEmpty()) {\n <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n <p-table [value]=\"rows()\" styleClass=\"ns-table\" [tableStyle]=\"tableStyle()\">\n <ng-template #header>\n <tr>\n @for (column of columns(); track column.key) {\n <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n {{ column.header }}\n </th>\n }\n @if (actions().length) {\n <th class=\"align-right\"></th>\n }\n </tr>\n </ng-template>\n\n <ng-template #body let-row>\n <tr [class]=\"rowClass()(row)\">\n @for (column of columns(); track column.key) {\n <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n @if (cellTemplate(column.key); as custom) {\n <ng-container\n [ngTemplateOutlet]=\"custom\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n />\n } @else if (column.kind === 'switch') {\n <span class=\"switch-cell\">\n <button\n type=\"button\"\n class=\"ns-switch\"\n role=\"switch\"\n [class.is-on]=\"isChecked(column, row)\"\n [attr.aria-checked]=\"isChecked(column, row)\"\n [attr.aria-label]=\"text(column, row)\"\n [disabled]=\"isLocked(column, row)\"\n [pTooltip]=\"hintOf(column, row)\"\n tooltipPosition=\"top\"\n (click)=\"flip(column, row)\"\n >\n <span class=\"knob\"></span>\n </button>\n <span class=\"switch-label\">{{ text(column, row) }}</span>\n </span>\n } @else {\n {{ text(column, row) }}\n @if (tagOf(column, row); as tag) {\n <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n }\n }\n </td>\n }\n\n @if (actions().length) {\n <td class=\"align-right actions\">\n @for (entry of visibleActions(row); track entry.id) {\n <p-button\n [icon]=\"entry.icon\"\n [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n size=\"small\"\n [text]=\"true\"\n [rounded]=\"true\"\n [pTooltip]=\"entry.label\"\n tooltipPosition=\"left\"\n [ariaLabel]=\"entry.label\"\n (onClick)=\"run(entry, row)\"\n />\n }\n </td>\n }\n </tr>\n </ng-template>\n </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i3$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1132
1269
|
}
|
|
1133
1270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NucleusList, decorators: [{
|
|
1134
1271
|
type: Component,
|
|
1135
|
-
args: [{ selector: 'nucleus-list', imports: [NgTemplateOutlet, ButtonModule, TableModule, TagModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"head\">\n <ng-content select=\"[nucleusListTitle]\" />\n <div class=\"head-actions\">\n <ng-content select=\"[nucleusListActions]\" />\n </div>\n</div>\n\n@if (showEmpty()) {\n <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n <p-table [value]=\"rows()\" styleClass=\"ns-table\" [tableStyle]=\"tableStyle()\">\n <ng-template #header>\n <tr>\n @for (column of columns(); track column.key) {\n <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n {{ column.header }}\n </th>\n }\n @if (actions().length) {\n <th class=\"align-right\"></th>\n }\n </tr>\n </ng-template>\n\n <ng-template #body let-row>\n <tr [class]=\"rowClass()(row)\">\n @for (column of columns(); track column.key) {\n <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n @if (cellTemplate(column.key); as custom) {\n <ng-container\n [ngTemplateOutlet]=\"custom\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n />\n } @else {\n {{ text(column, row) }}\n @if (tagOf(column, row); as tag) {\n <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n }\n }\n </td>\n }\n\n @if (actions().length) {\n <td class=\"align-right actions\">\n @for (entry of visibleActions(row); track entry.id) {\n <p-button\n [icon]=\"entry.icon\"\n [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n size=\"small\"\n [text]=\"true\"\n [rounded]=\"true\"\n [pTooltip]=\"entry.label\"\n tooltipPosition=\"left\"\n [ariaLabel]=\"entry.label\"\n (onClick)=\"run(entry, row)\"\n />\n }\n </td>\n }\n </tr>\n </ng-template>\n </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}\n"] }]
|
|
1136
|
-
}], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NucleusCell), { isSignal: true }] }] } });
|
|
1272
|
+
args: [{ selector: 'nucleus-list', imports: [NgTemplateOutlet, ButtonModule, TableModule, TagModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"head\">\n <ng-content select=\"[nucleusListTitle]\" />\n <div class=\"head-actions\">\n <ng-content select=\"[nucleusListActions]\" />\n </div>\n</div>\n\n@if (showEmpty()) {\n <div class=\"placeholder\">{{ empty() }}</div>\n} @else {\n <p-table [value]=\"rows()\" styleClass=\"ns-table\" [tableStyle]=\"tableStyle()\">\n <ng-template #header>\n <tr>\n @for (column of columns(); track column.key) {\n <th [class]=\"'align-' + (column.align ?? 'left')\" [style.width]=\"column.width\">\n {{ column.header }}\n </th>\n }\n @if (actions().length) {\n <th class=\"align-right\"></th>\n }\n </tr>\n </ng-template>\n\n <ng-template #body let-row>\n <tr [class]=\"rowClass()(row)\">\n @for (column of columns(); track column.key) {\n <td [class]=\"'align-' + (column.align ?? 'left')\" [class.strong]=\"column.strong\">\n @if (cellTemplate(column.key); as custom) {\n <ng-container\n [ngTemplateOutlet]=\"custom\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"\n />\n } @else if (column.kind === 'switch') {\n <span class=\"switch-cell\">\n <button\n type=\"button\"\n class=\"ns-switch\"\n role=\"switch\"\n [class.is-on]=\"isChecked(column, row)\"\n [attr.aria-checked]=\"isChecked(column, row)\"\n [attr.aria-label]=\"text(column, row)\"\n [disabled]=\"isLocked(column, row)\"\n [pTooltip]=\"hintOf(column, row)\"\n tooltipPosition=\"top\"\n (click)=\"flip(column, row)\"\n >\n <span class=\"knob\"></span>\n </button>\n <span class=\"switch-label\">{{ text(column, row) }}</span>\n </span>\n } @else {\n {{ text(column, row) }}\n @if (tagOf(column, row); as tag) {\n <p-tag [value]=\"tag.label\" [severity]=\"tag.severity ?? 'secondary'\" />\n }\n }\n </td>\n }\n\n @if (actions().length) {\n <td class=\"align-right actions\">\n @for (entry of visibleActions(row); track entry.id) {\n <p-button\n [icon]=\"entry.icon\"\n [severity]=\"entry.tone === 'danger' ? 'danger' : 'secondary'\"\n size=\"small\"\n [text]=\"true\"\n [rounded]=\"true\"\n [pTooltip]=\"entry.label\"\n tooltipPosition=\"left\"\n [ariaLabel]=\"entry.label\"\n (onClick)=\"run(entry, row)\"\n />\n }\n </td>\n }\n </tr>\n </ng-template>\n </p-table>\n}\n", styles: [":host{display:block}.head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.head-actions{display:flex;gap:8px}.placeholder{padding:26px;border:1px dashed var(--ac-border);border-radius:10px;color:var(--ac-text-muted);font-size:14px}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.strong{font-weight:600}.actions{white-space:nowrap}.switch-cell{display:inline-flex;align-items:center;gap:10px}.switch-label{color:var(--ac-text-muted);font-size:12px}.ns-switch{position:relative;width:38px;height:22px;flex:none;padding:0;border:1px solid var(--ac-border);border-radius:var(--ac-radius-pill);background:color-mix(in srgb,var(--ac-text) 10%,transparent);cursor:pointer;transition:background .14s ease,border-color .14s ease}.ns-switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ac-text);transition:transform .14s ease}.ns-switch.is-on{border-color:var(--ac-accent);background:var(--ac-accent)}.ns-switch.is-on .knob{background:var(--ac-on-accent);transform:translate(16px)}.ns-switch:disabled{cursor:not-allowed;opacity:.45}.ns-switch:focus-visible{outline:2px solid var(--ac-accent);outline-offset:2px}\n"] }]
|
|
1273
|
+
}], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], rowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClass", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], cells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NucleusCell), { isSignal: true }] }] } });
|
|
1137
1274
|
|
|
1138
1275
|
const ORBIT = { rx: 78, ry: 196 };
|
|
1139
1276
|
class NucleusMark {
|
|
@@ -1569,5 +1706,5 @@ function initialsOf(source) {
|
|
|
1569
1706
|
* Generated bundle index. Do not edit.
|
|
1570
1707
|
*/
|
|
1571
1708
|
|
|
1572
|
-
export { DEFAULT_THEME, NO_PERMISSIONS, NUCLEUS_CONFIG, NUCLEUS_DARK_SELECTOR, NUCLEUS_FORCE_BEARER, NUCLEUS_ICONS, NUCLEUS_LANGS, NUCLEUS_LOGOUT_PARAM, NUCLEUS_SKIP_AUTH, NucleusAuth, NucleusCell, NucleusFeedback, NucleusForm, NucleusLanguage, NucleusList, NucleusLordicon, NucleusMark, NucleusPage, NucleusPreset, NucleusSessionAuth, NucleusShell, NucleusStarfield, SHELL_COPY, SessionService, THEMES, THEME_LABELS, ThemeService, UserSyncService, consumeNucleusLogout, findMenuByRoute, isNucleusConfigured, isThemePreference, loadLordicon, loadNucleusConfig, nucleusAuthInterceptor, nucleusLogoutUrl, ownsUrl, permissionsOf, provideNucleus, provideNucleusFeedback, provideNucleusTheme, themeById };
|
|
1709
|
+
export { DEFAULT_THEME, NO_PERMISSIONS, NUCLEUS_CONFIG, NUCLEUS_DARK_SELECTOR, NUCLEUS_FORCE_BEARER, NUCLEUS_ICONS, NUCLEUS_LANGS, NUCLEUS_LOGOUT_PARAM, NUCLEUS_SKIP_AUTH, NucleusAuth, NucleusCard, NucleusCell, NucleusFeedback, NucleusForm, NucleusLanguage, NucleusList, NucleusLordicon, NucleusMark, NucleusPage, NucleusPreset, NucleusSessionAuth, NucleusShell, NucleusStarfield, NucleusTabs, SHELL_COPY, SessionService, THEMES, THEME_LABELS, ThemeService, UserSyncService, consumeNucleusLogout, findMenuByRoute, isNucleusConfigured, isThemePreference, loadLordicon, loadNucleusConfig, nucleusAuthInterceptor, nucleusLogoutUrl, ownsUrl, permissionsOf, provideNucleus, provideNucleusFeedback, provideNucleusTheme, resolveFieldSize, themeById };
|
|
1573
1710
|
//# sourceMappingURL=nucleus-suite-pe-core.mjs.map
|