@mozaic-ds/angular 0.23.1 → 0.23.2-beta.1

package/projects/kit/components/dropdown/dropdown.stories.ts

@@ -1,160 +0,0 @@
-import { Meta, moduleMetadata } from '@storybook/angular';
-import { StoryObj } from '@storybook/angular';
-import { DropdownComponent } from './dropdown.component';
-import { DropdownModule } from './dropdown.module';
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-type StoryType = DropdownComponent;
-
-const meta: Meta<StoryType> = {
-  title: 'Form/Dropdown',
-  component: DropdownComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [DropdownModule, FormsModule, BrowserAnimationsModule],
-    }),
-  ],
-  argTypes: {
-    disabled: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    loading: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    clearfield: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    valid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    invalid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    size: { control: 'select', options: ['s', 'm'] },
-  },
-  render: (args) => {
-    const { ...props } = args;
-    return {
-      props,
-      template: `<div style="height: 300px; width: 300px;">
-            <moz-dropdown [(ngModel)]="selectedItems" [listboxItems]="listboxItems" [multiple]="multiple" 
-                [disabled]="disabled" [loading]="loading" [clearfield]="clearfield" [placeholder]="placeholder" [showSelectedTags]="showSelectedTags"
-                [valid]="valid" [invalid]="invalid" [maxShowingSelectedTags]="maxShowingSelectedTags" [size]="size">
-            </moz-dropdown>
-        </div>
-      `,
-    };
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<StoryType>;
-
-export const Default: Story = {
-  args: {
-    placeholder: '-- Placeholder --',
-    multiple: false,
-    size: 'm',
-    listboxItems: [
-      { value: '1', label: 'Option label n°1', disabled: true },
-      { value: '2', label: 'Option label n°2' },
-      { value: '3', label: 'Option label n°3', disabled: true },
-      { value: '4', label: 'Option label n°4' },
-      { value: '5', label: 'Option label n°5' },
-      { value: '6', label: 'Option label n°6' },
-    ],
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    placeholder: '-- Placeholder --',
-    disabled: true,
-    listboxItems: [
-      { value: '1', label: 'Option label n°1', disabled: true },
-      { value: '2', label: 'Option label n°2' },
-      { value: '3', label: 'Option label n°3', disabled: true },
-      { value: '4', label: 'Option label n°4' },
-      { value: '5', label: 'Option label n°5' },
-      { value: '6', label: 'Option label n°6' },
-    ],
-  },
-};
-
-export const DefaultWithValue: Story = {
-  args: {
-    placeholder: '-- Placeholder --',
-    multiple: false,
-    selectedItems: { value: '2', label: 'Option label n°2' },
-    listboxItems: [
-      { value: '1', label: 'Option label n°1', disabled: true },
-      { value: '2', label: 'Option label n°2' },
-      { value: '3', label: 'Option label n°3', disabled: true },
-      { value: '4', label: 'Option label n°4' },
-      { value: '5', label: 'Option label n°5' },
-      { value: '6', label: 'Option label n°6' },
-    ],
-  },
-};
-
-export const MultiSelection: Story = {
-  args: {
-    placeholder: '-- Placeholder --',
-    multiple: true,
-    listboxItems: [
-      { value: '1', label: 'Option label n°1', disabled: true },
-      { value: '2', label: 'Option label n°2' },
-      { value: '3', label: 'Option label n°3', disabled: true },
-      { value: '4', label: 'Option label n°4' },
-      { value: '5', label: 'Option label n°5' },
-      { value: '6', label: 'Option label n°6' },
-    ],
-  },
-};
-
-export const MultiSelectionWithValue: Story = {
-  args: {
-    placeholder: '-- Placeholder --',
-    multiple: true,
-    selectedItems: [{ value: '2', label: 'Option label n°2' }],
-    listboxItems: [
-      { value: '1', label: 'Option label n°1', disabled: true },
-      { value: '2', label: 'Option label n°2' },
-      { value: '3', label: 'Option label n°3', disabled: true },
-      { value: '4', label: 'Option label n°4' },
-      { value: '5', label: 'Option label n°5' },
-      { value: '6', label: 'Option label n°6' },
-    ],
-  },
-};
-
-export const MultiSelectionWithClearable: Story = {
-  args: {
-    placeholder: '-- Placeholder --',
-    clearfield: true,
-    multiple: true,
-    selectedItems: [{ value: '2', label: 'Option label n°2' }],
-    listboxItems: [
-      { value: '1', label: 'Option label n°1', disabled: true },
-      { value: '2', label: 'Option label n°2' },
-      { value: '3', label: 'Option label n°3', disabled: true },
-      { value: '4', label: 'Option label n°4' },
-      { value: '5', label: 'Option label n°5' },
-      { value: '6', label: 'Option label n°6' },
-    ],
-  },
-};
-
-export const MultiSelectionWithShowSelectedTagsLayer: Story = {
-  args: {
-    placeholder: '-- Placeholder --',
-    clearfield: true,
-    multiple: true,
-    maxShowingSelectedTags: 2,
-    showSelectedTags: true,
-    selectedItems: [
-      { value: '1', label: 'First Item' },
-      { value: '2', label: 'Second Item' },
-      { value: '3', label: 'Third Item' },
-    ],
-    listboxItems: [
-      { value: '1', label: 'First Item' },
-      { value: '2', label: 'Second Item' },
-      { value: '3', label: 'Third Item' },
-      { value: '4', label: 'Fourth Item' },
-      { value: '5', label: 'Fifth Item' },
-    ],
-  },
-};

package/projects/kit/components/field/directives/input-icon.directive.ts

@@ -1,9 +0,0 @@
-import { Directive, InjectionToken } from '@angular/core';
-
-export const MOZ_INPUT_ICON = new InjectionToken<InputIconDirective>('MozInputIcon');
-
-@Directive({
-  selector: '[mozInputIcon]',
-  providers: [{ provide: MOZ_INPUT_ICON, useExisting: InputIconDirective }],
-})
-export class InputIconDirective {}

package/projects/kit/components/field/field-error.component.html

@@ -1 +0,0 @@
-<ng-content></ng-content>

package/projects/kit/components/field/field-error.component.scss

@@ -1,3 +0,0 @@
-@import 'settings-tools/all-settings';
-
-@import 'components/_c.fields';

package/projects/kit/components/field/field-error.component.ts

@@ -1,12 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-
-@Component({
-  selector: 'moz-field-error',
-  templateUrl: './field-error.component.html',
-  styleUrls: ['./field-error.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    '[class.mc-field__error-message]': 'true',
-  },
-})
-export class FieldErrorComponent {}

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

@@ -1,30 +0,0 @@
-<label class="mc-field__label" *ngIf="viewLabel">
-  {{ label }}
-  <span *ngIf="requirementText" [attr.aria-hidden]="requirementText" class="mc-field__requirement">
-    {{ requirementText }}
-  </span>
-  <span *ngIf="helpText" id="helptext" class="mc-field__help">
-    {{ helpText }}
-  </span>
-</label>
-
-<ng-content></ng-content>
-
-<ng-template #inputIconTemplate>
-  <ng-content select="[mozInputIcon]"></ng-content>
-</ng-template>
-
-<ng-template #inputTemplate>
-  <ng-content select="[moz-input]"></ng-content>
-</ng-template>
-
-<div class="mc-left-icon-input" *ngIf="hasInputIcon | async; else withoutIcon">
-  <ng-container [ngTemplateOutlet]="inputIconTemplate"></ng-container>
-  <ng-container [ngTemplateOutlet]="inputTemplate"></ng-container>
-</div>
-
-<ng-template #withoutIcon>
-  <ng-container [ngTemplateOutlet]="inputTemplate"></ng-container>
-</ng-template>
-
-<ng-content select="moz-field-error"></ng-content>

package/projects/kit/components/field/field.component.scss

@@ -1,30 +0,0 @@
-@import 'settings-tools/all-settings';
-
-@import 'components/_c.fields';
-
-@import 'components/_c.left-icon-input';
-
-.mc-field {
-  display: block;
-}
-
-.mc-field__label {
-  margin-bottom: 0.5rem;
-  display: inline-block;
-}
-
-.mc-left-icon-input [mozInputIcon] {
-  left: 0.75rem;
-  top: 50%;
-  width: 1.5rem;
-  height: 1.5rem;
-  position: absolute;
-  z-index: 1;
-  transform: translateY(-50%);
-  fill: #666;
-  pointer-events: none;
-}
-
-.mc-left-icon-input [moz-input] {
-  padding-left: 2.9375rem;
-}

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

@@ -1,49 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  Input,
-  QueryList,
-  ViewEncapsulation,
-} from '@angular/core';
-import { map, startWith } from 'rxjs';
-import { InputIconDirective, MOZ_INPUT_ICON } from './directives/input-icon.directive';
-
-@Component({
-  selector: 'moz-field',
-  templateUrl: './field.component.html',
-  styleUrls: ['./field.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[class.mc-field]': 'true',
-  },
-})
-export class FieldComponent {
-  @Input() public label = '';
-
-  @Input() public requirementText = '';
-
-  @Input() public helpText = '';
-
-  @ContentChildren(MOZ_INPUT_ICON, { descendants: true })
-  InputIconDirective?: QueryList<InputIconDirective>;
-
-  public get viewLabel() {
-    return !!(this.label || this.requirementText || this.helpText);
-  }
-
-  public get hasInputIcon() {
-    return this.InputIconDirective?.changes.pipe(
-      startWith(!!this.InputIconDirective?.length),
-      map(() => !!this.InputIconDirective?.length)
-    );
-  }
-
-  constructor(private readonly cd: ChangeDetectorRef) {}
-
-  ngAfterViewInit() {
-    this.cd.detectChanges();
-  }
-}

