ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
100 lines (99 loc) • 3.96 kB
TypeScript
import { RanElement } from '@/utils/index';
import { EventManager } from '@/utils/builder';
import '@/components/popover';
import '@/components/input';
import '@/components/select';
export interface Context {
disabled: Signal<boolean>;
value: Signal<string>;
hue: Signal<number>;
saturation: Signal<number>;
lightness: Signal<number>;
transparency: Signal<number>;
}
export interface RGBA {
r: number;
g: number;
b: number;
a: number;
}
export interface Signal<T> {
getter: () => T;
setter: (newValue: T | ((prev: T) => T)) => void;
}
type ColorFormat = 'HEX' | 'RGB';
export declare class ColorPicker extends RanElement {
colorpicker: HTMLDivElement;
colorpickerInner: HTMLDivElement;
context: Context;
_shadowDom: ShadowRoot;
_events: EventManager;
_effectDisposers: Array<() => void>;
popoverBlock: HTMLElement;
popoverContent: HTMLElement;
colorPickerInner?: HTMLDivElement;
colorPickerPalette?: HTMLElement;
colorPickerSaturation?: HTMLElement;
colorPickerPaletteDot?: HTMLElement;
colorPickerHueSlider?: HTMLElement;
colorPickerHueThumb?: HTMLElement;
colorPickerAlphaSlider?: HTMLElement;
colorPickerAlphaTrack?: HTMLElement;
colorPickerAlphaThumb?: HTMLElement;
colorPickerPreviewInner?: HTMLElement;
colorPickerValueInput?: HTMLElement;
colorPickerFormatSelect?: HTMLElement;
colorPickerPaletteSelect: boolean;
_activeSlider: 'hue' | 'alpha' | null;
_format: ColorFormat;
_editingInput: boolean;
static get observedAttributes(): string[];
constructor();
get value(): string;
set value(value: string);
get sheet(): string;
set sheet(value: string);
get disabled(): boolean;
set disabled(value: boolean | string | undefined | null);
handlerExternalCss: () => void;
/**
* Reflect the `disabled` attribute into the internal state, ARIA, and the
* swatch's visual/interaction state. When disabled the swatch is removed from
* the tab order and marked `aria-disabled`; opening is blocked by
* `blockWhenDisabled` (a capture-phase guard wired in connectedCallback).
*/
syncDisabledState: () => void;
/** Capture-phase guard: swallow clicks/keydowns on the swatch while disabled. */
blockWhenDisabled: (e: Event) => void;
createContext: () => void;
currentRgba: () => RGBA;
/** Canonical string used for the `value` attribute and `change` events. */
currentValue: () => string;
/** String shown in the value input, depending on the selected format. */
currentDisplay: () => string;
updateColorValue: (value: string) => void;
/** Sync the `value` attribute to the live color and emit a `change` event. */
emitChange: () => void;
palettePointerDown: (e: MouseEvent) => void;
updatePaletteFromEvent: (e: MouseEvent) => void;
sliderPointerDown: (kind: 'hue' | 'alpha') => (e: MouseEvent) => void;
updateSliderFromEvent: (kind: 'hue' | 'alpha', e: MouseEvent) => void;
onPointerMove: (e: Event) => void;
/** Make a slider a focusable, described `role="slider"`; valuenow is kept live in setupEffects. */
initSliderA11y: (el: HTMLElement, label: string, max: number) => void;
/** Arrow keys adjust the hue/alpha slider (Shift = coarse step, Home/End = ends). */
sliderKeydown: (kind: 'hue' | 'alpha') => (e: KeyboardEvent) => void;
onPointerUp: () => void;
/** Open the picker from the keyboard: Enter/Space act like a click on the swatch. */
onSwatchKeydown: (e: KeyboardEvent) => void;
onValueInput: (e: Event) => void;
onFormatChange: (e: Event) => void;
syncValueInput: () => void;
setupEffects: () => void;
disposeEffects: () => void;
openColorPicker: () => void;
connectedCallback(): void;
disconnectedCallback(): void;
attributeChangedCallback(name: string, old: string, next: string): void;
}
export default ColorPicker;