codexly-ui 0.10.94 → 0.10.95

package/fesm2022/codexly-ui.mjs

@@ -1448,6 +1448,8 @@ class ClxCardComponent {
     /** Set to false to drop the card's border entirely (e.g. a shadow-only card matching a
      *  product-cart-style layout) regardless of variant/color. */
     border = input(true, ...(ngDevMode ? [{ debugName: "border" }] : /* istanbul ignore next */ []));
+    /** Per-instance border-radius override — falls back to the theme's global borderRadius when unset. */
+    radius = input(undefined, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
     /** Auto-generated header icon (Material Symbols name) — shown in a rounded primary-subtle
      *  square next to headerTitle. Ignored when a manual [clxCardHeader] block is projected. */
     icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
@@ -1497,10 +1499,11 @@ class ClxCardComponent {
             variantClass = `bg-clx-surface-2 border border-transparent ${shadowClass}`;
         }
         const disabledCls = this.disabled() ? 'opacity-50' : '';
-        return `flex flex-col ${resolveContainerRadius(this._themeSvc.config().borderRadius)} overflow-hidden w-full ${variantClass} ${hover} ${disabledCls}`.trim();
+        const radius = this.radius() ?? this._themeSvc.config().borderRadius;
+        return `flex flex-col ${resolveContainerRadius(radius)} overflow-hidden w-full ${variantClass} ${hover} ${disabledCls}`.trim();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_headerActionsSlot", first: true, predicate: ClxCardHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_headerActionsSlot", first: true, predicate: ClxCardHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (_hasHeader()) {
       <div class="clx-card-header flex items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <ng-content select="[clxCardHeader]" />
@@ -1592,7 +1595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _headerActionsSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderActionsDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], border: [{ type: i0.Input, args: [{ isSignal: true, alias: "border", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _headerActionsSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderActionsDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
 
 const COLLAPSE_SIZE_MAP = {
     sm: { header: 'px-3 py-2.5', label: 'text-sm', icon: 'xs', chevron: 'xs' },
@@ -1643,6 +1646,13 @@ class ClxCollapseComponent {
      *  own bordered block — leave false when stacking several inside one clx-card, where the
      *  parent already handles separation between sections. */
     bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** Top divider drawn above this instance — set on every collapse in a stack except the first
+     *  (or let the parent handle separation and leave this 'none', the default). */
+    divider = input('none', ...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
+    /** Divider line thickness in pixels — the default 2 matches the app's own border-t-2 dividers;
+     *  raise it if you want a chunkier separator (e.g. mimicking a ticket-style perforation) without
+     *  reaching for custom CSS. */
+    dividerThickness = input(2, ...(ngDevMode ? [{ debugName: "dividerThickness" }] : /* istanbul ignore next */ []));
     /** Two-way bindable: [(expanded)]="..." */
     expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
@@ -1662,6 +1672,7 @@ class ClxCollapseComponent {
         const color = this.disabled() ? CLX_TEXT_DISABLED : CLX_TEXT_LABEL;
         return `${s.label} font-semibold ${color}`;
     }, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
+    _dividerClass = computed(() => this.divider() === 'dashed' ? 'border-t border-dashed border-clx-border' : 'border-t border-clx-border', ...(ngDevMode ? [{ debugName: "_dividerClass" }] : /* istanbul ignore next */ []));
     _headerClass = computed(() => {
         const s = this._sizeConfig();
         const border = this.bordered() ? 'border border-clx-border rounded-lg' : '';
@@ -1679,7 +1690,10 @@ class ClxCollapseComponent {
         this.expanded.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCollapseComponent, isStandalone: true, selector: "clx-collapse", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "flex flex-col w-full" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCollapseComponent, isStandalone: true, selector: "clx-collapse", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, dividerThickness: { classPropertyName: "dividerThickness", publicName: "dividerThickness", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { classAttribute: "flex flex-col w-full" }, ngImport: i0, template: `
+    @if (divider() !== 'none') {
+      <div [class]="_dividerClass()" [style.border-top-width.px]="dividerThickness()"></div>
+    }
     <button type="button" [class]="_headerClass()" [disabled]="disabled()"
       [attr.aria-expanded]="expanded()" (click)="toggle()">
       @if (icon()) {
@@ -1709,6 +1723,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     standalone: true,
                     imports: [ClxIconComponent],
                     template: `
+    @if (divider() !== 'none') {
+      <div [class]="_dividerClass()" [style.border-top-width.px]="dividerThickness()"></div>
+    }
     <button type="button" [class]="_headerClass()" [disabled]="disabled()"
       [attr.aria-expanded]="expanded()" (click)="toggle()">
       @if (icon()) {
@@ -1734,7 +1751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'flex flex-col w-full' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], dividerThickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerThickness", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
 
 const CLX_LIST_CONTEXT = new InjectionToken('CLX_LIST_CONTEXT');
 // ── Variant maps ──────────────────────────────────────────────────────────────