@ui5/webcomponents 0.0.0-4e00e5559 → 0.0.0-4e88b8243

package/dist/ColorPicker.d.ts

@@ -0,0 +1,156 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import type { ColorRGB } from "@ui5/webcomponents-base/dist/util/ColorConversion.js";
+type ColorCoordinates = {
+    x: number;
+    y: number;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.
+ *
+ * ### Usage
+ *
+ * #### When to use
+ * Use the color picker if:
+ *
+ * -  users need to select any color freely.
+ *
+ * #### When not to use
+ *
+ * -  Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/ColorPicker.js";`
+ * @constructor
+ * @since 1.0.0-rc.12
+ * @extends UI5Element
+ * @public
+ */
+declare class ColorPicker extends UI5Element implements IFormInputElement {
+    eventDetails: {
+        change: void;
+    };
+    /**
+     * Defines the currently selected color of the component.
+     *
+     * **Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
+     * @default "rgba(255,255,255,1)"
+     * @public
+     */
+    value: string;
+    /**
+     * Determines the name by which the component will be identified upon submission in an HTML form.
+     *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * @default undefined
+     * @public
+     * @since 2.0.0
+     */
+    name?: string;
+    /**
+     * When set to `true`, the alpha slider and inputs for RGB values will not be displayed.
+     * @default false
+     * @public
+     * @since 2.5.0
+     */
+    simplified: boolean;
+    /**
+     * Defines the HEX code of the currently selected color
+     *
+     * **Note**: If Alpha(transperancy) is set it is not included in this property. Use `color` property.
+     * @private
+     */
+    hex: string;
+    /**
+     * Defines the current main color which is selected via the hue slider and is shown in the main color square.
+     * @private
+     */
+    _mainValue: ColorRGB;
+    /**
+     * Defines the currenty selected color from the main color section.
+     * @private
+     */
+    _value: ColorRGB;
+    /**
+     * @private
+     */
+    _selectedCoordinates: ColorCoordinates;
+    /**
+     * @private
+     */
+    _alpha: number;
+    /**
+     * @private
+     */
+    _hue: number;
+    /**
+     * @private
+     */
+    _isSelectedColorChanged: boolean;
+    /**
+     * @private
+     */
+    _isHueValueChanged: boolean;
+    /**
+     * @private
+     */
+    _wrongHEX: boolean;
+    selectedHue: number;
+    mouseDown: boolean;
+    mouseIn: boolean;
+    static i18nBundle: I18nBundle;
+    formElementAnchor(): Promise<HTMLElement | undefined>;
+    get formFormattedValue(): string;
+    constructor();
+    onBeforeRendering(): void;
+    _handleMouseDown(e: MouseEvent): void;
+    _handleMouseUp(): void;
+    _handleMouseOut(e: MouseEvent): void;
+    _handleMouseMove(e: MouseEvent): void;
+    _handleAlphaInputFromSlider(e: CustomEvent): void;
+    _handleHueInput(e: CustomEvent): void;
+    _handleHEXChange(e: CustomEvent | KeyboardEvent): void;
+    _handleRGBInputsChange(e: Event): void;
+    _setMainColor(hueValue: number): void;
+    _handleAlphaChange(e: CustomEvent): void;
+    _changeSelectedColor(x: number, y: number): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _calculateColorFromCoordinates(x: number, y: number): {
+        h: number;
+        s: number;
+        l: number;
+    } | undefined;
+    _setColor(color?: ColorRGB): void;
+    isValidRGBColor(color: ColorRGB): boolean;
+    _setHex(): void;
+    _setValues(): void;
+    get hueSliderLabel(): string;
+    get alphaSliderLabel(): string;
+    get hexInputLabel(): string;
+    get redInputLabel(): string;
+    get greenInputLabel(): string;
+    get blueInputLabel(): string;
+    get alphaInputLabel(): string;
+    get inputsDisabled(): true | undefined;
+    get hexInputErrorState(): `${ValueState}`;
+    get _isDefaultPickerMode(): boolean;
+    get styles(): {
+        mainColor: {
+            "background-color": string;
+        };
+        circle: {
+            left: string;
+            top: string;
+        };
+        colorSpan: {
+            "background-color": string;
+        };
+    };
+}
+export default ColorPicker;

package/dist/ColorPicker.js

@@ -0,0 +1,474 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ColorPicker_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import { getRGBColor, getAlpha, HSLToRGB, HEXToRGB, RGBToHSL, } from "@ui5/webcomponents-base/dist/util/ColorConversion.js";
+import ColorPickerTemplate from "./ColorPickerTemplate.js";
+import { COLORPICKER_ALPHA_SLIDER, COLORPICKER_HUE_SLIDER, COLORPICKER_HEX, COLORPICKER_RED, COLORPICKER_GREEN, COLORPICKER_BLUE, COLORPICKER_ALPHA, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
+const PICKER_POINTER_WIDTH = 6.5;
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.
+ *
+ * ### Usage
+ *
+ * #### When to use
+ * Use the color picker if:
+ *
+ * -  users need to select any color freely.
+ *
+ * #### When not to use
+ *
+ * -  Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/ColorPicker.js";`
+ * @constructor
+ * @since 1.0.0-rc.12
+ * @extends UI5Element
+ * @public
+ */
+let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
+    async formElementAnchor() {
+        return this.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value;
+    }
+    constructor() {
+        super();
+        /**
+         * Defines the currently selected color of the component.
+         *
+         * **Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
+         * @default "rgba(255,255,255,1)"
+         * @public
+         */
+        this.value = "rgba(255,255,255,1)";
+        /**
+         * When set to `true`, the alpha slider and inputs for RGB values will not be displayed.
+         * @default false
+         * @public
+         * @since 2.5.0
+         */
+        this.simplified = false;
+        /**
+         * Defines the HEX code of the currently selected color
+         *
+         * **Note**: If Alpha(transperancy) is set it is not included in this property. Use `color` property.
+         * @private
+         */
+        this.hex = "ffffff";
+        /**
+         * Defines the currenty selected color from the main color section.
+         * @private
+         */
+        this._value = getRGBColor(this.value);
+        /**
+         * @private
+         */
+        this._alpha = 1;
+        /**
+         * @private
+         */
+        this._hue = 0;
+        /**
+         * @private
+         */
+        this._isSelectedColorChanged = false;
+        /**
+         * @private
+         */
+        this._isHueValueChanged = false;
+        /**
+         * @private
+         */
+        this._wrongHEX = false;
+        // Bottom Right corner
+        this._selectedCoordinates = {
+            x: 256 - PICKER_POINTER_WIDTH,
+            y: 256 - PICKER_POINTER_WIDTH,
+        };
+        // Default main color is red
+        this._mainValue = {
+            r: 255,
+            g: 0,
+            b: 0,
+        };
+        this.selectedHue = 0;
+        this.mouseDown = false;
+        this.mouseIn = false;
+    }
+    onBeforeRendering() {
+        // we have the color & ._mainValue properties here
+        this._value = getRGBColor(this.value);
+        this._alpha = getAlpha(this.value);
+        const tempColor = `rgba(${this._value.r},${this._value.g},${this._value.b},${this._alpha})`;
+        this._setHex();
+        this._setValues();
+        this.style.setProperty(getScopedVarName("--ui5_Color_Picker_Progress_Container_Color"), tempColor);
+    }
+    _handleMouseDown(e) {
+        this.mouseDown = true;
+        this.mouseIn = true;
+        this._changeSelectedColor(e.offsetX, e.offsetY);
+    }
+    _handleMouseUp() {
+        this.mouseDown = false;
+    }
+    _handleMouseOut(e) {
+        if (!this.mouseIn || !this.mouseDown) {
+            return;
+        }
+        const target = e.target;
+        const offsetHeight = target.offsetHeight;
+        const offsetWidth = target.offsetWidth;
+        const isLeft = e.offsetX <= 0;
+        const isUp = e.offsetY <= 0;
+        const isDown = e.offsetY >= target.offsetHeight;
+        const isRight = e.offsetX >= target.offsetWidth;
+        let x, y;
+        if (isLeft) {
+            x = 0;
+        }
+        else if (isRight) {
+            // Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object
+            x = offsetWidth;
+        }
+        else {
+            x = e.offsetX;
+        }
+        if (isUp) {
+            y = 0;
+        }
+        else if (isDown) {
+            // Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object
+            y = offsetHeight;
+        }
+        else {
+            y = e.offsetY;
+        }
+        this._changeSelectedColor(x, y);
+        this.mouseIn = false;
+        this.mouseDown = false;
+    }
+    _handleMouseMove(e) {
+        if (!this.mouseDown || !this.mouseIn) {
+            return;
+        }
+        this._changeSelectedColor(e.offsetX, e.offsetY);
+    }
+    _handleAlphaInputFromSlider(e) {
+        const aphaInputValue = e.target.value;
+        this._alpha = parseFloat(aphaInputValue);
+        if (Number.isNaN(this._alpha)) {
+            this._alpha = 1;
+        }
+        this._isHueValueChanged = true;
+        this._setColor(this._value);
+    }
+    _handleHueInput(e) {
+        this.selectedHue = e.target.value;
+        this._hue = this.selectedHue;
+        this._setMainColor(this._hue);
+        // Idication that changes to the hue value triggered as a result of user pressing over the hue slider.
+        this._isHueValueChanged = true;
+        const x = this._selectedCoordinates.x + PICKER_POINTER_WIDTH;
+        const y = this._selectedCoordinates.y + PICKER_POINTER_WIDTH;
+        const tempColor = this._calculateColorFromCoordinates(x, y);
+        if (tempColor) {
+            this._setColor(HSLToRGB(tempColor));
+        }
+    }
+    _handleHEXChange(e) {
+        const hexRegex = new RegExp("^[<0-9 abcdef]+$");
+        const input = e.target;
+        let inputValueLowerCase = input.value.toLowerCase();
+        // Shorthand Syntax
+        if (inputValueLowerCase.length === 3) {
+            inputValueLowerCase = `${inputValueLowerCase[0]}${inputValueLowerCase[0]}${inputValueLowerCase[1]}${inputValueLowerCase[1]}${inputValueLowerCase[2]}${inputValueLowerCase[2]}`;
+        }
+        const isNewValueValid = inputValueLowerCase.length === 6 && hexRegex.test(inputValueLowerCase);
+        if (isNewValueValid && input.value !== inputValueLowerCase) {
+            this._wrongHEX = false;
+            input.value = inputValueLowerCase;
+        }
+        if (inputValueLowerCase === this.hex) {
+            return;
+        }
+        this.hex = inputValueLowerCase;
+        if (!isNewValueValid) {
+            this._wrongHEX = true;
+        }
+        else {
+            this._wrongHEX = false;
+            this._setColor(HEXToRGB(this.hex));
+        }
+    }
+    _handleRGBInputsChange(e) {
+        const target = e.target;
+        const targetValue = parseInt(target.value) || 0;
+        let tempColor;
+        switch (target.id) {
+            case "red":
+                tempColor = { ...this._value, r: targetValue };
+                break;
+            case "green":
+                tempColor = { ...this._value, g: targetValue };
+                break;
+            case "blue":
+                tempColor = { ...this._value, b: targetValue };
+                break;
+            default:
+                tempColor = { ...this._value };
+        }
+        this._setColor(tempColor);
+    }
+    _setMainColor(hueValue) {
+        const hueValueMod = hueValue * 4.251;
+        if (hueValueMod <= 255) {
+            this._mainValue = {
+                r: 255,
+                g: hueValueMod,
+                b: 0,
+            };
+        }
+        else if (hueValueMod <= 510) {
+            this._mainValue = {
+                r: 255 - (hueValueMod - 255),
+                g: 255,
+                b: 0,
+            };
+        }
+        else if (hueValueMod <= 765) {
+            this._mainValue = {
+                r: 0,
+                g: 255,
+                b: hueValueMod - 510,
+            };
+        }
+        else if (hueValueMod <= 1020) {
+            this._mainValue = {
+                r: 0,
+                g: 765 - (hueValueMod - 255),
+                b: 255,
+            };
+        }
+        else if (hueValueMod <= 1275) {
+            this._mainValue = {
+                r: hueValueMod - 1020,
+                g: 0,
+                b: 255,
+            };
+        }
+        else {
+            this._mainValue = {
+                r: 255,
+                g: 0,
+                b: 1275 - (hueValueMod - 255),
+            };
+        }
+    }
+    _handleAlphaChange(e) {
+        this._handleAlphaInputFromSlider(e);
+        this._alpha = this._alpha < 0 ? 0 : this._alpha;
+        this._alpha = this._alpha > 1 ? 1 : this._alpha;
+    }
+    _changeSelectedColor(x, y) {
+        this._selectedCoordinates = {
+            x: x - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle
+            y: y - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle
+        };
+        // Idication that changes to the color settings are triggered as a result of user pressing over the main color section.
+        this._isSelectedColorChanged = true;
+        const tempColor = this._calculateColorFromCoordinates(x, y);
+        if (tempColor) {
+            this._setColor(HSLToRGB(tempColor));
+        }
+    }
+    _onkeydown(e) {
+        if (isEnter(e)) {
+            this._handleHEXChange(e);
+        }
+    }
+    _calculateColorFromCoordinates(x, y) {
+        // By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
+        // and HSL format, the color will be parsed to RGB
+        // 0 ≤ H < 360
+        // 4.251 because with 4.25 we get out of the colors range.
+        const h = this._hue;
+        // 0 ≤ S ≤ 1
+        const s = 1 - +(Math.round(parseFloat((y / 256) + "e+2")) + "e-2"); // eslint-disable-line
+        // 0 ≤ V ≤ 1
+        const l = +(Math.round(parseFloat((x / 256) + "e+2")) + "e-2"); // eslint-disable-line
+        if (!s || !l) {
+            // The event is finished out of the main color section
+            return;
+        }
+        return {
+            h,
+            s,
+            l,
+        };
+    }
+    _setColor(color = { r: 0, g: 0, b: 0 }) {
+        this.value = `rgba(${color.r}, ${color.g}, ${color.b}, ${this._alpha})`;
+        this._wrongHEX = !this.isValidRGBColor(color);
+        this.fireDecoratorEvent("change");
+    }
+    isValidRGBColor(color) {
+        return color.r >= 0 && color.r <= 255 && color.g >= 0 && color.g <= 255 && color.b >= 0 && color.b <= 255;
+    }
+    _setHex() {
+        let red = this._value.r.toString(16), green = this._value.g.toString(16), blue = this._value.b.toString(16);
+        if (red.length === 1) {
+            red = `0${red}`;
+        }
+        if (green.length === 1) {
+            green = `0${green}`;
+        }
+        if (blue.length === 1) {
+            blue = `0${blue}`;
+        }
+        this.hex = red + green + blue;
+    }
+    _setValues() {
+        const hslColours = RGBToHSL(this._value);
+        this._selectedCoordinates = {
+            x: ((Math.round(hslColours.l * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle
+            y: (256 - (Math.round(hslColours.s * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle
+        };
+        if (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.
+            this._isSelectedColorChanged = false;
+        }
+        else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.
+            this._isHueValueChanged = false;
+            this._hue = this.selectedHue ? this.selectedHue : this._hue;
+        }
+        else {
+            this._hue = Math.round(hslColours.h);
+        }
+        this._setMainColor(this._hue);
+    }
+    get hueSliderLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_HUE_SLIDER);
+    }
+    get alphaSliderLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);
+    }
+    get hexInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_HEX);
+    }
+    get redInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_RED);
+    }
+    get greenInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_GREEN);
+    }
+    get blueInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_BLUE);
+    }
+    get alphaInputLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_ALPHA);
+    }
+    get inputsDisabled() {
+        return this._wrongHEX ? true : undefined;
+    }
+    get hexInputErrorState() {
+        return this._wrongHEX ? "Negative" : "None";
+    }
+    get _isDefaultPickerMode() {
+        return !this.simplified;
+    }
+    get styles() {
+        // Remove after deleting the hbs template as the styles are added via the jsx template
+        return {
+            mainColor: {
+                "background-color": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})`,
+            },
+            circle: {
+                left: `${this._selectedCoordinates.x}px`,
+                top: `${this._selectedCoordinates.y}px`,
+            },
+            colorSpan: {
+                "background-color": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})`,
+            },
+        };
+    }
+};
+__decorate([
+    property()
+], ColorPicker.prototype, "value", void 0);
+__decorate([
+    property()
+], ColorPicker.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "simplified", void 0);
+__decorate([
+    property({ noAttribute: true })
+], ColorPicker.prototype, "hex", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPicker.prototype, "_mainValue", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPicker.prototype, "_value", void 0);
+__decorate([
+    property({ type: Object })
+], ColorPicker.prototype, "_selectedCoordinates", void 0);
+__decorate([
+    property({ type: Number })
+], ColorPicker.prototype, "_alpha", void 0);
+__decorate([
+    property({ type: Number })
+], ColorPicker.prototype, "_hue", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "_isSelectedColorChanged", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "_isHueValueChanged", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPicker.prototype, "_wrongHEX", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], ColorPicker, "i18nBundle", void 0);
+ColorPicker = ColorPicker_1 = __decorate([
+    customElement({
+        tag: "ui5-color-picker",
+        renderer: jsxRenderer,
+        formAssociated: true,
+        styles: ColorPickerCss,
+        template: ColorPickerTemplate,
+        shadowRootOptions: { delegatesFocus: true },
+    })
+    /**
+     * Fired when the the selected color is changed
+     * @public
+     */
+    ,
+    event("change", {
+        bubbles: true,
+    })
+], ColorPicker);
+ColorPicker.define();
+export default ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map

