nath-angular-ui 0.8.5 → 0.8.7
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.
|
@@ -210,11 +210,11 @@ class NathAutocomplete {
|
|
|
210
210
|
this.isOpen.set(true);
|
|
211
211
|
}
|
|
212
212
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
213
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathAutocomplete, isStandalone: true, selector: "nath-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, valueWith: { classPropertyName: "valueWith", publicName: "valueWith", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, forceDisabled: { classPropertyName: "forceDisabled", publicName: "forceDisabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", debouncedQueryChange: "debouncedQueryChange", cleared: "cleared", unselected: "unselected", query: "queryChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n (click)=\"inputField?.focus()\"\r\n (keydown.enter)=\"inputField?.focus()\"\r\n class=\"input nath-autocomplete-theme ac-input-container\"\r\n [ngClass]=\"{\r\n 'ac-has-clear-btn': showClearButton(),\r\n 'ac-borderless-container': borderless(),\r\n 'ac-no-right-radius': dropdown()\r\n }\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n>\r\n @if (multiple()) {\r\n @for (item of selectedItems(); track $index) {\r\n <div class=\"ac-selected-tag\">\r\n <span [ngClass]=\"{'ac-tag-disabled': isDisabled()}\">\r\n {{ displayFn()(item) }}\r\n </span>\r\n\r\n <button\r\n type=\"button\"\r\n (click)=\"removeItem(item, $event)\"\r\n class=\"ac-remove-tag-btn\"\r\n [disabled]=\"isDisabled()\"\r\n >\r\n <svg\r\n class=\"ac-svg-icon\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2.5\"\r\n d=\"M6 18L18 6M6 6l12 12\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n }\r\n\r\n <input\r\n #inputField\r\n type=\"text\"\r\n [id]=\"inputId()\"\r\n [placeholder]=\"selectedItems().length === 0 || !multiple() ? placeholder() : ''\"\r\n [value]=\"inputValue()\"\r\n [disabled]=\"isDisabled()\"\r\n (input)=\"onInputChange($event)\"\r\n (keydown)=\"onKeyDown($event)\"\r\n class=\"ac-native-input inner-input\"\r\n [ngClass]=\"{ 'ac-borderless-input': borderless() }\"\r\n />\r\n\r\n @if (showClearButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"ac-clear-button\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"clear()\"\r\n >\r\n <svg lucideX [size]=\"16\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen() && items().length > 0\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayPanelClass]=\"'nath-autocomplete-theme'\"\r\n (backdropClick)=\"isOpen.set(false)\"\r\n>\r\n <div\r\n class=\"ac-dropdown-overlay\"\r\n [style.width.px]=\"elementRef.nativeElement?.getBoundingClientRect()?.width\"\r\n >\r\n @for (item of items(); track $index) {\r\n <div\r\n (click)=\"selectItem(item)\"\r\n (keydown.enter)=\"selectItem(item)\"\r\n class=\"ac-dropdown-item\"\r\n [class.is-active]=\"activeTrackedIndex() === $index\"\r\n >\r\n @if (!itemTemplate()) {\r\n {{ displayFn()(item) }}\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: item }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n }\r\n @if (items().length === 0) {\r\n <div class=\"ac-dropdown-item\">\r\n {{ emptyMessage() }}\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n@if (dropdown()) {\r\n <button\r\n type=\"button\"\r\n class=\"button-secondary ac-dropdown-trigger-btn\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"openDropdown()\"\r\n >\r\n <svg lucideChevronDown [size]=\"16\" />\r\n </button>\r\n}\r\n", styles: ["nath-autocomplete{display:flex;width:100%}nath-autocomplete,.nath-autocomplete-theme{--nath-autocomplete-bg: #ffffff;--nath-autocomplete-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-autocomplete-radius: .375rem;--nath-autocomplete-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-autocomplete-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-autocomplete-input-padding: .25rem;--nath-autocomplete-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-autocomplete-tag-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-tag-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-bg: #ffffff;--nath-autocomplete-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-autocomplete-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-autocomplete-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-autocomplete-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-autocomplete-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-autocomplete-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-autocomplete-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-autocomplete,.dark .nath-autocomplete-theme{--nath-autocomplete-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-autocomplete-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-autocomplete-tag-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-tag-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-button-hover-bg: var(--color-zinc-700, oklch(37% .013 285.805));--nath-autocomplete-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-autocomplete-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}.ac-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative;flex-grow:1;padding:var(--nath-autocomplete-input-padding);background-color:var(--nath-autocomplete-bg);border:1px solid var(--nath-autocomplete-border);border-radius:var(--nath-autocomplete-radius);box-shadow:var(--nath-autocomplete-shadow);transition:border-color .2s,box-shadow .2s}.ac-input-container:focus-within{outline:none;border-color:var(--nath-autocomplete-ring-color);box-shadow:0 0 0 2px var(--nath-autocomplete-ring-color)}.ac-has-clear-btn{padding-right:2.5rem!important}.ac-borderless-container{border:0!important;box-shadow:none!important}.ac-borderless-container:focus-within{outline:none!important}.ac-no-right-radius{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.ac-selected-tag{display:inline-flex;align-items:center;gap:.25rem;background-color:var(--nath-autocomplete-tag-bg);color:var(--nath-autocomplete-tag-text);font-weight:500;padding:.25rem .375rem .25rem .625rem;border-radius:.375rem}.ac-tag-disabled{opacity:.5;cursor:not-allowed}.ac-remove-tag-btn{width:1rem;height:1rem;padding:0!important;border:none;box-shadow:none!important;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--nath-autocomplete-text-muted);transition:background-color .15s,color .15s;cursor:pointer}.ac-remove-tag-btn:disabled{cursor:not-allowed}.ac-remove-tag-btn:not(:disabled):hover{background-color:var(--nath-autocomplete-button-hover-bg);color:var(--nath-autocomplete-text-main)}.ac-clear-button{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-autocomplete-text-muted)}.ac-svg-icon{width:.75rem;height:.75rem;display:block}.ac-native-input{flex:1 1 0%;min-width:120px;border:none;background:transparent;color:var(--nath-autocomplete-text-main)}.ac-native-input::placeholder{color:var(--nath-autocomplete-placeholder)}.ac-native-input:focus{outline:none}.ac-borderless-input{padding-left:0!important;padding-right:0!important}.ac-dropdown-overlay{max-height:15rem;overflow-y:auto;background-color:var(--nath-autocomplete-overlay-bg);border:1px solid var(--nath-autocomplete-overlay-border);border-radius:.375rem;box-shadow:var(--nath-autocomplete-overlay-shadow);padding:.25rem 0;z-index:50;display:flex;flex-direction:column;box-sizing:border-box}.ac-dropdown-item{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:center;transition:background-color .15s,color .15s;color:var(--nath-autocomplete-text-main)}.ac-dropdown-item:hover{background-color:var(--nath-autocomplete-hover-bg);color:var(--nath-autocomplete-hover-text)}.ac-dropdown-item.is-active{background-color:var(--nath-autocomplete-selected-bg)!important;color:var(--nath-autocomplete-selected-text)!important}.ac-dropdown-trigger-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
213
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathAutocomplete, isStandalone: true, selector: "nath-autocomplete", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, valueWith: { classPropertyName: "valueWith", publicName: "valueWith", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, minQueryLength: { classPropertyName: "minQueryLength", publicName: "minQueryLength", isSignal: true, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, forceDisabled: { classPropertyName: "forceDisabled", publicName: "forceDisabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", debouncedQueryChange: "debouncedQueryChange", cleared: "cleared", unselected: "unselected", query: "queryChange" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n (click)=\"inputField?.focus()\"\r\n (keydown.enter)=\"inputField?.focus()\"\r\n class=\"input nath-autocomplete-theme ac-input-container\"\r\n [ngClass]=\"{\r\n 'ac-has-clear-btn': showClearButton(),\r\n 'ac-borderless-container': borderless(),\r\n 'ac-no-right-radius': dropdown()\r\n }\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n>\r\n @if (multiple()) {\r\n @for (item of selectedItems(); track $index) {\r\n <div class=\"ac-selected-tag\">\r\n <span [ngClass]=\"{'ac-tag-disabled': isDisabled()}\">\r\n {{ displayFn()(item) }}\r\n </span>\r\n\r\n <button\r\n type=\"button\"\r\n (click)=\"removeItem(item, $event)\"\r\n class=\"ac-remove-tag-btn\"\r\n [disabled]=\"isDisabled()\"\r\n >\r\n <svg\r\n class=\"ac-svg-icon\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2.5\"\r\n d=\"M6 18L18 6M6 6l12 12\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n }\r\n\r\n <input\r\n #inputField\r\n type=\"text\"\r\n [id]=\"inputId()\"\r\n [placeholder]=\"selectedItems().length === 0 || !multiple() ? placeholder() : ''\"\r\n [value]=\"inputValue()\"\r\n [disabled]=\"isDisabled()\"\r\n (input)=\"onInputChange($event)\"\r\n (keydown)=\"onKeyDown($event)\"\r\n class=\"ac-native-input inner-input\"\r\n [ngClass]=\"{ 'ac-borderless-input': borderless() }\"\r\n />\r\n\r\n @if (showClearButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"ac-clear-button\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"clear()\"\r\n >\r\n <svg lucideX [size]=\"16\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen() && items().length > 0\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayPanelClass]=\"'nath-autocomplete-theme'\"\r\n (backdropClick)=\"isOpen.set(false)\"\r\n>\r\n <div\r\n class=\"ac-dropdown-overlay\"\r\n [style.width.px]=\"elementRef.nativeElement?.getBoundingClientRect()?.width\"\r\n >\r\n @for (item of items(); track $index) {\r\n <div\r\n (click)=\"selectItem(item)\"\r\n (keydown.enter)=\"selectItem(item)\"\r\n class=\"ac-dropdown-item\"\r\n [class.is-active]=\"activeTrackedIndex() === $index\"\r\n >\r\n @if (!itemTemplate()) {\r\n {{ displayFn()(item) }}\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: item }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n }\r\n @if (items().length === 0) {\r\n <div class=\"ac-dropdown-item\">\r\n {{ emptyMessage() }}\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n@if (dropdown()) {\r\n <button\r\n type=\"button\"\r\n class=\"button-secondary ac-dropdown-trigger-btn\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"openDropdown()\"\r\n >\r\n <svg lucideChevronDown [size]=\"16\" />\r\n </button>\r\n}\r\n", styles: ["nath-autocomplete{display:flex;width:100%}nath-autocomplete,.nath-autocomplete-theme{--nath-autocomplete-bg: #ffffff;--nath-autocomplete-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-autocomplete-radius: .375rem;--nath-autocomplete-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-autocomplete-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-autocomplete-input-padding: .25rem;--nath-autocomplete-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-autocomplete-tag-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-tag-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-bg: #ffffff;--nath-autocomplete-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-autocomplete-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-autocomplete-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-autocomplete-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-autocomplete-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-autocomplete-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-autocomplete-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-autocomplete,.dark .nath-autocomplete-theme{--nath-autocomplete-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-autocomplete-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-autocomplete-tag-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-tag-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-button-hover-bg: var(--color-zinc-700, oklch(37% .013 285.805));--nath-autocomplete-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-autocomplete-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}.ac-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative;flex-grow:1;padding:var(--nath-autocomplete-input-padding);background-color:var(--nath-autocomplete-bg);border:1px solid var(--nath-autocomplete-border);border-radius:var(--nath-autocomplete-radius);box-shadow:var(--nath-autocomplete-shadow);transition:border-color .2s,box-shadow .2s}.ac-input-container:focus-within{outline:none;border-color:var(--nath-autocomplete-ring-color);box-shadow:0 0 0 2px var(--nath-autocomplete-ring-color)}.ac-has-clear-btn{padding-right:2.5rem!important}.ac-borderless-container{border:0!important;box-shadow:none!important}.ac-borderless-container:focus-within{outline:none!important}.ac-no-right-radius{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.ac-selected-tag{display:inline-flex;align-items:center;gap:.25rem;background-color:var(--nath-autocomplete-tag-bg);color:var(--nath-autocomplete-tag-text);font-weight:500;padding:.25rem .375rem .25rem .625rem;border-radius:.375rem}.ac-tag-disabled{opacity:.5;cursor:not-allowed}.ac-remove-tag-btn{width:1rem;height:1rem;padding:0!important;border:none;box-shadow:none!important;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--nath-autocomplete-text-muted);transition:background-color .15s,color .15s;cursor:pointer}.ac-remove-tag-btn:disabled{cursor:not-allowed}.ac-remove-tag-btn:not(:disabled):hover{background-color:var(--nath-autocomplete-button-hover-bg);color:var(--nath-autocomplete-text-main)}.ac-clear-button{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-autocomplete-text-muted)}.ac-svg-icon{width:.75rem;height:.75rem;display:block}.ac-native-input{flex:1 1 0%;min-width:120px;border:none;background:transparent;color:var(--nath-autocomplete-text-main);box-shadow:none}.ac-native-input::placeholder{color:var(--nath-autocomplete-placeholder)}.ac-native-input:focus{outline:none}.ac-borderless-input{padding-left:0!important;padding-right:0!important}.ac-dropdown-overlay{max-height:15rem;overflow-y:auto;background-color:var(--nath-autocomplete-overlay-bg);border:1px solid var(--nath-autocomplete-overlay-border);border-radius:.375rem;box-shadow:var(--nath-autocomplete-overlay-shadow);padding:.25rem 0;z-index:50;display:flex;flex-direction:column;box-sizing:border-box}.ac-dropdown-item{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:center;transition:background-color .15s,color .15s;color:var(--nath-autocomplete-text-main)}.ac-dropdown-item:hover{background-color:var(--nath-autocomplete-hover-bg);color:var(--nath-autocomplete-hover-text)}.ac-dropdown-item.is-active{background-color:var(--nath-autocomplete-selected-bg)!important;color:var(--nath-autocomplete-selected-text)!important}.ac-dropdown-trigger-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
214
214
|
}
|
|
215
215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathAutocomplete, decorators: [{
|
|
216
216
|
type: Component,
|
|
217
|
-
args: [{ selector: 'nath-autocomplete', imports: [CommonModule, OverlayModule, LucideX, LucideChevronDown], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n (click)=\"inputField?.focus()\"\r\n (keydown.enter)=\"inputField?.focus()\"\r\n class=\"input nath-autocomplete-theme ac-input-container\"\r\n [ngClass]=\"{\r\n 'ac-has-clear-btn': showClearButton(),\r\n 'ac-borderless-container': borderless(),\r\n 'ac-no-right-radius': dropdown()\r\n }\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n>\r\n @if (multiple()) {\r\n @for (item of selectedItems(); track $index) {\r\n <div class=\"ac-selected-tag\">\r\n <span [ngClass]=\"{'ac-tag-disabled': isDisabled()}\">\r\n {{ displayFn()(item) }}\r\n </span>\r\n\r\n <button\r\n type=\"button\"\r\n (click)=\"removeItem(item, $event)\"\r\n class=\"ac-remove-tag-btn\"\r\n [disabled]=\"isDisabled()\"\r\n >\r\n <svg\r\n class=\"ac-svg-icon\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2.5\"\r\n d=\"M6 18L18 6M6 6l12 12\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n }\r\n\r\n <input\r\n #inputField\r\n type=\"text\"\r\n [id]=\"inputId()\"\r\n [placeholder]=\"selectedItems().length === 0 || !multiple() ? placeholder() : ''\"\r\n [value]=\"inputValue()\"\r\n [disabled]=\"isDisabled()\"\r\n (input)=\"onInputChange($event)\"\r\n (keydown)=\"onKeyDown($event)\"\r\n class=\"ac-native-input inner-input\"\r\n [ngClass]=\"{ 'ac-borderless-input': borderless() }\"\r\n />\r\n\r\n @if (showClearButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"ac-clear-button\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"clear()\"\r\n >\r\n <svg lucideX [size]=\"16\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen() && items().length > 0\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayPanelClass]=\"'nath-autocomplete-theme'\"\r\n (backdropClick)=\"isOpen.set(false)\"\r\n>\r\n <div\r\n class=\"ac-dropdown-overlay\"\r\n [style.width.px]=\"elementRef.nativeElement?.getBoundingClientRect()?.width\"\r\n >\r\n @for (item of items(); track $index) {\r\n <div\r\n (click)=\"selectItem(item)\"\r\n (keydown.enter)=\"selectItem(item)\"\r\n class=\"ac-dropdown-item\"\r\n [class.is-active]=\"activeTrackedIndex() === $index\"\r\n >\r\n @if (!itemTemplate()) {\r\n {{ displayFn()(item) }}\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: item }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n }\r\n @if (items().length === 0) {\r\n <div class=\"ac-dropdown-item\">\r\n {{ emptyMessage() }}\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n@if (dropdown()) {\r\n <button\r\n type=\"button\"\r\n class=\"button-secondary ac-dropdown-trigger-btn\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"openDropdown()\"\r\n >\r\n <svg lucideChevronDown [size]=\"16\" />\r\n </button>\r\n}\r\n", styles: ["nath-autocomplete{display:flex;width:100%}nath-autocomplete,.nath-autocomplete-theme{--nath-autocomplete-bg: #ffffff;--nath-autocomplete-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-autocomplete-radius: .375rem;--nath-autocomplete-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-autocomplete-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-autocomplete-input-padding: .25rem;--nath-autocomplete-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-autocomplete-tag-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-tag-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-bg: #ffffff;--nath-autocomplete-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-autocomplete-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-autocomplete-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-autocomplete-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-autocomplete-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-autocomplete-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-autocomplete-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-autocomplete,.dark .nath-autocomplete-theme{--nath-autocomplete-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-autocomplete-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-autocomplete-tag-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-tag-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-button-hover-bg: var(--color-zinc-700, oklch(37% .013 285.805));--nath-autocomplete-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-autocomplete-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}.ac-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative;flex-grow:1;padding:var(--nath-autocomplete-input-padding);background-color:var(--nath-autocomplete-bg);border:1px solid var(--nath-autocomplete-border);border-radius:var(--nath-autocomplete-radius);box-shadow:var(--nath-autocomplete-shadow);transition:border-color .2s,box-shadow .2s}.ac-input-container:focus-within{outline:none;border-color:var(--nath-autocomplete-ring-color);box-shadow:0 0 0 2px var(--nath-autocomplete-ring-color)}.ac-has-clear-btn{padding-right:2.5rem!important}.ac-borderless-container{border:0!important;box-shadow:none!important}.ac-borderless-container:focus-within{outline:none!important}.ac-no-right-radius{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.ac-selected-tag{display:inline-flex;align-items:center;gap:.25rem;background-color:var(--nath-autocomplete-tag-bg);color:var(--nath-autocomplete-tag-text);font-weight:500;padding:.25rem .375rem .25rem .625rem;border-radius:.375rem}.ac-tag-disabled{opacity:.5;cursor:not-allowed}.ac-remove-tag-btn{width:1rem;height:1rem;padding:0!important;border:none;box-shadow:none!important;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--nath-autocomplete-text-muted);transition:background-color .15s,color .15s;cursor:pointer}.ac-remove-tag-btn:disabled{cursor:not-allowed}.ac-remove-tag-btn:not(:disabled):hover{background-color:var(--nath-autocomplete-button-hover-bg);color:var(--nath-autocomplete-text-main)}.ac-clear-button{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-autocomplete-text-muted)}.ac-svg-icon{width:.75rem;height:.75rem;display:block}.ac-native-input{flex:1 1 0%;min-width:120px;border:none;background:transparent;color:var(--nath-autocomplete-text-main)}.ac-native-input::placeholder{color:var(--nath-autocomplete-placeholder)}.ac-native-input:focus{outline:none}.ac-borderless-input{padding-left:0!important;padding-right:0!important}.ac-dropdown-overlay{max-height:15rem;overflow-y:auto;background-color:var(--nath-autocomplete-overlay-bg);border:1px solid var(--nath-autocomplete-overlay-border);border-radius:.375rem;box-shadow:var(--nath-autocomplete-overlay-shadow);padding:.25rem 0;z-index:50;display:flex;flex-direction:column;box-sizing:border-box}.ac-dropdown-item{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:center;transition:background-color .15s,color .15s;color:var(--nath-autocomplete-text-main)}.ac-dropdown-item:hover{background-color:var(--nath-autocomplete-hover-bg);color:var(--nath-autocomplete-hover-text)}.ac-dropdown-item.is-active{background-color:var(--nath-autocomplete-selected-bg)!important;color:var(--nath-autocomplete-selected-text)!important}.ac-dropdown-trigger-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
|
|
217
|
+
args: [{ selector: 'nath-autocomplete', imports: [CommonModule, OverlayModule, LucideX, LucideChevronDown], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\r\n (click)=\"inputField?.focus()\"\r\n (keydown.enter)=\"inputField?.focus()\"\r\n class=\"input nath-autocomplete-theme ac-input-container\"\r\n [ngClass]=\"{\r\n 'ac-has-clear-btn': showClearButton(),\r\n 'ac-borderless-container': borderless(),\r\n 'ac-no-right-radius': dropdown()\r\n }\"\r\n cdkOverlayOrigin\r\n #origin=\"cdkOverlayOrigin\"\r\n>\r\n @if (multiple()) {\r\n @for (item of selectedItems(); track $index) {\r\n <div class=\"ac-selected-tag\">\r\n <span [ngClass]=\"{'ac-tag-disabled': isDisabled()}\">\r\n {{ displayFn()(item) }}\r\n </span>\r\n\r\n <button\r\n type=\"button\"\r\n (click)=\"removeItem(item, $event)\"\r\n class=\"ac-remove-tag-btn\"\r\n [disabled]=\"isDisabled()\"\r\n >\r\n <svg\r\n class=\"ac-svg-icon\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2.5\"\r\n d=\"M6 18L18 6M6 6l12 12\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n }\r\n\r\n <input\r\n #inputField\r\n type=\"text\"\r\n [id]=\"inputId()\"\r\n [placeholder]=\"selectedItems().length === 0 || !multiple() ? placeholder() : ''\"\r\n [value]=\"inputValue()\"\r\n [disabled]=\"isDisabled()\"\r\n (input)=\"onInputChange($event)\"\r\n (keydown)=\"onKeyDown($event)\"\r\n class=\"ac-native-input inner-input\"\r\n [ngClass]=\"{ 'ac-borderless-input': borderless() }\"\r\n />\r\n\r\n @if (showClearButton()) {\r\n <button\r\n type=\"button\"\r\n class=\"ac-clear-button\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"clear()\"\r\n >\r\n <svg lucideX [size]=\"16\" />\r\n </button>\r\n }\r\n</div>\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"origin\"\r\n [cdkConnectedOverlayOpen]=\"isOpen() && items().length > 0\"\r\n [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n [cdkConnectedOverlayPanelClass]=\"'nath-autocomplete-theme'\"\r\n (backdropClick)=\"isOpen.set(false)\"\r\n>\r\n <div\r\n class=\"ac-dropdown-overlay\"\r\n [style.width.px]=\"elementRef.nativeElement?.getBoundingClientRect()?.width\"\r\n >\r\n @for (item of items(); track $index) {\r\n <div\r\n (click)=\"selectItem(item)\"\r\n (keydown.enter)=\"selectItem(item)\"\r\n class=\"ac-dropdown-item\"\r\n [class.is-active]=\"activeTrackedIndex() === $index\"\r\n >\r\n @if (!itemTemplate()) {\r\n {{ displayFn()(item) }}\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"itemTemplate()!; context: { $implicit: item }\"\r\n ></ng-container>\r\n }\r\n </div>\r\n }\r\n @if (items().length === 0) {\r\n <div class=\"ac-dropdown-item\">\r\n {{ emptyMessage() }}\r\n </div>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n@if (dropdown()) {\r\n <button\r\n type=\"button\"\r\n class=\"button-secondary ac-dropdown-trigger-btn\"\r\n [disabled]=\"isDisabled()\"\r\n (click)=\"openDropdown()\"\r\n >\r\n <svg lucideChevronDown [size]=\"16\" />\r\n </button>\r\n}\r\n", styles: ["nath-autocomplete{display:flex;width:100%}nath-autocomplete,.nath-autocomplete-theme{--nath-autocomplete-bg: #ffffff;--nath-autocomplete-border: var(--color-zinc-300, oklch(87.1% .006 286.286));--nath-autocomplete-radius: .375rem;--nath-autocomplete-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-autocomplete-ring-color: var(--color-indigo-500, oklch(58.5% .233 277.117));--nath-autocomplete-input-padding: .25rem;--nath-autocomplete-placeholder: var(--color-gray-400, oklch(70.5% .015 286.067));--nath-autocomplete-tag-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-tag-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-button-hover-bg: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-bg: #ffffff;--nath-autocomplete-overlay-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-overlay-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-autocomplete-text-main: var(--color-gray-800, oklch(27.8% .033 256.848));--nath-autocomplete-text-muted: var(--color-gray-500, oklch(55.1% .027 264.364));--nath-autocomplete-hover-bg: var(--color-gray-100, oklch(96.7% .003 264.542));--nath-autocomplete-hover-text: var(--color-gray-900, oklch(21% .006 285.885));--nath-autocomplete-selected-bg: var(--color-indigo-50, oklch(96.2% .018 272.846));--nath-autocomplete-selected-text: var(--color-indigo-900, oklch(25.7% .09 270.891))}.dark nath-autocomplete,.dark .nath-autocomplete-theme{--nath-autocomplete-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-overlay-bg: var(--color-zinc-950, oklch(14.1% .005 285.823));--nath-autocomplete-overlay-border: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-autocomplete-text-main: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-autocomplete-placeholder: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-autocomplete-tag-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-tag-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-autocomplete-button-hover-bg: var(--color-zinc-700, oklch(37% .013 285.805));--nath-autocomplete-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-autocomplete-hover-text: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-autocomplete-selected-bg: var(--color-indigo-950, oklch(15.2% .06 273.111));--nath-autocomplete-selected-text: var(--color-indigo-100, oklch(92% .04 273.111))}.ac-input-container{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;position:relative;flex-grow:1;padding:var(--nath-autocomplete-input-padding);background-color:var(--nath-autocomplete-bg);border:1px solid var(--nath-autocomplete-border);border-radius:var(--nath-autocomplete-radius);box-shadow:var(--nath-autocomplete-shadow);transition:border-color .2s,box-shadow .2s}.ac-input-container:focus-within{outline:none;border-color:var(--nath-autocomplete-ring-color);box-shadow:0 0 0 2px var(--nath-autocomplete-ring-color)}.ac-has-clear-btn{padding-right:2.5rem!important}.ac-borderless-container{border:0!important;box-shadow:none!important}.ac-borderless-container:focus-within{outline:none!important}.ac-no-right-radius{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.ac-selected-tag{display:inline-flex;align-items:center;gap:.25rem;background-color:var(--nath-autocomplete-tag-bg);color:var(--nath-autocomplete-tag-text);font-weight:500;padding:.25rem .375rem .25rem .625rem;border-radius:.375rem}.ac-tag-disabled{opacity:.5;cursor:not-allowed}.ac-remove-tag-btn{width:1rem;height:1rem;padding:0!important;border:none;box-shadow:none!important;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--nath-autocomplete-text-muted);transition:background-color .15s,color .15s;cursor:pointer}.ac-remove-tag-btn:disabled{cursor:not-allowed}.ac-remove-tag-btn:not(:disabled):hover{background-color:var(--nath-autocomplete-button-hover-bg);color:var(--nath-autocomplete-text-main)}.ac-clear-button{position:absolute;right:.5rem;background:transparent;border:none;cursor:pointer;color:var(--nath-autocomplete-text-muted)}.ac-svg-icon{width:.75rem;height:.75rem;display:block}.ac-native-input{flex:1 1 0%;min-width:120px;border:none;background:transparent;color:var(--nath-autocomplete-text-main);box-shadow:none}.ac-native-input::placeholder{color:var(--nath-autocomplete-placeholder)}.ac-native-input:focus{outline:none}.ac-borderless-input{padding-left:0!important;padding-right:0!important}.ac-dropdown-overlay{max-height:15rem;overflow-y:auto;background-color:var(--nath-autocomplete-overlay-bg);border:1px solid var(--nath-autocomplete-overlay-border);border-radius:.375rem;box-shadow:var(--nath-autocomplete-overlay-shadow);padding:.25rem 0;z-index:50;display:flex;flex-direction:column;box-sizing:border-box}.ac-dropdown-item{padding:.625rem 1rem;cursor:pointer;display:flex;align-items:center;transition:background-color .15s,color .15s;color:var(--nath-autocomplete-text-main)}.ac-dropdown-item:hover{background-color:var(--nath-autocomplete-hover-bg);color:var(--nath-autocomplete-hover-text)}.ac-dropdown-item.is-active{background-color:var(--nath-autocomplete-selected-bg)!important;color:var(--nath-autocomplete-selected-text)!important}.ac-dropdown-trigger-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important}\n"] }]
|
|
218
218
|
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], valueWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueWith", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], minQueryLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minQueryLength", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], forceDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceDisabled", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], debouncedQueryChange: [{ type: i0.Output, args: ["debouncedQueryChange"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], unselected: [{ type: i0.Output, args: ["unselected"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], inputField: [{ type: i0.ViewChild, args: ['inputField', { isSignal: true }] }] } });
|
|
219
219
|
|
|
220
220
|
class NathBooleanControl {
|
|
@@ -5986,7 +5986,7 @@ class NathTooltipContainer {
|
|
|
5986
5986
|
}
|
|
5987
5987
|
</div>
|
|
5988
5988
|
</div>
|
|
5989
|
-
`, isInline: true, styles: ["nath-tooltip-container,.nath-tooltip-container-theme{--nath-tooltip-container-text-color: #fff;--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-bottom-color: var(--color-slate-100, oklch(.967 .011 264.536))}.dark nath-tooltip-container,.dark .nath-tooltip-container-theme{--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755))}.nath-tooltip-container{position:fixed;left:0;top:0;display:block;z-index:50;transition-property:opacity;transition-duration:.2s;pointer-events:none;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;max-width:20rem;background-color:var(--nath-tooltip-container-bg-color);color:var(--nath-tooltip-container-text-color);border-bottom:1px solid var(--nath-tooltip-container-border-bottom-color)}.nath-tooltip-container:after{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent}.nath-tooltip-container.arrow-top:after{border-top-color:var(--nath-tooltip-container-border-color);top:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-bottom:after{border-bottom-color:var(--nath-tooltip-container-border-color);bottom:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-left:after{border-left-color:var(--nath-tooltip-container-border-color);left:100%;top:calc(50% - 6px)}.nath-tooltip-container.arrow-right:after{border-right-color:var(--nath-tooltip-container-border-color);right:100%;top:calc(50% - 6px)}.nath-tooltip-content{white-space:
|
|
5989
|
+
`, isInline: true, styles: ["nath-tooltip-container,.nath-tooltip-container-theme{--nath-tooltip-container-text-color: #fff;--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-bottom-color: var(--color-slate-100, oklch(.967 .011 264.536))}.dark nath-tooltip-container,.dark .nath-tooltip-container-theme{--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755))}.nath-tooltip-container{position:fixed;left:0;top:0;display:block;z-index:50;transition-property:opacity;transition-duration:.2s;pointer-events:none;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;max-width:20rem;background-color:var(--nath-tooltip-container-bg-color);color:var(--nath-tooltip-container-text-color);border-bottom:1px solid var(--nath-tooltip-container-border-bottom-color)}.nath-tooltip-container:after{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent}.nath-tooltip-container.arrow-top:after{border-top-color:var(--nath-tooltip-container-border-color);top:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-bottom:after{border-bottom-color:var(--nath-tooltip-container-border-color);bottom:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-left:after{border-left-color:var(--nath-tooltip-container-border-color);left:100%;top:calc(50% - 6px)}.nath-tooltip-container.arrow-right:after{border-right-color:var(--nath-tooltip-container-border-color);right:100%;top:calc(50% - 6px)}.nath-tooltip-content{white-space:normal}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
5990
5990
|
}
|
|
5991
5991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTooltipContainer, decorators: [{
|
|
5992
5992
|
type: Component,
|
|
@@ -6004,7 +6004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6004
6004
|
}
|
|
6005
6005
|
</div>
|
|
6006
6006
|
</div>
|
|
6007
|
-
`, encapsulation: ViewEncapsulation.None, styles: ["nath-tooltip-container,.nath-tooltip-container-theme{--nath-tooltip-container-text-color: #fff;--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-bottom-color: var(--color-slate-100, oklch(.967 .011 264.536))}.dark nath-tooltip-container,.dark .nath-tooltip-container-theme{--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755))}.nath-tooltip-container{position:fixed;left:0;top:0;display:block;z-index:50;transition-property:opacity;transition-duration:.2s;pointer-events:none;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;max-width:20rem;background-color:var(--nath-tooltip-container-bg-color);color:var(--nath-tooltip-container-text-color);border-bottom:1px solid var(--nath-tooltip-container-border-bottom-color)}.nath-tooltip-container:after{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent}.nath-tooltip-container.arrow-top:after{border-top-color:var(--nath-tooltip-container-border-color);top:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-bottom:after{border-bottom-color:var(--nath-tooltip-container-border-color);bottom:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-left:after{border-left-color:var(--nath-tooltip-container-border-color);left:100%;top:calc(50% - 6px)}.nath-tooltip-container.arrow-right:after{border-right-color:var(--nath-tooltip-container-border-color);right:100%;top:calc(50% - 6px)}.nath-tooltip-content{white-space:
|
|
6007
|
+
`, encapsulation: ViewEncapsulation.None, styles: ["nath-tooltip-container,.nath-tooltip-container-theme{--nath-tooltip-container-text-color: #fff;--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-color: var(--color-slate-900, oklch(.208 .042 265.755));--nath-tooltip-container-border-bottom-color: var(--color-slate-100, oklch(.967 .011 264.536))}.dark nath-tooltip-container,.dark .nath-tooltip-container-theme{--nath-tooltip-container-bg-color: var(--color-slate-900, oklch(.208 .042 265.755))}.nath-tooltip-container{position:fixed;left:0;top:0;display:block;z-index:50;transition-property:opacity;transition-duration:.2s;pointer-events:none;padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem;border-radius:.375rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;max-width:20rem;background-color:var(--nath-tooltip-container-bg-color);color:var(--nath-tooltip-container-text-color);border-bottom:1px solid var(--nath-tooltip-container-border-bottom-color)}.nath-tooltip-container:after{content:\"\";position:absolute;width:0;height:0;border-style:solid;border-width:6px;border-color:transparent}.nath-tooltip-container.arrow-top:after{border-top-color:var(--nath-tooltip-container-border-color);top:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-bottom:after{border-bottom-color:var(--nath-tooltip-container-border-color);bottom:100%;left:calc(50% - 6px)}.nath-tooltip-container.arrow-left:after{border-left-color:var(--nath-tooltip-container-border-color);left:100%;top:calc(50% - 6px)}.nath-tooltip-container.arrow-right:after{border-right-color:var(--nath-tooltip-container-border-color);right:100%;top:calc(50% - 6px)}.nath-tooltip-content{white-space:normal}\n"] }]
|
|
6008
6008
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
|
|
6009
6009
|
|
|
6010
6010
|
class NathTooltipDirective {
|