ng-blatui 1.12.0 → 1.13.0

package/fesm2022/ng-blatui.mjs

@@ -4185,6 +4185,319 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
+const STAR_SIZE = { sm: 'size-4', default: 'size-5', lg: 'size-6' };
+/** A star rating (`role="radiogroup"`) with hover preview and keyboard support. */
+class BuiRating {
+    value = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    max = input(5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    color = input('text-amber-500', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    hover = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
+    current = computed(() => this.hover() || this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    stars = computed(() => Array.from({ length: this.max() }, (_, index) => index + 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stars" }] : /* istanbul ignore next */ []));
+    sizeClass = computed(() => STAR_SIZE[this.size()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('inline-flex items-center gap-0.5', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    set(next) {
+        if (!this.readonly()) {
+            this.value.set(next);
+        }
+    }
+    onHover(next) {
+        if (!this.readonly()) {
+            this.hover.set(next);
+        }
+    }
+    tabindexFor(star) {
+        if (this.readonly()) {
+            return -1;
+        }
+        return star === (this.value() || 1) ? 0 : -1;
+    }
+    onKeydown(event) {
+        if (this.readonly()) {
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.set(Math.min(this.max(), this.value() + 1));
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.set(Math.max(0, this.value() - 1));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRating, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiRating, isStandalone: true, selector: "bui-rating", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "rating", "role": "radiogroup" }, listeners: { "mouseleave": "hover.set(0)", "keydown": "onKeydown($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "computedClass()" } }, ngImport: i0, template: `
+    @for (star of stars(); track star) {
+      <button
+        type="button"
+        role="radio"
+        [attr.aria-checked]="value() === star"
+        [attr.aria-label]="star + ' / ' + max()"
+        [attr.tabindex]="tabindexFor(star)"
+        [disabled]="readonly()"
+        class="rounded-sm transition-colors outline-none not-disabled:cursor-pointer focus-visible:ring-[3px] focus-visible:ring-ring/50"
+        [class]="current() >= star ? color() : 'text-muted-foreground/30'"
+        (click)="set(star)"
+        (mouseenter)="onHover(star)"
+        (focus)="onHover(star)"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          [class]="sizeClass()"
+          [attr.fill]="current() >= star ? 'currentColor' : 'none'"
+        >
+          <polygon
+            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+          />
+        </svg>
+      </button>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiRating, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-rating',
+                    host: {
+                        'data-slot': 'rating',
+                        role: 'radiogroup',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class]': 'computedClass()',
+                        '(mouseleave)': 'hover.set(0)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    template: `
+    @for (star of stars(); track star) {
+      <button
+        type="button"
+        role="radio"
+        [attr.aria-checked]="value() === star"
+        [attr.aria-label]="star + ' / ' + max()"
+        [attr.tabindex]="tabindexFor(star)"
+        [disabled]="readonly()"
+        class="rounded-sm transition-colors outline-none not-disabled:cursor-pointer focus-visible:ring-[3px] focus-visible:ring-ring/50"
+        [class]="current() >= star ? color() : 'text-muted-foreground/30'"
+        (click)="set(star)"
+        (mouseenter)="onHover(star)"
+        (focus)="onHover(star)"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+          [class]="sizeClass()"
+          [attr.fill]="current() >= star ? 'currentColor' : 'none'"
+        >
+          <polygon
+            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+          />
+        </svg>
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+const FIELD_HEIGHT = { sm: 'h-7 text-xs', default: 'h-8 text-sm', lg: 'h-9 text-base' };
+const BTN_SIZE = {
+    sm: 'w-7 [&_svg]:size-3',
+    default: 'w-8 [&_svg]:size-3.5',
+    lg: 'w-9 [&_svg]:size-4',
+};
+const FIELD_WIDTH = { sm: 'w-9', default: 'w-10', lg: 'w-12' };
+/** A compact − [n] + quantity stepper (`role="group"` with a `spinbutton` field). */
+class BuiQuantitySelector {
+    value = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Quantity', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    atMin = computed(() => this.value() <= this.min(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
+    atMax = computed(() => {
+        const max = this.max();
+        return max !== null && this.value() >= max;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('inline-flex items-stretch overflow-hidden rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[input:disabled]:pointer-events-none has-[input:disabled]:opacity-50 dark:bg-input/30', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    btnClass(side) {
+        return cn('flex shrink-0 items-center justify-center text-muted-foreground transition-colors outline-none not-disabled:cursor-pointer hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50', side === 'e' ? 'border-e' : 'border-s', 'border-input', BTN_SIZE[this.size()], FIELD_HEIGHT[this.size()]);
+    }
+    fieldClass() {
+        return cn('min-w-0 border-0 bg-transparent text-center font-medium tabular-nums outline-none', FIELD_HEIGHT[this.size()], FIELD_WIDTH[this.size()]);
+    }
+    inc() {
+        if (!this.disabled() && !this.atMax()) {
+            this.value.set(this.clamp(this.value() + this.step()));
+        }
+    }
+    dec() {
+        if (!this.disabled() && !this.atMin()) {
+            this.value.set(this.clamp(this.value() - this.step()));
+        }
+    }
+    onInput(event) {
+        const raw = event.target.value.replaceAll(/[^\d-]/g, '');
+        this.value.set(raw === '' ? this.min() : Number(raw));
+    }
+    onBlur() {
+        const current = this.value();
+        this.value.set(this.clamp(Number.isNaN(current) ? this.min() : current));
+    }
+    clamp(value) {
+        let result = Math.max(this.min(), value);
+        const max = this.max();
+        if (max !== null && result > max) {
+            result = max;
+        }
+        return result;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiQuantitySelector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiQuantitySelector, isStandalone: true, selector: "bui-quantity-selector", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "quantity-selector", "role": "group" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <button
+      type="button"
+      aria-label="Decrease quantity"
+      [disabled]="disabled() || atMin()"
+      [class]="btnClass('e')"
+      (click)="dec()"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path d="M5 12h14" />
+      </svg>
+    </button>
+    <input
+      type="text"
+      inputmode="numeric"
+      role="spinbutton"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-valuenow]="value()"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      [disabled]="disabled()"
+      [value]="value()"
+      [class]="fieldClass()"
+      (input)="onInput($event)"
+      (blur)="onBlur()"
+    />
+    <button
+      type="button"
+      aria-label="Increase quantity"
+      [disabled]="disabled() || atMax()"
+      [class]="btnClass('s')"
+      (click)="inc()"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path d="M5 12h14" />
+        <path d="M12 5v14" />
+      </svg>
+    </button>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiQuantitySelector, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-quantity-selector',
+                    host: { 'data-slot': 'quantity-selector', role: 'group', '[class]': 'computedClass()' },
+                    template: `
+    <button
+      type="button"
+      aria-label="Decrease quantity"
+      [disabled]="disabled() || atMin()"
+      [class]="btnClass('e')"
+      (click)="dec()"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path d="M5 12h14" />
+      </svg>
+    </button>
+    <input
+      type="text"
+      inputmode="numeric"
+      role="spinbutton"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-valuenow]="value()"
+      [attr.aria-valuemin]="min()"
+      [attr.aria-valuemax]="max()"
+      [disabled]="disabled()"
+      [value]="value()"
+      [class]="fieldClass()"
+      (input)="onInput($event)"
+      (blur)="onBlur()"
+    />
+    <button
+      type="button"
+      aria-label="Increase quantity"
+      [disabled]="disabled() || atMax()"
+      [class]="btnClass('s')"
+      (click)="inc()"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path d="M5 12h14" />
+        <path d="M12 5v14" />
+      </svg>
+    </button>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -4193,5 +4506,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiAvatarGroup, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiHoverCard, BuiHoverCardContent, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiRadioGroup, BuiRadioGroupItem, BuiScrollArea, BuiSeparator, BuiSkeleton, BuiSlider, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertTitle, BuiAspectRatio, BuiAvatar, BuiAvatarGroup, BuiBadge, BuiBanner, BuiBreadcrumb, BuiBreadcrumbEllipsis, BuiBreadcrumbItem, BuiBreadcrumbLink, BuiBreadcrumbList, BuiBreadcrumbPage, BuiBreadcrumbSeparator, BuiButton, BuiButtonGroup, BuiButtonGroupText, BuiCard, BuiCardAction, BuiCardContent, BuiCardDescription, BuiCardFooter, BuiCardHeader, BuiCardTitle, BuiCheckbox, BuiCodeBlock, BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiContainer, BuiCopyButton, BuiDialogContent, BuiDialogDescription, BuiDialogFooter, BuiDialogHeader, BuiDialogTitle, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiHoverCard, BuiHoverCardContent, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiQuantitySelector, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiScrollArea, BuiSeparator, BuiSkeleton, BuiSlider, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map