@micromag/core 0.4.69 → 0.4.74

package/es/styles.css

@@ -1,5 +1,4 @@
 .micromag-core-buttons-button-container .micromag-core-buttons-button-icon{display:block;position:relative}.micromag-core-buttons-button-container .micromag-core-buttons-button-icon,.micromag-core-buttons-button-container .micromag-core-buttons-button-label{-webkit-transition:-webkit-transform .3s "ease-out";transition:-webkit-transform .3s "ease-out";transition:transform .3s "ease-out";transition:transform .3s "ease-out",-webkit-transform .3s "ease-out";-webkit-transition:-webkit-transform .3s var(--mm-ease-out-ramp,"ease-out");transition:-webkit-transform .3s var(--mm-ease-out-ramp,"ease-out");transition:transform .3s var(--mm-ease-out-ramp,"ease-out");transition:transform .3s var(--mm-ease-out-ramp,"ease-out"),-webkit-transform .3s var(--mm-ease-out-ramp,"ease-out")}.micromag-core-buttons-button-container.micromag-core-buttons-button-withoutStyle{color:inherit}.micromag-core-buttons-button-container.micromag-core-buttons-button-asLink,.micromag-core-buttons-button-container.micromag-core-buttons-button-withoutStyle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-core-buttons-button-container.micromag-core-buttons-button-asLink{color:#a13dff;color:var(--mm-primary,#a13dff);font-weight:700}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon .micromag-core-buttons-button-label{margin-left:.5em;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon .micromag-core-buttons-button-right{margin-left:.5em}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon.micromag-core-buttons-button-withAnimations.micromag-core-buttons-button-icon-right .micromag-core-buttons-button-label{-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIconColumns{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.micromag-core-buttons-button-container.micromag-core-buttons-button-linkDisabled{opacity:.4;pointer-events:none;-webkit-text-decoration:none;text-decoration:none}.micromag-core-buttons-button-container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);outline:2px solid #000}
-
 .micromag-core-buttons-clear-container{display:inline-block;display:-ms-flexbox!important;display:flex!important;height:18px!important;position:relative;width:18px!important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-color:#ddd!important;background-color:var(--mm-gray-700,#ddd)!important;border:0;border-radius:4px;color:inherit;cursor:pointer;font-family:inherit;justify-content:center;padding:0;padding:0 10px!important}.micromag-core-buttons-clear-container .micromag-core-buttons-clear-icon{display:block}
 .micromag-core-forms-form-actions{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;margin-top:10px;margin-top:calc(var(--mm-spacer, 5px)*2)}.micromag-core-forms-form-actions.micromag-core-forms-form-left{-ms-flex-pack:start;justify-content:flex-start}.micromag-core-forms-form-actions.micromag-core-forms-form-right{-ms-flex-pack:end;justify-content:flex-end}
 .micromag-core-partials-link-withoutStyle{color:inherit;-webkit-text-decoration:none;text-decoration:none}.micromag-core-partials-link-withoutStyle:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none}

package/es/utils.d.ts

@@ -1,5 +1,6 @@
 export { camelCase, pascalCase, snakeCase } from 'change-case';
-import { ComponentType } from 'react';
+import { ElementType, ComponentType, ForwardedRef } from 'react';
+import { MessageDescriptor } from 'react-intl';
 
 declare function addNonBreakingSpaces(text: any): any;
 
@@ -45,11 +46,120 @@ declare const easings: {
     easeInOutElastic: (x: any) => number;
 };
 
-declare const getColorAsString: (value?: any, overideAlpha?: any) => any;
-
-type ComponentsMap = Record<string, ComponentType>;
-
-declare const getComponentFromName: (name: string | null, components: ComponentsMap, defaultComponent?: ComponentType | null) => ComponentType | null;
+type MediaElement = HTMLVideoElement | HTMLAudioElement | HTMLMediaElement;
+/**
+ * Medias
+ */
+interface MediaMetadata {
+    filename?: string;
+    size?: number;
+    mime?: string;
+}
+interface MediaFile {
+    id?: string;
+    handle?: string;
+    type?: string;
+    mime?: string;
+    url: string;
+}
+interface Media {
+    id?: string;
+    type: string;
+    url: string;
+    thumbnail_url?: string;
+    name?: string;
+    metadata?: MediaMetadata;
+    files?: Record<string, MediaFile>;
+}
+interface ImageMedia extends Omit<Media, 'type' | 'metadata'> {
+    type?: 'image' | 'video';
+    metadata?: MediaMetadata & {
+        width?: number;
+        height?: number;
+    };
+}
+interface FontMedia extends Omit<Media, 'type'> {
+    type?: 'font';
+}
+
+type ComponentsMap = Record<string, ElementType>;
+
+/**
+ * Style
+ */
+interface CustomFont {
+    type?: 'system' | 'google' | 'custom';
+    name?: string;
+    media?: FontMedia;
+    variants?: string[] | {
+        fvd?: string;
+        weight?: number;
+        style?: string;
+    }[];
+}
+type Font = CustomFont | string;
+type TextAlign = 'left' | 'right' | 'center';
+interface ColorObject {
+    color?: string;
+    alpha?: number;
+}
+type Color = ColorObject | string;
+interface FontStyle {
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    upperCase?: boolean;
+}
+interface TextStyle {
+    fontFamily?: Font;
+    fontSize?: number;
+    fontStyle?: FontStyle;
+    align?: TextAlign;
+    color?: Color;
+    letterSpacing?: number;
+    lineHeight?: number;
+}
+type BorderType = 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden';
+interface ShadowType {
+    shadowDistance?: number;
+    shadowBlur?: number;
+    shadowColor?: Color;
+}
+interface BoxStyle {
+    backgroundColor?: Color;
+    borderRadius?: number;
+    borderWidth?: number;
+    borderColor?: Color;
+    borderStyle?: BorderType;
+    shadow?: ShadowType;
+}
+
+type CallToActionType = 'swipe-up' | 'button';
+interface CallToAction {
+    active?: boolean;
+    type?: CallToActionType;
+    url?: string;
+    label?: TextElement;
+    buttonStyle?: BoxStyle;
+}
+interface TextElement {
+    body?: string;
+    textStyle?: TextStyle;
+}
+interface Badge {
+    label?: TextElement;
+    buttonStyle?: BoxStyle;
+}
+interface Header {
+    badge?: Badge;
+}
+interface Footer {
+    callToAction?: CallToAction;
+}
+
+declare const getColorAsString: (value?: Color | null, overideAlpha?: any) => any;
+
+declare const getComponentFromName: (name: string | null, components: ComponentsMap, defaultComponent?: ComponentType | null) => ElementType | null;
 
 declare const getDeviceScreens: () => ({
     name: string;
@@ -72,15 +182,26 @@ declare const getFileName: (url?: any) => any;
 
 declare const getFontFamily: (value: any) => string;
 
-declare const getFooterProps: (footer?: {}, { isPreview, isView, current, openWebView, enableInteraction, disableInteraction, ...otherProps }?: {
+declare function getFooterProps(footer?: Footer | null, { isPreview, isView, current, openWebView, enableInteraction, disableInteraction, ...otherProps }?: {
     isPreview?: boolean;
     isView?: boolean;
     current?: boolean;
     openWebView?: boolean;
     enableInteraction?: boolean;
     disableInteraction?: boolean;
-}) => {
-    callToAction: any;
+}): {
+    callToAction: {
+        animationDisabled: boolean;
+        focusable: boolean;
+        openWebView: boolean;
+        enableInteraction: boolean;
+        disableInteraction: boolean;
+        active?: boolean;
+        type?: CallToActionType;
+        url?: string;
+        label?: TextElement;
+        buttonStyle?: BoxStyle;
+    };
 };
 
 declare const getGridLayoutName: (layout: any) => any;
@@ -91,6 +212,14 @@ declare const getLayersFromBackground: (background?: any) => any;
 
 declare const getMediaFilesAsArray: (files: any) => any;
 
+declare function getMediaThumbnail(media: any, thumbnail?: MediaFile | ImageMedia | string): {
+    metadata?: {
+        width?: number;
+        height?: number;
+    };
+    url: string;
+} | null;
+
 declare const getOptimalImageUrl: (media?: any, containerWidth?: any, containerHeight?: any, { resolution, maxDiff, supportsWebp }?: {
     resolution?: number;
     maxDiff?: number;
@@ -138,7 +267,7 @@ declare const getStyleFromBox: (value: any) => {
     borderRadius: any;
 };
 
-declare const getStyleFromColor: (value?: any, property?: string, overideAlpha?: any) => {
+declare const getStyleFromColor: (value?: Color | null, property?: string, overideAlpha?: any) => {
     [x: string]: any;
 };
 
@@ -197,11 +326,11 @@ declare const getLayoutParts: (layout?: any) => {
     suffix: any;
 };
 
-declare const isHeaderFilled: (header?: {}) => boolean;
+declare const isHeaderFilled: (header?: Header | null) => boolean;
 
-declare const isFooterFilled: (footer?: {}) => boolean;
+declare const isFooterFilled: (footer?: Footer | null) => boolean;
 
-declare const isMessage: (message: any) => boolean;
+declare function isMessage(message: MessageDescriptor | unknown): message is MessageDescriptor;
 
 declare const isIos: () => boolean;
 
@@ -213,6 +342,8 @@ declare const isTextFilled: (text: any) => boolean;
 
 declare const isValidUrl: (string: any) => boolean;
 
+declare function mergeRefs<T>(...refs: Array<ForwardedRef<T> | null | undefined>): (value: T | null) => void;
+
 declare const schemaId: (str: any) => string;
 
 declare const setValue: (value: any, keyParts: any, fieldValue: any) => any;
@@ -223,6 +354,17 @@ declare const unique: (arrArg: any) => any;
 
 declare const validateFields: (fields: any, value: any) => any;
 
-declare const getContrastingColor: (backgroundColor: any) => any;
+declare const getContrastingColor: (backgroundColor: Color | null) => any;
+
+declare function getMediaCurrentTime(media: MediaElement | null, tsOffset?: number): number;
+declare function getMediaDuration(media: MediaElement | null, tsOffset?: number): number;
+declare function getMediaTimestampOffset(media: MediaElement | null, attributeName?: string): number;
+declare function getMediaIsMuted(media: MediaElement | null): boolean;
+declare function getMediaIsPlaying(media: MediaElement | null): boolean;
+declare function getMediaIsBuffering(media: MediaElement | null): boolean;
+declare function getMediaIsReady(media: MediaElement | null): boolean;
+declare function getMediaSrc(media: MediaElement | null): string | null;
+declare function getMediaHasAudio(media: MediaElement | null): boolean;
+declare function getMediaFilename(src: string | null): string | null;
 
-export { addNonBreakingSpaces, convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, cssEscape, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getFooterProps, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getScreenFieldsWithStates, getSecondsFromTime, getShadowCoords, getStyleFromAlignment, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isFooterFilled, isHeaderFilled, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { addNonBreakingSpaces, convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, cssEscape, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getFooterProps, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaCurrentTime, getMediaDuration, getMediaFilename, getMediaFilesAsArray, getMediaHasAudio, getMediaIsBuffering, getMediaIsMuted, getMediaIsPlaying, getMediaIsReady, getMediaSrc, getMediaThumbnail, getMediaTimestampOffset, getOptimalImageUrl, getScreenExtraField, getScreenFieldsWithStates, getSecondsFromTime, getShadowCoords, getStyleFromAlignment, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isFooterFilled, isHeaderFilled, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, mergeRefs, schemaId, setValue as setFieldValue, slug, unique, validateFields };