@orangelogic/design-system 2.190.0 → 2.192.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/library/chunks/{asset-link-format.D--xQVgR.js → asset-link-format.CDd4iPA2.js} +1149 -1001
- package/library/chunks/{color-swatch-group.tnhiQ0jp.js → color-swatch-group.NOcRP-23.js} +4 -3
- package/library/chunks/{confirm-popover.CrQKEChc.js → confirm-popover.jCP9CdcD.js} +1 -1
- package/library/chunks/content-builder.BX4pHujE.js +60 -0
- package/library/chunks/{dialog.CWGtufDA.js → dialog.B6hZ7fvn.js} +2 -2
- package/library/chunks/{document-viewer.C90j1Xrr.js → document-viewer.CRluR-_W.js} +3 -2
- package/library/chunks/{image.CTMzUqCC.js → image.CiQwSDfe.js} +186 -187
- package/library/chunks/{toast.CXEAfCvN.js → toast.C5Ir5yKA.js} +1 -1
- package/library/chunks/transformation.BfIEi4p4.js +300 -0
- package/library/components/asset-link-format.js +2 -2
- package/library/components/atoms.js +3 -3
- package/library/components/color-swatch-group.js +3 -3
- package/library/components/confirm-popover.js +2 -2
- package/library/components/cropper.js +1 -1
- package/library/components/dialog.js +1 -1
- package/library/components/document-viewer.js +2 -2
- package/library/components/drawer.js +2 -2
- package/library/components/file-on-demand.js +2 -2
- package/library/components/image.js +2 -3
- package/library/components/masonry.js +136 -107
- package/library/components/molecules.js +1 -1
- package/library/components/organisms.js +2 -2
- package/library/components/popup.js +100 -97
- package/library/components/select.js +16 -11
- package/library/components/types.js +22267 -21934
- package/library/components/video.js +1 -1
- package/library/package.json +1 -1
- package/library/packages/atoms/src/components/image/image.d.ts +36 -4
- package/library/packages/atoms/src/components/popup/popup.d.ts +11 -0
- package/library/packages/atoms/src/components/select/select.d.ts +8 -0
- package/library/packages/events/src/cx-asset-transformation-dialog-confirm.d.ts +2 -0
- package/library/packages/molecules/src/asset-picker/asset-picker.d.ts +20 -1
- package/library/packages/molecules/src/cropper/cropper.d.ts +0 -1
- package/library/packages/molecules/src/cropper/react/Cropper.d.ts +0 -1
- package/library/packages/molecules/src/gallery-item/gallery-item.d.ts +10 -0
- package/library/packages/molecules/src/masonry/masonry.d.ts +24 -0
- package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts +46 -2
- package/library/packages/organisms/src/asset-link-format/components/asset-link-format-proxy/asset-link-format-proxy.d.ts +36 -1
- package/library/packages/organisms/src/asset-transformation-dialog/asset-transformation-dialog.d.ts +20 -2
- package/library/packages/organisms/src/bento-grid/bento-grid.d.ts +101 -0
- package/library/packages/organisms/src/carousel/carousel.d.ts +26 -0
- package/library/packages/organisms/src/content-builder/blocks/image/image.d.ts +65 -1
- package/library/packages/organisms/src/content-builder/blocks/video/video.d.ts +5 -0
- package/library/packages/organisms/src/content-builder/components/config-form/config-form.d.ts +2 -1
- package/library/packages/organisms/src/content-builder/components/gallery-picker/gallery-picker.d.ts +6 -0
- package/library/packages/organisms/src/content-builder/configs/carousel.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs/gallery.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs/image.d.ts +2 -0
- package/library/packages/organisms/src/content-builder/configs/timeline.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs/video.d.ts +1 -0
- package/library/packages/organisms/src/content-builder/configs-controller.d.ts +10 -0
- package/library/packages/organisms/src/content-builder/content-builder.d.ts +31 -6
- package/library/packages/organisms/src/content-builder/styleController.d.ts +2 -0
- package/library/packages/tools/src/fetch-image/fetch-image.d.ts +28 -5
- package/library/packages/types/src/asset-link-format.d.ts +0 -1
- package/library/packages/types/src/content-builder.d.ts +7 -0
- package/library/packages/types/src/gallery-item.d.ts +1 -0
- package/library/packages/types/src/masonry.d.ts +1 -0
- package/library/packages/utils/src/transformation/transformation.d.ts +91 -0
- package/library/react-web-component.d.ts +67 -7
- package/library/utils.js +192 -182
- package/package.json +1 -1
- package/library/chunks/transformation.8uLv6uwG.js +0 -264
- package/library/packages/types/src/download-format-picker.d.ts +0 -7
|
@@ -22,19 +22,19 @@
|
|
|
22
22
|
export type CxGraphViewNodeAction = { controlType: 'default' | 'switch'; icon: string; id: string; name: string; showDivider: boolean; style: { color: string; }; };
|
|
23
23
|
export type CxGraphViewRecord = any;
|
|
24
24
|
export type CxGraphViewSummary = { icon: string; texts: string[]; };
|
|
25
|
-
export type CxMasonryMasonryItem = { alt: string; hasError: boolean; id: string; loading: boolean; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; src: string; };
|
|
25
|
+
export type CxMasonryMasonryItem = { alt: string; extension: string; hasError: boolean; id: string; loading: boolean; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; src: string; };
|
|
26
26
|
export type CxMasonryMasonryItemAction = { color: string; event: string; icon: string; src: string; tooltip: string; };
|
|
27
27
|
export type CxMentionsAutocompleteItem = { id: string; label: string; name: string; suffixContent: string; suffixIcon: string; suffixTooltip: string; suffixType: 'badge'; title: string; type: string; };
|
|
28
28
|
export type CxMultiSelectColumnData = { id: string; items: { disabled: boolean; group: string; id: string; index: string; text: string; tooltip: string; type: string; }[]; sort: boolean; title: string; };
|
|
29
29
|
export type CxShareOptionListShareOptionListItem = { disabled: boolean; icon: string; id: string; name: string; tooltip: string; };
|
|
30
30
|
export type CxStepperWizardStepData = { color: string; description: string; icon: string; iconVariant: 'outlined' | 'filled' | 'fa'; id: string; name: string; readonly: boolean; state: 'Done' | 'Active' | 'None' | 'Disabled'; };
|
|
31
|
-
export type CxAssetLinkFormatAsset = { allowATSLink: boolean; docSubType: string; docType: 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; extension: string; height: string; id: string; identifier: string; imageUrl: string; name: string;
|
|
31
|
+
export type CxAssetLinkFormatAsset = { allowATSLink: boolean; docSubType: string; docType: 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; extension: string; height: string; id: string; identifier: string; imageUrl: string; name: string; scrubUrl: string; size: string; tags: string; width: string; };
|
|
32
32
|
export type CxAssetLinkFormatCropMode = { auto: boolean; disabledSize: boolean; label: string; value: string; };
|
|
33
33
|
export type CxAssetLinkFormatFocusMode = { auto: boolean; label: string; value: string; };
|
|
34
34
|
export type CxAssetLinkFormatProxy = { cdnName: string; extension: string; formatHeight: number; formatWidth: number; height: number; id: string; permanentLink: string; proxyLabel: string; proxyName: string; width: number; };
|
|
35
35
|
export type CxAssetLinkFormatTransformation = { key: 'Crop' | 'Metadata' | 'Proxy' | 'Quality' | 'Resize' | 'Rotate'; value: { disabledSize: boolean; focusMode: string; height: number; isFocusModeAuto: boolean; keepMetadata: boolean; mode: string; position: 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center-center' | 'center-left' | 'center-right' | 'top-center' | 'top-left' | 'top-right'; quality: number; ratioHeight: number; ratioWidth: number; rotation: number; unit: '%' | 'px'; width: number; x: number; y: number; }; };
|
|
36
|
-
export type CxBentoGridGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; docType: '' | 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; filler: boolean; header: string; id: string; isClone: boolean; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
|
|
37
|
-
export type CxCarouselGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; docType: '' | 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; filler: boolean; header: string; id: string; isClone: boolean; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
|
|
36
|
+
export type CxBentoGridGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; docType: '' | 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; extension: string; filler: boolean; header: string; id: string; isClone: boolean; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
|
|
37
|
+
export type CxCarouselGalleryItem = { additions: string[]; alt: string; cardType: 'asset' | 'folder' | 'link' | 'page' | 'space'; className: string; details: string; docType: '' | 'Album' | 'Audio' | 'Audio segment' | 'Image' | 'Multimedia' | 'ProjectDocument' | 'Story' | 'Video' | 'Widget'; extension: string; filler: boolean; header: string; id: string; isClone: boolean; name: string; objectFit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'; openInNewTab: boolean; pageId: string; rawId: string; size: string; src: string; url: string; };
|
|
38
38
|
export type CxChatbotChatbotEvent = { event: string; excludedFromPurposes: string[]; label: string; };
|
|
39
39
|
export type CxTableTimeFormatterParams = { color: string; fontSize: string; fontWeight: string; inputUnit: string; locale: string; placeholder: string; style: dictionary; unitsFormat: string; displayStyle: string; paramsMapField: string; paramsMap: dictionary; };
|
|
40
40
|
export type CxTableTextFormatParams = { colorMap: dictionary; color: string; };
|
|
@@ -2503,6 +2503,14 @@
|
|
|
2503
2503
|
* The path to the image to load.
|
|
2504
2504
|
*/
|
|
2505
2505
|
src?: string;
|
|
2506
|
+
/**
|
|
2507
|
+
* Candidate sources for the underlying `img`, as a standard `srcset` value (e.g. `"…/re_w_400/img.jpg 400w, …/re_w_800/img.jpg 800w"`). <br/> Lets the browser fetch and decode only the pixels the layout needs, which is what bounds memory on image-heavy pages — a large original decodes to `naturalWidth × naturalHeight × 4` bytes regardless of its display size. Pair with `sizes`; without it the browser assumes the image is `100vw` wide.
|
|
2508
|
+
*/
|
|
2509
|
+
srcset?: string;
|
|
2510
|
+
/**
|
|
2511
|
+
* The `sizes` attribute for the underlying `img`, describing the rendered width (e.g. `"400px"`). Only meaningful together with `srcset`.
|
|
2512
|
+
*/
|
|
2513
|
+
sizes?: string;
|
|
2506
2514
|
/**
|
|
2507
2515
|
* The path to the placeholder image to be shown if src is not available.
|
|
2508
2516
|
*/
|
|
@@ -2552,7 +2560,7 @@
|
|
|
2552
2560
|
*/
|
|
2553
2561
|
retryOnError?: boolean;
|
|
2554
2562
|
/**
|
|
2555
|
-
* Maximum number of retry attempts when `retry-on-error` is enabled.
|
|
2563
|
+
* Maximum number of retry attempts when `retry-on-error` is enabled. <br/> Set high enough to outlast a transient backend overload: a page full of images can push the transform service into 503s, and those images need to keep retrying until it recovers rather than falling back to a broken-image icon. The backoff is exponential and capped at 10s per attempt, so the attempts spread out instead of adding to the load.
|
|
2556
2564
|
*/
|
|
2557
2565
|
maxRetries?: number;
|
|
2558
2566
|
/**
|
|
@@ -5377,6 +5385,10 @@
|
|
|
5377
5385
|
* When true, restricts selection to the picker's declared `type`(s): assets of any other type are rejected on confirmation. When false, `type` only pre-fills the filter.
|
|
5378
5386
|
*/
|
|
5379
5387
|
restrict?: boolean;
|
|
5388
|
+
/**
|
|
5389
|
+
* Asset types whose original `src` is used as-is, bypassing the API's representative (thumbnail/preview) URL. Only images are renderable directly, so every other type — video, audio, documents — falls back to its representative when the API returns one.
|
|
5390
|
+
*/
|
|
5391
|
+
noRepresentativeFor?: 'all' | 'audio' | 'image' | 'other' | 'video'[];
|
|
5380
5392
|
/**
|
|
5381
5393
|
* An optional record ID (or space-separated list of record IDs, for `multiple` pickers) used to fetch a clean preview image and title, bypassing any stored URL/name that may be stale or have transformations applied.
|
|
5382
5394
|
*/
|
|
@@ -5624,7 +5636,7 @@
|
|
|
5624
5636
|
/**
|
|
5625
5637
|
*
|
|
5626
5638
|
*/
|
|
5627
|
-
image?: { extension: string; height: number;
|
|
5639
|
+
image?: { extension: string; height: number; rotation: number; url: string; width: number; x: number; y: number; };
|
|
5628
5640
|
/**
|
|
5629
5641
|
*
|
|
5630
5642
|
*/
|
|
@@ -6750,7 +6762,15 @@
|
|
|
6750
6762
|
/**
|
|
6751
6763
|
* The key to use for the id of the items in the masonry layout.
|
|
6752
6764
|
*/
|
|
6753
|
-
idKey?: 'src' | 'loading' | 'alt' | 'hasError' | 'id' | 'objectFit';
|
|
6765
|
+
idKey?: 'src' | 'extension' | 'loading' | 'alt' | 'hasError' | 'id' | 'objectFit';
|
|
6766
|
+
/**
|
|
6767
|
+
* The proxy format the item images were resolved with. <br/> Only used to decide whether a `srcset` may be generated: an original-file format paired with an animated source must be delivered untouched.
|
|
6768
|
+
*/
|
|
6769
|
+
format?: string;
|
|
6770
|
+
/**
|
|
6771
|
+
* Whether `format` was picked by hand. When false each item's format follows its own file extension instead, so a mixed list can serve animated originals and resizable raster proxies side by side.
|
|
6772
|
+
*/
|
|
6773
|
+
manualFormat?: boolean;
|
|
6754
6774
|
/**
|
|
6755
6775
|
* When true, forwards `no-crossorigin` to each inner `cx-image`, disabling CORS mode (e.g. in Site Builder contexts where CORS headers are absent).
|
|
6756
6776
|
*/
|
|
@@ -7855,6 +7875,14 @@
|
|
|
7855
7875
|
* The ID of the default proxy format. This is a string that represents the ID of the selected proxy format from the list of available proxies.
|
|
7856
7876
|
*/
|
|
7857
7877
|
defaultProxy?: string;
|
|
7878
|
+
/**
|
|
7879
|
+
* Whether the format listbox offers an `Auto` entry, which derives the proxy from the asset's file extension instead of the author naming one.
|
|
7880
|
+
*/
|
|
7881
|
+
canAutoFormat?: boolean;
|
|
7882
|
+
/**
|
|
7883
|
+
* Whether `Auto` is the current choice. <br/> Tracked next to `selectedProxy` rather than encoded into it, so `selectedProxy` stays a real proxy id for every consumer that reads it — only the origin of that id differs.
|
|
7884
|
+
*/
|
|
7885
|
+
autoFormat?: boolean;
|
|
7858
7886
|
/**
|
|
7859
7887
|
*
|
|
7860
7888
|
*/
|
|
@@ -7937,6 +7965,10 @@
|
|
|
7937
7965
|
* The default format to fall back to if the asset has no transformations or selected proxy.
|
|
7938
7966
|
*/
|
|
7939
7967
|
defaultFormat?: string;
|
|
7968
|
+
/**
|
|
7969
|
+
* Whether the author picked the format by hand rather than letting it follow the asset's file extension. `false` (the default) means `Auto`.
|
|
7970
|
+
*/
|
|
7971
|
+
manualFormat?: boolean;
|
|
7940
7972
|
/**
|
|
7941
7973
|
* Optional label rendered as the dialog title. Falls back to the localized "Asset format" term.
|
|
7942
7974
|
*/
|
|
@@ -8027,6 +8059,18 @@
|
|
|
8027
8059
|
* Total number of items in the dataset, including those not yet loaded. When set, the scroll container height is extended to reflect the full dataset size so the scrollbar is accurate from the first render. Unloaded slots are approximated as 1×1 items.
|
|
8028
8060
|
*/
|
|
8029
8061
|
totalItems?: number;
|
|
8062
|
+
/**
|
|
8063
|
+
* The proxy format the item images were resolved with. <br/> Only used to decide whether a `srcset` may be generated: an original-file format paired with an animated source must be delivered untouched.
|
|
8064
|
+
*/
|
|
8065
|
+
format?: string;
|
|
8066
|
+
/**
|
|
8067
|
+
* Whether `format` was picked by hand. When false each item's format follows its own file extension instead, so a mixed grid can serve animated originals and resizable raster proxies side by side.
|
|
8068
|
+
*/
|
|
8069
|
+
manualFormat?: boolean;
|
|
8070
|
+
/**
|
|
8071
|
+
* Delay in milliseconds between releasing one row of images and the next. <br/> Images are held back until their row is released, so the browser opens roughly one row's worth of requests at a time instead of one per rendered item. Each transform URL is an uncached backend render, and enough of them in parallel returns 503. <br/> A row also waits for the previous row's images to finish (capped by `ROW_RELEASE_TIMEOUT`), so this is the floor between releases rather than the exact cadence. Set to `0` to disable gating and let every rendered row load immediately.
|
|
8072
|
+
*/
|
|
8073
|
+
rowReleaseDelay?: number;
|
|
8030
8074
|
/**
|
|
8031
8075
|
* The show content type.
|
|
8032
8076
|
*/
|
|
@@ -8183,6 +8227,14 @@
|
|
|
8183
8227
|
* The real total number of data in the carousel. Not affected by chunking.
|
|
8184
8228
|
*/
|
|
8185
8229
|
totalData?: number;
|
|
8230
|
+
/**
|
|
8231
|
+
* The proxy format the slide images were resolved with. <br/> Only used to decide whether a `srcset` may be generated: an original-file format paired with an animated source must be delivered untouched.
|
|
8232
|
+
*/
|
|
8233
|
+
format?: string;
|
|
8234
|
+
/**
|
|
8235
|
+
* Whether `format` was picked by hand. When false each slide's format follows its own file extension instead, so a mixed carousel can serve animated originals and resizable raster proxies side by side.
|
|
8236
|
+
*/
|
|
8237
|
+
manualFormat?: boolean;
|
|
8186
8238
|
/**
|
|
8187
8239
|
* When set, allows the user to navigate the carousel in the same direction indefinitely.
|
|
8188
8240
|
*/
|
|
@@ -9581,6 +9633,10 @@
|
|
|
9581
9633
|
* Asset transformation proxy format key.
|
|
9582
9634
|
*/
|
|
9583
9635
|
format?: string;
|
|
9636
|
+
/**
|
|
9637
|
+
* Whether `format` was picked by hand. When false each card's format follows its own file extension instead.
|
|
9638
|
+
*/
|
|
9639
|
+
manualFormat?: boolean;
|
|
9584
9640
|
/**
|
|
9585
9641
|
* Asset transformations applied to the image.
|
|
9586
9642
|
*/
|
|
@@ -9707,6 +9763,10 @@
|
|
|
9707
9763
|
* Asset transformation proxy format key.
|
|
9708
9764
|
*/
|
|
9709
9765
|
format?: string;
|
|
9766
|
+
/**
|
|
9767
|
+
* Whether `format` was picked by hand. When false each item's format follows its own file extension instead.
|
|
9768
|
+
*/
|
|
9769
|
+
manualFormat?: boolean;
|
|
9710
9770
|
/**
|
|
9711
9771
|
* Asset transformations applied to the image.
|
|
9712
9772
|
*/
|