@arclux/arc-ui-angular 1.10.2 → 2.0.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@arclux/arc-ui-angular",
-  "version": "1.10.2",
+  "version": "2.0.0",
   "description": "Angular standalone component wrappers for ARC UI Web Components.",
+  "sideEffects": false,
   "type": "module",
   "main": "src/index.ts",
   "module": "src/index.ts",
@@ -39,12 +40,11 @@
   "files": [
     "src/"
   ],
-  "sideEffects": false,
   "peerDependencies": {
     "@angular/core": ">=17.0.0"
   },
   "dependencies": {
-    "@arclux/arc-ui": "1.10.2"
+    "@arclux/arc-ui": "2.0.0"
   },
   "license": "MIT",
   "keywords": [

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

package/src/data/ComparisonColumn.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-comparison-column',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-comparison-column [attr.heading]="heading" [highlight]="highlight" [attr.values]="values"><ng-content /></arc-comparison-column>`,
+})
+export class ComparisonColumn {
+  @Input() heading: string = '';
+  @Input() highlight: boolean = false;
+  @Input() values: string = '[]';
+}

package/src/data/CountdownTimer.ts

@@ -0,0 +1,23 @@
+// 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-countdown-timer',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-countdown-timer [attr.target]="target" [attr.label]="label" [attr.expired]="expired" [hideZeroSegments]="hideZeroSegments" [attr._days]="_days" [attr._hours]="_hours" [attr._minutes]="_minutes" [attr._seconds]="_seconds" [attr._expired]="_expired" (arc-expired)="arcExpired.emit($event)"><ng-content /></arc-countdown-timer>`,
+})
+export class CountdownTimer {
+  @Input() target: string = '';
+  @Input() label: string = '';
+  @Input() expired: string = 'Expired';
+  @Input() hideZeroSegments: boolean = false;
+  @Input() _days: string = 0;
+  @Input() _hours: string = 0;
+  @Input() _minutes: string = 0;
+  @Input() _seconds: string = 0;
+  @Input() _expired: string = false;
+  @Output() arcExpired = new EventEmitter<CustomEvent>();
+}

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

package/src/data/DescriptionList.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-description-list',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-description-list [attr.columns]="columns" [dividers]="dividers"><ng-content /></arc-description-list>`,
+})
+export class DescriptionList {
+  @Input() columns: number = 1;
+  @Input() dividers: boolean = true;
+}

package/src/data/Diff.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-diff',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-diff [attr.before]="before" [attr.after]="after" [attr.mode]="mode"><ng-content /></arc-diff>`,
+})
+export class Diff {
+  @Input() before: string = '';
+  @Input() after: string = '';
+  @Input() mode: 'side-by-side' = 'inline';
+}

package/src/data/KeyValue.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-key-value',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-key-value [attr.layout]="layout" [dividers]="dividers"><ng-content /></arc-key-value>`,
+})
+export class KeyValue {
+  @Input() layout: 'horizontal' | 'stacked' = 'horizontal';
+  @Input() dividers: boolean = true;
+}

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

package/src/data/List.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   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>`,
+  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-select)="arcItemSelect.emit($event)"><ng-content /></arc-list>`,
 })
 export class List {
   @Input() variant: 'bordered' | 'separated' = 'default';
@@ -17,5 +17,5 @@ export class List {
   @Input() value: string = '';
   @Input() _items: string = [];
   @Output() arcChange = new EventEmitter<CustomEvent>();
-  @Output() arcItemClick = new EventEmitter<CustomEvent>();
+  @Output() arcItemSelect = new EventEmitter<CustomEvent>();
 }

package/src/data/ListItem.ts

@@ -7,7 +7,7 @@ import '@arclux/arc-ui';
   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>`,
+  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-select)="arcItemSelect.emit($event)"><ng-content /></arc-list-item>`,
 })
 export class ListItem {
   @Input() value: string = '';
@@ -17,5 +17,5 @@ export class ListItem {
   @Input() _hasPrefix: string = false;
   @Input() _hasSuffix: string = false;
   @Input() _hasDescription: string = false;
-  @Output() arcItemClick = new EventEmitter<CustomEvent>();
+  @Output() arcItemSelect = new EventEmitter<CustomEvent>();
 }

package/src/data/Sparkline.ts

@@ -0,0 +1,19 @@
+// 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-sparkline',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-sparkline [attr.data]="data" [attr.type]="type" [attr.color]="color" [attr.width]="width" [attr.height]="height" [fill]="fill"><ng-content /></arc-sparkline>`,
+})
+export class Sparkline {
+  @Input() data: string = '';
+  @Input() type: string = 'line';
+  @Input() color: string = '';
+  @Input() width: number = 120;
+  @Input() height: number = 32;
+  @Input() fill: boolean = false;
+}

package/src/index.ts

@@ -156,3 +156,20 @@ export { LoadingOverlay } from './feedback/LoadingOverlay.js';
 export { ProgressToast } from './feedback/ProgressToast.js';
 export { Snackbar } from './feedback/Snackbar.js';
 export { Spotlight } from './feedback/Spotlight.js';
