@tolle_/tolle-ui 0.0.11-beta → 0.0.14-beta
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/esm2022/lib/dropdown-item.component.mjs +23 -0
- package/esm2022/lib/dropdown-label.component.mjs +19 -0
- package/esm2022/lib/dropdown-menu.component.mjs +27 -0
- package/esm2022/lib/dropdown-separator.component.mjs +11 -0
- package/esm2022/lib/dropdown-trigger.directive.mjs +76 -0
- package/esm2022/lib/input.component.mjs +11 -12
- package/esm2022/public-api.mjs +6 -1
- package/fesm2022/tolle_-tolle-ui.mjs +156 -12
- package/fesm2022/tolle_-tolle-ui.mjs.map +1 -1
- package/lib/button.component.d.ts +1 -1
- package/lib/dropdown-item.component.d.ts +7 -0
- package/lib/dropdown-label.component.d.ts +5 -0
- package/lib/dropdown-menu.component.d.ts +7 -0
- package/lib/dropdown-separator.component.d.ts +5 -0
- package/lib/dropdown-trigger.directive.d.ts +19 -0
- package/lib/input.component.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +5 -0
- package/theme.css +24 -10
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class DropdownItemComponent {
|
|
4
|
+
class = '';
|
|
5
|
+
cn = (c1, c2) => `${c1} ${c2}`;
|
|
6
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "tolle-dropdown-item", inputs: { class: "class" }, ngImport: i0, template: `
|
|
8
|
+
<div [class]="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', class)">
|
|
9
|
+
<ng-content></ng-content>
|
|
10
|
+
</div>
|
|
11
|
+
`, isInline: true, styles: [""] });
|
|
12
|
+
}
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
|
|
14
|
+
type: Component,
|
|
15
|
+
args: [{ selector: 'tolle-dropdown-item', standalone: true, imports: [], template: `
|
|
16
|
+
<div [class]="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', class)">
|
|
17
|
+
<ng-content></ng-content>
|
|
18
|
+
</div>
|
|
19
|
+
` }]
|
|
20
|
+
}], propDecorators: { class: [{
|
|
21
|
+
type: Input
|
|
22
|
+
}] } });
|
|
23
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24taXRlbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90b2xsZS9zcmMvbGliL2Ryb3Bkb3duLWl0ZW0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLE1BQU0sZUFBZSxDQUFDOztBQWEvQyxNQUFNLE9BQU8scUJBQXFCO0lBQ3ZCLEtBQUssR0FBVyxFQUFFLENBQUM7SUFDVCxFQUFFLEdBQUcsQ0FBQyxFQUFVLEVBQUUsRUFBVSxFQUFFLEVBQUUsQ0FBQyxHQUFHLEVBQUUsSUFBSSxFQUFFLEVBQUUsQ0FBQzt3R0FGdkQscUJBQXFCOzRGQUFyQixxQkFBcUIsMkdBUHRCOzs7O0dBSVQ7OzRGQUdVLHFCQUFxQjtrQkFYakMsU0FBUzsrQkFDRSxxQkFBcUIsY0FDbkIsSUFBSSxXQUNQLEVBQUUsWUFDRDs7OztHQUlUOzhCQUlRLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RvbGxlLWRyb3Bkb3duLWl0ZW0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IFtjbGFzc109XCJjbigncmVsYXRpdmUgZmxleCBjdXJzb3ItZGVmYXVsdCBzZWxlY3Qtbm9uZSBpdGVtcy1jZW50ZXIgcm91bmRlZC1zbSBweC0yIHB5LTEuNSB0ZXh0LXNtIG91dGxpbmUtbm9uZSB0cmFuc2l0aW9uLWNvbG9ycyBob3ZlcjpiZy1hY2NlbnQgaG92ZXI6dGV4dC1hY2NlbnQtZm9yZWdyb3VuZCBkYXRhLVtkaXNhYmxlZF06cG9pbnRlci1ldmVudHMtbm9uZSBkYXRhLVtkaXNhYmxlZF06b3BhY2l0eS01MCcsIGNsYXNzKVwiPlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IGBgXG59KVxuZXhwb3J0IGNsYXNzIERyb3Bkb3duSXRlbUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGNsYXNzOiBzdHJpbmcgPSAnJztcbiAgcHJvdGVjdGVkIHJlYWRvbmx5IGNuID0gKGMxOiBzdHJpbmcsIGMyOiBzdHJpbmcpID0+IGAke2MxfSAke2MyfWA7XG59XG4iXX0=
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class DropdownLabelComponent {
|
|
4
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownLabelComponent, isStandalone: true, selector: "tolle-dropdown-label", ngImport: i0, template: `
|
|
6
|
+
<div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
7
|
+
<ng-content></ng-content>
|
|
8
|
+
</div>
|
|
9
|
+
`, isInline: true, styles: [""] });
|
|
10
|
+
}
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownLabelComponent, decorators: [{
|
|
12
|
+
type: Component,
|
|
13
|
+
args: [{ selector: 'tolle-dropdown-label', standalone: true, imports: [], template: `
|
|
14
|
+
<div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
15
|
+
<ng-content></ng-content>
|
|
16
|
+
</div>
|
|
17
|
+
` }]
|
|
18
|
+
}] });
|
|
19
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbGFiZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdG9sbGUvc3JjL2xpYi9kcm9wZG93bi1sYWJlbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFhMUMsTUFBTSxPQUFPLHNCQUFzQjt3R0FBdEIsc0JBQXNCOzRGQUF0QixzQkFBc0IsZ0ZBUHZCOzs7O0dBSVQ7OzRGQUdVLHNCQUFzQjtrQkFYbEMsU0FBUzsrQkFDRSxzQkFBc0IsY0FDcEIsSUFBSSxXQUNQLEVBQUUsWUFDRDs7OztHQUlUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RvbGxlLWRyb3Bkb3duLWxhYmVsJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBjbGFzcz1cInB4LTIgcHktMS41IHRleHQteHMgZm9udC1zZW1pYm9sZCB0ZXh0LW11dGVkLWZvcmVncm91bmQgdXBwZXJjYXNlIHRyYWNraW5nLXdpZGVyXCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogYGBcbn0pXG5leHBvcnQgY2xhc3MgRHJvcGRvd25MYWJlbENvbXBvbmVudCB7XG5cbn1cbiJdfQ==
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Component, ViewChild } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class DropdownMenuComponent {
|
|
4
|
+
templateRef;
|
|
5
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "tolle-dropdown-menu", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: `
|
|
7
|
+
<ng-template #menuTemplate>
|
|
8
|
+
<div class="z-[1000] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in zoom-in-95">
|
|
9
|
+
<ng-content></ng-content>
|
|
10
|
+
</div>
|
|
11
|
+
</ng-template>
|
|
12
|
+
`, isInline: true, styles: [""] });
|
|
13
|
+
}
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
15
|
+
type: Component,
|
|
16
|
+
args: [{ selector: 'tolle-dropdown-menu', standalone: true, imports: [], template: `
|
|
17
|
+
<ng-template #menuTemplate>
|
|
18
|
+
<div class="z-[1000] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in zoom-in-95">
|
|
19
|
+
<ng-content></ng-content>
|
|
20
|
+
</div>
|
|
21
|
+
</ng-template>
|
|
22
|
+
` }]
|
|
23
|
+
}], propDecorators: { templateRef: [{
|
|
24
|
+
type: ViewChild,
|
|
25
|
+
args: ['menuTemplate']
|
|
26
|
+
}] } });
|
|
27
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90b2xsZS9zcmMvbGliL2Ryb3Bkb3duLW1lbnUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQWUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDOztBQWVoRSxNQUFNLE9BQU8scUJBQXFCO0lBQ0wsV0FBVyxDQUFvQjt3R0FEL0MscUJBQXFCOzRGQUFyQixxQkFBcUIsNExBVHRCOzs7Ozs7R0FNVDs7NEZBR1UscUJBQXFCO2tCQWJqQyxTQUFTOytCQUNFLHFCQUFxQixjQUNuQixJQUFJLFdBQ1AsRUFBRSxZQUNEOzs7Ozs7R0FNVDs4QkFJMEIsV0FBVztzQkFBckMsU0FBUzt1QkFBQyxjQUFjIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd0b2xsZS1kcm9wZG93bi1tZW51JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlOiBgXG4gICAgPG5nLXRlbXBsYXRlICNtZW51VGVtcGxhdGU+XG4gICAgICA8ZGl2IGNsYXNzPVwiei1bMTAwMF0gbWluLXctWzEycmVtXSBvdmVyZmxvdy1oaWRkZW4gcm91bmRlZC1tZCBib3JkZXIgYm9yZGVyLWJvcmRlciBiZy1wb3BvdmVyIHAtMSB0ZXh0LXBvcG92ZXItZm9yZWdyb3VuZCBzaGFkb3ctbWQgYW5pbWF0ZS1pbiBmYWRlLWluIHpvb20taW4tOTVcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgYCxcbiAgc3R5bGVzOiBgYFxufSlcbmV4cG9ydCBjbGFzcyBEcm9wZG93bk1lbnVDb21wb25lbnQge1xuICBAVmlld0NoaWxkKCdtZW51VGVtcGxhdGUnKSB0ZW1wbGF0ZVJlZiE6IFRlbXBsYXRlUmVmPGFueT47XG59XG4iXX0=
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export class DropdownSeparatorComponent {
|
|
4
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownSeparatorComponent, isStandalone: true, selector: "tolle-dropdown-separator", ngImport: i0, template: `<div class="-mx-1 my-1 h-px bg-border"></div>`, isInline: true, styles: [""] });
|
|
6
|
+
}
|
|
7
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownSeparatorComponent, decorators: [{
|
|
8
|
+
type: Component,
|
|
9
|
+
args: [{ selector: 'tolle-dropdown-separator', standalone: true, imports: [], template: `<div class="-mx-1 my-1 h-px bg-border"></div>` }]
|
|
10
|
+
}] });
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tc2VwYXJhdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3RvbGxlL3NyYy9saWIvZHJvcGRvd24tc2VwYXJhdG9yLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVMxQyxNQUFNLE9BQU8sMEJBQTBCO3dHQUExQiwwQkFBMEI7NEZBQTFCLDBCQUEwQixvRkFIM0IsK0NBQStDOzs0RkFHOUMsMEJBQTBCO2tCQVB0QyxTQUFTOytCQUNFLDBCQUEwQixjQUN4QixJQUFJLFdBQ1AsRUFBRSxZQUNELCtDQUErQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd0b2xsZS1kcm9wZG93bi1zZXBhcmF0b3InLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXSxcbiAgdGVtcGxhdGU6IGA8ZGl2IGNsYXNzPVwiLW14LTEgbXktMSBoLXB4IGJnLWJvcmRlclwiPjwvZGl2PmAsXG4gIHN0eWxlczogYGBcbn0pXG5leHBvcnQgY2xhc3MgRHJvcGRvd25TZXBhcmF0b3JDb21wb25lbnQge1xuXG59XG4iXX0=
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { Directive, Input, HostListener } from '@angular/core';
|
|
2
|
+
import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class DropdownTriggerDirective {
|
|
5
|
+
el;
|
|
6
|
+
vcr;
|
|
7
|
+
menu;
|
|
8
|
+
cleanup;
|
|
9
|
+
isOpen = false;
|
|
10
|
+
menuElement;
|
|
11
|
+
constructor(el, vcr) {
|
|
12
|
+
this.el = el;
|
|
13
|
+
this.vcr = vcr;
|
|
14
|
+
}
|
|
15
|
+
toggle() {
|
|
16
|
+
this.isOpen ? this.close() : this.open();
|
|
17
|
+
}
|
|
18
|
+
open() {
|
|
19
|
+
this.isOpen = true;
|
|
20
|
+
// Create the menu view
|
|
21
|
+
const view = this.vcr.createEmbeddedView(this.menu.templateRef);
|
|
22
|
+
this.menuElement = view.rootNodes[0];
|
|
23
|
+
document.body.appendChild(this.menuElement);
|
|
24
|
+
// Floating UI positioning logic
|
|
25
|
+
this.cleanup = autoUpdate(this.el.nativeElement, this.menuElement, () => {
|
|
26
|
+
computePosition(this.el.nativeElement, this.menuElement, {
|
|
27
|
+
placement: 'bottom-end',
|
|
28
|
+
middleware: [
|
|
29
|
+
offset(4), // Space between trigger and menu
|
|
30
|
+
flip(), // Flip to top if space is tight
|
|
31
|
+
shift({ padding: 8 }) // Prevent menu from hitting screen edges
|
|
32
|
+
]
|
|
33
|
+
}).then(({ x, y }) => {
|
|
34
|
+
Object.assign(this.menuElement.style, {
|
|
35
|
+
left: `${x}px`,
|
|
36
|
+
top: `${y}px`,
|
|
37
|
+
position: 'absolute'
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
// Close on outside click
|
|
42
|
+
setTimeout(() => {
|
|
43
|
+
document.addEventListener('click', this.outsideClick);
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
close() {
|
|
47
|
+
this.isOpen = false;
|
|
48
|
+
this.cleanup?.();
|
|
49
|
+
this.menuElement?.remove();
|
|
50
|
+
document.removeEventListener('click', this.outsideClick);
|
|
51
|
+
}
|
|
52
|
+
outsideClick = (event) => {
|
|
53
|
+
if (!this.el.nativeElement.contains(event.target) && !this.menuElement?.contains(event.target)) {
|
|
54
|
+
this.close();
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
ngOnDestroy() {
|
|
58
|
+
this.close();
|
|
59
|
+
}
|
|
60
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
61
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropdownTriggerDirective, isStandalone: true, selector: "[tolleDropdownTrigger]", inputs: { menu: ["tolleDropdownTrigger", "menu"] }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
|
|
62
|
+
}
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
|
|
64
|
+
type: Directive,
|
|
65
|
+
args: [{
|
|
66
|
+
selector: '[tolleDropdownTrigger]',
|
|
67
|
+
standalone: true
|
|
68
|
+
}]
|
|
69
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { menu: [{
|
|
70
|
+
type: Input,
|
|
71
|
+
args: ['tolleDropdownTrigger']
|
|
72
|
+
}], toggle: [{
|
|
73
|
+
type: HostListener,
|
|
74
|
+
args: ['click']
|
|
75
|
+
}] } });
|
|
76
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24tdHJpZ2dlci5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy90b2xsZS9zcmMvbGliL2Ryb3Bkb3duLXRyaWdnZXIuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUF5QixZQUFZLEVBQW9CLE1BQU0sZUFBZSxDQUFDO0FBQ3hHLE9BQU8sRUFBRSxlQUFlLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7O0FBT3BGLE1BQU0sT0FBTyx3QkFBd0I7SUFRekI7SUFDQTtJQVJxQixJQUFJLENBQXlCO0lBRXBELE9BQU8sQ0FBYztJQUNyQixNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ2YsV0FBVyxDQUFlO0lBRWxDLFlBQ1UsRUFBYyxFQUNkLEdBQXFCO1FBRHJCLE9BQUUsR0FBRixFQUFFLENBQVk7UUFDZCxRQUFHLEdBQUgsR0FBRyxDQUFrQjtJQUM1QixDQUFDO0lBR0osTUFBTTtRQUNKLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzNDLENBQUM7SUFFTyxJQUFJO1FBQ1YsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFFbkIsdUJBQXVCO1FBQ3ZCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUNoRSxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFnQixDQUFDO1FBQ3BELFFBQVEsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUU1QyxnQ0FBZ0M7UUFDaEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxVQUFVLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLFdBQVcsRUFBRSxHQUFHLEVBQUU7WUFDdEUsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxXQUFZLEVBQUU7Z0JBQ3hELFNBQVMsRUFBRSxZQUFZO2dCQUN2QixVQUFVLEVBQUU7b0JBQ1YsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLGlDQUFpQztvQkFDNUMsSUFBSSxFQUFFLEVBQUksZ0NBQWdDO29CQUMxQyxLQUFLLENBQUMsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyx5Q0FBeUM7aUJBQ2hFO2FBQ0YsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLEVBQUU7Z0JBQ25CLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLFdBQVksQ0FBQyxLQUFLLEVBQUU7b0JBQ3JDLElBQUksRUFBRSxHQUFHLENBQUMsSUFBSTtvQkFDZCxHQUFHLEVBQUUsR0FBRyxDQUFDLElBQUk7b0JBQ2IsUUFBUSxFQUFFLFVBQVU7aUJBQ3JCLENBQUMsQ0FBQztZQUNMLENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQyxDQUFDLENBQUM7UUFFSCx5QkFBeUI7UUFDekIsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO1FBQ3hELENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVPLEtBQUs7UUFDWCxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUNwQixJQUFJLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQztRQUNqQixJQUFJLENBQUMsV0FBVyxFQUFFLE1BQU0sRUFBRSxDQUFDO1FBQzNCLFFBQVEsQ0FBQyxtQkFBbUIsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzNELENBQUM7SUFFTyxZQUFZLEdBQUcsQ0FBQyxLQUFpQixFQUFFLEVBQUU7UUFDM0MsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBYyxDQUFDLEVBQUUsQ0FBQztZQUN2RyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDZixDQUFDO0lBQ0gsQ0FBQyxDQUFDO0lBRUYsV0FBVztRQUNULElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNmLENBQUM7d0dBaEVVLHdCQUF3Qjs0RkFBeEIsd0JBQXdCOzs0RkFBeEIsd0JBQXdCO2tCQUpwQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx3QkFBd0I7b0JBQ2xDLFVBQVUsRUFBRSxJQUFJO2lCQUNqQjs4R0FFZ0MsSUFBSTtzQkFBbEMsS0FBSzt1QkFBQyxzQkFBc0I7Z0JBWTdCLE1BQU07c0JBREwsWUFBWTt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBJbnB1dCwgRWxlbWVudFJlZiwgT25EZXN0cm95LCBIb3N0TGlzdGVuZXIsIFZpZXdDb250YWluZXJSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGNvbXB1dGVQb3NpdGlvbiwgZmxpcCwgc2hpZnQsIG9mZnNldCwgYXV0b1VwZGF0ZSB9IGZyb20gJ0BmbG9hdGluZy11aS9kb20nO1xuaW1wb3J0IHsgRHJvcGRvd25NZW51Q29tcG9uZW50IH0gZnJvbSAnLi9kcm9wZG93bi1tZW51LmNvbXBvbmVudCc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1t0b2xsZURyb3Bkb3duVHJpZ2dlcl0nLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIERyb3Bkb3duVHJpZ2dlckRpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgndG9sbGVEcm9wZG93blRyaWdnZXInKSBtZW51ITogRHJvcGRvd25NZW51Q29tcG9uZW50O1xuXG4gIHByaXZhdGUgY2xlYW51cD86ICgpID0+IHZvaWQ7XG4gIHByaXZhdGUgaXNPcGVuID0gZmFsc2U7XG4gIHByaXZhdGUgbWVudUVsZW1lbnQ/OiBIVE1MRWxlbWVudDtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGVsOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgdmNyOiBWaWV3Q29udGFpbmVyUmVmXG4gICkge31cblxuICBASG9zdExpc3RlbmVyKCdjbGljaycpXG4gIHRvZ2dsZSgpIHtcbiAgICB0aGlzLmlzT3BlbiA/IHRoaXMuY2xvc2UoKSA6IHRoaXMub3BlbigpO1xuICB9XG5cbiAgcHJpdmF0ZSBvcGVuKCkge1xuICAgIHRoaXMuaXNPcGVuID0gdHJ1ZTtcblxuICAgIC8vIENyZWF0ZSB0aGUgbWVudSB2aWV3XG4gICAgY29uc3QgdmlldyA9IHRoaXMudmNyLmNyZWF0ZUVtYmVkZGVkVmlldyh0aGlzLm1lbnUudGVtcGxhdGVSZWYpO1xuICAgIHRoaXMubWVudUVsZW1lbnQgPSB2aWV3LnJvb3ROb2Rlc1swXSBhcyBIVE1MRWxlbWVudDtcbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRoaXMubWVudUVsZW1lbnQpO1xuXG4gICAgLy8gRmxvYXRpbmcgVUkgcG9zaXRpb25pbmcgbG9naWNcbiAgICB0aGlzLmNsZWFudXAgPSBhdXRvVXBkYXRlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgdGhpcy5tZW51RWxlbWVudCwgKCkgPT4ge1xuICAgICAgY29tcHV0ZVBvc2l0aW9uKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgdGhpcy5tZW51RWxlbWVudCEsIHtcbiAgICAgICAgcGxhY2VtZW50OiAnYm90dG9tLWVuZCcsXG4gICAgICAgIG1pZGRsZXdhcmU6IFtcbiAgICAgICAgICBvZmZzZXQoNCksIC8vIFNwYWNlIGJldHdlZW4gdHJpZ2dlciBhbmQgbWVudVxuICAgICAgICAgIGZsaXAoKSwgICAvLyBGbGlwIHRvIHRvcCBpZiBzcGFjZSBpcyB0aWdodFxuICAgICAgICAgIHNoaWZ0KHsgcGFkZGluZzogOCB9KSAvLyBQcmV2ZW50IG1lbnUgZnJvbSBoaXR0aW5nIHNjcmVlbiBlZGdlc1xuICAgICAgICBdXG4gICAgICB9KS50aGVuKCh7IHgsIHkgfSkgPT4ge1xuICAgICAgICBPYmplY3QuYXNzaWduKHRoaXMubWVudUVsZW1lbnQhLnN0eWxlLCB7XG4gICAgICAgICAgbGVmdDogYCR7eH1weGAsXG4gICAgICAgICAgdG9wOiBgJHt5fXB4YCxcbiAgICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJ1xuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICAgIH0pO1xuXG4gICAgLy8gQ2xvc2Ugb24gb3V0c2lkZSBjbGlja1xuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLm91dHNpZGVDbGljayk7XG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIGNsb3NlKCkge1xuICAgIHRoaXMuaXNPcGVuID0gZmFsc2U7XG4gICAgdGhpcy5jbGVhbnVwPy4oKTtcbiAgICB0aGlzLm1lbnVFbGVtZW50Py5yZW1vdmUoKTtcbiAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdjbGljaycsIHRoaXMub3V0c2lkZUNsaWNrKTtcbiAgfVxuXG4gIHByaXZhdGUgb3V0c2lkZUNsaWNrID0gKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgaWYgKCF0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0KSAmJiAhdGhpcy5tZW51RWxlbWVudD8uY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpKSB7XG4gICAgICB0aGlzLmNsb3NlKCk7XG4gICAgfVxuICB9O1xuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuY2xvc2UoKTtcbiAgfVxufVxuIl19
|
|
@@ -43,8 +43,11 @@ export class InputComponent {
|
|
|
43
43
|
}
|
|
44
44
|
// --- Styling Logic ---
|
|
45
45
|
cn = cn;
|
|
46
|
+
get computedContainerClass() {
|
|
47
|
+
return cn("group relative flex items-center w-full rounded-md border border-input bg-background ring-offset-background transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 shadow-sm", this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", this.disabled && "cursor-not-allowed opacity-50", this.error && "border-destructive focus-within:ring-destructive", this.containerClass);
|
|
48
|
+
}
|
|
46
49
|
get computedInputClass() {
|
|
47
|
-
return cn("flex
|
|
50
|
+
return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0 disabled:cursor-not-allowed", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.class);
|
|
48
51
|
}
|
|
49
52
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
50
53
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", error: "error", size: "size", containerClass: "containerClass", class: "class" }, providers: [
|
|
@@ -54,10 +57,9 @@ export class InputComponent {
|
|
|
54
57
|
multi: true
|
|
55
58
|
}
|
|
56
59
|
], ngImport: i0, template: `
|
|
57
|
-
<div [class]="
|
|
60
|
+
<div [class]="computedContainerClass">
|
|
58
61
|
|
|
59
|
-
<div class="
|
|
60
|
-
[class.left-2.5]="size === 'xs'">
|
|
62
|
+
<div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
|
|
61
63
|
<ng-content select="[prefix]"></ng-content>
|
|
62
64
|
</div>
|
|
63
65
|
|
|
@@ -71,8 +73,7 @@ export class InputComponent {
|
|
|
71
73
|
[class]="computedInputClass"
|
|
72
74
|
/>
|
|
73
75
|
|
|
74
|
-
<div class="
|
|
75
|
-
[class.right-2.5]="size === 'xs'">
|
|
76
|
+
<div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
|
|
76
77
|
<ng-content select="[suffix]"></ng-content>
|
|
77
78
|
</div>
|
|
78
79
|
</div>
|
|
@@ -92,10 +93,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
92
93
|
}
|
|
93
94
|
],
|
|
94
95
|
template: `
|
|
95
|
-
<div [class]="
|
|
96
|
+
<div [class]="computedContainerClass">
|
|
96
97
|
|
|
97
|
-
<div class="
|
|
98
|
-
[class.left-2.5]="size === 'xs'">
|
|
98
|
+
<div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
|
|
99
99
|
<ng-content select="[prefix]"></ng-content>
|
|
100
100
|
</div>
|
|
101
101
|
|
|
@@ -109,8 +109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
109
109
|
[class]="computedInputClass"
|
|
110
110
|
/>
|
|
111
111
|
|
|
112
|
-
<div class="
|
|
113
|
-
[class.right-2.5]="size === 'xs'">
|
|
112
|
+
<div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
|
|
114
113
|
<ng-content select="[suffix]"></ng-content>
|
|
115
114
|
</div>
|
|
116
115
|
</div>
|
|
@@ -131,4 +130,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
131
130
|
}], class: [{
|
|
132
131
|
type: Input
|
|
133
132
|
}] } });
|
|
134
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
133
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdG9sbGUvc3JjL2xpYi9pbnB1dC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUF3QixpQkFBaUIsRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN0RixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFDOzs7QUFvQ2hDLE1BQU0sT0FBTyxjQUFjO0lBZ0JMO0lBZlgsSUFBSSxHQUFXLE1BQU0sQ0FBQztJQUN0QixXQUFXLEdBQVcsRUFBRSxDQUFDO0lBQ3pCLFFBQVEsR0FBWSxLQUFLLENBQUM7SUFDMUIsS0FBSyxHQUFZLEtBQUssQ0FBQztJQUN2QixJQUFJLEdBQW1DLFNBQVMsQ0FBQztJQUNqRCxjQUFjLEdBQVcsRUFBRSxDQUFDO0lBQzVCLEtBQUssR0FBVyxFQUFFLENBQUM7SUFFNUIsaUJBQWlCO0lBQ2pCLEtBQUssR0FBUSxFQUFFLENBQUM7SUFFaEIsZ0JBQWdCO0lBQ2hCLFFBQVEsR0FBUSxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFDekIsU0FBUyxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUUxQixZQUFvQixHQUFzQjtRQUF0QixRQUFHLEdBQUgsR0FBRyxDQUFtQjtJQUFHLENBQUM7SUFFOUMsOENBQThDO0lBRTlDLFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO1FBQ25CLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDO1FBQzNCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELGFBQWEsQ0FBQyxLQUFZO1FBQ3hCLE1BQU0sR0FBRyxHQUFJLEtBQUssQ0FBQyxNQUEyQixDQUFDLEtBQUssQ0FBQztRQUNyRCxJQUFJLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQztRQUNqQixJQUFJLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFFRCx3QkFBd0I7SUFDTCxFQUFFLEdBQUcsRUFBRSxDQUFDO0lBRTNCLElBQUksc0JBQXNCO1FBQ3hCLE9BQU8sRUFBRSxDQUNQLDRNQUE0TSxFQUM1TSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksSUFBSSxrQkFBa0IsRUFDeEMsSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLElBQUksZ0JBQWdCLEVBQ3RDLElBQUksQ0FBQyxJQUFJLEtBQUssU0FBUyxJQUFJLGlCQUFpQixFQUM1QyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksSUFBSSxpQkFBaUIsRUFDdkMsSUFBSSxDQUFDLFFBQVEsSUFBSSwrQkFBK0IsRUFDaEQsSUFBSSxDQUFDLEtBQUssSUFBSSxrREFBa0QsRUFDaEUsSUFBSSxDQUFDLGNBQWMsQ0FDcEIsQ0FBQztJQUNKLENBQUM7SUFFRCxJQUFJLGtCQUFrQjtRQUNwQixPQUFPLEVBQUUsQ0FDUCw2SUFBNkksRUFDN0ksSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLElBQUksU0FBUyxFQUMvQixJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksSUFBSSxXQUFXLEVBQ2pDLElBQUksQ0FBQyxLQUFLLENBQ1gsQ0FBQztJQUNKLENBQUM7d0dBbkVVLGNBQWM7NEZBQWQsY0FBYyxzTkE5QmQ7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGNBQWMsQ0FBQztnQkFDN0MsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLDBCQUNTOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FxQlQsMkRBN0JTLFlBQVksOEJBQUUsV0FBVzs7NEZBK0J4QixjQUFjO2tCQWxDMUIsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtvQkFDdkIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxXQUFXLENBQUM7b0JBQ3BDLFNBQVMsRUFBRTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxlQUFlLENBQUM7NEJBQzdDLEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGO29CQUNELFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBcUJUO2lCQUNGO3NGQUVVLElBQUk7c0JBQVosS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIGZvcndhcmRSZWYsIENoYW5nZURldGVjdG9yUmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SLCBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IGNuIH0gZnJvbSAnLi91dGlscy9jbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RvbGxlLWlucHV0JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGVdLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IElucHV0Q29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW2NsYXNzXT1cImNvbXB1dGVkQ29udGFpbmVyQ2xhc3NcIj5cblxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIHRleHQtbXV0ZWQtZm9yZWdyb3VuZCBncm91cC1mb2N1cy13aXRoaW46dGV4dC1wcmltYXJ5IHRyYW5zaXRpb24tY29sb3JzXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltwcmVmaXhdXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxpbnB1dFxuICAgICAgICBbdHlwZV09XCJ0eXBlXCJcbiAgICAgICAgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCJcbiAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgWyhuZ01vZGVsKV09XCJ2YWx1ZVwiXG4gICAgICAgIChibHVyKT1cIm9uVG91Y2hlZCgpXCJcbiAgICAgICAgKGlucHV0KT1cIm9uSW5wdXRDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICAgIFtjbGFzc109XCJjb21wdXRlZElucHV0Q2xhc3NcIlxuICAgICAgLz5cblxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIHRleHQtbXV0ZWQtZm9yZWdyb3VuZCBncm91cC1mb2N1cy13aXRoaW46dGV4dC1wcmltYXJ5IHRyYW5zaXRpb24tY29sb3JzXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltzdWZmaXhdXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIElucHV0Q29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICBASW5wdXQoKSB0eXBlOiBzdHJpbmcgPSAndGV4dCc7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgZXJyb3I6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgc2l6ZTogJ3hzJyB8ICdzbScgfCAnZGVmYXVsdCcgfCAnbGcnID0gJ2RlZmF1bHQnO1xuICBASW5wdXQoKSBjb250YWluZXJDbGFzczogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGNsYXNzOiBzdHJpbmcgPSAnJztcblxuICAvLyBJbnRlcm5hbCBTdGF0ZVxuICB2YWx1ZTogYW55ID0gJyc7XG5cbiAgLy8gQ1ZBIENhbGxiYWNrc1xuICBvbkNoYW5nZTogYW55ID0gKCkgPT4ge307XG4gIG9uVG91Y2hlZDogYW55ID0gKCkgPT4ge307XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIC8vIC0tLSBDb250cm9sVmFsdWVBY2Nlc3NvciBJbXBsZW1lbnRhdGlvbiAtLS1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoZWQgPSBmbjtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuZGlzYWJsZWQgPSBpc0Rpc2FibGVkO1xuICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICB9XG5cbiAgb25JbnB1dENoYW5nZShldmVudDogRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCB2YWwgPSAoZXZlbnQudGFyZ2V0IGFzIEhUTUxJbnB1dEVsZW1lbnQpLnZhbHVlO1xuICAgIHRoaXMudmFsdWUgPSB2YWw7XG4gICAgdGhpcy5vbkNoYW5nZSh2YWwpO1xuICB9XG5cbiAgLy8gLS0tIFN0eWxpbmcgTG9naWMgLS0tXG4gIHByb3RlY3RlZCByZWFkb25seSBjbiA9IGNuO1xuXG4gIGdldCBjb21wdXRlZENvbnRhaW5lckNsYXNzKCkge1xuICAgIHJldHVybiBjbihcbiAgICAgIFwiZ3JvdXAgcmVsYXRpdmUgZmxleCBpdGVtcy1jZW50ZXIgdy1mdWxsIHJvdW5kZWQtbWQgYm9yZGVyIGJvcmRlci1pbnB1dCBiZy1iYWNrZ3JvdW5kIHJpbmctb2Zmc2V0LWJhY2tncm91bmQgdHJhbnNpdGlvbi1hbGwgZm9jdXMtd2l0aGluOnJpbmctMiBmb2N1cy13aXRoaW46cmluZy1yaW5nIGZvY3VzLXdpdGhpbjpyaW5nLW9mZnNldC0xIHNoYWRvdy1zbVwiLFxuICAgICAgdGhpcy5zaXplID09PSAneHMnICYmIFwiaC04IHB4LTIgZ2FwLTEuNVwiLFxuICAgICAgdGhpcy5zaXplID09PSAnc20nICYmIFwiaC05IHB4LTMgZ2FwLTJcIixcbiAgICAgIHRoaXMuc2l6ZSA9PT0gJ2RlZmF1bHQnICYmIFwiaC0xMCBweC0zIGdhcC0yXCIsXG4gICAgICB0aGlzLnNpemUgPT09ICdsZycgJiYgXCJoLTExIHB4LTQgZ2FwLTNcIixcbiAgICAgIHRoaXMuZGlzYWJsZWQgJiYgXCJjdXJzb3Itbm90LWFsbG93ZWQgb3BhY2l0eS01MFwiLFxuICAgICAgdGhpcy5lcnJvciAmJiBcImJvcmRlci1kZXN0cnVjdGl2ZSBmb2N1cy13aXRoaW46cmluZy1kZXN0cnVjdGl2ZVwiLFxuICAgICAgdGhpcy5jb250YWluZXJDbGFzc1xuICAgICk7XG4gIH1cblxuICBnZXQgY29tcHV0ZWRJbnB1dENsYXNzKCkge1xuICAgIHJldHVybiBjbihcbiAgICAgIFwiZmxleC0xIGJnLXRyYW5zcGFyZW50IGJvcmRlci1ub25lIHAtMCB0ZXh0LXNtIHBsYWNlaG9sZGVyOnRleHQtbXV0ZWQtZm9yZWdyb3VuZCBmb2N1czpvdXRsaW5lLW5vbmUgZm9jdXM6cmluZy0wIGRpc2FibGVkOmN1cnNvci1ub3QtYWxsb3dlZFwiLFxuICAgICAgdGhpcy5zaXplID09PSAneHMnICYmIFwidGV4dC14c1wiLFxuICAgICAgdGhpcy5zaXplID09PSAnbGcnICYmIFwidGV4dC1iYXNlXCIsXG4gICAgICB0aGlzLmNsYXNzXG4gICAgKTtcbiAgfVxufVxuIl19
|
package/esm2022/public-api.mjs
CHANGED
|
@@ -34,4 +34,9 @@ export * from './lib/button-group.component';
|
|
|
34
34
|
export * from './lib/date-range-picker.component';
|
|
35
35
|
export * from './lib/range-calendar.component';
|
|
36
36
|
export * from './lib/theme.service';
|
|
37
|
-
|
|
37
|
+
export * from './lib/dropdown-item.component';
|
|
38
|
+
export * from './lib/dropdown-label.component';
|
|
39
|
+
export * from './lib/dropdown-menu.component';
|
|
40
|
+
export * from './lib/dropdown-separator.component';
|
|
41
|
+
export * from './lib/dropdown-trigger.directive';
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3RvbGxlL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxnQkFBZ0IsQ0FBQztBQUMvQixjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHFCQUFxQixDQUFBO0FBQ25DLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyw4QkFBOEIsQ0FBQTtBQUM1QyxjQUFjLDBCQUEwQixDQUFBO0FBQ3hDLGNBQWMsOEJBQThCLENBQUE7QUFDNUMsY0FBYyw2QkFBNkIsQ0FBQTtBQUMzQyxjQUFjLDRCQUE0QixDQUFBO0FBQzFDLGNBQWMsNEJBQTRCLENBQUE7QUFDMUMsY0FBYyw0QkFBNEIsQ0FBQTtBQUMxQyxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMsMkJBQTJCLENBQUE7QUFDekMsY0FBYyx1QkFBdUIsQ0FBQTtBQUNyQyxjQUFjLGlCQUFpQixDQUFBO0FBQy9CLGNBQWMscUJBQXFCLENBQUE7QUFDbkMsY0FBYywyQkFBMkIsQ0FBQTtBQUN6QyxjQUFjLGFBQWEsQ0FBQTtBQUMzQixjQUFjLDhCQUE4QixDQUFBO0FBQzVDLGNBQWMsbUNBQW1DLENBQUE7QUFDakQsY0FBYyxnQ0FBZ0MsQ0FBQTtBQUM5QyxjQUFjLHFCQUFxQixDQUFBO0FBQ25DLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyxnQ0FBZ0MsQ0FBQTtBQUM5QyxjQUFjLCtCQUErQixDQUFBO0FBQzdDLGNBQWMsb0NBQW9DLENBQUM7QUFDbkQsY0FBYyxrQ0FBa0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgdG9sbGVcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi91dGlscy9jbic7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9idXR0b24uY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2lucHV0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jYXJkLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWxlY3QuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlbGVjdC1pdGVtLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZWxlY3QtZ3JvdXAuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NlbGVjdC1zZXBhcmF0b3IuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3N3aXRjaC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYmFkZ2UuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL3NrZWxldG9uLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9jaGVja2JveC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdG9vbHRpcC5kaXJlY3RpdmUnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvdG9hc3Quc2VydmljZSdcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RvbGxlLWNvbmZpZyc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9tdWx0aS1zZWxlY3QuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY2FsZW5kYXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbWFza2VkLWlucHV0LmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RhdGUtcGlja2VyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL3BhZ2luYXRpb24uY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGF0YS10YWJsZS5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi90b2xsZS1jZWxsLmRpcmVjdGl2ZSdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2FjY29yZGlvbi1pdGVtLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2FjY29yZGlvbi5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RhbC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RhbC1yZWYnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RhbC5zZXJ2aWNlJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvbW9kYWwtc3RhY2suc2VydmljZSdcbmV4cG9ydCAqIGZyb20gJy4vbGliL21vZGFsJ1xuZXhwb3J0ICogZnJvbSAnLi9saWIvYnV0dG9uLWdyb3VwLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RhdGUtcmFuZ2UtcGlja2VyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL3JhbmdlLWNhbGVuZGFyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL3RoZW1lLnNlcnZpY2UnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kcm9wZG93bi1pdGVtLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9kcm9wZG93bi1sYWJlbC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kcm9wZG93bi1tZW51LmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2Ryb3Bkb3duLXNlcGFyYXRvci5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZHJvcGRvd24tdHJpZ2dlci5kaXJlY3RpdmUnO1xuIl19
|
|
@@ -145,8 +145,11 @@ class InputComponent {
|
|
|
145
145
|
}
|
|
146
146
|
// --- Styling Logic ---
|
|
147
147
|
cn = cn;
|
|
148
|
+
get computedContainerClass() {
|
|
149
|
+
return cn("group relative flex items-center w-full rounded-md border border-input bg-background ring-offset-background transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 shadow-sm", this.size === 'xs' && "h-8 px-2 gap-1.5", this.size === 'sm' && "h-9 px-3 gap-2", this.size === 'default' && "h-10 px-3 gap-2", this.size === 'lg' && "h-11 px-4 gap-3", this.disabled && "cursor-not-allowed opacity-50", this.error && "border-destructive focus-within:ring-destructive", this.containerClass);
|
|
150
|
+
}
|
|
148
151
|
get computedInputClass() {
|
|
149
|
-
return cn("flex
|
|
152
|
+
return cn("flex-1 bg-transparent border-none p-0 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-0 disabled:cursor-not-allowed", this.size === 'xs' && "text-xs", this.size === 'lg' && "text-base", this.class);
|
|
150
153
|
}
|
|
151
154
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
152
155
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InputComponent, isStandalone: true, selector: "tolle-input", inputs: { type: "type", placeholder: "placeholder", disabled: "disabled", error: "error", size: "size", containerClass: "containerClass", class: "class" }, providers: [
|
|
@@ -156,10 +159,9 @@ class InputComponent {
|
|
|
156
159
|
multi: true
|
|
157
160
|
}
|
|
158
161
|
], ngImport: i0, template: `
|
|
159
|
-
<div [class]="
|
|
162
|
+
<div [class]="computedContainerClass">
|
|
160
163
|
|
|
161
|
-
<div class="
|
|
162
|
-
[class.left-2.5]="size === 'xs'">
|
|
164
|
+
<div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
|
|
163
165
|
<ng-content select="[prefix]"></ng-content>
|
|
164
166
|
</div>
|
|
165
167
|
|
|
@@ -173,8 +175,7 @@ class InputComponent {
|
|
|
173
175
|
[class]="computedInputClass"
|
|
174
176
|
/>
|
|
175
177
|
|
|
176
|
-
<div class="
|
|
177
|
-
[class.right-2.5]="size === 'xs'">
|
|
178
|
+
<div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
|
|
178
179
|
<ng-content select="[suffix]"></ng-content>
|
|
179
180
|
</div>
|
|
180
181
|
</div>
|
|
@@ -194,10 +195,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
194
195
|
}
|
|
195
196
|
],
|
|
196
197
|
template: `
|
|
197
|
-
<div [class]="
|
|
198
|
+
<div [class]="computedContainerClass">
|
|
198
199
|
|
|
199
|
-
<div class="
|
|
200
|
-
[class.left-2.5]="size === 'xs'">
|
|
200
|
+
<div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
|
|
201
201
|
<ng-content select="[prefix]"></ng-content>
|
|
202
202
|
</div>
|
|
203
203
|
|
|
@@ -211,8 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
211
211
|
[class]="computedInputClass"
|
|
212
212
|
/>
|
|
213
213
|
|
|
214
|
-
<div class="
|
|
215
|
-
[class.right-2.5]="size === 'xs'">
|
|
214
|
+
<div class="flex items-center text-muted-foreground group-focus-within:text-primary transition-colors">
|
|
216
215
|
<ng-content select="[suffix]"></ng-content>
|
|
217
216
|
</div>
|
|
218
217
|
</div>
|
|
@@ -3723,6 +3722,151 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3723
3722
|
args: ['document:mousedown', ['$event']]
|
|
3724
3723
|
}] } });
|
|
3725
3724
|
|
|
3725
|
+
class DropdownItemComponent {
|
|
3726
|
+
class = '';
|
|
3727
|
+
cn = (c1, c2) => `${c1} ${c2}`;
|
|
3728
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3729
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownItemComponent, isStandalone: true, selector: "tolle-dropdown-item", inputs: { class: "class" }, ngImport: i0, template: `
|
|
3730
|
+
<div [class]="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', class)">
|
|
3731
|
+
<ng-content></ng-content>
|
|
3732
|
+
</div>
|
|
3733
|
+
`, isInline: true, styles: [""] });
|
|
3734
|
+
}
|
|
3735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownItemComponent, decorators: [{
|
|
3736
|
+
type: Component,
|
|
3737
|
+
args: [{ selector: 'tolle-dropdown-item', standalone: true, imports: [], template: `
|
|
3738
|
+
<div [class]="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', class)">
|
|
3739
|
+
<ng-content></ng-content>
|
|
3740
|
+
</div>
|
|
3741
|
+
` }]
|
|
3742
|
+
}], propDecorators: { class: [{
|
|
3743
|
+
type: Input
|
|
3744
|
+
}] } });
|
|
3745
|
+
|
|
3746
|
+
class DropdownLabelComponent {
|
|
3747
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3748
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownLabelComponent, isStandalone: true, selector: "tolle-dropdown-label", ngImport: i0, template: `
|
|
3749
|
+
<div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
3750
|
+
<ng-content></ng-content>
|
|
3751
|
+
</div>
|
|
3752
|
+
`, isInline: true, styles: [""] });
|
|
3753
|
+
}
|
|
3754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownLabelComponent, decorators: [{
|
|
3755
|
+
type: Component,
|
|
3756
|
+
args: [{ selector: 'tolle-dropdown-label', standalone: true, imports: [], template: `
|
|
3757
|
+
<div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
3758
|
+
<ng-content></ng-content>
|
|
3759
|
+
</div>
|
|
3760
|
+
` }]
|
|
3761
|
+
}] });
|
|
3762
|
+
|
|
3763
|
+
class DropdownMenuComponent {
|
|
3764
|
+
templateRef;
|
|
3765
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3766
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownMenuComponent, isStandalone: true, selector: "tolle-dropdown-menu", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: `
|
|
3767
|
+
<ng-template #menuTemplate>
|
|
3768
|
+
<div class="z-[1000] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in zoom-in-95">
|
|
3769
|
+
<ng-content></ng-content>
|
|
3770
|
+
</div>
|
|
3771
|
+
</ng-template>
|
|
3772
|
+
`, isInline: true, styles: [""] });
|
|
3773
|
+
}
|
|
3774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownMenuComponent, decorators: [{
|
|
3775
|
+
type: Component,
|
|
3776
|
+
args: [{ selector: 'tolle-dropdown-menu', standalone: true, imports: [], template: `
|
|
3777
|
+
<ng-template #menuTemplate>
|
|
3778
|
+
<div class="z-[1000] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in zoom-in-95">
|
|
3779
|
+
<ng-content></ng-content>
|
|
3780
|
+
</div>
|
|
3781
|
+
</ng-template>
|
|
3782
|
+
` }]
|
|
3783
|
+
}], propDecorators: { templateRef: [{
|
|
3784
|
+
type: ViewChild,
|
|
3785
|
+
args: ['menuTemplate']
|
|
3786
|
+
}] } });
|
|
3787
|
+
|
|
3788
|
+
class DropdownSeparatorComponent {
|
|
3789
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3790
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropdownSeparatorComponent, isStandalone: true, selector: "tolle-dropdown-separator", ngImport: i0, template: `<div class="-mx-1 my-1 h-px bg-border"></div>`, isInline: true, styles: [""] });
|
|
3791
|
+
}
|
|
3792
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownSeparatorComponent, decorators: [{
|
|
3793
|
+
type: Component,
|
|
3794
|
+
args: [{ selector: 'tolle-dropdown-separator', standalone: true, imports: [], template: `<div class="-mx-1 my-1 h-px bg-border"></div>` }]
|
|
3795
|
+
}] });
|
|
3796
|
+
|
|
3797
|
+
class DropdownTriggerDirective {
|
|
3798
|
+
el;
|
|
3799
|
+
vcr;
|
|
3800
|
+
menu;
|
|
3801
|
+
cleanup;
|
|
3802
|
+
isOpen = false;
|
|
3803
|
+
menuElement;
|
|
3804
|
+
constructor(el, vcr) {
|
|
3805
|
+
this.el = el;
|
|
3806
|
+
this.vcr = vcr;
|
|
3807
|
+
}
|
|
3808
|
+
toggle() {
|
|
3809
|
+
this.isOpen ? this.close() : this.open();
|
|
3810
|
+
}
|
|
3811
|
+
open() {
|
|
3812
|
+
this.isOpen = true;
|
|
3813
|
+
// Create the menu view
|
|
3814
|
+
const view = this.vcr.createEmbeddedView(this.menu.templateRef);
|
|
3815
|
+
this.menuElement = view.rootNodes[0];
|
|
3816
|
+
document.body.appendChild(this.menuElement);
|
|
3817
|
+
// Floating UI positioning logic
|
|
3818
|
+
this.cleanup = autoUpdate(this.el.nativeElement, this.menuElement, () => {
|
|
3819
|
+
computePosition(this.el.nativeElement, this.menuElement, {
|
|
3820
|
+
placement: 'bottom-end',
|
|
3821
|
+
middleware: [
|
|
3822
|
+
offset(4), // Space between trigger and menu
|
|
3823
|
+
flip(), // Flip to top if space is tight
|
|
3824
|
+
shift({ padding: 8 }) // Prevent menu from hitting screen edges
|
|
3825
|
+
]
|
|
3826
|
+
}).then(({ x, y }) => {
|
|
3827
|
+
Object.assign(this.menuElement.style, {
|
|
3828
|
+
left: `${x}px`,
|
|
3829
|
+
top: `${y}px`,
|
|
3830
|
+
position: 'absolute'
|
|
3831
|
+
});
|
|
3832
|
+
});
|
|
3833
|
+
});
|
|
3834
|
+
// Close on outside click
|
|
3835
|
+
setTimeout(() => {
|
|
3836
|
+
document.addEventListener('click', this.outsideClick);
|
|
3837
|
+
});
|
|
3838
|
+
}
|
|
3839
|
+
close() {
|
|
3840
|
+
this.isOpen = false;
|
|
3841
|
+
this.cleanup?.();
|
|
3842
|
+
this.menuElement?.remove();
|
|
3843
|
+
document.removeEventListener('click', this.outsideClick);
|
|
3844
|
+
}
|
|
3845
|
+
outsideClick = (event) => {
|
|
3846
|
+
if (!this.el.nativeElement.contains(event.target) && !this.menuElement?.contains(event.target)) {
|
|
3847
|
+
this.close();
|
|
3848
|
+
}
|
|
3849
|
+
};
|
|
3850
|
+
ngOnDestroy() {
|
|
3851
|
+
this.close();
|
|
3852
|
+
}
|
|
3853
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3854
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: DropdownTriggerDirective, isStandalone: true, selector: "[tolleDropdownTrigger]", inputs: { menu: ["tolleDropdownTrigger", "menu"] }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
|
|
3855
|
+
}
|
|
3856
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropdownTriggerDirective, decorators: [{
|
|
3857
|
+
type: Directive,
|
|
3858
|
+
args: [{
|
|
3859
|
+
selector: '[tolleDropdownTrigger]',
|
|
3860
|
+
standalone: true
|
|
3861
|
+
}]
|
|
3862
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { menu: [{
|
|
3863
|
+
type: Input,
|
|
3864
|
+
args: ['tolleDropdownTrigger']
|
|
3865
|
+
}], toggle: [{
|
|
3866
|
+
type: HostListener,
|
|
3867
|
+
args: ['click']
|
|
3868
|
+
}] } });
|
|
3869
|
+
|
|
3726
3870
|
/*
|
|
3727
3871
|
* Public API Surface of tolle
|
|
3728
3872
|
*/
|
|
@@ -3731,5 +3875,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
3731
3875
|
* Generated bundle index. Do not edit.
|
|
3732
3876
|
*/
|
|
3733
3877
|
|
|
3734
|
-
export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ThemeService, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
|
|
3878
|
+
export { AccordionComponent, AccordionItemComponent, BadgeComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, PaginationComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, ThemeService, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
|
|
3735
3879
|
//# sourceMappingURL=tolle_-tolle-ui.mjs.map
|