package/projects/kit/components/field/field.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { InputIconDirective } from './directives/input-icon.directive';
-import { FieldErrorComponent } from './field-error.component';
-import { FieldComponent } from './field.component';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [FieldComponent, FieldErrorComponent, InputIconDirective],
-  exports: [FieldComponent, FieldErrorComponent, InputIconDirective],
-})
-export class FieldModule {}

package/projects/kit/components/field/field.stories.ts

@@ -1,48 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { IconModule, TextInputModule } from '../public-api';
-import { FieldComponent } from './field.component';
-import { FieldModule } from './field.module';
-
-export default {
-  component: FieldComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [FieldModule, TextInputModule, IconModule],
-    }),
-  ],
-  argTypes: {
-    label: { type: 'string', defaultValue: 'Label', control: { type: 'text' } },
-    requirementText: { type: 'string', defaultValue: 'optional', control: { type: 'text' } },
-    helpText: {
-      type: 'string',
-      defaultValue: 'A help text to accompany the user in his input',
-      control: { type: 'text' },
-    },
-    invalid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
-    errorMessage: {
-      type: 'string',
-      defaultValue: 'Your custom error',
-      control: { type: 'text' },
-    },
-  },
-  title: 'Form/Field',
-} as Meta;
-
-const Template: Story = ({ label, requirementText, helpText, invalid, errorMessage }: any = {}) => {
-  return {
-    props: { label, requirementText, helpText, invalid, errorMessage },
-    template: `
-      <moz-field
-        [label]="label"
-        [requirementText]="requirementText"
-        [helpText]="helpText"
-      >
-        <moz-icon mozInputIcon iconName="Media_View360_24px"></moz-icon>
-        <input moz-input placeholder="Some text" [invalid]="invalid" />
-        <moz-field-error *ngIf="invalid">{{errorMessage}}</moz-field-error>
-      </moz-field>
-      `,
-  };
-};
-
-export const Default = Template.bind({});

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

