smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
616 lines (608 loc) • 36.7 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.colorpanel';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, forwardRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ColorPanelComponent),
multi: true
};
class ColorPanelComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/**
* @description
* The registered callback function called when a change event occurs on the form elements.
*/
this._onChange = () => { };
/**
* @description
* The registered callback function called when a blur event occurs on the form elements.
*/
this._onTouched = () => { };
/** @description This event is triggered whenever the selected color value is modified by the user. It occurs both when the user chooses a new color or adjusts the current color selection, allowing developers to respond dynamically to changes in color input.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The previously selected color.
* value - The new selected color.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered when the user clicks the "Cancel" button. Note: The "Cancel" button is displayed only when the applyValueMode property is set to useButtons. If applyValueMode has a different value, the "Cancel" button will not appear, and this event will not be triggered.
* @param event. The custom event. */
this.onCancelButtonClick = new EventEmitter();
/** @description This event is triggered whenever the custom color selection view is either opened or closed by the user. Note that the custom color selection view is only accessible when the enableCustomColors property is set to true. This event allows you to perform actions in response to users interacting with the custom color picker interface.
* @param event. The custom event. Custom event was created with: event.detail( value)
* value - A boolean that indicates whether the custom color view is shown or not.
*/
this.onCustomColorSelection = new EventEmitter();
/** @description This event is triggered when the "OK" button is clicked by the user. Note that the "OK" button appears in the UI only if the applyValueMode property is set to useButtons. If applyValueMode has a different value, the "OK" button will not be displayed, and this event will not be triggered.
* @param event. The custom event. */
this.onOkButtonClick = new EventEmitter();
this._initialChange = true;
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-color-panel');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use this property to enable, disable, or specify the type of animation applied to the element. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Clarifies the method or rule by which the value is implemented or utilized within the system, detailing how the value influences functionality or behavior. */
get applyValueMode() {
return this.nativeElement ? this.nativeElement.applyValueMode : undefined;
}
set applyValueMode(value) {
this.nativeElement ? this.nativeElement.applyValueMode = value : undefined;
}
/** @description Specifies how many columns of colors are displayed when using the 'grid', 'hexagonal', or 'spectrumGrid' displayModes. This parameter controls the horizontal arrangement of color swatches, determining how many colors appear in each row of the color picker interface for these modes. */
get columnCount() {
return this.nativeElement ? this.nativeElement.columnCount : undefined;
}
set columnCount(value) {
this.nativeElement ? this.nativeElement.columnCount = value : undefined;
}
/** @description Determines whether the element is interactive or not. When set to 'disabled', the element becomes unresponsive to user interactions such as clicks, typing, or selection, and may also appear visually distinct (e.g., grayed out) to indicate its inactive state. When enabled, the element behaves normally and accepts user input. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Specifies the color palette to be used and defines how these colors are arranged or distributed within the user interface or visual component. */
get displayMode() {
return this.nativeElement ? this.nativeElement.displayMode : undefined;
}
set displayMode(value) {
this.nativeElement ? this.nativeElement.displayMode = value : undefined;
}
/** @description By default, clicking on the color panel's preview container will revert the selected color to its previous value, effectively undoing any recent changes. Setting the 'disableUndo' option disables this undo functionality, so clicking the preview container will no longer restore the previous color value. */
get disableUndo() {
return this.nativeElement ? this.nativeElement.disableUndo : undefined;
}
set disableUndo(value) {
this.nativeElement ? this.nativeElement.disableUndo = value : undefined;
}
/** @description Enables users to adjust the alpha (transparency) level of colors using an editor or slider. This functionality is available in the following display modes: 'palette', 'radial', and 'hexagonal', allowing for precise transparency control while selecting colors in these layouts. */
get editAlphaChannel() {
return this.nativeElement ? this.nativeElement.editAlphaChannel : undefined;
}
set editAlphaChannel(value) {
this.nativeElement ? this.nativeElement.editAlphaChannel = value : undefined;
}
/** @description Enables users to choose a custom color through an editor popup interface. This functionality extends custom color selection to modes where it is not included by default, such as 'grid', 'default', or 'spectrum grid', providing flexibility and a consistent color selection experience across different modes. */
get enableCustomColors() {
return this.nativeElement ? this.nativeElement.enableCustomColors : undefined;
}
set enableCustomColors(value) {
this.nativeElement ? this.nativeElement.enableCustomColors = value : undefined;
}
/** @description Specifies an array of color values to be used as the theme colors for the relevant section when displayMode is set to 'default'. These colors will determine the visual appearance and styling of the section under the default display mode. */
get gridThemeColors() {
return this.nativeElement ? this.nativeElement.gridThemeColors : undefined;
}
set gridThemeColors(value) {
this.nativeElement ? this.nativeElement.gridThemeColors = value : undefined;
}
/** @description Defines an array of color values to be used as shade colors in the section that appears when displayMode is set to 'default'. These colors determine the visual shading or accent colors applied within that display mode, allowing for customization of the section’s appearance. */
get gridShadeColors() {
return this.nativeElement ? this.nativeElement.gridShadeColors : undefined;
}
set gridShadeColors(value) {
this.nativeElement ? this.nativeElement.gridShadeColors = value : undefined;
}
/** @description Specifies an array of standard colors that will be applied in the corresponding section when the displayMode is set to 'default'. These colors determine the default color palette for that section's visual elements. */
get gridStandardColors() {
return this.nativeElement ? this.nativeElement.gridStandardColors : undefined;
}
set gridStandardColors(value) {
this.nativeElement ? this.nativeElement.gridStandardColors = value : undefined;
}
/** @description Controls the visibility of the alpha editor, which is a UI input for adjusting the opacity (alpha value) of the selected color. The alpha editor is available in the 'radial', 'palette', and 'hexagonal' modes, and is displayed by default as long as there is enough space in the interface. Enabling this option will hide the alpha editor from view, preventing users from modifying color opacity directly. */
get hideAlphaEditor() {
return this.nativeElement ? this.nativeElement.hideAlphaEditor : undefined;
}
set hideAlphaEditor(value) {
this.nativeElement ? this.nativeElement.hideAlphaEditor = value : undefined;
}
/** @description Specifies the priority for hiding color editors when there is insufficient space to display all of them. By default, color editors are shown only in 'palette', 'radial', and 'hexagonal' display modes. Use this property to control the order in which editors are hidden, ensuring that the most important editors remain visible for as long as possible as space becomes limited. This allows for a customized and responsive user interface that adapts to varying display sizes. */
get hideContentToFit() {
return this.nativeElement ? this.nativeElement.hideContentToFit : undefined;
}
set hideContentToFit(value) {
this.nativeElement ? this.nativeElement.hideContentToFit = value : undefined;
}
/** @description The HEX editor is an input field that allows users to enter or view a color's value in hexadecimal format (e.g., #FF5733). By default, the HEX editor is displayed in the UI. If the 'hideHEXeditor' property is set to true, this input will be hidden from view. Note: The 'hideRGBeditor' property controls the visibility of the separate RGB editor, not the HEX editor. */
get hideHEXEditor() {
return this.nativeElement ? this.nativeElement.hideHEXEditor : undefined;
}
set hideHEXEditor(value) {
this.nativeElement ? this.nativeElement.hideHEXEditor = value : undefined;
}
/** @description Conceals the preview container, which displays the currently selected value in the 'palette', 'radial', and 'hexagonal' display modes. When this option is enabled, users will not see the visual representation of their selection within the interface. */
get hidePreviewContainer() {
return this.nativeElement ? this.nativeElement.hidePreviewContainer : undefined;
}
set hidePreviewContainer(value) {
this.nativeElement ? this.nativeElement.hidePreviewContainer = value : undefined;
}
/** @description Hides the RGB editor interface. This editor consists of three individual input fields, each allowing users to directly adjust the Red, Green, and Blue components of a color independently. Disabling this option will prevent users from modifying these color channels through the RGB editor. */
get hideRGBEditor() {
return this.nativeElement ? this.nativeElement.hideRGBEditor : undefined;
}
set hideRGBEditor(value) {
this.nativeElement ? this.nativeElement.hideRGBEditor = value : undefined;
}
/** @description Inverts the color scheme of the interface when operating in the 'spectrumGrid', 'hexagonal', or 'radial' display modes, producing a visually reversed version of the original colors for enhanced contrast or alternative visual effects. */
get inverted() {
return this.nativeElement ? this.nativeElement.inverted : undefined;
}
set inverted(value) {
this.nativeElement ? this.nativeElement.inverted = value : undefined;
}
/** @description Sets or retrieves the 'unlockKey' property, a unique key required to activate or grant access to the product. Assign a valid key string to unlock the product, or get the current key in use. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Defines or retrieves the current language setting for the application. This property works together with the messages property, allowing you to display localized content based on the selected language. Setting this value determines which language-specific message set from messages will be used throughout the interface. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify, translate, or personalize message strings before they are displayed in your application. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Specifies or retrieves an object that defines the text strings used within the widget, allowing for easy localization of the widget's interface. This property works together with the locale property to support multiple languages by providing translated strings as needed. Use this to customize the widget's displayed text based on the selected locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or retrieves the value of the element's name attribute. This attribute assigns a unique identifier to the element within an HTML form, allowing its value to be included as a key when the form is submitted to a server. The name attribute is essential for processing form data, as the server uses these names to identify and handle the values submitted by users. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Specifies the color palette used for rendering the color options within the 'spectrumGrid', 'grid', and 'hexagonal' display modes. This setting controls which color values are shown to users when these modes are active, directly affecting the available color choices in the UI. */
get palette() {
return this.nativeElement ? this.nativeElement.palette : undefined;
}
set palette(value) {
this.nativeElement ? this.nativeElement.palette = value : undefined;
}
/** @description Specifies an array of colors to create a custom color palette. When the palette property is set to custom, this palette is available for selection in the 'grid' and 'spectrum grid' display modes. The array can contain either color strings (such as HEX, RGB, or RGBA formats) or objects that define valid color values. This allows for flexible customization of the color selection options shown to users. */
get paletteColors() {
return this.nativeElement ? this.nativeElement.paletteColors : undefined;
}
set paletteColors(value) {
this.nativeElement ? this.nativeElement.paletteColors = value : undefined;
}
/** @description Specifies an array of colors that make up a predefined custom color palette. This palette is available for display modes 'grid', 'default', and 'spectrum grid'. When enabled via the enableCustomColors property, these custom colors appear at the bottom of the color grid, positioned below the button that allows users to select a custom color. If enableCustomColors is set to false, the custom color palette will not be visible to users. */
get paletteCustomColors() {
return this.nativeElement ? this.nativeElement.paletteCustomColors : undefined;
}
set paletteCustomColors(value) {
this.nativeElement ? this.nativeElement.paletteCustomColors = value : undefined;
}
/** @description When the element has the "readonly" attribute, users can view its value but cannot modify, edit, or interact with its content in any way. The element remains visible and selectable, but user input and changes are disabled. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Determines or retrieves whether the element’s text direction is set to right-to-left (RTL), enabling proper alignment and layout for languages and locales that use right-to-left scripts, such as Arabic or Hebrew. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies the theme to be applied to the element, which controls its overall appearance—including colors, fonts, and style variations—ensuring visual consistency with the rest of the user interface. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Specifies the format and content used to display the color’s value in the tooltip when a user hovers over it. This setting controls how the color information (such as hexadecimal, RGB, or color name) appears in the tooltip for better clarity and user experience. */
get tooltipDisplayMode() {
return this.nativeElement ? this.nativeElement.tooltipDisplayMode : undefined;
}
set tooltipDisplayMode(value) {
this.nativeElement ? this.nativeElement.tooltipDisplayMode = value : undefined;
}
/** @description Represents the currently selected color value, typically formatted as a hexadecimal code (e.g., "#FF5733"), RGB value, or other standard color representation. This value is updated whenever the user selects a new color and can be used to apply the chosen color to UI elements or store user preferences. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Specifies the format in which the color value will be represented—either HEX, RGB, or RGBA. By default, the color format adapts automatically based on the selected displayMode. */
get valueFormat() {
return this.nativeElement ? this.nativeElement.valueFormat : undefined;
}
set valueFormat(value) {
this.nativeElement ? this.nativeElement.valueFormat = value : undefined;
}
/** @description Specifies which object property should be used as the color value when paletteColors is an array of objects. This option is useful when your color data is structured as objects and the property representing the color value does not use the default key name 'value'. Set this attribute to the name of the property that contains the color value within each object. */
get valueMember() {
return this.nativeElement ? this.nativeElement.valueMember : undefined;
}
set valueMember(value) {
this.nativeElement ? this.nativeElement.valueMember = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or other focus-related interactions. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
get ngValue() {
if (!this.nativeElement) {
return null;
}
const value = this.nativeElement.value;
return value;
}
set ngValue(value) {
if (this.nativeElement) {
this.writeValue(value);
}
}
writeValue(value) {
const that = this;
const normalizedValue = value == null ? '' : value;
that.nativeElement.whenRendered(() => {
that.value = normalizedValue;
if (that._initialChange === false) {
that._onChange(that.value);
}
});
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['cancelButtonClickHandler'] = (event) => { that.onCancelButtonClick.emit(event); };
that.nativeElement.addEventListener('cancelButtonClick', that.eventHandlers['cancelButtonClickHandler']);
that.eventHandlers['customColorSelectionHandler'] = (event) => { that.onCustomColorSelection.emit(event); };
that.nativeElement.addEventListener('customColorSelection', that.eventHandlers['customColorSelectionHandler']);
that.eventHandlers['okButtonClickHandler'] = (event) => { that.onOkButtonClick.emit(event); };
that.nativeElement.addEventListener('okButtonClick', that.eventHandlers['okButtonClickHandler']);
that.eventHandlers['changeModelHandler'] = (event) => {
that._initialChange = false;
that._onChange(that.nativeElement.value);
};
that.eventHandlers['blurModelHandler'] = (event) => {
that._onTouched();
};
that.nativeElement.whenRendered(() => {
if (that.nativeElement.querySelector('input')) {
that.eventHandlers['keyupModelHandler'] = (event) => {
setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50);
};
that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
});
that.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);
that.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['cancelButtonClickHandler']) {
that.nativeElement.removeEventListener('cancelButtonClick', that.eventHandlers['cancelButtonClickHandler']);
}
if (that.eventHandlers['customColorSelectionHandler']) {
that.nativeElement.removeEventListener('customColorSelection', that.eventHandlers['customColorSelectionHandler']);
}
if (that.eventHandlers['okButtonClickHandler']) {
that.nativeElement.removeEventListener('okButtonClick', that.eventHandlers['okButtonClickHandler']);
}
if (that.eventHandlers['changeModelHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']);
if (that.nativeElement.querySelector('input')) {
that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
}
if (that.eventHandlers['blurModelHandler']) {
that.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']);
}
}
}
ColorPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ColorPanelComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ColorPanelComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ColorPanelComponent, selector: "smart-color-panel, [smart-color-panel]", inputs: { animation: "animation", applyValueMode: "applyValueMode", columnCount: "columnCount", disabled: "disabled", displayMode: "displayMode", disableUndo: "disableUndo", editAlphaChannel: "editAlphaChannel", enableCustomColors: "enableCustomColors", gridThemeColors: "gridThemeColors", gridShadeColors: "gridShadeColors", gridStandardColors: "gridStandardColors", hideAlphaEditor: "hideAlphaEditor", hideContentToFit: "hideContentToFit", hideHEXEditor: "hideHEXEditor", hidePreviewContainer: "hidePreviewContainer", hideRGBEditor: "hideRGBEditor", inverted: "inverted", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", name: "name", palette: "palette", paletteColors: "paletteColors", paletteCustomColors: "paletteCustomColors", readonly: "readonly", rightToLeft: "rightToLeft", theme: "theme", tooltipDisplayMode: "tooltipDisplayMode", value: "value", valueFormat: "valueFormat", valueMember: "valueMember", unfocusable: "unfocusable" }, outputs: { onChange: "onChange", onCancelButtonClick: "onCancelButtonClick", onCustomColorSelection: "onCustomColorSelection", onOkButtonClick: "onOkButtonClick" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-color-panel"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ColorPanelComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-color-panel', selector: 'smart-color-panel, [smart-color-panel]',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], applyValueMode: [{
type: Input
}], columnCount: [{
type: Input
}], disabled: [{
type: Input
}], displayMode: [{
type: Input
}], disableUndo: [{
type: Input
}], editAlphaChannel: [{
type: Input
}], enableCustomColors: [{
type: Input
}], gridThemeColors: [{
type: Input
}], gridShadeColors: [{
type: Input
}], gridStandardColors: [{
type: Input
}], hideAlphaEditor: [{
type: Input
}], hideContentToFit: [{
type: Input
}], hideHEXEditor: [{
type: Input
}], hidePreviewContainer: [{
type: Input
}], hideRGBEditor: [{
type: Input
}], inverted: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], name: [{
type: Input
}], palette: [{
type: Input
}], paletteColors: [{
type: Input
}], paletteCustomColors: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}], tooltipDisplayMode: [{
type: Input
}], value: [{
type: Input
}], valueFormat: [{
type: Input
}], valueMember: [{
type: Input
}], unfocusable: [{
type: Input
}], onChange: [{
type: Output
}], onCancelButtonClick: [{
type: Output
}], onCustomColorSelection: [{
type: Output
}], onOkButtonClick: [{
type: Output
}] } });
class ColorPanelModule {
}
ColorPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ColorPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ColorPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ColorPanelModule, declarations: [ColorPanelComponent], exports: [ColorPanelComponent] });
ColorPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ColorPanelModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ColorPanelModule, decorators: [{
type: NgModule,
args: [{
declarations: [ColorPanelComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [ColorPanelComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ColorPanelComponent, ColorPanelModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-colorpanel.mjs.map