@mozaic-ds/angular 0.21.0 → 0.22.0

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

@@ -0,0 +1,40 @@
+// import { RouterTestingModule } from '@angular/router/testing';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TabsComponent } from './tabs.component';
+import { TabsModule } from './tabs.module';
+
+export default {
+  component: TabsComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TabsModule],
+    }),
+  ],
+  title: 'Tabs',
+  argTypes: {
+    fullWidth: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    fullWidthCenter: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    selectTabIndex: { defaultValue: 0, control: { type: 'number' } },
+  },
+} as Meta;
+
+const Template: Story = ({ fullWidth, fullWidthCenter, selectTabIndex }) => ({
+  props: {
+    fullWidth,
+    fullWidthCenter,
+    selectTabIndex,
+  },
+  template: `
+  <moz-tabs 
+  [fullWidth]="fullWidth"
+  [fullWidthCenter]="fullWidthCenter"
+  [selectTabIndex]="selectTabIndex"
+  >
+  <div moz-tab>Tab 1</div>
+  <div moz-tab >Tab 2</div>
+  <div moz-tab>Tab 3</div>
+    </moz-tabs>
+  `,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,29 @@
+<ng-template #labelTemplate>
+  <span [ngClass]="labelCssClass">
+    <ng-content></ng-content>
+  </span>
+</ng-template>
+
+<ng-container [ngSwitch]="type">
+  <ng-container *ngSwitchCase="'selectable'">
+    <input
+      class="mc-tag-selectable__input"
+      type="checkbox"
+      id="selectable"
+      [ngModel]="select"
+      (ngModelChange)="emitSelectChanges($event)"
+    />
+    <label class="mc-tag-selectable__pill" for="selectable">
+      <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
+    </label>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'removable'">
+    <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
+    <button class="mc-tag-removable__remove" (click)="emitRemove()"></button>
+  </ng-container>
+
+  <ng-container *ngSwitchDefault>
+    <ng-container [ngTemplateOutlet]="labelTemplate"></ng-container>
+  </ng-container>
+</ng-container>

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

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

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

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { TagType } from './tag-type';
+
+@Component({
+  selector: 'moz-tag, a[moz-tag]',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class TagComponent {
+  @Input() type: TagType;
+
+  @Input() size: 's' | 'm' = 'm';
+
+  @Input() select = false;
+
+  @Output() selectChange = new EventEmitter<boolean>();
+
+  @Output() clickOnRemove = new EventEmitter<void>();
+
+  constructor(private elementRef: ElementRef<HTMLElement>) {
+    this.type = this.getDefaultType();
+  }
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    return `${this.tagCssClass} ${this.sizeCssClass}`;
+  }
+
+  public get labelCssClass(): string {
+    return `${this.tagCssClass}__label`;
+  }
+
+  private get tagName(): string {
+    return this.elementRef?.nativeElement.tagName.toLowerCase();
+  }
+
+  private get hostIsLink(): boolean {
+    return this.tagName === 'a';
+  }
+
+  private get tagCssClass() {
+    return `mc-tag-${this.type}`;
+  }
+
+  private get sizeCssClass() {
+    return `${this.tagCssClass}--${this.size}`;
+  }
+
+  private getDefaultType(): TagType {
+    return this.hostIsLink ? 'link' : 'text';
+  }
+
+  public emitRemove() {
+    this.clickOnRemove.emit();
+  }
+
+  public emitSelectChanges($event: boolean) {
+    this.selectChange.emit($event);
+  }
+}

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

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TagComponent } from './tag.component';
+
+@NgModule({
+  imports: [CommonModule, FormsModule],
+  declarations: [TagComponent],
+  exports: [TagComponent],
+})
+export class TagModule {}

package/projects/kit/components/tag/text-area.stories.ts

@@ -0,0 +1,49 @@
+import { FormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TagComponent } from './tag.component';
+import { TagModule } from './tag.module';
+
+export default {
+  component: TagComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TagModule, FormsModule],
+    }),
+  ],
+  title: 'Tag',
+  argTypes: {
+    size: {
+      defaultValue: 'm',
+      control: { type: 'select', options: ['s', 'm'] },
+    },
+  },
+} as Meta;
+
+const Template: Story = ({ size }: any = {}) => {
+  const select = true;
+  const removeLogger = () => console.log('click on log');
+
+  return {
+    props: { size, select, removeLogger },
+    template: `
+      <style>
+        .container{
+          display:flex;
+          gap:0.5rem;
+          margin-bottom:1rem;
+        }
+      </style>
+      <div class="container">
+        <moz-tag [size]="size">text</moz-tag>
+        <a moz-tag href="#" [size]="size">text</a>
+        <moz-tag type="selectable" [size]="size" [(select)]="select">selectable</moz-tag>
+        <moz-tag type="removable" [size]="size" (clickOnRemove)="removeLogger()">removable</moz-tag>
+      </div>
+
+      Select binging value: {{select}}
+
+    `,
+  };
+};
+
+export const Default = Template.bind({});

