@arclux/arc-ui-angular 1.10.0 → 1.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arclux/arc-ui-angular",
-  "version": "1.10.0",
+  "version": "1.10.2",
   "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.10.0"
+    "@arclux/arc-ui": "1.10.2"
   },
   "license": "MIT",
   "keywords": [

package/src/data/AnimatedNumber.ts

@@ -0,0 +1,20 @@
+// 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-animated-number',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-animated-number [attr.value]="value" [attr.duration]="duration" [attr.format]="format" [attr.prefix]="prefix" [attr.suffix]="suffix" [attr.decimals]="decimals" [attr.locale]="locale"><ng-content /></arc-animated-number>`,
+})
+export class AnimatedNumber {
+  @Input() value: number = 0;
+  @Input() duration: number = 1000;
+  @Input() format: string = 'number';
+  @Input() prefix: string = '';
+  @Input() suffix: string = '';
+  @Input() decimals: number = 0;
+  @Input() locale: string = 'en-US';
+}

package/src/data/Badge.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-badge',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-badge [attr.variant]="variant" [attr.size]="size" [attr.color]="color"><ng-content /></arc-badge>`,
+})
+export class Badge {
+  @Input() variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' = 'default';
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() color: string = '';
+}

package/src/data/DataTable.ts

@@ -0,0 +1,27 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-data-table',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-data-table [attr.rows]="rows" [sortable]="sortable" [selectable]="selectable" [attr.sortColumn]="sortColumn" [attr.sortDirection]="sortDirection" [virtual]="virtual" [attr.rowHeight]="rowHeight" [attr._columns]="_columns" [attr._selectedRows]="_selectedRows" [attr._startIndex]="_startIndex" [attr._visibleCount]="_visibleCount" (arc-sort)="arcSort.emit($event)" (arc-select-all)="arcSelectAll.emit($event)" (arc-row-select)="arcRowSelect.emit($event)"><ng-content /></arc-data-table>`,
+})
+export class DataTable {
+  @Input() rows: unknown[] = [];
+  @Input() sortable: boolean = false;
+  @Input() selectable: boolean = false;
+  @Input() sortColumn: string = '';
+  @Input() sortDirection: string = 'asc';
+  @Input() virtual: boolean = false;
+  @Input() rowHeight: number = 40;
+  @Input() _columns: string = [];
+  @Input() _selectedRows: string = 'new Set()';
+  @Input() _startIndex: string = 0;
+  @Input() _visibleCount: string = 0;
+  @Output() arcSort = new EventEmitter<CustomEvent>();
+  @Output() arcSelectAll = new EventEmitter<CustomEvent>();
+  @Output() arcRowSelect = new EventEmitter<CustomEvent>();
+}

package/src/data/List.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-list',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-list [attr.variant]="variant" [attr.size]="size" [selectable]="selectable" [multiple]="multiple" [attr.value]="value" [attr._items]="_items" (arc-change)="arcChange.emit($event)" (arc-item-click)="arcItemClick.emit($event)"><ng-content /></arc-list>`,
+})
+export class List {
+  @Input() variant: 'bordered' | 'separated' = 'default';
+  @Input() size: 'sm' | 'lg' = 'md';
+  @Input() selectable: boolean = false;
+  @Input() multiple: boolean = false;
+  @Input() value: string = '';
+  @Input() _items: string = [];
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+  @Output() arcItemClick = new EventEmitter<CustomEvent>();
+}

package/src/data/ListItem.ts