+export { ComparisonColumn } from './data/ComparisonColumn.js';
+export { CountdownTimer } from './data/CountdownTimer.js';
+export { DescriptionItem } from './data/DescriptionItem.js';
+export { Diff } from './data/Diff.js';
+export { KvPair } from './data/KvPair.js';
+export { Sparkline } from './data/Sparkline.js';
+export { Blockquote } from './typography/Blockquote.js';
+export { GradientText } from './typography/GradientText.js';
+export { NumberFormat } from './typography/NumberFormat.js';
+export { Prose } from './typography/Prose.js';
+export { TimeAgo } from './typography/TimeAgo.js';
+export { Typewriter } from './typography/Typewriter.js';
+export { Comparison } from './data/Comparison.js';
+export { DescriptionList } from './data/DescriptionList.js';
+export { KeyValue } from './data/KeyValue.js';
+export { RangeSlider } from './input/RangeSlider.js';
+export { TimePicker } from './input/TimePicker.js';

package/src/input/DatePicker.ts

@@ -17,8 +17,8 @@ export class DatePicker {
   @Input() disabled: boolean = false;
   @Input() label: string = '';
   @Input() _open: string = false;
-  @Input() _viewMonth: string = 'today.getMonth()';
-  @Input() _viewYear: string = 'today.getFullYear()';
+  @Input() _viewMonth: string = 'null';
+  @Input() _viewYear: string = 'null';
   @Input() _mode: string = 'days';
   @Output() arcChange = new EventEmitter<CustomEvent>();
 }

package/src/input/Hotkey.ts

@@ -7,11 +7,11 @@ import '@arclux/arc-ui';
   selector: 'arc-hotkey',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-hotkey [attr.keys]="keys" [disabled]="disabled" [global]="global" (arc-trigger)="arcTrigger.emit($event)"><ng-content /></arc-hotkey>`,
+  template: `<arc-hotkey [attr.keys]="keys" [disabled]="disabled" [global]="global" (arc-hotkey-trigger)="arcHotkeyTrigger.emit($event)"><ng-content /></arc-hotkey>`,
 })
 export class Hotkey {
   @Input() keys: string = '';
   @Input() disabled: boolean = false;
   @Input() global: boolean = false;
-  @Output() arcTrigger = new EventEmitter<CustomEvent>();
+  @Output() arcHotkeyTrigger = new EventEmitter<CustomEvent>();
 }

package/src/input/RangeSlider.ts

@@ -0,0 +1,24 @@
+// 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-range-slider',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-range-slider [attr.min]="min" [attr.max]="max" [attr.step]="step" [attr.low]="low" [attr.high]="high" [disabled]="disabled" [attr.label]="label" [showValues]="showValues" [attr._dragging]="_dragging" (arc-input)="arcInput.emit($event)" (arc-change)="arcChange.emit($event)"><ng-content /></arc-range-slider>`,
+})
+export class RangeSlider {
+  @Input() min: number = 0;
+  @Input() max: number = 100;
+  @Input() step: number = 1;
+  @Input() low: number = 0;
+  @Input() high: number = 100;
+  @Input() disabled: boolean = false;
+  @Input() label: string = '';
+  @Input() showValues: boolean = true;
+  @Input() _dragging: string = 'null';
+  @Output() arcInput = new EventEmitter<CustomEvent>();
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/input/TimePicker.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-time-picker',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-time-picker [attr.value]="value" [attr.min]="min" [attr.max]="max" [attr.step]="step" [attr.format]="format" [attr.placeholder]="placeholder" [disabled]="disabled" [attr.label]="label" [attr._open]="_open" [attr._selectedHour]="_selectedHour" [attr._selectedMinute]="_selectedMinute" [attr._selectedPeriod]="_selectedPeriod" [attr._focusedColumn]="_focusedColumn" (arc-change)="arcChange.emit($event)"><ng-content /></arc-time-picker>`,
+})
+export class TimePicker {
+  @Input() value: string = '';
+  @Input() min: string = '';
+  @Input() max: string = '';
+  @Input() step: number = 1;
+  @Input() format: string = '12h';
+  @Input() placeholder: string = 'Select time';
+  @Input() disabled: boolean = false;
+  @Input() label: string = '';
+  @Input() _open: string = false;
+  @Input() _selectedHour: string = 'null';
+  @Input() _selectedMinute: string = 'null';
+  @Input() _selectedPeriod: string = 'AM';
+  @Input() _focusedColumn: string = 'hour';
+  @Output() arcChange = new EventEmitter<CustomEvent>();
+}

package/src/navigation/Footer.ts

