@mozaic-ds/angular 0.22.0 → 0.23.0-beta.0

package/projects/kit/components/datatable/moz-datatable.component.ts

@@ -0,0 +1,97 @@
+import {
+  Component,
+  Input,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  TemplateRef,
+  ContentChild,
+  Output,
+  EventEmitter,
+  ViewEncapsulation,
+} from '@angular/core';
+import { MozDatatableContentCellComponent } from './components/content/moz-datatable-content-cell.component';
+import { MozDatatableFooterComponent } from './components/footer/moz-datatable-footer.component';
+import { MozDatatableCaptionComponent } from './components/caption/moz-datatable-caption.component';
+import { MozDatatableHeaderCellComponent } from './components/header/moz-datatable-header-cell.component';
+import { FooterSettings } from './model/footer-settings';
+import { DatatableSettings } from './model/datatable-settings';
+import { RowData } from './model/row-data';
+
+@Component({
+  selector: 'moz-datatable',
+  styleUrls: ['./moz-datatable.component.scss'],
+  templateUrl: './moz-datatable.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class MozDatatableComponent implements AfterContentInit {
+  @Input() public footerSettings?: FooterSettings;
+  @Input() public datatableSettings?: DatatableSettings;
+
+  // FROM BODY DATATABLE
+  @Output() rowClicked = new EventEmitter<RowData>();
+
+  // FROM PAGINATION FOOTER
+  @Output() pageChange = new EventEmitter<number>();
+  @Output() changeRowsPerPage = new EventEmitter<number>();
+
+  @ContentChildren(MozDatatableHeaderCellComponent)
+  public headerCellComponents?: QueryList<MozDatatableHeaderCellComponent>;
+
+  @ContentChildren(MozDatatableContentCellComponent)
+  public contentCellComponents?: QueryList<MozDatatableContentCellComponent>;
+
+  @ContentChild(MozDatatableFooterComponent)
+  public footerComponent?: MozDatatableFooterComponent;
+
+  @ContentChild(MozDatatableCaptionComponent)
+  public captionComponent?: MozDatatableCaptionComponent;
+
+  public customHeaderCellsMap: Map<string, TemplateRef<any>> = new Map<string, TemplateRef<any>>();
+  public customContentCellsMap: Map<string, TemplateRef<any>> = new Map<string, TemplateRef<any>>();
+
+  ngAfterContentInit(): void {
+    this.buildCustomHeaderMap();
+    this.buildCustomContentMap();
+  }
+
+  public buildCustomHeaderMap(): void {
+    if (this.headerCellComponents) {
+      this.headerCellComponents.forEach((header) => {
+        if (header.field && header.templateRef) {
+          this.customHeaderCellsMap.set(header.field, header.templateRef);
+        }
+      });
+    }
+  }
+
+  public buildCustomContentMap(): void {
+    if (this.contentCellComponents) {
+      this.contentCellComponents.forEach((cell) => {
+        if (cell.field && cell.templateRef) {
+          this.customContentCellsMap.set(cell.field, cell.templateRef);
+        }
+      });
+    }
+  }
+
+  public getCustomHeader(columnId: string): TemplateRef<any> | undefined {
+    return this.customHeaderCellsMap.get(columnId);
+  }
+
+  public getCustomContent(columnId: string): TemplateRef<any> | undefined {
+    return this.customContentCellsMap.get(columnId);
+  }
+
+  public rowClickEvent(rowClick: RowData): void {
+    this.rowClicked.emit(rowClick);
+  }
+
+  public rowPerPageChangeEvent($event: number): void {
+    this.changeRowsPerPage.emit($event);
+  }
+
+  public pageChangeEvent($event: number): void {
+    this.pageChange.emit($event);
+  }
+}

package/projects/kit/components/datatable/moz-datatable.module.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MozDatatableContentCellComponent } from './components/content/moz-datatable-content-cell.component';
+import { MozDatatableComponent } from './moz-datatable.component';
+import { MozDatatableFooterComponent } from './components/footer/moz-datatable-footer.component';
+import { MozDatatableHeaderCellComponent } from './components/header/moz-datatable-header-cell.component';
+import { MozDatatableCaptionComponent } from './components/caption/moz-datatable-caption.component';
+import { PaginationModule } from '../pagination/pagination.module';
+import { SelectModule } from '../select/select.module';
+import { FormsModule } from '@angular/forms';
+import { IconModule } from '../icon/icon.module';
+import { ButtonModule } from '../button/button.module';
+import { ToggleModule } from '../toggle/toggle.module';
+import { TextInputModule } from '../text-input/text-input.module';
+import { TagModule } from '../tag/tag.module';
+
+@NgModule({
+  declarations: [
+    MozDatatableComponent,
+    MozDatatableContentCellComponent,
+    MozDatatableHeaderCellComponent,
+    MozDatatableFooterComponent,
+    MozDatatableCaptionComponent,
+  ],
+  imports: [
+    CommonModule,
+    PaginationModule,
+    SelectModule,
+    FormsModule,
+    IconModule,
+    ButtonModule,
+    ToggleModule,
+    TextInputModule,
+    TagModule,
+  ],
+  exports: [
+    MozDatatableComponent,
+    MozDatatableContentCellComponent,
+    MozDatatableHeaderCellComponent,
+    MozDatatableFooterComponent,
+    MozDatatableCaptionComponent,
+  ],
+})
+export class MozDatatableModule {}

