@orangelogic/design-system 4.2.0 → 4.3.0

package/library/packages/types/src/content-builder.d.ts

@@ -3,11 +3,16 @@ import { TemplateResult } from 'lit';
 import { StyleInfo } from 'lit/directives/style-map';
 import { DownloadDocType } from './download-format-picker';
 import { FolderSelectApi, FolderSelectVariant } from './folder-select';
-import { FontTypeface } from './font-picker';
+import { FontFamily, FontTypeface } from './font-picker';
 import { TableSelectColumn } from './table-select';
 import { TypeSubtypeOption } from './type-subtype-select';
 
 export declare const SPACE_DEFAULT_FONT_FAMILY = "space-default";
+/**
+ * Font-picker option that clears the block's font so it inherits the one its
+ * container resolved — the typeface of the row a font kit cloned it into.
+ */
+export declare const INHERITED_FONT_FAMILY = "inherited-font";
 export declare enum DeviceType {
     Desktop = "desktop",
     Mobile = "mobile",
@@ -111,6 +116,18 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
         api: () => Promise<FontTypeface[]>;
         /** Block-attribute key that stores the selected font family value. */
         familyKey: string;
+        /**
+         * Style options the inherit option offers: the variants its container
+         * resolves, so the picker can never name a face the container never
+         * renders.
+         */
+        inheritedFamilies?: FontFamily[];
+        /**
+         * Label of an extra first option that clears the font so the block
+         * inherits its container's. Absent hides the option, and with it the
+         * container-aware writing of the space-default option.
+         */
+        inheritedOptionLabel?: string;
         /** Block-attribute key that stores the selected font style value. */
         styleKey: string;
         /** Block-attribute key that stores the selected font weight value. */
@@ -146,8 +163,11 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
         };
         /**
          * Return validation message if invalid, otherwise return empty string.
+         *
+         * `siblings` holds the list's other rows inside a list editor's dialog, so
+         * a value can be rejected as a duplicate. Empty everywhere else.
          */
-        validation?: (record: Record<string, unknown>) => string;
+        validation?: (record: Record<string, unknown>, siblings?: Array<Record<string, unknown>>) => string;
     };
     itemsPerRow?: number;
     listEditorConfigs?: {
@@ -157,7 +177,7 @@ export type PropertyConfig<T = Record<string, any>> = Omit<TraitProperties, 'opt
         displayField?: string;
         editDialogLabel: string;
         noHeader?: boolean;
-        sampleItem: Record<string, string>;
+        sampleItem: Record<string, unknown>;
     };
     mask?: string;
     maskBlocks?: Record<string, unknown>;
@@ -288,7 +308,13 @@ export type TeamSpaceFontFamily = {
     fontFamily: string;
     fontFilesURLs: string[];
 };
