@m1z23r/ngx-ui 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/m1z23r-ngx-ui.mjs +187 -89
- package/fesm2022/m1z23r-ngx-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/m1z23r-ngx-ui.d.ts +49 -4
|
@@ -599,85 +599,11 @@ class ModalComponent {
|
|
|
599
599
|
return classes.join(' ');
|
|
600
600
|
}
|
|
601
601
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
602
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" } }, ngImport: i0, template:
|
|
603
|
-
<div class="ui-modal__backdrop" (click)="onBackdropClick($event)">
|
|
604
|
-
<div
|
|
605
|
-
class="ui-modal__container"
|
|
606
|
-
[class]="containerClasses()"
|
|
607
|
-
[style.width]="width()"
|
|
608
|
-
[style.max-width]="maxWidth()"
|
|
609
|
-
role="dialog"
|
|
610
|
-
aria-modal="true"
|
|
611
|
-
>
|
|
612
|
-
@if (title()) {
|
|
613
|
-
<div class="ui-modal__header">
|
|
614
|
-
<h2 class="ui-modal__title">{{ title() }}</h2>
|
|
615
|
-
@if (showCloseButton()) {
|
|
616
|
-
<button
|
|
617
|
-
type="button"
|
|
618
|
-
class="ui-modal__close"
|
|
619
|
-
aria-label="Close"
|
|
620
|
-
(click)="close()"
|
|
621
|
-
>
|
|
622
|
-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
623
|
-
<path d="M18 6L6 18M6 6l12 12"/>
|
|
624
|
-
</svg>
|
|
625
|
-
</button>
|
|
626
|
-
}
|
|
627
|
-
</div>
|
|
628
|
-
}
|
|
629
|
-
|
|
630
|
-
<div class="ui-modal__body">
|
|
631
|
-
<ng-content />
|
|
632
|
-
</div>
|
|
633
|
-
|
|
634
|
-
<div class="ui-modal__footer">
|
|
635
|
-
<ng-content select="[footer]" />
|
|
636
|
-
</div>
|
|
637
|
-
</div>
|
|
638
|
-
</div>
|
|
639
|
-
`, isInline: true, styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
602
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ModalComponent, isStandalone: true, selector: "ui-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "onEscapePress()" } }, ngImport: i0, template: "<div class=\"ui-modal__backdrop\" (click)=\"onBackdropClick($event)\">\n <div\n class=\"ui-modal__container\"\n [class]=\"containerClasses()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n aria-modal=\"true\"\n >\n @if (title()) {\n <div class=\"ui-modal__header\">\n <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"ui-modal__close\"\n aria-label=\"Close\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M18 6L6 18M6 6l12 12\"/>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"ui-modal__body\">\n <ng-content />\n </div>\n\n <div class=\"ui-modal__footer\">\n <ng-content select=\"[footer]\" />\n </div>\n </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
640
603
|
}
|
|
641
604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ModalComponent, decorators: [{
|
|
642
605
|
type: Component,
|
|
643
|
-
args: [{ selector: 'ui-modal', standalone: true, template:
|
|
644
|
-
<div class="ui-modal__backdrop" (click)="onBackdropClick($event)">
|
|
645
|
-
<div
|
|
646
|
-
class="ui-modal__container"
|
|
647
|
-
[class]="containerClasses()"
|
|
648
|
-
[style.width]="width()"
|
|
649
|
-
[style.max-width]="maxWidth()"
|
|
650
|
-
role="dialog"
|
|
651
|
-
aria-modal="true"
|
|
652
|
-
>
|
|
653
|
-
@if (title()) {
|
|
654
|
-
<div class="ui-modal__header">
|
|
655
|
-
<h2 class="ui-modal__title">{{ title() }}</h2>
|
|
656
|
-
@if (showCloseButton()) {
|
|
657
|
-
<button
|
|
658
|
-
type="button"
|
|
659
|
-
class="ui-modal__close"
|
|
660
|
-
aria-label="Close"
|
|
661
|
-
(click)="close()"
|
|
662
|
-
>
|
|
663
|
-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
664
|
-
<path d="M18 6L6 18M6 6l12 12"/>
|
|
665
|
-
</svg>
|
|
666
|
-
</button>
|
|
667
|
-
}
|
|
668
|
-
</div>
|
|
669
|
-
}
|
|
670
|
-
|
|
671
|
-
<div class="ui-modal__body">
|
|
672
|
-
<ng-content />
|
|
673
|
-
</div>
|
|
674
|
-
|
|
675
|
-
<div class="ui-modal__footer">
|
|
676
|
-
<ng-content select="[footer]" />
|
|
677
|
-
</div>
|
|
678
|
-
</div>
|
|
679
|
-
</div>
|
|
680
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
606
|
+
args: [{ selector: 'ui-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-modal__backdrop\" (click)=\"onBackdropClick($event)\">\n <div\n class=\"ui-modal__container\"\n [class]=\"containerClasses()\"\n [style.width]=\"width()\"\n [style.max-width]=\"maxWidth()\"\n role=\"dialog\"\n aria-modal=\"true\"\n >\n @if (title()) {\n <div class=\"ui-modal__header\">\n <h2 class=\"ui-modal__title\">{{ title() }}</h2>\n @if (showCloseButton()) {\n <button\n type=\"button\"\n class=\"ui-modal__close\"\n aria-label=\"Close\"\n (click)=\"close()\"\n >\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M18 6L6 18M6 6l12 12\"/>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"ui-modal__body\">\n <ng-content />\n </div>\n\n <div class=\"ui-modal__footer\">\n <ng-content select=\"[footer]\" />\n </div>\n </div>\n</div>\n", styles: [".ui-modal__backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--ui-spacing-md);background-color:#00000080;animation:fadeIn var(--ui-transition-fast)}.ui-modal__container{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--ui-spacing-xl) * 2);background-color:var(--ui-bg);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg);animation:slideIn var(--ui-transition-normal)}.ui-modal--sm{max-width:400px}.ui-modal--md{max-width:560px}.ui-modal--lg{max-width:800px}.ui-modal--xl{max-width:1140px}.ui-modal--full{max-width:calc(100vw - var(--ui-spacing-xl) * 2);max-height:calc(100vh - var(--ui-spacing-xl) * 2)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-bottom:1px solid var(--ui-border)}.ui-modal__title{margin:0;font-size:var(--ui-font-lg);font-weight:600;color:var(--ui-text)}.ui-modal__close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:calc(var(--ui-spacing-sm) * -1);color:var(--ui-text-muted);background:transparent;border:none;border-radius:var(--ui-radius-sm);cursor:pointer;transition:all var(--ui-transition-fast)}.ui-modal__close:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-modal__close:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px}.ui-modal__body{flex:1;padding:var(--ui-spacing-lg);overflow-y:auto}.ui-modal__footer{display:flex;gap:var(--ui-spacing-sm);justify-content:flex-end;padding:var(--ui-spacing-md) var(--ui-spacing-lg);border-top:1px solid var(--ui-border)}.ui-modal__footer:empty{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
681
607
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], onEscapePress: [{
|
|
682
608
|
type: HostListener,
|
|
683
609
|
args: ['document:keydown.escape']
|
|
@@ -928,16 +854,19 @@ class SelectComponent {
|
|
|
928
854
|
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
929
855
|
searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
|
|
930
856
|
clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
|
|
857
|
+
creatable = input(false, ...(ngDevMode ? [{ debugName: "creatable" }] : []));
|
|
931
858
|
// Two-way binding
|
|
932
859
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
933
860
|
// Outputs
|
|
934
861
|
opened = output();
|
|
935
862
|
closed = output();
|
|
863
|
+
created = output();
|
|
936
864
|
// Content children
|
|
937
865
|
options = contentChildren(OptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
938
866
|
// View children for dropdown portal
|
|
939
867
|
triggerRef;
|
|
940
868
|
dropdownRef;
|
|
869
|
+
searchInputRef;
|
|
941
870
|
// Internal state
|
|
942
871
|
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
943
872
|
searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
|
|
@@ -1032,6 +961,12 @@ class SelectComponent {
|
|
|
1032
961
|
return label.includes(query);
|
|
1033
962
|
});
|
|
1034
963
|
}, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : []));
|
|
964
|
+
exactMatchExists = computed(() => {
|
|
965
|
+
const query = this.searchQuery().toLowerCase().trim();
|
|
966
|
+
if (!query)
|
|
967
|
+
return true;
|
|
968
|
+
return this.options().some((opt) => opt.getLabel().toLowerCase() === query);
|
|
969
|
+
}, ...(ngDevMode ? [{ debugName: "exactMatchExists" }] : []));
|
|
1035
970
|
onDocumentClick(event) {
|
|
1036
971
|
const target = event.target;
|
|
1037
972
|
if (!this.elementRef.nativeElement.contains(target) &&
|
|
@@ -1042,11 +977,19 @@ class SelectComponent {
|
|
|
1042
977
|
toggle() {
|
|
1043
978
|
if (this.disabled())
|
|
1044
979
|
return;
|
|
1045
|
-
if (this.
|
|
1046
|
-
|
|
980
|
+
if (this.searchable()) {
|
|
981
|
+
// In combobox mode, clicking trigger always opens
|
|
982
|
+
if (!this.isOpen()) {
|
|
983
|
+
this.open();
|
|
984
|
+
}
|
|
1047
985
|
}
|
|
1048
986
|
else {
|
|
1049
|
-
this.
|
|
987
|
+
if (this.isOpen()) {
|
|
988
|
+
this.close();
|
|
989
|
+
}
|
|
990
|
+
else {
|
|
991
|
+
this.open();
|
|
992
|
+
}
|
|
1050
993
|
}
|
|
1051
994
|
}
|
|
1052
995
|
open() {
|
|
@@ -1057,6 +1000,15 @@ class SelectComponent {
|
|
|
1057
1000
|
this.focusedIndex.set(-1);
|
|
1058
1001
|
this.opened.emit();
|
|
1059
1002
|
this.portalDropdown();
|
|
1003
|
+
if (this.searchable()) {
|
|
1004
|
+
setTimeout(() => {
|
|
1005
|
+
const input = this.searchInputRef?.nativeElement;
|
|
1006
|
+
if (input) {
|
|
1007
|
+
input.focus();
|
|
1008
|
+
input.select();
|
|
1009
|
+
}
|
|
1010
|
+
});
|
|
1011
|
+
}
|
|
1060
1012
|
}
|
|
1061
1013
|
close() {
|
|
1062
1014
|
if (!this.isOpen())
|
|
@@ -1085,6 +1037,12 @@ class SelectComponent {
|
|
|
1085
1037
|
newValue = currentValue.filter((_, i) => i !== index);
|
|
1086
1038
|
}
|
|
1087
1039
|
this.value.set(newValue);
|
|
1040
|
+
// In multiple+searchable mode, clear search and refocus input
|
|
1041
|
+
if (this.searchable()) {
|
|
1042
|
+
this.searchQuery.set('');
|
|
1043
|
+
this.focusedIndex.set(-1);
|
|
1044
|
+
setTimeout(() => this.searchInputRef?.nativeElement?.focus());
|
|
1045
|
+
}
|
|
1088
1046
|
}
|
|
1089
1047
|
else {
|
|
1090
1048
|
this.value.set(optionValue);
|
|
@@ -1139,29 +1097,71 @@ class SelectComponent {
|
|
|
1139
1097
|
break;
|
|
1140
1098
|
}
|
|
1141
1099
|
}
|
|
1142
|
-
|
|
1100
|
+
handleSearchInputKeydown(event) {
|
|
1101
|
+
// Stop propagation so the trigger's keydown handler doesn't
|
|
1102
|
+
// interfere (e.g. space would otherwise preventDefault).
|
|
1103
|
+
event.stopPropagation();
|
|
1143
1104
|
switch (event.key) {
|
|
1144
1105
|
case 'ArrowDown':
|
|
1145
1106
|
event.preventDefault();
|
|
1146
|
-
this.
|
|
1107
|
+
if (!this.isOpen()) {
|
|
1108
|
+
this.open();
|
|
1109
|
+
}
|
|
1110
|
+
else {
|
|
1111
|
+
this.focusNext();
|
|
1112
|
+
}
|
|
1147
1113
|
break;
|
|
1148
1114
|
case 'ArrowUp':
|
|
1149
1115
|
event.preventDefault();
|
|
1150
|
-
this.
|
|
1116
|
+
if (this.isOpen()) {
|
|
1117
|
+
this.focusPrevious();
|
|
1118
|
+
}
|
|
1151
1119
|
break;
|
|
1152
1120
|
case 'Enter':
|
|
1153
1121
|
event.preventDefault();
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
this.
|
|
1122
|
+
if (this.isOpen()) {
|
|
1123
|
+
const visible = this.visibleOptions();
|
|
1124
|
+
const focused = visible[this.focusedIndex()];
|
|
1125
|
+
if (focused) {
|
|
1126
|
+
this.selectOption(focused);
|
|
1127
|
+
}
|
|
1128
|
+
else if (visible.length === 1) {
|
|
1129
|
+
this.selectOption(visible[0]);
|
|
1130
|
+
}
|
|
1131
|
+
else if (this.creatable() && this.searchQuery().trim() && !this.exactMatchExists()) {
|
|
1132
|
+
this.handleCreate();
|
|
1133
|
+
}
|
|
1134
|
+
}
|
|
1135
|
+
else {
|
|
1136
|
+
this.open();
|
|
1157
1137
|
}
|
|
1158
1138
|
break;
|
|
1159
1139
|
case 'Escape':
|
|
1160
1140
|
event.preventDefault();
|
|
1161
1141
|
this.close();
|
|
1162
1142
|
break;
|
|
1143
|
+
case 'Tab':
|
|
1144
|
+
this.close();
|
|
1145
|
+
break;
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
onSearchInput(value) {
|
|
1149
|
+
this.searchQuery.set(value);
|
|
1150
|
+
// Auto-highlight when exactly one option is visible
|
|
1151
|
+
const visible = this.visibleOptions();
|
|
1152
|
+
this.focusedIndex.set(visible.length === 1 ? 0 : -1);
|
|
1153
|
+
if (!this.isOpen()) {
|
|
1154
|
+
this.open();
|
|
1163
1155
|
}
|
|
1164
1156
|
}
|
|
1157
|
+
handleCreate() {
|
|
1158
|
+
const query = this.searchQuery().trim();
|
|
1159
|
+
if (!query)
|
|
1160
|
+
return;
|
|
1161
|
+
this.created.emit(query);
|
|
1162
|
+
this.searchQuery.set('');
|
|
1163
|
+
this.close();
|
|
1164
|
+
}
|
|
1165
1165
|
focusNext() {
|
|
1166
1166
|
const opts = this.visibleOptions();
|
|
1167
1167
|
const current = this.focusedIndex();
|
|
@@ -1264,17 +1264,20 @@ class SelectComponent {
|
|
|
1264
1264
|
this.positionCleanup = null;
|
|
1265
1265
|
}
|
|
1266
1266
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1267
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }], ngImport: i0, template: "<div\n class=\"ui-select-wrapper\"\n [class.ui-select-wrapper--error]=\"error()\"\n [class.ui-select-wrapper--disabled]=\"disabled()\"\n [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n @if (label()) {\n <label class=\"ui-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerRef\n class=\"ui-select__trigger\"\n [class]=\"triggerClasses()\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\"\n >\n <span class=\"ui-select__value\">\n
|
|
1267
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SelectComponent, isStandalone: true, selector: "ui-select", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, creatable: { classPropertyName: "creatable", publicName: "creatable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed", created: "created" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true, static: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true, static: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"ui-select-wrapper\"\n [class.ui-select-wrapper--error]=\"error()\"\n [class.ui-select-wrapper--disabled]=\"disabled()\"\n [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n @if (label()) {\n <label class=\"ui-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerRef\n class=\"ui-select__trigger\"\n [class]=\"triggerClasses()\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"searchable() ? -1 : (disabled() ? -1 : 0)\"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\"\n >\n @if (searchable()) {\n <input\n #searchInput\n type=\"text\"\n class=\"ui-select__input\"\n [placeholder]=\"displayValue() || placeholder()\"\n [value]=\"isOpen() ? searchQuery() : displayValue()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"handleSearchInputKeydown($event)\"\n (focus)=\"toggle()\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"ui-select__value\">\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n <span class=\"ui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n }\n\n <div class=\"ui-select__icons\">\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"ui-select__clear\"\n (click)=\"clear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n <svg\n class=\"ui-select__arrow\"\n [class.ui-select__arrow--open]=\"isOpen()\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n\n <div\n #dropdownRef\n class=\"ui-select__dropdown\"\n [class.ui-select__dropdown--open]=\"isOpen()\"\n [attr.role]=\"'listbox'\"\n [attr.aria-multiselectable]=\"multiple()\"\n >\n <div class=\"ui-select__options\">\n <ng-content />\n @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n <div class=\"ui-select__empty\">No options found</div>\n }\n </div>\n @if (creatable() && searchQuery().trim() && !exactMatchExists()) {\n <div\n class=\"ui-select__create\"\n (click)=\"handleCreate()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n </svg>\n Create \"{{ searchQuery().trim() }}\"\n </div>\n }\n </div>\n\n @if (error()) {\n <span class=\"ui-select__error\">{{ error() }}</span>\n }\n @if (hint() && !error()) {\n <span class=\"ui-select__hint\">{{ hint() }}</span>\n }\n</div>\n", styles: [":host{display:block;position:relative}.ui-select-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-select__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);width:100%;background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-select__trigger:hover:not([aria-disabled=true]){border-color:var(--ui-border-hover)}.ui-select__trigger:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-select__trigger[aria-disabled=true]{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-select__trigger--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-sm)}.ui-select__trigger--md{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-md)}.ui-select__trigger--lg{padding:var(--ui-spacing-md) var(--ui-spacing-lg);font-size:var(--ui-font-lg)}.ui-select__trigger--outlined{background-color:transparent}.ui-select__trigger--filled{background-color:var(--ui-bg-secondary);border-color:transparent}.ui-select__trigger--filled:hover:not([aria-disabled=true]){background-color:var(--ui-bg-tertiary)}.ui-select__trigger--filled:focus{border-color:var(--ui-border-focus)}.ui-select__value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__placeholder{color:var(--ui-text-muted)}.ui-select__icons{display:flex;align-items:center;gap:var(--ui-spacing-xs);flex-shrink:0}.ui-select__clear{display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:none;cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-select__clear:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-select__arrow{color:var(--ui-text-muted);transition:transform var(--ui-transition-fast)}.ui-select__arrow--open{transform:rotate(180deg)}.ui-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;padding:0;text-align:left;text-overflow:ellipsis;cursor:pointer}.ui-select__input::placeholder{color:var(--ui-text-muted)}.ui-select__input:focus{cursor:text}.ui-select__input:disabled{cursor:not-allowed}.ui-select__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-sm);color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-select__create:hover{background-color:var(--ui-bg-hover)}.ui-select__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-select__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select-wrapper--error .ui-select__trigger{border-color:var(--ui-danger)}.ui-select-wrapper--error .ui-select__trigger:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-select__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-select__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1268
1268
|
}
|
|
1269
1269
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1270
1270
|
type: Component,
|
|
1271
|
-
args: [{ selector: 'ui-select', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ui-select-wrapper\"\n [class.ui-select-wrapper--error]=\"error()\"\n [class.ui-select-wrapper--disabled]=\"disabled()\"\n [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n @if (label()) {\n <label class=\"ui-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerRef\n class=\"ui-select__trigger\"\n [class]=\"triggerClasses()\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\"\n >\n <span class=\"ui-select__value\">\n
|
|
1272
|
-
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }], triggerRef: [{
|
|
1271
|
+
args: [{ selector: 'ui-select', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ui-select-wrapper\"\n [class.ui-select-wrapper--error]=\"error()\"\n [class.ui-select-wrapper--disabled]=\"disabled()\"\n [class.ui-select-wrapper--open]=\"isOpen()\"\n>\n @if (label()) {\n <label class=\"ui-select__label\">\n {{ label() }}\n </label>\n }\n\n <div\n #triggerRef\n class=\"ui-select__trigger\"\n [class]=\"triggerClasses()\"\n [attr.role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.tabindex]=\"searchable() ? -1 : (disabled() ? -1 : 0)\"\n (click)=\"toggle()\"\n (keydown)=\"handleTriggerKeydown($event)\"\n >\n @if (searchable()) {\n <input\n #searchInput\n type=\"text\"\n class=\"ui-select__input\"\n [placeholder]=\"displayValue() || placeholder()\"\n [value]=\"isOpen() ? searchQuery() : displayValue()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown)=\"handleSearchInputKeydown($event)\"\n (focus)=\"toggle()\"\n autocomplete=\"off\"\n />\n } @else {\n <span class=\"ui-select__value\">\n @if (displayValue()) {\n {{ displayValue() }}\n } @else {\n <span class=\"ui-select__placeholder\">{{ placeholder() }}</span>\n }\n </span>\n }\n\n <div class=\"ui-select__icons\">\n @if (clearable() && hasValue() && !disabled()) {\n <button\n type=\"button\"\n class=\"ui-select__clear\"\n (click)=\"clear($event)\"\n aria-label=\"Clear selection\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n <svg\n class=\"ui-select__arrow\"\n [class.ui-select__arrow--open]=\"isOpen()\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n >\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </div>\n </div>\n\n <div\n #dropdownRef\n class=\"ui-select__dropdown\"\n [class.ui-select__dropdown--open]=\"isOpen()\"\n [attr.role]=\"'listbox'\"\n [attr.aria-multiselectable]=\"multiple()\"\n >\n <div class=\"ui-select__options\">\n <ng-content />\n @if (visibleOptions().length === 0 && !(creatable() && searchQuery().trim())) {\n <div class=\"ui-select__empty\">No options found</div>\n }\n </div>\n @if (creatable() && searchQuery().trim() && !exactMatchExists()) {\n <div\n class=\"ui-select__create\"\n (click)=\"handleCreate()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"></line>\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n </svg>\n Create \"{{ searchQuery().trim() }}\"\n </div>\n }\n </div>\n\n @if (error()) {\n <span class=\"ui-select__error\">{{ error() }}</span>\n }\n @if (hint() && !error()) {\n <span class=\"ui-select__hint\">{{ hint() }}</span>\n }\n</div>\n", styles: [":host{display:block;position:relative}.ui-select-wrapper{display:flex;flex-direction:column;gap:var(--ui-spacing-xs)}.ui-select__label{font-size:var(--ui-font-sm);font-weight:500;color:var(--ui-text)}.ui-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-spacing-sm);width:100%;background-color:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast)}.ui-select__trigger:hover:not([aria-disabled=true]){border-color:var(--ui-border-hover)}.ui-select__trigger:focus{outline:none;border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-select__trigger[aria-disabled=true]{background-color:var(--ui-bg-secondary);color:var(--ui-text-disabled);cursor:not-allowed}.ui-select__trigger--sm{padding:var(--ui-spacing-xs) var(--ui-spacing-sm);font-size:var(--ui-font-sm)}.ui-select__trigger--md{padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-md)}.ui-select__trigger--lg{padding:var(--ui-spacing-md) var(--ui-spacing-lg);font-size:var(--ui-font-lg)}.ui-select__trigger--outlined{background-color:transparent}.ui-select__trigger--filled{background-color:var(--ui-bg-secondary);border-color:transparent}.ui-select__trigger--filled:hover:not([aria-disabled=true]){background-color:var(--ui-bg-tertiary)}.ui-select__trigger--filled:focus{border-color:var(--ui-border-focus)}.ui-select__value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select__placeholder{color:var(--ui-text-muted)}.ui-select__icons{display:flex;align-items:center;gap:var(--ui-spacing-xs);flex-shrink:0}.ui-select__clear{display:flex;align-items:center;justify-content:center;padding:2px;background:none;border:none;cursor:pointer;color:var(--ui-text-muted);border-radius:var(--ui-radius-sm);transition:color var(--ui-transition-fast),background-color var(--ui-transition-fast)}.ui-select__clear:hover{color:var(--ui-text);background-color:var(--ui-bg-hover)}.ui-select__arrow{color:var(--ui-text-muted);transition:transform var(--ui-transition-fast)}.ui-select__arrow--open{transform:rotate(180deg)}.ui-select__dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;margin-top:var(--ui-spacing-xs);background-color:var(--ui-dropdown-bg, var(--ui-bg));border:1px solid var(--ui-dropdown-border, var(--ui-border));border-radius:var(--ui-dropdown-radius, var(--ui-radius-md));box-shadow:var(--ui-dropdown-shadow, var(--ui-shadow-lg));overflow:hidden;display:none;opacity:0;transform:translateY(-8px);transition:opacity var(--ui-transition-fast),transform var(--ui-transition-fast)}.ui-select__dropdown--open{display:block;opacity:1;transform:translateY(0)}.ui-select__input{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;padding:0;text-align:left;text-overflow:ellipsis;cursor:pointer}.ui-select__input::placeholder{color:var(--ui-text-muted)}.ui-select__input:focus{cursor:text}.ui-select__input:disabled{cursor:not-allowed}.ui-select__create{display:flex;align-items:center;gap:var(--ui-spacing-sm);padding:var(--ui-spacing-sm) var(--ui-spacing-md);font-size:var(--ui-font-sm);color:var(--ui-primary);cursor:pointer;border-top:1px solid var(--ui-border);transition:background-color var(--ui-transition-fast)}.ui-select__create:hover{background-color:var(--ui-bg-hover)}.ui-select__options{max-height:var(--ui-dropdown-max-height, 300px);overflow-y:auto}.ui-select__empty{padding:var(--ui-spacing-md);text-align:center;color:var(--ui-text-muted);font-size:var(--ui-font-sm)}.ui-select-wrapper--error .ui-select__trigger{border-color:var(--ui-danger)}.ui-select-wrapper--error .ui-select__trigger:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-danger) 20%,transparent)}.ui-select__error{font-size:var(--ui-font-sm);color:var(--ui-danger)}.ui-select__hint{font-size:var(--ui-font-sm);color:var(--ui-text-muted)}\n"] }]
|
|
1272
|
+
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], creatable: [{ type: i0.Input, args: [{ isSignal: true, alias: "creatable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], created: [{ type: i0.Output, args: ["created"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }], triggerRef: [{
|
|
1273
1273
|
type: ViewChild,
|
|
1274
1274
|
args: ['triggerRef', { static: true }]
|
|
1275
1275
|
}], dropdownRef: [{
|
|
1276
1276
|
type: ViewChild,
|
|
1277
1277
|
args: ['dropdownRef', { static: true }]
|
|
1278
|
+
}], searchInputRef: [{
|
|
1279
|
+
type: ViewChild,
|
|
1280
|
+
args: ['searchInput']
|
|
1278
1281
|
}], onDocumentClick: [{
|
|
1279
1282
|
type: HostListener,
|
|
1280
1283
|
args: ['document:click', ['$event']]
|
|
@@ -2349,6 +2352,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
2349
2352
|
args: [{ selector: 'ui-tabs', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-tabs\" [class]=\"tabsClasses()\">\n <div\n #tabList\n class=\"ui-tabs__list\"\n role=\"tablist\"\n [attr.aria-label]=\"ariaLabel()\"\n >\n @for (tab of tabs(); track tab.id() || $index; let i = $index) {\n <button\n #tabButton\n type=\"button\"\n class=\"ui-tabs__tab\"\n role=\"tab\"\n [class.ui-tabs__tab--active]=\"isActive(tab, i)\"\n [class.ui-tabs__tab--disabled]=\"tab.disabled()\"\n [attr.aria-selected]=\"isActive(tab, i)\"\n [attr.aria-controls]=\"'panel-' + (tab.id() || i)\"\n [attr.tabindex]=\"isActive(tab, i) ? 0 : -1\"\n [disabled]=\"tab.disabled()\"\n (click)=\"selectTab(tab, i)\"\n (keydown)=\"handleKeyDown($event, i)\"\n >\n @if (tab.iconTemplate()) {\n <span class=\"ui-tabs__tab-icon\">\n <ng-container *ngTemplateOutlet=\"tab.iconTemplate()!\" />\n </span>\n }\n {{ tab.label() }}\n </button>\n }\n @if (variant() === 'underline') {\n <span\n class=\"ui-tabs__indicator\"\n [style.left.px]=\"indicatorLeft()\"\n [style.width.px]=\"indicatorWidth()\"\n ></span>\n }\n </div>\n <div class=\"ui-tabs__panels\">\n <ng-content />\n </div>\n</div>\n", styles: [":host{display:block}.ui-tabs__list{display:flex;position:relative;gap:var(--ui-spacing-xs)}.ui-tabs__tab{display:inline-flex;align-items:center;gap:var(--ui-spacing-xs);padding:.5rem 1rem;border:none;background:transparent;color:var(--ui-text-muted);font-weight:500;cursor:pointer;transition:all var(--ui-transition-fast);white-space:nowrap}.ui-tabs__tab:hover:not(:disabled){color:var(--ui-text)}.ui-tabs__tab:focus-visible{outline:2px solid var(--ui-primary);outline-offset:2px;border-radius:var(--ui-radius-sm)}.ui-tabs__tab--active{color:var(--ui-primary)}.ui-tabs__tab--disabled{opacity:.5;cursor:not-allowed}.ui-tabs__tab-icon{display:flex;align-items:center;justify-content:center}.ui-tabs__panels{margin-top:var(--ui-spacing-md)}.ui-tabs--default .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--default .ui-tabs__tab{margin-bottom:-1px;border-bottom:2px solid transparent;border-radius:var(--ui-radius-sm) var(--ui-radius-sm) 0 0}.ui-tabs--default .ui-tabs__tab--active{border-bottom-color:var(--ui-primary)}.ui-tabs--pills .ui-tabs__list{background-color:var(--ui-bg-tertiary);padding:3px;border-radius:var(--ui-radius-md);gap:2px}.ui-tabs--pills .ui-tabs__tab{border-radius:var(--ui-radius-sm)}.ui-tabs--pills .ui-tabs__tab--active{background-color:var(--ui-bg);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}.ui-tabs--underline .ui-tabs__list{border-bottom:1px solid var(--ui-border)}.ui-tabs--underline .ui-tabs__tab{padding-bottom:.75rem}.ui-tabs--underline .ui-tabs__indicator{position:absolute;bottom:0;height:2px;background-color:var(--ui-primary);transition:left var(--ui-transition-normal),width var(--ui-transition-normal)}.ui-tabs--sm .ui-tabs__tab{padding:.375rem .75rem;font-size:var(--ui-font-sm)}.ui-tabs--md .ui-tabs__tab{padding:.5rem 1rem;font-size:var(--ui-font-sm)}.ui-tabs--lg .ui-tabs__tab{padding:.625rem 1.25rem;font-size:var(--ui-font-md)}.ui-tabs--sm.ui-tabs--underline .ui-tabs__tab{padding-bottom:.5rem}.ui-tabs--lg.ui-tabs--underline .ui-tabs__tab{padding-bottom:.875rem}\n"] }]
|
|
2350
2353
|
}], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }] } });
|
|
2351
2354
|
|
|
2355
|
+
class AccordionHeaderDirective {
|
|
2356
|
+
templateRef = inject(TemplateRef);
|
|
2357
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2358
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: AccordionHeaderDirective, isStandalone: true, selector: "[uiAccordionHeader]", ngImport: i0 });
|
|
2359
|
+
}
|
|
2360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionHeaderDirective, decorators: [{
|
|
2361
|
+
type: Directive,
|
|
2362
|
+
args: [{
|
|
2363
|
+
selector: '[uiAccordionHeader]',
|
|
2364
|
+
standalone: true,
|
|
2365
|
+
}]
|
|
2366
|
+
}] });
|
|
2367
|
+
|
|
2368
|
+
class AccordionItemComponent {
|
|
2369
|
+
header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
|
|
2370
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2371
|
+
expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
2372
|
+
headerDirective = contentChild(AccordionHeaderDirective, ...(ngDevMode ? [{ debugName: "headerDirective" }] : []));
|
|
2373
|
+
/** @internal */
|
|
2374
|
+
_index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
|
|
2375
|
+
_parent = null;
|
|
2376
|
+
isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
|
|
2377
|
+
headerTemplate = computed(() => {
|
|
2378
|
+
return this.headerDirective()?.templateRef ?? null;
|
|
2379
|
+
}, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
|
|
2380
|
+
/** @internal */
|
|
2381
|
+
_setParent(parent, index) {
|
|
2382
|
+
this._parent = parent;
|
|
2383
|
+
this._index.set(index);
|
|
2384
|
+
if (this.expanded()) {
|
|
2385
|
+
this.isExpanded.set(true);
|
|
2386
|
+
}
|
|
2387
|
+
}
|
|
2388
|
+
toggle() {
|
|
2389
|
+
if (this.disabled())
|
|
2390
|
+
return;
|
|
2391
|
+
if (this.isExpanded()) {
|
|
2392
|
+
this.collapse();
|
|
2393
|
+
}
|
|
2394
|
+
else {
|
|
2395
|
+
this.expand();
|
|
2396
|
+
}
|
|
2397
|
+
}
|
|
2398
|
+
expand() {
|
|
2399
|
+
if (this.disabled())
|
|
2400
|
+
return;
|
|
2401
|
+
this.isExpanded.set(true);
|
|
2402
|
+
this._parent?._onItemToggled(this);
|
|
2403
|
+
}
|
|
2404
|
+
collapse() {
|
|
2405
|
+
this.isExpanded.set(false);
|
|
2406
|
+
}
|
|
2407
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2408
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AccordionItemComponent, isStandalone: true, selector: "ui-accordion-item", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerDirective", first: true, predicate: AccordionHeaderDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"ui-accordion-item\"\n [class.ui-accordion-item--expanded]=\"isExpanded()\"\n [class.ui-accordion-item--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"ui-accordion-item__header\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"'accordion-panel-' + _index()\"\n >\n @if (headerTemplate()) {\n <span class=\"ui-accordion-item__title\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()!\" />\n </span>\n } @else {\n <span class=\"ui-accordion-item__title\">{{ header() }}</span>\n }\n <span\n class=\"ui-accordion-item__icon\"\n [class.ui-accordion-item__icon--rotated]=\"isExpanded()\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n </button>\n <div\n class=\"ui-accordion-item__panel\"\n [attr.id]=\"'accordion-panel-' + _index()\"\n role=\"region\"\n >\n <div class=\"ui-accordion-item__content\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.ui-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ui-spacing-md);border:none;background:transparent;color:var(--ui-text);font-size:var(--ui-font-sm);font-weight:500;cursor:pointer;transition:background-color var(--ui-transition-fast);text-align:left}.ui-accordion-item__header:hover:not(:disabled){background-color:var(--ui-bg-hover)}.ui-accordion-item__header:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px;border-radius:var(--ui-radius-sm)}.ui-accordion-item__header:disabled{color:var(--ui-text-disabled);cursor:not-allowed}.ui-accordion-item__title{flex:1;min-width:0}.ui-accordion-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--ui-spacing-sm);color:var(--ui-text-muted);transition:transform var(--ui-transition-normal)}.ui-accordion-item__icon--rotated{transform:rotate(180deg)}.ui-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ui-transition-normal)}.ui-accordion-item--expanded .ui-accordion-item__panel{grid-template-rows:1fr}.ui-accordion-item__content{overflow:hidden}.ui-accordion-item__content>:first-child{padding:0 var(--ui-spacing-md) var(--ui-spacing-md)}.ui-accordion-item--disabled{opacity:.6}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2409
|
+
}
|
|
2410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionItemComponent, decorators: [{
|
|
2411
|
+
type: Component,
|
|
2412
|
+
args: [{ selector: 'ui-accordion-item', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ui-accordion-item\"\n [class.ui-accordion-item--expanded]=\"isExpanded()\"\n [class.ui-accordion-item--disabled]=\"disabled()\"\n>\n <button\n type=\"button\"\n class=\"ui-accordion-item__header\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"isExpanded()\"\n [attr.aria-controls]=\"'accordion-panel-' + _index()\"\n >\n @if (headerTemplate()) {\n <span class=\"ui-accordion-item__title\">\n <ng-container *ngTemplateOutlet=\"headerTemplate()!\" />\n </span>\n } @else {\n <span class=\"ui-accordion-item__title\">{{ header() }}</span>\n }\n <span\n class=\"ui-accordion-item__icon\"\n [class.ui-accordion-item__icon--rotated]=\"isExpanded()\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n </button>\n <div\n class=\"ui-accordion-item__panel\"\n [attr.id]=\"'accordion-panel-' + _index()\"\n role=\"region\"\n >\n <div class=\"ui-accordion-item__content\">\n <ng-content />\n </div>\n </div>\n</div>\n", styles: [":host{display:block}.ui-accordion-item__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--ui-spacing-md);border:none;background:transparent;color:var(--ui-text);font-size:var(--ui-font-sm);font-weight:500;cursor:pointer;transition:background-color var(--ui-transition-fast);text-align:left}.ui-accordion-item__header:hover:not(:disabled){background-color:var(--ui-bg-hover)}.ui-accordion-item__header:focus-visible{outline:2px solid var(--ui-primary);outline-offset:-2px;border-radius:var(--ui-radius-sm)}.ui-accordion-item__header:disabled{color:var(--ui-text-disabled);cursor:not-allowed}.ui-accordion-item__title{flex:1;min-width:0}.ui-accordion-item__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:var(--ui-spacing-sm);color:var(--ui-text-muted);transition:transform var(--ui-transition-normal)}.ui-accordion-item__icon--rotated{transform:rotate(180deg)}.ui-accordion-item__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ui-transition-normal)}.ui-accordion-item--expanded .ui-accordion-item__panel{grid-template-rows:1fr}.ui-accordion-item__content{overflow:hidden}.ui-accordion-item__content>:first-child{padding:0 var(--ui-spacing-md) var(--ui-spacing-md)}.ui-accordion-item--disabled{opacity:.6}\n"] }]
|
|
2413
|
+
}], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], headerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AccordionHeaderDirective), { isSignal: true }] }] } });
|
|
2414
|
+
|
|
2415
|
+
class AccordionComponent {
|
|
2416
|
+
multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
|
|
2417
|
+
variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
2418
|
+
items = contentChildren(AccordionItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
2419
|
+
accordionClasses = computed(() => {
|
|
2420
|
+
return `ui-accordion--${this.variant()}`;
|
|
2421
|
+
}, ...(ngDevMode ? [{ debugName: "accordionClasses" }] : []));
|
|
2422
|
+
ngAfterContentInit() {
|
|
2423
|
+
this._setupItems();
|
|
2424
|
+
}
|
|
2425
|
+
_setupItems() {
|
|
2426
|
+
const itemList = this.items();
|
|
2427
|
+
itemList.forEach((item, index) => {
|
|
2428
|
+
item._setParent(this, index);
|
|
2429
|
+
});
|
|
2430
|
+
}
|
|
2431
|
+
/** @internal */
|
|
2432
|
+
_onItemToggled(expandedItem) {
|
|
2433
|
+
if (this.multi())
|
|
2434
|
+
return;
|
|
2435
|
+
const itemList = this.items();
|
|
2436
|
+
for (const item of itemList) {
|
|
2437
|
+
if (item !== expandedItem && item.isExpanded()) {
|
|
2438
|
+
item.collapse();
|
|
2439
|
+
}
|
|
2440
|
+
}
|
|
2441
|
+
}
|
|
2442
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2443
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: AccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "items", predicate: AccordionItemComponent, isSignal: true }], ngImport: i0, template: "<div class=\"ui-accordion\" [class]=\"accordionClasses()\">\n <ng-content />\n</div>\n", styles: [":host{display:block}.ui-accordion{width:100%}.ui-accordion--default{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}.ui-accordion--default ::ng-deep>ui-accordion-item+ui-accordion-item{border-top:1px solid var(--ui-border)}.ui-accordion--bordered{border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background-color:var(--ui-bg-secondary);overflow:hidden}.ui-accordion--bordered ::ng-deep>ui-accordion-item+ui-accordion-item{border-top:1px solid var(--ui-border)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__header{background-color:var(--ui-bg-secondary)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__header:hover:not(:disabled){background-color:var(--ui-bg-hover)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__content>:first-child{background-color:var(--ui-bg);border-radius:var(--ui-radius-sm);margin:0 var(--ui-spacing-sm) var(--ui-spacing-sm);padding:var(--ui-spacing-md)}.ui-accordion--separated{display:flex;flex-direction:column;gap:var(--ui-spacing-sm)}.ui-accordion--separated ::ng-deep>ui-accordion-item{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2444
|
+
}
|
|
2445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
2446
|
+
type: Component,
|
|
2447
|
+
args: [{ selector: 'ui-accordion', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-accordion\" [class]=\"accordionClasses()\">\n <ng-content />\n</div>\n", styles: [":host{display:block}.ui-accordion{width:100%}.ui-accordion--default{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}.ui-accordion--default ::ng-deep>ui-accordion-item+ui-accordion-item{border-top:1px solid var(--ui-border)}.ui-accordion--bordered{border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);background-color:var(--ui-bg-secondary);overflow:hidden}.ui-accordion--bordered ::ng-deep>ui-accordion-item+ui-accordion-item{border-top:1px solid var(--ui-border)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__header{background-color:var(--ui-bg-secondary)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__header:hover:not(:disabled){background-color:var(--ui-bg-hover)}.ui-accordion--bordered ::ng-deep>ui-accordion-item .ui-accordion-item__content>:first-child{background-color:var(--ui-bg);border-radius:var(--ui-radius-sm);margin:0 var(--ui-spacing-sm) var(--ui-spacing-sm);padding:var(--ui-spacing-md)}.ui-accordion--separated{display:flex;flex-direction:column;gap:var(--ui-spacing-sm)}.ui-accordion--separated ::ng-deep>ui-accordion-item{border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);overflow:hidden}\n"] }]
|
|
2448
|
+
}], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AccordionItemComponent), { isSignal: true }] }] } });
|
|
2449
|
+
|
|
2352
2450
|
class PaginationComponent {
|
|
2353
2451
|
total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
|
|
2354
2452
|
pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
|
|
@@ -2653,5 +2751,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
2653
2751
|
* Generated bundle index. Do not edit.
|
|
2654
2752
|
*/
|
|
2655
2753
|
|
|
2656
|
-
export { AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CheckboxComponent, CircularProgressComponent, ContentComponent, DIALOG_DATA, DIALOG_REF, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, FileChooserComponent, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SpinnerComponent, SwitchComponent, TabComponent, TabIconDirective, TableComponent, TabsComponent, TextareaComponent, ToastRef, ToastService, TooltipDirective };
|
|
2754
|
+
export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CheckboxComponent, CircularProgressComponent, ContentComponent, DIALOG_DATA, DIALOG_REF, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, FileChooserComponent, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SpinnerComponent, SwitchComponent, TabComponent, TabIconDirective, TableComponent, TabsComponent, TextareaComponent, ToastRef, ToastService, TooltipDirective };
|
|
2657
2755
|
//# sourceMappingURL=m1z23r-ngx-ui.mjs.map
|