ng-blatui 1.17.0 → 1.18.0

package/fesm2022/ng-blatui.mjs

@@ -4983,6 +4983,227 @@ 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"] }], 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 }] }] } });
 
+/**
+ * A terminal / console window (always dark). Put prompt + output lines in the content;
+ * helper classes `.prompt .ok .dim .path .warn` colour them.
+ */
+class BuiTerminal {
+    title = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    buttons = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    computedClass = computed(() => cn('block overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950 text-zinc-100 shadow-md', 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: BuiTerminal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiTerminal, isStandalone: true, selector: "bui-terminal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "terminal" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <div
+      data-slot="terminal-bar"
+      class="flex items-center gap-2 border-b border-white/10 bg-zinc-900 px-3.5 py-2.5"
+    >
+      @if (buttons()) {
+        <span class="size-3 rounded-full" style="background:#ff5f57"></span>
+        <span class="size-3 rounded-full" style="background:#febc2e"></span>
+        <span class="size-3 rounded-full" style="background:#28c840"></span>
+      }
+      @if (title()) {
+        <span
+          data-slot="terminal-title"
+          class="truncate font-mono text-xs text-zinc-400"
+          [class.ml-2]="buttons()"
+          >{{ title() }}</span
+        >
+      }
+    </div>
+    <div
+      data-slot="terminal-body"
+      class="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed [&_.dim]:text-zinc-400 [&_.ok]:text-emerald-400 [&_.path]:text-cyan-400 [&_.prompt]:text-emerald-400 [&_.warn]:text-amber-400"
+    >
+      <ng-content />
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiTerminal, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-terminal',
+                    host: { 'data-slot': 'terminal', '[class]': 'computedClass()' },
+                    template: `
+    <div
+      data-slot="terminal-bar"
+      class="flex items-center gap-2 border-b border-white/10 bg-zinc-900 px-3.5 py-2.5"
+    >
+      @if (buttons()) {
+        <span class="size-3 rounded-full" style="background:#ff5f57"></span>
+        <span class="size-3 rounded-full" style="background:#febc2e"></span>
+        <span class="size-3 rounded-full" style="background:#28c840"></span>
+      }
+      @if (title()) {
+        <span
+          data-slot="terminal-title"
+          class="truncate font-mono text-xs text-zinc-400"
+          [class.ml-2]="buttons()"
+          >{{ title() }}</span
+        >
+      }
+    </div>
+    <div
+      data-slot="terminal-body"
+      class="overflow-x-auto p-4 font-mono text-[13px] leading-relaxed [&_.dim]:text-zinc-400 [&_.ok]:text-emerald-400 [&_.path]:text-cyan-400 [&_.prompt]:text-emerald-400 [&_.warn]:text-amber-400"
+    >
+      <ng-content />
+    </div>
+  `,
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/** A data-driven feature-comparison / pricing table. */
+class BuiComparisonTable {
+    tiers = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tiers" }] : /* istanbul ignore next */ []));
+    rows = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    highlight = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlight" }] : /* istanbul ignore next */ []));
+    featureLabel = input('Feature', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "featureLabel" }] : /* istanbul ignore next */ []));
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    highlightIndex = computed(() => {
+        const highlight = this.highlight();
+        if (typeof highlight === 'number') {
+            return highlight;
+        }
+        return highlight === null ? -1 : this.tiers().indexOf(highlight);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlightIndex" }] : /* istanbul ignore next */ []));
+    computedClass = computed(() => cn('w-full overflow-x-auto rounded-xl border', 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: BuiComparisonTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: BuiComparisonTable, isStandalone: true, selector: "bui-comparison-table", inputs: { tiers: { classPropertyName: "tiers", publicName: "tiers", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, featureLabel: { classPropertyName: "featureLabel", publicName: "featureLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "comparison-table" }, properties: { "class": "computedClass()" } }, ngImport: i0, template: `
+    <table class="w-full text-sm">
+      <caption class="sr-only">
+        {{
+          featureLabel()
+        }}
+        comparison
+      </caption>
+      <thead>
+        <tr class="border-b bg-muted/40">
+          <th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+            {{ featureLabel() }}
+          </th>
+          @for (tier of tiers(); track tier) {
+            <th
+              scope="col"
+              class="px-4 py-3 text-center font-semibold"
+              [class]="$index === highlightIndex() ? 'text-primary' : ''"
+            >
+              {{ tier }}
+            </th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of rows(); track row.feature) {
+          <tr class="border-b last:border-0">
+            <th scope="row" class="px-4 py-3 text-left font-medium">{{ row.feature }}</th>
+            @for (value of row.values; track $index) {
+              <td
+                class="px-4 py-3 text-center"
+                [class]="$index === highlightIndex() ? 'bg-muted/30' : ''"
+              >
+                @if (value === true) {
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-label="Included"
+                    class="mx-auto size-4 text-primary"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                } @else if (value === false || value === null) {
+                  <span class="text-muted-foreground" aria-label="Not included">—</span>
+                } @else {
+                  {{ value }}
+                }
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BuiComparisonTable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bui-comparison-table',
+                    host: { 'data-slot': 'comparison-table', '[class]': 'computedClass()' },
+                    template: `
+    <table class="w-full text-sm">
+      <caption class="sr-only">
+        {{
+          featureLabel()
+        }}
+        comparison
+      </caption>
+      <thead>
+        <tr class="border-b bg-muted/40">
+          <th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+            {{ featureLabel() }}
+          </th>
+          @for (tier of tiers(); track tier) {
+            <th
+              scope="col"
+              class="px-4 py-3 text-center font-semibold"
+              [class]="$index === highlightIndex() ? 'text-primary' : ''"
+            >
+              {{ tier }}
+            </th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of rows(); track row.feature) {
+          <tr class="border-b last:border-0">
+            <th scope="row" class="px-4 py-3 text-left font-medium">{{ row.feature }}</th>
+            @for (value of row.values; track $index) {
+              <td
+                class="px-4 py-3 text-center"
+                [class]="$index === highlightIndex() ? 'bg-muted/30' : ''"
+              >
+                @if (value === true) {
+                  <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-label="Included"
+                    class="mx-auto size-4 text-primary"
+                  >
+                    <path d="M20 6 9 17l-5-5" />
+                  </svg>
+                } @else if (value === false || value === null) {
+                  <span class="text-muted-foreground" aria-label="Not included">—</span>
+                } @else {
+                  {{ value }}
+                }
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+                }]
+        }], propDecorators: { tiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "tiers", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], highlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlight", required: false }] }], featureLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /*
  * Public API Surface of ng-blatui
  */
@@ -4991,5 +5212,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, 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 };
+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, BuiComparisonTable, 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, BuiTerminal, BuiTextarea, BuiThemeCustomizer, BuiToggle, BuiTooltip, BuiTooltipContent, BuiTypography, BuiVisuallyHidden, THEME_TOKENS, ThemeStore, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=ng-blatui.mjs.map