@componyx/ui 0.0.0-stage → 1.0.3

package/types/PieChart.d.ts

@@ -0,0 +1,224 @@
+declare namespace componyx 
+{
+    namespace UI
+    {
+        interface PieChart extends Omit<componyx.UI.base.methods, 'render' | 'destroy' | 'cloneProperties' | 'postRender'> { }
+        /**
+         * <p>PieChart class.</p>
+         * @param id - <p>The id of the component.</p>
+         * @param properties - <p>The properties used to initialize the component or the container element.</p>
+         */
+        class PieChart extends componyx.UI.base.WebComponent
+        {
+            constructor(id?: string, properties?: any | HTMLElement);
+            /**
+             * <p>Internal CSS class name constants. You can override any of these classes on the Component
+             * instance by defining a property named <code>cssClass&lt;Key&gt;</code> where &lt;Key&gt; is the
+             * PascalCase key from this object. Be cautious: overriding these classes without including the
+             * default names may break styling and functionality.</p>
+             */
+            readonly classOption: {
+                readonly CHART: string;
+                readonly HALF: string;
+                readonly DONUT: string;
+                readonly LEGEND: string;
+                readonly LEGEND_ITEM: string;
+                readonly LEGEND_ITEM_COLOR: string;
+                readonly LEGEND_ITEM_LABEL: string;
+                readonly SEGMENT_LABEL: string;
+                readonly SEGMENT_OVERLAY: string;
+                readonly SEGMENT_HOVER: string;
+            };
+            /**
+             * <p>PieChart events</p>
+             */
+            events: componyx.UI.PieChart.PieChartEvents;
+            /**
+             * <p>Renders the component.</p>
+             */
+            render(): void;
+            /**
+             * <p>Destroys the component.</p>
+             * @param keepEvents - <p>A value indicating if component events should be kept.</p>
+             * @param [removeElement = true] - <p>A value indicating if the corresponding HTML Element should be removed.</p>
+             */
+            destroy(keepEvents: boolean, removeElement?: boolean): void;
+            /**
+             * <p>Gets the css class if it exists and otherwise the default css class.</p>
+             * @param cssClassValue - <p>The class option key to look up.</p>
+             * @returns <p>The css class.</p>
+             */
+            getCssClass(cssClassValue: string): string;
+            /**
+             * <p>Gets or sets the shape of the pie chart (PIE or DONUT).</p>
+            */
+            shape: componyx.UI.PieChart.ShapeOption;
+            /**
+             * <p>Gets or sets where the segment labels are displayed (NONE, INNER, or OUTER).</p>
+            */
+            segmentLabelDisplay: componyx.UI.PieChart.SegmentLabelDisplayOption;
+            /**
+             * <p>Gets or sets the content of the segment labels (VALUE, LABEL, LABEL_VALUE).</p>
+            */
+            segmentLabelContent: componyx.UI.PieChart.SegmentLabelContentOption;
+            /**
+             * <p>Gets or sets a value indicating whether the chart spans half a circle.</p>
+            */
+            isHalf: boolean;
+            /**
+             * <p>Gets or sets a value indicating whether the legend is displayed.</p>
+            */
+            showLegend: boolean;
+            /**
+             * <p>Gets or sets a value indicating whether segment values are shown in the legend labels.</p>
+            */
+            showValuesInLegend: boolean;
+            /**
+             * <p>Gets or sets the start angle in degrees (0 = top, clockwise). Only applies to the full (non-half) variant.</p>
+            */
+            startAngle: number;
+            /**
+             * <p>Gets or sets the inner hole size for the donut variant as a ratio (0-1, where 0.6 = 60% hole).</p>
+            */
+            donutInnerRatio: number;
+            /**
+             * <p>Gets or sets the base color used for segments without a specified color. The colors of such segments are generated by shifting the hue of the base color.</p>
+            */
+            baseColor: string;
+            /**
+             * <p>Gets or sets the segment label positioning offset. For OUTER labels: distance in pixels from chart edge (default: 20). For INNER labels: position ratio from 0 (inner edge) to 1 (outer edge) (default: 0.5).</p>
+            */
+            segmentLabelOffset: number | null;
+            /**
+             * <p>Gets or sets the list of segments.</p>
+            */
+            segments: componyx.UI.PieChart.Segment[];
+            /**
+             * <p>Gets or sets the id of the component from which the settings are cloned for the tooltip manager used by the PieChart component.</p>
+            */
+            tooltipManagerId: string;
+        }
+        namespace PieChart
+        {
+            /**
+             * @property onSegmentEnter - <p>Fires when the pointer enters a segment.</p>
+             * @property onSegmentLeave - <p>Fires when the pointer leaves a segment.</p>
+             * @property onSegmentClick - <p>Fires when a segment is clicked.</p>
+             * @property onRenderSegmentLabel - <p>Fires when a segment label is rendered.</p>
+             * @property onRenderLegendLabel - <p>Fires when a legend label is rendered.</p>
+             */
+            class PieChartEvents extends componyx.UI.base.Events<componyx.UI.PieChart>
+            {
+                constructor();
+                /**
+                 * <p>Fires when the pointer enters a segment.</p>
+                */
+                onSegmentEnter: componyx.UI.base.Event<componyx.UI.PieChart, componyx.UI.PieChart.PieChartEventArgs>;
+                /**
+                 * <p>Fires when the pointer leaves a segment.</p>
+                */
+                onSegmentLeave: componyx.UI.base.Event<componyx.UI.PieChart, componyx.UI.PieChart.PieChartEventArgs>;
+                /**
+                 * <p>Fires when a segment is clicked.</p>
+                */
+                onSegmentClick: componyx.UI.base.Event<componyx.UI.PieChart, componyx.UI.PieChart.PieChartEventArgs>;
+                /**
+                 * <p>Fires when a segment label is rendered.</p>
+                */
+                onRenderSegmentLabel: componyx.UI.base.Event<componyx.UI.PieChart, componyx.UI.PieChart.PieChartLabelRenderEventArgs>;
+                /**
+                 * <p>Fires when a legend label is rendered.</p>
+                */
+                onRenderLegendLabel: componyx.UI.base.Event<componyx.UI.PieChart, componyx.UI.PieChart.PieChartLabelRenderEventArgs>;
+            }
+            /**
+             * <p>PieChart segment event arguments.</p>
+             */
+            type PieChartEventArgs = {
+                /** <p>The data segment.</p> */
+                segment: componyx.UI.PieChart.Segment;
+                /** <p>The original event object.</p> */
+                event: Event;
+            };
+            /**
+             * <p>PieChart label render event arguments.</p>
+             */
+            type PieChartLabelRenderEventArgs = {
+                /** <p>The data segment.</p> */
+                segment: componyx.UI.PieChart.Segment;
+                /** <p>The label DOM element (segment label or legend label) that can be customized.</p> */
+                element: HTMLElement;
+            };
+            /**
+             * <p>Represents a chart segment.</p>
+             * @param [properties] - <p>The properties used to initialize the object.</p>
+             */
+            class Segment
+            {
+                constructor(properties?: {
+                    id?: string;
+                    label?: string;
+                    tooltip?: string;
+                    color?: string;
+                    value?: number;
+                    valueSuffix?: string;
+                    endColor?: string;
+                });
+                /**
+                 * <p>Gets or sets the id of the segment.</p>
+                */
+                id: string;
+                /**
+                 * <p>Gets or sets the label of the segment</p>
+                */
+                label: string;
+                /**
+                 * <p>Gets or sets the tooltip of the segment</p>
+                */
+                tooltip: string;
+                /**
+                 * <p>Gets or sets the CSS color value of the segment.</p>
+                */
+                color: string;
+                /**
+                 * <p>Gets or sets the value of the segment.</p>
+                */
+                value: number;
+                /**
+                 * <p>Gets or sets the value suffix (e.g. %) of the segment.</p>
+                */
+                valueSuffix: string;
+                /**
+                 * <p>Gets or sets the optional CSS end color value of the segment.</p>
+                */
+                endColor: string | null;
+            }
+            /**
+             * <p>ShapeOption</p>
+             */
+            enum ShapeOption
+            {
+                PIE = "pie",
+                DONUT = "donut"
+            }
+            /**
+             * <p>SegmentLabelDisplayOption</p>
+             */
+            enum SegmentLabelDisplayOption
+            {
+                NONE = "none",
+                INNER = "inner",
+                OUTER = "outer"
+            }
+            /**
+             * <p>SegmentLabelContentOption</p>
+             */
+            enum SegmentLabelContentOption
+            {
+                VALUE = "value",
+                LABEL = "label",
+                LABEL_VALUE = "label_value"
+            }
+        }
+    }
+}

