gistfile1.txt

import { Component, ViewEncapsulation, ElementRef, AfterViewInit, HostBinding } from '@angular/core';

@Component({
  selector: '[oneview-checkbox]',
  template: `<ng-content></ng-content>`,
  styles: [`
    input[oneview-checkbox][type="checkbox"] {
      -webkit-appearance: unset;
      position: relative;
      width: 24px;
      height: 24px;
      display: inline-block;
      margin-right: 4px;
    }

    input[oneview-checkbox][type="checkbox"]::before {
      display: flex;
      box-sizing: border-box;
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      background-color: #FFF;
      border-radius: 4px;
      border: 1px solid #333;
      align-items: center;
      justify-content: center;
    }

    input[oneview-checkbox][type="checkbox"]:disabled {
      opacity: 0.5;
      background: #CCC;
    }

    input[oneview-checkbox][type="checkbox"]:checked::before {
      font-family: rui-icon;
      color: var(--color-rogers-red);
      content: "\\e941";;
    }

    input[oneview-checkbox][type="checkbox"].filled:checked::before {
      border: 1px solid var(--color-rogers-red);
      background: var(--color-rogers-red);
      color: #FFF;
    }
    input[oneview-checkbox][type="checkbox"]:disabled.filled:checked::before {
      border: 1px solid #CCC; 
      background: #CCC;
      color: #FFF;
    }
  `,`
  label[oneview-checkbox] {
    position: relative;
    height: 24px;
  }
  label[oneview-checkbox] input { 
    width: 24px; 
    height: 24px;
    position: absolute;
  }
  label[oneview-checkbox] input + .checkbox {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    position: relative;
    transition: all 200ms;
  }
  label[oneview-checkbox] input + .checkbox:before {
    display: flex;
    content: '';
    border: 1px solid #1f1f1f;
    border-radius: 4px;
    background-color: #fff;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  label[oneview-checkbox] input:checked + .checkbox:before {
    font-family: rui-icon;
    content: "\\e941";
    color: var(--color-rogers-red);
  } 
  label[oneview-checkbox].filled input:checked + .checkbox:before {
    border: 1px solid var(--color-rogers-red);
    color: #fff;
    background-color: var(--color-rogers-red);
  }
  
  label[oneview-checkbox] input:disabled {
    -webkit-appearance: unset;
  }
  label[oneview-checkbox] input:disabled + .checkbox {
    opacity: .5;
    color: #fff;
    pointer-events: none;
  }
  label[oneview-checkbox].filled input:disabled:checked + .checkbox:before {
    border: 1px solid #CCC;
    color: #fff;
    background-color: #CCC;
  }
  `],
  encapsulation: ViewEncapsulation.None // enable overwriting
})
export class OneviewCheckboxComponent implements AfterViewInit {
  constructor(private elRef: ElementRef) {}
  focused = false;

  @HostBinding('class.focused') cFocused = this.focused;

  ngAfterViewInit() {
    const el = this.elRef.nativeElement;
    if (el.tagName !== 'LABEL') return;

    el.setAttribute('tabindex', '-1'); // outline when clicked
    const inputEl = el.querySelector('input');

    const inputId = inputEl.getAttribute('for') || `checkbox-${Math.floor(Math.random()*10000)}`;
    el.setAttribute('for', inputId);
    inputEl.setAttribute('id', inputId);

    const checkboxEl = document.createElement('div');
    checkboxEl.classList.add('checkbox');
    checkboxEl.setAttribute('id', inputId);
    inputEl.insertAdjacentElement('afterend', checkboxEl);
  }
}