import { ValueComponent } from 'obsidian' ; export class ColorPickerComponent extends ValueComponent < string > { private value : string = '#000000' ; private containerEl : HTMLElement ; private inputEl : HTMLInputElement ; constructor ( containerEl ) { super ( ) ; this . containerEl = containerEl ; this . inputEl = containerEl . createEl ( 'input' ) ; this . inputEl . type = 'color' ; this . inputEl . ariaLabel = 'Click to change the color' ; } onChange ( callback ) { this . inputEl . addEventListener ( 'input' , ( ) => { this . setValue ( this . inputEl . value ) ; callback ( this . getValue ( ) ) ; } ) ; return this ; } getValue ( ) { return this . value ; } setValue ( value ) { this . value = value ; this . inputEl . value = value ; return this ; } build ( ) { this . containerEl . appendChild ( this . inputEl ) ; return this ; } }