package/types/ResponsiveTemplates.d.ts

@@ -0,0 +1,108 @@
+declare namespace componyx
+{
+    /**
+     * <p>Enables responsive templates based on media-queries defined through HTML data-attributes.</p>
+     */
+    namespace responsiveTemplates
+    {
+        /**
+         * <p>A registered responsive template. Passed to the template events and callbacks.</p>
+         */
+        type Template = {
+            /** <p>The template element.</p> */
+            element: HTMLElement;
+            /** <p>The place-holder elements inside the template.</p> */
+            placeHolders: HTMLElement[];
+            /** <p>Space separated list of css sources loaded when the template is active.</p> */
+            css: string;
+            /** <p>Space separated list of javascript sources loaded when the template is active.</p> */
+            js: string;
+            /** <p>The callbacks specified when the template was added.</p> */
+            callbacks: componyx.responsiveTemplates.TemplateCallbacks;
+            /** <p>The media query list linked to the template, when a media query was specified.</p> */
+            mediaQuery?: MediaQueryList;
+            /** <p>A value indicating if all template sources have been loaded.</p> */
+            sourcesLoaded?: boolean;
+            /** <p>The script and link tags added for the template sources.</p> */
+            tags?: HTMLElement[];
+        };
+        /**
+         * <p>Optional template callbacks. The template is passed as first argument to all callbacks.</p>
+         */
+        type TemplateCallbacks = {
+            /** <p>Called when a template is activated.</p> */
+            onActivate?: (template: componyx.responsiveTemplates.Template) => any;
+            /** <p>Called when a template is deactivated.</p> */
+            onDeactivate?: (template: componyx.responsiveTemplates.Template) => any;
+            /** <p>Called when a JS or CSS source is loaded. The source is passed as second argument.</p> */
+            onLoadSrc?: (template: componyx.responsiveTemplates.Template, src: string) => any;
+            /** <p>Called when all JS and CSS sources have been loaded.</p> */
+            onLoadComplete?: (template: componyx.responsiveTemplates.Template) => any;
+            /** <p>Called when the media query of the template changes its match state, before the template is activated or deactivated.</p> */
+            onMatchMediaChange?: (template: componyx.responsiveTemplates.Template) => any;
+        };
+        /**
+         * <p>Defines if responsive design templates are automatically detected when the DOM is ready.</p>
+         */
+        var autoDetect: boolean;
+        /**
+         * <p>The id of the template to load at startup.</p>
+         */
+        var launchTemplateId: string | null;
+        /**
+         * <p>The id of the template to load when media queries are not supported/used.</p>
+         */
+        var fallbackTemplateId: string | null;
+        /**
+         * <p>Current active template.</p>
+         */
+        var activeTemplate: componyx.responsiveTemplates.Template | null;
+        /**
+         * <p>Event which fires when the view templates have been detected and initialized. Handlers receive no arguments.</p>
+         */
+        var onPostDetect: componyx.library.Event<() => any>;
+        /**
+         * <p>Event which fires when a <code>matchMedia</code> query changes its match state (e.g., from matching to non-matching or vice versa), before the template is activated or deactivated. Handlers receive the template of the media query.</p>
+         */
+        var onMatchMediaChange: componyx.library.Event<(template: componyx.responsiveTemplates.Template) => any>;
+        /**
+         * <p>Event which fires when a view template is activated. Handlers receive the activated template.</p>
+         */
+        var onActivate: componyx.library.Event<(template: componyx.responsiveTemplates.Template) => any>;
+        /**
+         * <p>Event which fires when a view template is deactivated. Handlers receive the deactivated template.</p>
+         */
+        var onDeactivate: componyx.library.Event<(template: componyx.responsiveTemplates.Template) => any>;
+        /**
+         * <p>Event which fires when a single template resource is loaded. Handlers receive the loaded source.</p>
+         */
+        var onLoadSrc: componyx.library.Event<(src: string) => any>;
+        /**
+         * <p>Event which fires when all template resources have been loaded. Handlers receive no arguments.</p>
+         */
+        var onLoadComplete: componyx.library.Event<() => any>;
+        /**
+         * <p>Detects and initializes responsive design templates on the page.</p>
+         */
+        function detect(): Promise<void>;
+        /**
+         * <p>Adds a responsive template which can be linked to the specified media query.</p>
+         * @param templateId - <p>The id of the DOM Element which will act as responsive design template.</p>
+         * @param mediaQuery - <p>The media query (or comma separated list) which is linked to the responsive design template.</p>
+         * @param css - <p>Space separated list of css sources to load when the responsive design template is active.</p>
+         * @param js - <p>Space separated list of javascript sources to load when the responsive design template is active.</p>
+         * @param callbacks - <p>An object containing optional callback functions. The template is passed as first argument to all callbacks.</p>
+         */
+        function add(templateId: string, mediaQuery: string, css: string, js: string, callbacks: componyx.responsiveTemplates.TemplateCallbacks): Promise<void>;
+        /**
+         * <p>Activates the responsive template with the specified id.</p>
+         * @param templateId - <p>The id of the DOM Element which will act as responsive design template.</p>
+         */
+        function activate(templateId: string): Promise<void>;
+        /**
+         * <p>Deactivates the responsive template with the specified id.</p>
+         * @param templateId - <p>The id of the DOM Element which will act as responsive design template.</p>
+         */
+        function deactivate(templateId: string): Promise<void>;
+    }
+}

