@oicl/openbridge-webcomponents-ng 0.0.16

package/src/components/tabbed-card/tabbed-card.ts

@@ -0,0 +1,83 @@
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  EventEmitter,
+  Output
+
+} from '@angular/core';
+
+
+import type {ObcTabbedCard as ObcTabbedCardElement} from '@oicl/openbridge-webcomponents/dist/components/tabbed-card/tabbed-card.js';
+import '@oicl/openbridge-webcomponents/dist/components/tabbed-card/tabbed-card.js';
+
+@Component({
+  selector: 'obc-tabbed-card',
+  template: '<ng-content></ng-content>',
+  standalone: true,
+  imports: []
+})
+export class ObcTabbedCard {
+  private _el: ObcTabbedCardElement;
+  private _ngZone: NgZone;
+
+  constructor(
+    e: ElementRef<ObcTabbedCardElement>,
+    ngZone: NgZone
+  ) {
+    this._el = e.nativeElement;
+    this._ngZone = ngZone;
+    
+    this._el.addEventListener('tab-change', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.tabChangeEvent.emit(e as CustomEvent<{tab:number}>);
+    });
+    
+  }
+
+  
+  @Input()
+  set nTabs(v: number) {
+    this._ngZone.runOutsideAngular(() => (this._el.nTabs = v));
+  }
+
+  get nTabs() {
+    return this._el.nTabs;
+  }
+  
+  @Input()
+  set selectedTab(v: number) {
+    this._ngZone.runOutsideAngular(() => (this._el.selectedTab = v));
+  }
+
+  get selectedTab() {
+    return this._el.selectedTab;
+  }
+  
+  @Input()
+  set hasDefaultSlotOnly(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.hasDefaultSlotOnly = v));
+  }
+
+  get hasDefaultSlotOnly() {
+    return this._el.hasDefaultSlotOnly;
+  }
+  
+  @Input()
+  set hasTabIcons(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.hasTabIcons = v));
+  }
+
+  get hasTabIcons() {
+    return this._el.hasTabIcons;
+  }
+  
+
+  
+  @Output()
+  tabChangeEvent = new EventEmitter<CustomEvent<{tab:number}>>();
+  
+}
+

package/src/components/table/table.ts