@@ -1 +0,0 @@
-<ng-content></ng-content>

package/projects/kit/components/flag/flag.component.scss

@@ -1,2 +0,0 @@
-@import 'settings-tools/_all-settings';
-@import 'components/_c.flag';

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

@@ -1,47 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-
-import { FlagComponent } from './flag.component';
-
-describe('FlagComponent', () => {
-  let component: FlagComponent;
-  let fixture: ComponentFixture<FlagComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FlagComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FlagComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-  it('should pass the correct class', () => {
-    component.type = 'solid';
-    expect(fixture.debugElement.query(By.css('.mc-flag--solid')));
-    component.type = 'bordered';
-    expect(fixture.debugElement.query(By.css('.mc-flag--bordered')));
-    component.type = 'solid-primary-02';
-    expect(fixture.debugElement.query(By.css('.mc-flag--solid-primary-02')));
-    component.type = 'bordered-primary-02';
-    expect(fixture.debugElement.query(By.css('.mc-flag--bordered-primary-02')));
-    component.type = 'solid-dark';
-    expect(fixture.debugElement.query(By.css('.mc-flag--solid-dark')));
-    component.type = 'bordered-dark';
-    expect(fixture.debugElement.query(By.css('.mc-flag--bordered-dark')));
-    component.type = 'solid-light';
-    expect(fixture.debugElement.query(By.css('.mc-flag--solid-light')));
-    component.type = 'bordered-light';
-    expect(fixture.debugElement.query(By.css('.mc-flag--bordered-light')));
-    component.type = 'solid-danger';
-    expect(fixture.debugElement.query(By.css('.mc-flag--solid-danger')));
-    component.type = 'bordered-danger';
-    expect(fixture.debugElement.query(By.css('.mc-flag--bordered-danger')));
-  });
-});

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

@@ -1,26 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { FlagType, FlagTypeCssClass, FLAG_TYPE } from './flag';
-
-@Component({
-  selector: '[moz-flag]',
-  templateUrl: './flag.component.html',
-  styleUrls: ['./flag.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[class.mc-flag]': 'true',
-  },
-})
-export class FlagComponent {
-  @HostBinding('class') public flagClasses: FlagTypeCssClass = 'mc-flag--solid';
-
-  @Input() set type(type: FlagType) {
-    this.flagClasses = `mc-flag--${type}`;
-  }
-}

package/projects/kit/components/flag/flag.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FlagComponent } from './flag.component';
-
-@NgModule({
-  declarations: [FlagComponent],
-  imports: [CommonModule],
-  exports: [FlagComponent],
-})
-export class FlagModule {}

package/projects/kit/components/flag/flag.stories.ts

