@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

package/projects/tgo-canopy-ui/components/checkbox/checkbox.component.scss

@@ -1,312 +0,0 @@
-@use "../../theme/variables" as *;
-
-.mat-mdc-checkbox.checkbox.mat-accent {
-  ::ng-deep .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
-    background-color: var(--color) !important;
-    border-color: var(--color) !important;
-  }
-
-  ::ng-deep &.mat-mdc-checkbox-checked .mdc-checkbox__background {
-    background-color: var(--color) !important;
-    border-color: var(--color) !important;
-
-    .mdc-checkbox__checkmark {
-      color: $tgo-white !important;
-    }
-  }
-
-  ::ng-deep .mdc-checkbox__ripple {
-    background-color: var(--color);
-  }
-
-  //disabled styles
-  ::ng-deep &.mdc-checkbox__native-control:indeterminate ~ .mat-mdc-checkbox-disabled .mdc-checkbox__background {
-    background-color: $tgo-dark;
-  }
-
-  ::ng-deep &.mat-mdc-checkbox-checked.mat-mdc-checkbox-disabled .mdc-checkbox__background {
-    background-color: $tgo-dark;
-    --color: $tgo-dark !important;
-  }
-
-  ::ng-deep &.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox {
-    opacity: 0.5;
-  }
-}
-
-.checkbox, .checkbox-container {
-  --border-width-default-state: 4px;
-  --border-width-animation-state: 6px;
-  width: 100%;
-
-  &[alignment="top"] {
-    ::ng-deep.mdc-form-field {
-      align-items: start;
-    }
-
-    .label {
-      margin-top: 10px;
-    }
-  }
-
-
-  &[truncate-text="true"] {
-    .label, ::ng-deep label {
-      user-select: none;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  @keyframes focus-ring-animation {
-    0% {
-      outline-width: var(--border-width-animation-state);
-    }
-    100% {
-      outline-width: var(--border-width-default-state);
-    }
-  }
-
-  .cdk-keyboard-focused {
-    outline: none;
-
-    ::ng-deep.mdc-checkbox__ripple {
-      display: none;
-    }
-
-    ::ng-deep.mdc-checkbox__background {
-      outline: 3px solid $black;
-      animation: focus-ring-animation 0.4s forwards;
-
-      &:after {
-        content: '';
-        position: absolute;
-        width: calc(100% + 2px);
-        height: calc(100% + 2px);
-        top: -1px;
-        left: -1px;
-        outline: 2px solid $tgo-white;
-        border-radius: 4px;
-      }
-    }
-  }
-
-  &[hasError="true"] {
-    --border-width-default-state: 6px;
-    --border-width-animation-state: 8px;
-    &:focus-visible {
-
-      ::ng-deep.mdc-checkbox__background {
-        &:after {
-          width: calc(100% + 4px);
-          height: calc(100% + 4px);
-          top: -2px;
-          left: -2px;
-        }
-      }
-    }
-  }
-}
-
-[theme="dark"], [theme="light"], .dark, .light {
-  --mdc-checkbox-unselected-icon-color: #{$black} !important;
-
-  .mat-mdc-checkbox {
-    width: 100%;
-
-    &.disable-ripple {
-      ::ng-deep .mdc-checkbox__ripple {
-        display: none;
-      }
-    }
-  }
-
-  ::ng-deep .mdc-form-field {
-    width: 100%;
-  }
-
-  ::ng-deep .mdc-checkbox__background {
-    border-radius: 4px;
-    transform: scale(0.9);
-    background: $tgo-white !important;
-    border-width: 1px;
-  }
-
-  ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-form-field .mdc-checkbox {
-    opacity: 1 !important;
-  }
-
-  ::ng-deep .mat-mdc-checkbox.checkbox.mat-accent.mat-mdc-checkbox-disabled .mdc-checkbox__background {
-    background-color: $grayscale-20 !important;
-    border-color: $grayscale-40 !important;
-
-    .mdc-checkbox__mixedmark {
-      border-color: $grayscale-40;
-      width: 8px;
-    }
-
-    svg {
-      color: $grayscale-40 !important;
-    }
-  }
-
-  ::ng-deep .mdc-checkbox__checkmark {
-    width: 12px;
-    height: 12px;
-    left: calc(50% - 6px);
-    top: calc(50% - 6px);
-  }
-
-  ::ng-deep .mdc-checkbox .mdc-checkbox__native-control:enabled ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
-    width: 12px;
-  }
-}
-
-::ng-deep .mdc-checkbox {
-  &__ripple {
-    background: var(--color) !important;
-  }
-}
-
-::ng-deep .mat-mdc-checkbox {
-  .mdc-form-field .mdc-label {
-    padding-left: 0;
-  }
-}
-
-@mixin multiple($color) {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 16px;
-  background: $color;
-  border-radius: 8px;
-
-  ::ng-deep .mat-mdc-checkbox {
-    width: 100%;
-    height: 100%;
-  }
-
-  ::ng-deep .mdc-form-field {
-    padding: 8px;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-  }
-}
-
-.multiple-checked {
-  border: 1px solid var(--color);
-  @include multiple(var(--color));
-
-  &[theme="classic"] {
-    .mat-mdc-checkbox.checkbox.mat-accent {
-      ::ng-deep .mdc-checkbox__background {
-        border: 1px solid $tgo-white !important;
-        border-color: $tgo-white !important;
-      }
-    }
-  }
-
-  ::ng-deep label {
-    color: $tgo-white;
-  }
-
-  &[theme="dark"][hasError="false"], &[theme="light"][hasError="false"] {
-    background: $tgo-white;
-    border-radius: 10px;
-    border-color: $black;
-    outline: 1px solid $black;
-
-    ::ng-deep label {
-      color: $black;
-    }
-  }
-
-  &[theme="dark"][hasError="true"], &[theme="light"][hasError="true"] {
-    border: 1px solid $error-50;
-    outline: 1px solid $error-50;
-    background: $tgo-white;
-    border-radius: 10px;
-
-    ::ng-deep label {
-      color: $black;
-    }
-  }
-
-  &[theme="classic"][hasError="true"] {
-    border: 1px solid $error-50;
-    outline: 1px solid $error-50;
-  }
-}
-
-
-.multiple-unchecked {
-  border: 1px solid $tgo-medium;
-  @include multiple($tgo-white);
-
-  &:hover {
-    background: $tgo-light;
-    border: 1px solid $tgo-medium;
-  }
-
-  ::ng-deep .mdc-checkbox__background {
-    border: 1px solid $tgo-black;
-  }
-
-  ::ng-deep .mdc-checkbox__native-control:not([disabled]):focus ~ .mdc-checkbox__ripple {
-    opacity: 0 !important;
-  }
-
-  &[theme="dark"][hasError="false"], &[theme="light"][hasError="false"] {
-    border: 1px solid $grayscale-40;
-    background: $tgo-white;
-    border-radius: 10px;
-
-    ::ng-deep .mdc-checkbox__background {
-      border: 1px solid $black !important;
-    }
-
-    &:hover {
-      outline: 1px solid $black;
-      border-color: $black !important;
-    }
-  }
-
-  &[hasError="true"] {
-    border: 1px solid $error-50;
-    outline: 1px solid $error-50;
-    background: $tgo-white;
-
-    &:not([theme="classic"]) {
-      border-radius: 10px;
-    }
-  }
-}
-
-*[hasError="true"] {
-  --mdc-checkbox-unselected-icon-color: #{$error-50} !important;
-  --mdc-checkbox-unselected-hover-icon-color: #{$error-50} !important;
-  --mdc-checkbox-unselected-focus-icon-color: #{$error-50} !important;
-
-  ::ng-deep {
-    .mdc-checkbox__background {
-      border-width: 2px !important;
-    }
-  }
-}
-
-.checkbox-container {
-  cursor: pointer;
-
-  .label {
-    user-select: none;
-  }
-}
-
-.checkbox .label {
-  display: block;
-  width: 100%;
-  cursor: pointer;
-}

package/projects/tgo-canopy-ui/components/checkbox/checkbox.component.spec.ts

@@ -1,263 +0,0 @@
-import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
-import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
-import { CheckboxComponent } from './checkbox.component';
-import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
-import { By } from '@angular/platform-browser';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
-import { MatTooltipModule } from '@angular/material/tooltip';
-
-describe('CheckboxComponent', () => {
-  let fixture: ComponentFixture<CheckboxComponent>;
-  let component: CheckboxComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MatCheckboxModule, HasValidationErrorPipe, MatTooltipModule],
-      declarations: [CheckboxComponent],
-      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(CheckboxComponent);
-    component = fixture.componentInstance;
-    component.checkboxElement = { _inputElement: { nativeElement: { setAttribute: jest.fn() } } } as unknown as MatCheckbox;
-  });
-
-  describe('when disabled input is intialized in true', () => {
-    it('should add disable attribute', () => {
-      component.disabled = true;
-      fixture.detectChanges();
-      const input = fixture.debugElement.nativeElement.querySelector('input');
-      expect(input.disabled).toBeTruthy();
-    });
-  });
-
-  describe('when checked input is intialized', () => {
-    it('should add checked property in false', () => {
-      fixture.detectChanges();
-      const input = fixture.debugElement.query(By.css('input'));
-      expect(input.properties['checked']).toBeFalsy();
-    });
-    describe('and its value is true', () => {
-      it('should add checked attribute in true', () => {
-        component.checked = true;
-        fixture.detectChanges();
-        const input = fixture.debugElement.query(By.css('input'));
-        expect(input.properties['checked']).toBeTruthy();
-      });
-    });
-  });
-
-  describe('when indeterminate input is intialized', () => {
-    it('should add indeterminate property in false', () => {
-      fixture.detectChanges();
-      const input = fixture.debugElement.query(By.css('input'));
-      expect(input.properties['indeterminate']).toBeFalsy();
-    });
-    describe('and its value is true', () => {
-      it('should add checked indeterminate in true', () => {
-        component.indeterminate = true;
-        fixture.detectChanges();
-        const input = fixture.debugElement.query(By.css('input'));
-        expect(input.properties['indeterminate']).toBeTruthy();
-      });
-    });
-  });
-
-  describe('when name input is intialized', () => {
-    it('should add name property in default', () => {
-      component.name = 'test';
-      fixture.detectChanges();
-      const input = fixture.debugElement.query(By.css('input'));
-      expect(input.properties['name']).toBe('test');
-    });
-  });
-
-  describe('when label input is initialized', () => {
-    it('should show label', () => {
-      component.label = 'some text';
-      fixture.detectChanges();
-      const label = fixture.debugElement.nativeElement.querySelector('label');
-      expect(label.textContent).toContain('some text');
-    });
-  });
-
-  describe('when mat-checkbox changes', () => {
-    let checkbox: any;
-
-    beforeEach(async () => {
-      checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox');
-
-      jest.spyOn(component, 'setClass');
-    });
-    it('should call emitChange when change', fakeAsync(() => {
-      jest.spyOn(component, 'toggleChecked');
-      fixture.detectChanges();
-      let input = fixture.debugElement.nativeElement.querySelector('mat-checkbox');
-      input.dispatchEvent(new Event('click'));
-      tick();
-      expect(component.toggleChecked).toHaveBeenCalled();
-    }));
-    it('should emit the event when emitChange is called', () => {
-      const emitSpy = jest.spyOn(component.changed, 'emit');
-      const eventMock = new MatCheckboxChange();
-      component.emitChange(eventMock);
-      fixture.detectChanges();
-      expect(emitSpy).toHaveBeenCalled();
-    });
-    describe('and disabled is true', () => {
-      it('should not change checkbox state', () => {
-        component.disabled = true;
-        expect(component.checked).toBeFalsy();
-
-        checkbox.click();
-
-        fixture.detectChanges();
-        expect(component.checked).toBeTruthy();
-      });
-    });
-    describe('and disabled is false', () => {
-      it('should change checkbox state', fakeAsync(() => {
-        component.disabled = false;
-        expect(component.checked).toBeFalsy();
-        const myCheckBox = fixture.debugElement.query(By.css('mat-checkbox'));
-
-        myCheckBox.triggerEventHandler('click', { checked: true });
-
-        tick();
-        fixture.detectChanges();
-        expect(component.checked).toBeTruthy();
-      }));
-
-      it('should call setClass()', () => {
-        expect(component.setClass).not.toHaveBeenCalled();
-
-        checkbox.click();
-
-        fixture.detectChanges();
-        expect(component.setClass).toHaveBeenCalled();
-      });
-    });
-    describe('and checkbox is Multiple Choice', () => {
-      it('should toggle "multiple-cheked" and "multiple-uncheked" css classes', fakeAsync(() => {
-        const multiCheckboxDiv = fixture.debugElement.nativeElement.querySelector('div');
-        const multiCheckbox = fixture.debugElement.query(By.css('mat-checkbox'));
-
-        component.multiple = true;
-        tick();
-        fixture.detectChanges();
-
-        expect(multiCheckboxDiv.className).toBe('checkbox-container multiple-unchecked');
-
-        multiCheckbox.triggerEventHandler('click', { checked: true });
-        tick();
-        fixture.detectChanges();
-
-        expect(multiCheckboxDiv.className).toEqual('checkbox-container multiple-checked');
-
-        multiCheckbox.triggerEventHandler('click', { checked: false });
-        tick();
-        fixture.detectChanges();
-
-        expect(multiCheckboxDiv.className).toEqual('checkbox-container multiple-unchecked');
-      }));
-    });
-  });
-
-  //Testing writeValue
-  describe('writeValue', () => {
-    it('should set value as value input', () => {
-      component.writeValue(true);
-      expect(component.checked).toBe(true);
-    });
-  });
-  //Testing registerOnChange
-  describe('registerOnChange', () => {
-    it('should set onChange', () => {
-      component.registerOnChange(false);
-      expect(component.onChange).toBe(false);
-    });
-  });
-  //Testing registerOnTouched
-  describe('registerOnTouched', () => {
-    it('should set onTouch', () => {
-      component.registerOnTouched(true);
-      expect(component.onTouch).toBe(true);
-    });
-  });
-  //Testing setDisabledState
-  describe('setDisabledState', () => {
-    it('should set disabled', () => {
-      component.setDisabledState(true);
-      expect(component.disabled).toBe(true);
-    });
-  });
-
-  describe('A11y', () => {
-    it('should have aria-label set to label attributes', () => {
-      component.label = 'test';
-      fixture.detectChanges();
-      const input = fixture.debugElement.nativeElement.querySelector('input');
-      expect(input.getAttribute('aria-label')).toBe('test');
-    })
-
-    it('should set aria-disabled attribute to true when disabled is true', () => {
-      component.disabled = true;
-      fixture.detectChanges();
-      const input = fixture.debugElement.nativeElement.querySelector('input');
-      expect(input.getAttribute('aria-disabled')).toBe('true');
-    });
-    it('should set aria-disabled attribute to false when disabled is false', () => {
-      component.disabled = false;
-      fixture.detectChanges();
-      const input = fixture.debugElement.nativeElement.querySelector('input');
-      expect(input.getAttribute('aria-disabled')).toBe('false');
-    });
-    it('should set aria-checked attribute to true when checked is true', () => {
-      component.checked = true;
-      fixture.detectChanges();
-      const input = fixture.debugElement.nativeElement.querySelector('input');
-      expect(input.getAttribute('aria-checked')).toBe('true');
-    });
-    it('should set aria-checked attribute to false when checked is false', () => {
-      component.checked = false;
-      fixture.detectChanges();
-      const input = fixture.debugElement.nativeElement.querySelector('input');
-      expect(input.getAttribute('aria-checked')).toBe('false');
-    });
-  });
-
-  describe('when ariaLabelledby input is initialized', () => {
-    it('should set aria-labelledby attribute', () => {
-      component.ariaLabelledby = 'labelledby-id';
-      fixture.detectChanges();
-      const input = fixture.debugElement.nativeElement.querySelector('input');
-      expect(input.getAttribute('aria-labelledby')).toBe('labelledby-id');
-    });
-  });
-
-  describe('when ariaDescribedby input is initialized', () => {
-    it('should set aria-describedby attribute', () => {
-      component.ariaDescribedby = 'describedby-id';
-      fixture.detectChanges();
-      const input = fixture.debugElement.nativeElement.querySelector('input');
-      expect(input.getAttribute('aria-describedby')).toBe('describedby-id');
-    });
-  });
-
-  describe('when truncateText input is initialized', () => {
-    it('should set truncateText property', () => {
-      component.truncateText = true;
-      fixture.detectChanges();
-      expect(component.truncateText).toBe(true);
-    });
-  });
-
-  describe('when alignment input is initialized', () => {
-    it('should set alignment property', () => {
-      component.alignment = 'top';
-      fixture.detectChanges();
-      expect(component.alignment).toBe('top');
-    });
-  });
-});

