yukit-web 0.3.0 → 0.3.2
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/.npm/_cacache/content-v2/sha512/{25/dd/271a6e92c57040c2f6f4c65df0904c5e6a9365411b250e2261acdb47c99fe2487ba0deac6657b18071093818c4d06ee48ac8dc49db5ad14f5c95e16d372f → e6/7b/fbf67cf003574fa469d0d1ab395493d1763199b5b18ed126257c18ecd16a1dd721dcf143e827198ed19a588ecdacd4c9f112788e2eabfc87c7aa9832e0e6} +1 -1
- package/.npm/_cacache/index-v5/64/dc/73c7a26f2e6eb0c711133d96c247da5ecf0eba708cd37c450a7b3c7cb488 +1 -1
- package/.npm/_logs/{2026-10-07T10_55_38_800Z-debug-0.log → 2026-10-08T07_44_10_907Z-debug-0.log} +10 -10
- package/.npm/_logs/{2026-10-07T10_55_39_302Z-debug-0.log → 2026-10-08T07_44_11_369Z-debug-0.log} +2 -2
- package/fesm2022/yukit-web.mjs +81 -17
- package/fesm2022/yukit-web.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/theme/spartan-overwrites/sheet.css +4 -0
- package/src/lib/theme/theme.css +1 -0
- package/types/yukit-web.d.ts +62 -9
package/fesm2022/yukit-web.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { input, Directive, forwardRef, inject, ElementRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, Injector, afterNextRender, numberAttribute, DOCUMENT, runInInjectionContext
|
|
4
|
+
import { input, Directive, forwardRef, inject, ElementRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, DestroyRef, Injector, afterNextRender, numberAttribute, DOCUMENT as DOCUMENT$1, runInInjectionContext } from '@angular/core';
|
|
5
5
|
import { classes, hlm } from 'yukit-web/helm/utils';
|
|
6
6
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
7
|
import { toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
|
|
@@ -10,7 +10,7 @@ import { HlmButton, provideBrnButtonConfig } from 'yukit-web/helm/button';
|
|
|
10
10
|
import * as i2 from 'yukit-web/helm/dropdown-menu';
|
|
11
11
|
import { HlmDropdownMenuTrigger, HlmDropdownMenuCheckboxIndicator, HlmDropdownMenuRadioIndicator, HlmDropdownMenuItemSubIndicator, HlmDropdownMenu, HlmDropdownMenuItem, HlmDropdownMenuCheckbox, HlmDropdownMenuRadio, HlmDropdownMenuLabel, HlmDropdownMenuGroup, HlmDropdownMenuSeparator, HlmDropdownMenuShortcut, HlmDropdownMenuSub, HlmDropdownMenuSubTrigger } from 'yukit-web/helm/dropdown-menu';
|
|
12
12
|
import { cva } from 'class-variance-authority';
|
|
13
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
13
|
+
import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
|
|
14
14
|
import * as i1 from '@spartan-ng/brain/tooltip';
|
|
15
15
|
import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
|
|
16
16
|
import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
|
|
@@ -1716,6 +1716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
1716
1716
|
}] });
|
|
1717
1717
|
|
|
1718
1718
|
const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 isolate bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs';
|
|
1719
|
+
const YUW_SHEET_OPEN_CLASS = 'yuw-sheet-open';
|
|
1719
1720
|
/**
|
|
1720
1721
|
* Slide-in sheet overlay panel component for side drawers, dialogs, and detail views.
|
|
1721
1722
|
*
|
|
@@ -1750,6 +1751,9 @@ const YUW_SHEET_OVERLAY_BASE_CLASS = 'data-open:animate-in data-closed:animate-o
|
|
|
1750
1751
|
* - `triggerVariant`: Button style variant for the trigger button.
|
|
1751
1752
|
* - `triggerSize`: Button size for the trigger button.
|
|
1752
1753
|
*
|
|
1754
|
+
* While open, the component adds `yuw-sheet-open` to `<html>`; `theme.css` uses it to hide page
|
|
1755
|
+
* scrollbars. The class is removed on close and on destroy.
|
|
1756
|
+
*
|
|
1753
1757
|
* Usage:
|
|
1754
1758
|
* ```html
|
|
1755
1759
|
* <yuw-sheet [(open)]="isOpen" side="right" title="Edit Profile" description="Update your account details." closeLabel="Close">
|
|
@@ -1782,6 +1786,9 @@ class YuwSheetComponent {
|
|
|
1782
1786
|
this.triggerSize = input('default', ...(ngDevMode ? [{ debugName: "triggerSize" }] : /* istanbul ignore next */ []));
|
|
1783
1787
|
this.triggerVariant = input('outline', ...(ngDevMode ? [{ debugName: "triggerVariant" }] : /* istanbul ignore next */ []));
|
|
1784
1788
|
this._sheetState = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "_sheetState" }] : /* istanbul ignore next */ []));
|
|
1789
|
+
const root = inject(DOCUMENT).documentElement;
|
|
1790
|
+
inject(DestroyRef).onDestroy(() => root.classList.remove(YUW_SHEET_OPEN_CLASS));
|
|
1791
|
+
effect(() => root.classList.toggle(YUW_SHEET_OPEN_CLASS, this.open()));
|
|
1785
1792
|
effect(() => {
|
|
1786
1793
|
const overlayClass = this.overlayClass();
|
|
1787
1794
|
if (overlayClass === undefined)
|
|
@@ -1831,7 +1838,7 @@ let nextYuwInputFileId = 0;
|
|
|
1831
1838
|
* `ngModel`), validation styling and helper/error text.
|
|
1832
1839
|
*
|
|
1833
1840
|
* `avatar` (default) shows a `yuw-avatar` with the chosen image — or `src` while nothing is chosen —
|
|
1834
|
-
* beside an upload button, like a profile-photo field. `inline` is a full-width outline button with
|
|
1841
|
+
* beside an upload button, like a profile-photo field; clicking the avatar opens the picker too. `inline` is a full-width outline button with
|
|
1835
1842
|
* an upload icon; once a file is chosen, the button is replaced by a single line showing its name, size and a remove icon.
|
|
1836
1843
|
* With several files the line reads `countLabel(n)` and opens the list, one removable row each — in
|
|
1837
1844
|
* a popover from `md` up and a bottom sheet below it, like the list-toolbar filters.
|
|
@@ -1945,7 +1952,7 @@ class YuwInputFileComponent extends YuwValueAccessorBase {
|
|
|
1945
1952
|
this._commit(Array.from(event.target.files ?? []));
|
|
1946
1953
|
}
|
|
1947
1954
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1948
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputFileComponent, isStandalone: true, selector: "yuw-input-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", removed: "removed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], viewQueries: [{ propertyName: "_native", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fileRow let-entry>\n <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n <yuw-button\n variant=\"ghost\"\n size=\"icon-xs\"\n [ariaLabel]=\"removeLabel()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"removed.emit(entry.file)\"\n >\n <ng-icon name=\"lucideX\" size=\"14\" />\n </yuw-button>\n</ng-template>\n\n<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <input\n #native\n hlmInput\n hidden\n type=\"file\"\n [id]=\"_inputId()\"\n [attr.accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"_disabled()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n (change)=\"onChange($event)\"\n />\n\n @if (variant() === 'avatar') {\n <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"native.click()\"\n (focusout)=\"_onBlur()\"\n >\n {{ uploadLabel() }}\n </yuw-button>\n </div>\n } @else {\n <div [class]=\"_inlineClasses()\">\n @if (_entries().length === 0) {\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n color=\"secondary\"\n class=\"w-full\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"native.click()\"\n (focusout)=\"_onBlur()\"\n >\n <ng-icon name=\"lucideUpload\" size=\"16\" />\n {{ uploadLabel() }}\n </yuw-button>\n } @else if (_entries().length === 1) {\n <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n </div>\n } @else {\n @if (_isMobile()) {\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n class=\"w-full justify-start font-normal\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"_listOpen.set(true)\"\n >\n {{ _countText() }}\n </yuw-button>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"_countText()\"\n [(open)]=\"_listOpen\"\n >\n <ul class=\"flex flex-col gap-1 pb-3\">\n @for (entry of _entries(); track entry.file) {\n <li class=\"flex items-center gap-2 text-sm\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </li>\n }\n </ul>\n </yuw-sheet>\n } @else {\n <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n <yuw-popover\n align=\"start\"\n panelClass=\"w-80 p-2\"\n triggerVariant=\"outline\"\n triggerClass=\"w-full justify-start font-normal\"\n [triggerSize]=\"size()\"\n [(open)]=\"_listOpen\"\n >\n <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n <ul class=\"flex flex-col gap-1\">\n @for (entry of _entries(); track entry.file) {\n <li class=\"flex items-center gap-2 text-sm\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </li>\n }\n </ul>\n </yuw-popover>\n </div>\n }\n }\n </div>\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1955
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwInputFileComponent, isStandalone: true, selector: "yuw-input-file", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, countLabel: { classPropertyName: "countLabel", publicName: "countLabel", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, fallback: { classPropertyName: "fallback", publicName: "fallback", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, uploadLabel: { classPropertyName: "uploadLabel", publicName: "uploadLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", removed: "removed" }, host: { classAttribute: "contents" }, providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], viewQueries: [{ propertyName: "_native", first: true, predicate: ["native"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fileRow let-entry>\n <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n <yuw-button\n variant=\"ghost\"\n size=\"icon-xs\"\n [ariaLabel]=\"removeLabel()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"removed.emit(entry.file)\"\n >\n <ng-icon name=\"lucideX\" size=\"14\" />\n </yuw-button>\n</ng-template>\n\n<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <input\n #native\n hlmInput\n hidden\n type=\"file\"\n [id]=\"_inputId()\"\n [attr.accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"_disabled()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n (change)=\"onChange($event)\"\n />\n\n @if (variant() === 'avatar') {\n <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n <button\n type=\"button\"\n class=\"cursor-pointer rounded-full disabled:cursor-not-allowed\"\n tabindex=\"-1\"\n [attr.aria-label]=\"uploadLabel()\"\n [disabled]=\"_disabled()\"\n (click)=\"native.click()\"\n >\n <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n </button>\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"native.click()\"\n (focusout)=\"_onBlur()\"\n >\n {{ uploadLabel() }}\n </yuw-button>\n </div>\n } @else {\n <div [class]=\"_inlineClasses()\">\n @if (_entries().length === 0) {\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n color=\"secondary\"\n class=\"w-full\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"native.click()\"\n (focusout)=\"_onBlur()\"\n >\n <ng-icon name=\"lucideUpload\" size=\"16\" />\n {{ uploadLabel() }}\n </yuw-button>\n } @else if (_entries().length === 1) {\n <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n </div>\n } @else {\n @if (_isMobile()) {\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n class=\"w-full justify-start font-normal\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"_listOpen.set(true)\"\n >\n {{ _countText() }}\n </yuw-button>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"_countText()\"\n [(open)]=\"_listOpen\"\n >\n <ul class=\"flex flex-col gap-1 pb-3\">\n @for (entry of _entries(); track entry.file) {\n <li class=\"flex items-center gap-2 text-sm\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </li>\n }\n </ul>\n </yuw-sheet>\n } @else {\n <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n <yuw-popover\n align=\"start\"\n panelClass=\"w-80 p-2\"\n triggerVariant=\"outline\"\n triggerClass=\"w-full justify-start font-normal\"\n [triggerSize]=\"size()\"\n [(open)]=\"_listOpen\"\n >\n <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n <ul class=\"flex flex-col gap-1\">\n @for (entry of _entries(); track entry.file) {\n <li class=\"flex items-center gap-2 text-sm\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </li>\n }\n </ul>\n </yuw-popover>\n </div>\n }\n }\n </div>\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmField, selector: "[hlmField],hlm-field", inputs: ["orientation"] }, { kind: "directive", type: HlmFieldDescription, selector: "[hlmFieldDescription],hlm-field-description", inputs: ["id"] }, { kind: "directive", type: YuwFieldFeedbackDirective, selector: "hlm-field[yuwFieldFeedback]", inputs: ["errorText", "invalid"], exportAs: ["yuwFieldFeedback"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]" }, { kind: "component", type: YuwAvatarComponent, selector: "yuw-avatar", inputs: ["alt", "badge", "fallback", "group", "groupCount", "size", "src", "class"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1949
1956
|
}
|
|
1950
1957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwInputFileComponent, decorators: [{
|
|
1951
1958
|
type: Component,
|
|
@@ -1962,7 +1969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
1962
1969
|
YuwSheetComponent,
|
|
1963
1970
|
], providers: [provideValueAccessor(YuwInputFileComponent), provideIcons({ lucideUpload, lucideX })], host: {
|
|
1964
1971
|
class: 'contents',
|
|
1965
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #fileRow let-entry>\n <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n <yuw-button\n variant=\"ghost\"\n size=\"icon-xs\"\n [ariaLabel]=\"removeLabel()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"removed.emit(entry.file)\"\n >\n <ng-icon name=\"lucideX\" size=\"14\" />\n </yuw-button>\n</ng-template>\n\n<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <input\n #native\n hlmInput\n hidden\n type=\"file\"\n [id]=\"_inputId()\"\n [attr.accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"_disabled()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n (change)=\"onChange($event)\"\n />\n\n @if (variant() === 'avatar') {\n <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"native.click()\"\n (focusout)=\"_onBlur()\"\n >\n {{ uploadLabel() }}\n </yuw-button>\n </div>\n } @else {\n <div [class]=\"_inlineClasses()\">\n @if (_entries().length === 0) {\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n color=\"secondary\"\n class=\"w-full\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"native.click()\"\n (focusout)=\"_onBlur()\"\n >\n <ng-icon name=\"lucideUpload\" size=\"16\" />\n {{ uploadLabel() }}\n </yuw-button>\n } @else if (_entries().length === 1) {\n <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n </div>\n } @else {\n @if (_isMobile()) {\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n class=\"w-full justify-start font-normal\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"_listOpen.set(true)\"\n >\n {{ _countText() }}\n </yuw-button>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"_countText()\"\n [(open)]=\"_listOpen\"\n >\n <ul class=\"flex flex-col gap-1 pb-3\">\n @for (entry of _entries(); track entry.file) {\n <li class=\"flex items-center gap-2 text-sm\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </li>\n }\n </ul>\n </yuw-sheet>\n } @else {\n <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n <yuw-popover\n align=\"start\"\n panelClass=\"w-80 p-2\"\n triggerVariant=\"outline\"\n triggerClass=\"w-full justify-start font-normal\"\n [triggerSize]=\"size()\"\n [(open)]=\"_listOpen\"\n >\n <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n <ul class=\"flex flex-col gap-1\">\n @for (entry of _entries(); track entry.file) {\n <li class=\"flex items-center gap-2 text-sm\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </li>\n }\n </ul>\n </yuw-popover>\n </div>\n }\n }\n </div>\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1972
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #fileRow let-entry>\n <span class=\"min-w-0 flex-1 truncate\">{{ entry.file.name }}</span>\n <span class=\"shrink-0 text-muted-foreground\">{{ entry.size }}</span>\n <yuw-button\n variant=\"ghost\"\n size=\"icon-xs\"\n [ariaLabel]=\"removeLabel()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"removed.emit(entry.file)\"\n >\n <ng-icon name=\"lucideX\" size=\"14\" />\n </yuw-button>\n</ng-template>\n\n<hlm-field\n yuwFieldFeedback\n #feedback=\"yuwFieldFeedback\"\n class=\"min-w-0 data-[matches-spartan-invalid=true]:text-inherit\"\n [invalid]=\"invalid()\"\n [errorText]=\"errorText()\"\n>\n <input\n #native\n hlmInput\n hidden\n type=\"file\"\n [id]=\"_inputId()\"\n [attr.accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [disabled]=\"_disabled()\"\n [required]=\"required()\"\n [forceInvalid]=\"feedback.forcedInvalid()\"\n [attr.name]=\"name()\"\n (change)=\"onChange($event)\"\n />\n\n @if (variant() === 'avatar') {\n <div class=\"flex min-w-0 flex-wrap items-center gap-3\">\n <button\n type=\"button\"\n class=\"cursor-pointer rounded-full disabled:cursor-not-allowed\"\n tabindex=\"-1\"\n [attr.aria-label]=\"uploadLabel()\"\n [disabled]=\"_disabled()\"\n (click)=\"native.click()\"\n >\n <yuw-avatar size=\"lg\" [class]=\"userClass()\" [src]=\"_avatarSrc()\" [alt]=\"alt()\" [fallback]=\"fallback()\" />\n </button>\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"native.click()\"\n (focusout)=\"_onBlur()\"\n >\n {{ uploadLabel() }}\n </yuw-button>\n </div>\n } @else {\n <div [class]=\"_inlineClasses()\">\n @if (_entries().length === 0) {\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n color=\"secondary\"\n class=\"w-full\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"native.click()\"\n (focusout)=\"_onBlur()\"\n >\n <ng-icon name=\"lucideUpload\" size=\"16\" />\n {{ uploadLabel() }}\n </yuw-button>\n } @else if (_entries().length === 1) {\n <div [class]=\"_boxClasses()\" [class.border-destructive]=\"feedback.showError()\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: _entries()[0] }\" />\n </div>\n } @else {\n @if (_isMobile()) {\n <yuw-button\n type=\"button\"\n variant=\"outline\"\n class=\"w-full justify-start font-normal\"\n [size]=\"size()\"\n [disabled]=\"_disabled()\"\n (clicked)=\"_listOpen.set(true)\"\n >\n {{ _countText() }}\n </yuw-button>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"_countText()\"\n [(open)]=\"_listOpen\"\n >\n <ul class=\"flex flex-col gap-1 pb-3\">\n @for (entry of _entries(); track entry.file) {\n <li class=\"flex items-center gap-2 text-sm\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </li>\n }\n </ul>\n </yuw-sheet>\n } @else {\n <div class=\"[&_yuw-button]:flex [&_yuw-button]:w-full\">\n <yuw-popover\n align=\"start\"\n panelClass=\"w-80 p-2\"\n triggerVariant=\"outline\"\n triggerClass=\"w-full justify-start font-normal\"\n [triggerSize]=\"size()\"\n [(open)]=\"_listOpen\"\n >\n <span yuwPopoverTrigger>{{ _countText() }}</span>\n\n <ul class=\"flex flex-col gap-1\">\n @for (entry of _entries(); track entry.file) {\n <li class=\"flex items-center gap-2 text-sm\">\n <ng-container [ngTemplateOutlet]=\"fileRow\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n </li>\n }\n </ul>\n </yuw-popover>\n </div>\n }\n }\n </div>\n }\n\n @if (feedback.showError()) {\n <hlm-field-description role=\"alert\" class=\"text-destructive\">{{ feedback.errorMessage() }}</hlm-field-description>\n } @else if (helperText(); as helper) {\n <hlm-field-description>{{ helper }}</hlm-field-description>\n }\n</hlm-field>\n" }]
|
|
1966
1973
|
}], ctorParameters: () => [], propDecorators: { _native: [{ type: i0.ViewChild, args: ['native', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], countLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countLabel", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], fallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallback", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], uploadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
|
|
1967
1974
|
|
|
1968
1975
|
let nextYuwTextareaId = 0;
|
|
@@ -3767,7 +3774,44 @@ const YuwTableImports = [
|
|
|
3767
3774
|
YuwDatatablePaginationDirective,
|
|
3768
3775
|
];
|
|
3769
3776
|
|
|
3777
|
+
/**
|
|
3778
|
+
* Replaces the checkbox list of one filter group inside `<yuw-list-toolbar>` with projected markup.
|
|
3779
|
+
* Apply it to an `<ng-template>` and pass the id of the group it renders; that group needs no
|
|
3780
|
+
* `options`.
|
|
3781
|
+
*
|
|
3782
|
+
* The template feeds the same staged selection as the checkboxes: calling `change` stages the value
|
|
3783
|
+
* under the group id, so the pending dot, the applied count, Apply, Clear and saved sets all work
|
|
3784
|
+
* without extra wiring.
|
|
3785
|
+
*
|
|
3786
|
+
* Usage:
|
|
3787
|
+
* ```html
|
|
3788
|
+
* <yuw-list-toolbar [filterGroups]="groups" [(selection)]="selection" [labels]="labels">
|
|
3789
|
+
* <ng-template yuwFilterContent="customer" let-value="value" let-change="change">
|
|
3790
|
+
* <yuw-combobox [options]="customers" [value]="value ?? ''" (valueChange)="change($event)" />
|
|
3791
|
+
* </ng-template>
|
|
3792
|
+
* </yuw-list-toolbar>
|
|
3793
|
+
* ```
|
|
3794
|
+
*
|
|
3795
|
+
* Inputs:
|
|
3796
|
+
* - `yuwFilterContent`: Required string; id of the filter group this template renders.
|
|
3797
|
+
*/
|
|
3798
|
+
class YuwFilterContentDirective {
|
|
3799
|
+
constructor() {
|
|
3800
|
+
this.templateRef = inject(TemplateRef);
|
|
3801
|
+
this.groupId = input.required({ ...(ngDevMode ? { debugName: "groupId" } : /* istanbul ignore next */ {}), alias: 'yuwFilterContent' });
|
|
3802
|
+
}
|
|
3803
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFilterContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3804
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwFilterContentDirective, isStandalone: true, selector: "ng-template[yuwFilterContent]", inputs: { groupId: { classPropertyName: "groupId", publicName: "yuwFilterContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
3805
|
+
}
|
|
3806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwFilterContentDirective, decorators: [{
|
|
3807
|
+
type: Directive,
|
|
3808
|
+
args: [{
|
|
3809
|
+
selector: 'ng-template[yuwFilterContent]',
|
|
3810
|
+
}]
|
|
3811
|
+
}], propDecorators: { groupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwFilterContent", required: true }] }] } });
|
|
3812
|
+
|
|
3770
3813
|
const VIEW_MODES = ['list', 'block'];
|
|
3814
|
+
const DEFAULT_VIEW_MODE_ICONS = { list: 'lucideList', block: 'lucideLayoutGrid' };
|
|
3771
3815
|
/**
|
|
3772
3816
|
* What counts as inside the columns popover: its trigger, its panel and the combobox list, which
|
|
3773
3817
|
* renders in its own overlay outside the panel.
|
|
@@ -3798,6 +3842,7 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
|
|
|
3798
3842
|
* - `searchPlaceholder`: Placeholder of the search field; the search renders only when set.
|
|
3799
3843
|
* - `showExport`: Renders the export button. Default is `false`.
|
|
3800
3844
|
* - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
|
|
3845
|
+
* - `viewModeIcons`: Partial override of the switch icons by mode (ng-icon names, registered by the consumer with `provideIcons`). Defaults are `lucideList` and `lucideLayoutGrid`.
|
|
3801
3846
|
*
|
|
3802
3847
|
* Outputs:
|
|
3803
3848
|
* - `exported`: Emits the `MouseEvent` of the export button click.
|
|
@@ -3805,7 +3850,7 @@ const INSIDE_COLUMNS_SELECTOR = '.yuw-columns-trigger, hlm-popover-content, hlm-
|
|
|
3805
3850
|
*/
|
|
3806
3851
|
class YuwListToolbarActionsComponent {
|
|
3807
3852
|
constructor() {
|
|
3808
|
-
this._document = inject(DOCUMENT);
|
|
3853
|
+
this._document = inject(DOCUMENT$1);
|
|
3809
3854
|
this._injector = inject(Injector);
|
|
3810
3855
|
this._columnsCombobox = viewChild(YuwComboboxComponent, ...(ngDevMode ? [{ debugName: "_columnsCombobox" }] : /* istanbul ignore next */ []));
|
|
3811
3856
|
this.hiddenColumns = model([], ...(ngDevMode ? [{ debugName: "hiddenColumns" }] : /* istanbul ignore next */ []));
|
|
@@ -3816,6 +3861,7 @@ class YuwListToolbarActionsComponent {
|
|
|
3816
3861
|
this.searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
3817
3862
|
this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3818
3863
|
this.viewMode = model(...(ngDevMode ? [undefined, { debugName: "viewMode" }] : /* istanbul ignore next */ []));
|
|
3864
|
+
this.viewModeIcons = input(...(ngDevMode ? [undefined, { debugName: "viewModeIcons" }] : /* istanbul ignore next */ []));
|
|
3819
3865
|
this.exported = output();
|
|
3820
3866
|
this.searched = output();
|
|
3821
3867
|
this.searchOpen = signal(false, ...(ngDevMode ? [{ debugName: "searchOpen" }] : /* istanbul ignore next */ []));
|
|
@@ -3836,6 +3882,10 @@ class YuwListToolbarActionsComponent {
|
|
|
3836
3882
|
class: cn(selected && 'border-0', followsSelected && 'border-s!'),
|
|
3837
3883
|
};
|
|
3838
3884
|
}), ...(ngDevMode ? [{ debugName: "viewModeButtons" }] : /* istanbul ignore next */ []));
|
|
3885
|
+
this.viewModeIconNames = computed(() => ({
|
|
3886
|
+
...DEFAULT_VIEW_MODE_ICONS,
|
|
3887
|
+
...this.viewModeIcons(),
|
|
3888
|
+
}), ...(ngDevMode ? [{ debugName: "viewModeIconNames" }] : /* istanbul ignore next */ []));
|
|
3839
3889
|
effect(() => {
|
|
3840
3890
|
if (this.settingsOpen()) {
|
|
3841
3891
|
afterNextRender(() => this._columnsCombobox()?.open(), { injector: this._injector });
|
|
@@ -3865,7 +3915,7 @@ class YuwListToolbarActionsComponent {
|
|
|
3865
3915
|
this.viewMode.set(id);
|
|
3866
3916
|
}
|
|
3867
3917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3868
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", viewMode: "viewModeChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], viewQueries: [{ propertyName: "_columnsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n @if (isMobile()) {\n <yuw-popover\n [align]=\"searchPopoverAlign()\"\n class=\"mr-5\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n [offsetX]=\"searchPopoverOffsetX()\"\n [(open)]=\"searchOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n <ng-icon name=\"lucideSearch\" size=\"16\" />\n </span>\n\n <yuw-search-input\n expandedWidth=\"100%\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n (searched)=\"searched.emit($event)\"\n />\n </yuw-popover>\n } @else {\n <yuw-search-input\n collapseFrom=\"right\"\n expandedWidth=\"18rem\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n [expandAriaLabel]=\"labels().search.expand\"\n (searched)=\"searched.emit($event)\"\n />\n }\n}\n\n@if (showExport()) {\n <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n <ng-icon name=\"lucideDownload\" size=\"16\" />\n <span class=\"max-md:hidden\">\n {{ labels().export }}\n </span>\n </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n <yuw-popover\n align=\"end\"\n panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n triggerClass=\"yuw-columns-trigger relative\"\n [(open)]=\"settingsOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n @if (hasHiddenColumns()) {\n <yuw-badge\n dot\n color=\"destructive\"\n class=\"absolute -top-1 -right-1\"\n style=\"width: 0.5rem; height: 0.5rem\"\n data-testid=\"hidden-columns-dot\"\n />\n }\n </span>\n\n <div>\n <yuw-combobox\n multiple\n keepValueOnEscape\n [options]=\"columns\"\n [value]=\"hiddenColumns()\"\n [placeholder]=\"labels().columns.placeholder\"\n [emptyText]=\"labels().columns.empty\"\n [triggerAriaLabel]=\"labels().columns.toggle\"\n (valueChange)=\"onHiddenColumnsChange($event)\"\n />\n </div>\n </yuw-popover>\n}\n\n@if (viewMode()) {\n <yuw-button-group\n variant=\"outline\"\n selectedVariant=\"secondary\"\n [buttons]=\"viewModeButtons()\"\n (buttonClicked)=\"onViewModeClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"list\">\n <ng-icon name=\"
|
|
3918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarActionsComponent, isStandalone: true, selector: "yuw-list-toolbar-actions", inputs: { hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", viewMode: "viewModeChange", exported: "exported", searched: "searched" }, host: { classAttribute: "flex items-center gap-2" }, providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], viewQueries: [{ propertyName: "_columnsCombobox", first: true, predicate: YuwComboboxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (searchPlaceholder(); as placeholder) {\n @if (isMobile()) {\n <yuw-popover\n [align]=\"searchPopoverAlign()\"\n class=\"mr-5\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n [offsetX]=\"searchPopoverOffsetX()\"\n [(open)]=\"searchOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n <ng-icon name=\"lucideSearch\" size=\"16\" />\n </span>\n\n <yuw-search-input\n expandedWidth=\"100%\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n (searched)=\"searched.emit($event)\"\n />\n </yuw-popover>\n } @else {\n <yuw-search-input\n collapseFrom=\"right\"\n expandedWidth=\"18rem\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n [expandAriaLabel]=\"labels().search.expand\"\n (searched)=\"searched.emit($event)\"\n />\n }\n}\n\n@if (showExport()) {\n <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n <ng-icon name=\"lucideDownload\" size=\"16\" />\n <span class=\"max-md:hidden\">\n {{ labels().export }}\n </span>\n </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n <yuw-popover\n align=\"end\"\n panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n triggerClass=\"yuw-columns-trigger relative\"\n [(open)]=\"settingsOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n @if (hasHiddenColumns()) {\n <yuw-badge\n dot\n color=\"destructive\"\n class=\"absolute -top-1 -right-1\"\n style=\"width: 0.5rem; height: 0.5rem\"\n data-testid=\"hidden-columns-dot\"\n />\n }\n </span>\n\n <div>\n <yuw-combobox\n multiple\n keepValueOnEscape\n [options]=\"columns\"\n [value]=\"hiddenColumns()\"\n [placeholder]=\"labels().columns.placeholder\"\n [emptyText]=\"labels().columns.empty\"\n [triggerAriaLabel]=\"labels().columns.toggle\"\n (valueChange)=\"onHiddenColumnsChange($event)\"\n />\n </div>\n </yuw-popover>\n}\n\n@if (viewMode()) {\n <yuw-button-group\n variant=\"outline\"\n selectedVariant=\"secondary\"\n selectedColor=\"secondary\"\n [buttons]=\"viewModeButtons()\"\n (buttonClicked)=\"onViewModeClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"list\">\n <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"block\">\n <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwComboboxComponent, selector: "yuw-combobox", inputs: ["clearAriaLabel", "emptyText", "inputId", "invalid", "keepValueOnEscape", "multiple", "options", "placeholder", "readonlyTrigger", "search", "searchPlaceholder", "size", "triggerAriaLabel", "value"], outputs: ["searchChange", "valueChange"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSearchInputComponent, selector: "yuw-search-input", inputs: ["clearAriaLabel", "collapseFrom", "expandAriaLabel", "expandedWidth", "size", "transparent"], outputs: ["searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3869
3919
|
}
|
|
3870
3920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarActionsComponent, decorators: [{
|
|
3871
3921
|
type: Component,
|
|
@@ -3878,8 +3928,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
3878
3928
|
YuwComboboxComponent,
|
|
3879
3929
|
YuwPopoverComponent,
|
|
3880
3930
|
YuwSearchInputComponent,
|
|
3881
|
-
], providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n @if (isMobile()) {\n <yuw-popover\n [align]=\"searchPopoverAlign()\"\n class=\"mr-5\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n [offsetX]=\"searchPopoverOffsetX()\"\n [(open)]=\"searchOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n <ng-icon name=\"lucideSearch\" size=\"16\" />\n </span>\n\n <yuw-search-input\n expandedWidth=\"100%\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n (searched)=\"searched.emit($event)\"\n />\n </yuw-popover>\n } @else {\n <yuw-search-input\n collapseFrom=\"right\"\n expandedWidth=\"18rem\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n [expandAriaLabel]=\"labels().search.expand\"\n (searched)=\"searched.emit($event)\"\n />\n }\n}\n\n@if (showExport()) {\n <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n <ng-icon name=\"lucideDownload\" size=\"16\" />\n <span class=\"max-md:hidden\">\n {{ labels().export }}\n </span>\n </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n <yuw-popover\n align=\"end\"\n panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n triggerClass=\"yuw-columns-trigger relative\"\n [(open)]=\"settingsOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n @if (hasHiddenColumns()) {\n <yuw-badge\n dot\n color=\"destructive\"\n class=\"absolute -top-1 -right-1\"\n style=\"width: 0.5rem; height: 0.5rem\"\n data-testid=\"hidden-columns-dot\"\n />\n }\n </span>\n\n <div>\n <yuw-combobox\n multiple\n keepValueOnEscape\n [options]=\"columns\"\n [value]=\"hiddenColumns()\"\n [placeholder]=\"labels().columns.placeholder\"\n [emptyText]=\"labels().columns.empty\"\n [triggerAriaLabel]=\"labels().columns.toggle\"\n (valueChange)=\"onHiddenColumnsChange($event)\"\n />\n </div>\n </yuw-popover>\n}\n\n@if (viewMode()) {\n <yuw-button-group\n variant=\"outline\"\n selectedVariant=\"secondary\"\n [buttons]=\"viewModeButtons()\"\n (buttonClicked)=\"onViewModeClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"list\">\n <ng-icon name=\"
|
|
3882
|
-
}], ctorParameters: () => [], propDecorators: { _columnsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
|
|
3931
|
+
], providers: [provideIcons({ lucideDownload, lucideLayoutGrid, lucideList, lucideSearch, lucideSettings2 })], host: { class: 'flex items-center gap-2' }, template: "@if (searchPlaceholder(); as placeholder) {\n @if (isMobile()) {\n <yuw-popover\n [align]=\"searchPopoverAlign()\"\n class=\"mr-5\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n panelClass=\"w-[min(20rem,calc(100vw-2rem))] p-2\"\n [offsetX]=\"searchPopoverOffsetX()\"\n [(open)]=\"searchOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().search.expand\">\n <ng-icon name=\"lucideSearch\" size=\"16\" />\n </span>\n\n <yuw-search-input\n expandedWidth=\"100%\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n (searched)=\"searched.emit($event)\"\n />\n </yuw-popover>\n } @else {\n <yuw-search-input\n collapseFrom=\"right\"\n expandedWidth=\"18rem\"\n [(value)]=\"search\"\n [placeholder]=\"placeholder\"\n [clearAriaLabel]=\"labels().search.clear\"\n [expandAriaLabel]=\"labels().search.expand\"\n (searched)=\"searched.emit($event)\"\n />\n }\n}\n\n@if (showExport()) {\n <yuw-button variant=\"outline\" class=\"gap-2\" (clicked)=\"exported.emit($event)\">\n <ng-icon name=\"lucideDownload\" size=\"16\" />\n <span class=\"max-md:hidden\">\n {{ labels().export }}\n </span>\n </yuw-button>\n}\n\n@if (hideableColumns(); as columns) {\n <yuw-popover\n align=\"end\"\n panelClass=\"w-auto p-2 dark:border max-w-3xs\"\n triggerVariant=\"outline\"\n triggerSize=\"icon\"\n triggerClass=\"yuw-columns-trigger relative\"\n [(open)]=\"settingsOpen\"\n >\n <span yuwPopoverTrigger class=\"flex items-center\" [attr.aria-label]=\"labels().columns.trigger\">\n <ng-icon name=\"lucideSettings2\" size=\"16\" />\n\n @if (hasHiddenColumns()) {\n <yuw-badge\n dot\n color=\"destructive\"\n class=\"absolute -top-1 -right-1\"\n style=\"width: 0.5rem; height: 0.5rem\"\n data-testid=\"hidden-columns-dot\"\n />\n }\n </span>\n\n <div>\n <yuw-combobox\n multiple\n keepValueOnEscape\n [options]=\"columns\"\n [value]=\"hiddenColumns()\"\n [placeholder]=\"labels().columns.placeholder\"\n [emptyText]=\"labels().columns.empty\"\n [triggerAriaLabel]=\"labels().columns.toggle\"\n (valueChange)=\"onHiddenColumnsChange($event)\"\n />\n </div>\n </yuw-popover>\n}\n\n@if (viewMode()) {\n <yuw-button-group\n variant=\"outline\"\n selectedVariant=\"secondary\"\n selectedColor=\"secondary\"\n [buttons]=\"viewModeButtons()\"\n (buttonClicked)=\"onViewModeClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"list\">\n <ng-icon [name]=\"viewModeIconNames().list\" size=\"16\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"block\">\n <ng-icon [name]=\"viewModeIconNames().block\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n}\n" }]
|
|
3932
|
+
}], ctorParameters: () => [], propDecorators: { _columnsCombobox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => YuwComboboxComponent), { isSignal: true }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], viewModeIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeIcons", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
|
|
3883
3933
|
|
|
3884
3934
|
/**
|
|
3885
3935
|
* Declares the content of a single tab entry. Apply it to an `<ng-template>` and pass the id of the
|
|
@@ -4045,6 +4095,7 @@ class YuwFilterDraft {
|
|
|
4045
4095
|
constructor(applied) {
|
|
4046
4096
|
this.applied = applied;
|
|
4047
4097
|
this._entries = linkedSignal(() => ({ ...this.applied() }), ...(ngDevMode ? [{ debugName: "_entries" }] : /* istanbul ignore next */ []));
|
|
4098
|
+
this.values = this._entries.asReadonly();
|
|
4048
4099
|
this.pendingGroupIds = computed(() => {
|
|
4049
4100
|
const committed = this.applied();
|
|
4050
4101
|
const staged = this._entries();
|
|
@@ -4059,6 +4110,10 @@ class YuwFilterDraft {
|
|
|
4059
4110
|
reset() {
|
|
4060
4111
|
this._entries.set({ ...this.applied() });
|
|
4061
4112
|
}
|
|
4113
|
+
/** Stages a whole value for a group; `undefined` or an empty array clears it. */
|
|
4114
|
+
set(groupId, value) {
|
|
4115
|
+
this._setSingle(groupId, Array.isArray(value) && value.length === 0 ? undefined : value);
|
|
4116
|
+
}
|
|
4062
4117
|
snapshot() {
|
|
4063
4118
|
return this._entries();
|
|
4064
4119
|
}
|
|
@@ -4253,6 +4308,7 @@ const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
|
|
|
4253
4308
|
* Persisting is the consumer's job: this component only emits `setSaved`, `setRenamed`, `setDeleted`.
|
|
4254
4309
|
*
|
|
4255
4310
|
* Inputs:
|
|
4311
|
+
* - `contents`: `yuwFilterContent` templates; a group whose id has one renders it instead of the checkbox list. Default is `[]`.
|
|
4256
4312
|
* - `disabled`: Disables every button of the group. Default is `false`.
|
|
4257
4313
|
* - `groups`: Required filter groups the editor offers, one pane or tab each.
|
|
4258
4314
|
* - `idleColor`: Required tone of the buttons while no filter is applied.
|
|
@@ -4263,6 +4319,7 @@ const FORM_VIEWS = new Set(['save', 'rename', 'delete']);
|
|
|
4263
4319
|
*/
|
|
4264
4320
|
class YuwListToolbarFiltersComponent {
|
|
4265
4321
|
constructor() {
|
|
4322
|
+
this.contents = input([], ...(ngDevMode ? [{ debugName: "contents" }] : /* istanbul ignore next */ []));
|
|
4266
4323
|
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4267
4324
|
this.groups = input.required(...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
|
|
4268
4325
|
this.idleColor = input.required(...(ngDevMode ? [{ debugName: "idleColor" }] : /* istanbul ignore next */ []));
|
|
@@ -4318,6 +4375,8 @@ class YuwListToolbarFiltersComponent {
|
|
|
4318
4375
|
}, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
|
|
4319
4376
|
this.buttonsColor = computed(() => (this.hasActive() ? 'secondary' : this.idleColor()), ...(ngDevMode ? [{ debugName: "buttonsColor" }] : /* istanbul ignore next */ []));
|
|
4320
4377
|
this.canSaveSet = computed(() => this.hasActive() && !this.matchingSet(), ...(ngDevMode ? [{ debugName: "canSaveSet" }] : /* istanbul ignore next */ []));
|
|
4378
|
+
this.changers = computed(() => Object.fromEntries(this.groups().map((group) => [group.id, (value) => this.draft.set(group.id, value)])), ...(ngDevMode ? [{ debugName: "changers" }] : /* istanbul ignore next */ []));
|
|
4379
|
+
this.contentTemplates = computed(() => Object.fromEntries(this.contents().map((content) => [content.groupId(), content.templateRef])), ...(ngDevMode ? [{ debugName: "contentTemplates" }] : /* istanbul ignore next */ []));
|
|
4321
4380
|
this.selectedSetId = computed(() => this.matchingSet()?.id ?? NO_FILTER_SET, ...(ngDevMode ? [{ debugName: "selectedSetId" }] : /* istanbul ignore next */ []));
|
|
4322
4381
|
this.selectedText = computed(() => this.labels().selected(this.draft.selectedCount()), ...(ngDevMode ? [{ debugName: "selectedText" }] : /* istanbul ignore next */ []));
|
|
4323
4382
|
this.setPanelMode = computed(() => {
|
|
@@ -4414,7 +4473,7 @@ class YuwListToolbarFiltersComponent {
|
|
|
4414
4473
|
this.open.set(true);
|
|
4415
4474
|
}
|
|
4416
4475
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full items-center gap-1" }, providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <li>\n <label\n class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n [for]=\"`${group.id}-option-${option.value}`\"\n >\n <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n <yuw-checkbox\n [inputId]=\"`${group.id}-option-${option.value}`\"\n [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n [disabled]=\"option.disabled ?? false\"\n [ariaLabel]=\"option.label\"\n (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n />\n </label>\n </li>\n }\n </ul>\n</ng-template>\n\n<ng-template #starIcon>\n <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n @if (matchingSet(); as set) {\n <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n }\n</ng-template>\n\n<ng-template #filterIcon>\n <span class=\"relative inline-flex\">\n <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n @if (hasActive()) {\n <yuw-badge\n color=\"destructive\"\n class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n data-testid=\"active-filters-count\"\n >\n {{ activeCount() }}\n </yuw-badge>\n }\n </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n @if (setPanelMode(); as mode) {\n <yuw-list-toolbar-filter-set-form\n [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n [titleHidden]=\"sheet\"\n [labels]=\"setLabels()!\"\n [mode]=\"mode\"\n [name]=\"setPanelName()\"\n (cancelled)=\"open.set(false)\"\n (confirmed)=\"onSetFormConfirmed($event)\"\n (deleteRequested)=\"onSetDeleteRequested()\"\n />\n }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n <yuw-list-toolbar-filter-sets\n [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n [titleHidden]=\"sheet\"\n [stretchActions]=\"!sheet\"\n [labels]=\"setLabels()!\"\n [sets]=\"sets() ?? []\"\n [selectedId]=\"selectedSetId()\"\n [canSave]=\"canSaveSet()\"\n [canEdit]=\"!!matchingSet()\"\n (picked)=\"onSetPicked($event)\"\n (itemEditRequested)=\"openSetPanel('rename', $event)\"\n (saveRequested)=\"openSetPanel('save')\"\n (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n />\n</ng-template>\n\n<ng-template #commitRow>\n @if (selectedText(); as text) {\n <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n }\n\n <div class=\"flex justify-end gap-2 pt-3\">\n <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n {{ labels().clear }}\n </yuw-button>\n\n <yuw-button (clicked)=\"onApply()\">\n {{ labels().apply }}\n </yuw-button>\n </div>\n</ng-template>\n\n@if (isMobile()) {\n <yuw-button-group\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"sets\">\n <ng-container [ngTemplateOutlet]=\"starIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"filters\">\n <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"sheetTitle()\"\n [closeLabel]=\"labels().close\"\n [(open)]=\"open\"\n >\n @switch (panelView()) {\n @case ('filters') {\n <div class=\"flex min-h-0 flex-col gap-3\">\n <yuw-tabs\n class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n [tabs]=\"tabs()\"\n [activeTab]=\"activeGroup()?.id ?? ''\"\n (activeTabChange)=\"selectGroup($event)\"\n >\n @for (group of groups(); track group.id) {\n <ng-template [yuwTabContent]=\"group.id\">\n <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n {{ group.label }}\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"secondary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </span>\n </ng-template>\n\n <ng-template [yuwTabPanel]=\"group.id\">\n <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n </div>\n </ng-template>\n }\n </yuw-tabs>\n\n <div class=\"pb-3\">\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n </div>\n }\n @case ('sets') {\n <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n }\n @default {\n <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n }\n }\n </yuw-sheet>\n} @else {\n <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n <yuw-button-group\n yuwPopoverTrigger\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"sets\">\n <ng-container [ngTemplateOutlet]=\"starIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"filters\">\n <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n @switch (panelView()) {\n @case ('filters') {\n <div class=\"flex min-w-0\">\n <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n @for (group of groups(); track group.id) {\n <li>\n <button\n type=\"button\"\n class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n (click)=\"selectGroup(group.id)\"\n >\n <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"secondary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </button>\n </li>\n }\n </ul>\n\n @if (activeGroup(); as group) {\n <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n }\n </div>\n }\n @case ('sets') {\n <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n }\n @default {\n <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n }\n }\n </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { kind: "component", type: YuwListToolbarFilterSetsComponent, selector: "yuw-list-toolbar-filter-sets", inputs: ["canEdit", "canSave", "labels", "selectedId", "sets", "stretchActions", "titleHidden"], outputs: ["deleteRequested", "editRequested", "itemEditRequested", "picked", "saveRequested"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4476
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarFiltersComponent, isStandalone: true, selector: "yuw-list-toolbar-filters", inputs: { contents: { classPropertyName: "contents", publicName: "contents", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sets: { classPropertyName: "sets", publicName: "sets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex min-w-0 max-w-full items-center gap-1" }, providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], ngImport: i0, template: "<ng-template #options let-group>\n @if (contentTemplates()[group.id]; as content) {\n <ng-container\n [ngTemplateOutlet]=\"content\"\n [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n />\n } @else {\n <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <li>\n <label\n class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n [for]=\"`${group.id}-option-${option.value}`\"\n >\n <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n <yuw-checkbox\n [inputId]=\"`${group.id}-option-${option.value}`\"\n [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n [disabled]=\"option.disabled ?? false\"\n [ariaLabel]=\"option.label\"\n (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n />\n </label>\n </li>\n }\n </ul>\n }\n</ng-template>\n\n<ng-template #starIcon>\n <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n @if (matchingSet(); as set) {\n <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n }\n</ng-template>\n\n<ng-template #filterIcon>\n <span class=\"relative inline-flex\">\n <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n @if (hasActive()) {\n <yuw-badge\n color=\"destructive\"\n class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n data-testid=\"active-filters-count\"\n >\n {{ activeCount() }}\n </yuw-badge>\n }\n </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n @if (setPanelMode(); as mode) {\n <yuw-list-toolbar-filter-set-form\n [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n [titleHidden]=\"sheet\"\n [labels]=\"setLabels()!\"\n [mode]=\"mode\"\n [name]=\"setPanelName()\"\n (cancelled)=\"open.set(false)\"\n (confirmed)=\"onSetFormConfirmed($event)\"\n (deleteRequested)=\"onSetDeleteRequested()\"\n />\n }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n <yuw-list-toolbar-filter-sets\n [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n [titleHidden]=\"sheet\"\n [stretchActions]=\"!sheet\"\n [labels]=\"setLabels()!\"\n [sets]=\"sets() ?? []\"\n [selectedId]=\"selectedSetId()\"\n [canSave]=\"canSaveSet()\"\n [canEdit]=\"!!matchingSet()\"\n (picked)=\"onSetPicked($event)\"\n (itemEditRequested)=\"openSetPanel('rename', $event)\"\n (saveRequested)=\"openSetPanel('save')\"\n (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n />\n</ng-template>\n\n<ng-template #commitRow>\n @if (selectedText(); as text) {\n <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n }\n\n <div class=\"flex justify-end gap-2 pt-3\">\n <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n {{ labels().clear }}\n </yuw-button>\n\n <yuw-button (clicked)=\"onApply()\">\n {{ labels().apply }}\n </yuw-button>\n </div>\n</ng-template>\n\n@if (isMobile()) {\n <yuw-button-group\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"sets\">\n <ng-container [ngTemplateOutlet]=\"starIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"filters\">\n <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"sheetTitle()\"\n [closeLabel]=\"labels().close\"\n [(open)]=\"open\"\n >\n @switch (panelView()) {\n @case ('filters') {\n <div class=\"flex min-h-0 flex-col gap-3\">\n <yuw-tabs\n class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n [tabs]=\"tabs()\"\n [activeTab]=\"activeGroup()?.id ?? ''\"\n (activeTabChange)=\"selectGroup($event)\"\n >\n @for (group of groups(); track group.id) {\n <ng-template [yuwTabContent]=\"group.id\">\n <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n {{ group.label }}\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"secondary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </span>\n </ng-template>\n\n <ng-template [yuwTabPanel]=\"group.id\">\n <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n </div>\n </ng-template>\n }\n </yuw-tabs>\n\n <div class=\"pb-3\">\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n </div>\n }\n @case ('sets') {\n <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n }\n @default {\n <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n }\n }\n </yuw-sheet>\n} @else {\n <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n <yuw-button-group\n yuwPopoverTrigger\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"sets\">\n <ng-container [ngTemplateOutlet]=\"starIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"filters\">\n <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n @switch (panelView()) {\n @case ('filters') {\n <div class=\"flex min-w-0\">\n <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n @for (group of groups(); track group.id) {\n <li>\n <button\n type=\"button\"\n class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n (click)=\"selectGroup(group.id)\"\n >\n <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"secondary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </button>\n </li>\n }\n </ul>\n\n @if (activeGroup(); as group) {\n <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n }\n </div>\n }\n @case ('sets') {\n <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n }\n @default {\n <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n }\n }\n </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: YuwBadgeComponent, selector: "yuw-badge", inputs: ["color", "dot", "removeLabel", "variant"], outputs: ["removed"] }, { kind: "component", type: YuwButtonComponent, selector: "yuw-button", inputs: ["animationDisabled", "ariaLabel", "color", "disabled", "href", "size", "target", "transparent", "type", "class", "variant", "yuwDropdownMenuTrigger"], outputs: ["clicked"] }, { kind: "component", type: YuwButtonGroupComponent, selector: "yuw-button-group", inputs: ["ariaLabel", "buttons", "color", "orientation", "selectedColor", "selectedVariant", "size", "variant"], outputs: ["buttonClicked"] }, { kind: "directive", type: YuwButtonGroupContentDirective, selector: "ng-template[yuwButtonGroupContent]", inputs: ["yuwButtonGroupContent"] }, { kind: "component", type: YuwCheckboxComponent, selector: "yuw-checkbox", inputs: ["ariaDescribedby", "ariaLabel", "ariaLabelledby", "indeterminate", "inputId", "invalid", "name", "primary", "required", "checked"], outputs: ["indeterminateChange", "checkedChange"] }, { kind: "component", type: YuwListToolbarFilterSetFormComponent, selector: "yuw-list-toolbar-filter-set-form", inputs: ["labels", "mode", "name", "titleHidden"], outputs: ["cancelled", "confirmed", "deleteRequested"] }, { kind: "component", type: YuwListToolbarFilterSetsComponent, selector: "yuw-list-toolbar-filter-sets", inputs: ["canEdit", "canSave", "labels", "selectedId", "sets", "stretchActions", "titleHidden"], outputs: ["deleteRequested", "editRequested", "itemEditRequested", "picked", "saveRequested"] }, { kind: "component", type: YuwPopoverComponent, selector: "yuw-popover", inputs: ["align", "description", "offsetX", "open", "panelClass", "showTrigger", "sideOffset", "title", "triggerClass", "triggerColor", "triggerSize", "triggerTransparent", "triggerVariant"], outputs: ["openChange"] }, { kind: "component", type: YuwSheetComponent, selector: "yuw-sheet", inputs: ["ariaLabel", "ariaModal", "closeLabel", "closeOnOutsidePointerEvents", "description", "open", "overlayClass", "panelClass", "scrollStrategy", "showTrigger", "side", "title", "triggerSize", "triggerVariant"], outputs: ["openChange"] }, { kind: "directive", type: YuwTabContentDirective, selector: "ng-template[yuwTabContent]", inputs: ["yuwTabContent"] }, { kind: "directive", type: YuwTabPanelDirective, selector: "ng-template[yuwTabPanel]", inputs: ["yuwTabPanel"] }, { kind: "component", type: YuwTabsComponent, selector: "yuw-tabs", inputs: ["activationMode", "activeTab", "orientation", "size", "tabs", "class", "variant"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4418
4477
|
}
|
|
4419
4478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarFiltersComponent, decorators: [{
|
|
4420
4479
|
type: Component,
|
|
@@ -4433,8 +4492,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
4433
4492
|
YuwTabContentDirective,
|
|
4434
4493
|
YuwTabPanelDirective,
|
|
4435
4494
|
YuwTabsComponent,
|
|
4436
|
-
], providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], host: { class: 'flex min-w-0 max-w-full items-center gap-1' }, template: "<ng-template #options let-group>\n <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n
|
|
4437
|
-
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sets", required: false }] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
|
|
4495
|
+
], providers: [provideIcons({ lucideFilter, lucideStar, lucideX })], host: { class: 'flex min-w-0 max-w-full items-center gap-1' }, template: "<ng-template #options let-group>\n @if (contentTemplates()[group.id]; as content) {\n <ng-container\n [ngTemplateOutlet]=\"content\"\n [ngTemplateOutletContext]=\"{ $implicit: group, value: draft.values()[group.id], change: changers()[group.id] }\"\n />\n } @else {\n <ul class=\"flex flex-col gap-1\" [attr.aria-label]=\"group.label\">\n @for (option of group.options; track option.value) {\n <li>\n <label\n class=\"flex cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent/45\"\n [for]=\"`${group.id}-option-${option.value}`\"\n >\n <span class=\"min-w-0 truncate\">{{ option.label }}</span>\n\n <yuw-checkbox\n [inputId]=\"`${group.id}-option-${option.value}`\"\n [checked]=\"draft.checkedValues()[group.id]?.has(option.value) ?? false\"\n [disabled]=\"option.disabled ?? false\"\n [ariaLabel]=\"option.label\"\n (checkedChange)=\"onOptionChange(group, option.value, $event)\"\n />\n </label>\n </li>\n }\n </ul>\n }\n</ng-template>\n\n<ng-template #starIcon>\n <ng-icon name=\"lucideStar\" size=\"16\" [class]=\"matchingSet() ? '[&_svg]:fill-current' : ''\" />\n\n @if (matchingSet(); as set) {\n <span class=\"block max-w-[25ch] truncate\">{{ set.name }}</span>\n }\n</ng-template>\n\n<ng-template #filterIcon>\n <span class=\"relative inline-flex\">\n <ng-icon name=\"lucideFilter\" size=\"16\" />\n\n @if (hasActive()) {\n <yuw-badge\n color=\"destructive\"\n class=\"absolute -top-2.5 -right-2.5 h-4 min-w-4 justify-center px-1 text-[10px] leading-none\"\n data-testid=\"active-filters-count\"\n >\n {{ activeCount() }}\n </yuw-badge>\n }\n </span>\n</ng-template>\n\n<ng-template #setForm let-sheet>\n @if (setPanelMode(); as mode) {\n <yuw-list-toolbar-filter-set-form\n [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n [titleHidden]=\"sheet\"\n [labels]=\"setLabels()!\"\n [mode]=\"mode\"\n [name]=\"setPanelName()\"\n (cancelled)=\"open.set(false)\"\n (confirmed)=\"onSetFormConfirmed($event)\"\n (deleteRequested)=\"onSetDeleteRequested()\"\n />\n }\n</ng-template>\n\n<ng-template #setsView let-sheet>\n <yuw-list-toolbar-filter-sets\n [class]=\"sheet ? 'w-full pb-3' : 'w-64 p-1'\"\n [titleHidden]=\"sheet\"\n [stretchActions]=\"!sheet\"\n [labels]=\"setLabels()!\"\n [sets]=\"sets() ?? []\"\n [selectedId]=\"selectedSetId()\"\n [canSave]=\"canSaveSet()\"\n [canEdit]=\"!!matchingSet()\"\n (picked)=\"onSetPicked($event)\"\n (itemEditRequested)=\"openSetPanel('rename', $event)\"\n (saveRequested)=\"openSetPanel('save')\"\n (editRequested)=\"openSetPanel('rename', matchingSet()?.id)\"\n (deleteRequested)=\"openSetPanel('delete', matchingSet()?.id)\"\n />\n</ng-template>\n\n<ng-template #commitRow>\n @if (selectedText(); as text) {\n <p class=\"text-end text-xs text-muted-foreground pr-2\">{{ text }}</p>\n }\n\n <div class=\"flex justify-end gap-2 pt-3\">\n <yuw-button variant=\"outline\" (clicked)=\"draft.clear()\">\n {{ labels().clear }}\n </yuw-button>\n\n <yuw-button (clicked)=\"onApply()\">\n {{ labels().apply }}\n </yuw-button>\n </div>\n</ng-template>\n\n@if (isMobile()) {\n <yuw-button-group\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"sets\">\n <ng-container [ngTemplateOutlet]=\"starIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"filters\">\n <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n <yuw-sheet\n side=\"bottom\"\n panelClass=\"max-h-[85svh] overflow-y-auto\"\n [showTrigger]=\"false\"\n [title]=\"sheetTitle()\"\n [closeLabel]=\"labels().close\"\n [(open)]=\"open\"\n >\n @switch (panelView()) {\n @case ('filters') {\n <div class=\"flex min-h-0 flex-col gap-3\">\n <yuw-tabs\n class=\"max-w-full justify-start overflow-x-auto overflow-y-hidden scrollbar-none [&::-webkit-scrollbar]:hidden scroll-fade-x\"\n [tabs]=\"tabs()\"\n [activeTab]=\"activeGroup()?.id ?? ''\"\n (activeTabChange)=\"selectGroup($event)\"\n >\n @for (group of groups(); track group.id) {\n <ng-template [yuwTabContent]=\"group.id\">\n <span class=\"flex items-center gap-1.5 whitespace-nowrap\">\n {{ group.label }}\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"secondary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </span>\n </ng-template>\n\n <ng-template [yuwTabPanel]=\"group.id\">\n <div class=\"max-h-[45svh] overflow-y-auto pt-2\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n </div>\n </ng-template>\n }\n </yuw-tabs>\n\n <div class=\"pb-3\">\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n </div>\n }\n @case ('sets') {\n <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n }\n @default {\n <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: true }\" />\n }\n }\n </yuw-sheet>\n} @else {\n <yuw-popover align=\"start\" panelClass=\"w-auto p-2 dark:border\" triggerClass=\"px-0\" triggerTransparent [(open)]=\"open\">\n <yuw-button-group\n yuwPopoverTrigger\n variant=\"secondary\"\n [buttons]=\"buttons()\"\n [color]=\"buttonsColor()\"\n [ariaLabel]=\"labels().title\"\n (buttonClicked)=\"onButtonClicked($event)\"\n >\n <ng-template yuwButtonGroupContent=\"sets\">\n <ng-container [ngTemplateOutlet]=\"starIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"filters\">\n <ng-container [ngTemplateOutlet]=\"filterIcon\" />\n </ng-template>\n <ng-template yuwButtonGroupContent=\"clear\">\n <ng-icon name=\"lucideX\" size=\"16\" />\n </ng-template>\n </yuw-button-group>\n\n @switch (panelView()) {\n @case ('filters') {\n <div class=\"flex min-w-0\">\n <ul class=\"flex w-44 shrink-0 flex-col gap-1 pe-2\">\n @for (group of groups(); track group.id) {\n <li>\n <button\n type=\"button\"\n class=\"flex w-full items-center gap-2 rounded-md px-3 py-2 text-start text-sm transition-colors hover:bg-accent/45\"\n [class.bg-accent/45]=\"activeGroup()?.id === group.id\"\n [attr.aria-current]=\"activeGroup()?.id === group.id ? 'true' : null\"\n (click)=\"selectGroup(group.id)\"\n >\n <span class=\"min-w-0 flex-1 truncate\">{{ group.label }}</span>\n\n @if (draft.pendingGroupIds().has(group.id)) {\n <yuw-badge\n dot\n color=\"secondary\"\n style=\"width: 0.5rem; height: 0.5rem\"\n [attr.aria-label]=\"labels().pending\"\n [attr.title]=\"labels().pending\"\n />\n }\n </button>\n </li>\n }\n </ul>\n\n @if (activeGroup(); as group) {\n <div class=\"flex min-w-0 flex-1 flex-col gap-3 border-s p-3\">\n <ng-container [ngTemplateOutlet]=\"options\" [ngTemplateOutletContext]=\"{ $implicit: group }\" />\n <ng-container [ngTemplateOutlet]=\"commitRow\" />\n </div>\n }\n </div>\n }\n @case ('sets') {\n <ng-container [ngTemplateOutlet]=\"setsView\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n }\n @default {\n <ng-container [ngTemplateOutlet]=\"setForm\" [ngTemplateOutletContext]=\"{ $implicit: false }\" />\n }\n }\n </yuw-popover>\n}\n", styles: [".scrollbar-none{scrollbar-width:none}\n"] }]
|
|
4496
|
+
}], ctorParameters: () => [], propDecorators: { contents: [{ type: i0.Input, args: [{ isSignal: true, alias: "contents", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: true }] }], isMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMobile", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sets: [{ type: i0.Input, args: [{ isSignal: true, alias: "sets", required: false }] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
|
|
4438
4497
|
|
|
4439
4498
|
/**
|
|
4440
4499
|
* Toolbar of a list page: filters on the leading edge, search, export and column visibility on the
|
|
@@ -4444,7 +4503,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
4444
4503
|
* `showExport`, `hideableColumns`, `viewMode`. Setting `viewMode` adds a list/block switch bound
|
|
4445
4504
|
* two-way to it (`viewModeChange` is the click listener); its names come from `labels.viewMode`. Saved filter sets need `filterSets` and `labels.filters.sets`;
|
|
4446
4505
|
* the toolbar emits `setSaved`, `setRenamed` and `setDeleted` and the consumer persists them. `labels` holds every text and the consumer translates it;
|
|
4447
|
-
* `idleColor` is the filter trigger tone while nothing is applied.
|
|
4506
|
+
* `idleColor` is the filter trigger tone while nothing is applied. A filter group may omit `options` and be
|
|
4507
|
+
* rendered by a projected `<ng-template yuwFilterContent="groupId">` instead (a combobox, say); see
|
|
4508
|
+
* `YuwFilterContentDirective`.
|
|
4448
4509
|
*
|
|
4449
4510
|
* Inputs:
|
|
4450
4511
|
* - `filterGroups`: Filter groups the editor offers; the filter control renders only when set.
|
|
@@ -4459,6 +4520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
4459
4520
|
* - `selection`: Two-way (`[(selection)]`) applied filter selection, values keyed by group id. Default is `{}`.
|
|
4460
4521
|
* - `showExport`: Renders the export button. Default is `false`.
|
|
4461
4522
|
* - `viewMode`: Two-way (`[(viewMode)]`) `YuwViewMode` (`'list'` or `'block'`); the list/block switch renders only when set.
|
|
4523
|
+
* - `viewModeIcons`: Partial override of the switch icons by mode (ng-icon names, registered by the consumer with `provideIcons`). Defaults are `lucideList` and `lucideLayoutGrid`.
|
|
4462
4524
|
*
|
|
4463
4525
|
* Outputs:
|
|
4464
4526
|
* - `exported`: Emits the `MouseEvent` of the export button click.
|
|
@@ -4466,6 +4528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
4466
4528
|
*/
|
|
4467
4529
|
class YuwListToolbarComponent {
|
|
4468
4530
|
constructor() {
|
|
4531
|
+
this.filterContents = contentChildren(YuwFilterContentDirective, ...(ngDevMode ? [{ debugName: "filterContents" }] : /* istanbul ignore next */ []));
|
|
4469
4532
|
this.filterGroups = input(...(ngDevMode ? [undefined, { debugName: "filterGroups" }] : /* istanbul ignore next */ []));
|
|
4470
4533
|
this.filtersDisabled = input(false, { ...(ngDevMode ? { debugName: "filtersDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4471
4534
|
this.filterSets = input(...(ngDevMode ? [undefined, { debugName: "filterSets" }] : /* istanbul ignore next */ []));
|
|
@@ -4478,6 +4541,7 @@ class YuwListToolbarComponent {
|
|
|
4478
4541
|
this.selection = model({}, ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
|
|
4479
4542
|
this.showExport = input(false, { ...(ngDevMode ? { debugName: "showExport" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4480
4543
|
this.viewMode = model(...(ngDevMode ? [undefined, { debugName: "viewMode" }] : /* istanbul ignore next */ []));
|
|
4544
|
+
this.viewModeIcons = input(...(ngDevMode ? [undefined, { debugName: "viewModeIcons" }] : /* istanbul ignore next */ []));
|
|
4481
4545
|
this.exported = output();
|
|
4482
4546
|
this.searched = output();
|
|
4483
4547
|
this.setDeleted = output();
|
|
@@ -4486,12 +4550,12 @@ class YuwListToolbarComponent {
|
|
|
4486
4550
|
this.isMobile = injectIsMobile();
|
|
4487
4551
|
}
|
|
4488
4552
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarComponent, isStandalone: true, selector: "yuw-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterSets: { classPropertyName: "filterSets", publicName: "filterSets", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", viewMode: "viewModeChange", exported: "exported", searched: "searched", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex flex-wrap items-center justify-between gap-3" }, ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n @if (filterGroups(); as groups) {\n <yuw-list-toolbar-filters\n [disabled]=\"filtersDisabled()\"\n [groups]=\"groups\"\n [idleColor]=\"idleColor()\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels().filters\"\n [sets]=\"filterSets()\"\n [(selection)]=\"selection\"\n (setDeleted)=\"setDeleted.emit($event)\"\n (setRenamed)=\"setRenamed.emit($event)\"\n (setSaved)=\"setSaved.emit($event)\"\n />\n }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n <yuw-list-toolbar-actions\n [hideableColumns]=\"hideableColumns()\"\n [(hiddenColumns)]=\"hiddenColumns\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [showExport]=\"showExport()\"\n [(viewMode)]=\"viewMode\"\n [(search)]=\"search\"\n (exported)=\"exported.emit($event)\"\n (searched)=\"searched.emit($event)\"\n />\n\n <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwListToolbarActionsComponent, selector: "yuw-list-toolbar-actions", inputs: ["hiddenColumns", "hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport", "viewMode"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["disabled", "groups", "idleColor", "isMobile", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4553
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwListToolbarComponent, isStandalone: true, selector: "yuw-list-toolbar", inputs: { filterGroups: { classPropertyName: "filterGroups", publicName: "filterGroups", isSignal: true, isRequired: false, transformFunction: null }, filtersDisabled: { classPropertyName: "filtersDisabled", publicName: "filtersDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterSets: { classPropertyName: "filterSets", publicName: "filterSets", isSignal: true, isRequired: false, transformFunction: null }, hiddenColumns: { classPropertyName: "hiddenColumns", publicName: "hiddenColumns", isSignal: true, isRequired: false, transformFunction: null }, hideableColumns: { classPropertyName: "hideableColumns", publicName: "hideableColumns", isSignal: true, isRequired: false, transformFunction: null }, idleColor: { classPropertyName: "idleColor", publicName: "idleColor", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, showExport: { classPropertyName: "showExport", publicName: "showExport", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null }, viewModeIcons: { classPropertyName: "viewModeIcons", publicName: "viewModeIcons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenColumns: "hiddenColumnsChange", search: "searchChange", selection: "selectionChange", viewMode: "viewModeChange", exported: "exported", searched: "searched", setDeleted: "setDeleted", setRenamed: "setRenamed", setSaved: "setSaved" }, host: { classAttribute: "flex flex-wrap items-center justify-between gap-3" }, queries: [{ propertyName: "filterContents", predicate: YuwFilterContentDirective, isSignal: true }], ngImport: i0, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n @if (filterGroups(); as groups) {\n <yuw-list-toolbar-filters\n [disabled]=\"filtersDisabled()\"\n [groups]=\"groups\"\n [contents]=\"filterContents()\"\n [idleColor]=\"idleColor()\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels().filters\"\n [sets]=\"filterSets()\"\n [(selection)]=\"selection\"\n (setDeleted)=\"setDeleted.emit($event)\"\n (setRenamed)=\"setRenamed.emit($event)\"\n (setSaved)=\"setSaved.emit($event)\"\n />\n }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n <yuw-list-toolbar-actions\n [hideableColumns]=\"hideableColumns()\"\n [(hiddenColumns)]=\"hiddenColumns\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [showExport]=\"showExport()\"\n [(viewMode)]=\"viewMode\"\n [viewModeIcons]=\"viewModeIcons()\"\n [(search)]=\"search\"\n (exported)=\"exported.emit($event)\"\n (searched)=\"searched.emit($event)\"\n />\n\n <ng-content />\n</div>\n", dependencies: [{ kind: "component", type: YuwListToolbarActionsComponent, selector: "yuw-list-toolbar-actions", inputs: ["hiddenColumns", "hideableColumns", "isMobile", "labels", "search", "searchPlaceholder", "showExport", "viewMode", "viewModeIcons"], outputs: ["hiddenColumnsChange", "searchChange", "viewModeChange", "exported", "searched"] }, { kind: "component", type: YuwListToolbarFiltersComponent, selector: "yuw-list-toolbar-filters", inputs: ["contents", "disabled", "groups", "idleColor", "isMobile", "labels", "selection", "sets"], outputs: ["selectionChange", "setDeleted", "setRenamed", "setSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4490
4554
|
}
|
|
4491
4555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwListToolbarComponent, decorators: [{
|
|
4492
4556
|
type: Component,
|
|
4493
|
-
args: [{ selector: 'yuw-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwListToolbarActionsComponent, YuwListToolbarFiltersComponent], host: { class: 'flex flex-wrap items-center justify-between gap-3' }, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n @if (filterGroups(); as groups) {\n <yuw-list-toolbar-filters\n [disabled]=\"filtersDisabled()\"\n [groups]=\"groups\"\n [idleColor]=\"idleColor()\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels().filters\"\n [sets]=\"filterSets()\"\n [(selection)]=\"selection\"\n (setDeleted)=\"setDeleted.emit($event)\"\n (setRenamed)=\"setRenamed.emit($event)\"\n (setSaved)=\"setSaved.emit($event)\"\n />\n }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n <yuw-list-toolbar-actions\n [hideableColumns]=\"hideableColumns()\"\n [(hiddenColumns)]=\"hiddenColumns\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [showExport]=\"showExport()\"\n [(viewMode)]=\"viewMode\"\n [(search)]=\"search\"\n (exported)=\"exported.emit($event)\"\n (searched)=\"searched.emit($event)\"\n />\n\n <ng-content />\n</div>\n" }]
|
|
4494
|
-
}], propDecorators: { filterGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterGroups", required: false }] }], filtersDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDisabled", required: false }] }], filterSets: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSets", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
|
|
4557
|
+
args: [{ selector: 'yuw-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [YuwListToolbarActionsComponent, YuwListToolbarFiltersComponent], host: { class: 'flex flex-wrap items-center justify-between gap-3' }, template: "<!-- Filters -->\n<div class=\"flex min-w-0 max-w-full items-center\">\n @if (filterGroups(); as groups) {\n <yuw-list-toolbar-filters\n [disabled]=\"filtersDisabled()\"\n [groups]=\"groups\"\n [contents]=\"filterContents()\"\n [idleColor]=\"idleColor()\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels().filters\"\n [sets]=\"filterSets()\"\n [(selection)]=\"selection\"\n (setDeleted)=\"setDeleted.emit($event)\"\n (setRenamed)=\"setRenamed.emit($event)\"\n (setSaved)=\"setSaved.emit($event)\"\n />\n }\n</div>\n\n<!-- Actions -->\n<div class=\"ms-auto flex items-center gap-2\">\n <yuw-list-toolbar-actions\n [hideableColumns]=\"hideableColumns()\"\n [(hiddenColumns)]=\"hiddenColumns\"\n [isMobile]=\"isMobile()\"\n [labels]=\"labels()\"\n [searchPlaceholder]=\"searchPlaceholder()\"\n [showExport]=\"showExport()\"\n [(viewMode)]=\"viewMode\"\n [viewModeIcons]=\"viewModeIcons()\"\n [(search)]=\"search\"\n (exported)=\"exported.emit($event)\"\n (searched)=\"searched.emit($event)\"\n />\n\n <ng-content />\n</div>\n" }]
|
|
4558
|
+
}], propDecorators: { filterContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwFilterContentDirective), { isSignal: true }] }], filterGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterGroups", required: false }] }], filtersDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDisabled", required: false }] }], filterSets: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSets", required: false }] }], hiddenColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenColumns", required: false }] }, { type: i0.Output, args: ["hiddenColumnsChange"] }], hideableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideableColumns", required: false }] }], idleColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "idleColor", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], showExport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExport", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }, { type: i0.Output, args: ["viewModeChange"] }], viewModeIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewModeIcons", required: false }] }], exported: [{ type: i0.Output, args: ["exported"] }], searched: [{ type: i0.Output, args: ["searched"] }], setDeleted: [{ type: i0.Output, args: ["setDeleted"] }], setRenamed: [{ type: i0.Output, args: ["setRenamed"] }], setSaved: [{ type: i0.Output, args: ["setSaved"] }] } });
|
|
4495
4559
|
|
|
4496
4560
|
const YUW_DATATABLE_FEATURES = {
|
|
4497
4561
|
columnMeta: {},
|
|
@@ -7032,5 +7096,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
7032
7096
|
* Generated bundle index. Do not edit.
|
|
7033
7097
|
*/
|
|
7034
7098
|
|
|
7035
|
-
export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
|
|
7099
|
+
export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardGridComponent, YuwCardGridItemComponent, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwFilterContentDirective, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwListPaginationComponent, YuwListToolbarComponent, YuwPageHeaderComponent, YuwPageSizeComponent, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, buildInputOtpGroups, buildYuwActionsColumn, cn, createPagedList, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter };
|
|
7036
7100
|
//# sourceMappingURL=yukit-web.mjs.map
|