@@ -0,0 +1,173 @@
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  EventEmitter,
+  Output
+
+} from '@angular/core';
+import {ObcTableRowClickEvent, ObcTableCellClickEvent, ObcTableCellCheckboxChangeEvent, ObcTableCellTagClickEvent, ObcTableSelectionChangeEvent, ObcTableRow, ObcTableColumn, ObcTableCellData} from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
+export type {ObcTableRowClickEvent, ObcTableCellClickEvent, ObcTableCellCheckboxChangeEvent, ObcTableCellTagClickEvent, ObcTableSelectionChangeEvent, ObcTableRow, ObcTableColumn, ObcTableCellData} from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
+import type {ObcTable as ObcTableElement} from '@oicl/openbridge-webcomponents/dist/components/table/table.js';
+import '@oicl/openbridge-webcomponents/dist/components/table/table.js';
+
+@Component({
+  selector: 'obc-table',
+  template: '<ng-content></ng-content>',
+  standalone: true,
+  imports: []
+})
+export class ObcTable {
+  private _el: ObcTableElement;
+  private _ngZone: NgZone;
+
+  constructor(
+    e: ElementRef<ObcTableElement>,
+    ngZone: NgZone
+  ) {
+    this._el = e.nativeElement;
+    this._ngZone = ngZone;
+    
+    this._el.addEventListener('row-click', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.rowClickEvent.emit(e as ObcTableRowClickEvent);
+    });
+    
+    this._el.addEventListener('cell-button-click', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.cellButtonClickEvent.emit(e as ObcTableCellClickEvent);
+    });
+    
+    this._el.addEventListener('cell-checkbox-change', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.cellCheckboxChangeEvent.emit(e as ObcTableCellCheckboxChangeEvent);
+    });
+    
+    this._el.addEventListener('cell-tag-click', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.cellTagClickEvent.emit(e as ObcTableCellTagClickEvent);
+    });
+    
+    this._el.addEventListener('selection-change', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.selectionChangeEvent.emit(e as ObcTableSelectionChangeEvent);
+    });
+    
+  }
+
+  
+  @Input()
+  set data(v: ObcTableRow[]) {
+    this._ngZone.runOutsideAngular(() => (this._el.data = v));
+  }
+
+  get data() {
+    return this._el.data;
+  }
+  
+  @Input()
+  set columns(v: ObcTableColumn<ObcTableCellData, ObcTableRow>[]) {
+    this._ngZone.runOutsideAngular(() => (this._el.columns = v));
+  }
+
+  get columns() {
+    return this._el.columns;
+  }
+  
+  @Input()
+  set rowDivider(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.rowDivider = v));
+  }
+
+  get rowDivider() {
+    return this._el.rowDivider;
+  }
+  
+  @Input()
+  set narrowHeader(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.narrowHeader = v));
+  }
+
+  get narrowHeader() {
+    return this._el.narrowHeader;
+  }
+  
+  @Input()
+  set showHeader(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.showHeader = v));
+  }
+
+  get showHeader() {
+    return this._el.showHeader;
+  }
+  
+  @Input()
+  set striped(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.striped = v));
+  }
+
+  get striped() {
+    return this._el.striped;
+  }
+  
+  @Input()
+  set selectable(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.selectable = v));
+  }
+
+  get selectable() {
+    return this._el.selectable;
+  }
+  
+  @Input()
+  set selectedRowIds(v: string[] | undefined) {
+    this._ngZone.runOutsideAngular(() => (this._el.selectedRowIds = v));
+  }
+
+  get selectedRowIds() {
+    return this._el.selectedRowIds;
+  }
+  
+  @Input()
+  set defaultSelectedRowIds(v: string[] | undefined) {
+    this._ngZone.runOutsideAngular(() => (this._el.defaultSelectedRowIds = v));
+  }
+
+  get defaultSelectedRowIds() {
+    return this._el.defaultSelectedRowIds;
+  }
+  
+  @Input()
+  set selectAllAriaLabel(v: string) {
+    this._ngZone.runOutsideAngular(() => (this._el.selectAllAriaLabel = v));
+  }
+
+  get selectAllAriaLabel() {
+    return this._el.selectAllAriaLabel;
+  }
+  
+
+  
+  @Output()
+  rowClickEvent = new EventEmitter<ObcTableRowClickEvent>();
+  
+  @Output()
+  cellButtonClickEvent = new EventEmitter<ObcTableCellClickEvent>();
+  
+  @Output()
+  cellCheckboxChangeEvent = new EventEmitter<ObcTableCellCheckboxChangeEvent>();
+  
+  @Output()
+  cellTagClickEvent = new EventEmitter<ObcTableCellTagClickEvent>();
+  
+  @Output()
+  selectionChangeEvent = new EventEmitter<ObcTableSelectionChangeEvent>();
+  
+}
+

package/src/components/table-header-item/table-header-item.ts

@@ -0,0 +1,99 @@
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input
+
+} from '@angular/core';
+import {ObcTableHeaderItemType, ObcTableHeaderItemSortDirection} from '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
+export type {ObcTableHeaderItemType, ObcTableHeaderItemSortDirection} from '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
+import type {ObcTableHeaderItem as ObcTableHeaderItemElement} from '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
+import '@oicl/openbridge-webcomponents/dist/components/table-header-item/table-header-item.js';
+
+@Component({
+  selector: 'obc-table-header-item',
+  template: '<ng-content></ng-content>',
+  standalone: true,
+  imports: []
+})
+export class ObcTableHeaderItem {
+  private _el: ObcTableHeaderItemElement;
+  private _ngZone: NgZone;
+
+  constructor(
+    e: ElementRef<ObcTableHeaderItemElement>,
+    ngZone: NgZone
+  ) {
+    this._el = e.nativeElement;
+    this._ngZone = ngZone;
+    
+  }
+
+  
+  @Input()
+  set type(v: ObcTableHeaderItemType) {
+    this._ngZone.runOutsideAngular(() => (this._el.type = v));
+  }
+
+  get type() {
+    return this._el.type;
+  }
+  
+  @Input()
+  set disabled(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.disabled = v));
+  }
+
+  get disabled() {
+    return this._el.disabled;
+  }
+  
+  @Input()
+  set hasLeadingIcon(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.hasLeadingIcon = v));
+  }
+
+  get hasLeadingIcon() {
+    return this._el.hasLeadingIcon;
+  }
+  
+  @Input()
+  set sortDirection(v: ObcTableHeaderItemSortDirection) {
+    this._ngZone.runOutsideAngular(() => (this._el.sortDirection = v));
+  }
+
+  get sortDirection() {
+    return this._el.sortDirection;
+  }
+  
+  @Input()
+  set showDivider(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.showDivider = v));
+  }
+
+  get showDivider() {
+    return this._el.showDivider;
+  }
+  
+  @Input()
+  set checked(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.checked = v));
+  }
+
+  get checked() {
+    return this._el.checked;
+  }
+  
+  @Input()
+  set sortable(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.sortable = v));
+  }
+
+  get sortable() {
+    return this._el.sortable;
+  }
+  
+
+  
+}
+