package/projects/kit/components/datatable/moz-datatable.stories.ts

@@ -0,0 +1,376 @@
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { MozDatatableComponent } from './moz-datatable.component';
+import { StoryObj } from '@storybook/angular';
+import { MozDatatableModule } from './moz-datatable.module';
+import { BadgeModule } from '../badge/badge.module';
+import { TextInputModule } from '../text-input/text-input.module';
+import { ButtonModule } from '../button/button.module';
+import { IconModule } from '../icon/icon.module';
+import { ToggleModule } from '../toggle/toggle.module';
+import { TagModule } from '../tag/tag.module';
+
+type StoryType = MozDatatableComponent;
+
+const meta: Meta<StoryType> = {
+  title: 'Data/Datatable',
+  component: MozDatatableComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        MozDatatableModule,
+        BadgeModule,
+        TextInputModule,
+        ButtonModule,
+        IconModule,
+        ToggleModule,
+        TagModule,
+      ],
+    }),
+  ],
+  argTypes: {
+    rowPerPageChangeEvent: { action: 'rowPerPageChange' },
+    rowClickEvent: { action: 'rowClick' },
+    pageChangeEvent: { action: 'pageChange' },
+  },
+  render: (args) => {
+    const { ...props } = args;
+    return {
+      props,
+      template: `
+      <moz-datatable [datatableSettings]="datatableSettings" [footerSettings]="footerSettings">
+
+        <moz-datatable-content-cell field="discount">
+          <ng-template let-item>
+              <input
+              moz-input
+              type="number"
+              placeholder="e.g. 15"
+              size="s"
+            />
+          </ng-template>
+        </moz-datatable-content-cell>
+
+        <moz-datatable-content-cell field="status">
+          <ng-template let-row>
+            <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+          </ng-template>
+        </moz-datatable-content-cell>
+
+        <moz-datatable-content-cell field="productLink">
+          <ng-template let-row>
+            <a href="{{row.content.link}}">{{row.content.label}}</a>
+          </ng-template>
+        </moz-datatable-content-cell>
+
+      </moz-datatable>
+      `,
+    };
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<StoryType>;
+
+export const Default: Story = {
+  args: {
+    datatableSettings: {
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+  },
+};
+
+export const FixHeaderRow: Story = {
+  args: {
+    datatableSettings: {
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+      fixHeaderRow: true,
+      datatableMaxHeight: '200px',
+    },
+  },
+};
+
+export const WithCaptionAndPagination: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <moz-datatable [datatableSettings]="datatableSettings" [footerSettings]="footerSettings">
+    
+      <moz-datatable-caption>
+        <ng-container edition>
+            <button
+            moz-button
+            size="s"
+            variation="bordered"
+            widthBehavior="fit"
+            theme="neutral"
+            [onlyIcon]="true"
+          >
+            <moz-icon iconName="Navigation_Publish_Edit_24px"></moz-icon>
+          </button>
+          <button
+            moz-button
+            size="s"
+            variation="bordered"
+            widthBehavior="fit"
+            theme="neutral"
+            [onlyIcon]="true"
+          >
+            <moz-icon iconName="Media_Download_Web_24px"></moz-icon>
+          </button>
+        </ng-container>
+        <ng-container actions>
+          <div>
+            <moz-toggle size="s">Slot toggle</moz-toggle>
+          </div>
+          <div>
+            <input moz-input type="search" placeholder="This is a SLOT text input" size="s" />
+          </div>
+          <button moz-button size="s" variation="bordered" widthBehavior="fit">
+            <moz-icon iconName="Navigation_Display_Filter_24px"></moz-icon>
+            Filters
+          </button>
+          <button
+            moz-button
+            size="s"
+            variation="bordered"
+            widthBehavior="fit"
+            theme="neutral"
+            [onlyIcon]="true"
+          >
+            <moz-icon iconName="Navigation_Display_Setting_24px"></moz-icon>
+          </button>
+          <button moz-button size="s">Primary action</button>
+          <button moz-button size="s" theme="danger" variation="bordered">Negative action</button>
+        </ng-container>
+        <ng-container filters>
+          <moz-tag type="removable" size="s">
+            slot tag 1
+          </moz-tag>
+          <moz-tag type="removable" size="s">
+            slot tag 2
+          </moz-tag>
+        </ng-container>
+      </moz-datatable-caption>
+
+      <moz-datatable-content-cell field="discount">
+        <ng-template let-item>
+            <input
+            moz-input
+            type="number"
+            placeholder="e.g. 15"
+            size="s"
+          />
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="status">
+        <ng-template let-row>
+          <div moz-badge [type]="row.content.type">{{row.content.label}}</div>
+        </ng-template>
+      </moz-datatable-content-cell>
+
+      <moz-datatable-content-cell field="productLink">
+        <ng-template let-row>
+          <a href="{{row.content.link}}">{{row.content.label}}</a>
+        </ng-template>
+      </moz-datatable-content-cell>
+    </moz-datatable>
+   `,
+  }),
+  args: {
+    datatableSettings: {
+      activateCaption: true,
+      activatePagination: true,
+      columnDefs: [
+        {
+          field: 'productName',
+          headerName: 'Product name',
+        },
+        {
+          field: 'productId',
+          headerName: 'Product id',
+        },
+        {
+          field: 'discount',
+          headerName: 'Discount %',
+        },
+        {
+          field: 'status',
+          headerName: 'status',
+        },
+        {
+          field: 'productLink',
+          headerName: 'product link',
+        },
+      ],
+      rowData: [
+        {
+          productName: 'Perceuse-visseuse à Percussion',
+          productId: '#123456789',
+          discount: 0,
+          status: { label: 'Waiting for approval', type: 'warning' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion sans fil',
+          productId: '#456',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse sans fil',
+          productId: '#2345678',
+          discount: 0,
+          status: { label: 'Online', type: 'success' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse à percussion filaire',
+          productId: '-',
+          discount: 0,
+          status: { label: 'Draft', type: 'neutral' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+        {
+          productName: 'Perceuse visseuse sans fil',
+          productId: '#34567',
+          discount: 0,
+          status: { label: 'Offline', type: 'danger' },
+          productLink: { label: 'Page link', link: '#' },
+        },
+      ],
+    },
+    footerSettings: {
+      pagination: {
+        totalItems: 150,
+        itemsPerPage: 5,
+        currentPage: 1,
+        rowPerPage: { options: [5, 10, 15, 20], selected: 5 },
+      },
+      labels: {
+        rowPerPage: 'Rows per page',
+        items: 'Products',
+        page: 'Page',
+        of: 'of',
+      },
+    },
+  },
+};

package/projects/kit/components/datatable/public-api.ts

@@ -0,0 +1,6 @@
+export * from './moz-datatable.component';
+export * from './components/header/moz-datatable-header-cell.component';
+export * from './components/footer/moz-datatable-footer.component';
+export * from './components/content/moz-datatable-content-cell.component';
+export * from './components/caption/moz-datatable-caption.component';
+export * from './moz-datatable.module';

package/projects/kit/components/icon/icon.component.spec.ts

@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { IconComponent } from './icon.component';
+import { IconService } from './icon.service';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
 
 describe('IconComponent', () => {
   let component: IconComponent;
@@ -9,6 +11,8 @@ describe('IconComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [IconComponent],
+      imports: [HttpClientModule],
+      providers: [IconService, HttpClient],
     }).compileComponents();
   });
 

package/projects/kit/components/pagination/pagination.component.html

@@ -5,6 +5,7 @@
     class="mc-pagination__button"
     [disabled]="isFirstPage"
     [onlyIcon]="true"
+    [size]="(selectSize | async)!"
     (click)="previousPage()"
     *ngIf="leftIconName | async; let icon"
   >
@@ -29,6 +30,7 @@
     class="mc-pagination__button"
     [disabled]="isLastPage"
     (click)="nextPage()"
+    [size]="(selectSize | async)!"
     [onlyIcon]="true"
     *ngIf="rightIconName | async; let icon"
   >

package/projects/kit/components/pagination/pagination.component.ts

@@ -10,7 +10,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { debounceTime, map, Observable, shareReplay, startWith } from 'rxjs';
 import { GlobalEventsService } from '../../common';
 import { IconSize } from '../icon/icon-size';
-import { SelectSize, SELECT_SIZE } from '../select/select-size';
+import { SELECT_SIZE, SelectSize } from '../select/select-size';
 import {
   Page,
   PAGINATION_FIRST_PAGE,
@@ -108,6 +108,7 @@ export class PaginationComponent implements ControlValueAccessor {
   public writeValue(value: any) {
     if (!value || value === this.currentPage || value > this.numberOfPages) return;
     this.currentPage = value;
+    this.cd.markForCheck();
     this.onChange(value);
   }
 

package/projects/kit/components/public-api.ts

@@ -17,3 +17,4 @@ export * from './text-area/public-api';
 export * from './text-input/public-api';
 export * from './toggle/public-api';
 export * from './tooltip/public-api';
+export * from './datatable/public-api';

package/projects/kit/components/tabs/tabs.component.ts

@@ -121,8 +121,10 @@ export class TabsComponent implements AfterViewInit, OnDestroy, OnChanges {
     const selectTabByIndex =
       typeof this.selectTabIndex === 'number' && tabs.get(this.selectTabIndex);
     const firstSelectedTab = selectTabByIndex || activeTab || tabs.first;
-    firstSelectedTab.selected = true;
-    this.tryNavigateToTab(firstSelectedTab);
+    if (firstSelectedTab) {
+      firstSelectedTab.selected = true;
+      this.tryNavigateToTab(firstSelectedTab);
+    }
   }
 
   private tryNavigateToTab(tab: TabComponent) {

package/projects/kit/package.json

@@ -1,9 +1,22 @@
 {
   "name": "@mozaic-ds/angular",
-  "version": "0.21.0",
+  "version": "0.23.0",
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./adeo": {
+      "types": "./adeo/index.d.ts",
+      "esm2020": "./adeo/esm2020/mozaic-ds-angular.mjs",
+      "es2020": "./adeo/fesm2020/mozaic-ds-angular.mjs",
+      "es2015": "./adeo/fesm2015/mozaic-ds-angular.mjs",
+      "node": "./adeo/fesm2015/mozaic-ds-angular.mjs",
+      "default": "./adeo/fesm2020/mozaic-ds-angular.mjs"
+    }
+  },
   "peerDependencies": {
-    "@angular/common": "~15.1.3",
-    "@angular/core": "~15.1.3"
+    "@angular/common": ">=15.1.3",
+    "@angular/core": ">=15.1.3"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/projects/kit/setup-jest.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/projects/kit/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
-    "types": ["jasmine"]
+    "types": ["jest"]
   },
   "files": ["src/test.ts"],
   "include": ["**/*.spec.ts", "**/*.d.ts"]

package/tsconfig.json

@@ -3,6 +3,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "esModuleInterop": true,
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,

package/projects/kit/components/dialog/dialog.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DialogComponent } from './dialog.component';
-
-describe('DialogComponent', () => {
-  let component: DialogComponent;
-  let fixture: ComponentFixture<DialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [DialogComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});