+export type RteMetafieldOption = {
+    helpText?: string;
+    label: string;
+    token: string;
+};
 export type RTE_CONFIG = {
+    alwaysShowBubbleMenu?: boolean;
     basicFormat?: boolean;
     blockFormatting?: boolean;
     enableAll?: boolean;
@@ -298,6 +324,7 @@ export type RTE_CONFIG = {
     highlight?: boolean;
     lineHeight?: boolean;
     link?: boolean;
+    metafield?: RteMetafieldOption[];
     styles?: {
         singleRow?: boolean;
     };
@@ -334,6 +361,7 @@ export declare enum BlockType {
     Divider = "BlockDivider",
     DocumentViewer = "BlockDocumentViewer",
     FontKit = "BlockFontKit",
+    FontKitAdvanced = "BlockFontKitAdvanced",
     Gallery = "BlockGallery",
     Header = "BlockHeader",
     Image = "BlockImage",
@@ -344,7 +372,7 @@ export declare enum BlockType {
     Timeline = "BlockTimeline",
     Video = "BlockVideo"
 }
-export declare const BLOCK_DROPPABLE_BLOCKS: (BlockType.Accordion | BlockType.Analytics | BlockType.Audio | BlockType.Button | BlockType.Carousel | BlockType.ColorSwatches | BlockType.ColumnGroup | BlockType.DamView | BlockType.Divider | BlockType.DocumentViewer | BlockType.FontKit | BlockType.Gallery | BlockType.Header | BlockType.Image | BlockType.RichText | BlockType.SearchBox | BlockType.TabGroup | BlockType.Text | BlockType.Timeline | BlockType.Video)[];
+export declare const BLOCK_DROPPABLE_BLOCKS: (BlockType.Accordion | BlockType.Analytics | BlockType.Audio | BlockType.Button | BlockType.Carousel | BlockType.ColorSwatches | BlockType.ColumnGroup | BlockType.DamView | BlockType.Divider | BlockType.DocumentViewer | BlockType.FontKit | BlockType.FontKitAdvanced | BlockType.Gallery | BlockType.Header | BlockType.Image | BlockType.RichText | BlockType.SearchBox | BlockType.TabGroup | BlockType.Text | BlockType.Timeline | BlockType.Video)[];
 export declare enum DialogType {
     Carousel = "carousel",
     Gallery = "gallery"
@@ -374,4 +402,41 @@ export declare enum DataSourceId {
 export type ConfigsOptions = {
     enableAssetFormatControls?: boolean;
     enableFontFamilyControls?: boolean;
+    /**
+     * Variants of the font the block's container resolves for it — a font kit's
+     * rows. Present means the block sits inside such a container, so its font
+     * picker offers an option to inherit that font, offering these as its
+     * styles, and writes every other option explicitly.
+     */
+    containerFontVariants?: FontFamily[];
+};
+/**
+ * Well-known editable sections of a content-builder canvas. The page content is the implicit
+ * section every builder has (`container-selector` / `initial-data`); the hero is the CMS5 masthead
+ * (L-429UPF) rendered above it in the same canvas document.
+ */
+export declare enum ContentBuilderSectionId {
+    Hero = "hero",
+    PageContent = "page-content"
+}
+/** grapesjs component type of the node the builder owns inside each section's host container. */
+export declare const CONTENT_BUILDER_SECTION_FRAGMENT_TYPE = "SectionFragment";
+/** Attribute stamped on a section fragment element so the host page and the CSS can address it. */
+export declare const CONTENT_BUILDER_SECTION_ATTRIBUTE = "data-content-builder-section";
+/**
+ * One editable region of the canvas document. `containerSelector` locates the host container in
+ * the canvas page; the builder mounts its own fragment node inside it and edits that node's tree.
+ */
+export type ContentBuilderSection = {
+    /** CSS selector of the host container inside the canvas document. */
+    containerSelector: string;
+    /** Stable identifier used to read the section back through `getSectionContent(id)`. */
+    id: string;
+    /** Serialized grapesjs project data the section is initialised from. Empty = start blank. */
+    initialData?: string;
+};
+/** Persisted shape of one section: the same `{ html, json }` pair the page content has always used. */
+export type ContentBuilderSectionContent = {
+    html: string;
+    json: string;
 };

package/library/packages/types/src/details-group.d.ts

@@ -0,0 +1,80 @@
+import { IconPickerValue } from './icon-picker';
+import { ObjectFit } from './index';
+import { PositionPickerValue } from './position-picker';
+
+/**
+ * Default accordion icons. Right when closed, down when open — the direction `cx-details`
+ * used to get by rotating one chevron. Naming both states lets the editor show what renders.
+ */
+export declare const DEFAULT_EXPAND_ICON: IconPickerValue;
+/** @see DEFAULT_EXPAND_ICON */
+export declare const DEFAULT_COLLAPSE_ICON: IconPickerValue;
+/**
+ * One accordion section.
+ *
+ * Beyond the label, a section may carry its own look. Those overrides are stored under the
+ * same CSS custom property names `cx-details` exposes, so `cx-details-group` can pass them
+ * straight through as a style map. They apply only while `customStyle` is on.
+ *
+ * Keys are alphabetical to satisfy the workspace sort rule, so the state groups
+ * (default / hover / open) read interleaved rather than grouped.
+ */
+export type DetailsItem = {
+    [key: `label-${string}`]: string;
+    /** Width of the icon shown while the section is open. The height scales with it. */
+    '--collapse-icon-width'?: string;
+    /** Width of the icon shown while the section is closed. The height scales with it. */
+    '--expand-icon-width'?: string;
+    /** Header background color while the section is open. */
+    '--header-active-background-color'?: string;
+    /** Header border while the section is open, as a `<color> <width>` pair. */
+    '--header-active-border'?: string;
+    /** Header text and icon color while the section is open. */
+    '--header-active-color'?: string;
+    /** Header background color in the default, closed state. */
+    '--header-background-color'?: string;
+    /** Header border in the default, closed state, as a `<color> <width>` pair. */
+    '--header-border'?: string;
+    /** Header text and icon color in the default, closed state. */
+    '--header-color'?: string;
+    /** Header background color while hovering a closed section. */
+    '--header-hover-background-color'?: string;
+    /** Header border while hovering a closed section. */
+    '--header-hover-border'?: string;
+    /** Header text and icon color while hovering a closed section. */
+    '--header-hover-color'?: string;
+    /** Width of the icon shown while hovering a closed section. The height scales with it. */
+    '--hover-icon-width'?: string;
+    /** Header background image source: the delivery URL the picker resolved for `backgroundFormat`. */
+    background?: string;
+    /** Which part of the background image to keep in view. */
+    backgroundCropFocus?: PositionPickerValue;
+    /** The proxy the background image is served under. Holds a resolved proxy even under `Auto`. */
+    backgroundFormat?: string;
+    /** Whether `backgroundFormat` was picked by hand. `false` (the default) means `Auto`. */
+    backgroundManualFormat?: boolean;
+    /** How the background image fills the header. */
+    backgroundObjectFit?: ObjectFit;
+    /** Asset id of the background image, kept off the shared `recordId` key. */
+    backgroundRecordId?: string;
+    /**
+     * Backend transformations for the background image, as the JSON string the control
+     * writes — not an array. Unlike a block attribute, a section field has no converter to
+     * parse it, so it keeps the shape it was saved in.
+     *
+     * The section's control hides crop, resize and rotate, but quality and metadata have no
+     * such flag and are always offered — so this does carry entries, and the string `'[]'`
+     * has a length of two, which is not the same as an empty list.
+     */
+    backgroundTransformations?: string;
+    /** Icon shown while the section is open. Falls back to the group's icon. */
+    'collapse-icon'?: IconPickerValue | null;
+    /** Turns the overrides above on. Without it the group's own look is used. */
+    customStyle?: boolean;
+    /** Icon shown while the section is closed. Falls back to the group's icon. */
+    'expand-icon'?: IconPickerValue | null;
+    /** Icon shown while hovering a closed section. Falls back to the group's icon. */
+    'hover-icon'?: IconPickerValue | null;
+    id: string;
+    label: string;
+};

package/library/packages/types/src/font-kit-advanced.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The origin of the font kit's typefaces.
+ * Default loads the font family from the teamspace; Custom loads it from
+ * uploaded font files. Values match the `origin` attribute strings used by
+ * `cx-font-kit` so both blocks share the same config semantics.
+ */
+export declare enum FontKitOrigin {
+    Custom = "custom",
+    Default = "default"
+}
+/**
+ * Tokens that can be written inside the editable row of `cx-font-kit-advanced`
+ * (as `${token}`) and are resolved per font variant in the cloned rows.
+ */
+export declare enum FontKitAdvancedToken {
+    /** The variant's source file format (e.g. `OTF`, `TTF`). */
+    FileFormat = "format",
+    /** The variant's font family name. */
+    FontFamily = "family",
+    /** The variant's font style (e.g. `normal`, `italic`, `Bold Italic`). */
+    Style = "style",
+    /** The variant's weight as a readable name (e.g. `Light`, `Regular`, `Bold`). */
+    Weight = "weight",
+    /** The variant's numeric weight (e.g. `300`, `400`, `700`). */
+    WeightNumber = "weight_n",
+    /** The variant's width (e.g. `Condensed`, `Normal`, `Expanded`). */
+    Width = "width"
+}

package/library/packages/types/src/font-kit.d.ts

@@ -1,7 +1,26 @@
+/**
+ * The outline format a font file carries, read from its sfnt signature: an
+ * `OTTO` file carries CFF outlines and ships as OTF, the TrueType signatures
+ * carry glyf outlines and ship as TTF.
+ */
+export declare enum FontOutlinesFormat {
+    Cff = "cff",
+    TrueType = "truetype"
+}
 export type Typeface = {
     fontFamily: string;
+    /**
+     * Outline format of the variant's source file. Absent for variants resolved
+     * without a file (system fonts, Google fonts).
+     */
+    fontOutlinesFormat?: FontOutlinesFormat;
     fontStyle: string;
     fontWeight: string;
+    /**
+     * The source file's OS/2 `usWidthClass` (1-9, 5 = normal). Absent for
+     * variants resolved without a file.
+     */
+    fontWidthClass?: number;
     src: string;
 };
 export declare enum DownloadMode {

package/library/packages/types/src/font-picker.d.ts

@@ -10,6 +10,8 @@ export interface FontFamily {
     value?: string;
 }
 export interface FontTypeface {
+    /** Replaces the "Default" label in the style select for this typeface. */
+    defaultStyleLabel?: string;
     families: FontFamily[];
     typeface: string;
     /** CSS-safe identifier with no spaces. Derived from typeface if omitted. */

package/library/packages/types/src/gallery-item.d.ts

@@ -1,4 +1,4 @@
-import { ObjectFit } from './index.ts';
+import { ObjectFit, PositionPickerValue } from './index.ts';
 import { MediaType } from './asset-link-format';
 
 export { HighlightableElementEffect as GalleryItemEffect, HighlightableElementTextRevealStyle as GalleryItemTextRevealStyle, HighlightableElementZoomStyle as GalleryItemZoomStyle, HighlightableElementContentPosition as GalleryItemContentPosition, } from './highlightable-element';
@@ -21,8 +21,10 @@ export declare enum GalleryItemShowContentType {
 export type GalleryItem = {
     additions?: string[];
     alt?: string;
+    backgroundColor?: string;
     cardType?: GalleryItemCardType;
     className?: string;
+    cropFocus?: PositionPickerValue;
     details?: string;
     docType?: MediaType | '';
     extension?: string;

package/library/packages/types/src/gallery.d.ts

@@ -1,4 +1,4 @@
-import { ObjectFit } from '.';
+import { ObjectFit, PositionPickerValue } from '.';
 
 export declare enum GalleryLayout {
     Automatic = "automatic",
@@ -27,6 +27,7 @@ export declare enum ContentType {
     Custom = "custom"
 }
 export type GalleryRecord = {
+    cropFocus?: PositionPickerValue;
     id: string;
     objectFit: ObjectFit;
     rawId?: string;

package/library/packages/types/src/index.d.ts

@@ -1,6 +1,7 @@
 type FakeString = string & Record<string, never>;
 export type EnumOrString<T> = T | FakeString;
 export * from './icon-picker';
+export * from './position-picker';
 export type BaseVariant = 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
 export declare enum ObjectFit {
     Contain = "contain",

package/library/packages/types/src/masonry.d.ts

@@ -6,6 +6,7 @@ export declare enum MasonryVariant {
 }
 export type MasonryItem = {
     alt?: string;
+    backgroundColor?: string;
     extension?: string;
     hasError?: boolean;
     id: string;

package/library/packages/types/src/position-picker.d.ts

@@ -9,3 +9,9 @@ export declare enum PositionPickerValue {
     TopLeft = "top-left",
     TopRight = "top-right"
 }
+/**
+ * Maps each `PositionPickerValue` to the equivalent CSS `object-position`/
+ * `background-position` keyword pair, for components that position an
+ * image/video within its container based on a crop-focus value.
+ */
+export declare const OBJECT_POSITION_BY_CROP_FOCUS: Record<PositionPickerValue, string>;

package/library/packages/types/src/sb-button.d.ts

@@ -1,3 +1,10 @@
+export declare enum ButtonAppearance {
+    Custom = "custom",
+    Outline = "outline",
+    Primary = "primary",
+    Secondary = "default",
+    Text = "text"
+}
 export declare enum ButtonAssetType {
     Image = "image",
     Other = "other",

package/library/packages/types/src/search-box.d.ts

@@ -1,3 +1,7 @@
+export declare enum SearchBoxAppearance {
+    Custom = "custom",
+    Default = "default"
+}
 export declare enum SearchBoxSize {
     Custom = "custom",
     Large = "large",

package/library/packages/utils/src/color/color.d.ts

@@ -1,3 +1,5 @@
+import { CxColorSwatchCodeSeparator, CxColorSwatchHexFormat } from '../../../types/src/color-swatch';
+
 type ColorExtract = {
     blue?: number;
     c?: number;
@@ -47,9 +49,15 @@ export declare function luminanceTextColor(backgroundColor: string, textColor?:
 /**
  * Extracts light and dark color values from a CSS light-dark() function.
  * Handles nested parentheses for color formats like rgb(), hsl(), etc.
- * @param value - String containing light-dark(), e.g. "light-dark(#000, #fff)" or "light-dark(rgb(0,0,0), rgb(255,255,255))"
+ *
+ * A bare color is read as that color for both schemes, since that is what it means. This
+ * also matters in practice: the CSS minifier rewrites `light-dark(a, a)` to just `a`
+ * (matching on computed color, so no notation avoids it), so a default authored as a
+ * matched pair reaches a color control as a single value.
+ * @param value - String containing light-dark(), e.g. "light-dark(#000, #fff)" or "light-dark(rgb(0,0,0), rgb(255,255,255))", or a bare color
  * @returns Space-separated light and dark colors, or empty string if invalid
  * @example parseLightDark("light-dark(#000, #fff)") => "#000 #fff"
+ * @example parseLightDark("#000") => "#000 #000"
  */
 export declare function parseLightDark(value: string): string;
 /**
@@ -61,10 +69,14 @@ export declare function parseLightDark(value: string): string;
  */
 export declare function getLightDarkCssString(light: string, dark: string): string;
 /**
- * Parses a border value containing light-dark() into space-separated color and size parts.
- * @param value - Border value string containing light-dark(), e.g. "light-dark(#000, #fff) 0px"
+ * Parses a border value into space-separated color and size parts.
+ *
+ * Accepts both `light-dark(<light>, <dark>) <rest>` and `<color> <rest>`; the latter turns up
+ * because the CSS minifier collapses `light-dark(a, a)` to `a`. See `parseLightDark`.
+ * @param value - Border value, e.g. "light-dark(#000, #fff) 0px" or "#000 0px"
  * @returns Space-separated string of light color, dark color, and size, or null if invalid
  * @example parseBorder("light-dark(#000, #fff) 0px") => "#000 #fff 0px"
+ * @example parseBorder("#000 0px") => "#000 #000 0px"
  */
 export declare function parseBorder(value: string): string | null;
 /**
@@ -74,4 +86,16 @@ export declare function parseBorder(value: string): string | null;
  * @example parseShadow("0px 0px 0px 0px light-dark(#000, #fff)") => "0px 0px 0px 0px #000 #fff"
  */
 export declare function parseShadow(value: string): string;
+/**
+ * Re-joins the parts of a comma-separated numeric code (RGB, CMYK) with the
+ * requested separator. Values that are not a multi-part list are returned
+ * untouched, so a free-text code is never mangled.
+ */
+export declare function formatColorCodeSeparator(value: string, separator: CxColorSwatchCodeSeparator): string;
+/**
+ * Rewrites the prefix on a hex code — `#`, `0x`, or none — leaving an empty
+ * value alone. Any existing prefix is stripped first, so a code that already
+ * carries one can be re-formatted without stacking prefixes.
+ */
+export declare function formatHexCode(value: string, format: CxColorSwatchHexFormat): string;
 export {};