@@ -1,33 +0,0 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
-import { FLAG_TYPE } from './flag';
-import { FlagComponent } from './flag.component';
-import { FlagModule } from './flag.module';
-
-export default {
-  component: FlagComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [FlagModule],
-    }),
-  ],
-  argTypes: {
-    type: {
-      options: FLAG_TYPE,
-      control: { type: 'radio', defaultValue: 'solid' },
-    },
-    textFlag: { defaultValue: 'Flag', control: { type: 'text' } },
-  },
-  title: 'Data/Flag',
-} as Meta;
-
-const Template: Story = ({ type, textFlag }: any = {}) => ({
-  props: {
-    type,
-  },
-  template: `<div moz-flag [type]="type">
-    ${textFlag}
-    </div>
-    `,
-});
-
-export const Default = Template.bind({});

package/projects/kit/components/flag/flag.ts

@@ -1,24 +0,0 @@
-export type FlagType =
-  | 'solid'
-  | 'bordered'
-  | 'solid-primary-02'
-  | 'bordered-primary-02'
-  | 'solid-dark'
-  | 'bordered-dark'
-  | 'solid-light'
-  | 'bordered-light'
-  | 'solid-danger'
-  | 'bordered-danger';
-export type FlagTypeCssClass = `mc-flag--${FlagType}`;
-export const FLAG_TYPE = [
-  'solid',
-  'bordered',
-  'solid-primary-02',
-  'bordered-primary-02',
-  'solid-dark',
-  'bordered-dark',
-  'solid-light',
-  'bordered-light',
-  'solid-danger',
-  'bordered-danger',
-];

package/projects/kit/components/flag/index.ts

@@ -1 +0,0 @@
-export * from './flag.module';

package/projects/kit/components/icon/icon-size.ts

@@ -1,6 +0,0 @@
-export enum IconSize {
-  S = '16px',
-  M = '24px',
-  L = '32px',
-  XL = '48px',
-}

package/projects/kit/components/icon/icon.component.scss

@@ -1,20 +0,0 @@
-.icon {
-  display: inline-flex;
-}
-
-.icons-size-s {
-  height: 1rem;
-  width: 1rem;
-}
-.icons-size-m {
-  height: 1.5rem;
-  width: 1.5rem;
-}
-.icons-size-l {
-  height: 2rem;
-  width: 2rem;
-}
-.icons-size-xl {
-  height: 3rem;
-  width: 3rem;
-}

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

@@ -1,28 +0,0 @@
-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;
-  let fixture: ComponentFixture<IconComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [IconComponent],
-      imports: [HttpClientModule],
-      providers: [IconService, HttpClient],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(IconComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,59 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  SimpleChanges,
-  ViewEncapsulation,
-} from '@angular/core';
-import { first } from 'rxjs';
-import { IconSize } from './icon-size';
-import { IconService } from './icon.service';
-
-@Component({
-  selector: 'moz-icon',
-  templateUrl: './icon.component.html',
-  styleUrls: ['./icon.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { '[class.icon]': 'true' },
-})
-export class IconComponent implements OnChanges {
-  @Input() public iconName: string = '';
-
-  constructor(private readonly iconService: IconService, private readonly elementRef: ElementRef) {}
-
-  ngOnChanges({ iconName }: SimpleChanges) {
-    this.needRenderIcon(iconName?.currentValue, iconName?.previousValue) &&
-      this.drawIcon(iconName?.currentValue, iconName?.previousValue);
-  }
-
-  private needRenderIcon(currentIconName?: string, previousIconName?: string): boolean {
-    return !!currentIconName && currentIconName !== previousIconName;
-  }
-
-  private getSizeClass(name: string) {
-    const [size] = name.match(/\d\dpx/) || [];
-    const strategy = {
-      [IconSize.S]: 'icons-size-s',
-      [IconSize.M]: 'icons-size-m',
-      [IconSize.L]: 'icons-size-l',
-      [IconSize.XL]: 'icons-size-xl',
-    };
-
-    return strategy[(size as IconSize) || null] || strategy[IconSize.S];
-  }
-
-  private drawIcon(iconName: string, previousIconName?: string) {
-    this.iconService
-      .getIcon(iconName)
-      .pipe(first())
-      .subscribe((svg) => {
-        this.elementRef.nativeElement.innerHTML = svg;
-        previousIconName &&
-          this.elementRef.nativeElement.classList.remove(this.getSizeClass(previousIconName));
-        this.elementRef.nativeElement.classList.add(this.getSizeClass(iconName));
-      });
-  }
-}

package/projects/kit/components/icon/icon.module.ts

@@ -1,10 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { IconComponent } from './icon.component';
-
-@NgModule({
-  declarations: [IconComponent],
-  imports: [CommonModule],
-  exports: [IconComponent],
-})
-export class IconModule {}