@@ -7,10 +7,11 @@ import '@arclux/arc-ui';
   selector: 'arc-footer',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-footer [compact]="compact" [border]="border" [attr.align]="align"><ng-content /></arc-footer>`,
+  template: `<arc-footer [compact]="compact" [border]="border" [attr.contained]="contained" [attr.align]="align"><ng-content /></arc-footer>`,
 })
 export class Footer {
   @Input() compact: boolean = false;
   @Input() border: boolean = true;
+  @Input() contained: string = 'null';
   @Input() align: 'center' = 'left';
 }

package/src/navigation/Sidebar.ts

@@ -13,7 +13,7 @@ export class Sidebar {
   @Input() active: string = '';
   @Input() collapsed: boolean = false;
   @Input() position: 'right' = 'left';
-  @Input() width: string = '260px';
+  @Input() width: string = '280px';
   @Input() glow: boolean = false;
   @Input() _sections: string = [];
 }

package/src/navigation/SidebarLink.ts

@@ -7,9 +7,10 @@ import '@arclux/arc-ui';
   selector: 'arc-sidebar-link',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-sidebar-link [attr.href]="href" [active]="active"><ng-content /></arc-sidebar-link>`,
+  template: `<arc-sidebar-link [attr.href]="href" [active]="active" [attr.level]="level"><ng-content /></arc-sidebar-link>`,
 })
 export class SidebarLink {
   @Input() href: string = '';
   @Input() active: boolean = false;
+  @Input() level: number = 0;
 }

package/src/navigation/SpyLink.ts

@@ -7,8 +7,9 @@ import '@arclux/arc-ui';
   selector: 'arc-spy-link',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-spy-link [attr.target]="target"><ng-content /></arc-spy-link>`,
+  template: `<arc-spy-link [attr.target]="target" [attr.level]="level"><ng-content /></arc-spy-link>`,
 })
 export class SpyLink {
   @Input() target: string = '';
+  @Input() level: number = 0;
 }

package/src/navigation/Tabs.ts

@@ -7,12 +7,13 @@ import '@arclux/arc-ui';
   selector: 'arc-tabs',
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `<arc-tabs [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.orientation]="orientation" [attr._tabs]="_tabs" (arc-change)="arcChange.emit($event)"><ng-content /></arc-tabs>`,
 })
 export class Tabs {
   @Input() selected: number = 0;
   @Input() align: 'center' | 'end' = 'start';
   @Input() variant: 'pills' = 'underline';
+  @Input() orientation: 'vertical' = 'horizontal';
   @Input() _tabs: string = [];
   @Output() arcChange = new EventEmitter<CustomEvent>();
 }

package/src/typography/Blockquote.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-blockquote',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-blockquote [attr.cite]="cite" [attr.variant]="variant"><ng-content /></arc-blockquote>`,
+})
+export class Blockquote {
+  @Input() cite: string = '';
+  @Input() variant: string = 'default';
+}

package/src/typography/GradientText.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-gradient-text',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-gradient-text [attr.variant]="variant" [attr.gradient]="gradient" [animate]="animate"><ng-content /></arc-gradient-text>`,
+})
+export class GradientText {
+  @Input() variant: 'accent' | 'display' | 'sunset' | 'ocean' = 'accent';
+  @Input() gradient: string = '';
+  @Input() animate: boolean = false;
+}

package/src/typography/NumberFormat.ts

@@ -0,0 +1,19 @@
+// 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-number-format',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-number-format [attr.value]="value" [attr.type]="type" [attr.locale]="locale" [attr.currency]="currency" [attr.decimals]="decimals" [attr.notation]="notation"><ng-content /></arc-number-format>`,
+})
+export class NumberFormat {
+  @Input() value: number = 0;
+  @Input() type: string = 'number';
+  @Input() locale: string = 'en-US';
+  @Input() currency: string = 'USD';
+  @Input() decimals: number = 'undefined';
+  @Input() notation: string = 'standard';
+}

package/src/typography/Prose.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-prose',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-prose [attr.size]="size"><ng-content /></arc-prose>`,
+})
+export class Prose {
+  @Input() size: 'sm' | 'md' | 'lg' = 'md';
+}

package/src/typography/TimeAgo.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-time-ago',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-time-ago [attr.datetime]="datetime" [live]="live" [attr.locale]="locale"><ng-content /></arc-time-ago>`,
+})
+export class TimeAgo {
+  @Input() datetime: string = '';
+  @Input() live: boolean = true;
+  @Input() locale: string = 'en-US';
+}

package/src/typography/Typewriter.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-typewriter',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `<arc-typewriter [attr.text]="text" [attr.speed]="speed" [attr.delay]="delay" [cursor]="cursor" [loop]="loop" [attr._displayText]="_displayText" [attr._complete]="_complete" (arc-complete)="arcComplete.emit($event)"><ng-content /></arc-typewriter>`,
+})
+export class Typewriter {
+  @Input() text: string = '';
+  @Input() speed: number = 50;
+  @Input() delay: number = 0;
+  @Input() cursor: boolean = true;
+  @Input() loop: boolean = false;
+  @Input() _displayText: string = '';
+  @Input() _complete: string = false;
+  @Output() arcComplete = new EventEmitter<CustomEvent>();
+}