package/projects/kit/components/text-area/text-area.component.scss

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

package/projects/kit/components/text-area/text-area.component.ts

@@ -0,0 +1,47 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { castBooleanProperty } from '../../common';
+
+@Component({
+  selector: 'textarea[moz-text-area]',
+  template: '',
+  styleUrls: ['./text-area.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class TextAreaComponent {
+  private _invalid = false;
+
+  private _valid = false;
+
+  public get invalid(): boolean {
+    return this._invalid || false;
+  }
+
+  public get valid(): boolean {
+    const valid = this._valid || false;
+    return !this.invalid && valid;
+  }
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const staticClasses = 'mc-textarea';
+    const validClass = this.valid ? 'is-valid' : '';
+    const invalidClass = this.invalid ? 'is-invalid' : '';
+    const dynamicClasses = `${validClass} ${invalidClass}`;
+    return `${staticClasses} ${dynamicClasses}`;
+  }
+
+  @Input() public set invalid(val: boolean) {
+    this._invalid = castBooleanProperty(val);
+  }
+
+  @Input() public set valid(val: boolean) {
+    this._valid = castBooleanProperty(val);
+  }
+}

package/projects/kit/components/text-area/text-area.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { TextAreaComponent } from './text-area.component';
+
+@NgModule({
+  declarations: [TextAreaComponent],
+  exports: [TextAreaComponent],
+})
+export class TextAreaModule {}

package/projects/kit/components/text-area/text-area.stories.ts

@@ -0,0 +1,33 @@
+import { FormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { TextAreaComponent } from './text-area.component';
+import { TextAreaModule } from './text-area.module';
+
+export default {
+  component: TextAreaComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TextAreaModule, FormsModule],
+    }),
+  ],
+  title: 'TextArea',
+  argTypes: {
+    placeholder: {
+      type: 'string',
+      defaultValue: 'Text area placeholder',
+      control: { type: 'text' },
+    },
+    invalid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    valid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    disabled: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+  },
+} as Meta;
+
+const Template: Story = ({ disabled, placeholder, invalid, valid }: any = {}) => ({
+  props: { disabled, placeholder, invalid, valid },
+  template: `
+    <textarea moz-text-area [valid]="valid" [invalid]="invalid" [placeholder]="placeholder" [disabled]="disabled"></textarea>
+    `,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,2 @@
+export * from './text-input.component';
+export * from './text-input.module';

package/projects/kit/components/text-input/text-input.component.scss

@@ -0,0 +1,15 @@
+@import 'settings-tools/_all-settings';
+
+@import 'components/_c.text-input';
+
+@import 'components/c.radio';
+
+@import 'components/_c.checkbox';
+
+.mc-text-input--m {
+  height: 3rem;
+}
+
+.mc-text-input--s {
+  height: 2rem;
+}

package/projects/kit/components/text-input/text-input.component.spec.ts

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

package/projects/kit/components/text-input/text-input.component.ts

@@ -0,0 +1,74 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { castBooleanProperty } from '../../common/utils';
+import { TextInputSize } from './text-input';
+
+@Component({
+  selector: 'input[moz-input]',
+  template: '',
+  styleUrls: ['./text-input.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class TextInputComponent {
+  @Input() public size: TextInputSize = 'm';
+
+  private _invalid = false;
+
+  private _valid = false;
+
+  constructor(private readonly elementRef: ElementRef<HTMLInputElement>) {}
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const validClass = this.valid ? 'is-valid' : '';
+    const invalidClass = this.invalid ? 'is-invalid' : '';
+    const sizeCssClass = this.isRadioButton || this.isCheckbox ? '' : `mc-text-input--${this.size}`;
+    return `${this.inputClass} ${sizeCssClass} ${validClass} ${invalidClass}`;
+  }
+
+  public get invalid(): boolean {
+    return this._invalid || false;
+  }
+
+  public get valid(): boolean {
+    const valid = this._valid || false;
+    return !this.invalid && valid;
+  }
+
+  private get typeElement() {
+    return this.elementRef.nativeElement.type || 'text';
+  }
+
+  private get isRadioButton() {
+    return this.typeElement === 'radio';
+  }
+
+  private get isCheckbox() {
+    return this.typeElement === 'checkbox';
+  }
+
+  private get inputClass() {
+    if (this.isCheckbox) {
+      return 'mc-checkbox__input';
+    }
+    if (this.isRadioButton) {
+      return 'mc-radio__input';
+    }
+    return 'mc-text-input';
+  }
+
+  @Input() public set invalid(val: boolean) {
+    this._invalid = castBooleanProperty(val);
+  }
+
+  @Input() public set valid(val: boolean) {
+    this._valid = castBooleanProperty(val);
+  }
+}

package/projects/kit/components/text-input/text-input.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IconModule } from '../public-api';
+import { TextInputComponent } from './text-input.component';
+
+@NgModule({
+  declarations: [TextInputComponent],
+  imports: [CommonModule, FormsModule, IconModule],
+  exports: [TextInputComponent],
+})
+export class TextInputModule {}

package/projects/kit/components/text-input/text-input.stories.ts

@@ -0,0 +1,80 @@
+import { FormsModule } from '@angular/forms';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { IconModule } from '../public-api';
+import { TextInputComponent } from './text-input.component';
+import { TextInputModule } from './text-input.module';
+
+export default {
+  component: TextInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TextInputModule, IconModule, FormsModule],
+    }),
+  ],
+  argTypes: {
+    type: {
+      defaultValue: 'text',
+      options: [
+        'text',
+        'email',
+        'date',
+        'password',
+        'number',
+        'tel',
+        'number',
+        'search',
+        'radio',
+        'checkbox',
+      ],
+      control: { type: 'select' }, // Automatically inferred when 'options' is defined
+    },
+    invalid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    valid: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    placeholder: { type: 'string', defaultValue: 'Text Input', control: { type: 'text' } },
+    value: { type: 'string', defaultValue: '', control: { type: 'text' } },
+    size: {
+      options: ['m', 's'],
+      control: { type: 'radio', defaultValue: 'm' },
+    },
+    disabled: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+    indeterminate: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+  },
+  title: 'TextInput',
+} as Meta;
+
+const Template: Story = ({
+  type,
+  invalid,
+  valid,
+  placeholder,
+  size,
+  disabled,
+  value,
+  indeterminate,
+}: any = {}) => ({
+  props: {
+    type,
+    invalid,
+    valid,
+    placeholder,
+    size,
+    disabled,
+    value,
+    indeterminate,
+  },
+  template: `
+    <input
+      moz-input
+      [type]="type"
+      [invalid]="invalid"
+      [valid]="valid"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [size]="size"
+      [indeterminate]="indeterminate"
+      [(ngModel)]="value"
+    />
+    `,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,13 @@
+<input
+  [id]="toggleId"
+  type="checkbox"
+  [checked]="checked"
+  [disabled]="disabled"
+  class="mc-toggle__input"
+  (click)="toggle()"
+/>
+<label class="mc-toggle__label" [for]="toggleId">
+  <span class="mc-toggle__content">
+    <ng-content></ng-content>
+  </span>
+</label>

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

@@ -0,0 +1,2 @@
+@import 'settings-tools/all-settings';
+@import 'components/c.toggle';

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

@@ -0,0 +1,76 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { generateId } from '../../common';
+import { ToggleSize } from './toggle-size';
+
+export const TOGGLE_CONTROL_VALUE_ACCESSOR: any = {
+  provide: NG_VALUE_ACCESSOR,
+  useExisting: forwardRef(() => ToggleComponent),
+  multi: true,
+};
+
+@Component({
+  selector: 'moz-toggle',
+  templateUrl: './toggle.component.html',
+  styleUrls: ['./toggle.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [TOGGLE_CONTROL_VALUE_ACCESSOR],
+})
+export class ToggleComponent implements ControlValueAccessor {
+  @Input() public disabled = false;
+
+  @Input() public size: ToggleSize = 'm';
+
+  private _checked = false;
+
+  public get checked() {
+    return this._checked;
+  }
+
+  public toggleId: string;
+
+  constructor() {
+    this.toggleId = generateId();
+  }
+
+  @Input()
+  public set checked(v) {
+    this._checked = v;
+    this.onChange(this._checked);
+    this.onTouch();
+  }
+
+  public writeValue(value: any) {
+    this.checked = !!value;
+  }
+
+  public registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  public registerOnTouched(fn: any) {
+    this.onTouch = fn;
+  }
+
+  public onChange: any = () => {};
+
+  onTouch: any = () => {};
+
+  toggle() {
+    this.writeValue(!this.checked);
+  }
+
+  @HostBinding('class')
+  public get hostCssClasses() {
+    const sizeClass = `mc-toggle--${this.size}`;
+    return `mc-toggle ${sizeClass}`;
+  }
+}

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

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

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

@@ -0,0 +1,35 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+
+import { ToggleComponent } from './toggle.component';
+import { ToggleModule } from './toggle.module';
+
+export default {
+  component: ToggleComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ToggleModule],
+    }),
+  ],
+  argTypes: {
+    value: { type: 'string', defaultValue: 'Label', control: { type: 'text' } },
+    size: {
+      options: ['m', 's'],
+      control: { type: 'radio', defaultValue: 'm' },
+    },
+    disabled: { type: 'boolean', defaultValue: false, control: { type: 'boolean' } },
+  },
+  title: 'Toggle',
+} as Meta;
+
+const Template: Story = ({ size, disabled, value }: any = {}) => ({
+  props: {
+    size,
+    disabled,
+    value,
+  },
+  template: `
+    <moz-toggle [size]="size" [disabled]="disabled">{{value}}</moz-toggle>
+    `,
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,2 @@
+<ng-content></ng-content>
+<span *ngIf="viewContent" class="mc-tooltip__content" role="tooltip">{{ text }}</span>

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

@@ -0,0 +1,2 @@
+@import 'settings-tools/all-settings';
+@import 'components/c.tooltip';