@@ -0,0 +1,21 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-list-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-list-item [attr.value]="value" [selected]="selected" [disabled]="disabled" [attr.href]="href" [attr._hasPrefix]="_hasPrefix" [attr._hasSuffix]="_hasSuffix" [attr._hasDescription]="_hasDescription" (arc-item-click)="arcItemClick.emit($event)"><ng-content /></arc-list-item>`,
+})
+export class ListItem {
+  @Input() value: string = '';
+  @Input() selected: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() href: string = '';
+  @Input() _hasPrefix: string = false;
+  @Input() _hasSuffix: string = false;
+  @Input() _hasDescription: string = false;
+  @Output() arcItemClick = new EventEmitter<CustomEvent>();
+}

package/src/data/Meter.ts

@@ -0,0 +1,20 @@
+// 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-meter',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-meter [attr.value]="value" [attr.min]="min" [attr.max]="max" [attr.low]="low" [attr.high]="high" [attr.optimum]="optimum" [attr.label]="label"><ng-content /></arc-meter>`,
+})
+export class Meter {
+  @Input() value: number = 0;
+  @Input() min: number = 0;
+  @Input() max: number = 100;
+  @Input() low: number = 'undefined';
+  @Input() high: number = 'undefined';
+  @Input() optimum: number = 'undefined';
+  @Input() label: string = '';
+}

package/src/data/Stat.ts

@@ -0,0 +1,17 @@
+// 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-stat',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-stat [attr.value]="value" [attr.label]="label" [attr.trend]="trend" [attr.change]="change"><ng-content /></arc-stat>`,
+})
+export class Stat {
+  @Input() value: string = '';
+  @Input() label: string = '';
+  @Input() trend: 'up' | 'down' | 'neutral' = '';
+  @Input() change: string = '';
+}

package/src/data/Step.ts

@@ -0,0 +1,14 @@
+// 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-step',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-step [attr.label]="label"><ng-content /></arc-step>`,
+})
+export class Step {
+  @Input() label: string = '';
+}

package/src/data/Stepper.ts

@@ -0,0 +1,15 @@
+// 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-stepper',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-stepper [attr.active]="active" [attr._steps]="_steps"><ng-content /></arc-stepper>`,
+})
+export class Stepper {
+  @Input() active: number = 0;
+  @Input() _steps: string = [];
+}

package/src/data/Table.ts

@@ -0,0 +1,17 @@
+// 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-table',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-table [attr.columns]="columns" [attr.rows]="rows" [striped]="striped" [compact]="compact"><ng-content /></arc-table>`,
+})
+export class Table {
+  @Input() columns: unknown[] = [];
+  @Input() rows: unknown[] = [];
+  @Input() striped: boolean = false;
+  @Input() compact: boolean = false;
+}

package/src/data/Tag.ts

@@ -0,0 +1,19 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-tag',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-tag [attr.variant]="variant" [attr.size]="size" [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() size: 'sm' | 'lg' = 'md';
+  @Input() removable: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() color: string = '';
+  @Output() arcRemove = new EventEmitter<CustomEvent>();
+}

package/src/data/Timeline.ts

@@ -0,0 +1,14 @@
+// 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-timeline',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-timeline [attr._items]="_items"><ng-content /></arc-timeline>`,
+})
+export class Timeline {
+  @Input() _items: string = [];
+}

package/src/data/TimelineItem.ts

@@ -0,0 +1,15 @@
+// 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-timeline-item',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-timeline-item [attr.heading]="heading" [attr.date]="date"><ng-content /></arc-timeline-item>`,
+})
+export class TimelineItem {
+  @Input() heading: string = '';
+  @Input() date: string = '';
+}

package/src/data/ValueCard.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-value-card',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-value-card [attr.icon]="icon" [attr.heading]="heading" [attr.description]="description"><ng-content /></arc-value-card>`,
+})
+export class ValueCard {
+  @Input() icon: string = '';
+  @Input() heading: string = '';
+  @Input() description: string = '';
+}

package/src/navigation/Tabs.ts

