@tolle_/tolle-ui 0.0.29-beta → 0.0.30-beta

package/fesm2022/tolle-ui.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { Component, Input, forwardRef, ViewChild, Injectable, Optional, HostListener, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector, HostBinding } from '@angular/core';
+import { Component, Input, forwardRef, ViewChild, Injectable, Optional, HostListener, ContentChildren, EventEmitter, Output, Directive, inject, PLATFORM_ID, Inject, InjectionToken, APP_INITIALIZER, ChangeDetectorRef, ChangeDetectionStrategy, TemplateRef, Injector, HostBinding, ViewChildren } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT, NgIf, NgTemplateOutlet } from '@angular/common';
 import { cva } from 'class-variance-authority';
@@ -2563,10 +2563,7 @@ class CalendarComponent {
         if (this.minDate && isBefore(date, this.minDate)) {
             return true;
         }
-        if (this.maxDate && isBefore(this.maxDate, date)) {
-            return true;
-        }
-        return false;
+        return !!(this.maxDate && isBefore(this.maxDate, date));
     }
     isTodayDisabled() {
         return this.isDateDisabled(new Date());
@@ -6447,6 +6444,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+class SegmentedComponent {
+    cdr;
+    items = [];
+    class = '';
+    disabled = false;
+    itemTemplate; // Allow custom content
+    value = null;
+    gliderLeft = 0;
+    gliderWidth = 0;
+    hasValue = false;
+    itemElements;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.updateGlider());
+    }
+    ngOnChanges(changes) {
+        // Recalculate if items change or if value changes externally
+        if (changes['items'] && !changes['items'].firstChange) {
+            setTimeout(() => this.updateGlider());
+        }
+    }
+    select(val) {
+        if (this.disabled)
+            return;
+        const item = this.items.find(i => i.value === val);
+        if (item?.disabled)
+            return;
+        this.value = val;
+        this.onChange(val);
+        this.onTouched();
+        this.updateGlider();
+    }
+    updateGlider() {
+        if (!this.itemElements || !this.items.length)
+            return;
+        const index = this.items.findIndex(i => i.value === this.value);
+        if (index === -1) {
+            this.hasValue = false;
+            this.gliderWidth = 0;
+            return;
+        }
+        const activeElement = this.itemElements.get(index)?.nativeElement;
+        if (activeElement) {
+            this.hasValue = true;
+            this.gliderLeft = activeElement.offsetLeft;
+            this.gliderWidth = activeElement.offsetWidth;
+            this.cdr.detectChanges();
+        }
+    }
+    // CVA Implementation
+    writeValue(val) {
+        this.value = val;
+        setTimeout(() => this.updateGlider());
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    cn = cn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SegmentedComponent, isStandalone: true, selector: "tolle-segment", inputs: { items: "items", class: "class", disabled: "disabled", itemTemplate: "itemTemplate" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SegmentedComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "itemElements", predicate: ["itemEls"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div
+      #container
+      [class]="cn(
+        'relative flex items-center p-1 bg-muted rounded-lg select-none w-full gap-1',
+        class
+      )"
+      role="tablist"
+    >
+      <div
+        class="absolute top-1 bottom-1 bg-background shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        [style.left.px]="gliderLeft"
+        [style.width.px]="gliderWidth"
+        [class.opacity-0]="!hasValue"
+      ></div>
+
+      <button
+        *ngFor="let item of items"
+        #itemEls
+        type="button"
+        role="tab"
+        [disabled]="item.disabled || disabled"
+        [attr.aria-selected]="value === item.value"
+        (click)="select(item.value)"
+        [class]="cn(
+          'relative z-10 flex-1 px-3 py-1.5 text-sm font-medium transition-colors duration-200 rounded-md text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'flex items-center justify-center gap-2',
+          value === item.value
+            ? 'text-foreground'
+            : 'text-muted-foreground hover:text-foreground/70',
+          item.disabled && 'opacity-50 cursor-not-allowed',
+          item.class
+        )"
+      >
+        <ng-container *ngIf="itemTemplate; else defaultContent">
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, selected: value === item.value }">
+          </ng-container>
+        </ng-container>
+
+        <ng-template #defaultContent>
+          <i *ngIf="item.icon" [class]="item.icon"></i>
+          <span class="truncate">{{ item.label }}</span>
+        </ng-template>
+      </button>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SegmentedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-segment', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SegmentedComponent),
+                            multi: true
+                        }
+                    ], template: `
+    <div
+      #container
+      [class]="cn(
+        'relative flex items-center p-1 bg-muted rounded-lg select-none w-full gap-1',
+        class
+      )"
+      role="tablist"
+    >
+      <div
+        class="absolute top-1 bottom-1 bg-background shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        [style.left.px]="gliderLeft"
+        [style.width.px]="gliderWidth"
+        [class.opacity-0]="!hasValue"
+      ></div>
+
+      <button
+        *ngFor="let item of items"
+        #itemEls
+        type="button"
+        role="tab"
+        [disabled]="item.disabled || disabled"
+        [attr.aria-selected]="value === item.value"
+        (click)="select(item.value)"
+        [class]="cn(
+          'relative z-10 flex-1 px-3 py-1.5 text-sm font-medium transition-colors duration-200 rounded-md text-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'flex items-center justify-center gap-2',
+          value === item.value
+            ? 'text-foreground'
+            : 'text-muted-foreground hover:text-foreground/70',
+          item.disabled && 'opacity-50 cursor-not-allowed',
+          item.class
+        )"
+      >
+        <ng-container *ngIf="itemTemplate; else defaultContent">
+          <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, selected: value === item.value }">
+          </ng-container>
+        </ng-container>
+
+        <ng-template #defaultContent>
+          <i *ngIf="item.icon" [class]="item.icon"></i>
+          <span class="truncate">{{ item.label }}</span>
+        </ng-template>
+      </button>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], itemElements: [{
+                type: ViewChildren,
+                args: ['itemEls']
+            }] } });
+
 /*
  * Public API Surface of tolle
  */
@@ -6455,5 +6638,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
 //# sourceMappingURL=tolle-ui.mjs.map