package/projects/tgo-canopy-ui/components/checkbox/checkbox.component.stories.ts

@@ -1,125 +0,0 @@
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { CheckboxComponent } from './checkbox.component';
-import { transformTheme } from '../../utils/transform-theme';
-import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { EllipseTextDirective } from "../../directives/ellipse-text.directive";
-import { FocusVisibleDirective } from "./focus-visible.directive";
-
-export default {
-  title: 'Forms/Checkbox',
-  component: CheckboxComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [CheckboxComponent],
-      imports: [MatCheckboxModule, HasValidationErrorPipe, MatTooltipModule, EllipseTextDirective, FocusVisibleDirective],
-      providers: [],
-    }),
-  ],
-} as Meta;
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  disabled: false,
-  checked: false,
-  indeterminate: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['setClass', 'toggleChecked', 'ngOnInit', 'classMultiple', 'emitChange'],
-  },
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=3535-5895&t=onhTI5hJRt5inE1g-0',
-  },
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-
-Disabled.parameters = {
-  ...Default.parameters,
-};
-
-export const Selected = Template.bind({});
-Selected.args = {
-  ...Default.args,
-  checked: true,
-};
-
-Selected.parameters = {
-  ...Default.parameters,
-};
-
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-  ...Default.args,
-  indeterminate: true,
-};
-
-Indeterminate.parameters = {
-  ...Default.parameters,
-};
-
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  checked: true,
-  label: 'Some text.',
-};
-
-WithLabel.parameters = {
-  ...Default.parameters,
-};
-
-export const MultipleChoice: StoryFn = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-      <ui-checkbox applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - unselected" [checked]="false"></ui-checkbox>
-    <br>
-    <ui-checkbox applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - selected" [checked]="true"></ui-checkbox>
-    `,
-    };
-  },
-} as StoryFn;
-
-export const WithErrorMultiple: StoryFn = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-        <ui-checkbox [hasError]="true" applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - unselected" [checked]="false"></ui-checkbox>
-        <ui-checkbox [hasError]="true" applicationTheme="${_theme}" [multiple]="true" label="Multiple selection - unselected" [checked]="false"></ui-checkbox>
-      `,
-    };
-  },
-} as StoryFn;
-
-export const WithErrorSingle: StoryFn = {
-  render: (args, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-        <ui-checkbox [hasError]="true" applicationTheme="${_theme}" [multiple]="false" label="Single selection - unselected" [checked]="false"></ui-checkbox>
-        <ui-checkbox [hasError]="true" applicationTheme="${_theme}" [multiple]="false" label="Single selection - unselected" [checked]="false"></ui-checkbox>
-      `,
-    };
-  },
-} as StoryFn;