package/dist/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../src/ColorPicker.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAGnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AAEvF,OAAO,EACN,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACR,MAAM,sDAAsD,CAAC;AAK9D,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAI3D,OAAO,EACN,wBAAwB,EACxB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,GACjB,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAEnE,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAOjC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAiBH,IAAM,WAAW,mBAAjB,MAAM,WAAY,SAAQ,UAAU;IAsGnC,KAAK,CAAC,iBAAiB;QACtB,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,KAAK,CAAC;IACnB,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QA3GT;;;;;;WAMG;QAEH,UAAK,GAAG,qBAAqB,CAAC;QAa9B;;;;;WAKG;QAEH,eAAU,GAAG,KAAK,CAAC;QAEnB;;;;;WAKG;QAEH,QAAG,GAAG,QAAQ,CAAC;QASf;;;WAGG;QAEH,WAAM,GAAa,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAQ3C;;WAEG;QAEH,WAAM,GAAG,CAAC,CAAC;QAEX;;WAEG;QAEH,SAAI,GAAG,CAAC,CAAC;QAET;;WAEG;QAEH,4BAAuB,GAAG,KAAK,CAAC;QAEhC;;WAEG;QAEH,uBAAkB,GAAG,KAAK,CAAC;QAE3B;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;QAsBjB,sBAAsB;QACtB,IAAI,CAAC,oBAAoB,GAAG;YAC3B,CAAC,EAAE,GAAG,GAAG,oBAAoB;YAC7B,CAAC,EAAE,GAAG,GAAG,oBAAoB;SAC7B,CAAC;QAEF,4BAA4B;QAC5B,IAAI,CAAC,UAAU,GAAG;YACjB,CAAC,EAAE,GAAG;YACN,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACJ,CAAC;QAEF,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QAErB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,iBAAiB;QAChB,kDAAkD;QAClD,IAAI,CAAC,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,MAAM,SAAS,GAAG,QAAQ,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;QAC5F,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,6CAA6C,CAAC,EAAE,SAAS,CAAC,CAAC;IACpG,CAAC;IAED,gBAAgB,CAAC,CAAa;QAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC;IAED,cAAc;QACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,eAAe,CAAC,CAAa;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACtC,OAAO;QACR,CAAC;QAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;QACvC,MAAM,YAAY,GAAW,MAAM,CAAC,YAAY,CAAC;QACjD,MAAM,WAAW,GAAW,MAAM,CAAC,WAAW,CAAC;QAC/C,MAAM,MAAM,GAAY,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC;QACvC,MAAM,IAAI,GAAY,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC;QACrC,MAAM,MAAM,GAAY,CAAC,CAAC,OAAO,IAAI,MAAM,CAAC,YAAY,CAAC;QACzD,MAAM,OAAO,GAAY,CAAC,CAAC,OAAO,IAAI,MAAM,CAAC,WAAW,CAAC;QAEzD,IAAI,CAAS,EACZ,CAAS,CAAC;QAEX,IAAI,MAAM,EAAE,CAAC;YACZ,CAAC,GAAG,CAAC,CAAC;QACP,CAAC;aAAM,IAAI,OAAO,EAAE,CAAC;YACpB,mHAAmH;YACnH,CAAC,GAAG,WAAW,CAAC;QACjB,CAAC;aAAM,CAAC;YACP,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;QACf,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACV,CAAC,GAAG,CAAC,CAAC;QACP,CAAC;aAAM,IAAI,MAAM,EAAE,CAAC;YACnB,mHAAmH;YACnH,CAAC,GAAG,YAAY,CAAC;QAClB,CAAC;aAAM,CAAC;YACP,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;QACf,CAAC;QAED,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAChC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACxB,CAAC;IAED,gBAAgB,CAAC,CAAa;QAC7B,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YACtC,OAAO;QACR,CAAC;QAED,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC;IAED,2BAA2B,CAAC,CAAc;QACzC,MAAM,cAAc,GAAY,CAAC,CAAC,MAAgB,CAAC,KAAK,CAAC;QACzD,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;QACzC,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QACjB,CAAC;QACD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IAED,eAAe,CAAC,CAAc;QAC7B,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAAiB,CAAC,KAAK,CAAC;QAC9C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9B,sGAAsG;QACtG,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAE/B,MAAM,CAAC,GAAW,IAAI,CAAC,oBAAoB,CAAC,CAAC,GAAG,oBAAoB,CAAC;QACrE,MAAM,CAAC,GAAW,IAAI,CAAC,oBAAoB,CAAC,CAAC,GAAG,oBAAoB,CAAC;QACrE,MAAM,SAAS,GAAG,IAAI,CAAC,8BAA8B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAE5D,IAAI,SAAS,EAAE,CAAC;YACf,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;QACrC,CAAC;IACF,CAAC;IAED,gBAAgB,CAAC,CAA8B;QAC9C,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,kBAAkB,CAAC,CAAC;QAChD,MAAM,KAAK,GAAW,CAAC,CAAC,MAAgB,CAAC;QACzC,IAAI,mBAAmB,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QAEpD,mBAAmB;QACnB,IAAI,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtC,mBAAmB,GAAG,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;QAChL,CAAC;QAED,MAAM,eAAe,GAAG,mBAAmB,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAE/F,IAAI,eAAe,IAAI,KAAK,CAAC,KAAK,KAAK,mBAAmB,EAAE,CAAC;YAC5D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,KAAK,CAAC,KAAK,GAAG,mBAAmB,CAAC;QACnC,CAAC;QAED,IAAI,mBAAmB,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;YACtC,OAAO;QACR,CAAC;QAED,IAAI,CAAC,GAAG,GAAG,mBAAmB,CAAC;QAE/B,IAAI,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACvB,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACpC,CAAC;IACF,CAAC;IAED,sBAAsB,CAAC,CAAQ;QAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAe,CAAC;QACjC,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,SAAS,CAAC;QACd,QAAQ,MAAM,CAAC,EAAE,EAAE,CAAC;YACpB,KAAK,KAAK;gBACT,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC;gBAC/C,MAAM;YAEP,KAAK,OAAO;gBACX,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC;gBAC/C,MAAM;YAEP,KAAK,MAAM;gBACV,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC;gBAC/C,MAAM;YACP;gBACC,SAAS,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC;IAED,aAAa,CAAC,QAAgB;QAC7B,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;QAErC,IAAI,WAAW,IAAI,GAAG,EAAE,CAAC;YACxB,IAAI,CAAC,UAAU,GAAG;gBACjB,CAAC,EAAE,GAAG;gBACN,CAAC,EAAE,WAAW;gBACd,CAAC,EAAE,CAAC;aACJ,CAAC;QACH,CAAC;aAAM,IAAI,WAAW,IAAI,GAAG,EAAE,CAAC;YAC/B,IAAI,CAAC,UAAU,GAAG;gBACjB,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC;gBAC5B,CAAC,EAAE,GAAG;gBACN,CAAC,EAAE,CAAC;aACJ,CAAC;QACH,CAAC;aAAM,IAAI,WAAW,IAAI,GAAG,EAAE,CAAC;YAC/B,IAAI,CAAC,UAAU,GAAG;gBACjB,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,GAAG;gBACN,CAAC,EAAE,WAAW,GAAG,GAAG;aACpB,CAAC;QACH,CAAC;aAAM,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YAChC,IAAI,CAAC,UAAU,GAAG;gBACjB,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC;gBAC5B,CAAC,EAAE,GAAG;aACN,CAAC;QACH,CAAC;aAAM,IAAI,WAAW,IAAI,IAAI,EAAE,CAAC;YAChC,IAAI,CAAC,UAAU,GAAG;gBACjB,CAAC,EAAE,WAAW,GAAG,IAAI;gBACrB,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,GAAG;aACN,CAAC;QACH,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,UAAU,GAAG;gBACjB,CAAC,EAAE,GAAG;gBACN,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,IAAI,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC;aAC7B,CAAC;QACH,CAAC;IACF,CAAC;IAED,kBAAkB,CAAC,CAAc;QAChC,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC;QAEpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QAChD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;IACjD,CAAC;IAED,oBAAoB,CAAC,CAAS,EAAE,CAAS;QACxC,IAAI,CAAC,oBAAoB,GAAG;YAC3B,CAAC,EAAE,CAAC,GAAG,oBAAoB,EAAE,6DAA6D;YAC1F,CAAC,EAAE,CAAC,GAAG,oBAAoB,EAAE,8DAA8D;SAC3F,CAAC;QAEF,uHAAuH;QACvH,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;QAEpC,MAAM,SAAS,GAAG,IAAI,CAAC,8BAA8B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5D,IAAI,SAAS,EAAE,CAAC;YACf,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;QACrC,CAAC;IACF,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;QAC1B,CAAC;IACF,CAAC;IAED,8BAA8B,CAAC,CAAS,EAAE,CAAS;QAClD,yGAAyG;QACzG,kDAAkD;QAClD,cAAc;QACd,0DAA0D;QAC1D,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QAEpB,YAAY;QACZ,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,sBAAsB;QAE1F,YAAY;QACZ,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,sBAAsB;QAEtF,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;YACd,sDAAsD;YACtD,OAAO;QACR,CAAC;QAED,OAAO;YACN,CAAC;YACD,CAAC;YACD,CAAC;SACD,CAAC;IACH,CAAC;IAED,SAAS,CAAC,QAAkB,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;QAC/C,IAAI,CAAC,KAAK,GAAG,QAAQ,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC;QACxE,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED,eAAe,CAAC,KAAe;QAC9B,OAAO,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,GAAG,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,GAAG,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,GAAG,CAAC;IAC3G,CAAC;IAED,OAAO;QACN,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EACnC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,EAClC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QAEnC,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtB,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;QACjB,CAAC;QACD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACxB,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QACrB,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QACnB,CAAC;QAED,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,UAAU;QACT,MAAM,UAAU,GAAa,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACnD,IAAI,CAAC,oBAAoB,GAAG;YAC3B,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,oBAAoB,EAAE,6DAA6D;YAClI,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,oBAAoB,EAAE,8DAA8D;SACzI,CAAC;QAEF,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAC,mFAAmF;YACtH,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;QACtC,CAAC;aAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,2EAA2E;YAChH,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;YAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC7D,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACjE,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACxD,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACxD,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,aAAW,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1C,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC;IAC7C,CAAC;IAED,IAAI,oBAAoB;QACvB,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAED,IAAI,MAAM;QACT,sFAAsF;QACtF,OAAO;YACN,SAAS,EAAE;gBACV,kBAAkB,EAAE,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG;aAC3F;YACD,MAAM,EAAE;gBACP,IAAI,EAAE,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,IAAI;gBACxC,GAAG,EAAE,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,IAAI;aACvC;YACD,SAAS,EAAE;gBACV,kBAAkB,EAAE,QAAQ,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC,MAAM,GAAG;aAChG;SACD,CAAC;IACH,CAAC;CACD,CAAA;AAhdA;IADC,QAAQ,EAAE;0CACmB;AAW9B;IADC,QAAQ,EAAE;yCACG;AASd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACT;AASnB;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;wCACjB;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACN;AAOrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACgB;AAM3C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACY;AAMvC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAChB;AAMX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAClB;AAMT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACI;AAMhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACD;AAM3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACV;AASX;IADN,IAAI,CAAC,oBAAoB,CAAC;qCACG;AApGzB,WAAW;IAfhB,aAAa,CAAC;QACd,GAAG,EAAE,kBAAkB;QACvB,QAAQ,EAAE,WAAW;QACrB,cAAc,EAAE,IAAI;QACpB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;QAC7B,iBAAiB,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE;KAC3C,CAAC;IACF;;;OAGG;;IACF,KAAK,CAAC,QAAQ,EAAE;QAChB,OAAO,EAAE,IAAI;KACb,CAAC;GACI,WAAW,CA4dhB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tgetRGBColor,\n\tgetAlpha,\n\tHSLToRGB,\n\tHEXToRGB,\n\tRGBToHSL,\n} from \"@ui5/webcomponents-base/dist/util/ColorConversion.js\";\nimport type {\n\tColorHSL,\n\tColorRGB,\n} from \"@ui5/webcomponents-base/dist/util/ColorConversion.js\";\nimport ColorPickerTemplate from \"./ColorPickerTemplate.js\";\nimport type Input from \"./Input.js\";\nimport type Slider from \"./Slider.js\";\n\nimport {\n\tCOLORPICKER_ALPHA_SLIDER,\n\tCOLORPICKER_HUE_SLIDER,\n\tCOLORPICKER_HEX,\n\tCOLORPICKER_RED,\n\tCOLORPICKER_GREEN,\n\tCOLORPICKER_BLUE,\n\tCOLORPICKER_ALPHA,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ColorPickerCss from \"./generated/themes/ColorPicker.css.js\";\n\nconst PICKER_POINTER_WIDTH = 6.5;\n\ntype ColorCoordinates = {\n\tx: number,\n\ty: number,\n}\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.\n *\n * ### Usage\n *\n * #### When to use\n * Use the color picker if:\n *\n * -  users need to select any color freely.\n *\n * #### When not to use\n *\n * -  Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/ColorPicker.js\";`\n * @constructor\n * @since 1.0.0-rc.12\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n\ttag: \"ui5-color-picker\",\n\trenderer: jsxRenderer,\n\tformAssociated: true,\n\tstyles: ColorPickerCss,\n\ttemplate: ColorPickerTemplate,\n\tshadowRootOptions: { delegatesFocus: true },\n})\n/**\n * Fired when the the selected color is changed\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n})\nclass ColorPicker extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\tchange: void;\n\t}\n\t/**\n\t * Defines the currently selected color of the component.\n\t *\n\t * **Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.\n\t * @default \"rgba(255,255,255,1)\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"rgba(255,255,255,1)\";\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default undefined\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * When set to `true`, the alpha slider and inputs for RGB values will not be displayed.\n\t * @default false\n\t * @public\n\t * @since 2.5.0\n\t */\n\t@property({ type: Boolean })\n\tsimplified = false;\n\n\t/**\n\t * Defines the HEX code of the currently selected color\n\t *\n\t * **Note**: If Alpha(transperancy) is set it is not included in this property. Use `color` property.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\thex = \"ffffff\";\n\n\t/**\n\t * Defines the current main color which is selected via the hue slider and is shown in the main color square.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_mainValue: ColorRGB;\n\n\t/**\n\t * Defines the currenty selected color from the main color section.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_value: ColorRGB = getRGBColor(this.value);\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_selectedCoordinates: ColorCoordinates;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_alpha = 1;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_hue = 0;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isSelectedColorChanged = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isHueValueChanged = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_wrongHEX = false;\n\n\tselectedHue: number;\n\n\tmouseDown: boolean;\n\n\tmouseIn: boolean;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\treturn this.value;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Bottom Right corner\n\t\tthis._selectedCoordinates = {\n\t\t\tx: 256 - PICKER_POINTER_WIDTH,\n\t\t\ty: 256 - PICKER_POINTER_WIDTH,\n\t\t};\n\n\t\t// Default main color is red\n\t\tthis._mainValue = {\n\t\t\tr: 255,\n\t\t\tg: 0,\n\t\t\tb: 0,\n\t\t};\n\n\t\tthis.selectedHue = 0;\n\n\t\tthis.mouseDown = false;\n\t\tthis.mouseIn = false;\n\t}\n\n\tonBeforeRendering() {\n\t\t// we have the color & ._mainValue properties here\n\t\tthis._value = getRGBColor(this.value);\n\t\tthis._alpha = getAlpha(this.value);\n\t\tconst tempColor = `rgba(${this._value.r},${this._value.g},${this._value.b},${this._alpha})`;\n\t\tthis._setHex();\n\t\tthis._setValues();\n\t\tthis.style.setProperty(getScopedVarName(\"--ui5_Color_Picker_Progress_Container_Color\"), tempColor);\n\t}\n\n\t_handleMouseDown(e: MouseEvent) {\n\t\tthis.mouseDown = true;\n\t\tthis.mouseIn = true;\n\t\tthis._changeSelectedColor(e.offsetX, e.offsetY);\n\t}\n\n\t_handleMouseUp() {\n\t\tthis.mouseDown = false;\n\t}\n\n\t_handleMouseOut(e: MouseEvent) {\n\t\tif (!this.mouseIn || !this.mouseDown) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst target = e.target as HTMLElement;\n\t\tconst offsetHeight: number = target.offsetHeight;\n\t\tconst offsetWidth: number = target.offsetWidth;\n\t\tconst isLeft: boolean = e.offsetX <= 0;\n\t\tconst isUp: boolean = e.offsetY <= 0;\n\t\tconst isDown: boolean = e.offsetY >= target.offsetHeight;\n\t\tconst isRight: boolean = e.offsetX >= target.offsetWidth;\n\n\t\tlet x: number,\n\t\t\ty: number;\n\n\t\tif (isLeft) {\n\t\t\tx = 0;\n\t\t} else if (isRight) {\n\t\t\t// Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object\n\t\t\tx = offsetWidth;\n\t\t} else {\n\t\t\tx = e.offsetX;\n\t\t}\n\n\t\tif (isUp) {\n\t\t\ty = 0;\n\t\t} else if (isDown) {\n\t\t\t// Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object\n\t\t\ty = offsetHeight;\n\t\t} else {\n\t\t\ty = e.offsetY;\n\t\t}\n\n\t\tthis._changeSelectedColor(x, y);\n\t\tthis.mouseIn = false;\n\t\tthis.mouseDown = false;\n\t}\n\n\t_handleMouseMove(e: MouseEvent) {\n\t\tif (!this.mouseDown || !this.mouseIn) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._changeSelectedColor(e.offsetX, e.offsetY);\n\t}\n\n\t_handleAlphaInputFromSlider(e: CustomEvent) {\n\t\tconst aphaInputValue: string = (e.target as Input).value;\n\t\tthis._alpha = parseFloat(aphaInputValue);\n\t\tif (Number.isNaN(this._alpha)) {\n\t\t\tthis._alpha = 1;\n\t\t}\n\t\tthis._isHueValueChanged = true;\n\t\tthis._setColor(this._value);\n\t}\n\n\t_handleHueInput(e: CustomEvent) {\n\t\tthis.selectedHue = (e.target as Slider).value;\n\t\tthis._hue = this.selectedHue;\n\t\tthis._setMainColor(this._hue);\n\t\t// Idication that changes to the hue value triggered as a result of user pressing over the hue slider.\n\t\tthis._isHueValueChanged = true;\n\n\t\tconst x: number = this._selectedCoordinates.x + PICKER_POINTER_WIDTH;\n\t\tconst y: number = this._selectedCoordinates.y + PICKER_POINTER_WIDTH;\n\t\tconst tempColor = this._calculateColorFromCoordinates(x, y);\n\n\t\tif (tempColor) {\n\t\t\tthis._setColor(HSLToRGB(tempColor));\n\t\t}\n\t}\n\n\t_handleHEXChange(e: CustomEvent | KeyboardEvent) {\n\t\tconst hexRegex = new RegExp(\"^[<0-9 abcdef]+$\");\n\t\tconst input: Input = (e.target as Input);\n\t\tlet inputValueLowerCase = input.value.toLowerCase();\n\n\t\t// Shorthand Syntax\n\t\tif (inputValueLowerCase.length === 3) {\n\t\t\tinputValueLowerCase = `${inputValueLowerCase[0]}${inputValueLowerCase[0]}${inputValueLowerCase[1]}${inputValueLowerCase[1]}${inputValueLowerCase[2]}${inputValueLowerCase[2]}`;\n\t\t}\n\n\t\tconst isNewValueValid = inputValueLowerCase.length === 6 && hexRegex.test(inputValueLowerCase);\n\n\t\tif (isNewValueValid && input.value !== inputValueLowerCase) {\n\t\t\tthis._wrongHEX = false;\n\t\t\tinput.value = inputValueLowerCase;\n\t\t}\n\n\t\tif (inputValueLowerCase === this.hex) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.hex = inputValueLowerCase;\n\n\t\tif (!isNewValueValid) {\n\t\t\tthis._wrongHEX = true;\n\t\t} else {\n\t\t\tthis._wrongHEX = false;\n\t\t\tthis._setColor(HEXToRGB(this.hex));\n\t\t}\n\t}\n\n\t_handleRGBInputsChange(e: Event) {\n\t\tconst target = e.target as Input;\n\t\tconst targetValue = parseInt(target.value) || 0;\n\t\tlet tempColor;\n\t\tswitch (target.id) {\n\t\tcase \"red\":\n\t\t\ttempColor = { ...this._value, r: targetValue };\n\t\t\tbreak;\n\n\t\tcase \"green\":\n\t\t\ttempColor = { ...this._value, g: targetValue };\n\t\t\tbreak;\n\n\t\tcase \"blue\":\n\t\t\ttempColor = { ...this._value, b: targetValue };\n\t\t\tbreak;\n\t\tdefault:\n\t\t\ttempColor = { ...this._value };\n\t\t}\n\n\t\tthis._setColor(tempColor);\n\t}\n\n\t_setMainColor(hueValue: number) {\n\t\tconst hueValueMod = hueValue * 4.251;\n\n\t\tif (hueValueMod <= 255) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255,\n\t\t\t\tg: hueValueMod,\n\t\t\t\tb: 0,\n\t\t\t};\n\t\t} else if (hueValueMod <= 510) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255 - (hueValueMod - 255),\n\t\t\t\tg: 255,\n\t\t\t\tb: 0,\n\t\t\t};\n\t\t} else if (hueValueMod <= 765) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 0,\n\t\t\t\tg: 255,\n\t\t\t\tb: hueValueMod - 510,\n\t\t\t};\n\t\t} else if (hueValueMod <= 1020) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 0,\n\t\t\t\tg: 765 - (hueValueMod - 255),\n\t\t\t\tb: 255,\n\t\t\t};\n\t\t} else if (hueValueMod <= 1275) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: hueValueMod - 1020,\n\t\t\t\tg: 0,\n\t\t\t\tb: 255,\n\t\t\t};\n\t\t} else {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255,\n\t\t\t\tg: 0,\n\t\t\t\tb: 1275 - (hueValueMod - 255),\n\t\t\t};\n\t\t}\n\t}\n\n\t_handleAlphaChange(e: CustomEvent) {\n\t\tthis._handleAlphaInputFromSlider(e);\n\n\t\tthis._alpha = this._alpha < 0 ? 0 : this._alpha;\n\t\tthis._alpha = this._alpha > 1 ? 1 : this._alpha;\n\t}\n\n\t_changeSelectedColor(x: number, y: number) {\n\t\tthis._selectedCoordinates = {\n\t\t\tx: x - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle\n\t\t\ty: y - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle\n\t\t};\n\n\t\t// Idication that changes to the color settings are triggered as a result of user pressing over the main color section.\n\t\tthis._isSelectedColorChanged = true;\n\n\t\tconst tempColor = this._calculateColorFromCoordinates(x, y);\n\t\tif (tempColor) {\n\t\t\tthis._setColor(HSLToRGB(tempColor));\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis._handleHEXChange(e);\n\t\t}\n\t}\n\n\t_calculateColorFromCoordinates(x: number, y: number) {\n\t\t// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)\n\t\t// and HSL format, the color will be parsed to RGB\n\t\t// 0 ≤ H < 360\n\t\t// 4.251 because with 4.25 we get out of the colors range.\n\t\tconst h = this._hue;\n\n\t\t// 0 ≤ S ≤ 1\n\t\tconst s = 1 - +(Math.round(parseFloat((y / 256) + \"e+2\")) + \"e-2\"); // eslint-disable-line\n\n\t\t// 0 ≤ V ≤ 1\n\t\tconst l = +(Math.round(parseFloat((x / 256) + \"e+2\")) + \"e-2\"); // eslint-disable-line\n\n\t\tif (!s || !l) {\n\t\t\t// The event is finished out of the main color section\n\t\t\treturn;\n\t\t}\n\n\t\treturn {\n\t\t\th,\n\t\t\ts,\n\t\t\tl,\n\t\t};\n\t}\n\n\t_setColor(color: ColorRGB = { r: 0, g: 0, b: 0 }) {\n\t\tthis.value = `rgba(${color.r}, ${color.g}, ${color.b}, ${this._alpha})`;\n\t\tthis._wrongHEX = !this.isValidRGBColor(color);\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\tisValidRGBColor(color: ColorRGB) {\n\t\treturn color.r >= 0 && color.r <= 255 && color.g >= 0 && color.g <= 255 && color.b >= 0 && color.b <= 255;\n\t}\n\n\t_setHex() {\n\t\tlet red = this._value.r.toString(16),\n\t\t\tgreen = this._value.g.toString(16),\n\t\t\tblue = this._value.b.toString(16);\n\n\t\tif (red.length === 1) {\n\t\t\tred = `0${red}`;\n\t\t}\n\t\tif (green.length === 1) {\n\t\t\tgreen = `0${green}`;\n\t\t}\n\t\tif (blue.length === 1) {\n\t\t\tblue = `0${blue}`;\n\t\t}\n\n\t\tthis.hex = red + green + blue;\n\t}\n\n\t_setValues() {\n\t\tconst hslColours: ColorHSL = RGBToHSL(this._value);\n\t\tthis._selectedCoordinates = {\n\t\t\tx: ((Math.round(hslColours.l * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle\n\t\t\ty: (256 - (Math.round(hslColours.s * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle\n\t\t};\n\n\t\tif (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.\n\t\t\tthis._isSelectedColorChanged = false;\n\t\t} else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.\n\t\t\tthis._isHueValueChanged = false;\n\t\t\tthis._hue = this.selectedHue ? this.selectedHue : this._hue;\n\t\t} else {\n\t\t\tthis._hue = Math.round(hslColours.h);\n\t\t}\n\n\t\tthis._setMainColor(this._hue);\n\t}\n\n\tget hueSliderLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_HUE_SLIDER);\n\t}\n\n\tget alphaSliderLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);\n\t}\n\n\tget hexInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_HEX);\n\t}\n\n\tget redInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_RED);\n\t}\n\n\tget greenInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_GREEN);\n\t}\n\n\tget blueInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_BLUE);\n\t}\n\n\tget alphaInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);\n\t}\n\n\tget inputsDisabled() {\n\t\treturn this._wrongHEX ? true : undefined;\n\t}\n\n\tget hexInputErrorState(): `${ValueState}` {\n\t\treturn this._wrongHEX ? \"Negative\" : \"None\";\n\t}\n\n\tget _isDefaultPickerMode() {\n\t\treturn !this.simplified;\n\t}\n\n\tget styles() {\n\t\t// Remove after deleting the hbs template as the styles are added via the jsx template\n\t\treturn {\n\t\t\tmainColor: {\n\t\t\t\t\"background-color\": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})`,\n\t\t\t},\n\t\t\tcircle: {\n\t\t\t\tleft: `${this._selectedCoordinates.x}px`,\n\t\t\t\ttop: `${this._selectedCoordinates.y}px`,\n\t\t\t},\n\t\t\tcolorSpan: {\n\t\t\t\t\"background-color\": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})`,\n\t\t\t},\n\t\t};\n\t}\n}\n\nColorPicker.define();\n\nexport default ColorPicker;\n"]}