@xui/section 2.0.0-alpha.20 → 2.0.0-alpha.21

package/fesm2022/xui-section.mjs

@@ -51,13 +51,16 @@ class XuiSection {
     /** The user-defined classes. Merged last so they win over the variant classes. */
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Drop-shadow depth of the section's card. */
     elevation = input(this.config.elevation, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "elevation" }] : /* istanbul ignore next */ []));
     /** The header only renders when there is a title. */
     title = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Secondary text beside the title in the header. */
     subtitle = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Let the header fold the section's body away. */
     collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Reduce the header padding. */
     compact = input(this.config.compact, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });

package/fesm2022/xui-section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"xui-section.mjs","sources":["../../../../../../libs/ui/section/xui/src/lib/section.token.ts","../../../../../../libs/ui/section/xui/src/lib/section.ts","../../../../../../libs/ui/section/xui/src/index.ts","../../../../../../libs/ui/section/xui/src/xui-section.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\nimport type { XuiSectionVariants } from './section';\n\n/**\n * Application-wide defaults for XuiSection.\n *\n * Provide it once at the app root to re-skin every section without touching\n * call sites; individual inputs still override the configured value.\n */\nexport interface XuiSectionConfig {\n  elevation: XuiSectionVariants['elevation'];\n  /** Reduce the header padding. */\n  compact: boolean;\n}\n\nexport const [injectXuiSectionConfig, provideXuiSectionConfig] = createXConfigToken<XuiSectionConfig>(\n  'XuiSectionConfig',\n  {\n    elevation: 0,\n    compact: false\n  }\n);\n","import type { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matExpandMoreRound } from '@ng-icons/material-icons/round';\nimport { XuiCollapseImports } from '@xui/collapse';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport { XuiIcon } from '@xui/icon';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\nimport { injectXuiSectionConfig } from './section.token';\n\nexport const sectionVariants = cva('bg-surface-raised border-border block overflow-hidden rounded-lg border', {\n  variants: {\n    elevation: {\n      0: 'shadow-elevation-0',\n      1: 'shadow-elevation-1'\n    }\n  },\n  defaultVariants: {\n    elevation: 0\n  }\n});\n\nexport type XuiSectionVariants = VariantProps<typeof sectionVariants>;\n\n/**\n * A titled container for a group of related content.\n *\n * ```html\n * <xui-section title=\"Details\" subtitle=\"Everything about this record\" collapsible>\n *   <button xuiButton right-element size=\"sm\">Edit</button>\n *   <div xuiSectionCard>…</div>\n * </xui-section>\n * ```\n *\n * When `collapsible`, the header becomes a button wired to the panel with\n * `aria-expanded`/`aria-controls`, so the disclosure is operable by keyboard and\n * announced correctly. `open` is a model, so it works both uncontrolled and\n * bound.\n *\n * The projected body goes through a single `ng-template` rendered into one of\n * two places. Putting an `ng-content` in each branch instead would not work:\n * projection slots are static, so only the first would ever receive content.\n */\n@Component({\n  selector: 'xui-section',\n  imports: [NgIcon, NgTemplateOutlet, XuiIcon, XuiCollapseImports],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ matExpandMoreRound })],\n  template: `\n    @if (title()) {\n      <div [class]=\"computedHeaderClass()\">\n        @if (collapsible()) {\n          <button\n            type=\"button\"\n            class=\"-m-1 flex min-w-0 flex-1 items-center gap-2 rounded p-1 text-start\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"panelId\"\n            (click)=\"open.set(!open())\"\n          >\n            <ng-icon\n              xui\n              size=\"sm\"\n              name=\"matExpandMoreRound\"\n              class=\"text-foreground-muted shrink-0 transition-transform duration-200\"\n              [class.-rotate-90]=\"!open()\"\n            />\n            <ng-container *ngTemplateOutlet=\"titleBlock\" />\n          </button>\n        } @else {\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n            <ng-container *ngTemplateOutlet=\"titleBlock\" />\n          </div>\n        }\n\n        <div class=\"flex shrink-0 items-center gap-2 empty:hidden\">\n          <ng-content select=\"[right-element]\" />\n        </div>\n      </div>\n    }\n\n    <ng-template #titleBlock>\n      <span class=\"flex min-w-0 flex-col\">\n        <span class=\"text-foreground truncate font-semibold\">{{ title() }}</span>\n        @if (subtitle()) {\n          <span class=\"text-foreground-muted truncate text-sm\">{{ subtitle() }}</span>\n        }\n      </span>\n    </ng-template>\n\n    <!-- Body: rendered through one template, see the note on the class. -->\n    <ng-template #body><ng-content /></ng-template>\n\n    @if (collapsible()) {\n      <xui-collapse [id]=\"panelId\" [open]=\"open()\">\n        <ng-container *ngTemplateOutlet=\"body\" />\n      </xui-collapse>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"body\" />\n    }\n  `,\n  host: {\n    '[class]': 'computedClass()'\n  }\n})\nexport class XuiSection {\n  protected readonly panelId = uniqueId('xui-section-panel');\n  private readonly config = injectXuiSectionConfig();\n\n  /** The user-defined classes. Merged last so they win over the variant classes. */\n  readonly class = input<ClassValue>('');\n  readonly elevation = input<XuiSectionVariants['elevation']>(this.config.elevation);\n\n  /** The header only renders when there is a title. */\n  readonly title = input<string | null>(null);\n  readonly subtitle = input<string | null>(null);\n\n  readonly collapsible = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n  /** Reduce the header padding. */\n  readonly compact = input<boolean, BooleanInput>(this.config.compact, { transform: booleanAttribute });\n\n  /** Open state of a collapsible section. Works bound or unbound. */\n  readonly open = model(true);\n\n  protected readonly computedClass = computed(() =>\n    xui(sectionVariants({ elevation: this.elevation() }), this.class())\n  );\n\n  protected readonly computedHeaderClass = computed(() =>\n    xui('border-border flex items-center gap-2 border-b', this.compact() ? 'px-3 py-2' : 'px-4 py-3')\n  );\n}\n\n/**\n * A padded content panel inside a section.\n *\n * A section can hold several, separated by hairlines — which is how a section\n * splits into rows without each one needing its own frame.\n */\n@Component({\n  selector: 'xui-section-card',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  template: '<ng-content />',\n  host: {\n    '[class]': 'computedClass()'\n  }\n})\nexport class XuiSectionCard {\n  /** The user-defined classes. Merged last so they win over the base classes. */\n  readonly class = input<ClassValue>('');\n\n  /** Turn off the internal padding for content that supplies its own. */\n  readonly padded = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n\n  protected readonly computedClass = computed(() =>\n    xui('border-border block border-b last:border-b-0', this.padded() && 'p-4', this.class())\n  );\n}\n","import { XuiSection, XuiSectionCard } from './lib/section';\n\nexport * from './lib/section';\nexport * from './lib/section.token';\n\nexport const XuiSectionImports = [XuiSection, XuiSectionCard] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"xui-section.mjs","sources":["../../../../../../libs/ui/section/xui/src/lib/section.token.ts","../../../../../../libs/ui/section/xui/src/lib/section.ts","../../../../../../libs/ui/section/xui/src/index.ts","../../../../../../libs/ui/section/xui/src/xui-section.ts"],"sourcesContent":["import { createXConfigToken } from '@xui/core';\nimport type { XuiSectionVariants } from './section';\n\n/**\n * Application-wide defaults for XuiSection.\n *\n * Provide it once at the app root to re-skin every section without touching\n * call sites; individual inputs still override the configured value.\n */\nexport interface XuiSectionConfig {\n  elevation: XuiSectionVariants['elevation'];\n  /** Reduce the header padding. */\n  compact: boolean;\n}\n\nexport const [injectXuiSectionConfig, provideXuiSectionConfig] = createXConfigToken<XuiSectionConfig>(\n  'XuiSectionConfig',\n  {\n    elevation: 0,\n    compact: false\n  }\n);\n","import type { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  model,\n  ViewEncapsulation\n} from '@angular/core';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matExpandMoreRound } from '@ng-icons/material-icons/round';\nimport { XuiCollapseImports } from '@xui/collapse';\nimport { xui } from '@xui/core';\nimport { uniqueId } from '@xui/core/a11y';\nimport { XuiIcon } from '@xui/icon';\nimport { cva, VariantProps } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\nimport { injectXuiSectionConfig } from './section.token';\n\nexport const sectionVariants = cva('bg-surface-raised border-border block overflow-hidden rounded-lg border', {\n  variants: {\n    elevation: {\n      0: 'shadow-elevation-0',\n      1: 'shadow-elevation-1'\n    }\n  },\n  defaultVariants: {\n    elevation: 0\n  }\n});\n\nexport type XuiSectionVariants = VariantProps<typeof sectionVariants>;\n\n/**\n * A titled container for a group of related content.\n *\n * ```html\n * <xui-section title=\"Details\" subtitle=\"Everything about this record\" collapsible>\n *   <button xuiButton right-element size=\"sm\">Edit</button>\n *   <div xuiSectionCard>…</div>\n * </xui-section>\n * ```\n *\n * When `collapsible`, the header becomes a button wired to the panel with\n * `aria-expanded`/`aria-controls`, so the disclosure is operable by keyboard and\n * announced correctly. `open` is a model, so it works both uncontrolled and\n * bound.\n *\n * The projected body goes through a single `ng-template` rendered into one of\n * two places. Putting an `ng-content` in each branch instead would not work:\n * projection slots are static, so only the first would ever receive content.\n */\n@Component({\n  selector: 'xui-section',\n  imports: [NgIcon, NgTemplateOutlet, XuiIcon, XuiCollapseImports],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ matExpandMoreRound })],\n  template: `\n    @if (title()) {\n      <div [class]=\"computedHeaderClass()\">\n        @if (collapsible()) {\n          <button\n            type=\"button\"\n            class=\"-m-1 flex min-w-0 flex-1 items-center gap-2 rounded p-1 text-start\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"panelId\"\n            (click)=\"open.set(!open())\"\n          >\n            <ng-icon\n              xui\n              size=\"sm\"\n              name=\"matExpandMoreRound\"\n              class=\"text-foreground-muted shrink-0 transition-transform duration-200\"\n              [class.-rotate-90]=\"!open()\"\n            />\n            <ng-container *ngTemplateOutlet=\"titleBlock\" />\n          </button>\n        } @else {\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n            <ng-container *ngTemplateOutlet=\"titleBlock\" />\n          </div>\n        }\n\n        <div class=\"flex shrink-0 items-center gap-2 empty:hidden\">\n          <ng-content select=\"[right-element]\" />\n        </div>\n      </div>\n    }\n\n    <ng-template #titleBlock>\n      <span class=\"flex min-w-0 flex-col\">\n        <span class=\"text-foreground truncate font-semibold\">{{ title() }}</span>\n        @if (subtitle()) {\n          <span class=\"text-foreground-muted truncate text-sm\">{{ subtitle() }}</span>\n        }\n      </span>\n    </ng-template>\n\n    <!-- Body: rendered through one template, see the note on the class. -->\n    <ng-template #body><ng-content /></ng-template>\n\n    @if (collapsible()) {\n      <xui-collapse [id]=\"panelId\" [open]=\"open()\">\n        <ng-container *ngTemplateOutlet=\"body\" />\n      </xui-collapse>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"body\" />\n    }\n  `,\n  host: {\n    '[class]': 'computedClass()'\n  }\n})\nexport class XuiSection {\n  protected readonly panelId = uniqueId('xui-section-panel');\n  private readonly config = injectXuiSectionConfig();\n\n  /** The user-defined classes. Merged last so they win over the variant classes. */\n  readonly class = input<ClassValue>('');\n  /** Drop-shadow depth of the section's card. */\n  readonly elevation = input<XuiSectionVariants['elevation']>(this.config.elevation);\n\n  /** The header only renders when there is a title. */\n  readonly title = input<string | null>(null);\n  /** Secondary text beside the title in the header. */\n  readonly subtitle = input<string | null>(null);\n\n  /** Let the header fold the section's body away. */\n  readonly collapsible = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\n\n  /** Reduce the header padding. */\n  readonly compact = input<boolean, BooleanInput>(this.config.compact, { transform: booleanAttribute });\n\n  /** Open state of a collapsible section. Works bound or unbound. */\n  readonly open = model(true);\n\n  protected readonly computedClass = computed(() =>\n    xui(sectionVariants({ elevation: this.elevation() }), this.class())\n  );\n\n  protected readonly computedHeaderClass = computed(() =>\n    xui('border-border flex items-center gap-2 border-b', this.compact() ? 'px-3 py-2' : 'px-4 py-3')\n  );\n}\n\n/**\n * A padded content panel inside a section.\n *\n * A section can hold several, separated by hairlines — which is how a section\n * splits into rows without each one needing its own frame.\n */\n@Component({\n  selector: 'xui-section-card',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  template: '<ng-content />',\n  host: {\n    '[class]': 'computedClass()'\n  }\n})\nexport class XuiSectionCard {\n  /** The user-defined classes. Merged last so they win over the base classes. */\n  readonly class = input<ClassValue>('');\n\n  /** Turn off the internal padding for content that supplies its own. */\n  readonly padded = input<boolean, BooleanInput>(true, { transform: booleanAttribute });\n\n  protected readonly computedClass = computed(() =>\n    xui('border-border block border-b last:border-b-0', this.padded() && 'p-4', this.class())\n  );\n}\n","import { XuiSection, XuiSectionCard } from './lib/section';\n\nexport * from './lib/section';\nexport * from './lib/section.token';\n\nexport const XuiSectionImports = [XuiSection, XuiSectionCard] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xui/section",
-  "version": "2.0.0-alpha.20",
+  "version": "2.0.0-alpha.21",
   "description": "Modern Angular 22 UI Library based on TailwindCSS",
   "keywords": [
     "angular",
@@ -41,9 +41,9 @@
     "@angular/core": "22",
     "@ng-icons/core": "^34.0.0",
     "@ng-icons/material-icons": "^34.0.0",
-    "@xui/collapse": "2.0.0-alpha.20",
-    "@xui/core": "2.0.0-alpha.20",
-    "@xui/icon": "2.0.0-alpha.20",
+    "@xui/collapse": "2.0.0-alpha.21",
+    "@xui/core": "2.0.0-alpha.21",
+    "@xui/icon": "2.0.0-alpha.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1"
   },

package/types/xui-section.d.ts

@@ -32,10 +32,13 @@ declare class XuiSection {
     private readonly config;
     /** The user-defined classes. Merged last so they win over the variant classes. */
     readonly class: _angular_core.InputSignal<ClassValue>;
+    /** Drop-shadow depth of the section's card. */
     readonly elevation: _angular_core.InputSignal<0 | 1 | null | undefined>;
     /** The header only renders when there is a title. */
     readonly title: _angular_core.InputSignal<string | null>;
+    /** Secondary text beside the title in the header. */
     readonly subtitle: _angular_core.InputSignal<string | null>;
+    /** Let the header fold the section's body away. */
     readonly collapsible: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
     /** Reduce the header padding. */
     readonly compact: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;