@@ -7,10 +7,9 @@ import '@arclux/arc-ui';
   selector: 'arc-tabs',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-tabs [attr.items]="items" [attr.selected]="selected" [attr.align]="align" [attr.variant]="variant" [attr._tabs]="_tabs" (arc-change)="arcChange.emit($event)"><ng-content /></arc-tabs>`,
+  template: `<arc-tabs [attr.selected]="selected" [attr.align]="align" [attr.variant]="variant" [attr._tabs]="_tabs" (arc-change)="arcChange.emit($event)"><ng-content /></arc-tabs>`,
 })
 export class Tabs {
-  @Input() items: unknown[] = [];
   @Input() selected: number = 0;
   @Input() align: 'center' | 'end' = 'start';
   @Input() variant: 'pills' = 'underline';

package/src/navigation/TopBar.ts

@@ -7,11 +7,12 @@ import '@arclux/arc-ui';
   selector: 'arc-top-bar',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-top-bar [attr.heading]="heading" [fixed]="fixed" [menuOpen]="menuOpen" [attr.mobileMenu]="mobileMenu" [attr.menuPosition]="menuPosition" [attr.navAlign]="navAlign"><ng-content /></arc-top-bar>`,
+  template: `<arc-top-bar [attr.heading]="heading" [fixed]="fixed" [attr.contained]="contained" [menuOpen]="menuOpen" [attr.mobileMenu]="mobileMenu" [attr.menuPosition]="menuPosition" [attr.navAlign]="navAlign"><ng-content /></arc-top-bar>`,
 })
 export class TopBar {
   @Input() heading: string = '';
   @Input() fixed: boolean = false;
+  @Input() contained: string = 'null';
   @Input() menuOpen: boolean = false;
   @Input() mobileMenu: string = 'sidebar';
   @Input() menuPosition: string = 'left';

package/src/typography/CodeBlock.ts

@@ -0,0 +1,18 @@
+// 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-code-block',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-code-block [attr.language]="language" [attr.filename]="filename" [attr.code]="code" [attr.variant]="variant" [attr._highlightedHtml]="_highlightedHtml"><ng-content /></arc-code-block>`,
+})
+export class CodeBlock {
+  @Input() language: string = '';
+  @Input() filename: string = '';
+  @Input() code: string = '';
+  @Input() variant: 'window' | 'basic' = 'default';
+  @Input() _highlightedHtml: string = '';
+}

package/src/typography/Highlight.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-highlight',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-highlight [attr.text]="text" [attr.query]="query" [caseSensitive]="caseSensitive"><ng-content /></arc-highlight>`,
+})
+export class Highlight {
+  @Input() text: string = '';
+  @Input() query: string = '';
+  @Input() caseSensitive: boolean = false;
+}

package/src/typography/Kbd.ts

@@ -0,0 +1,13 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-kbd',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-kbd><ng-content /></arc-kbd>`,
+})
+export class Kbd {
+}

package/src/typography/Markdown.ts

@@ -0,0 +1,14 @@
+// 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-markdown',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-markdown [attr.content]="content"><ng-content /></arc-markdown>`,
+})
+export class Markdown {
+  @Input() content: string = '';
+}

package/src/typography/Text.ts

@@ -0,0 +1,15 @@
+// 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-text',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-text [attr.variant]="variant" [attr.as]="as"><ng-content /></arc-text>`,
+})
+export class Text {
+  @Input() variant: 'accent' | 'code' = 'body';
+  @Input() as: string = 'p';
+}

package/src/typography/Truncate.ts

@@ -0,0 +1,16 @@
+// Auto-generated by @arclux/prism — do not edit manually
+
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, Output, EventEmitter } from '@angular/core';
+import '@arclux/arc-ui';
+
+@Component({
+  selector: 'arc-truncate',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-truncate [attr.lines]="lines" [expanded]="expanded" (arc-toggle)="arcToggle.emit($event)"><ng-content /></arc-truncate>`,
+})
+export class Truncate {
+  @Input() lines: number = 3;
+  @Input() expanded: boolean = false;
+  @Output() arcToggle = new EventEmitter<CustomEvent>();
+}