package/src/components/tag/tag.ts

@@ -0,0 +1,63 @@
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input
+
+} from '@angular/core';
+import {TagColor} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+export type {TagColor} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+import type {ObcTag as ObcTagElement} from '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+import '@oicl/openbridge-webcomponents/dist/components/tag/tag.js';
+
+@Component({
+  selector: 'obc-tag',
+  template: '<ng-content></ng-content>',
+  standalone: true,
+  imports: []
+})
+export class ObcTag {
+  private _el: ObcTagElement;
+  private _ngZone: NgZone;
+
+  constructor(
+    e: ElementRef<ObcTagElement>,
+    ngZone: NgZone
+  ) {
+    this._el = e.nativeElement;
+    this._ngZone = ngZone;
+    
+  }
+
+  
+  @Input()
+  set label(v: string) {
+    this._ngZone.runOutsideAngular(() => (this._el.label = v));
+  }
+
+  get label() {
+    return this._el.label;
+  }
+  
+  @Input()
+  set color(v: TagColor) {
+    this._ngZone.runOutsideAngular(() => (this._el.color = v));
+  }
+
+  get color() {
+    return this._el.color;
+  }
+  
+  @Input()
+  set hasIcon(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.hasIcon = v));
+  }
+
+  get hasIcon() {
+    return this._el.hasIcon;
+  }
+  
+
+  
+}
+

package/src/components/text-input-field/text-input-field.ts

