Open arnemileswinter opened 8 months ago
Hi @arnemileswinter,
It is recommended that Angular components be encapsulated and that ViewEncapsulation.Emulated is used as the default. What I can suggest is that you may create your component using SketchPickerComponent as a base class, and implement @Input binding in the same way as SketchPickerComponent, copy and edit the HTML and SCSS as you like.
@Component({
selector: `my-sketch-picker`,
template: `
<saturation-component [(color)]="control.value" />
<div class="controls">
<div class="controls-row hue-alpha">
<div class="column">
<hue-component [(color)]="control.value" />
@if (control.alphaChannelVisibilityChanges | async) {
<alpha-component [(color)]="control.value" />
}
</div>
<div class="column indicator-column">
<indicator-component colorType="rgba" [color]="control.value" />
</div>
</div>
<div class="controls-row presentation">
<div class="column">
<hex-input-component label [(color)]="control.value" />
</div>
<div class="column">
<rgba-input-component [alpha]="control.alphaChannelVisibilityChanges | async" label [(color)]="control.value" />
</div>
</div>
</div>
@if (control.presetsVisibilityChanges | async) {
<color-presets-component [(color)]="control.value" [colorPresets]="control.presets" />
}
`,
style: `
:host,
:host ::ng-deep * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
...
`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [
SaturationComponent,
IndicatorComponent,
HueComponent,
AlphaComponent,
HexComponent,
RgbaComponent,
ColorPresetsComponent,
AsyncPipe
]
})
export class MySketchPickerComponent extends SketchPickerComponent {
@Input()
public color: string;
@Input()
public control: ColorPickerControl;
@Output()
public colorChange: EventEmitter<ColorString> = new EventEmitter(false);
constructor(cdr: ChangeDetectorRef) {
super(cdr);
}
}
If you have any other ideas that don't involve @Input binding, I'd like to keep the number of attributes in the HTML for certain components to a minimum.
Hello! Thanks for the lib, it works like a charm.
I'm trying to integrate the sketch-picker into a tailwind css project so the styling is so much different and it should support dark and light theme.
So what I did was fight against the styles that are already assigned styles like this:
but that's obviously working against the library. so i am wondering if maybe one could somehow opt-out of the styling you provided? I am thinking perhaps a css class name that can be overwritten via an input, and the scss only applies to components of that class?
Something like:
And one could overwrite like this
and then have their custom sketch-picker-component.myTheme css rules
This should obviously not apply to the color-swatches and widgets, those should stay default. But rather the inputs and css-tables and such.
Then again, I am fairly new to angular and perhaps it is somehow possible to disable imported styles? Let me know what you think!