@arclux/arc-ui-angular 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-angular",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Angular standalone component wrappers for ARC UI Web Components.",
   "type": "module",
   "main": "src/index.ts",
@@ -44,7 +44,7 @@
     "@angular/core": ">=17.0.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.0.0"
+    "@arclux/arc-ui": "1.2.0"
   },
   "license": "MIT",
   "keywords": [

package/src/content/Card.ts

@@ -7,8 +7,9 @@ import '@arclux/arc-ui';
   selector: 'arc-card',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-card [attr.href]="href"><ng-content /></arc-card>`,
+  template: `<arc-card [attr.href]="href" [attr._hasFooter]="_hasFooter"><ng-content /></arc-card>`,
 })
 export class Card {
   @Input() href: string = '';
+  @Input() _hasFooter: string = false;
 }

package/src/content/CtaBanner.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-cta-banner',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-cta-banner [attr.eyebrow]="eyebrow" [attr.headline]="headline" [nogradient]="nogradient"><ng-content /></arc-cta-banner>`,
+})
+export class CtaBanner {
+  @Input() eyebrow: string = '';
+  @Input() headline: string = '';
+  @Input() nogradient: boolean = false;
+}

package/src/content/Tag.ts

@@ -7,11 +7,12 @@ import '@arclux/arc-ui';
   selector: 'arc-tag',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-tag [attr.variant]="variant" [removable]="removable" [disabled]="disabled" (arc-remove)="arcRemove.emit($event)"><ng-content /></arc-tag>`,
+  template: `<arc-tag [attr.variant]="variant" [removable]="removable" [disabled]="disabled" [attr.color]="color" (arc-remove)="arcRemove.emit($event)"><ng-content /></arc-tag>`,
 })
 export class Tag {
   @Input() variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' = 'default';
   @Input() removable: boolean = false;
   @Input() disabled: boolean = false;
+  @Input() color: string = '';
   @Output() arcRemove = new EventEmitter<CustomEvent>();
 }

package/src/content/index.ts

@@ -35,3 +35,4 @@ export { DataTable } from './DataTable.js';
 export { InfiniteScroll } from './InfiniteScroll.js';
 export { Tag } from './Tag.js';
 export { Truncate } from './Truncate.js';
+export { CtaBanner } from './CtaBanner.js';

package/src/index.ts

@@ -114,3 +114,4 @@ export { Truncate } from './reactive/Truncate.js';
 export { MenuDivider } from './shared/MenuDivider.js';
 export { MenuItem } from './shared/MenuItem.js';
 export { Option } from './shared/Option.js';
+export { CtaBanner } from './content/CtaBanner.js';

package/src/input/Button.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   selector: 'arc-button',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-button [attr.variant]="variant" [attr.size]="size" [attr.href]="href" [disabled]="disabled" [attr.type]="type"><ng-content /></arc-button>`,
+  template: `<arc-button [attr.variant]="variant" [attr.size]="size" [attr.href]="href" [disabled]="disabled" [attr.type]="type" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix"><ng-content /></arc-button>`,
 })
 export class Button {
   @Input() variant: 'primary' | 'secondary' | 'ghost' = 'primary';
@@ -15,4 +15,6 @@ export class Button {
   @Input() href: string = '';
   @Input() disabled: boolean = false;
   @Input() type: string = 'button';
+  @Input() _hasPrefix: string = false;
+  @Input() _hasSuffix: string = false;
 }

package/src/input/Form.ts

@@ -7,12 +7,17 @@ import '@arclux/arc-ui';
   selector: 'arc-form',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-form [attr.action]="action" [attr.method]="method" [novalidate]="novalidate" (arc-invalid)="arcInvalid.emit($event)" (arc-submit)="arcSubmit.emit($event)"><ng-content /></arc-form>`,
+  template: `<arc-form [attr.action]="action" [attr.method]="method" [novalidate]="novalidate" [loading]="loading" [disabled]="disabled" [errorSummary]="errorSummary" [attr._errors]="_errors" (arc-invalid)="arcInvalid.emit($event)" (arc-submit)="arcSubmit.emit($event)" (arc-reset)="arcReset.emit($event)"><ng-content /></arc-form>`,
 })
 export class Form {
   @Input() action: string = '';
   @Input() method: string = '';
   @Input() novalidate: boolean = false;
+  @Input() loading: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() errorSummary: boolean = true;
+  @Input() _errors: string = [];
   @Output() arcInvalid = new EventEmitter<CustomEvent>();
   @Output() arcSubmit = new EventEmitter<CustomEvent>();
+  @Output() arcReset = new EventEmitter<CustomEvent>();
 }

package/src/input/Input.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   selector: 'arc-input',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-input [attr.type]="type" [attr.name]="name" [attr.label]="label" [attr.placeholder]="placeholder" [attr.value]="value" [disabled]="disabled" [required]="required" [multiline]="multiline" [attr.rows]="rows" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-input>`,
+  template: `<arc-input [attr.type]="type" [attr.name]="name" [attr.label]="label" [attr.placeholder]="placeholder" [attr.value]="value" [disabled]="disabled" [required]="required" [multiline]="multiline" [attr.rows]="rows" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-input>`,
 })
 export class Input {
   @Input() type: string = 'text';
@@ -19,6 +19,8 @@ export class Input {
   @Input() required: boolean = false;
   @Input() multiline: boolean = false;
   @Input() rows: number = 5;
+  @Input() _hasPrefix: string = false;
+  @Input() _hasSuffix: string = false;
   @Output() arcInput = new EventEmitter<CustomEvent>();
   @Output() arcChange = new EventEmitter<CustomEvent>();
 }

package/src/layout/PageHeader.ts

@@ -7,9 +7,10 @@ import '@arclux/arc-ui';
   selector: 'arc-page-header',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-page-header [attr.heading]="heading" [attr.description]="description"><ng-content /></arc-page-header>`,
+  template: `<arc-page-header [attr.heading]="heading" [attr.description]="description" [border]="border"><ng-content /></arc-page-header>`,
 })
 export class PageHeader {
   @Input() heading: string = '';
   @Input() description: string = '';
+  @Input() border: boolean = false;
 }

package/src/navigation/NavItem.ts

@@ -7,10 +7,11 @@ import '@arclux/arc-ui';
   selector: 'arc-nav-item',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-nav-item [attr.href]="href" [active]="active" [attr.description]="description"><ng-content /></arc-nav-item>`,
+  template: `<arc-nav-item [attr.href]="href" [active]="active" [muted]="muted" [attr.description]="description"><ng-content /></arc-nav-item>`,
 })
 export class NavItem {
   @Input() href: string = '';
   @Input() active: boolean = false;
+  @Input() muted: boolean = false;
   @Input() description: string = '';
 }