@ctrliq/quantic-components 1.63.6 → 1.64.0

package/dist/truncate/index.d.ts

@@ -0,0 +1,19 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+import { TooltipPlacement } from '../tooltip/index.constants';
+export { TooltipPlacement } from '../tooltip/index.constants';
+export declare class Truncate extends QuanticElement {
+    static meta: ComponentMeta;
+    value: string;
+    maxLines: number;
+    placement: TooltipPlacement;
+    private textEl?;
+    private observer?;
+    private isTruncated;
+    static styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private checkTruncation;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/truncate/index.js

@@ -0,0 +1,134 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { state, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { quanticElement, QuanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
+import { TooltipPlacement } from '../tooltip/index.constants';
+import { Tooltip } from '../tooltip';
+export { TooltipPlacement } from '../tooltip/index.constants';
+Tooltip.ensureDefined();
+let Truncate = class Truncate extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.maxLines = 1;
+        this.placement = TooltipPlacement.Top;
+        this.isTruncated = false;
+    }
+    firstUpdated() {
+        this.observer = new ResizeObserver(() => this.checkTruncation());
+        this.observer.observe(this);
+        this.checkTruncation();
+    }
+    updated(changed) {
+        if (changed.has('maxLines') || changed.has('value')) {
+            this.checkTruncation();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observer?.disconnect();
+    }
+    checkTruncation() {
+        if (!this.textEl)
+            return;
+        const isTruncated = this.maxLines > 1
+            ? this.textEl.scrollHeight > this.textEl.clientHeight
+            : this.textEl.scrollWidth > this.textEl.clientWidth;
+        if (isTruncated !== this.isTruncated) {
+            this.isTruncated = isTruncated;
+        }
+    }
+    render() {
+        const text = html `
+      <div
+        class=${classMap({ text: true, 'text--multiline': this.maxLines > 1 })}
+        style=${styleMap({ '--truncate-max-lines': String(this.maxLines) })}
+        tabindex=${this.isTruncated ? '0' : nothing}
+      >
+        ${this.value}
+      </div>
+    `;
+        return this.isTruncated
+            ? html `
+          <quantic-tooltip placement=${this.placement}>
+            ${text}
+            <span slot="content">${this.value}</span>
+          </quantic-tooltip>
+        `
+            : text;
+    }
+};
+Truncate.meta = {
+    tag: 'quantic-truncate',
+    description: 'Renders text with ellipsis overflow. ' +
+        'A tooltip revealing the full value appears on hover or keyboard focus when the text is actually truncated.',
+    category: 'display',
+    relatedTo: ['quantic-tooltip'],
+};
+Truncate.styles = css `
+    :host {
+      display: block;
+      min-width: 0;
+    }
+
+    quantic-tooltip {
+      display: block;
+      min-width: 0;
+    }
+
+    .text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+
+    .text--multiline {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: var(--truncate-max-lines);
+      line-clamp: var(--truncate-max-lines);
+      white-space: normal;
+    }
+  `;
+__decorate([
+    prop({
+        type: 'string',
+        default: '',
+        description: 'Text to display and show in the tooltip when truncated.',
+    })
+], Truncate.prototype, "value", void 0);
+__decorate([
+    prop({
+        type: 'number',
+        attribute: 'max-lines',
+        default: '1',
+        description: 'Maximum number of visible lines before truncating. Defaults to 1 (single-line).',
+    })
+], Truncate.prototype, "maxLines", void 0);
+__decorate([
+    prop({
+        type: 'TooltipPlacement',
+        options: Object.values(TooltipPlacement),
+        default: TooltipPlacement.Top,
+        description: 'Preferred tooltip placement relative to the text.',
+    })
+], Truncate.prototype, "placement", void 0);
+__decorate([
+    query('.text')
+], Truncate.prototype, "textEl", void 0);
+__decorate([
+    state()
+], Truncate.prototype, "isTruncated", void 0);
+Truncate = __decorate([
+    quanticElement('quantic-truncate')
+], Truncate);
+export { Truncate };

package/dist/truncate/index.stories.d.ts

@@ -0,0 +1,24 @@
+import { TooltipPlacement } from './index';
+interface Args {
+    value: string;
+    maxLines: number;
+    placement: TooltipPlacement;
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        placement: {
+            control: {
+                type: string;
+            };
+            options: ("top" | "right" | "bottom" | "left" | "top-end" | "top-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "left-end" | "left-start")[];
+        };
+    };
+};
+export default _default;
+export declare const Default: import("../shared/story").StoryObject<Args>;
+export declare const NotTruncated: import("../shared/story").StoryObject<Args>;
+export declare const Multiline: import("../shared/story").StoryObject<Args>;
+export declare const TooltipBottom: import("../shared/story").StoryObject<Args>;

package/dist/truncate/index.stories.js

@@ -0,0 +1,26 @@
+import { story } from '../shared/story';
+import { TooltipPlacement } from './index';
+export default {
+    title: 'Components/Display/Truncate',
+    component: 'quantic-truncate',
+    tags: ['autodocs'],
+    argTypes: {
+        placement: {
+            control: { type: 'select' },
+            options: Object.values(TooltipPlacement),
+        },
+    },
+};
+const long = 'This is a very long string that will overflow its container and trigger the tooltip on hover.';
+const multilineText = 'Design systems are a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications. They are the single source of truth for a product\'s design language and serve as a foundation for consistent, high-quality experiences.';
+const base = story({
+    args: { value: long, maxLines: 1, placement: TooltipPlacement.Top },
+}).render(({ html, value, maxLines, placement }) => html `
+    <div style="width: 300px;">
+      <quantic-truncate value=${value} max-lines=${maxLines} placement=${placement}></quantic-truncate>
+    </div>
+  `);
+export const Default = base;
+export const NotTruncated = base.override({ value: 'Short text' });
+export const Multiline = base.override({ value: multilineText, maxLines: 3 });
+export const TooltipBottom = base.override({ placement: TooltipPlacement.Bottom });

package/dist/types/index.d.ts

@@ -39,3 +39,4 @@ export * from './textarea';
 export * from './toast';
 export * from './toggle';
 export * from './tooltip';
+export * from './truncate';

package/dist/types/truncate/index.d.ts

@@ -0,0 +1,19 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+import { TooltipPlacement } from '../tooltip/index.constants';
+export { TooltipPlacement } from '../tooltip/index.constants';
+export declare class Truncate extends QuanticElement {
+    static meta: ComponentMeta;
+    value: string;
+    maxLines: number;
+    placement: TooltipPlacement;
+    private textEl?;
+    private observer?;
+    private isTruncated;
+    static styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    disconnectedCallback(): void;
+    private checkTruncation;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/types/truncate/index.stories.d.ts

@@ -0,0 +1,24 @@
+import { TooltipPlacement } from './index';
+interface Args {
+    value: string;
+    maxLines: number;
+    placement: TooltipPlacement;
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        placement: {
+            control: {
+                type: string;
+            };
+            options: ("top" | "right" | "bottom" | "left" | "top-end" | "top-start" | "right-end" | "right-start" | "bottom-end" | "bottom-start" | "left-end" | "left-start")[];
+        };
+    };
+};
+export default _default;
+export declare const Default: import("../shared/story").StoryObject<Args>;
+export declare const NotTruncated: import("../shared/story").StoryObject<Args>;
+export declare const Multiline: import("../shared/story").StoryObject<Args>;
+export declare const TooltipBottom: import("../shared/story").StoryObject<Args>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.63.6",
+  "version": "1.64.0",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {