Revert "chore: remove Truncate since it does not exist in Carbon v11"

This reverts commit 5833536199.

COMPONENT_INDEX.md

@@ -167,6 +167,7 @@
 - [`TooltipFooter`](#tooltipfooter)
 - [`TooltipIcon`](#tooltipicon)
 - [`TreeView`](#treeview)
+- [`Truncate`](#truncate)
 - [`UnorderedList`](#unorderedlist)
 
 ---
@@ -4708,6 +4709,24 @@ export interface TreeNode {
 | focus      | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
 | keydown    | forwarded  | --                                                            |
 
+## `Truncate`
+
+### Props
+
+| Prop name | Required | Kind             | Reactive | Type                              | Default value      | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
+| clamp     | No       | <code>let</code> | No       | <code>"end" &#124; "front"</code> | <code>"end"</code> | --          |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| --        | Yes     | --    | --       |
+
+### Events
+
+None.
+
 ## `UnorderedList`
 
 ### Props

docs/src/COMPONENT_API.json

@@ -14646,6 +14646,28 @@
       ],
       "rest_props": { "type": "Element", "name": "ul" }
     },
+    {
+      "moduleName": "Truncate",
+      "filePath": "src/Truncate/Truncate.svelte",
+      "props": [
+        {
+          "name": "clamp",
+          "kind": "let",
+          "type": "\"end\" | \"front\"",
+          "value": "\"end\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        }
+      ],
+      "moduleExports": [],
+      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "events": [],
+      "typedefs": [],
+      "rest_props": { "type": "Element", "name": "p" }
+    },
     {
       "moduleName": "UnorderedList",
       "filePath": "src/UnorderedList/UnorderedList.svelte",

docs/src/pages/components/Truncate.svx

@@ -0,0 +1,34 @@
+
+<script>
+  import { Truncate, truncate } from "carbon-components-svelte";
+  import Preview from "../../components/Preview.svelte";
+</script>
+
+This utility component wraps the `.bx--text-truncate--*` CSS selectors from [carbon-components](https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/globals/scss/_helper-classes.scss#L11) for single-line text truncation.
+
+## Default
+
+By default, text will be clamped at the end of the line. Text is wrapped with a paragraph (`p`) element. Use the [truncate action](#usetruncate) to truncate text in other elements.
+
+<Truncate>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+## Clamp front
+
+Set `clamp` to `"front"` to clamp the text from the front.
+
+<Truncate clamp="front">
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+## use:truncate
+
+The `truncate` action can be used on plain HTML elements.
+
+<h4 use:truncate>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</h4>
+<h4 use:truncate={{ clamp: "front" }}>
+  Carbon Components Svelte is a Svelte component library that implements the Carbon Design System, an open source design system by IBM.
+</h4>

src/Truncate/Truncate.svelte

@@ -0,0 +1,12 @@
+<script>
+  /** @type {"end" | "front"}*/
+  export let clamp = "end";
+</script>
+
+<p
+  class:bx--text-truncate--end="{clamp === 'end'}"
+  class:bx--text-truncate--front="{clamp === 'front'}"
+  {...$$restProps}
+>
+  <slot />
+</p>

src/Truncate/index.js

@@ -0,0 +1,2 @@
+export { default as Truncate } from "./Truncate.svelte";
+export { truncate } from "./truncate";

src/Truncate/truncate.d.ts

@@ -0,0 +1,12 @@
+interface TruncateOptions {
+  clamp?: "end" | "front";
+}
+
+export function TruncateAction(
+  node: HTMLElement,
+  options?: TruncateOptions
+): {
+  update: (options?: TruncateOptions) => void;
+};
+
+export default TruncateAction;

src/Truncate/truncate.js

@@ -0,0 +1,29 @@
+/**
+ * Svelte action that applies single-line text truncation to an element
+ * @typedef {{ clamp?: "end" | "front" }} TruncateOptions
+ * @type {(node: HTMLElement, options?: TruncateOptions) => { update: (options?: TruncateOptions) => void; }}
+ * @example
+ * <h1 use:truncate>...</h1>
+ * <h1 use:truncate={{ clamp: "front" }}>...</h1>
+ */
+export function truncate(node, options = {}) {
+  const prefix = "bx--text-truncate--";
+
+  function toggleClass(front = false) {
+    const classes = [...node.classList]
+      .filter((name) => !name.startsWith(prefix))
+      .join(" ");
+
+    node.className = `${classes} ${prefix}${front ? "front" : "end"}`;
+  }
+
+  toggleClass(options.clamp === "front");
+
+  return {
+    update(options) {
+      toggleClass(options.clamp === "front");
+    },
+  };
+}
+
+export default truncate;

src/index.js

@@ -127,6 +127,8 @@ export { Tooltip, TooltipFooter } from "./Tooltip";
 export { TooltipDefinition } from "./TooltipDefinition";
 export { TooltipIcon } from "./TooltipIcon";
 export { TreeView } from "./TreeView";
+export { Truncate } from "./Truncate";
+export { default as truncate } from "./Truncate/truncate";
 export {
   Header,
   HeaderAction,

tests/Truncate.test.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Truncate } from "../types";
+  import { truncate } from "../types";
+</script>
+
+<Truncate>
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+<Truncate clamp="front">
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</Truncate>
+
+<h4 use:truncate>
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</h4>
+<h4 use:truncate="{{ clamp: 'front' }}">
+  Carbon Components Svelte is a Svelte component library that implements the
+  Carbon Design System, an open source design system by IBM.
+</h4>

thumbnails/truncate.svg

@@ -2,7 +2,7 @@
 <svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>truncate</title>
     <g id="truncate" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Truncate…" transform="translate(131.264000, 86.624000)" fill="#fefefe" fill-rule="nonzero">
+        <g id="Truncate…" transform="translate(131.264000, 86.624000)" fill="#161616" fill-rule="nonzero">
             <polygon id="Path" points="3.672 0.888 3.672 8.376 2.664 8.376 2.664 0.888 0 0.888 0 0 6.336 0 6.336 0.888"></polygon>
             <path d="M7.62,8.376 L7.62,2.184 L8.58,2.184 L8.58,3.324 L8.64,3.324 C8.752,3.028 8.952,2.764 9.24,2.532 C9.528,2.3 9.924,2.184 10.428,2.184 L10.8,2.184 L10.8,3.144 L10.236,3.144 C9.716,3.144 9.31,3.242 9.018,3.438 C8.726,3.634 8.58,3.88 8.58,4.176 L8.58,8.376 L7.62,8.376 Z" id="Path"></path>
             <path d="M15.84,7.368 L15.792,7.368 C15.728,7.512 15.65,7.654 15.558,7.794 C15.466,7.934 15.352,8.058 15.216,8.166 C15.08,8.274 14.916,8.36 14.724,8.424 C14.532,8.488 14.308,8.52 14.052,8.52 C13.412,8.52 12.904,8.314 12.528,7.902 C12.152,7.49 11.964,6.908 11.964,6.156 L11.964,2.184 L12.924,2.184 L12.924,5.988 C12.924,7.1 13.396,7.656 14.34,7.656 C14.532,7.656 14.718,7.632 14.898,7.584 C15.078,7.536 15.238,7.464 15.378,7.368 C15.518,7.272 15.63,7.15 15.714,7.002 C15.798,6.854 15.84,6.676 15.84,6.468 L15.84,2.184 L16.8,2.184 L16.8,8.376 L15.84,8.376 L15.84,7.368 Z" id="Path"></path>

types/Truncate/Truncate.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
+
+type RestProps = SvelteHTMLElements["p"];
+
+export interface TruncateProps extends RestProps {
+  /**
+   * @default "end"
+   */
+  clamp?: "end" | "front";
+
+  [key: `data-${string}`]: any;
+}
+
+export default class Truncate extends SvelteComponentTyped<
+  TruncateProps,
+  Record<string, any>,
+  { default: {} }
+> {}

types/Truncate/truncate.d.ts

@@ -0,0 +1,12 @@
+interface TruncateOptions {
+  clamp?: "end" | "front";
+}
+
+export function TruncateAction(
+  node: HTMLElement,
+  options?: TruncateOptions
+): {
+  update: (options?: TruncateOptions) => void;
+};
+
+export default TruncateAction;

types/index.d.ts

@@ -143,6 +143,8 @@ export { default as TooltipFooter } from "./Tooltip/TooltipFooter.svelte";
 export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition.svelte";
 export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon.svelte";
 export { default as TreeView } from "./TreeView/TreeView.svelte";
+export { default as Truncate } from "./Truncate/Truncate.svelte";
+export { default as truncate } from "./Truncate/truncate";
 export { default as Header } from "./UIShell/Header.svelte";
 export { default as HeaderAction } from "./UIShell/HeaderAction.svelte";
 export { default as HeaderActionLink } from "./UIShell/HeaderActionLink.svelte";