@xui/label 2.0.0-alpha.20 → 2.0.0-alpha.22

package/fesm2022/xui-label.mjs

@@ -30,13 +30,31 @@ const labelVariants = cva([
         error: 'auto'
     }
 });
+/**
+ * Styles a `<label>` and keeps it in step with the control it names.
+ *
+ * ```html
+ * <label xuiLabel for="email">Email</label>
+ * <label xuiLabel>Email <input xuiInput /></label>
+ * ```
+ *
+ * Composes `XLabel` from `@xui/core/label`, so it mirrors the bound control's `ng-invalid`/`ng-touched`
+ * state and its `data-disabled`: an invalid, touched field turns its label red and a disabled one dims
+ * it, with no binding on the label itself.
+ */
 class XuiLabel {
     // TODO: check the implementation of this component
     xLabel = inject(XLabel, { host: true });
+    /** Extra classes, merged into the directive's own rather than replacing them. */
     class = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Reserved for future label styles; `default` is currently the only one. */
     variant = input('default', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to render the error appearance. `auto` (the default) follows the wrapped control's
+     * `ng-invalid.ng-touched` state; `true` forces it on for a control the label cannot see.
+     */
     error = input('auto', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     /** Follows the `error` input until `setError` overrides it. */

package/fesm2022/xui-label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"xui-label.mjs","sources":["../../../../../../libs/ui/label/xui/src/lib/label.ts","../../../../../../libs/ui/label/xui/src/index.ts","../../../../../../libs/ui/label/xui/src/xui-label.ts"],"sourcesContent":["import { Directive, computed, inject, input, linkedSignal } from '@angular/core';\nimport { xui } from '@xui/core';\nimport { XLabel } from '@xui/core/label';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\n\n// TODO: theme - disabled, etc.\nexport const labelVariants = cva(\n  [\n    'text-sm font-medium leading-none',\n    '[&.ng-invalid.ng-touched]:text-error',\n    '[&>[xuiInput]]:my-1 [&:has([xuiInput]:disabled)]:cursor-not-allowed [&:has([xuiInput]:disabled)]:opacity-70'\n  ],\n  {\n    variants: {\n      variant: {\n        default: ''\n      },\n      error: {\n        auto: '[&:has([xuiInput].ng-invalid.ng-touched)]:text-error',\n        true: 'text-error'\n      },\n      disabled: {\n        auto: '[&:has([xuiInput]:disabled)]:opacity-70',\n        true: 'opacity-70',\n        false: ''\n      }\n    },\n    defaultVariants: {\n      variant: 'default',\n      error: 'auto'\n    }\n  }\n);\nexport type XuiLabelVariants = VariantProps<typeof labelVariants>;\n\n@Directive({\n  selector: '[xuiLabel]',\n  exportAs: 'xuiLabel',\n  hostDirectives: [\n    {\n      directive: XLabel,\n      inputs: ['id']\n    }\n  ],\n  host: {\n    '[class]': 'computedClass()'\n  }\n})\nexport class XuiLabel {\n  // TODO: check the implementation of this component\n\n  private readonly xLabel = inject(XLabel, { host: true });\n\n  readonly class = input<ClassValue>('');\n  readonly variant = input<XuiLabelVariants['variant']>('default');\n  readonly error = input<XuiLabelVariants['error']>('auto');\n\n  /** Follows the `error` input until `setError` overrides it. */\n  private readonly errorState = linkedSignal(this.error);\n\n  protected readonly computedClass = computed(() =>\n    xui(\n      labelVariants({\n        variant: this.variant(),\n        error: this.errorState(),\n        disabled: this.xLabel?.dataDisabled() ?? 'auto'\n      }),\n      this.class()\n    )\n  );\n\n  setError(error: XuiLabelVariants['error']): void {\n    this.errorState.set(error);\n  }\n}\n","import { XuiLabel } from './lib/label';\n\nexport * from './lib/label';\n\nexport const XuiLabelImports = [XuiLabel] 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-label.mjs","sources":["../../../../../../libs/ui/label/xui/src/lib/label.ts","../../../../../../libs/ui/label/xui/src/index.ts","../../../../../../libs/ui/label/xui/src/xui-label.ts"],"sourcesContent":["import { Directive, computed, inject, input, linkedSignal } from '@angular/core';\nimport { xui } from '@xui/core';\nimport { XLabel } from '@xui/core/label';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport type { ClassValue } from 'clsx';\n\n// TODO: theme - disabled, etc.\nexport const labelVariants = cva(\n  [\n    'text-sm font-medium leading-none',\n    '[&.ng-invalid.ng-touched]:text-error',\n    '[&>[xuiInput]]:my-1 [&:has([xuiInput]:disabled)]:cursor-not-allowed [&:has([xuiInput]:disabled)]:opacity-70'\n  ],\n  {\n    variants: {\n      variant: {\n        default: ''\n      },\n      error: {\n        auto: '[&:has([xuiInput].ng-invalid.ng-touched)]:text-error',\n        true: 'text-error'\n      },\n      disabled: {\n        auto: '[&:has([xuiInput]:disabled)]:opacity-70',\n        true: 'opacity-70',\n        false: ''\n      }\n    },\n    defaultVariants: {\n      variant: 'default',\n      error: 'auto'\n    }\n  }\n);\nexport type XuiLabelVariants = VariantProps<typeof labelVariants>;\n\n/**\n * Styles a `<label>` and keeps it in step with the control it names.\n *\n * ```html\n * <label xuiLabel for=\"email\">Email</label>\n * <label xuiLabel>Email <input xuiInput /></label>\n * ```\n *\n * Composes `XLabel` from `@xui/core/label`, so it mirrors the bound control's `ng-invalid`/`ng-touched`\n * state and its `data-disabled`: an invalid, touched field turns its label red and a disabled one dims\n * it, with no binding on the label itself.\n */\n@Directive({\n  selector: '[xuiLabel]',\n  exportAs: 'xuiLabel',\n  hostDirectives: [\n    {\n      directive: XLabel,\n      inputs: ['id']\n    }\n  ],\n  host: {\n    '[class]': 'computedClass()'\n  }\n})\nexport class XuiLabel {\n  // TODO: check the implementation of this component\n\n  private readonly xLabel = inject(XLabel, { host: true });\n\n  /** Extra classes, merged into the directive's own rather than replacing them. */\n  readonly class = input<ClassValue>('');\n  /** Reserved for future label styles; `default` is currently the only one. */\n  readonly variant = input<XuiLabelVariants['variant']>('default');\n  /**\n   * Whether to render the error appearance. `auto` (the default) follows the wrapped control's\n   * `ng-invalid.ng-touched` state; `true` forces it on for a control the label cannot see.\n   */\n  readonly error = input<XuiLabelVariants['error']>('auto');\n\n  /** Follows the `error` input until `setError` overrides it. */\n  private readonly errorState = linkedSignal(this.error);\n\n  protected readonly computedClass = computed(() =>\n    xui(\n      labelVariants({\n        variant: this.variant(),\n        error: this.errorState(),\n        disabled: this.xLabel?.dataDisabled() ?? 'auto'\n      }),\n      this.class()\n    )\n  );\n\n  setError(error: XuiLabelVariants['error']): void {\n    this.errorState.set(error);\n  }\n}\n","import { XuiLabel } from './lib/label';\n\nexport * from './lib/label';\n\nexport const XuiLabelImports = [XuiLabel] 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/label",
-  "version": "2.0.0-alpha.20",
+  "version": "2.0.0-alpha.22",
   "description": "Modern Angular 22 UI Library based on TailwindCSS",
   "keywords": [
     "angular",
@@ -37,7 +37,7 @@
   },
   "peerDependencies": {
     "@angular/core": "22",
-    "@xui/core": "2.0.0-alpha.20",
+    "@xui/core": "2.0.0-alpha.22",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1"
   },

package/types/xui-label.d.ts

@@ -10,10 +10,28 @@ declare const labelVariants: (props?: ({
     disabled?: boolean | "auto" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type XuiLabelVariants = VariantProps<typeof labelVariants>;
+/**
+ * Styles a `<label>` and keeps it in step with the control it names.
+ *
+ * ```html
+ * <label xuiLabel for="email">Email</label>
+ * <label xuiLabel>Email <input xuiInput /></label>
+ * ```
+ *
+ * Composes `XLabel` from `@xui/core/label`, so it mirrors the bound control's `ng-invalid`/`ng-touched`
+ * state and its `data-disabled`: an invalid, touched field turns its label red and a disabled one dims
+ * it, with no binding on the label itself.
+ */
 declare class XuiLabel {
     private readonly xLabel;
+    /** Extra classes, merged into the directive's own rather than replacing them. */
     readonly class: _angular_core.InputSignal<ClassValue>;
+    /** Reserved for future label styles; `default` is currently the only one. */
     readonly variant: _angular_core.InputSignal<"default" | null | undefined>;
+    /**
+     * Whether to render the error appearance. `auto` (the default) follows the wrapped control's
+     * `ng-invalid.ng-touched` state; `true` forces it on for a control the label cannot see.
+     */
     readonly error: _angular_core.InputSignal<boolean | "auto" | null | undefined>;
     /** Follows the `error` input until `setError` overrides it. */
     private readonly errorState;