ng-blatui 1.16.0 → 1.17.0

package/fesm2022/ng-blatui.mjs

@@ -4811,6 +4811,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
+/** Decorative dotted background layer. Drop inside a `relative` container. */
+class BuiDotPattern {
+    size = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    gap = input(16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    mask = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    bgImage = computed(() => `radial-gradient(currentColor ${this.size()}px, transparent 0)`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bgImage" }] : /* istanbul ignore next */ []));
+    bgSize = computed(() => `${this.gap()}px ${this.gap()}px`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bgSize" }] : /* istanbul ignore next */ []));
+    maskImage = computed(() => this.mask() ? 'radial-gradient(ellipse at center, #000 40%, transparent 75%)' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskImage" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('pointer-events-none absolute inset-0 block text-foreground/15', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDotPattern, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiDotPattern, isStandalone: true, selector: "bui-dot-pattern", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "dot-pattern", "aria-hidden": "true" }, properties: { "class": "computedClass()", "style.background-image": "bgImage()", "style.background-size": "bgSize()", "style.mask-image": "maskImage()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiDotPattern, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-dot-pattern',
+                    host: {
+                        'data-slot': 'dot-pattern',
+                        'aria-hidden': 'true',
+                        '[class]': 'computedClass()',
+                        '[style.background-image]': 'bgImage()',
+                        '[style.background-size]': 'bgSize()',
+                        '[style.mask-image]': 'maskImage()',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** Decorative grid background layer. Drop inside a `relative` container. */
+class BuiGridPattern {
+    gap = input(24, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    lineWidth = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineWidth" }] : /* istanbul ignore next */ []));
+    mask = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    bgImage = computed(() => {
+        const width = this.lineWidth();
+        return `linear-gradient(to right, currentColor ${width}px, transparent ${width}px), linear-gradient(to bottom, currentColor ${width}px, transparent ${width}px)`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bgImage" }] : /* istanbul ignore next */ []));
+    bgSize = computed(() => `${this.gap()}px ${this.gap()}px`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bgSize" }] : /* istanbul ignore next */ []));
+    maskImage = computed(() => this.mask() ? 'radial-gradient(ellipse at center, #000 0%, transparent 75%)' : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskImage" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('pointer-events-none absolute inset-0 block text-foreground/10', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiGridPattern, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: BuiGridPattern, isStandalone: true, selector: "bui-grid-pattern", inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, lineWidth: { classPropertyName: "lineWidth", publicName: "lineWidth", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "grid-pattern", "aria-hidden": "true" }, properties: { "class": "computedClass()", "style.background-image": "bgImage()", "style.background-size": "bgSize()", "style.mask-image": "maskImage()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiGridPattern, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-grid-pattern',
+                    host: {
+                        'data-slot': 'grid-pattern',
+                        'aria-hidden': 'true',
+                        '[class]': 'computedClass()',
+                        '[style.background-image]': 'bgImage()',
+                        '[style.background-size]': 'bgSize()',
+                        '[style.mask-image]': 'maskImage()',
+                    },
+                    template: '',
+                }]
+        }], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], lineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineWidth", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** A single-select segmented control (`role="radiogroup"`) with arrow-key navigation. */
+class BuiSegmentedControl {
+    value = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    host = inject(ElementRef);
+    normalized = computed(() => this.options().map((option) => typeof option === 'string' ? { value: option, label: option } : option), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalized" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('inline-flex items-center gap-1 rounded-lg bg-muted p-1', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedClass" }] : /* istanbul ignore next */ []));
+    select(next) {
+        if (!this.disabled()) {
+            this.value.set(next);
+        }
+    }
+    tabindexFor(optionValue) {
+        if (this.value() === optionValue) {
+            return 0;
+        }
+        return this.value() === '' && this.normalized().at(0)?.value === optionValue ? 0 : -1;
+    }
+    onKeydown(event) {
+        if (this.disabled() ||
+            !['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        const items = this.normalized();
+        if (items.length === 0) {
+            return;
+        }
+        const current = Math.max(0, items.findIndex((option) => option.value === this.value()));
+        const isForward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+        const nextIndex = (current + (isForward ? 1 : -1) + items.length) % items.length;
+        this.value.set(items[nextIndex].value);
+        const buttons = this.host.nativeElement.querySelectorAll('[role="radio"]');
+        buttons[nextIndex].focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSegmentedControl, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiSegmentedControl, isStandalone: true, selector: "bui-segmented-control", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-slot": "segmented-control", "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    @for (option of normalized(); track option.value) {
+      <button
+        type="button"
+        role="radio"
+        [attr.aria-checked]="value() === option.value"
+        [attr.tabindex]="tabindexFor(option.value)"
+        [disabled]="disabled()"
+        class="rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+        [class]="
+          value() === option.value
+            ? 'bg-background text-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        "
+        (click)="select(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    }
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiSegmentedControl, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-segmented-control',
+                    host: {
+                        'data-slot': 'segmented-control',
+                        role: 'radiogroup',
+                        '[class]': 'computedClass()',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    template: `
+    @for (option of normalized(); track option.value) {
+      <button
+        type="button"
+        role="radio"
+        [attr.aria-checked]="value() === option.value"
+        [attr.tabindex]="tabindexFor(option.value)"
+        [disabled]="disabled()"
+        class="rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+        [class]="
+          value() === option.value
+            ? 'bg-background text-foreground shadow-sm'
+            : 'text-muted-foreground hover:text-foreground'
+        "
+        (click)="select(option.value)"
+      >
+        {{ option.label }}
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -4819,5 +4991,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, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAspectRatio, BuiAutosizeTextarea, 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, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, 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, BuiMenubar, BuiMenubarTrigger, 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, BuiTypography, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
+export { BuiAccordion, BuiAccordionContent, BuiAccordionItem, BuiAccordionTrigger, BuiAlert, BuiAlertDescription, BuiAlertDialogAction, BuiAlertDialogCancel, BuiAlertDialogContent, BuiAlertDialogDescription, BuiAlertDialogFooter, BuiAlertDialogHeader, BuiAlertDialogTitle, BuiAlertTitle, BuiAspectRatio, BuiAutosizeTextarea, 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, BuiDotPattern, BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator, BuiEmpty, BuiEmptyContent, BuiEmptyDescription, BuiEmptyHeader, BuiEmptyMedia, BuiEmptyTitle, BuiField, BuiFieldContent, BuiFieldDescription, BuiFieldError, BuiFieldGroup, BuiFieldLabel, BuiFieldLegend, BuiFieldSeparator, BuiFieldSet, BuiFieldTitle, BuiGridPattern, BuiHoverCard, BuiHoverCardContent, BuiInput, BuiInputGroup, BuiInputGroupAddon, BuiInputGroupButton, BuiInputGroupInput, BuiInputGroupText, BuiItem, BuiItemActions, BuiItemContent, BuiItemDescription, BuiItemGroup, BuiItemMedia, BuiItemTitle, BuiKbd, BuiLabel, BuiMenubar, BuiMenubarTrigger, BuiMeter, BuiPagination, BuiPaginationContent, BuiPaginationEllipsis, BuiPaginationItem, BuiPaginationLink, BuiPopover, BuiPopoverContent, BuiProgress, BuiQuantitySelector, BuiRadioGroup, BuiRadioGroupItem, BuiRating, BuiScrollArea, BuiSegmentedControl, BuiSeparator, BuiSkeleton, BuiSlider, BuiSpinner, BuiStat, BuiSwitch, BuiTabList, BuiTabPanel, BuiTabTrigger, BuiTable, BuiTableBody, BuiTableCaption, BuiTableCell, BuiTableContainer, BuiTableFooter, BuiTableHead, BuiTableHeader, BuiTableRow, BuiTabs, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiTypography, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map