How to use ngx-color - 10 common examples

To help you get started, we’ve selected a few ngx-color examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github scttcper / ngx-color / src / lib / components / sketch / sketch.component.ts View on Github external
handleBlockChange({ hex, $event }) {
    if (isValidHex(hex)) {
      // this.hex = hex;
      this.handleChange(
        {
          hex,
          source: 'hex',
        },
        $event,
      );
    }
  }
}
github scttcper / ngx-color / src / lib / components / block / block.component.ts View on Github external
handleBlockChange({ hex, $event }) {
    if (isValidHex(hex)) {
      // this.hex = hex;
      this.handleChange(
        {
          hex,
          source: 'hex',
        },
        $event,
      );
    }
  }
}
github scttcper / ngx-color / src / lib / components / twitter / twitter.component.ts View on Github external
handleBlockChange({ hex, $event }) {
    if (isValidHex(hex)) {
      // this.hex = hex;
      this.handleChange({ hex, source: 'hex' }, $event);
    }
  }
github scttcper / ngx-color / src / lib / components / sketch / sketch-fields.component.ts View on Github external
handleChange({ data, $event }) {
    if (data.hex) {
      if (isValidHex(data.hex)) {
        this.onChange.emit({
          data: {
            hex: data.hex,
            source: 'hex',
          },
          $event,
        });
      }
    } else if (data.r || data.g || data.b) {
      this.onChange.emit({
        data: {
          r: data.r || this.rgb.r,
          g: data.g || this.rgb.g,
          b: data.b || this.rgb.b,
          source: 'rgb',
        },
github scttcper / ngx-color / src / lib / components / chrome / chrome-fields.component.ts View on Github external
handleChange({ data, $event }) {
    if (data.hex) {
      if (isValidHex(data.hex)) {
        this.onChange.emit({
          data: {
            hex: data.hex,
            source: 'hex',
          },
          $event,
        });
      }
    } else if (data.r || data.g || data.b) {
      this.onChange.emit({
        data: {
          r: data.r || this.rgb.r,
          g: data.g || this.rgb.g,
          b: data.b || this.rgb.b,
          source: 'rgb',
        },
github scttcper / ngx-color / src / lib / components / compact / compact-fields.component.ts View on Github external
handleChange({ data, $event }) {
    if (data.hex) {
      if (isValidHex(data.hex)) {
        this.onChange.emit({
          data: {
            hex: data.hex,
            source: 'hex',
          },
          $event,
        });
      }
    } else {
      this.onChange.emit({
        data: {
          r: data.r || this.rgb.r,
          g: data.g || this.rgb.g,
          b: data.b || this.rgb.b,
          source: 'rgb',
        },
github scttcper / ngx-color / src / lib / common / alpha.component.ts View on Github external
handleChange($event: Event) {
    const data = calculateAlphaChange($event, this, this.container.nativeElement);
    if (data) {
      this.onChange.emit({ data, $event });
    }
  }
}
github scttcper / ngx-color / src / lib / common / hue.component.ts View on Github external
handleChange($event: Event) {
    const data = calculateHueChange($event, this, this.container.nativeElement);
    if (data) {
      this.onChange.emit({data, $event});
    }
  }
}
github scttcper / ngx-color / src / lib / common / saturation.component.ts View on Github external
handleChange($event: Event) {
    $event.preventDefault();
    const data = calculateSaturationChange($event, this, this.container.nativeElement);
    this.onChange.emit({ data, $event });
  }
}
github scttcper / ngx-color / src / lib / components / compact / compact.component.ts View on Github external
handleBlockChange({ hex, $event }) {
    if (isValidHex(hex)) {
      this.handleChange({ hex, source: 'hex' }, $event);
    }
  }
  handleValueChange({ data, $event }) {

ngx-color

A Collection of Color Pickers from Sketch, Photoshop, Chrome & more

MIT
Latest version published 11 months ago

Package Health Score

64 / 100
Full package analysis