@claspo/renderer 16.7.0-theme.13 → 17.0.0

package/prize-pool/PrizePoolEvents.d.ts

@@ -1,5 +1,7 @@
-export default PrizePoolEvents;
-declare namespace PrizePoolEvents {
-    const PRIZE_POOL_UPDATED: string;
-    const REQUEST_PRIZE_POOL: string;
+export interface PrizePoolEventsI {
+    PRIZE_POOL_UPDATED: 'PRIZE_POOL_UPDATED';
+    REQUEST_PRIZE_POOL: 'REQUEST_PRIZE_POOL';
 }
+export type PrizePoolEventT = PrizePoolEventsI[keyof PrizePoolEventsI];
+declare const PrizePoolEvents: PrizePoolEventsI;
+export default PrizePoolEvents;

package/prize-pool/PrizePoolFactory.d.ts

@@ -1,7 +1,7 @@
+import PrizePool from "./PrizePool";
 export default class PrizePoolFactory {
-    constructor(httpClient: any, configService: any);
     httpClient: any;
     configService: any;
+    constructor(httpClient: any, configService: any);
     get(config: any): PrizePool;
 }
-import PrizePool from "./PrizePool";

package/renderer/DragEventListener.d.ts

@@ -1,9 +1,9 @@
 export default class DragEventListener {
-    constructor(eventEmitter: any, documentModel: any);
     eventEmitter: any;
     documentModel: any;
     dragStartSubscription: any;
     dragEndSubscription: any;
+    constructor(eventEmitter: any, documentModel: any);
     updateHovered(type: any): void;
     destroy(): void;
 }

package/renderer/RenderConstants.d.ts

@@ -1,6 +1,6 @@
-export function applySysClassPrefix(str: any): string;
-export function applySysAttrPrefix(str: any): string;
-export namespace RenderConstants {
-    const SYSTEM_CLASS_PREFIX: string;
-    const SYSTEM_ATTRIBUTE_PREFIX: string;
-}
+export declare const RenderConstants: {
+    readonly SYSTEM_CLASS_PREFIX: "cl-";
+    readonly SYSTEM_ATTRIBUTE_PREFIX: "cl-";
+};
+export declare function applySysClassPrefix(str: string): string;
+export declare function applySysAttrPrefix(str: string): string;

package/renderer/ViewRendererActionType.d.ts

@@ -1,15 +1,15 @@
-export namespace ViewRendererActionType {
-    const COMPONENT_FOCUSED: string;
-    const REMOVE_FOCUS: string;
-    const SET_FOCUS: string;
-    const COMPONENT_MOUSE_MOVE: string;
-    const COMPONENT_CLICKED: string;
-    const COMPONENT_DOUBLE_CLICKED: string;
-    const COMPONENT_DRAGSTART: string;
-    const COMPONENT_DRAGEND: string;
-    const COMPONENT_DRAGOVER: string;
-    const DOCUMENT_DROP: string;
-    const SHOW_INLINE_EDIT: string;
-    const VIEW_COMPONENT_RESOURCES_LOADED: string;
-    const FAILED_TO_LOAD_COMPONENT_RESOURCE: string;
-}
+export declare const ViewRendererActionType: {
+    COMPONENT_FOCUSED: string;
+    REMOVE_FOCUS: string;
+    SET_FOCUS: string;
+    COMPONENT_MOUSE_MOVE: string;
+    COMPONENT_CLICKED: string;
+    COMPONENT_DOUBLE_CLICKED: string;
+    COMPONENT_DRAGSTART: string;
+    COMPONENT_DRAGEND: string;
+    COMPONENT_DRAGOVER: string;
+    DOCUMENT_DROP: string;
+    SHOW_INLINE_EDIT: string;
+    VIEW_COMPONENT_RESOURCES_LOADED: string;
+    FAILED_TO_LOAD_COMPONENT_RESOURCE: string;
+};

package/renderer/style/ClDocumentResizeListener.d.ts

@@ -1,11 +1,12 @@
-export default class ClDocumentResizeListener {
+import DefaultEventEmitter from '@claspo/common/DefaultEventEmitter';
+export default class ClDocumentResizeListener extends DefaultEventEmitter {
     static changeEventName: string;
-    constructor(documentModel: any, containerElement: any);
     documentModel: any;
     containerElement: any;
     mobileBreakpointWidth: any;
-    _isMobile: boolean;
-    isMobile(): boolean;
+    _isMobile: any;
+    constructor(documentModel: any, containerElement: any);
+    isMobile(): any;
     destroy(): void;
     _calculateMobileFlag(): boolean;
     _getElementsWidthPx(element: any): number;

package/renderer/style/ClDocumentResizeListener.js

@@ -1 +1 @@
-import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{DocumentModelUpdateType}from"../../document-model/DocumentModel";export default class ClDocumentResizeListener extends DefaultEventEmitter{constructor(e,t){super(),this.documentModel=e,this.containerElement=t,this.mobileBreakpointWidth=this.documentModel.getShared().mobileBreakpointWidth,this._isMobile=this._calculateMobileFlag(),this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,e=>{this._isMobile=e.isMobileEnv,this.emit(ClDocumentResizeListener.changeEventName,this._isMobile)})}isMobile(){return this._isMobile}destroy(){super.destroy()}_calculateMobileFlag(){return this._getElementsWidthPx(this.containerElement)<=this.mobileBreakpointWidth}_getElementsWidthPx(e){return parseInt(getComputedStyle(e).width)}}ClDocumentResizeListener.changeEventName="CHANGE";
+import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";export default class ClDocumentResizeListener extends DefaultEventEmitter{constructor(e,t){super(),this.documentModel=e,this.containerElement=t,this.mobileBreakpointWidth=this.documentModel.getShared().mobileBreakpointWidth,this._isMobile=this._calculateMobileFlag(),this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,e=>{this._isMobile=e.isMobileEnv,this.emit(ClDocumentResizeListener.changeEventName,this._isMobile)})}isMobile(){return this._isMobile}destroy(){super.destroy()}_calculateMobileFlag(){return this._getElementsWidthPx(this.containerElement)<=this.mobileBreakpointWidth}_getElementsWidthPx(e){return parseInt(getComputedStyle(e).width)}}ClDocumentResizeListener.changeEventName="CHANGE";

package/renderer/style/ColorSchemaListener.d.ts

@@ -1,25 +1,40 @@
+import DocumentModelService from "../../document-model/DocumentModelService";
+import HttpClient from "@claspo/common/network/HttpClient";
+import { ClBaseComponentPropsI, ClDocumentSharedI } from "@claspo/common/document/Document.interface";
+import { PlatformEnvT } from "../../sdk/WcElement";
+export interface ParsedBackgroundI {
+    url: string | null;
+    positionOptions: string | null;
+}
+export interface EnvUrlMapValueI {
+    originalSVGResourceURL: string;
+    inlineSvgString: string | null;
+    positionOptions: string | null;
+}
+export interface EnvUrlMapsI {
+    desktop: Map<string, EnvUrlMapValueI>;
+    mobile: Map<string, EnvUrlMapValueI>;
+}
+export interface SubscriptionI {
+    off(): void;
+}
+export type GetSharedCallbackT = () => ClDocumentSharedI;
+export type GetPropsCallbackT = () => ClBaseComponentPropsI;
+export type GetEnvCallbackT = () => PlatformEnvT;
 export default class ColorSchemaListener {
-    constructor(documentModel: any, hostElement: any, getSharedCb: any, getPropsCb: any, getEnvCb: any, httpClient: any);
-    hostElement: any;
-    documentModel: any;
-    getSharedCb: any;
-    getPropsCb: any;
-    getEnvCb: any;
-    httpClient: any;
-    subscription: any;
-    envUrlMaps: {
-        desktop: Map<any, any>;
-        mobile: Map<any, any>;
-    };
-    parseBackground(background: any): {
-        url: string;
-        positionOptions: string;
-    } | {
-        url: null;
-        positionOptions: null;
-    };
-    apply(env: any): Promise<void>;
-    on(): ColorSchemaListener;
-    _applyHostElementBackground(value: any, cssVarsMap?: {}): void;
-    _buildBackgroundUrl(value: any, cssVarsMap: any): string;
+    hostElement: HTMLElement;
+    documentModel: DocumentModelService;
+    getSharedCb: GetSharedCallbackT;
+    getPropsCb: GetPropsCallbackT;
+    getEnvCb: GetEnvCallbackT;
+    httpClient: typeof HttpClient;
+    subscription: SubscriptionI | null;
+    envUrlMaps: EnvUrlMapsI;
+    constructor(documentModel: DocumentModelService, hostElement: HTMLElement, getSharedCb: GetSharedCallbackT, getPropsCb: GetPropsCallbackT, getEnvCb: GetEnvCallbackT, httpClient: typeof HttpClient);
+    parseBackground(background: string | undefined): ParsedBackgroundI;
+    apply(env: PlatformEnvT): Promise<void>;
+    on(): this;
+    _applyHostElementBackground(value: EnvUrlMapValueI | undefined, cssVarsMap: Record<string, string> | undefined): void;
+    _buildBackgroundUrl(value: EnvUrlMapValueI, cssVarsMap: Record<string, string>): string;
+    off(): void;
 }

package/renderer/style/ColorSchemaListener.js

@@ -1 +1 @@
-import{DocumentModelUpdateType}from"../../document-model/DocumentModel";import ErrorLogger from"../../error/ErrorLogger";export default class ColorSchemaListener{constructor(t,e,n,o,i,s){this.hostElement=e,this.documentModel=t,this.getSharedCb=n,this.getPropsCb=o,this.getEnvCb=i,this.httpClient=s,this.subscription=null,this.envUrlMaps={desktop:new Map,mobile:new Map}}parseBackground(t){const e=String(t||"");if(e.includes("url")){const[t,n]=e.split("(")[1].split(")");return{url:t.replace(/['"]+/g,""),positionOptions:n.replace(";","")}}return{url:null,positionOptions:null}}apply(t){const e=this.getPropsCb();return e.backgroundDynamicInlineSVGElements[t].forEach(n=>{var o,i,s,l,r;const a=null===(i=null===(o=e.adaptiveStyles)||void 0===o?void 0:o[t])||void 0===i?void 0:i.find(t=>t.element===n),c=(null===(s=e.styles)||void 0===s?void 0:s.find(t=>t.element===n))||{},u=(null===(l=null==c?void 0:c.styleAttributes)||void 0===l?void 0:l.background)||(null===(r=null==a?void 0:a.styleAttributes)||void 0===r?void 0:r.background),p=this.parseBackground(u);p.url&&this.envUrlMaps[t].set(n,{originalSVGResourceURL:p.url,inlineSvgString:null,positionOptions:p.positionOptions})}),Promise.all([...this.envUrlMaps[t].entries()].map(([e,n])=>this.httpClient.execute(n.originalSVGResourceURL).then(t=>t.text()).then(o=>{this.envUrlMaps[t].set(e,Object.assign(Object.assign({},n),{inlineSvgString:o}))}))).then(()=>{var e;this._applyHostElementBackground(this.envUrlMaps[t].get("host"),null===(e=this.getSharedCb().theme)||void 0===e?void 0:e.schema)}).catch(t=>{console.error(t),ErrorLogger.log(`Failed to load/apply backgroundDynamicInlineSVGElements[${this.getPropsCb().backgroundDynamicInlineSVGElements}] ${t}`)})}on(){return this.subscription=this.documentModel.on(DocumentModelUpdateType.THEME_UPDATE,t=>{this._applyHostElementBackground(this.envUrlMaps[this.getEnvCb()].get("host"),t.schema)}),this}_applyHostElementBackground(t,e={}){t&&(this.hostElement.style.background=this._buildBackgroundUrl(t,e))}_buildBackgroundUrl(t,e){const n=t.inlineSvgString.trim().replace("var(--cl-schema-accent)",e.accent);return`url('data:image/svg+xml,${encodeURIComponent(n)}')${t.positionOptions}`}}
+import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";import ErrorLogger from"../../error/ErrorLogger";export default class ColorSchemaListener{constructor(t,e,n,o,i,s){this.hostElement=e,this.documentModel=t,this.getSharedCb=n,this.getPropsCb=o,this.getEnvCb=i,this.httpClient=s,this.subscription=null,this.envUrlMaps={desktop:new Map,mobile:new Map}}parseBackground(t){const e=String(t||"");if(e.includes("url")){const[t,n]=e.split("(")[1].split(")");return{url:t.replace(/['"]+/g,""),positionOptions:n.replace(";","")}}return{url:null,positionOptions:null}}apply(t){const e=this.getPropsCb();return e.backgroundDynamicInlineSVGElements[t].forEach(n=>{var o,i,s,r,l;const a=null===(i=null===(o=e.adaptiveStyles)||void 0===o?void 0:o[t])||void 0===i?void 0:i.find(t=>t.element===n),c=(null===(s=e.styles)||void 0===s?void 0:s.find(t=>t.element===n))||{},u=(null===(r=null==c?void 0:c.styleAttributes)||void 0===r?void 0:r.background)||(null===(l=null==a?void 0:a.styleAttributes)||void 0===l?void 0:l.background),p=this.parseBackground(u);p.url&&this.envUrlMaps[t].set(n,{originalSVGResourceURL:p.url,inlineSvgString:null,positionOptions:p.positionOptions})}),Promise.all([...this.envUrlMaps[t].entries()].map(([e,n])=>this.httpClient.execute(n.originalSVGResourceURL).then(t=>t.text()).then(o=>{this.envUrlMaps[t].set(e,Object.assign(Object.assign({},n),{inlineSvgString:o}))}))).then(()=>{this._applyHostElementBackground(this.envUrlMaps[t].get("host"),this.getSharedCb().cssVars)}).catch(t=>{console.error(t),ErrorLogger.log(`Failed to load/apply backgroundDynamicInlineSVGElements[${this.getPropsCb().backgroundDynamicInlineSVGElements}] ${t}`)})}on(){return this.subscription=this.documentModel.on(DocumentModelUpdateType.COLOR_SCHEMA_UPDATE,t=>{this._applyHostElementBackground(this.envUrlMaps[this.getEnvCb()].get("host"),t)}),this}_applyHostElementBackground(t,e){t&&e&&(this.hostElement.style.background=this._buildBackgroundUrl(t,e))}_buildBackgroundUrl(t,e){const n=t.inlineSvgString.trim().replace("var(--cl-schema-accent)",e["cl-schema-accent"]);return`url('data:image/svg+xml,${encodeURIComponent(n)}')${t.positionOptions}`}off(){var t;null===(t=this.subscription)||void 0===t||t.off()}}

package/renderer/style/CommonStylesService.d.ts

@@ -1,6 +1,7 @@
 export default class CommonStylesService {
-    static applyHostStyles(componentType: any, element: any, componentModel: null | undefined, layoutType: any): void;
-    styles: string;
+    styles: any;
+    static applyHostStyles(componentType: any, element: any, componentModel: any, layoutType: any): void;
+    constructor();
     setStyles(additionalStyles?: string): void;
-    getStyles(): string;
+    getStyles(): any;
 }

package/renderer/style/DefaultMediaQueryListener.d.ts

@@ -1,12 +1,18 @@
-export default class DefaultMediaQueryListener {
+import DefaultEventEmitter from "@claspo/common/DefaultEventEmitter";
+import DocumentModelService from "../../document-model/DocumentModelService";
+import { WidgetInitConfigI } from "@claspo/common/WidgetInitConfig.interface";
+export interface EnvironmentUpdatePayloadI {
+    isMobileEnv: boolean;
+}
+export default class DefaultMediaQueryListener extends DefaultEventEmitter {
     static changeEventName: string;
-    constructor(documentModel: any, config: any);
-    config: any;
-    _isMobile: any;
-    handleMobileBreakpoint(mobileBreakpointWidth: any): void;
-    mobileBreakpointWidth: any;
-    mediaQueryList: MediaQueryList | undefined;
-    isMobile(): any;
-    listener(mediaQueryListEvent: any): void;
+    config: WidgetInitConfigI;
+    mobileBreakpointWidth: number | string;
+    mediaQueryList: MediaQueryList;
+    _isMobile: boolean;
+    constructor(documentModel: DocumentModelService, config: WidgetInitConfigI);
+    handleMobileBreakpoint(mobileBreakpointWidth: number | string): void;
+    isMobile(): boolean;
+    listener(mediaQueryListEvent: MediaQueryListEvent): void;
     destroy(): void;
 }

package/renderer/style/DefaultMediaQueryListener.js

@@ -1 +1 @@
-import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{DocumentModelUpdateType}from"../../document-model/DocumentModel";export default class DefaultMediaQueryListener extends DefaultEventEmitter{constructor(e,i){super(),this.config=i,this.handleMobileBreakpoint(e.getShared().mobileBreakpointWidth),e.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,({isMobileEnv:e})=>{this._isMobile=e,this.emit(DefaultMediaQueryListener.changeEventName,this._isMobile)})}handleMobileBreakpoint(e){this.mobileBreakpointWidth=e;const i=Number.isInteger(this.mobileBreakpointWidth)?`${this.mobileBreakpointWidth}px`:this.mobileBreakpointWidth;this.mediaQueryList=window.matchMedia(`(max-width: ${i})`),this.mediaQueryList.addListener(this.listener.bind(this)),this._isMobile=this.mediaQueryList.matches,this.emit(DefaultMediaQueryListener.changeEventName,this._isMobile)}isMobile(){return this.config.forceMobileEnv||this._isMobile}listener(e){this._isMobile=e.matches,this.emit(DefaultMediaQueryListener.changeEventName,this._isMobile)}destroy(){super.destroy(),this.mediaQueryList.removeListener(this.listener.bind(this))}}DefaultMediaQueryListener.changeEventName="CHANGE";
+import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";export default class DefaultMediaQueryListener extends DefaultEventEmitter{constructor(e,i){super(),this.config=i,this.handleMobileBreakpoint(e.getShared().mobileBreakpointWidth),e.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,({isMobileEnv:e})=>{this._isMobile=e,this.emit(DefaultMediaQueryListener.changeEventName,this._isMobile)})}handleMobileBreakpoint(e){this.mobileBreakpointWidth=e;const i=Number.isInteger(this.mobileBreakpointWidth)?`${this.mobileBreakpointWidth}px`:this.mobileBreakpointWidth;this.mediaQueryList=window.matchMedia(`(max-width: ${i})`),this.mediaQueryList.addListener(this.listener.bind(this)),this._isMobile=this.mediaQueryList.matches,this.emit(DefaultMediaQueryListener.changeEventName,this._isMobile)}isMobile(){return this.config.forceMobileEnv||this._isMobile}listener(e){this._isMobile=e.matches,this.emit(DefaultMediaQueryListener.changeEventName,this._isMobile)}destroy(){super.destroy(),this.mediaQueryList.removeListener(this.listener.bind(this))}}DefaultMediaQueryListener.changeEventName="CHANGE";

package/renderer/style/LoopAnimationStylesService.d.ts

@@ -1,4 +1,4 @@
-export class LoopAnimationStylesService {
+export declare class LoopAnimationStylesService {
     static animationClassPrefix: string;
     static CL_DEFAULT_LOOP_ANIMATION_PULSE_BORDER_RADIUS: string;
     static CL_DEFAULT_LOOP_ANIMATION_PULSE_COLOR: string;

package/renderer/style/MobileDeviceOrientationListener.d.ts

@@ -1,11 +1,24 @@
-export default class MobileDeviceOrientationListener {
+import DefaultEventEmitter from '@claspo/common/DefaultEventEmitter';
+import DocumentModelService from '../../document-model/DocumentModelService';
+import ConfigService from '../../common/ConfigService';
+export type OrientationT = 'PORTRAIT' | 'LANDSCAPE';
+export interface EnvironmentUpdateValueI {
+    orientation?: OrientationT;
+    [key: string]: unknown;
+}
+export interface OrientationEventI {
+    detail?: {
+        orientation?: OrientationT;
+    };
+}
+export default class MobileDeviceOrientationListener extends DefaultEventEmitter {
     static changeEventName: string;
-    constructor(documentModel: any, configService: any);
-    documentModel: any;
-    _orientation: any;
-    handleOrientationChangeBound: (event: any) => void;
+    documentModel: DocumentModelService;
+    _orientation: OrientationT;
+    handleOrientationChangeBound: () => void;
+    constructor(documentModel: DocumentModelService, configService: ConfigService);
     isPortrait(): boolean;
-    handleOrientationChange(event: any): void;
+    handleOrientationChange(event?: OrientationEventI): void;
     addOrientationChangeListener(): void;
     removeOrientationChangeListener(): void;
     destroy(): void;

package/renderer/style/MobileDeviceOrientationListener.js

@@ -1 +1 @@
-import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{detectOrientation}from"@claspo/common/utils/orientationUtils";import{isIOS}from"@claspo/common/utils/deviceUtils";import{DocumentModelUpdateType}from"../../document-model/DocumentModel";export default class MobileDeviceOrientationListener extends DefaultEventEmitter{constructor(e,t){var n;super(),this.documentModel=e,this._orientation=null!==(n=t.config.defaultOrientation)&&void 0!==n?n:detectOrientation(),this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,e=>{e.orientation&&(this._orientation=e.orientation,this.emit(MobileDeviceOrientationListener.changeEventName,this._orientation))}),this.handleOrientationChangeBound=this.handleOrientationChange.bind(this),this.addOrientationChangeListener()}isPortrait(){return"PORTRAIT"===this._orientation}handleOrientationChange(e){var t,n;this._orientation=null!==(n=null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.orientation)&&void 0!==n?n:detectOrientation(),this.emit(MobileDeviceOrientationListener.changeEventName,this._orientation)}addOrientationChangeListener(){!isIOS()&&window.screen.orientation?window.screen.orientation.addEventListener("change",this.handleOrientationChangeBound):"orientation"in window&&window.addEventListener("orientationchange",this.handleOrientationChangeBound)}removeOrientationChangeListener(){!isIOS()&&window.screen.orientation?window.screen.orientation.removeEventListener("change",this.handleOrientationChangeBound):"orientation"in window&&window.removeEventListener("orientationchange",this.handleOrientationChangeBound)}destroy(){super.destroy(),this.removeOrientationChangeListener()}}MobileDeviceOrientationListener.changeEventName="CHANGE";
+import DefaultEventEmitter from"@claspo/common/DefaultEventEmitter";import{detectOrientation}from"@claspo/common/utils/orientationUtils";import{isIOS}from"@claspo/common/utils/deviceUtils";import{DocumentModelUpdateType}from"../../document-model/DocumentModelService";export default class MobileDeviceOrientationListener extends DefaultEventEmitter{constructor(e,t){var n;super(),this.documentModel=e,this._orientation=null!==(n=t.config.defaultOrientation)&&void 0!==n?n:detectOrientation(),this.documentModel.on(DocumentModelUpdateType.ENVIRONMENT_UPDATE,e=>{e.orientation&&(this._orientation=e.orientation,this.emit(MobileDeviceOrientationListener.changeEventName,this._orientation))}),this.handleOrientationChangeBound=this.handleOrientationChange.bind(this),this.addOrientationChangeListener()}isPortrait(){return"PORTRAIT"===this._orientation}handleOrientationChange(e){var t,n;this._orientation=null!==(n=null===(t=null==e?void 0:e.detail)||void 0===t?void 0:t.orientation)&&void 0!==n?n:detectOrientation(),this.emit(MobileDeviceOrientationListener.changeEventName,this._orientation)}addOrientationChangeListener(){!isIOS()&&window.screen.orientation?window.screen.orientation.addEventListener("change",this.handleOrientationChangeBound):"orientation"in window&&window.addEventListener("orientationchange",this.handleOrientationChangeBound)}removeOrientationChangeListener(){!isIOS()&&window.screen.orientation?window.screen.orientation.removeEventListener("change",this.handleOrientationChangeBound):"orientation"in window&&window.removeEventListener("orientationchange",this.handleOrientationChangeBound)}destroy(){super.destroy(),this.removeOrientationChangeListener()}}MobileDeviceOrientationListener.changeEventName="CHANGE";

package/resource-management/ComponentResourceManager.d.ts

@@ -1,13 +1,15 @@
+import Counter from "./Counter";
+import DefaultEventEmitter from '@claspo/common/DefaultEventEmitter';
+export interface ResourceCountersI {
+    pending: Counter;
+}
 export default class ComponentResourceManager {
-    constructor(componentId: any, systemEventEmitter: any, isStaticEntryModule: any);
-    componentId: any;
-    systemEventEmitter: any;
-    isStaticEntryModule: any;
-    counters: {
-        pending: Counter;
-    };
+    componentId: string;
+    systemEventEmitter: DefaultEventEmitter;
+    isStaticEntryModule: boolean;
+    counters: ResourceCountersI;
+    constructor(componentId: string, systemEventEmitter: DefaultEventEmitter, isStaticEntryModule: boolean);
     getPending: () => Counter;
-    onCounterStateUpdate: (count: any) => void;
-    onResourceLoadFailure: (src: any) => void;
+    onCounterStateUpdate: (count: number) => void;
+    onResourceLoadFailure: (src: string) => void;
 }
-import Counter from "./Counter";

package/resource-management/Counter.d.ts

@@ -1,7 +1,8 @@
+export type CounterUpdateCallbackT = (count: number) => void;
 export default class Counter {
-    constructor(onUpdateCb: any);
     _count: number;
-    onUpdateCb: any;
+    onUpdateCb: CounterUpdateCallbackT;
+    constructor(onUpdateCb: CounterUpdateCallbackT);
     increment(): void;
     decrement(): void;
     count(): number;

package/resource-management/ViewResourcesManager.d.ts

@@ -1,7 +1,7 @@
 export default class ViewResourcesManager {
-    constructor(systemEventEmitter: any);
     systemEventEmitter: any;
-    componentResourcesMap: Map<any, any>;
+    componentResourcesMap: any;
+    constructor(systemEventEmitter: any);
     registerComponent(id: any, componentResourceManager: any): void;
     _onComponentResourcesLoaded: (componentId: any) => void;
     viewHasPendingResources(): boolean;

package/sdk/ColorUtils.d.ts

@@ -1,7 +1,7 @@
-export function changeAlpha(color: any, value: any): any;
-export function getAlpha(color: any): any;
-export function lighten(color: any, value: any): any;
-export function darken(color: any, value: any): any;
-export function getContrastRatio(color1: any, color2: any): number;
-export const whiteColor: "rgb(255, 255, 255)";
-export const blackColor: "rgb(0, 0, 0)";
+export declare const whiteColor = "rgb(255, 255, 255)";
+export declare const blackColor = "rgb(0, 0, 0)";
+export declare function changeAlpha(color: string, value: number): string;
+export declare function getAlpha(color: string): number;
+export declare function lighten(color: string, value: number): string;
+export declare function darken(color: string, value: number): string;
+export declare function getContrastRatio(color1: string, color2: string): number;

package/sdk/ComponentType.d.ts

@@ -1,10 +1,10 @@
+declare const ComponentType: {
+    CONTAINER: string;
+    TEXT: string;
+    INPUT: string;
+    BUTTON: string;
+    IMAGE: string;
+    VIDEO: string;
+    COLUMN: string;
+};
 export default ComponentType;
-declare namespace ComponentType {
-    const CONTAINER: string;
-    const TEXT: string;
-    const INPUT: string;
-    const BUTTON: string;
-    const IMAGE: string;
-    const VIDEO: string;
-    const COLUMN: string;
-}

package/sdk/FormUtils.d.ts

@@ -1,3 +1,3 @@
-export function setValidStyles(inputElement: any, tooltipElement: any): void;
-export function setInvalidStyle(inputElement: any, tooltipElement: any, error: any, htmlDocumentObject: any): void;
-export function setPendingStyle(inputElement: any, tooltipElement: any): void;
+export declare function setValidStyles(inputElement: HTMLElement, tooltipElement: HTMLElement | null): void;
+export declare function setInvalidStyle(inputElement: HTMLElement, tooltipElement: HTMLElement | null, error: string, htmlDocumentObject?: Document): void;
+export declare function setPendingStyle(inputElement: HTMLElement, tooltipElement: HTMLElement | null): void;

package/sdk/FormUtils.js

@@ -1 +1 @@
-import{addTooltipStyles,createTooltipText,removeTooltipStyles,setTooltipPosition}from"./TooltipUtils";export function setValidStyles(t,i){t.classList.remove("invalid"),i.style.visibility="hidden"}export function setInvalidStyle(t,i,e,o){let l;o=o||document,t.classList.add("invalid"),i.style.visibility="visible";i.onmouseenter=()=>{addTooltipStyles(o),l=createTooltipText(e),o.body.append(l),l.style.visibility="visible",setTooltipPosition({triggerElement:i,tooltipElement:l,htmlDocumentObject:o})},i.onmouseleave=()=>{l&&(l.remove(),removeTooltipStyles(o))}}export function setPendingStyle(t,i){i.style.visibility="hidden",t.classList.contains("invalid")&&t.classList.remove("invalid")}
+import{addTooltipStyles,createTooltipText,removeTooltipStyles,setTooltipPosition}from"./TooltipUtils";export function setValidStyles(t,i){t.classList.remove("invalid"),i&&(i.style.visibility="hidden")}export function setInvalidStyle(t,i,e,o){o=o||document;let l=null;t.classList.add("invalid"),i&&(i.style.visibility="visible");const s=()=>{addTooltipStyles(o),l=createTooltipText(e),o.body.append(l),l.style.visibility="visible",setTooltipPosition({triggerElement:i,tooltipElement:l,htmlDocumentObject:o})},n=()=>{l&&(l.remove(),removeTooltipStyles(o))};i&&(i.onmouseenter=s,i.onmouseleave=n)}export function setPendingStyle(t,i){i&&(i.style.visibility="hidden"),t.classList.contains("invalid")&&t.classList.remove("invalid")}

package/sdk/HtmlStyleUtils.d.ts

@@ -1,7 +1,27 @@
-export function setStylesToElement(element: any, style: any): void;
-export function getStylesFromElement(element: any, properties: any): any;
-export function getLabelParamsFromProps(props: any, env: any): any;
-export function applyInputLabelStyles(props: any, env: any, rootElement: any, selector: any): void;
-export function resizeElementTextToFitContainer(params: any, ...args: any[]): void;
-export function setInputHostSize(props: any, env: any, hostElement: any, inputElement: any, labelElement: any): void;
-export function setFocusOutline(element: any, elementToApplyVariable: any): any;
+import { PlatformEnvT } from './WcElement';
+import { ClBaseComponentPropsI } from '@claspo/common/document/Document.interface';
+export interface LabelParamsI {
+    enabled?: boolean;
+    position?: 'TOP' | 'LEFT';
+    margin?: number;
+}
+export interface PaddingsI {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+}
+export interface ResizeTextParamsI {
+    childElement: HTMLElement;
+    parentElement: HTMLElement;
+    paddings?: PaddingsI;
+    allowMultiline?: boolean;
+}
+export declare function setStylesToElement(element: HTMLElement, style: Record<string, string>): void;
+export declare function getStylesFromElement(element: HTMLElement, properties: string[]): Record<string, string>;
+export declare function getLabelParamsFromProps(props: ClBaseComponentPropsI, env: PlatformEnvT): LabelParamsI | undefined;
+export declare function applyInputLabelStyles(props: ClBaseComponentPropsI, env: PlatformEnvT, rootElement: Element | ShadowRoot, selector: string): void;
+export declare function resizeElementTextToFitContainer(params: ResizeTextParamsI): void;
+export declare function resizeElementTextToFitContainer(childElement: HTMLElement, parentElement: HTMLElement, paddings?: PaddingsI): void;
+export declare function setInputHostSize(props: ClBaseComponentPropsI, env: PlatformEnvT, hostElement: HTMLElement, inputElement: HTMLElement, labelElement: HTMLElement | null): void;
+export declare function setFocusOutline(element: HTMLElement | null, elementToApplyVariable?: HTMLElement): string | null;

package/sdk/HtmlStyleUtils.js

@@ -1 +1 @@
-import{changeAlpha}from"./ColorUtils";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export function setStylesToElement(t,e){Object.keys(e).forEach(l=>{t.style[l]=e[l]})}export function getStylesFromElement(t,e){const l=window.getComputedStyle(t);return e.reduce((t,e)=>(t[e]=l.getPropertyValue(e),t),{})}export function getLabelParamsFromProps(t,e){var l,o;let n;return t.styles&&(n=null===(l=t.styles.find(t=>"label"===t.element))||void 0===l?void 0:l.params),t.adaptiveStyles&&!n&&(n=null===(o=t.adaptiveStyles[e].find(t=>"label"===t.element))||void 0===o?void 0:o.params),n}export function applyInputLabelStyles(t,e,l,o){const n=l.querySelector(o),i=getLabelParamsFromProps(t,e);if(!i)return;const r=l.querySelector(".label");insertHtmlIntoElement({element:r,html:t.content.label}),"TOP"===i.position?(n.style.flexDirection="column",n.style.alignItems="unset",setStylesToElement(r,{marginRight:0,marginBottom:`${i.margin}px`})):(n.style.flexDirection="row",n.style.alignItems="center",setStylesToElement(r,{marginRight:`${i.margin}px`,marginBottom:0})),i.enabled?r.style.display="":r.style.display="none"}export function resizeElementTextToFitContainer(t){let e,l,o,n;1===arguments.length?(e=t.childElement,l=t.parentElement,o=t.paddings,n=t.allowMultiline):(e=arguments[0],l=arguments[1],o=arguments[2]);if(n){let t=120,n=!1;for(;!n&&t>12;)t--,e.style.fontSize=`${t}px`,e.style.lineHeight=`${t}px`,n=checkIfTextFitting(e,l,o);return}let i=12,r=!1;for(;!r&&i<120;)i++,e.style.fontSize=`${i}px`,e.style.lineHeight=`${i}px`,r=getIsOverflown(e,l,o);r&&(i--,e.style.fontSize=`${i}px`,e.style.lineHeight=`${i}px`)}function checkIfTextFitting(t,e,{top:l=0,right:o=0,bottom:n=0,left:i=0}={top:0,right:0,bottom:0,left:0}){return t.offsetWidth<=e.clientWidth-(i+o)&&t.offsetHeight<=e.clientHeight-(l+n)}function getIsOverflown(t,e,{top:l=0,right:o=0,bottom:n=0,left:i=0}={top:0,right:0,bottom:0,left:0}){return t.offsetWidth>e.clientWidth-(i+o)||t.offsetHeight>e.clientHeight-(l+n)}function getInputStylesWithSizeFromProps(t,e){var l;let o;if(t.styles){const e=null===(l=t.styles.find(t=>"input"===t.element))||void 0===l?void 0:l.styleAttributes;(null==e?void 0:e.width)&&(o=e)}if(t.adaptiveStyles&&!o){const l=t.adaptiveStyles[e].find(t=>"input"===t.element).styleAttributes;(null==l?void 0:l.width)&&(o=l)}return o}export function setInputHostSize(t,e,l,o,n){const i=getInputStylesWithSizeFromProps(t,e);if(!i)return;const r=getLabelParamsFromProps(t,e),s=n&&r&&r.enabled&&"TOP"===r.position?n.getBoundingClientRect().height+r.margin:0;i.width&&(i.width.includes("100%")?(o.style.width="100%",l.style.width=i.width):l.style.width="auto"),i.height&&(i.height.includes("100%")?(o.style.height="100%",l.style.height=i.height):l.style.height=`${parseFloat(i.height)+s}px`)}export function setFocusOutline(t,e){let l;const o=e||t,n=["transparent","initial"];if(t)return t.style.borderColor&&!n.includes(t.style.borderColor)&&(parseFloat(t.style.borderWidth)||parseFloat(t.style.borderBottomWidth))&&(l=setElementOutlineData(o,t,"borderColor")),!l&&t.style.getPropertyValue("--borderBottomColor")&&!n.includes(t.style.getPropertyValue("--borderBottomColor"))&&parseFloat(t.style.getPropertyValue("--borderBottomWidth"))&&(l=setElementOutlineData(o,t,"--borderBottomColor")),l||!t.style.backgroundColor||n.includes(t.style.backgroundColor)||(l=setElementOutlineData(o,t,"backgroundColor")),l||!t.style.color||n.includes(t.style.color)||(l=setElementOutlineData(o,t,"color")),l||(o.classList.remove("focus-outline-defined"),null)}function setElementOutlineData(t,e,l){const o=parseColorValue(e,l);if(o){const e=changeAlpha(o,.5);return t.classList.add("focus-outline-defined"),t.style.setProperty("--clFocusOutline",`3px solid ${e}`),e}return null}function parseColorValue(t,e){const l=getComputedStyle(t)[e]||t.style.getPropertyValue(e);if(l&&l.includes("rgb")&&(!(l.split("rgb").length>2)||l.includes("#")))return l}
+import{changeAlpha}from"./ColorUtils";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export function setStylesToElement(t,e){Object.keys(e).forEach(l=>{t.style[l]=e[l]})}export function getStylesFromElement(t,e){const l=window.getComputedStyle(t);return e.reduce((t,e)=>(t[e]=l.getPropertyValue(e),t),{})}export function getLabelParamsFromProps(t,e){var l,o;let n;return t.styles&&(n=null===(l=t.styles.find(t=>"label"===t.element))||void 0===l?void 0:l.params),t.adaptiveStyles&&!n&&(n=null===(o=t.adaptiveStyles[e].find(t=>"label"===t.element))||void 0===o?void 0:o.params),n}export function applyInputLabelStyles(t,e,l,o){var n;const i=l.querySelector(o),r=getLabelParamsFromProps(t,e);if(!r)return;const s=l.querySelector(".label");s&&(insertHtmlIntoElement({element:s,html:(null===(n=t.content)||void 0===n?void 0:n.label)||""}),"TOP"===r.position?(i.style.flexDirection="column",i.style.alignItems="unset",setStylesToElement(s,{marginRight:"0",marginBottom:`${r.margin}px`})):(i.style.flexDirection="row",i.style.alignItems="center",setStylesToElement(s,{marginRight:`${r.margin}px`,marginBottom:"0"})),r.enabled?s.style.display="":s.style.display="none")}export function resizeElementTextToFitContainer(t,e,l){let o,n,i,r;if(1===arguments.length&&"object"==typeof t&&"childElement"in t){const e=t;o=e.childElement,n=e.parentElement,i=e.paddings,r=e.allowMultiline}else o=t,n=e,i=l;if(r){let t=120,e=!1;for(;!e&&t>12;)t--,o.style.fontSize=`${t}px`,o.style.lineHeight=`${t}px`,e=checkIfTextFitting(o,n,i);return}let s=12,a=!1;for(;!a&&s<120;)s++,o.style.fontSize=`${s}px`,o.style.lineHeight=`${s}px`,a=getIsOverflown(o,n,i);a&&(s--,o.style.fontSize=`${s}px`,o.style.lineHeight=`${s}px`)}function checkIfTextFitting(t,e,{top:l=0,right:o=0,bottom:n=0,left:i=0}={top:0,right:0,bottom:0,left:0}){return t.offsetWidth<=e.clientWidth-(i+o)&&t.offsetHeight<=e.clientHeight-(l+n)}function getIsOverflown(t,e,{top:l=0,right:o=0,bottom:n=0,left:i=0}={top:0,right:0,bottom:0,left:0}){return t.offsetWidth>e.clientWidth-(i+o)||t.offsetHeight>e.clientHeight-(l+n)}function getInputStylesWithSizeFromProps(t,e){var l;let o;if(t.styles){const e=null===(l=t.styles.find(t=>"input"===t.element))||void 0===l?void 0:l.styleAttributes;(null==e?void 0:e.width)&&(o=e)}if(t.adaptiveStyles&&!o){const l=t.adaptiveStyles[e].find(t=>"input"===t.element),n=null==l?void 0:l.styleAttributes;(null==n?void 0:n.width)&&(o=n)}return o}export function setInputHostSize(t,e,l,o,n){const i=getInputStylesWithSizeFromProps(t,e);if(!i)return;const r=getLabelParamsFromProps(t,e),s=n&&r&&r.enabled&&"TOP"===r.position?n.getBoundingClientRect().height+(r.margin||0):0;i.width&&(i.width.includes("100%")?(o.style.width="100%",l.style.width=i.width):l.style.width="auto"),i.height&&(i.height.includes("100%")?(o.style.height="100%",l.style.height=i.height):l.style.height=`${parseFloat(i.height)+s}px`)}export function setFocusOutline(t,e){let l=null;const o=e||t,n=["transparent","initial"];return t?(t.style.borderColor&&!n.includes(t.style.borderColor)&&(parseFloat(t.style.borderWidth)||parseFloat(t.style.borderBottomWidth))&&(l=setElementOutlineData(o,t,"borderColor")),!l&&t.style.getPropertyValue("--borderBottomColor")&&!n.includes(t.style.getPropertyValue("--borderBottomColor"))&&parseFloat(t.style.getPropertyValue("--borderBottomWidth"))&&(l=setElementOutlineData(o,t,"--borderBottomColor")),l||!t.style.backgroundColor||n.includes(t.style.backgroundColor)||(l=setElementOutlineData(o,t,"backgroundColor")),l||!t.style.color||n.includes(t.style.color)||(l=setElementOutlineData(o,t,"color")),l||(o.classList.remove("focus-outline-defined"),null)):null}function setElementOutlineData(t,e,l){const o=parseColorValue(e,l);if(o){const e=changeAlpha(o,.5);return t.classList.add("focus-outline-defined"),t.style.setProperty("--clFocusOutline",`3px solid ${e}`),e}return null}function parseColorValue(t,e){const l=getComputedStyle(t)[e]||t.style.getPropertyValue(e);if(l&&l.includes("rgb")&&(!(l.split("rgb").length>2)||l.includes("#")))return l}

package/sdk/ModelStyleUtils.d.ts

@@ -1,9 +1,11 @@
-export function getAdaptiveStylesForPlatform(adaptiveStyles: any, platform: any, element: any): any;
-export function cloneAdaptiveStyles(adaptiveStyles?: any[]): any[];
-export function replaceStyleAttributes(adaptiveStyles: any, platform: any, element: any, styles?: {}): any;
-export function patchStyleAttributes(adaptiveStyles: any, platform: any, element: any, styles?: {}): any;
-export function cloneToAllPlatforms(value: any): {
-    [x: string]: never[];
-};
-export function applySharedClasses(elementModel: any, shared: any): any;
-export function getPlaceholderColor(props: any, env: any, shared: any): any;
+import { PlatformEnvT } from './WcElement';
+import { BaseComponentAdaptiveStylesI, ClBaseComponentElementParamsI, ClComponentStyleAttributesI, ClDocumentSharedI } from '@claspo/common/document/Document.interface';
+export declare function getAdaptiveStylesForPlatform(adaptiveStyles: BaseComponentAdaptiveStylesI | undefined, platform: PlatformEnvT, element: string): ClBaseComponentElementParamsI | undefined;
+export declare function cloneAdaptiveStyles(adaptiveStyles?: ClBaseComponentElementParamsI[]): ClBaseComponentElementParamsI[];
+export declare function replaceStyleAttributes(adaptiveStyles: BaseComponentAdaptiveStylesI, platform: PlatformEnvT, element: string, styles?: ClComponentStyleAttributesI): BaseComponentAdaptiveStylesI;
+export declare function patchStyleAttributes(adaptiveStyles: BaseComponentAdaptiveStylesI, platform: PlatformEnvT, element: string, styles?: ClComponentStyleAttributesI): BaseComponentAdaptiveStylesI;
+export declare function cloneToAllPlatforms(value: ClBaseComponentElementParamsI[]): BaseComponentAdaptiveStylesI;
+export declare function applySharedClasses(elementModel: ClBaseComponentElementParamsI, shared: ClDocumentSharedI): ClBaseComponentElementParamsI;
+export declare function getPlaceholderColor(props: {
+    adaptiveStyles: BaseComponentAdaptiveStylesI;
+}, env: PlatformEnvT, shared: ClDocumentSharedI): string;

package/sdk/ModelStyleUtils.js

@@ -1 +1 @@
-import{PLATFORMS}from"../wc-renderer/utils/platforms";import{RenderConstants}from"../renderer/RenderConstants";export function getAdaptiveStylesForPlatform(t,e,s){var i;return null===(i=t[e])||void 0===i?void 0:i.find(t=>t.element===s)}export function cloneAdaptiveStyles(t=[]){return t.map(t=>Object.assign(Object.assign({},t),{styleAttributes:Object.assign({},t.styleAttributes)}))}export function replaceStyleAttributes(t,e,s,i={}){return Object.assign(Object.assign({},t),{[e]:t[e].map(t=>t.element===s?Object.assign(Object.assign({},t),{styleAttributes:Object.assign({},i)}):t)})}export function patchStyleAttributes(t,e,s,i={}){return Object.assign(Object.assign({},t),{[e]:t[e].map(t=>t.element===s?Object.assign(Object.assign({},t),{styleAttributes:Object.assign(Object.assign({},t.styleAttributes),i)}):t)})}export function cloneToAllPlatforms(t){return Object.values(PLATFORMS).reduce((e,s)=>Object.assign(e,{[s]:cloneAdaptiveStyles(t)}),{[PLATFORMS.DESKTOP]:[],[PLATFORMS.MOBILE]:[]})}export function applySharedClasses(t,e){let s=t;return(s.classes||"").split(" ").filter(t=>t.startsWith(RenderConstants.SYSTEM_CLASS_PREFIX)).forEach(t=>{var i;let l=null===(i=e.textClasses)||void 0===i?void 0:i[t];l&&(l.styleAttributes.fontFamily||(l.isHeader&&e.headerFontFamily&&(l=Object.assign(Object.assign({},l),{styleAttributes:Object.assign(Object.assign({},l.styleAttributes),{fontFamily:e.headerFontFamily})})),!l.isHeader&&e.textFontFamily&&(l=Object.assign(Object.assign({},l),{styleAttributes:Object.assign(Object.assign({},l.styleAttributes),{fontFamily:e.textFontFamily})}))),s=Object.assign(Object.assign({},s),{styleAttributes:Object.assign(Object.assign({},s.styleAttributes),l.styleAttributes),placeholderStyleAttributes:Object.assign(Object.assign({},s.placeholderStyleAttributes),l.placeholderStyleAttributes)}))}),s.styleAttributes.fontFamily||(s=Object.assign(Object.assign({},s),{styleAttributes:Object.assign(Object.assign({},s.styleAttributes),{fontFamily:e.textFontFamily})})),s}export function getPlaceholderColor(t,e,s){let i="rgb(0, 0, 0)";const l=t.adaptiveStyles[e].find(t=>"input"===t.element);if(l.placeholderStyleAttributes&&l.placeholderStyleAttributes.color)return l.placeholderStyleAttributes.color;const r=(l.classes||"").split(" ").filter(t=>t.startsWith(RenderConstants.SYSTEM_CLASS_PREFIX));if(!r.length)return i;let n=s.textClasses[r[0]];return n&&n.placeholderStyleAttributes&&n.placeholderStyleAttributes.color?n.placeholderStyleAttributes.color:i}
+import{PLATFORMS}from"../wc-renderer/utils/platforms";import{RenderConstants}from"../renderer/RenderConstants";export function getAdaptiveStylesForPlatform(t,e,s){var i;return null===(i=null==t?void 0:t[e])||void 0===i?void 0:i.find(t=>t.element===s)}export function cloneAdaptiveStyles(t=[]){return t.map(t=>Object.assign(Object.assign({},t),{styleAttributes:Object.assign({},t.styleAttributes)}))}export function replaceStyleAttributes(t,e,s,i={}){return Object.assign(Object.assign({},t),{[e]:t[e].map(t=>t.element===s?Object.assign(Object.assign({},t),{styleAttributes:Object.assign({},i)}):t)})}export function patchStyleAttributes(t,e,s,i={}){return Object.assign(Object.assign({},t),{[e]:t[e].map(t=>t.element===s?Object.assign(Object.assign({},t),{styleAttributes:Object.assign(Object.assign({},t.styleAttributes),i)}):t)})}export function cloneToAllPlatforms(t){return Object.values(PLATFORMS).reduce((e,s)=>Object.assign(e,{[s]:cloneAdaptiveStyles(t)}),{desktop:[],mobile:[]})}export function applySharedClasses(t,e){let s=t;return(s.classes||"").split(" ").filter(t=>t.startsWith(RenderConstants.SYSTEM_CLASS_PREFIX)).forEach(t=>{var i;let l=null===(i=e.textClasses)||void 0===i?void 0:i[t];l&&(l.styleAttributes.fontFamily||(l.isHeader&&e.headerFontFamily&&(l=Object.assign(Object.assign({},l),{styleAttributes:Object.assign(Object.assign({},l.styleAttributes),{fontFamily:e.headerFontFamily})})),!l.isHeader&&e.textFontFamily&&(l=Object.assign(Object.assign({},l),{styleAttributes:Object.assign(Object.assign({},l.styleAttributes),{fontFamily:e.textFontFamily})}))),s=Object.assign(Object.assign({},s),{styleAttributes:Object.assign(Object.assign({},s.styleAttributes),l.styleAttributes),placeholderStyleAttributes:Object.assign(Object.assign({},s.placeholderStyleAttributes),l.placeholderStyleAttributes)}))}),s.styleAttributes.fontFamily||(s=Object.assign(Object.assign({},s),{styleAttributes:Object.assign(Object.assign({},s.styleAttributes),{fontFamily:e.textFontFamily})})),s}export function getPlaceholderColor(t,e,s){var i;let l="rgb(0, 0, 0)";const r=t.adaptiveStyles[e].find(t=>"input"===t.element);if(!r)return l;if(r.placeholderStyleAttributes&&r.placeholderStyleAttributes.color)return r.placeholderStyleAttributes.color;const n=(r.classes||"").split(" ").filter(t=>t.startsWith(RenderConstants.SYSTEM_CLASS_PREFIX));if(!n.length)return l;let a=null===(i=s.textClasses)||void 0===i?void 0:i[n[0]];return a&&a.placeholderStyleAttributes&&a.placeholderStyleAttributes.color?a.placeholderStyleAttributes.color:l}

package/sdk/OverlayUtils.d.ts

@@ -1,28 +1,44 @@
-export function getMenuOverlayContentClassName(): string;
-export function createBackdrop(isBackdropDisabledOnUI: any): HTMLDivElement;
-export function createMenuOverlay(params: any): {
-    backdrop: HTMLDivElement;
-    overlay: HTMLDivElement;
-};
-export function getOverlayMenuPlacementData(triggerElement: any, overlayContent: any, offset: any, positionByDefault: any, isHorizontallyCentered: any, htmlDocumentObject: any): {
-    coordinates: {
-        left: string;
-        top: string;
-        bottom?: undefined;
-        right?: undefined;
-    } | {
-        left: string;
-        bottom: string;
-        top?: undefined;
-        right?: undefined;
-    } | {
-        right: string;
-        top: string;
-        left?: undefined;
-        bottom?: undefined;
-    } | undefined;
-    position: string;
-};
-export function getOverlayBackgroundColor(backgroundColor: any, textColor: any): any;
-export function getOverlayBorderRadius(triggerHeight: any, overlayStyles: any): number;
-export function getMenuItemHoverColor(backgroundColor: any): any;
+export type OverlayPositionT = 'top' | 'bottom' | 'left' | 'right' | 'undefined';
+export interface MenuOverlayParamsI {
+    triggerElement: HTMLElement;
+    overlayStyles: string;
+    createOverlayContent: (backdrop: HTMLElement, overlayContent: HTMLElement) => void;
+    overlayWidth?: number;
+    overlayHeight?: number;
+    offset?: number;
+    onDestroy?: () => void;
+    positionByDefault?: OverlayPositionT;
+    isHorizontallyCentered?: boolean;
+    isBackdropDisabledOnUI?: boolean;
+    htmlDocumentObject?: Document;
+}
+export interface MenuOverlayResultI {
+    backdrop: HTMLElement;
+    overlay: HTMLElement;
+}
+export interface OverlayPlacementDataI {
+    coordinates: Record<string, string>;
+    position: OverlayPositionT;
+}
+export interface HorizontalOffsetDataI {
+    horizontalOffset: number;
+    contentWidth: number;
+    availableSpaceToTheLeftSideOfTheTrigger: number;
+    availableSpaceToTheRightSideOfTheTrigger: number;
+}
+export interface VerticalOffsetDataI {
+    verticalOffset: number;
+    contentHeight: number;
+    availableSpaceAboveTriggerElem: number;
+    availableSpaceBelowTriggerElem: number;
+}
+export interface OverlayPositionDataI extends HorizontalOffsetDataI, VerticalOffsetDataI {
+    position: OverlayPositionT;
+}
+export declare function getMenuOverlayContentClassName(): string;
+export declare function createBackdrop(isBackdropDisabledOnUI?: boolean): HTMLDivElement;
+export declare function createMenuOverlay(params: MenuOverlayParamsI): MenuOverlayResultI;
+export declare function getOverlayMenuPlacementData(triggerElement: HTMLElement, overlayContent: HTMLElement, offset: number, positionByDefault?: OverlayPositionT, isHorizontallyCentered?: boolean, htmlDocumentObject?: Document): OverlayPlacementDataI;
+export declare function getOverlayBackgroundColor(backgroundColor: string, textColor: string): string;
+export declare function getOverlayBorderRadius(triggerHeight: string | number, overlayStyles: CSSStyleDeclaration): number;
+export declare function getMenuItemHoverColor(backgroundColor: string): string;

package/sdk/OverlayUtils.js

@@ -1 +1 @@
-import{applySysClassPrefix}from"../renderer/RenderConstants";import ViewportSize from"@claspo/common/dom/ViewportSize";import nullishCoalescingOperator from"@claspo/common/utils/NullishCoalescingOperator";import{blackColor,changeAlpha,darken,getAlpha,getContrastRatio,lighten,whiteColor}from"./ColorUtils";import{setStylesToElement}from"./HtmlStyleUtils";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export function getMenuOverlayContentClassName(){return applySysClassPrefix("overlay-menu-content")}export function createBackdrop(e){const t=document.createElement("div");return t.style.position="fixed",t.style.zIndex=String(Number.MAX_SAFE_INTEGER-1),t.style.top="0",t.style.left="0",t.style.width=e?"0px":"100%",t.style.height=e?"0px":"100%",t}export function createMenuOverlay(e){const{triggerElement:t,overlayStyles:o,createOverlayContent:i,overlayWidth:n,overlayHeight:r,offset:a,onDestroy:l,positionByDefault:s,isHorizontallyCentered:g,isBackdropDisabledOnUI:p}=e,c=e.htmlDocumentObject||document,m=createBackdrop(p),h=document.createElement("div");h.style.position="fixed",h.style.display="block",h.style.zIndex=String(Number.MAX_SAFE_INTEGER),n&&(h.style.width=`${n}px`),r&&(h.style.height=`${r}px`);const d=h.attachShadow({mode:"open"}),u=document.createElement("style");insertHtmlIntoElement({element:u,html:o}),d.append(u);const f=document.createElement("div");f.classList.add(getMenuOverlayContentClassName()),c.body.append(m),c.body.append(h),d.append(f),i(m,f);(()=>{const e=getOverlayMenuPlacementData(t,f,nullishCoalescingOperator(a,5),s,g,c);setPositionAttr(f,e.position),setStylesToElement(h,e.coordinates)})(),h.addEventListener("click",e=>{e.stopPropagation(),e.preventDefault()});const v=e=>{m.remove(),h.remove(),l&&l(),window.removeEventListener("keyup",e,!0)},T=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),v(T))};return m.addEventListener("click",()=>v(T)),window.addEventListener("keyup",T,!0),{backdrop:m,overlay:h}}export function getOverlayMenuPlacementData(e,t,o,i,n,r){const a=calcOverlayMenuPosition(e,t,o,i,r=r||document);return updateOverlayContentMargins(a,t),{coordinates:getOverlayMenuPosition(a,e.getBoundingClientRect(),t.getBoundingClientRect(),n,r),position:a.position}}function calcOverlayMenuPosition(e,t,o,i,n){const r=getOverlayMenuHorizontalOffset(e,t,o,n),a=getOverlayMenuVerticalOffset(e,t,o,n);let l="undefined";const s={bottom:a.availableSpaceBelowTriggerElem>=a.contentHeight,top:a.availableSpaceAboveTriggerElem>=a.contentHeight,right:r.availableSpaceToTheRightSideOfTheTrigger>=r.contentWidth,left:r.availableSpaceToTheLeftSideOfTheTrigger>=r.contentWidth};if(s.top?l="top":s.bottom?l="bottom":s.right?l="right":s.left&&(l="left"),s[i]&&(l=i),"undefined"===l){const e=Math.max(a.availableSpaceBelowTriggerElem,a.availableSpaceAboveTriggerElem,r.availableSpaceToTheRightSideOfTheTrigger,r.availableSpaceToTheLeftSideOfTheTrigger);e===a.availableSpaceBelowTriggerElem?l="bottom":e===a.availableSpaceAboveTriggerElem?l="top":e===r.availableSpaceToTheRightSideOfTheTrigger?l="right":e===r.availableSpaceToTheLeftSideOfTheTrigger&&(l="left")}return Object.assign(Object.assign(Object.assign({},a),r),{position:l})}function getOverlayMenuHorizontalOffset(e,t,o,i){const n=ViewportSize.width(i),{right:r}=e.getBoundingClientRect(),a=n-o-r-ViewportSize.scrollbarWidth(i);return{horizontalOffset:o,contentWidth:getOverlayMenuDimensions(t).width,availableSpaceToTheLeftSideOfTheTrigger:r-o,availableSpaceToTheRightSideOfTheTrigger:a}}function getOverlayMenuDimensions(e){const{width:t,height:o}=e.getBoundingClientRect(),{marginBottom:i,marginTop:n,marginLeft:r,marginRight:a}=window.getComputedStyle(e);return{width:t+parseInt(r,10)+parseInt(a,10),height:o+parseInt(n,10)+parseInt(i,10)}}function getOverlayMenuVerticalOffset(e,t,o,i){const n=ViewportSize.height(i),{top:r,bottom:a}=e.getBoundingClientRect();return{verticalOffset:o,contentHeight:getOverlayMenuDimensions(t).height,availableSpaceAboveTriggerElem:r-o,availableSpaceBelowTriggerElem:n-a-o}}function getOverlayMenuPosition(e,t,o,i,n){switch(e.position){case"top":return{left:`${getLeftPositionTBForOverlayMenu(t,o,i,n)}px`,top:e.availableSpaceAboveTriggerElem-e.contentHeight-e.verticalOffset+"px"};case"bottom":return{left:`${getLeftPositionTBForOverlayMenu(t,o,i,n)}px`,bottom:e.availableSpaceBelowTriggerElem-e.contentHeight-e.verticalOffset+"px"};case"left":return{left:e.availableSpaceToTheLeftSideOfTheTrigger-t.width-e.contentWidth-e.horizontalOffset+"px",top:`${getTopPositionLRForOverlayMenu(t,e)}px`};case"right":return{right:e.availableSpaceToTheRightSideOfTheTrigger-e.contentWidth-e.horizontalOffset+"px",top:`${getTopPositionLRForOverlayMenu(t,e)}px`}}}function getLeftPositionTBForOverlayMenu(e,t,o,i){let n=o?e.x+e.width/2-t.width/2:e.x;return n<0&&(n=0),n+t.width>ViewportSize.width(i)&&(n-=n+t.width-ViewportSize.width(i)),n}function getTopPositionLRForOverlayMenu(e,t){let o=t.availableSpaceAboveTriggerElem;return t.contentHeight>t.availableSpaceBelowTriggerElem&&(o-=t.contentHeight-t.availableSpaceBelowTriggerElem),o}function setPositionAttr(e,t){e.setAttribute("cl-overlay-position",t)}export function getOverlayBackgroundColor(e,t){if(e.startsWith("transparent")||e.startsWith("none")||!e.startsWith("rgb")||1!==getAlpha(e.slice(0,e.match(/\)/).index+1))){return getContrastRatio(t,whiteColor)>getContrastRatio(t,blackColor)?whiteColor:blackColor}return e}export function getOverlayBorderRadius(e,t){return Math.min(Math.floor(parseInt(e)/2),parseInt(t["border-top-left-radius"]),parseInt(t["border-top-right-radius"]),parseInt(t["border-bottom-left-radius"]),parseInt(t["border-bottom-right-radius"]))}export function getMenuItemHoverColor(e){const t=getContrastRatio(e,whiteColor),o=getContrastRatio(e,blackColor);let i,n;if(t>o)for(i=whiteColor,n=t;n>5;)i=darken(i,.1),n=getContrastRatio(e,i);else for(i="rgb(10, 10, 10)",n=o;n>5;)i=lighten(i,.1),n=getContrastRatio(e,i);return changeAlpha(i,.2)}function updateOverlayContentMargins(e,t){const{marginBottom:o,marginTop:i}=window.getComputedStyle(t);if("top"===e.position)setStylesToElement(t,{"margin-top":`${parseInt(i,10)+parseInt(o,10)}px`}),setStylesToElement(t,{"margin-bottom":"0px"});else if("bottom"===e.position)setStylesToElement(t,{"margin-bottom":`${parseInt(o,10)+parseInt(i,10)}px`}),setStylesToElement(t,{"margin-top":"0px"});else{const e=(parseInt(o,10)+parseInt(i,10))/2+"px";setStylesToElement(t,{"margin-top":e,"margin-bottom":e})}}
+import{applySysClassPrefix}from"../renderer/RenderConstants";import ViewportSize from"@claspo/common/dom/ViewportSize";import nullishCoalescingOperator from"@claspo/common/utils/NullishCoalescingOperator";import{blackColor,changeAlpha,darken,getAlpha,getContrastRatio,lighten,whiteColor}from"./ColorUtils";import{setStylesToElement}from"./HtmlStyleUtils";import insertHtmlIntoElement from"@claspo/common/dom/insertHtmlIntoElement";export function getMenuOverlayContentClassName(){return applySysClassPrefix("overlay-menu-content")}export function createBackdrop(e){const t=document.createElement("div");return t.style.position="fixed",t.style.zIndex=String(Number.MAX_SAFE_INTEGER-1),t.style.top="0",t.style.left="0",t.style.width=e?"0px":"100%",t.style.height=e?"0px":"100%",t}export function createMenuOverlay(e){const{triggerElement:t,overlayStyles:o,createOverlayContent:i,overlayWidth:n,overlayHeight:r,offset:a,onDestroy:l,positionByDefault:s,isHorizontallyCentered:g,isBackdropDisabledOnUI:p}=e,c=e.htmlDocumentObject||document,m=createBackdrop(p),h=document.createElement("div");h.style.position="fixed",h.style.display="block",h.style.zIndex=String(Number.MAX_SAFE_INTEGER),n&&(h.style.width=`${n}px`),r&&(h.style.height=`${r}px`);const d=h.attachShadow({mode:"open"}),u=document.createElement("style");insertHtmlIntoElement({element:u,html:o}),d.append(u);const f=document.createElement("div");f.classList.add(getMenuOverlayContentClassName()),c.body.append(m),c.body.append(h),d.append(f),i(m,f);(()=>{const e=getOverlayMenuPlacementData(t,f,nullishCoalescingOperator(a,5),s,g,c);setPositionAttr(f,e.position),setStylesToElement(h,e.coordinates)})(),h.addEventListener("click",e=>{e.stopPropagation(),e.preventDefault()});const v=e=>{m.remove(),h.remove(),l&&l(),window.removeEventListener("keyup",e,!0)},T=e=>{"Escape"===e.key&&(e.preventDefault(),e.stopImmediatePropagation(),v(T))};return m.addEventListener("click",()=>v(T)),window.addEventListener("keyup",T,!0),{backdrop:m,overlay:h}}export function getOverlayMenuPlacementData(e,t,o,i,n,r){const a=calcOverlayMenuPosition(e,t,o,i,r=r||document);return updateOverlayContentMargins(a,t),{coordinates:getOverlayMenuPosition(a,e.getBoundingClientRect(),t.getBoundingClientRect(),n,r),position:a.position}}function calcOverlayMenuPosition(e,t,o,i,n){const r=getOverlayMenuHorizontalOffset(e,t,o,n),a=getOverlayMenuVerticalOffset(e,t,o,n);let l="undefined";const s={bottom:a.availableSpaceBelowTriggerElem>=a.contentHeight,top:a.availableSpaceAboveTriggerElem>=a.contentHeight,right:r.availableSpaceToTheRightSideOfTheTrigger>=r.contentWidth,left:r.availableSpaceToTheLeftSideOfTheTrigger>=r.contentWidth};if(s.top?l="top":s.bottom?l="bottom":s.right?l="right":s.left&&(l="left"),i&&s[i]&&(l=i),"undefined"===l){const e=Math.max(a.availableSpaceBelowTriggerElem,a.availableSpaceAboveTriggerElem,r.availableSpaceToTheRightSideOfTheTrigger,r.availableSpaceToTheLeftSideOfTheTrigger);e===a.availableSpaceBelowTriggerElem?l="bottom":e===a.availableSpaceAboveTriggerElem?l="top":e===r.availableSpaceToTheRightSideOfTheTrigger?l="right":e===r.availableSpaceToTheLeftSideOfTheTrigger&&(l="left")}return Object.assign(Object.assign(Object.assign({},a),r),{position:l})}function getOverlayMenuHorizontalOffset(e,t,o,i){const n=ViewportSize.width(i),{right:r}=e.getBoundingClientRect(),a=n-o-r-ViewportSize.scrollbarWidth(i);return{horizontalOffset:o,contentWidth:getOverlayMenuDimensions(t).width,availableSpaceToTheLeftSideOfTheTrigger:r-o,availableSpaceToTheRightSideOfTheTrigger:a}}function getOverlayMenuDimensions(e){const{width:t,height:o}=e.getBoundingClientRect(),{marginBottom:i,marginTop:n,marginLeft:r,marginRight:a}=window.getComputedStyle(e);return{width:t+parseInt(r,10)+parseInt(a,10),height:o+parseInt(n,10)+parseInt(i,10)}}function getOverlayMenuVerticalOffset(e,t,o,i){const n=ViewportSize.height(i),{top:r,bottom:a}=e.getBoundingClientRect();return{verticalOffset:o,contentHeight:getOverlayMenuDimensions(t).height,availableSpaceAboveTriggerElem:r-o,availableSpaceBelowTriggerElem:n-a-o}}function getOverlayMenuPosition(e,t,o,i,n){switch(e.position){case"top":return{left:`${getLeftPositionTBForOverlayMenu(t,o,i,n)}px`,top:e.availableSpaceAboveTriggerElem-e.contentHeight-e.verticalOffset+"px"};case"bottom":return{left:`${getLeftPositionTBForOverlayMenu(t,o,i,n)}px`,bottom:e.availableSpaceBelowTriggerElem-e.contentHeight-e.verticalOffset+"px"};case"left":return{left:e.availableSpaceToTheLeftSideOfTheTrigger-t.width-e.contentWidth-e.horizontalOffset+"px",top:`${getTopPositionLRForOverlayMenu(t,e)}px`};case"right":return{right:e.availableSpaceToTheRightSideOfTheTrigger-e.contentWidth-e.horizontalOffset+"px",top:`${getTopPositionLRForOverlayMenu(t,e)}px`}}}function getLeftPositionTBForOverlayMenu(e,t,o,i){let n=o?e.x+e.width/2-t.width/2:e.x;return n<0&&(n=0),n+t.width>ViewportSize.width(i)&&(n-=n+t.width-ViewportSize.width(i)),n}function getTopPositionLRForOverlayMenu(e,t){let o=t.availableSpaceAboveTriggerElem;return t.contentHeight>t.availableSpaceBelowTriggerElem&&(o-=t.contentHeight-t.availableSpaceBelowTriggerElem),o}function setPositionAttr(e,t){e.setAttribute("cl-overlay-position",t)}export function getOverlayBackgroundColor(e,t){if(e.startsWith("transparent")||e.startsWith("none")||!e.startsWith("rgb")||1!==getAlpha(e.slice(0,e.match(/\)/).index+1))){return getContrastRatio(t,whiteColor)>getContrastRatio(t,blackColor)?whiteColor:blackColor}return e}export function getOverlayBorderRadius(e,t){return Math.min(Math.floor(parseInt(String(e))/2),parseInt(t.borderTopLeftRadius),parseInt(t.borderTopRightRadius),parseInt(t.borderBottomLeftRadius),parseInt(t.borderBottomRightRadius))}export function getMenuItemHoverColor(e){const t=getContrastRatio(e,whiteColor),o=getContrastRatio(e,blackColor);let i,n;if(t>o)for(i=whiteColor,n=t;n>5;)i=darken(i,.1),n=getContrastRatio(e,i);else for(i="rgb(10, 10, 10)",n=o;n>5;)i=lighten(i,.1),n=getContrastRatio(e,i);return changeAlpha(i,.2)}function updateOverlayContentMargins(e,t){const{marginBottom:o,marginTop:i}=window.getComputedStyle(t);if("top"===e.position)setStylesToElement(t,{"margin-top":`${parseInt(i,10)+parseInt(o,10)}px`}),setStylesToElement(t,{"margin-bottom":"0px"});else if("bottom"===e.position)setStylesToElement(t,{"margin-bottom":`${parseInt(o,10)+parseInt(i,10)}px`}),setStylesToElement(t,{"margin-top":"0px"});else{const e=(parseInt(o,10)+parseInt(i,10))/2+"px";setStylesToElement(t,{"margin-top":e,"margin-bottom":e})}}