@claspo/common 6.0.12 → 6.0.13-theme.40

package/component-manifest/ComponentManifest.interface.d.ts

@@ -17,7 +17,6 @@ export interface ComponentManifestI {
     focusParentOnClick?: boolean;
     preventDraggable?: boolean;
     recursiveRemove?: boolean;
-    canStack?: boolean;
     i18n?: ComponentManifestTranslationI;
     children?: ClBaseComponentI[];
     mappingTypes?: ManifestMappingType[];
@@ -36,6 +35,8 @@ export interface ComponentManifestI {
     isExternalStartCapable?: boolean;
     waitForResourcesLoad?: boolean;
     resourcesPropPaths?: string[][];
+    syncEnabled?: boolean;
+    stylesImitationEnabled?: boolean;
 }
 export declare enum ManifestMappingType {
     TEXT = "TEXT",

package/document/Document.interface.d.ts

@@ -15,7 +15,6 @@ export interface ClBaseComponentI {
     focusParentOnClick?: boolean;
     preventDraggable?: boolean;
     recursiveRemove?: boolean;
-    canStack?: boolean;
 }
 export declare enum ClComponentType {
     VIEW = "VIEW",
@@ -141,6 +140,13 @@ export interface ClDocumentShowWidgetActionParamsI {
 export interface ClDocumentRequestActionParamsI extends ClDocumentSubscribeContactActionParamsI {
     countAsTargetAction?: boolean;
 }
+export declare enum DefaultSchemaTokens {
+    ACCENT = "accent"
+}
+export type ThemeColorSchemaI = Record<string, string>;
+export interface ThemeI {
+    schema: ThemeColorSchemaI;
+}
 export interface ClDocumentSharedI {
     headerFontFamily: string;
     textFontFamily: string;
@@ -159,6 +165,7 @@ export interface ClDocumentSharedI {
     linkParams?: ClDocumentLinkParamsI;
     mobileBreakpointWidth?: number;
     zIndex?: number;
+    theme?: ThemeI;
 }
 export interface ClDialogParamsI {
     background: string;

package/document/Document.interface.js

@@ -1 +1 @@
-export var ClComponentType;!function(T){T.VIEW="VIEW",T.CONTAINER="CONTAINER",T.TEXT="TEXT",T.INPUT="INPUT",T.BUTTON="BUTTON",T.IMAGE="IMAGE",T.CONSENT="CONSENT",T.COUNTDOWN_TIMER="COUNTDOWN_TIMER",T.PROMO_CODE="PROMO_CODE",T.MULTIPLE_INPUT="MULTIPLE_INPUT",T.VIDEO="VIDEO",T.SLIDER="SLIDER",T.SLIDE="SLIDE",T.SOCIAL="SOCIAL",T.COLUMNS="COLUMNS",T.COLUMN="COLUMN",T.PRIZE_BASED_GAMING="PRIZE_BASED_GAMING"}(ClComponentType||(ClComponentType={}));export var ClDocumentHandlerType;!function(T){T.CLICK="CLICK"}(ClDocumentHandlerType||(ClDocumentHandlerType={}));export var ClDocumentActionType;!function(T){T.SHOW_WIDGET="SHOW_WIDGET",T.OPEN_LINK="OPEN_LINK",T.SUBSCRIBE_CONTACT="SUBSCRIBE_CONTACT",T.REQUEST="REQUEST",T.CLOSE_WIDGET="CLOSE_WIDGET",T.GO_TO_VIEW="GO_TO_VIEW",T.GO_TO_PREVIOUS_VIEW="GO_TO_PREVIOUS_VIEW",T.GO_TO_NEXT_VIEW="GO_TO_NEXT_VIEW",T.CLICK="CLICK"}(ClDocumentActionType||(ClDocumentActionType={}));export var ClDocumentOpenLinkActionTarget;!function(T){T.SELF="_self",T.BLANK="_blank"}(ClDocumentOpenLinkActionTarget||(ClDocumentOpenLinkActionTarget={}));export var ClWidgetVerticalPosition;!function(T){T.TOP="TOP",T.CENTER="CENTER",T.BOTTOM="BOTTOM"}(ClWidgetVerticalPosition||(ClWidgetVerticalPosition={}));export var ClWidgetHorizontalPosition;!function(T){T.LEFT="LEFT",T.CENTER="CENTER",T.RIGHT="RIGHT"}(ClWidgetHorizontalPosition||(ClWidgetHorizontalPosition={}));export var ClLauncherEntryAnimationType;!function(T){T.SLIDE_TO_TOP="SLIDE_TO_TOP",T.SLIDE_TO_BOTTOM="SLIDE_TO_BOTTOM",T.SLIDE_TO_LEFT="SLIDE_TO_LEFT",T.SLIDE_TO_RIGHT="SLIDE_TO_RIGHT"}(ClLauncherEntryAnimationType||(ClLauncherEntryAnimationType={}));export var ClLoopAnimationType;!function(T){T.PULSE="PULSE",T.VIBRATE="VIBRATE",T.WOBBLE="WOBBLE",T.SHAKE="SHAKE",T.JELLO="JELLO",T.BOUNCE="BOUNCE",T.BLINK="BLINK",T.FLICKER="FLICKER",T.PING="PING"}(ClLoopAnimationType||(ClLoopAnimationType={}));export var ClCloseButtonHorizontalPosition;!function(T){T.LEFT="LEFT",T.RIGHT="RIGHT"}(ClCloseButtonHorizontalPosition||(ClCloseButtonHorizontalPosition={}));
+export var ClComponentType;!function(T){T.VIEW="VIEW",T.CONTAINER="CONTAINER",T.TEXT="TEXT",T.INPUT="INPUT",T.BUTTON="BUTTON",T.IMAGE="IMAGE",T.CONSENT="CONSENT",T.COUNTDOWN_TIMER="COUNTDOWN_TIMER",T.PROMO_CODE="PROMO_CODE",T.MULTIPLE_INPUT="MULTIPLE_INPUT",T.VIDEO="VIDEO",T.SLIDER="SLIDER",T.SLIDE="SLIDE",T.SOCIAL="SOCIAL",T.COLUMNS="COLUMNS",T.COLUMN="COLUMN",T.PRIZE_BASED_GAMING="PRIZE_BASED_GAMING"}(ClComponentType||(ClComponentType={}));export var ClDocumentHandlerType;!function(T){T.CLICK="CLICK"}(ClDocumentHandlerType||(ClDocumentHandlerType={}));export var ClDocumentActionType;!function(T){T.SHOW_WIDGET="SHOW_WIDGET",T.OPEN_LINK="OPEN_LINK",T.SUBSCRIBE_CONTACT="SUBSCRIBE_CONTACT",T.REQUEST="REQUEST",T.CLOSE_WIDGET="CLOSE_WIDGET",T.GO_TO_VIEW="GO_TO_VIEW",T.GO_TO_PREVIOUS_VIEW="GO_TO_PREVIOUS_VIEW",T.GO_TO_NEXT_VIEW="GO_TO_NEXT_VIEW",T.CLICK="CLICK"}(ClDocumentActionType||(ClDocumentActionType={}));export var ClDocumentOpenLinkActionTarget;!function(T){T.SELF="_self",T.BLANK="_blank"}(ClDocumentOpenLinkActionTarget||(ClDocumentOpenLinkActionTarget={}));export var DefaultSchemaTokens;!function(T){T.ACCENT="accent"}(DefaultSchemaTokens||(DefaultSchemaTokens={}));export var ClWidgetVerticalPosition;!function(T){T.TOP="TOP",T.CENTER="CENTER",T.BOTTOM="BOTTOM"}(ClWidgetVerticalPosition||(ClWidgetVerticalPosition={}));export var ClWidgetHorizontalPosition;!function(T){T.LEFT="LEFT",T.CENTER="CENTER",T.RIGHT="RIGHT"}(ClWidgetHorizontalPosition||(ClWidgetHorizontalPosition={}));export var ClLauncherEntryAnimationType;!function(T){T.SLIDE_TO_TOP="SLIDE_TO_TOP",T.SLIDE_TO_BOTTOM="SLIDE_TO_BOTTOM",T.SLIDE_TO_LEFT="SLIDE_TO_LEFT",T.SLIDE_TO_RIGHT="SLIDE_TO_RIGHT"}(ClLauncherEntryAnimationType||(ClLauncherEntryAnimationType={}));export var ClLoopAnimationType;!function(T){T.PULSE="PULSE",T.VIBRATE="VIBRATE",T.WOBBLE="WOBBLE",T.SHAKE="SHAKE",T.JELLO="JELLO",T.BOUNCE="BOUNCE",T.BLINK="BLINK",T.FLICKER="FLICKER",T.PING="PING"}(ClLoopAnimationType||(ClLoopAnimationType={}));export var ClCloseButtonHorizontalPosition;!function(T){T.LEFT="LEFT",T.RIGHT="RIGHT"}(ClCloseButtonHorizontalPosition||(ClCloseButtonHorizontalPosition={}));

package/element/ThemeCssVars.d.ts

@@ -0,0 +1,7 @@
+import CssVarsOperations from "./CssVarsOperations";
+export declare function prepareKeys(schema: any): {};
+export default class ThemeCssVars extends CssVarsOperations {
+    static override(schema: {} | undefined, element: any): void;
+    static apply(schema: {} | undefined, element: any): void;
+    static get(varName: any, element: any): string;
+}

package/element/ThemeCssVars.js

@@ -0,0 +1 @@
+import{toCssVarToken}from"../theme/theme.utils";import CssVarsOperations from"./CssVarsOperations";function getRgbaColor(r){return(null==r?void 0:r.startsWith("rgb("))?r.replace("rgb(","rgba(").replace(")",", 1)"):r}function trim(r){return"#"==r.charAt(0)?r.substring(1,7):r}function convertToRGB(r){return[parseInt(trim(r).substring(0,2),16),parseInt(trim(r).substring(2,4),16),parseInt(trim(r).substring(4,6),16)]}function parseColorToRGB(r){if(!r)return[0,0,0,1];const t=r.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(t){return[parseInt(t[1],10),parseInt(t[2],10),parseInt(t[3],10),t[4]?parseFloat(t[4]):1]}if(r.startsWith("#")){const t=trim(r);if(3===t.length){return[parseInt(t[0]+t[0],16),parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),1]}if(6===t.length){const r=convertToRGB(t);return[r[0],r[1],r[2],1]}}return[0,0,0,1]}function generateGradientColors(r,t,e){if(!r||!t||e<=0)return[];const s=parseColorToRGB(r),o=parseColorToRGB(t),n=[];for(let r=0;r<e;r++){const t=r/(e-1||1),a=Math.round(s[0]+(o[0]-s[0])*t),i=Math.round(s[1]+(o[1]-s[1])*t),p=Math.round(s[2]+(o[2]-s[2])*t),u=void 0!==s[3]&&void 0!==o[3]?s[3]+(o[3]-s[3])*t:1;n.push(`rgba(${a}, ${i}, ${p}, ${u})`)}return n}export function prepareKeys(r){const t=Object.keys(r).reduce((t,e)=>(t[toCssVarToken(e)]=r[e],t),{}),e=getRgbaColor(r.text),s=generateGradientColors(getRgbaColor(r.background),e,18);return s.pop(),s.shift(),s.forEach((r,e)=>{t[toCssVarToken(`background-${e+1}`)]=r}),t}export default class ThemeCssVars extends CssVarsOperations{static override(r={},t){const e=prepareKeys(r);super.override(e,t)}static apply(r={},t){const e=prepareKeys(r);super.apply(e,t)}static get(r,t){const e=toCssVarToken(r);return super.get(e,t)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claspo/common",
-  "version": "6.0.12",
+  "version": "6.0.13-theme.40",
   "description": "",
   "main": "index.js",
   "engines": {
@@ -24,7 +24,7 @@
     "build:docs": "rm -rf ./docs && typedoc --options typedoc.md.json && npx concat-md --decrease-title-levels docs > docs/index.md && find docs -name '*.md' ! -name 'index.md' -delete",
     "minify": "find out -name '*.js' ! -name '*.d.js' -exec terser {} --compress --mangle --output {} \\;",
     "dev": " tsc --project tsconfig.json --watch",
-    "package": "npm i && npm run test && npm run build && npm run build:docs && npm run sync:docs && cp package.json README.md LICENSE.md out && cd out && npm publish --access=public && cd ..",
+    "package": "npm i && npm run test && npm run build && npm run build:docs && cp package.json README.md LICENSE.md out && cd out && npm publish --access=public && cd ..",
     "sync:docs": "node ../../scripts/sync-docs.js --package=common"
   },
   "dependencies": {
@@ -41,6 +41,7 @@
     "ts-node": "^10.8.0",
     "typedoc": "^0.28.0",
     "typedoc-plugin-markdown": "^4.4.1",
+    "typedoc-plugin-no-inherit": "^1.6.1",
     "typescript": "^5.8.2"
   },
   "author": "alex-chernysh",

package/theme/theme.utils.d.ts

@@ -0,0 +1,7 @@
+import { ThemeI } from "../document/Document.interface";
+export declare const THEME_CSS_VAR_PREFIX = "cl-schema-";
+export declare function toCssVarToken(token: string): string;
+export declare function formCssVarToSchemaToken(cssVar?: string): string;
+export declare function extractRgbFromFallbackValue(value: string): string | null;
+export declare function extractColor(value: string, theme?: ThemeI | null): string | null;
+export declare function createTheme(schema?: Record<string, string>): ThemeI;

package/theme/theme.utils.js

@@ -0,0 +1 @@
+import{DefaultSchemaTokens}from"../document/Document.interface";export const THEME_CSS_VAR_PREFIX="cl-schema-";export function toCssVarToken(e){return`cl-schema-${e}`}export function formCssVarToSchemaToken(e=""){return e.replace(/var\(\s*(--[^,\s)]+).*\)/,"$1").replace("--cl-schema-","")}export function extractRgbFromFallbackValue(e){const r=String(e).match(/var\([^,]+,\s*(rgb(?:a)?\([^)]+\))\)/);return r&&r[1]?r[1]:null}export function extractColor(e,r){var t;const n=String(e||"");if(n.startsWith("var(")){if(!r)return null;const e=formCssVarToSchemaToken(n),a=null===(t=r.schema)||void 0===t?void 0:t[e];return a||(extractRgbFromFallbackValue(n)||null)}return n}export function createTheme(e={}){return 0===Object.keys(e).length&&(e={[DefaultSchemaTokens.ACCENT]:"#000000"}),{schema:Object.assign({},e)}}