import { CSSResultArray , html , PropertyValues , SpectrumElement , TemplateResult , } from '@spectrum-web-components/base' ; import { property } from '@spectrum-web-components/base/src/decorators.js' ; import '@spectrum-web-components/color-loupe/sp-color-loupe.js' ; import { HSL , HSLA , HSV , HSVA , RGB , RGBA , TinyColor } from '@ctrl/tinycolor' ; import styles from './color-handle.css.js' ; export type ColorValue = string | number | TinyColor | HSVA | HSV | RGB | RGBA | HSL | HSLA ; export const extractHueAndSaturationRegExp = /^hs[v|l]a?\s?\((\d{1,3}\.?\d*?),?\s?(\d{1,3})/ ; export const replaceHueAndSaturationRegExp = /(^hs[v|l]a?\s?\()\d{1,3}\.?\d*?(,?\s?)\d{1,3}/ ; export const replaceHueRegExp = /(^hs[v|l]a?\()\d{1,3}/ ; element export class ColorHandle extends SpectrumElement { public static get styles ( ) : CSSResultArray { return [ styles ] ; } @ property ( { type : Boolean , reflect : true } ) public disabled = false ; @ property ( { type : Boolean , reflect : true } ) public focused = false ; @ property ( { type : Boolean , reflect : true } ) public open = false ; @ property ( { type : String } ) public color = 'rgba(255, 0, 0, 0.5)' ; private handlePointerdown ( event ) { if ( event . pointerType === 'touch' ) { this . open = true ; } this . setPointerCapture ( event . pointerId ) ; } private handlePointerup ( event ) { this . open = false ; this . releasePointerCapture ( event . pointerId ) ; } protected render ( ) { return html `
            <div class="color" style="background-color: ${ this . color }"></div>
            <sp-color-loupe
                color=${ this . color }
                ?open=${ this . open && ! this . disabled }
            ></sp-color-loupe>
        ` ; } protected firstUpdated ( changed ) { super . firstUpdated ( changed ) ; this . addEventListener ( 'pointerdown' , this . handlePointerdown ) ; this . addEventListener ( 'pointerup' , this . handlePointerup ) ; this . addEventListener ( 'pointercancel' , this . handlePointerup ) ; } }