smart-webcomponents-angular/fesm2020/smart-webcomponents-angular-colorpicker.mjs.map

[](https://jqwidgets.com/license/)

{"version":3,"file":"smart-webcomponents-angular-colorpicker.mjs","sources":["../../colorpicker/src/smart.element.ts","../../colorpicker/src/smart.colorpicker.ts","../../colorpicker/src/smart.colorpicker.module.ts","../../colorpicker/src/smart-webcomponents-angular-colorpicker.ts"],"sourcesContent":["\ndeclare global {\n    interface Window {\n        Smart: any;\n}\n}\n\n\nimport { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';\nimport { ElementRenderMode } from './../index';\n\n@Directive()\nexport class BaseElement {\n    constructor(ref: ElementRef) {\n        const that = this;\n        this.nativeElement = ref.nativeElement as any;\n\n        that.nativeElement.onAttached = () => {\n            that.onAttach.emit(that.nativeElement);\n        }\n\n        that.nativeElement.onDetached = () => {\n            that.onDetach.emit(that.nativeElement);\n        }\n    }\n\n    @Output() onCreate: EventEmitter<any> = new EventEmitter();\n    @Output() onReady: EventEmitter<any> = new EventEmitter();\n    @Output() onAttach: EventEmitter<any> = new EventEmitter();\n    @Output() onDetach: EventEmitter<any> = new EventEmitter();\n\n    public nativeElement: any;\n\n    public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n        this.nativeElement.addEventListener(type, listener, options);\n\t}\n\n\tpublic removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n\t\tthis.nativeElement.removeEventListener(type, listener, options);\n\t}\n\n\tpublic dispatchEvent(event: Event): boolean {\n\t\treturn this.nativeElement.dispatchEvent(event);\n\t}\n\n\tpublic blur(): void {\n\t\tthis.nativeElement.blur();\n\t}\n\n\tpublic click(): void {\n\t\tthis.nativeElement.click();\n\t}\n\n\tpublic focus(options?: FocusOptions): void {\n\t\tthis.nativeElement.focus(options);\n\t}\n\n/** @description Sets or gets the license.  */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\t\n/** @description Sets or gets the language. Used in conjunction with the property messages.  */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.  */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n}\n\nlet Smart: any;\nif (typeof window !== \"undefined\") {\n\tSmart = window.Smart;\n}\nexport { Smart };\n\n","import { ColorPicker } from './../index';\nimport { Animation, ColorApplyValueMode, ColorDisplayMode, DropDownOpenMode, DropDownButtonPosition, DropDownPosition, ColorPalette, ResizeMode, ColorTooltipDisplayMode, ColorValueFormat, ColorValueDisplayMode, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, forwardRef, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { Animation, ColorApplyValueMode, ColorDisplayMode, DropDownOpenMode, DropDownButtonPosition, DropDownPosition, ColorPalette, ResizeMode, ColorTooltipDisplayMode, ColorValueFormat, ColorValueDisplayMode, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { ColorPicker } from './../index';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n\n\nconst CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => ColorPickerComponent),\n    multi: true\n}\n\n@Directive({\n\texportAs: 'smart-color-picker',\tselector: 'smart-color-picker, [smart-color-picker]',\n\tproviders: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]\n\n})\n\nexport class ColorPickerComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {\n\tconstructor(ref: ElementRef<ColorPicker>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as ColorPicker;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: ColorPicker;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <ColorPicker>document.createElement('smart-color-picker');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n        /**\n        * @description\n        * The registered callback function called when a change event occurs on the form elements.\n        */\n       _onChange: (value: any) => void = () => {};\n        /**\n        * @description\n        * The registered callback function called when a blur event occurs on the form elements.\n        */\n       _onTouched: () => any = () => {};\n\n\n\t/** @description Specifies or retrieves the animation mode for the element. When set to 'none', all animations are disabled and no animation effects will be applied. Assigning other valid values enables different animation behaviors according to the selected mode. */\n\t@Input()\n\tget animation(): Animation | string {\n\t\treturn this.nativeElement ? this.nativeElement.animation : undefined;\n\t}\n\tset animation(value: Animation | string) {\n\t\tthis.nativeElement ? this.nativeElement.animation = value : undefined;\n\t}\n\n\t/** @description This property enables users to edit colors directly through the input field located within the element's action section. It accepts values in all supported color formats (such as HEX, RGB, or HSL). Please note, this property is effective only when the valueDisplayMode is set to either default or colorCode. */\n\t@Input()\n\tget editable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.editable : undefined;\n\t}\n\tset editable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.editable = value : undefined;\n\t}\n\n\t/** @description Specifies the duration (in milliseconds) to wait before automatically closing the dropdown menu after it has been opened, applicable only when dropDownOpenMode is set to 'auto'. This delay allows users sufficient time to interact with the dropdown before it closes automatically. */\n\t@Input()\n\tget autoCloseDelay(): number {\n\t\treturn this.nativeElement ? this.nativeElement.autoCloseDelay : undefined;\n\t}\n\tset autoCloseDelay(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.autoCloseDelay = value : undefined;\n\t}\n\n\t/** @description Defines the method for confirming the user's selected value in the color picker.  - In ''instantly'' mode, the new value is applied immediately whenever the user selects a color, with no further confirmation required.  - In ''useButtons'' mode, 'OK' and 'Cancel' buttons appear at the bottom of the color picker’s dropdown. The color change is only applied when the user clicks the 'OK' button. Clicking 'Cancel' will close the dropdown without applying the selected value. */\n\t@Input()\n\tget applyValueMode(): ColorApplyValueMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.applyValueMode : undefined;\n\t}\n\tset applyValueMode(value: ColorApplyValueMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.applyValueMode = value : undefined;\n\t}\n\n\t/** @description Specifies how many columns of colors are displayed when using the 'grid', 'hexagonal', or 'spectrumGrid' displayModes. Adjusting this value determines the width of the color palette layout for these modes. */\n\t@Input()\n\tget columnCount(): number {\n\t\treturn this.nativeElement ? this.nativeElement.columnCount : undefined;\n\t}\n\tset columnCount(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.columnCount = value : undefined;\n\t}\n\n\t/** @description Specifies the color palette to be used, including individual colors and their arrangement within the layout. This setting controls both which colors are displayed and how they appear in the user interface. */\n\t@Input()\n\tget displayMode(): ColorDisplayMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.displayMode : undefined;\n\t}\n\tset displayMode(value: ColorDisplayMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.displayMode = value : undefined;\n\t}\n\n\t/** @description Controls whether the element is interactive or not. When enabled, the element can be interacted with by the user; when disabled, the element is not interactive and may appear visually distinct (e.g., grayed out) to indicate its inactive state. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description By default, clicking on the color panel's preview container reverts the selected color value to its previous state, effectively functioning as an undo action. Setting the 'disableUndo' option disables this functionality, so clicking the preview container will no longer revert the color value. */\n\t@Input()\n\tget disableUndo(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disableUndo : undefined;\n\t}\n\tset disableUndo(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disableUndo = value : undefined;\n\t}\n\n\t/** @description Defines the parent container in which the dropDown (popup) will be rendered. Accepts a CSS selector string, an element ID, or the literal value 'body'. This setting is helpful when the dropDown’s visibility is affected by CSS properties (such as overflow or z-index) applied to its parent elements. Specify 'body' to attach the dropDown directly to the document body element for maximum visibility. Example: 'body'. */\n\t@Input()\n\tget dropDownAppendTo(): string {\n\t\treturn this.nativeElement ? this.nativeElement.dropDownAppendTo : undefined;\n\t}\n\tset dropDownAppendTo(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.dropDownAppendTo = value : undefined;\n\t}\n\n\t/** @description Controls the direction or orientation in which the dropdown menu appears when activated (e.g., opening upwards, downwards, to the left, or to the right). This setting dictates the dropdown's display position relative to its trigger element. */\n\t@Input()\n\tget dropDownOpenMode(): DropDownOpenMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.dropDownOpenMode : undefined;\n\t}\n\tset dropDownOpenMode(value: DropDownOpenMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.dropDownOpenMode = value : undefined;\n\t}\n\n\t/** @description Specifies the placement of the dropdown button relative to its parent element. This determines where the dropdown button will appear on the user interface, such as above, below, to the left, or to the right of the related element. */\n\t@Input()\n\tget dropDownButtonPosition(): DropDownButtonPosition | string {\n\t\treturn this.nativeElement ? this.nativeElement.dropDownButtonPosition : undefined;\n\t}\n\tset dropDownButtonPosition(value: DropDownButtonPosition | string) {\n\t\tthis.nativeElement ? this.nativeElement.dropDownButtonPosition = value : undefined;\n\t}\n\n\t/** @description Specifies the vertical placement of the dropDown menu relative to its trigger element. When set to 'Auto', the component intelligently chooses to display the dropDown either above or below the trigger based on available space within the viewport, ensuring optimal visibility and user experience. */\n\t@Input()\n\tget dropDownPosition(): DropDownPosition | string {\n\t\treturn this.nativeElement ? this.nativeElement.dropDownPosition : undefined;\n\t}\n\tset dropDownPosition(value: DropDownPosition | string) {\n\t\tthis.nativeElement ? this.nativeElement.dropDownPosition = value : undefined;\n\t}\n\n\t/** @description Specifies the height of the dropdown menu. By default, this property is set to null, which means the component will use CSS variables (custom properties) to determine its height. If the browser does not support CSS variables, set this property to a specific value (e.g., '200px' or '2.5em') to manually define the dropdown's height. Use this property only to ensure compatibility with browsers that lack support for CSS variables. */\n\t@Input()\n\tget dropDownHeight(): string {\n\t\treturn this.nativeElement ? this.nativeElement.dropDownHeight : undefined;\n\t}\n\tset dropDownHeight(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.dropDownHeight = value : undefined;\n\t}\n\n\t/** @description When this property is enabled, opening the element’s dropdown will display a transparent overlay that covers the area between the dropdown menu and the rest of the page. This overlay visually separates the dropdown from other content and can help capture user interactions outside the dropdown, such as clicks to close the menu. */\n\t@Input()\n\tget dropDownOverlay(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.dropDownOverlay : undefined;\n\t}\n\tset dropDownOverlay(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.dropDownOverlay = value : undefined;\n\t}\n\n\t/** @description Defines the width of the dropdown component. By default, this property is set to null, which means the dropdown will use CSS variables (such as '--dropdown-width') to determine its width. If you need to support browsers that do not support CSS variables, explicitly set this property to a specific width value (e.g., ''200px'' or ''20em''). This ensures consistent dropdown sizing across all browsers, including those without CSS variable support. */\n\t@Input()\n\tget dropDownWidth(): string {\n\t\treturn this.nativeElement ? this.nativeElement.dropDownWidth : undefined;\n\t}\n\tset dropDownWidth(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.dropDownWidth = value : undefined;\n\t}\n\n\t/** @description Enables users to adjust the alpha (transparency) level of colors through an editor or slider interface. This functionality is available in the following display modes: 'palette', 'radial', and 'hexagonal', allowing for precise control over color opacity in each mode. */\n\t@Input()\n\tget editAlphaChannel(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.editAlphaChannel : undefined;\n\t}\n\tset editAlphaChannel(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.editAlphaChannel = value : undefined;\n\t}\n\n\t/** @description Enables users to choose a custom color through an editor popup interface. This feature provides custom color selection in modes where it is not available by default—such as 'grid', 'default', and 'spectrum grid'—enhancing flexibility and user experience across different color selection modes. */\n\t@Input()\n\tget enableCustomColors(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.enableCustomColors : undefined;\n\t}\n\tset enableCustomColors(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.enableCustomColors = value : undefined;\n\t}\n\n\t/** @description Defines an array of color values that serve as the theme colors for the component or section. These colors will be applied when the displayMode is set to either 'grid' or 'default', ensuring consistent theming across these display modes. Each color in the array should be specified in a valid CSS color format (e.g., HEX, RGB, or named color). */\n\t@Input()\n\tget gridThemeColors(): string[] | null {\n\t\treturn this.nativeElement ? this.nativeElement.gridThemeColors : undefined;\n\t}\n\tset gridThemeColors(value: string[] | null) {\n\t\tthis.nativeElement ? this.nativeElement.gridThemeColors = value : undefined;\n\t}\n\n\t/** @description Specifies an array of color values to be used as shade colors within the relevant section when the displayMode is set to either 'grid' or 'default'. These colors determine the visual shading or background color scheme that appears in these display modes. */\n\t@Input()\n\tget gridShadeColors(): string[] | null {\n\t\treturn this.nativeElement ? this.nativeElement.gridShadeColors : undefined;\n\t}\n\tset gridShadeColors(value: string[] | null) {\n\t\tthis.nativeElement ? this.nativeElement.gridShadeColors = value : undefined;\n\t}\n\n\t/** @description Specifies an array of colors to be used as the standard color palette within the relevant section when the displayMode is set to either 'grid' or 'default'. These colors will be available for selection or display in these display modes, providing a consistent and predefined set of color options for users. */\n\t@Input()\n\tget gridStandardColors(): string[] | null {\n\t\treturn this.nativeElement ? this.nativeElement.gridStandardColors : undefined;\n\t}\n\tset gridStandardColors(value: string[] | null) {\n\t\tthis.nativeElement ? this.nativeElement.gridStandardColors = value : undefined;\n\t}\n\n\t/** @description Hides the alpha editor. The alpha editor is an input field that allows users to adjust the opacity (alpha value) of the currently selected color. It is available in the following display modes: 'radial', 'palette', and 'hexagonal'. The alpha editor is only shown when there is sufficient space in the UI. By default, this editor is visible unless explicitly hidden using this setting. */\n\t@Input()\n\tget hideAlphaEditor(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideAlphaEditor : undefined;\n\t}\n\tset hideAlphaEditor(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideAlphaEditor = value : undefined;\n\t}\n\n\t/** @description Specifies the priority order in which color editors are hidden when there is insufficient space to display them all. By default, these editors are only visible in the 'palette', 'radial', and 'hexagonal' display modes. This property enables you to control which editors remain visible by defining their visibility priority, ensuring that the most important editors are retained as the available space decreases. */\n\t@Input()\n\tget hideContentToFit(): string[] {\n\t\treturn this.nativeElement ? this.nativeElement.hideContentToFit : undefined;\n\t}\n\tset hideContentToFit(value: string[]) {\n\t\tthis.nativeElement ? this.nativeElement.hideContentToFit = value : undefined;\n\t}\n\n\t/** @description The HEX editor is a user input field that allows users to view and edit the hexadecimal (HEX) color code, representing the selected color. By default, the HEX editor is visible within the interface, enabling users to enter or modify HEX values such as #FF5733. To hide the HEX editor from the interface, set the 'hideHEXeditor' property to true. Note: Setting 'hideRGBeditor' to true only hides the RGB editor and does not affect the visibility of the HEX editor. */\n\t@Input()\n\tget hideHEXEditor(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideHEXEditor : undefined;\n\t}\n\tset hideHEXEditor(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideHEXEditor = value : undefined;\n\t}\n\n\t/** @description Hides the preview container, which displays the currently selected value when using the 'palette', 'radial', or 'hexagonal' display modes. When this option is enabled, the user will not see the visual preview of their selection within the interface. This can be useful for creating a more compact UI or when the preview is not necessary for your workflow. */\n\t@Input()\n\tget hidePreviewContainer(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hidePreviewContainer : undefined;\n\t}\n\tset hidePreviewContainer(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hidePreviewContainer = value : undefined;\n\t}\n\n\t/** @description Hides the RGB editor interface. The RGB editor consists of three individual input fields, each allowing users to specify the Red, Green, and Blue components of a color separately. By hiding the RGB editor, users will no longer see or interact with these color value inputs. */\n\t@Input()\n\tget hideRGBEditor(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.hideRGBEditor : undefined;\n\t}\n\tset hideRGBEditor(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.hideRGBEditor = value : undefined;\n\t}\n\n\t/** @description Displays supplementary helper text beneath the element, which becomes visible only when the element is focused, providing context-specific guidance to the user during interaction. */\n\t@Input()\n\tget hint(): string {\n\t\treturn this.nativeElement ? this.nativeElement.hint : undefined;\n\t}\n\tset hint(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.hint = value : undefined;\n\t}\n\n\t/** @description Inverts all colors displayed in the ‘spectrumGrid’, ‘hexagonal’, and ‘radial’ modes, producing their complementary (negative) color values for each element in these modes. This affects the entire color range shown, allowing for an alternative visual representation of the color palette. */\n\t@Input()\n\tget inverted(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.inverted : undefined;\n\t}\n\tset inverted(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.inverted = value : undefined;\n\t}\n\n\t/** @description Displays a descriptive label above the element to provide context or identify its purpose for users. */\n\t@Input()\n\tget label(): string {\n\t\treturn this.nativeElement ? this.nativeElement.label : undefined;\n\t}\n\tset label(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.label = value : undefined;\n\t}\n\n\t/** @description Sets or retrieves the unlockKey, a value required to activate or grant access to the product’s features. This key is typically used for licensing or security purposes, ensuring only authorized users can unlock the product. */\n\t@Input()\n\tget unlockKey(): string {\n\t\treturn this.nativeElement ? this.nativeElement.unlockKey : undefined;\n\t}\n\tset unlockKey(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.unlockKey = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the current language code (e.g., 'en', 'fr', 'es') to be used for localization purposes. This property works together with the messages property, which contains language-specific translations or text. Setting this value determines which set of messages is displayed to users based on their selected language. */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description A callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify the structure, content, or presentation of localized messages before they are delivered to your application. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Defines or retrieves an object containing the localized strings used within the widget’s user interface. This property works in conjunction with the locale property to enable the display of text in different languages, allowing developers to customize and provide translations for all UI elements and messages. */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves the value of the element’s name attribute. The name attribute is used to identify form controls when submitting an HTML form; its value is included as the key in the form-data sent to the server and allows the server to process user input correctly. */\n\t@Input()\n\tget name(): string {\n\t\treturn this.nativeElement ? this.nativeElement.name : undefined;\n\t}\n\tset name(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.name = value : undefined;\n\t}\n\n\t/** @description Specifies if the popup component is currently visible (open) or hidden (closed). */\n\t@Input()\n\tget opened(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.opened : undefined;\n\t}\n\tset opened(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.opened = value : undefined;\n\t}\n\n\t/** @description Specifies the color palette that will appear in the 'spectrumGrid', 'grid', and 'hexagonal' display modes. These colors define the available color options shown to users when any of these display modes are active. */\n\t@Input()\n\tget palette(): ColorPalette | string {\n\t\treturn this.nativeElement ? this.nativeElement.palette : undefined;\n\t}\n\tset palette(value: ColorPalette | string) {\n\t\tthis.nativeElement ? this.nativeElement.palette = value : undefined;\n\t}\n\n\t/** @description Defines a custom color palette as an array, which can be utilized in the display modes 'grid' and 'spectrum grid' when the palette property is set to custom. Each item in the array can either be a string representing a valid color format (such as HEX, RGB, or RGBA), or an object containing a color value. This allows you to specify a tailored set of colors for your application's interface, ensuring precise control over the available color options in supported display modes. */\n\t@Input()\n\tget paletteColors(): {name: string, value: string}[] | string[] | null {\n\t\treturn this.nativeElement ? this.nativeElement.paletteColors : undefined;\n\t}\n\tset paletteColors(value: {name: string, value: string}[] | string[] | null) {\n\t\tthis.nativeElement ? this.nativeElement.paletteColors = value : undefined;\n\t}\n\n\t/** @description Specifies an array containing a predefined set of custom colors for use in the application's color picker component. This custom palette appears in the color grid when the color picker is in 'grid', 'default', or 'spectrum grid' displayModes. The custom colors are displayed below the custom color selection button, at the bottom of the color grid. These colors are only visible if the enableCustomColor property is set to true. This allows users to quickly access and select from your specified custom colors in supported display modes. */\n\t@Input()\n\tget paletteCustomColors(): string[] | null {\n\t\treturn this.nativeElement ? this.nativeElement.paletteCustomColors : undefined;\n\t}\n\tset paletteCustomColors(value: string[] | null) {\n\t\tthis.nativeElement ? this.nativeElement.paletteCustomColors = value : undefined;\n\t}\n\n\t/** @description The placeholder appears when no value has been entered, or if the current value is null. It provides a visual cue or hint to the user about the expected input until an actual value is provided. */\n\t@Input()\n\tget placeholder(): string {\n\t\treturn this.nativeElement ? this.nativeElement.placeholder : undefined;\n\t}\n\tset placeholder(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.placeholder = value : undefined;\n\t}\n\n\t/** @description Prevents any user interactions with the element, such as clicking, typing, or focusing, rendering it completely unresponsive to pointer and keyboard events. */\n\t@Input()\n\tget readonly(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.readonly : undefined;\n\t}\n\tset readonly(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.readonly = value : undefined;\n\t}\n\n\t/** @description Controls the visibility of the resize indicator located in the bottom-right corner of the dropdown menu. When set to true, the resize handle is displayed, allowing users to adjust the size of the dropdown. This property should be used alongside the resizeMode property to specify how resizing is handled. */\n\t@Input()\n\tget resizeIndicator(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.resizeIndicator : undefined;\n\t}\n\tset resizeIndicator(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.resizeIndicator = value : undefined;\n\t}\n\n\t/** @description Specifies whether the drop-down menu can be resized by the user. When this option is enabled, a resize handle appears on either the top or bottom edge of the drop-down, allowing users to adjust its height interactively. If disabled, the drop-down’s size remains fixed and cannot be modified by the user. */\n\t@Input()\n\tget resizeMode(): ResizeMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.resizeMode : undefined;\n\t}\n\tset resizeMode(value: ResizeMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.resizeMode = value : undefined;\n\t}\n\n\t/** @description Specifies or retrieves a value that determines whether the element's text direction is set to right-to-left (RTL) alignment, commonly used for languages such as Arabic or Hebrew. This property ensures the element properly supports locales that require right-to-left text display. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Specifies the theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styles, ensuring visual consistency across the user interface. */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n\n\t/** @description Specifies the format and content used by the tooltip to display the value of the color when a user hovers over it. This setting controls how the color value is presented to the user, such as showing it as a HEX code, RGB value, or color name, within the tooltip interface. */\n\t@Input()\n\tget tooltipDisplayMode(): ColorTooltipDisplayMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.tooltipDisplayMode : undefined;\n\t}\n\tset tooltipDisplayMode(value: ColorTooltipDisplayMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.tooltipDisplayMode = value : undefined;\n\t}\n\n\t/** @description When set to true, this property prevents the element from receiving keyboard focus, making it unreachable via tab navigation or programmatic focus methods (e.g., element.focus()). */\n\t@Input()\n\tget unfocusable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.unfocusable : undefined;\n\t}\n\tset unfocusable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.unfocusable = value : undefined;\n\t}\n\n\t/** @description Represents the currently selected color value assigned to the element. This value is typically formatted as a hexadecimal color code (e.g., \"#FF5733\"), reflecting the user's choice in a color picker input. */\n\t@Input()\n\tget value(): string {\n\t\treturn this.nativeElement ? this.nativeElement.value : undefined;\n\t}\n\tset value(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.value = value : undefined;\n\t}\n\n\t/** @description Specifies the color format to be used, allowing selection between HEX, RGB, or RGBA formats. By default, the color format is automatically determined based on the current displayMode setting. This property ensures that colors are displayed in the preferred or most appropriate format for the context. */\n\t@Input()\n\tget valueFormat(): ColorValueFormat | string {\n\t\treturn this.nativeElement ? this.nativeElement.valueFormat : undefined;\n\t}\n\tset valueFormat(value: ColorValueFormat | string) {\n\t\tthis.nativeElement ? this.nativeElement.valueFormat = value : undefined;\n\t}\n\n\t/** @description Specifies which controls or buttons (such as ‘Apply’, ‘Cancel’, ‘Reset’, or custom actions) will appear in the action section of the color picker component. This determines the set of interactive elements available to users for confirming, cancelling, or modifying their color selection. */\n\t@Input()\n\tget valueDisplayMode(): ColorValueDisplayMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.valueDisplayMode : undefined;\n\t}\n\tset valueDisplayMode(value: ColorValueDisplayMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.valueDisplayMode = value : undefined;\n\t}\n\n\t/** @description This event is triggered when the user clicks the action button. The \"Ok\" button will only appear if the applyValueMode property is set to useButtons. In other modes, the \"Ok\" button is hidden and this event will not be available. This setting allows developers to control when value changes are confirmed by requiring explicit user action.\n\t*  @param event. The custom event. \t*/\n\t@Output() onActionButtonClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the user clicks the 'Cancel' button. Note that the 'Cancel' button appears only if the applyValueMode property is set to useButtons. If a different value is set for applyValueMode, the 'Cancel' button will not be displayed, and this event will not be triggered.\n\t*  @param event. The custom event. \t*/\n\t@Output() onCancelButtonClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever the color value is modified by the user or programmatically. It provides updated information about the new color selection, allowing you to perform actions—such as updating the UI or storing the new value—in response to the change.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\toldValue, \tvalue)\n\t*   oldValue - The previously selected color.\n\t*   value - The new selected color.\n\t*/\n\t@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the dropdown menu is closed, either by selecting an option, clicking outside the dropdown, or pressing a key that dismisses the menu. It allows you to execute custom logic after the dropdown is no longer visible to the user.\n\t*  @param event. The custom event. \t*/\n\t@Output() onClose: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is fired just before the dropdown menu is closed. By handling this event, you can intervene and prevent the dropdown from closing by calling event.preventDefault() within your event handler. This provides an opportunity to validate data, display a confirmation dialog, or perform any custom logic before the dropdown is hidden.\n\t*  @param event. The custom event. \t*/\n\t@Output() onClosing: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered whenever the custom color selection view is either opened or closed. The custom color selection view becomes accessible only when the enableCustomColors property is set to true. This event allows you to respond to user interactions with the custom color selector, such as initializing settings when the view opens or performing cleanup when it closes.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tvalue)\n\t*   value - A boolean that indicates whether the custom color view is shown or not.\n\t*/\n\t@Output() onCustomColorSelection: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the user clicks on the dropdown button, indicating their intent to expand or collapse the dropdown menu. It can be used to execute custom logic—such as displaying options, updating UI elements, or tracking user interactions—whenever the dropdown button is activated.\n\t*  @param event. The custom event. \t*/\n\t@Output() onDropDownButtonClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the user clicks the \"OK\" button. It can be used to execute custom logic in response to the user's confirmation action, such as submitting a form, closing a modal dialog, or proceeding to the next step in a workflow.\n\t*  @param event. The custom event. \t*/\n\t@Output() onOkButtonClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered each time the dropdown menu becomes visible to the user, such as when it is clicked or otherwise activated. Use this event to execute custom logic when the dropdown opens, for example, loading dynamic content or initializing UI elements within the dropdown.\n\t*  @param event. The custom event. \t*/\n\t@Output() onOpen: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered immediately before the dropdown menu is opened. Within the event handler, you can prevent the dropdown from opening by calling event.preventDefault(). This provides an opportunity to perform validation, execute custom logic, or conditionally cancel the opening of the dropdown based on specific criteria.\n\t*  @param event. The custom event. \t*/\n\t@Output() onOpening: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the user initiates the resizing action on the dropdown component, such as by clicking and dragging the resize handle or edge. It indicates the start of the resize interaction, allowing you to perform actions like displaying visual cues or preparing to handle the size change.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tposition)\n\t*   position - An object containing the current left and top positions of the drop down.\n\t*/\n\t@Output() onResizeStart: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the resizing action of the dropdown component is complete, indicating that the user has finished adjusting its size. At this point, any changes to the dimensions of the dropdown are finalized, and you can safely perform operations that depend on its new size.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tposition)\n\t*   position - An object containing the current left and top positions of the drop down.\n\t*/\n\t@Output() onResizeEnd: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Displays the color picker’s drop-down panel, allowing users to select or customize a color. \n\t*/\n    public open(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.open();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.open();\n            });\n        }\n    }\n\n\t/** @description Improved: \"Closes the color picker dropdown menu, hiding the color selection options from view.\" \n\t*/\n    public close(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.close();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.close();\n            });\n        }\n    }\n\n\n\tget isRendered(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.isRendered : false;\n\t}\n\n\tngOnInit() {\n\t}\n\n    ngAfterViewInit() {\n      const that = this;\n\n      that.onCreate.emit(that.nativeElement);\n\n\t\tif (Smart) Smart.Render();\n\n\t\tthis.nativeElement.classList.add('smart-angular');\n\n\t\tif (this.nativeElement.whenRendered) this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });\n\t\tthis.listen();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.unlisten();\n\t}\n\n\t_initialChange = true; \n\n\tget ngValue(): any {\n\t\tif (!this.nativeElement) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst value = this.nativeElement.value;\n\t\treturn value;\n\t}\n\n\tset ngValue(value: any) {\n\t\tif (this.nativeElement) {\n\t\t    this.writeValue(value);\n\t\t}\n\t}\n\n\twriteValue(value: any): void {\n        const that = this;\n        const normalizedValue = value == null ? '' : value;\n\n\t\tthat.nativeElement.whenRendered(() => {\n\t\t\tthat.value = normalizedValue;\n\t\t\tif (that._initialChange === false) {\n\t    \t\tthat._onChange(that.value);\n            }\n\t\t});\n\t}\n\n\tregisterOnChange(fn: any): void {\n\t\tthis._onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any): void {\n\t\tthis._onTouched = fn;\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.nativeElement && this.nativeElement.isRendered) {\n\t\t\tfor (const propName in changes) {\n\t\t\t\tif (changes.hasOwnProperty(propName)) {\n\t\t\t\t\tthis.nativeElement[propName] = changes[propName].currentValue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/** @description Add event listeners. */\n\tprivate listen(): void {\n        const that = this;\n\t\tthat.eventHandlers['actionButtonClickHandler'] = (event: CustomEvent) => { that.onActionButtonClick.emit(event); }\n\t\tthat.nativeElement.addEventListener('actionButtonClick', that.eventHandlers['actionButtonClickHandler']);\n\n\t\tthat.eventHandlers['cancelButtonClickHandler'] = (event: CustomEvent) => { that.onCancelButtonClick.emit(event); }\n\t\tthat.nativeElement.addEventListener('cancelButtonClick', that.eventHandlers['cancelButtonClickHandler']);\n\n\t\tthat.eventHandlers['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); }\n\t\tthat.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);\n\n\t\tthat.eventHandlers['closeHandler'] = (event: CustomEvent) => { that.onClose.emit(event); }\n\t\tthat.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);\n\n\t\tthat.eventHandlers['closingHandler'] = (event: CustomEvent) => { that.onClosing.emit(event); }\n\t\tthat.nativeElement.addEventListener('closing', that.eventHandlers['closingHandler']);\n\n\t\tthat.eventHandlers['customColorSelectionHandler'] = (event: CustomEvent) => { that.onCustomColorSelection.emit(event); }\n\t\tthat.nativeElement.addEventListener('customColorSelection', that.eventHandlers['customColorSelectionHandler']);\n\n\t\tthat.eventHandlers['dropDownButtonClickHandler'] = (event: CustomEvent) => { that.onDropDownButtonClick.emit(event); }\n\t\tthat.nativeElement.addEventListener('dropDownButtonClick', that.eventHandlers['dropDownButtonClickHandler']);\n\n\t\tthat.eventHandlers['okButtonClickHandler'] = (event: CustomEvent) => { that.onOkButtonClick.emit(event); }\n\t\tthat.nativeElement.addEventListener('okButtonClick', that.eventHandlers['okButtonClickHandler']);\n\n\t\tthat.eventHandlers['openHandler'] = (event: CustomEvent) => { that.onOpen.emit(event); }\n\t\tthat.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);\n\n\t\tthat.eventHandlers['openingHandler'] = (event: CustomEvent) => { that.onOpening.emit(event); }\n\t\tthat.nativeElement.addEventListener('opening', that.eventHandlers['openingHandler']);\n\n\t\tthat.eventHandlers['resizeStartHandler'] = (event: CustomEvent) => { that.onResizeStart.emit(event); }\n\t\tthat.nativeElement.addEventListener('resizeStart', that.eventHandlers['resizeStartHandler']);\n\n\t\tthat.eventHandlers['resizeEndHandler'] = (event: CustomEvent) => { that.onResizeEnd.emit(event); }\n\t\tthat.nativeElement.addEventListener('resizeEnd', that.eventHandlers['resizeEndHandler']);\n\n\n        that.eventHandlers['changeModelHandler'] = (event: Event) => {\n            that._initialChange = false;\n            that._onChange(that.nativeElement.value);\n        };\n        that.eventHandlers['blurModelHandler'] = (event: Event) => {\n            that._onTouched();\n        };\n        that.nativeElement.whenRendered(() => {\n            if (that.nativeElement.querySelector('input')) {\n                that.eventHandlers['keyupModelHandler'] = (event) => {\n                    setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50);\n                };\n\n                that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);\n            }\n        });\n\t\tthat.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);\n\t\tthat.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);\n\t}\n\n\t/** @description Remove event listeners. */\n\tprivate unlisten(): void {\n        const that = this;\n\t\tif (that.eventHandlers['actionButtonClickHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('actionButtonClick', that.eventHandlers['actionButtonClickHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['cancelButtonClickHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('cancelButtonClick', that.eventHandlers['cancelButtonClickHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['changeHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['closeHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['closingHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('closing', that.eventHandlers['closingHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['customColorSelectionHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('customColorSelection', that.eventHandlers['customColorSelectionHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['dropDownButtonClickHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('dropDownButtonClick', that.eventHandlers['dropDownButtonClickHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['okButtonClickHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('okButtonClick', that.eventHandlers['okButtonClickHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['openHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['openingHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('opening', that.eventHandlers['openingHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['resizeStartHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('resizeStart', that.eventHandlers['resizeStartHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['resizeEndHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('resizeEnd', that.eventHandlers['resizeEndHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['changeModelHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']);\n            if (that.nativeElement.querySelector('input')) {\n                  that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']);\n            }\n\t\t}\n\t\tif (that.eventHandlers['blurModelHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']);\n\t\t}\n\t}\n}\n","import { NgModule } from '@angular/core';\n\nimport { ColorPickerComponent } from './smart.colorpicker';\nimport { CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';\n\n@NgModule({\n    declarations: [ColorPickerComponent],\n\tschemas: [CUSTOM_ELEMENTS_SCHEMA],\n\texports: [ColorPickerComponent]\n})\n\nexport class ColorPickerModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAYa,WAAW;IACpB,YAAY,GAAe;QAajB,aAAQ,GAAsB,IAAI,YAAY,EAAE,CAAC;QACjD,YAAO,GAAsB,IAAI,YAAY,EAAE,CAAC;QAChD,aAAQ,GAAsB,IAAI,YAAY,EAAE,CAAC;QACjD,aAAQ,GAAsB,IAAI,YAAY,EAAE,CAAC;QAfvD,MAAM,IAAI,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,aAAoB,CAAC;QAE9C,IAAI,CAAC,aAAa,CAAC,UAAU,GAAG;YAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC1C,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,UAAU,GAAG;YAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAC1C,CAAA;KACJ;IASM,gBAAgB,CAAC,IAAY,EAAE,QAA4C,EAAE,UAA6C,KAAK;QAClI,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;KACnE;IAEM,mBAAmB,CAAC,IAAY,EAAE,QAA4C,E