@payloadcms/ui 3.43.0-internal.693bd81 → 3.43.0

package/dist/elements/FolderView/ItemCardGrid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useFolder","FolderFileCard","baseClass","ItemCardGrid","t0","$","type","disabledItemKeys","items","RenderActionGroup","selectedItemKeys","subfolderCount","title","focusedRowIndex","isDragging","onItemClick","onItemKeyPress","selectedIndexes","t1","_jsx","className","children","t2","_jsxs","_Fragment","length","map","item","_index","index","itemKey","value","disabled","has","id","isFocused","isSelected","onClick","event","onKeyDown","event_0","PopupActions","previewUrl","url","selectedCount","size","_folderOrDocumentTitle"],"sources":["../../../../src/elements/FolderView/ItemCardGrid/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FolderDocumentItemKey, FolderOrDocument } from 'payload/shared'\n\nimport React from 'react'\n\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { FolderFileCard } from '../FolderFileCard/index.js'\nimport './index.scss'\n\nconst baseClass = 'item-card-grid'\n\ntype ItemCardGridProps = {\n  disabledItemKeys?: Set<FolderDocumentItemKey>\n  items: FolderOrDocument[]\n  RenderActionGroup?: (args: { index: number; item: FolderOrDocument }) => React.ReactNode\n  selectedItemKeys: Set<FolderDocumentItemKey>\n  title?: string\n} & (\n  | {\n      subfolderCount: number\n      type: 'file'\n    }\n  | {\n      subfolderCount?: never\n      type: 'folder'\n    }\n)\nexport function ItemCardGrid({\n  type,\n  disabledItemKeys,\n  items,\n  RenderActionGroup,\n  selectedItemKeys,\n  subfolderCount,\n  title,\n}: ItemCardGridProps) {\n  const { focusedRowIndex, isDragging, onItemClick, onItemKeyPress, selectedIndexes } = useFolder()\n\n  return (\n    <>\n      {title && <p className={`${baseClass}__title`}>{title}</p>}\n      <div className={baseClass}>\n        {!items || items?.length === 0\n          ? null\n          : items.map((item, _index) => {\n              const index = _index + (subfolderCount || 0)\n              const { itemKey, value } = item\n\n              return (\n                <FolderFileCard\n                  disabled={\n                    (isDragging && selectedItemKeys.has(itemKey)) || disabledItemKeys?.has(itemKey)\n                  }\n                  id={value.id}\n                  isFocused={focusedRowIndex === index}\n                  isSelected={selectedItemKeys.has(itemKey)}\n                  itemKey={itemKey}\n                  key={itemKey}\n                  onClick={(event) => {\n                    void onItemClick({ event, index, item })\n                  }}\n                  onKeyDown={(event) => {\n                    void onItemKeyPress({ event, index, item })\n                  }}\n                  PopupActions={\n                    RenderActionGroup\n                      ? RenderActionGroup({\n                          index,\n                          item,\n                        })\n                      : null\n                  }\n                  previewUrl={value?.url}\n                  selectedCount={selectedIndexes.size}\n                  title={value._folderOrDocumentTitle}\n                  type={type}\n                />\n              )\n            })}\n      </div>\n    </>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAkBlB,OAAO,SAAAC,aAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAsB;IAAAQ,IAAA;IAAAC,gBAAA;IAAAC,KAAA;IAAAC,iBAAA;IAAAC,gBAAA;IAAAC,cAAA;IAAAC;EAAA,IAAAR,EAQT;EAClB;IAAAS,eAAA;IAAAC,UAAA;IAAAC,WAAA;IAAAC,cAAA;IAAAC;EAAA,IAAsFjB,SAAA;EAAA,IAAAkB,EAAA;EAAA,IAAAb,CAAA,QAAAO,KAAA;IAIjFM,EAAA,GAAAN,KAAA,IAASO,IAAA,CAAC;MAAAC,SAAA,EAAa,GAAAlB,SAAA,SAAqB;MAAAmB,QAAA,EAAGT;IAAA,C;;;;;;;;IADlDU,EAAA,GAAAC,KAAA,CAAAC,SAAA;MAAAH,QAAA,GACGH,E,EACDC,IAAA,CAAC;QAAAC,SAAA,EAAAlB,SAAA;QAAAmB,QAAA,EACE,CAACb,KAAA,IAASA,KAAA,EAAAiB,MAAA,MAAkB,UAEzBjB,KAAA,CAAAkB,GAAA,EAAAC,IAAA,EAAAC,MAAA;UACE,MAAAC,KAAA,GAAcD,MAAA,IAAUjB,cAAA,KAAkB;UAC1C;YAAAmB,OAAA;YAAAC;UAAA,IAA2BJ,IAAA;UAAA,OAGzBR,IAAA,CAAAlB,cAAA;YAAA+B,QAAA,EAEIlB,UAAC,IAAcJ,gBAAA,CAAAuB,GAAA,CAAqBH,OAAA,KAAavB,gBAAA,EAAA0B,GAAA,CAAsBH,OAAA;YAAAI,EAAA,EAErEH,KAAA,CAAAG,EAAA;YAAAC,SAAA,EACOtB,eAAA,KAAoBgB,KAAA;YAAAO,UAAA,EACnB1B,gBAAA,CAAAuB,GAAA,CAAqBH,OAAA;YAAAA,OAAA;YAAAO,OAAA,EAAAC,KAAA;cAI1BvB,WAAA;gBAAAuB,KAAA;gBAAAT,KAAA;gBAAAF;cAAA,CAAiC;YAAA;YAAAY,SAAA,EAAAC,OAAA;cAGjCxB,cAAA;gBAAAsB,KAAA,EAAiBA,OAAA;gBAAAT,KAAA;gBAAAF;cAAA,CAAmB;YAAA;YAAAc,YAAA,EAGzChC,iBAAA,GACIA,iBAAA;cAAAoB,KAAA;cAAAF;YAAA,CAGA,QACA;YAAAe,UAAA,EAEMX,KAAA,EAAAY,GAAA;YAAAC,aAAA,EACG3B,eAAA,CAAA4B,IAAA;YAAAjC,KAAA,EACRmB,KAAA,CAAAe,sBAAA;YAAAxC;UAAA,GAjBFwB,OAAA;QAAA,CAqBX;MAAA,C;;;;;;;;;;;;;;;;;;SAvCRR,E","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","ContextFolderFileCard","baseClass","ItemCardGrid","type","items","subfolderCount","title","_jsxs","_Fragment","_jsx","className","length","map","item","_index","index","itemKey"],"sources":["../../../../src/elements/FolderView/ItemCardGrid/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport React from 'react'\n\nimport { ContextFolderFileCard } from '../FolderFileCard/index.js'\nimport './index.scss'\n\nconst baseClass = 'item-card-grid'\n\ntype ItemCardGridProps = {\n  items: FolderOrDocument[]\n  title?: string\n} & (\n  | {\n      subfolderCount: number\n      type: 'file'\n    }\n  | {\n      subfolderCount?: never\n      type: 'folder'\n    }\n)\nexport function ItemCardGrid({ type, items, subfolderCount, title }: ItemCardGridProps) {\n  return (\n    <>\n      {title && <p className={`${baseClass}__title`}>{title}</p>}\n      <div className={baseClass}>\n        {!items || items?.length === 0\n          ? null\n          : items.map((item, _index) => {\n              const index = _index + (subfolderCount || 0)\n              const { itemKey } = item\n\n              return <ContextFolderFileCard index={index} item={item} key={itemKey} type={type} />\n            })}\n      </div>\n    </>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAelB,OAAO,SAASC,aAAa;EAAEC,IAAI;EAAEC,KAAK;EAAEC,cAAc;EAAEC;AAAK,CAAqB;EACpF,oBACEC,KAAA,CAAAC,SAAA;eACGF,KAAA,iBAASG,IAAA,CAAC;MAAEC,SAAA,EAAW,GAAGT,SAAA,SAAkB;gBAAGK;qBAChDG,IAAA,CAAC;MAAIC,SAAA,EAAWT,SAAA;gBACb,CAACG,KAAA,IAASA,KAAA,EAAOO,MAAA,KAAW,IACzB,OACAP,KAAA,CAAMQ,GAAG,CAAC,CAACC,IAAA,EAAMC,MAAA;QACf,MAAMC,KAAA,GAAQD,MAAA,IAAUT,cAAA,IAAkB;QAC1C,MAAM;UAAEW;QAAO,CAAE,GAAGH,IAAA;QAEpB,oBAAOJ,IAAA,CAACT,qBAAA;UAAsBe,KAAA,EAAOA,KAAA;UAAOF,IAAA,EAAMA,IAAA;UAAoBV,IAAA,EAAMA;WAAfa,OAAA;MAC/D;;;AAIZ","ignoreList":[]}

package/dist/elements/FolderView/SortByPill/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/SortByPill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAmCrB,wBAAgB,UAAU,sBAuEzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/SortByPill/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAmCrB,wBAAgB,UAAU,sBA2EzB"}

package/dist/elements/FolderView/SortByPill/index.js

@@ -31,18 +31,16 @@ const orderOnOptions = [{
 }];
 export function SortByPill() {
   const {
-    documents,
-    sortAndUpdateState,
-    sortDirection,
-    sortOn,
-    subfolders
+    refineFolderData,
+    sort
   } = useFolder();
   const {
     t
   } = useTranslation();
+  const sortDirection = sort.startsWith('-') ? 'desc' : 'asc';
   const [selectedSortOption] = sortOnOptions.filter(({
     value
-  }) => value === sortOn);
+  }) => value === (sort.startsWith('-') ? sort.slice(1) : sort));
   const [selectedOrderOption] = orderOnOptions.filter(({
     value
   }) => value === sortDirection);
@@ -71,10 +69,11 @@ export function SortByPill() {
         }) => /*#__PURE__*/_jsx(PopupList.Button, {
           active: selectedSortOption.value === value,
           onClick: () => {
-            sortAndUpdateState({
-              documentsToSort: documents,
-              sortOn: value,
-              subfoldersToSort: subfolders
+            refineFolderData({
+              query: {
+                sort: value
+              },
+              updateURL: true
             });
             close();
           },
@@ -90,11 +89,14 @@ export function SortByPill() {
           active: selectedOrderOption.value === value,
           className: `${baseClass}__order-option`,
           onClick: () => {
-            sortAndUpdateState({
-              documentsToSort: documents,
-              sortDirection: value,
-              subfoldersToSort: subfolders
-            });
+            if (value === 'asc') {
+              refineFolderData({
+                query: {
+                  sort: value === 'asc' ? `-${sort}` : sort
+                },
+                updateURL: true
+              });
+            }
             close();
           },
           children: label(t)

package/dist/elements/FolderView/SortByPill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","ChevronIcon","SortDownIcon","SortUpIcon","useFolder","useTranslation","Pill","Popup","PopupList","baseClass","sortOnOptions","label","t","value","orderOnOptions","_jsxs","_Fragment","_jsx","SortByPill","documents","sortAndUpdateState","sortDirection","sortOn","subfolders","selectedSortOption","filter","selectedOrderOption","button","className","icon","size","horizontalAlign","render","close","GroupLabel","ButtonGroup","map","Button","active","onClick","documentsToSort","subfoldersToSort","Divider","showScrollbar","verticalAlign"],"sources":["../../../../src/elements/FolderView/SortByPill/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { SortDownIcon, SortUpIcon } from '../../../icons/Sort/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-by-pill'\n\nconst sortOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: keyof FolderOrDocument['value']\n}[] = [\n  { label: (t) => t('general:name'), value: '_folderOrDocumentTitle' },\n  { label: (t) => t('general:createdAt'), value: 'createdAt' },\n  { label: (t) => t('general:updatedAt'), value: 'updatedAt' },\n]\nconst orderOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: 'asc' | 'desc'\n}[] = [\n  {\n    label: (t) => (\n      <>\n        <SortUpIcon />\n        {t('general:ascending')}\n      </>\n    ),\n    value: 'asc',\n  },\n  {\n    label: (t) => (\n      <>\n        <SortDownIcon />\n        {t('general:descending')}\n      </>\n    ),\n    value: 'desc',\n  },\n]\nexport function SortByPill() {\n  const { documents, sortAndUpdateState, sortDirection, sortOn, subfolders } = useFolder()\n  const { t } = useTranslation()\n  const [selectedSortOption] = sortOnOptions.filter(({ value }) => value === sortOn)\n  const [selectedOrderOption] = orderOnOptions.filter(({ value }) => value === sortDirection)\n\n  return (\n    <Popup\n      button={\n        <Pill className={`${baseClass}__trigger`} icon={<ChevronIcon />} size=\"small\">\n          {sortDirection === 'asc' ? (\n            <SortUpIcon className={`${baseClass}__sort-icon`} />\n          ) : (\n            <SortDownIcon className={`${baseClass}__sort-icon`} />\n          )}\n          {selectedSortOption.label(t)}\n        </Pill>\n      }\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <>\n          <PopupList.GroupLabel label=\"Sort by\" />\n          <PopupList.ButtonGroup>\n            {sortOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedSortOption.value === value}\n                key={value}\n                onClick={() => {\n                  sortAndUpdateState({\n                    documentsToSort: documents,\n                    sortOn: value as keyof Pick<\n                      FolderOrDocument['value'],\n                      '_folderOrDocumentTitle' | 'createdAt' | 'updatedAt'\n                    >,\n                    subfoldersToSort: subfolders,\n                  })\n                  close()\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n          <PopupList.Divider />\n          <PopupList.GroupLabel label=\"Order\" />\n          <PopupList.ButtonGroup>\n            {orderOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedOrderOption.value === value}\n                className={`${baseClass}__order-option`}\n                key={value}\n                onClick={() => {\n                  sortAndUpdateState({\n                    documentsToSort: documents,\n                    sortDirection: value,\n                    subfoldersToSort: subfolders,\n                  })\n                  close()\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n        </>\n      )}\n      showScrollbar\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","ChevronIcon","SortDownIcon","SortUpIcon","useFolder","useTranslation","Pill","Popup","PopupList","baseClass","sortOnOptions","label","t","value","orderOnOptions","_jsxs","_Fragment","_jsx","SortByPill","refineFolderData","sort","sortDirection","startsWith","selectedSortOption","filter","slice","selectedOrderOption","button","className","icon","size","horizontalAlign","render","close","GroupLabel","ButtonGroup","map","Button","active","onClick","query","updateURL","Divider","showScrollbar","verticalAlign"],"sources":["../../../../src/elements/FolderView/SortByPill/index.tsx"],"sourcesContent":["import type { TFunction } from '@payloadcms/translations'\nimport type { FolderOrDocument } from 'payload/shared'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { SortDownIcon, SortUpIcon } from '../../../icons/Sort/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'sort-by-pill'\n\nconst sortOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: keyof FolderOrDocument['value']\n}[] = [\n  { label: (t) => t('general:name'), value: '_folderOrDocumentTitle' },\n  { label: (t) => t('general:createdAt'), value: 'createdAt' },\n  { label: (t) => t('general:updatedAt'), value: 'updatedAt' },\n]\nconst orderOnOptions: {\n  label: (t: TFunction) => React.ReactNode\n  value: 'asc' | 'desc'\n}[] = [\n  {\n    label: (t) => (\n      <>\n        <SortUpIcon />\n        {t('general:ascending')}\n      </>\n    ),\n    value: 'asc',\n  },\n  {\n    label: (t) => (\n      <>\n        <SortDownIcon />\n        {t('general:descending')}\n      </>\n    ),\n    value: 'desc',\n  },\n]\nexport function SortByPill() {\n  const { refineFolderData, sort } = useFolder()\n  const { t } = useTranslation()\n  const sortDirection = sort.startsWith('-') ? 'desc' : 'asc'\n  const [selectedSortOption] = sortOnOptions.filter(\n    ({ value }) => value === (sort.startsWith('-') ? sort.slice(1) : sort),\n  )\n  const [selectedOrderOption] = orderOnOptions.filter(({ value }) => value === sortDirection)\n\n  return (\n    <Popup\n      button={\n        <Pill className={`${baseClass}__trigger`} icon={<ChevronIcon />} size=\"small\">\n          {sortDirection === 'asc' ? (\n            <SortUpIcon className={`${baseClass}__sort-icon`} />\n          ) : (\n            <SortDownIcon className={`${baseClass}__sort-icon`} />\n          )}\n          {selectedSortOption.label(t)}\n        </Pill>\n      }\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => (\n        <>\n          <PopupList.GroupLabel label=\"Sort by\" />\n          <PopupList.ButtonGroup>\n            {sortOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedSortOption.value === value}\n                key={value}\n                onClick={() => {\n                  refineFolderData({\n                    query: {\n                      sort: value,\n                    },\n                    updateURL: true,\n                  })\n                  close()\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n          <PopupList.Divider />\n          <PopupList.GroupLabel label=\"Order\" />\n          <PopupList.ButtonGroup>\n            {orderOnOptions.map(({ label, value }) => (\n              <PopupList.Button\n                active={selectedOrderOption.value === value}\n                className={`${baseClass}__order-option`}\n                key={value}\n                onClick={() => {\n                  if (value === 'asc') {\n                    refineFolderData({\n                      query: {\n                        sort: value === 'asc' ? `-${sort}` : sort,\n                      },\n                      updateURL: true,\n                    })\n                  }\n                  close()\n                }}\n              >\n                {label(t)}\n              </PopupList.Button>\n            ))}\n          </PopupList.ButtonGroup>\n        </>\n      )}\n      showScrollbar\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/HTMLDiff/colors.scss

@@ -0,0 +1,35 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  :root {
+    --diff-delete-pill-bg: var(--theme-error-200);
+    --diff-delete-pill-color: var(--theme-error-600);
+    --diff-delete-pill-border: var(--theme-error-400);
+    --diff-delete-parent-bg: var(--theme-error-100);
+    --diff-delete-parent-color: var(--theme-error-800);
+    --diff-delete-link-color: var(--theme-error-600);
+
+    --diff-create-pill-bg: var(--theme-success-200);
+    --diff-create-pill-color: var(--theme-success-600);
+    --diff-create-pill-border: var(--theme-success-400);
+    --diff-create-parent-bg: var(--theme-success-100);
+    --diff-create-parent-color: var(--theme-success-800);
+    --diff-create-link-color: var(--theme-success-600);
+  }
+
+  html[data-theme='dark'] {
+    --diff-delete-pill-bg: var(--theme-error-200);
+    --diff-delete-pill-color: var(--theme-error-650);
+    --diff-delete-pill-border: var(--theme-error-400);
+    --diff-delete-parent-bg: var(--theme-error-100);
+    --diff-delete-parent-color: var(--theme-error-900);
+    --diff-delete-link-color: var(--theme-error-750);
+
+    --diff-create-pill-bg: var(--theme-success-200);
+    --diff-create-pill-color: var(--theme-success-650);
+    --diff-create-pill-border: var(--theme-success-400);
+    --diff-create-parent-bg: var(--theme-success-100);
+    --diff-create-parent-color: var(--theme-success-900);
+    --diff-create-link-color: var(--theme-success-750);
+  }
+}

package/dist/elements/HTMLDiff/diff/index.d.ts

@@ -0,0 +1,75 @@
+export interface HtmlDiffOptions {
+    /**
+     * The classNames for wrapper DOM.
+     * Use this to configure your own styles without importing the built-in CSS file
+     */
+    classNames?: Partial<{
+        createBlock?: string;
+        createInline?: string;
+        deleteBlock?: string;
+        deleteInline?: string;
+    }>;
+    /**
+     * @defaultValue 1000
+     */
+    greedyBoundary?: number;
+    /**
+     * When greedyMatch is enabled, if the length of the sub-tokens exceeds greedyBoundary,
+     * we will use the matched sub-tokens that are sufficiently good, even if they are not optimal, to enhance performance.
+     * @defaultValue true
+     */
+    greedyMatch?: boolean;
+    /**
+     * Determine the minimum threshold for calculating common sub-tokens.
+     * You may adjust it to a value larger than 2, but not lower, due to the potential inclusion of HTML tags in the count.
+     * @defaultValue 2
+     */
+    minMatchedSize?: number;
+    /**
+     * Whether to tokenize by character or by word.
+     * @defaultValue false
+     */
+    tokenizeByCharacter?: boolean;
+}
+export declare class HtmlDiff {
+    private readonly config;
+    private leastCommonLength;
+    private readonly matchedBlockList;
+    private readonly newTokens;
+    private readonly oldTokens;
+    private readonly operationList;
+    private sideBySideContents?;
+    private unifiedContent?;
+    constructor(oldHtml: string, newHtml: string, { classNames, greedyBoundary, greedyMatch, minMatchedSize, tokenizeByCharacter, }?: HtmlDiffOptions);
+    private computeBestMatchedBlock;
+    private computeMatchedBlockList;
+    private dressUpBlockTag;
+    private dressUpDiffContent;
+    private dressUpInlineTag;
+    private dressupMatchEnabledHtmlTag;
+    private dressUpText;
+    /**
+     * Generates a list of token entries that are matched between the old and new HTML. This list will not
+     * include token ranges that differ.
+     */
+    private getMatchedBlockList;
+    private getOperationList;
+    private slideBestMatchedBlock;
+    /**
+     * Convert HTML to tokens at character level, preserving HTML tags as complete tokens
+     * @example
+     * tokenize("<a> Hello World </a>")
+     * ["<a>", " ", "H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d", " ", "</a>"]
+     */
+    private tokenizeByCharacter;
+    /**
+     * convert HTML to tokens
+     * @example
+     * tokenize("<a> Hello World </a>")
+     * ["<a>"," ", "Hello", " ", "World", " ", "</a>"]
+     */
+    private tokenizeByWord;
+    getSideBySideContents(): string[];
+    getUnifiedContent(): string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/HTMLDiff/diff/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/HTMLDiff/diff/index.ts"],"names":[],"mappings":"AAmCA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAWD,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAgB;IACvC,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqB;IACtD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IACzC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAChD,OAAO,CAAC,kBAAkB,CAAC,CAAkB;IAC7C,OAAO,CAAC,cAAc,CAAC,CAAQ;gBAG7B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,MAAM,EACf,EACE,UAKC,EACD,cAAqB,EACrB,WAAkB,EAClB,cAAkB,EAClB,mBAA2B,GAC5B,GAAE,eAAoB;IA4CzB,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,uBAAuB;IAmC/B,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,kBAAkB;IAwD1B,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,0BAA0B;IAelC,OAAO,CAAC,WAAW;IAcnB;;;OAGG;IACH,OAAO,CAAC,mBAAmB;IA+D3B,OAAO,CAAC,gBAAgB;IAoDxB,OAAO,CAAC,qBAAqB;IA0B7B;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAiC3B;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IASf,qBAAqB,IAAI,MAAM,EAAE;IAiEjC,iBAAiB,IAAI,MAAM;CA4HnC"}