package/types/Slider.d.ts

@@ -0,0 +1,227 @@
+declare namespace componyx 
+{
+    namespace UI
+    {
+        interface Slider extends componyx.UI.base.methods { }
+        /**
+         * <p>Slider class.</p>
+         */
+        class Slider extends componyx.UI.base.Component implements componyx.UI.base.methods
+        {
+            /**
+             * Creates a new Slider instance.
+             * @param id - <p>The id of the component.</p>
+             * @param properties - <p>The properties used to initialize the component or the container element.</p>
+             */
+            constructor(id: string, properties: Partial<Slider> | HTMLElement);
+            /**
+             * <p>Slider events</p>
+             */
+            events: componyx.UI.Slider.SliderEvents;
+            /**
+             * <p>Sets the value template. The template supports the below listed interpolations.</p>
+             * <ul>
+             * <li>{value} This value will be replaced with the selected value or label text.</li>
+             * </ul>
+             * @param content - <p>The HTML template.</p>
+             */
+            setValueTemplate(content: HTMLElement | HTMLElement[] | DocumentFragment | string): void;
+            /**
+             * <p>Sets the start value template. The template supports the below listed interpolations.</p>
+             * <ul>
+             * <li>{value} This value will be replaced with the selected value or label text.</li>
+             * </ul>
+             * @param content - <p>The HTML template.</p>
+             */
+            setStartValueTemplate(content: HTMLElement | HTMLElement[] | DocumentFragment | string): void;
+            /**
+             * <p>Gets the selected slider value(s).</p>
+             * @returns <p>The value for a slider or the range start and end values for a range slider.</p>
+             */
+            getValue(): number | Number[];
+            /**
+             * <p>Sets the (end) value.</p>
+             * @param value - <p>The value to set.</p>
+             */
+            setValue(value: number): void;
+            /**
+             * <p>Sets the start value in a range slider.</p>
+             * @param value - <p>The start value to set.</p>
+             */
+            setStartValue(value: number): void;
+            /**
+             * <p>Renders the component</p>
+             */
+            render(): void;
+            /**
+             * <p>Handles the post render procedure.</p>
+             */
+            postRender(): void;
+            /**
+             * <p>Destroys the component.</p>
+             */
+            destroy(): void;
+            /**
+             * <p>Gets or sets a value indicating if the slider is rendered vertically.</p>
+            */
+            vertical: boolean;
+            /**
+             * <p>Gets or sets a value indicating if the slider has a start- and end-handle to set a range.</p>
+            */
+            range: boolean;
+            /**
+             * <p>Gets or sets a value indicating if the increase and decrease buttons are displayed.</p>
+            */
+            showButtons: boolean;
+            /**
+             * <p>Gets or sets a value indicating if tooltips are displayed when there are value changes.</p>
+            */
+            showTooltips: boolean;
+            /**
+             * <p>Gets or sets a value indicating if the slider is rendered in reverse direction.</p>
+            */
+            reversed: boolean;
+            /**
+             * <p>Gets or sets a value indicating if the css animation is activated when the track is selected.</p>
+            */
+            animation: boolean;
+            /**
+             * <p>Gets or sets a value indicating if the slider is disabled.</p>
+            */
+            disabled: boolean;
+            /**
+             * <p>Gets or sets a value indicating where the tickmark side is rendered.</p>
+            */
+            tickMarkSide: componyx.UI.Slider.TickMarkSideOption;
+            /**
+             * <p>Gets or sets a value indicating where the tickmark values are rendered.</p>
+            */
+            tickMarkValueSide: componyx.UI.Slider.TickMarkSideOption;
+            /**
+             * <p>Gets or sets the track size. If a track size is defined the CSS class 'fixed-track-size' is appended to the root element. You can also control the slider’s dimensions via CSS, either on the track or the root element.</p>
+            */
+            trackSize: string | number;
+            /**
+             * <p>Gets or sets the decimal separator used when displaying tickmark values.</p>
+            */
+            decimalSeparator: string;
+            /**
+             * <p>Gets or sets the decimal places used when displaying tickmark values.</p>
+            */
+            decimalPlaces: number;
+            /**
+             * <p>Gets or sets the minimum value.</p>
+            */
+            minValue: number;
+            /**
+             * <p>Gets or sets the maximum value.</p>
+            */
+            maxValue: number;
+            /**
+             * <p>Gets or sets the minimum change in value.</p>
+            */
+            minChange: number;
+            /**
+             * <p>Gets or sets the maximum change in value. If a maximum value is not set the handle can move to any clicked position in the track.</p>
+            */
+            maxChange: number;
+            /**
+             * <p>Gets or sets the start value of the range slider.</p>
+            */
+            startValue: number;
+            /**
+             * <p>Gets or sets the value (end value in range) of the slider. If range is set to true and this value is not set it will take the maxValue by default, otherwise it defaults to the minValue or 0.</p>
+            */
+            value: number | null;
+            /**
+             * <p>Gets or sets the amount of rendered tickmarks.</p>
+            */
+            tickMarks: number;
+            /**
+             * <p>Gets or sets the tickmark step on which a value is rendered. 0 means never, 1 means every item, 2 means every 2nd item.</p>
+            */
+            tickMarkValueStep: number;
+            /**
+             * <p>Gets or sets the tickmark step on which a minor tick is rendered. 0 means never, 1 means every item, 2 means every 2nd item and so on.</p>
+            */
+            minorTickMarkStep: number;
+            /**
+             * <p>Gets or sets the tickmark step on which a major tick is rendered. 0 means never, 1 means every item, 2 means every 2nd item and so on.</p>
+            */
+            majorTickMarkStep: number;
+            /**
+             * <p>Gets or sets the tickmark labels when text instead of a numeric value is desired.</p>
+            */
+            tickMarkLabels: {
+                [key: number]: string;
+            };
+            /**
+             * <p>Gets or sets the id of the decrease button from which the settings are cloned.</p>
+            */
+            decreaseButtonId: string | null;
+            /**
+             * <p>Gets or sets the id of the increase button from which the settings are cloned.</p>
+            */
+            increaseButtonId: string | null;
+            /**
+             * <p>Gets or sets the id of the tooltip manager from which the settings are cloned.</p>
+            */
+            tooltipManagerId: string | null;
+            /**
+             * <p>Gets or sets the id of the hidden input from which the attributes and properties are cloned. The hidden input contains the selected value.</p>
+            */
+            hiddenInputId: string | null;
+            /**
+             * <p>Gets or sets the id of the range-start hidden input from which the attributes and properties are cloned. The hidden input contains the selected range start value.</p>
+            */
+            startHiddenInputId: string | null;
+            /**
+             * <p>Gets or sets the id of the range hidden input from which the attributes and properties are cloned. The hidden input contains both the selected range start and end value.</p>
+            */
+            rangeHiddenInputId: string | null;
+        }
+        namespace Slider
+        {
+            /**
+            * @property onFocus - <p>Event which fires when the component is focused.</p>
+            * @property onBlur - <p>Event which fires when the component is blurred.</p>
+            * @property onChange - <p>Event which fires when the value or start value is changed.</p>
+            */
+            class SliderEvents extends componyx.UI.base.Events<componyx.UI.Slider>
+            {
+                constructor();
+                /**
+                 * <p>Event which fires when the component is focused.</p>
+                */
+                onFocus: componyx.UI.base.Event<componyx.UI.Slider, undefined>;
+                /**
+                 * <p>Event which fires when the component is blurred.</p>
+                */
+                onBlur: componyx.UI.base.Event<componyx.UI.Slider, undefined>;
+                /**
+                 * <p>Event which fires when the value or start value is changed.</p>
+                */
+                onChange: componyx.UI.base.Event<componyx.UI.Slider, componyx.UI.Slider.ChangeEventArgs>;
+            }
+            /**
+             * <p>Slider change event arguments.</p>
+             */
+            type ChangeEventArgs = {
+                /** <p>A value indicating if the range start value changed instead of the (end) value.</p> */
+                isStart: boolean;
+                /** <p>The new value.</p> */
+                value: number | null;
+            };
+            /**
+             * <p>TickMarkSideOption</p>
+             */
+            enum TickMarkSideOption
+            {
+                NONE = 0,
+                BEFORE = 1,
+                AFTER = 2,
+                BOTH = 3
+            }
+        }
+    }
+}