@@ -0,0 +1,290 @@
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  EventEmitter,
+  Output
+
+} from '@angular/core';
+import {HTMLInputTypeAttribute, ObcTextInputFieldTextAlign, ObcTextInputFieldSize, ObcTextInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
+export type {HTMLInputTypeAttribute, ObcTextInputFieldTextAlign, ObcTextInputFieldSize, ObcTextInputFieldPlacement} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
+import type {ObcTextInputField as ObcTextInputFieldElement} from '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
+import '@oicl/openbridge-webcomponents/dist/components/text-input-field/text-input-field.js';
+
+@Component({
+  selector: 'obc-text-input-field',
+  template: '<ng-content></ng-content>',
+  standalone: true,
+  imports: []
+})
+export class ObcTextInputField {
+  private _el: ObcTextInputFieldElement;
+  private _ngZone: NgZone;
+
+  constructor(
+    e: ElementRef<ObcTextInputFieldElement>,
+    ngZone: NgZone
+  ) {
+    this._el = e.nativeElement;
+    this._ngZone = ngZone;
+    
+    this._el.addEventListener('input', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.inputEvent.emit(e);
+    });
+    
+    this._el.addEventListener('change', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.changeEvent.emit(e);
+    });
+    
+    this._el.addEventListener('clear', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.clearEvent.emit(e);
+    });
+    
+    this._el.addEventListener('blur', (e: Event) => {
+      // TODO(justinfagnani): we need to let the element say how to get a value
+      // from an event, ex: e.value
+      this.blurEvent.emit(e);
+    });
+    
+  }
+
+  
+  @Input()
+  set value(v: string) {
+    this._ngZone.runOutsideAngular(() => (this._el.value = v));
+  }
+
+  get value() {
+    return this._el.value;
+  }
+  
+  @Input()
+  set placeholder(v: string) {
+    this._ngZone.runOutsideAngular(() => (this._el.placeholder = v));
+  }
+
+  get placeholder() {
+    return this._el.placeholder;
+  }
+  
+  @Input()
+  set type(v: HTMLInputTypeAttribute) {
+    this._ngZone.runOutsideAngular(() => (this._el.type = v));
+  }
+
+  get type() {
+    return this._el.type;
+  }
+  
+  @Input()
+  set textAlign(v: ObcTextInputFieldTextAlign) {
+    this._ngZone.runOutsideAngular(() => (this._el.textAlign = v));
+  }
+
+  get textAlign() {
+    return this._el.textAlign;
+  }
+  
+  @Input()
+  set disabled(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.disabled = v));
+  }
+
+  get disabled() {
+    return this._el.disabled;
+  }
+  
+  @Input()
+  set readonly(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.readonly = v));
+  }
+
+  get readonly() {
+    return this._el.readonly;
+  }
+  
+  @Input()
+  set error(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.error = v));
+  }
+
+  get error() {
+    return this._el.error;
+  }
+  
+  @Input()
+  set errorText(v: string) {
+    this._ngZone.runOutsideAngular(() => (this._el.errorText = v));
+  }
+
+  get errorText() {
+    return this._el.errorText;
+  }
+  
+  @Input()
+  set rejectUpdatesOnFocus(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.rejectUpdatesOnFocus = v));
+  }
+
+  get rejectUpdatesOnFocus() {
+    return this._el.rejectUpdatesOnFocus;
+  }
+  
+  @Input()
+  set rejectUpdates(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.rejectUpdates = v));
+  }
+
+  get rejectUpdates() {
+    return this._el.rejectUpdates;
+  }
+  
+  @Input()
+  set rejectDuplicateUpdates(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.rejectDuplicateUpdates = v));
+  }
+
+  get rejectDuplicateUpdates() {
+    return this._el.rejectDuplicateUpdates;
+  }
+  
+  @Input()
+  set name(v: string) {
+    this._ngZone.runOutsideAngular(() => (this._el.name = v));
+  }
+
+  get name() {
+    return this._el.name;
+  }
+  
+  @Input()
+  set maxlength(v: number | undefined) {
+    this._ngZone.runOutsideAngular(() => (this._el.maxlength = v));
+  }
+
+  get maxlength() {
+    return this._el.maxlength;
+  }
+  
+  @Input()
+  set minlength(v: number | undefined) {
+    this._ngZone.runOutsideAngular(() => (this._el.minlength = v));
+  }
+
+  get minlength() {
+    return this._el.minlength;
+  }
+  
+  @Input()
+  set size(v: ObcTextInputFieldSize) {
+    this._ngZone.runOutsideAngular(() => (this._el.size = v));
+  }
+
+  get size() {
+    return this._el.size;
+  }
+  
+  @Input()
+  set hasLeadingIcon(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.hasLeadingIcon = v));
+  }
+
+  get hasLeadingIcon() {
+    return this._el.hasLeadingIcon;
+  }
+  
+  @Input()
+  set hasClearButton(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.hasClearButton = v));
+  }
+
+  get hasClearButton() {
+    return this._el.hasClearButton;
+  }
+  
+  @Input()
+  set helperText(v: string) {
+    this._ngZone.runOutsideAngular(() => (this._el.helperText = v));
+  }
+
+  get helperText() {
+    return this._el.helperText;
+  }
+  
+  @Input()
+  set label(v: string) {
+    this._ngZone.runOutsideAngular(() => (this._el.label = v));
+  }
+
+  get label() {
+    return this._el.label;
+  }
+  
+  @Input()
+  set required(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.required = v));
+  }
+
+  get required() {
+    return this._el.required;
+  }
+  
+  @Input()
+  set hasLabelIcon(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.hasLabelIcon = v));
+  }
+
+  get hasLabelIcon() {
+    return this._el.hasLabelIcon;
+  }
+  
+  @Input()
+  set labelPlacement(v: ObcTextInputFieldPlacement) {
+    this._ngZone.runOutsideAngular(() => (this._el.labelPlacement = v));
+  }
+
+  get labelPlacement() {
+    return this._el.labelPlacement;
+  }
+  
+  @Input()
+  set hasHelperIcon(v: boolean) {
+    this._ngZone.runOutsideAngular(() => (this._el.hasHelperIcon = v));
+  }
+
+  get hasHelperIcon() {
+    return this._el.hasHelperIcon;
+  }
+  
+  @Input()
+  set helperPlacement(v: ObcTextInputFieldPlacement) {
+    this._ngZone.runOutsideAngular(() => (this._el.helperPlacement = v));
+  }
+
+  get helperPlacement() {
+    return this._el.helperPlacement;
+  }
+  
+
+  
+  @Output()
+  inputEvent = new EventEmitter<unknown>();
+  
+  @Output()
+  changeEvent = new EventEmitter<unknown>();
+  
+  @Output()
+  clearEvent = new EventEmitter<unknown>();
+  
+  @Output()
+  blurEvent = new EventEmitter<unknown>();
+  
+}
+