@haloduck/ui 2.0.31 → 2.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/haloduck-ui.mjs +29 -18
- package/fesm2022/haloduck-ui.mjs.map +1 -1
- package/index.d.ts +8 -5
- package/package.json +1 -1
package/fesm2022/haloduck-ui.mjs
CHANGED
|
@@ -27,7 +27,7 @@ import { filter } from 'rxjs/operators';
|
|
|
27
27
|
class NotificationService {
|
|
28
28
|
listNotification$ = new BehaviorSubject([]);
|
|
29
29
|
listNotification = [];
|
|
30
|
-
showNotification(title, body, payload = null
|
|
30
|
+
showNotification(title, body, timeout, payload = null) {
|
|
31
31
|
if (window.FlutterApp) {
|
|
32
32
|
window.FlutterApp.postMessage(JSON.stringify({
|
|
33
33
|
action: 'showNotification',
|
|
@@ -44,26 +44,30 @@ class NotificationService {
|
|
|
44
44
|
}
|
|
45
45
|
else {
|
|
46
46
|
// 기본 내부 알림 시스템 사용
|
|
47
|
-
this._showNotification('info', body, timeout
|
|
47
|
+
this._showNotification('info', body, timeout);
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
_showNotification(type, message,
|
|
50
|
+
_showNotification(type, message, timeout) {
|
|
51
51
|
const id = ulid();
|
|
52
|
-
const notification = { id, type, message,
|
|
52
|
+
const notification = { id, type, message, timeout };
|
|
53
|
+
if (timeout && timeout > 0) {
|
|
54
|
+
const timeoutRef = window.setTimeout(() => {
|
|
55
|
+
this.removeNotificationById(id);
|
|
56
|
+
}, timeout);
|
|
57
|
+
notification.timeoutRef = timeoutRef;
|
|
58
|
+
}
|
|
53
59
|
this.listNotification.push(notification);
|
|
54
60
|
this.listNotification$.next(this.listNotification);
|
|
55
|
-
if (timeOut) {
|
|
56
|
-
setTimeout(() => {
|
|
57
|
-
this.listNotification = this.listNotification.filter((n) => n.id !== id);
|
|
58
|
-
this.listNotification$.next(this.listNotification);
|
|
59
|
-
}, timeOut);
|
|
60
|
-
}
|
|
61
61
|
return id;
|
|
62
62
|
}
|
|
63
63
|
getListNotification() {
|
|
64
64
|
return this.listNotification$.asObservable();
|
|
65
65
|
}
|
|
66
66
|
removeNotificationById(id) {
|
|
67
|
+
const notification = this.listNotification.find((n) => n.id === id);
|
|
68
|
+
if (notification?.timeoutRef) {
|
|
69
|
+
clearTimeout(notification.timeoutRef);
|
|
70
|
+
}
|
|
67
71
|
this.listNotification = this.listNotification.filter((n) => n.id !== id);
|
|
68
72
|
this.listNotification$.next(this.listNotification);
|
|
69
73
|
}
|
|
@@ -2145,11 +2149,11 @@ class FlipComponent {
|
|
|
2145
2149
|
this._isOpen.set(!this._isOpen());
|
|
2146
2150
|
}
|
|
2147
2151
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FlipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FlipComponent, isStandalone: true, selector: "haloduck-flip", inputs: { title: "title", isOpen: "isOpen" }, ngImport: i0, template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\">\n <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\">{{ title }}</label>\n @if(_isOpen()) {\n <ng-content></ng-content>\n }\n <button variant=\"secondary\"\n class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n (click)=\"toggle()\">\n @if(_isOpen()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-4 w-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M18 15l-6-6-6 6\" />\n </svg>\n }\n @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-4 w-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M6 9l6 6 6-6\" />\n </svg>\n }\n </button>\n</div>\n", styles: [""] });
|
|
2152
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FlipComponent, isStandalone: true, selector: "haloduck-flip", inputs: { title: "title", isOpen: "isOpen" }, ngImport: i0, template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\"\n [class.cursor-pointer]=\"!_isOpen()\"\n (click)=\"!_isOpen() && toggle()\">\n <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\" [class.cursor-pointer]=\"!_isOpen()\">{{ title }}</label>\n @if(_isOpen()) {\n <ng-content></ng-content>\n }\n <button variant=\"secondary\"\n class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n (click)=\"toggle(); $event.stopPropagation()\">\n @if(_isOpen()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-4 w-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M18 15l-6-6-6 6\" />\n </svg>\n }\n @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-4 w-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M6 9l6 6 6-6\" />\n </svg>\n }\n </button>\n</div>\n", styles: [""] });
|
|
2149
2153
|
}
|
|
2150
2154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FlipComponent, decorators: [{
|
|
2151
2155
|
type: Component,
|
|
2152
|
-
args: [{ selector: 'haloduck-flip', imports: [], template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\">\n <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\">{{ title }}</label>\n @if(_isOpen()) {\n <ng-content></ng-content>\n }\n <button variant=\"secondary\"\n class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n (click)=\"toggle()\">\n @if(_isOpen()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-4 w-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M18 15l-6-6-6 6\" />\n </svg>\n }\n @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-4 w-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M6 9l6 6 6-6\" />\n </svg>\n }\n </button>\n</div>\n" }]
|
|
2156
|
+
args: [{ selector: 'haloduck-flip', imports: [], template: "<div class=\"relative w-full shadow ring-1 ring-light-inactive/50 dark:ring-dark-inactive/80 sm:rounded-lg bg-light-alternative dark:bg-dark-alternative p-2 flex flex-col gap-2\"\n [class.cursor-pointer]=\"!_isOpen()\"\n (click)=\"!_isOpen() && toggle()\">\n <label class=\"text-sm text-light-on-alternative dark:text-dark-on-alternative\" [class.cursor-pointer]=\"!_isOpen()\">{{ title }}</label>\n @if(_isOpen()) {\n <ng-content></ng-content>\n }\n <button variant=\"secondary\"\n class=\"absolute rounded-md border border-inactive px-1 py-0.5 top-1 right-1 hover:cursor-pointer bg-light-inactive dark:bg-dark-inactive text-light-on-inactive dark:text-dark-on-inactive\"\n (click)=\"toggle(); $event.stopPropagation()\">\n @if(_isOpen()) {\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-4 w-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M18 15l-6-6-6 6\" />\n </svg>\n }\n @else {\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n class=\"h-4 w-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M6 9l6 6 6-6\" />\n </svg>\n }\n </button>\n</div>\n" }]
|
|
2153
2157
|
}], propDecorators: { title: [{
|
|
2154
2158
|
type: Input
|
|
2155
2159
|
}], isOpen: [{
|
|
@@ -2893,7 +2897,7 @@ class AutoLoadDirective {
|
|
|
2893
2897
|
ngZone = inject(NgZone);
|
|
2894
2898
|
observer;
|
|
2895
2899
|
isLoading = false;
|
|
2896
|
-
hasTriggeredOnce = false;
|
|
2900
|
+
// private hasTriggeredOnce = false;
|
|
2897
2901
|
autoLoadEnabled = true;
|
|
2898
2902
|
autoLoadThreshold = 0.1;
|
|
2899
2903
|
autoLoadRootMargin = '0px';
|
|
@@ -2960,7 +2964,7 @@ class AutoLoadDirective {
|
|
|
2960
2964
|
}
|
|
2961
2965
|
// 자동 로드를 재활성화하는 메서드
|
|
2962
2966
|
resetAutoLoad() {
|
|
2963
|
-
this.hasTriggeredOnce = false;
|
|
2967
|
+
// this.hasTriggeredOnce = false;
|
|
2964
2968
|
this.isLoading = false;
|
|
2965
2969
|
}
|
|
2966
2970
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AutoLoadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
@@ -3097,11 +3101,11 @@ class TableComponent {
|
|
|
3097
3101
|
ngAfterViewInit() { }
|
|
3098
3102
|
constructor() { }
|
|
3099
3103
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3100
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableComponent, isStandalone: true, selector: "haloduck-table", inputs: { tableLayout: "tableLayout", autoLoad: "autoLoad", showHeader: "showHeader", useLoadMore: "useLoadMore", columns: "columns", rows: "rows", isLoading: "isLoading", isPaging: "isPaging", sort: "sort", expandedTemplate: "expandedTemplate", customTemplates: "customTemplates", lastEvaluatedKey: "lastEvaluatedKey" }, outputs: { onSortChange: "onSortChange", onLoadMore: "onLoadMore", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "loadMoreRowRef", first: true, predicate: ["loadMoreRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n <table class=\"w-full h-full\"\n [ngClass]=\"{\n 'table-fixed': tableLayout === 'fixed',\n 'table-auto': tableLayout === 'auto',\n }\">\n <colgroup>\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <col class=\"{{ column.width || '' }}\" />\n }\n }\n </colgroup>\n @if (showHeader) {\n <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n <tr>\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <th scope=\"col\"\n class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n <span class=\"group inline-flex\">\n {{ column.label }}\n @if (column.sortable) {\n @switch (getSortDirection(column.sort?.field || column.key) | async)\n {\n @case('desc') {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n @case('asc') {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n @default {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n }\n }\n </span>\n </th>\n }\n }\n </tr>\n </thead>\n }\n <tbody class=\"overflow-scroll\">\n @for (row of rows | async; track row['id']; let lastRow = $last) {\n <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n (click)=\"onRowClicked(row)\"\n (dblclick)=\"onRowDblClicked(row)\"\n [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n [ngClass]=\"{\n 'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n 'text-wrap': row.isExpanded && column.type !== 'custom',\n 'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n 'py-2': column.type === 'custom',\n 'py-4': column.type !== 'custom'\n }\">\n @if (column.type === 'custom') {\n @if (column.customRenderTemplate) {\n <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n }\n }\n @else {\n {{ getColumnValue(row, column) | async }}\n }\n </td>\n }\n }\n </tr>\n\n @if (row.isExpanded && expandedTemplate) {\n <tr>\n <td [attr.colspan]=\"columns.length\">\n </td>\n </tr>\n <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n <td [attr.colspan]=\"columns.length\"\n class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n </td>\n </tr>\n }\n\n @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n <tr #loadMoreRow
|
|
3104
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TableComponent, isStandalone: true, selector: "haloduck-table", inputs: { tableLayout: "tableLayout", autoLoad: "autoLoad", showHeader: "showHeader", useLoadMore: "useLoadMore", columns: "columns", rows: "rows", isLoading: "isLoading", isPaging: "isPaging", sort: "sort", expandedTemplate: "expandedTemplate", customTemplates: "customTemplates", lastEvaluatedKey: "lastEvaluatedKey" }, outputs: { onSortChange: "onSortChange", onLoadMore: "onLoadMore", onRowClick: "onRowClick", onRowDblClick: "onRowDblClick" }, providers: [provideTranslocoScope('haloduck')], viewQueries: [{ propertyName: "loadMoreRowRef", first: true, predicate: ["loadMoreRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n <table class=\"w-full h-full\"\n [ngClass]=\"{\n 'table-fixed': tableLayout === 'fixed',\n 'table-auto': tableLayout === 'auto',\n }\">\n <colgroup>\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <col class=\"{{ column.width || '' }}\" />\n }\n }\n </colgroup>\n @if (showHeader) {\n <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n <tr>\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <th scope=\"col\"\n class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n <span class=\"group inline-flex\">\n {{ column.label }}\n @if (column.sortable) {\n @switch (getSortDirection(column.sort?.field || column.key) | async)\n {\n @case('desc') {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n @case('asc') {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n @default {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n }\n }\n </span>\n </th>\n }\n }\n </tr>\n </thead>\n }\n <tbody class=\"overflow-scroll\">\n @for (row of rows | async; track row['id']; let lastRow = $last) {\n <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n (click)=\"onRowClicked(row)\"\n (dblclick)=\"onRowDblClicked(row)\"\n [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n [ngClass]=\"{\n 'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n 'text-wrap': row.isExpanded && column.type !== 'custom',\n 'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n 'py-2': column.type === 'custom',\n 'py-4': column.type !== 'custom'\n }\">\n @if (column.type === 'custom') {\n @if (column.customRenderTemplate) {\n <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n }\n }\n @else {\n {{ getColumnValue(row, column) | async }}\n }\n </td>\n }\n }\n </tr>\n\n @if (row.isExpanded && expandedTemplate) {\n <tr>\n <td [attr.colspan]=\"columns.length\">\n </td>\n </tr>\n <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n <td [attr.colspan]=\"columns.length\"\n class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n </td>\n </tr>\n }\n\n @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n <tr #loadMoreRow\n class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n haloduckAutoLoad\n [autoLoadEnabled]=\"autoLoad\"\n [autoLoadThreshold]=\"0.1\"\n (autoLoadTrigger)=\"onAutoLoadTriggered()\">\n <td [attr.colspan]=\"columns.length\"\n class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n <div (click)=\"onLoadMoreClicked()\"\n class=\"cursor-pointer\">\n {{ 'haloduck.ui.table.Load More...' | transloco }}\n </div>\n </td>\n </tr>\n }\n\n } @empty {\n @if(!(isLoading | async)) {\n <tr>\n <td [attr.colspan]=\"columns.length\"\n class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n {{ 'haloduck.ui.table.No data available.' | transloco }}\n </td>\n </tr>\n }\n }\n\n @if(isLoading | async) {\n @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n {\n <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n @for (column of columns; track column.key) {\n <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: AutoLoadDirective, selector: "[haloduckAutoLoad]", inputs: ["autoLoadEnabled", "autoLoadThreshold", "autoLoadRootMargin"], outputs: ["autoLoadTrigger"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3101
3105
|
}
|
|
3102
3106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TableComponent, decorators: [{
|
|
3103
3107
|
type: Component,
|
|
3104
|
-
args: [{ selector: 'haloduck-table', imports: [CommonModule, TranslocoModule, AutoLoadDirective], providers: [provideTranslocoScope('haloduck')], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n <table class=\"w-full h-full\"\n [ngClass]=\"{\n 'table-fixed': tableLayout === 'fixed',\n 'table-auto': tableLayout === 'auto',\n }\">\n <colgroup>\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <col class=\"{{ column.width || '' }}\" />\n }\n }\n </colgroup>\n @if (showHeader) {\n <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n <tr>\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <th scope=\"col\"\n class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n <span class=\"group inline-flex\">\n {{ column.label }}\n @if (column.sortable) {\n @switch (getSortDirection(column.sort?.field || column.key) | async)\n {\n @case('desc') {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n @case('asc') {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n @default {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n }\n }\n </span>\n </th>\n }\n }\n </tr>\n </thead>\n }\n <tbody class=\"overflow-scroll\">\n @for (row of rows | async; track row['id']; let lastRow = $last) {\n <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n (click)=\"onRowClicked(row)\"\n (dblclick)=\"onRowDblClicked(row)\"\n [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n [ngClass]=\"{\n 'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n 'text-wrap': row.isExpanded && column.type !== 'custom',\n 'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n 'py-2': column.type === 'custom',\n 'py-4': column.type !== 'custom'\n }\">\n @if (column.type === 'custom') {\n @if (column.customRenderTemplate) {\n <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n }\n }\n @else {\n {{ getColumnValue(row, column) | async }}\n }\n </td>\n }\n }\n </tr>\n\n @if (row.isExpanded && expandedTemplate) {\n <tr>\n <td [attr.colspan]=\"columns.length\">\n </td>\n </tr>\n <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n <td [attr.colspan]=\"columns.length\"\n class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n </td>\n </tr>\n }\n\n @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n <tr #loadMoreRow
|
|
3108
|
+
args: [{ selector: 'haloduck-table', imports: [CommonModule, TranslocoModule, AutoLoadDirective], providers: [provideTranslocoScope('haloduck')], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full h-full shadow border border-light-inactive dark:border-dark-inactive rounded-lg overflow-auto\">\n <table class=\"w-full h-full\"\n [ngClass]=\"{\n 'table-fixed': tableLayout === 'fixed',\n 'table-auto': tableLayout === 'auto',\n }\">\n <colgroup>\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <col class=\"{{ column.width || '' }}\" />\n }\n }\n </colgroup>\n @if (showHeader) {\n <thead class=\"bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-tl-lg rounded-tr-lg\">\n <tr>\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <th scope=\"col\"\n class=\"{{ column.align || '' }} py-3.5 pl-4 pr-3 text-sm font-semibold text-light-on-background dark:text-dark-on-background whitespace-nowrap\">\n <span class=\"group inline-flex\">\n {{ column.label }}\n @if (column.sortable) {\n @switch (getSortDirection(column.sort?.field || column.key) | async)\n {\n @case('desc') {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n @case('asc') {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'desc')\"\n class=\"ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n @default {\n <span (click)=\"onUpdateSort(column.sort?.field || column.key, 'asc')\"\n class=\"invisible ml-2 flex-none rounded text-light-on-inactive dark:text-dark-on-inactive group-hover:visible group-focus:visible\">\n <svg class=\"size-5\"\n viewBox=\"0 0 20 20\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\">\n <path fill-rule=\"evenodd\"\n d=\"M14.78 11.78a.75.75 0 0 1-1.06 0L10 8.06l-3.72 3.72a.75.75 0 1 1-1.06-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06Z\"\n clip-rule=\"evenodd\" />\n </svg>\n </span>\n }\n }\n }\n </span>\n </th>\n }\n }\n </tr>\n </thead>\n }\n <tbody class=\"overflow-scroll\">\n @for (row of rows | async; track row['id']; let lastRow = $last) {\n <tr class=\"border-t border-light-inactive dark:border-dark-inactive {{ row.bgColor || '' }}\"\n (click)=\"onRowClicked(row)\"\n (dblclick)=\"onRowDblClicked(row)\"\n [ngClass]=\"{'rounded-b-lg': lastRow && (lastEvaluatedKey | async) === null, 'even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background': !row.bgColor }\"\n [ngStyle]=\"{ 'background-color': row.bgColor || '' }\">\n @for (column of columns; track column.key) {\n @if (!column.hidden || !(column.hidden | async)) {\n <td class=\"relative overflow-visible {{ column.align || '' }} whitespace-nowrap px-3 text-sm text-light-on-background dark:text-dark-on-background\"\n [ngClass]=\"{\n 'first:rounded-bl-lg last:rounded-br-lg': lastRow && (lastEvaluatedKey | async) === null,\n 'text-wrap': row.isExpanded && column.type !== 'custom',\n 'overflow-x-hidden text-ellipsis' : !row.isExpanded && column.type !== 'custom',\n 'py-2': column.type === 'custom',\n 'py-4': column.type !== 'custom'\n }\">\n @if (column.type === 'custom') {\n @if (column.customRenderTemplate) {\n <ng-container [ngTemplateOutlet]=\"customTemplates[column.customRenderTemplate]\"\n [ngTemplateOutletContext]=\"{ $implicit: row, column: column }\"></ng-container>\n }\n }\n @else {\n {{ getColumnValue(row, column) | async }}\n }\n </td>\n }\n }\n </tr>\n\n @if (row.isExpanded && expandedTemplate) {\n <tr>\n <td [attr.colspan]=\"columns.length\">\n </td>\n </tr>\n <tr class=\"even:bg-light-alternative dark:even:bg-dark-alternative odd:bg-light-background dark:odd:bg-dark-background\">\n <td [attr.colspan]=\"columns.length\"\n class=\"whitespace-nowrap px-3 pb-4 text-sm text-center\">\n <ng-container [ngTemplateOutlet]=\"expandedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n </td>\n </tr>\n }\n\n @if (lastRow && (lastEvaluatedKey | async) && !(isLoading | async) && useLoadMore) {\n <tr #loadMoreRow\n class=\"border-t border-light-inactive dark:border-dark-inactive bg-light-background dark:bg-dark-background\"\n haloduckAutoLoad\n [autoLoadEnabled]=\"autoLoad\"\n [autoLoadThreshold]=\"0.1\"\n (autoLoadTrigger)=\"onAutoLoadTriggered()\">\n <td [attr.colspan]=\"columns.length\"\n class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n <div (click)=\"onLoadMoreClicked()\"\n class=\"cursor-pointer\">\n {{ 'haloduck.ui.table.Load More...' | transloco }}\n </div>\n </td>\n </tr>\n }\n\n } @empty {\n @if(!(isLoading | async)) {\n <tr>\n <td [attr.colspan]=\"columns.length\"\n class=\"whitespace-nowrap px-3 py-4 text-sm text-light-on-background dark:text-dark-on-background text-center h-16 bg-light-background dark:bg-dark-background rounded-bl-lg rounded-br-lg\">\n {{ 'haloduck.ui.table.No data available.' | transloco }}\n </td>\n </tr>\n }\n }\n\n @if(isLoading | async) {\n @for ( i of [0,1,2,3,4]; track i; let lastRow = $last)\n {\n <tr class=\"bg-light-background dark:bg-dark-background border-t border-light-inactive/50 dark:border-dark-inactive/50\">\n @for (column of columns; track column.key) {\n <td class=\"whitespace-nowrap py-4 pl-4 pr-3 text-sm\"\n [ngClass]=\"{'first:rounded-bl-lg last:rounded-br-lg': lastRow}\">\n <div class=\"h-4 bg-light-inactive/50 dark:bg-dark-inactive/50 rounded-md animate-pulse\"></div>\n </td>\n }\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n" }]
|
|
3105
3109
|
}], ctorParameters: () => [], propDecorators: { loadMoreRowRef: [{
|
|
3106
3110
|
type: ViewChild,
|
|
3107
3111
|
args: ['loadMoreRow', { read: ElementRef }]
|
|
@@ -3214,6 +3218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
3214
3218
|
}] } });
|
|
3215
3219
|
|
|
3216
3220
|
class TabsComponent {
|
|
3221
|
+
translateService = inject(TranslocoService);
|
|
3222
|
+
cdr = inject(ChangeDetectorRef);
|
|
3217
3223
|
tabs = [];
|
|
3218
3224
|
selectedIndex = 0;
|
|
3219
3225
|
layout = 'vertical';
|
|
@@ -3259,12 +3265,17 @@ class TabsComponent {
|
|
|
3259
3265
|
if (this.selectedIndex > this.tabs.length - 1)
|
|
3260
3266
|
this.selectedIndex = this.tabs.length - 1;
|
|
3261
3267
|
}
|
|
3268
|
+
ngOnInit() {
|
|
3269
|
+
this.translateService.langChanges$.subscribe(() => {
|
|
3270
|
+
this.cdr.detectChanges();
|
|
3271
|
+
});
|
|
3272
|
+
}
|
|
3262
3273
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3263
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TabsComponent, isStandalone: true, selector: "haloduck-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", layout: "layout", labelWidth: "labelWidth" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n <ng-content select=\"[slot=label]\"></ng-content>\n </label>\n\n <div class=\"flex-1 w-full\">\n <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n @for (tab of tabs; track tab; let i = $index) {\n <button type=\"button\"\n class=\"px-3 py-2 rounded-t-md\"\n [ngClass]=\"{\n 'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n 'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n }\"\n (click)=\"select(i)\">\n {{ tab.label }}\n </button>\n }\n </div>\n\n <div class=\"mt-3\">\n @if (current) {\n <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n }\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
|
|
3274
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: TabsComponent, isStandalone: true, selector: "haloduck-tabs", inputs: { tabs: "tabs", selectedIndex: "selectedIndex", layout: "layout", labelWidth: "labelWidth" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n <ng-content select=\"[slot=label]\"></ng-content>\n </label>\n\n <div class=\"flex-1 w-full\">\n <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n @for (tab of tabs; track tab.label; let i = $index) {\n <button type=\"button\"\n class=\"px-3 py-2 rounded-t-md\"\n [ngClass]=\"{\n 'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n 'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n }\"\n (click)=\"select(i)\">\n {{ tab.label }}\n </button>\n }\n </div>\n\n <div class=\"mt-3\">\n @if (current) {\n <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n }\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3264
3275
|
}
|
|
3265
3276
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
3266
3277
|
type: Component,
|
|
3267
|
-
args: [{ selector: 'haloduck-tabs', imports: [CommonModule], template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n <ng-content select=\"[slot=label]\"></ng-content>\n </label>\n\n <div class=\"flex-1 w-full\">\n <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n @for (tab of tabs; track tab; let i = $index) {\n <button type=\"button\"\n class=\"px-3 py-2 rounded-t-md\"\n [ngClass]=\"{\n 'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n 'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n }\"\n (click)=\"select(i)\">\n {{ tab.label }}\n </button>\n }\n </div>\n\n <div class=\"mt-3\">\n @if (current) {\n <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n }\n </div>\n </div>\n</div>\n" }]
|
|
3278
|
+
args: [{ selector: 'haloduck-tabs', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex gap-2 items-start w-full\" [ngClass]=\"{'flex-col': layout === 'vertical'}\">\n <label #label class=\"block text-sm/6 font-medium text-light-on-control dark:text-dark-on-control {{ labelWidth }}\" [ngClass]=\"{'w-full': layout === 'vertical'}\">\n <ng-content select=\"[slot=label]\"></ng-content>\n </label>\n\n <div class=\"flex-1 w-full\">\n <div class=\"flex items-center gap-1 border-b border-light-inactive dark:border-dark-inactive text-sm/6\">\n @for (tab of tabs; track tab.label; let i = $index) {\n <button type=\"button\"\n class=\"px-3 py-2 rounded-t-md\"\n [ngClass]=\"{\n 'text-light-on-control dark:text-dark-on-control': i !== selectedIndex,\n 'text-light-primary dark:text-dark-primary border-b-2 border-light-primary dark:border-dark-primary': i === selectedIndex\n }\"\n (click)=\"select(i)\">\n {{ tab.label }}\n </button>\n }\n </div>\n\n <div class=\"mt-3\">\n @if (current) {\n <ng-container *ngComponentOutlet=\"current!.component; inputs: current!.inputs || {}\"></ng-container>\n }\n </div>\n </div>\n</div>\n" }]
|
|
3268
3279
|
}], propDecorators: { tabs: [{
|
|
3269
3280
|
type: Input
|
|
3270
3281
|
}], selectedIndex: [{
|