@neuravision/ng-construct 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/neuravision-ng-construct.mjs +68 -62
  2. package/fesm2022/neuravision-ng-construct.mjs.map +1 -1
  3. package/package.json +3 -2
  4. package/types/neuravision-ng-construct.d.ts +19 -9
package/fesm2022/neuravision-ng-construct.mjs CHANGED
@@ -78,7 +78,7 @@ class AfAlertComponent {
78
78
  class="af-alert__dismiss"
79
79
  aria-label="Dismiss alert"
80
80
  (click)="dismiss()">
81
- ×
81
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
82
82
  </button>
83
83
  }
84
84
  </div>
@@ -113,7 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
113
113
  class="af-alert__dismiss"
114
114
  aria-label="Dismiss alert"
115
115
  (click)="dismiss()">
116
- ×
116
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
117
117
  </button>
118
118
  }
119
119
  </div>
@@ -1632,7 +1632,7 @@ class AfCardComponent {
1632
1632
  }
1633
1633
  }
1634
1634
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1635
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AfCardComponent, isStandalone: true, selector: "af-card", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, queries: [{ propertyName: "headerRef", first: true, predicate: ["[header]"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["[footer]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
1635
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.2", type: AfCardComponent, isStandalone: true, selector: "af-card", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, queries: [{ propertyName: "headerRef", first: true, predicate: ["[header]"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["[footer]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
1636
1636
  <section
1637
1637
  [class]="cardClasses()"
1638
1638
  [style]="cardStyles()"
@@ -1641,20 +1641,16 @@ class AfCardComponent {
1641
1641
  [attr.aria-label]="ariaLabel() || null"
1642
1642
  (click)="onCardClick()"
1643
1643
  (keydown)="onCardKeydown($event)">
1644
- @if (hasHeader()) {
1645
- <div class="ct-card__header">
1646
- <ng-content select="[header]" />
1647
- </div>
1648
- }
1644
+ <div class="ct-card__header" [hidden]="!hasHeader()">
1645
+ <ng-content select="[header]" />
1646
+ </div>
1649
1647
  <div class="ct-card__body">
1650
1648
  <ng-content select="[body]" />
1651
1649
  <ng-content />
1652
1650
  </div>
1653
- @if (hasFooter()) {
1654
- <div class="ct-card__footer">
1655
- <ng-content select="[footer]" />
1656
- </div>
1657
- }
1651
+ <div class="ct-card__footer" [hidden]="!hasFooter()">
1652
+ <ng-content select="[footer]" />
1653
+ </div>
1658
1654
  </section>
1659
1655
  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1660
1656
  }
@@ -1669,20 +1665,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1669
1665
  [attr.aria-label]="ariaLabel() || null"
1670
1666
  (click)="onCardClick()"
1671
1667
  (keydown)="onCardKeydown($event)">
1672
- @if (hasHeader()) {
1673
- <div class="ct-card__header">
1674
- <ng-content select="[header]" />
1675
- </div>
1676
- }
1668
+ <div class="ct-card__header" [hidden]="!hasHeader()">
1669
+ <ng-content select="[header]" />
1670
+ </div>
1677
1671
  <div class="ct-card__body">
1678
1672
  <ng-content select="[body]" />
1679
1673
  <ng-content />
1680
1674
  </div>
1681
- @if (hasFooter()) {
1682
- <div class="ct-card__footer">
1683
- <ng-content select="[footer]" />
1684
- </div>
1685
- }
1675
+ <div class="ct-card__footer" [hidden]="!hasFooter()">
1676
+ <ng-content select="[footer]" />
1677
+ </div>
1686
1678
  </section>
1687
1679
  `, styles: [":host{display:block}\n"] }]
1688
1680
  }], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }], headerRef: [{ type: i0.ContentChild, args: ['[header]', { ...{ read: ElementRef }, isSignal: true }] }], footerRef: [{ type: i0.ContentChild, args: ['[footer]', { ...{ read: ElementRef }, isSignal: true }] }] } });
@@ -2089,10 +2081,11 @@ class AfModalComponent {
2089
2081
  <h2 [id]="titleId">{{ title() }}</h2>
2090
2082
  @if (showCloseButton()) {
2091
2083
  <button
2092
- class="ct-button ct-button--ghost"
2084
+ class="ct-button ct-button--ghost ct-button--icon"
2085
+ type="button"
2093
2086
  aria-label="Close"
2094
2087
  (click)="close()">
2095
- ×
2088
+ <span class="ct-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
2096
2089
  </button>
2097
2090
  }
2098
2091
  </div>
@@ -2100,11 +2093,9 @@ class AfModalComponent {
2100
2093
  <ng-content select="[body]"></ng-content>
2101
2094
  <ng-content></ng-content>
2102
2095
  </div>
2103
- @if (hasFooter()) {
2104
- <div class="ct-modal__footer">
2105
- <ng-content select="[footer]"></ng-content>
2106
- </div>
2107
- }
2096
+ <div class="ct-modal__footer" [hidden]="!hasFooter()">
2097
+ <ng-content select="[footer]"></ng-content>
2098
+ </div>
2108
2099
  </div>
2109
2100
  </div>
2110
2101
  }
@@ -2133,10 +2124,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
2133
2124
  <h2 [id]="titleId">{{ title() }}</h2>
2134
2125
  @if (showCloseButton()) {
2135
2126
  <button
2136
- class="ct-button ct-button--ghost"
2127
+ class="ct-button ct-button--ghost ct-button--icon"
2128
+ type="button"
2137
2129
  aria-label="Close"
2138
2130
  (click)="close()">
2139
- ×
2131
+ <span class="ct-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
2140
2132
  </button>
2141
2133
  }
2142
2134
  </div>
@@ -2144,11 +2136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
2144
2136
  <ng-content select="[body]"></ng-content>
2145
2137
  <ng-content></ng-content>
2146
2138
  </div>
2147
- @if (hasFooter()) {
2148
- <div class="ct-modal__footer">
2149
- <ng-content select="[footer]"></ng-content>
2150
- </div>
2151
- }
2139
+ <div class="ct-modal__footer" [hidden]="!hasFooter()">
2140
+ <ng-content select="[footer]"></ng-content>
2141
+ </div>
2152
2142
  </div>
2153
2143
  </div>
2154
2144
  }
@@ -2272,10 +2262,11 @@ class AfToastContainerComponent {
2272
2262
  </button>
2273
2263
  }
2274
2264
  <button
2275
- class="ct-button ct-button--ghost"
2265
+ class="ct-button ct-button--ghost ct-button--icon ct-button--sm"
2266
+ type="button"
2276
2267
  aria-label="Close"
2277
2268
  (click)="toastService.dismiss(toast.id)">
2278
- ×
2269
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
2279
2270
  </button>
2280
2271
  </div>
2281
2272
  }
@@ -2306,10 +2297,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
2306
2297
  </button>
2307
2298
  }
2308
2299
  <button
2309
- class="ct-button ct-button--ghost"
2300
+ class="ct-button ct-button--ghost ct-button--icon ct-button--sm"
2301
+ type="button"
2310
2302
  aria-label="Close"
2311
2303
  (click)="toastService.dismiss(toast.id)">
2312
- ×
2304
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
2313
2305
  </button>
2314
2306
  </div>
2315
2307
  }
@@ -3632,7 +3624,7 @@ class AfChipInputComponent {
3632
3624
  class="ct-chip__remove"
3633
3625
  [attr.aria-label]="'Remove ' + chip"
3634
3626
  (click)="remove(chip, $event)">
3635
- &times;
3627
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
3636
3628
  </button>
3637
3629
  }
3638
3630
  </span>
@@ -3703,7 +3695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
3703
3695
  class="ct-chip__remove"
3704
3696
  [attr.aria-label]="'Remove ' + chip"
3705
3697
  (click)="remove(chip, $event)">
3706
- &times;
3698
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
3707
3699
  </button>
3708
3700
  }
3709
3701
  </span>
@@ -4227,7 +4219,7 @@ class AfSidebarComponent {
4227
4219
  type="button"
4228
4220
  aria-label="Close menu"
4229
4221
  (click)="close()">
4230
- <span class="ct-icon ct-icon--sm" aria-hidden="true">&times;</span>
4222
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
4231
4223
  </button>
4232
4224
  }
4233
4225
  </div>
@@ -4258,7 +4250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
4258
4250
  type="button"
4259
4251
  aria-label="Close menu"
4260
4252
  (click)="close()">
4261
- <span class="ct-icon ct-icon--sm" aria-hidden="true">&times;</span>
4253
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
4262
4254
  </button>
4263
4255
  }
4264
4256
  </div>
@@ -4274,38 +4266,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
4274
4266
  }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }] } });
4275
4267
 
4276
4268
  /**
4277
- * Icon component that abstracts the icon rendering strategy.
4269
+ * Icon wrapper that applies Construct Design System sizing via `ct-icon` classes.
4278
4270
  *
4279
- * Currently uses Material Icons font ligatures. The icon strategy
4280
- * can be changed centrally without modifying consumers.
4271
+ * Uses content projection so any icon source can be used:
4272
+ * Lucide, custom SVGs, or other icon libraries.
4281
4273
  *
4282
- * @example
4283
- * <af-icon name="delete" />
4284
- * <af-icon name="edit" size="sm" />
4274
+ * @example Using with Lucide
4275
+ * ```html
4276
+ * <af-icon size="sm">
4277
+ * <lucide-x />
4278
+ * </af-icon>
4279
+ * ```
4280
+ *
4281
+ * @example Using with inline SVG
4282
+ * ```html
4283
+ * <af-icon size="lg">
4284
+ * <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
4285
+ * <circle cx="12" cy="12" r="10" />
4286
+ * </svg>
4287
+ * </af-icon>
4288
+ * ```
4285
4289
  */
4286
4290
  class AfIconComponent {
4287
- /** Material Icon name (ligature) */
4288
- name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
4289
4291
  /** Icon size variant */
4290
4292
  size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
4291
4293
  iconClasses = computed(() => {
4292
- const classes = ['ct-icon', 'material-icons'];
4294
+ const classes = ['ct-icon'];
4293
4295
  if (this.size() !== 'md') {
4294
4296
  classes.push(`ct-icon--${this.size()}`);
4295
4297
  }
4296
4298
  return classes.join(' ');
4297
4299
  }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
4298
4300
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4299
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfIconComponent, isStandalone: true, selector: "af-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
4300
- <span [class]="iconClasses()" aria-hidden="true">{{ name() }}</span>
4301
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: AfIconComponent, isStandalone: true, selector: "af-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
4302
+ <span [class]="iconClasses()" aria-hidden="true">
4303
+ <ng-content />
4304
+ </span>
4301
4305
  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4302
4306
  }
4303
4307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AfIconComponent, decorators: [{
4304
4308
  type: Component,
4305
4309
  args: [{ selector: 'af-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: `
4306
- <span [class]="iconClasses()" aria-hidden="true">{{ name() }}</span>
4310
+ <span [class]="iconClasses()" aria-hidden="true">
4311
+ <ng-content />
4312
+ </span>
4307
4313
  `, styles: [":host{display:inline-flex;align-items:center;justify-content:center}\n"] }]
4308
- }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
4314
+ }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
4309
4315
 
4310
4316
  /**
4311
4317
  * Slider component with full form control and accessibility support.
@@ -4613,7 +4619,7 @@ class AfDrawerComponent {
4613
4619
  type="button"
4614
4620
  [attr.aria-label]="closeButtonAriaLabel()"
4615
4621
  (click)="close()">
4616
- <span class="ct-icon ct-icon--sm" aria-hidden="true">&times;</span>
4622
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
4617
4623
  </button>
4618
4624
  }
4619
4625
  </div>
@@ -4655,7 +4661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
4655
4661
  type="button"
4656
4662
  [attr.aria-label]="closeButtonAriaLabel()"
4657
4663
  (click)="close()">
4658
- <span class="ct-icon ct-icon--sm" aria-hidden="true">&times;</span>
4664
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
4659
4665
  </button>
4660
4666
  }
4661
4667
  </div>
@@ -7058,7 +7064,7 @@ class AfBannerComponent {
7058
7064
  type="button"
7059
7065
  [attr.aria-label]="closeAriaLabel()"
7060
7066
  (click)="dismiss()">
7061
- &times;
7067
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
7062
7068
  </button>
7063
7069
  }
7064
7070
  </div>
@@ -7093,7 +7099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
7093
7099
  type="button"
7094
7100
  [attr.aria-label]="closeAriaLabel()"
7095
7101
  (click)="dismiss()">
7096
- &times;
7102
+ <span class="ct-icon ct-icon--sm" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></span>
7097
7103
  </button>
7098
7104
  }
7099
7105
  </div>