@carbon/ibm-products-web-components 0.30.0-rc.0 → 0.31.0-rc.0

package/es/components/tearsheet/utils.js

@@ -0,0 +1,370 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { BUTTON_KIND } from '@carbon/web-components/es/components/button/defs.js';
+import '@carbon/web-components/es/components/tabs/index.js';
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/textarea/index.js';
+import '@carbon/web-components/es/components/slug/index.js';
+import '@carbon/web-components/es/components/ai-label/index.js';
+import '@carbon/web-components/es/components/toggle-tip/index.js';
+import '@carbon/web-components/es/components/dropdown/index.js';
+import '@carbon/web-components/es/components/progress-indicator/index.js';
+import '@carbon/web-components/es/components/progress-bar/index.js';
+import './tearsheet.js';
+import '../truncated-text/truncated-text.js';
+import { html } from 'lit';
+import { prefix } from '../../globals/settings.js';
+import styles from './story-styles.scss.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const storyPrefix = 'tearsheet-stories';
+const cancelButton = () => {
+    var _a;
+    (_a = document.querySelector(`${prefix}-tearsheet`)) === null || _a === void 0 ? void 0 : _a.removeAttribute('open');
+};
+const influencers = {
+    'No influencer': 0,
+    'Simple influencer': 1,
+    'Progress influencer': 2,
+};
+const getInfluencer = (index) => {
+    switch (index) {
+        case 1:
+            return html `<div
+        slot="influencer"
+        class=${`${storyPrefix}__dummy-content-block`}
+      >
+        Influencer
+      </div>`;
+        case 2:
+            return html ` <cds-progress-indicator
+        vertical
+        slot="influencer"
+        class=${`${storyPrefix}__dummy-content-block`}
+      >
+        <cds-progress-step
+          state="complete"
+          label="First step"
+          secondary-label="Optional label"
+          description="Step 1: Getting started with Carbon Design System"
+        ></cds-progress-step>
+        <cds-progress-step
+          label="Second step with tooltip"
+          state="current"
+        ></cds-progress-step>
+        <cds-progress-step
+          label="Third step with tooltip"
+          state="incomplete"
+        ></cds-progress-step>
+        <cds-progress-step
+          label="Fourth step"
+          secondary-label="Example invalid step"
+          state="invalid"
+        ></cds-progress-step>
+        <cds-progress-step
+          disabled
+          label="Fifth step"
+          state="incomplete"
+        ></cds-progress-step>
+      </cds-progress-indicator>`;
+        default:
+            return null;
+    }
+};
+const getContent = (index) => {
+    switch (index) {
+        case 1:
+            return html `
+        <style>
+          ${styles}
+        </style>
+        <div class=${`${storyPrefix}__dummy-content-block`}>
+          <h5>Section</h5>
+          <cds-text-input
+            label="Input A"
+            id="tearsheet-story-text-input-a"
+            class="${storyPrefix}text-input"
+          ></cds-text-input>
+          <cds-text-input
+            label="Input B"
+            id="tearsheet-story-text-input-b"
+            class="${storyPrefix}text-input"
+          ></cds-text-input>
+        </div>
+      `;
+        case 2:
+            return html ` <style>
+          ${styles}
+        </style>
+        <div class=${`${storyPrefix}__dummy-content-block`}>
+          <h5>Section</h5>
+          <div class="${storyPrefix}text-inputs">
+            <cds-text-input
+              label="Input A"
+              id="tearsheet-story-text-input-a"
+            ></cds-text-input>
+            <cds-text-input
+              label="Input B"
+              id="tearsheet-story-text-input-b"
+            ></cds-text-input>
+          </div>
+          <div class="${storyPrefix}text-inputs">
+            <cds-text-input
+              label="Input C"
+              id="tearsheet-story-text-input-c"
+            ></cds-text-input>
+            <cds-text-input
+              label="Input D"
+              id="tearsheet-story-text-input-d"
+            ></cds-text-input>
+          </div>
+          <div class="${storyPrefix}textarea-container">
+            <cds-textarea
+              label="Notes"
+              value="This is a text area"
+            ></cds-textarea>
+            <cds-textarea
+              label="Notes"
+              value="This is a text area"
+            ></cds-textarea>
+            <cds-textarea
+              label="Notes"
+              value="This is a text area"
+            ></cds-textarea>
+          </div>
+        </div>`;
+        default:
+            return null;
+    }
+};
+const getLabel = (index) => {
+    switch (index) {
+        case 1:
+            return html `<span slot="label">Optional label for context</span>`;
+        case 2:
+            return html `<span slot="label"
+        >A longer label giving a bit more context
+      </span>`;
+        default:
+            return null;
+    }
+};
+const getActionToolbarItems = (index) => {
+    switch (index) {
+        case 1:
+            return html `<cds-dropdown slot="header-actions" value="option 1">
+        ${['option 1', 'option 2', 'option 3', 'option 4'].map((option) => html ` <cds-dropdown-item value="${option}"
+              >${option}</cds-dropdown-item
+            >`)}
+      </cds-dropdown>`;
+        case 2:
+            return html `
+        <cds-button
+          slot="header-actions"
+          kind=${BUTTON_KIND.SECONDARY}
+          size="sm"
+          style="width: initial"
+        >
+          Secondary
+        </cds-button>
+        <cds-button
+          slot="header-actions"
+          kind=${BUTTON_KIND.PRIMARY}
+          size="sm"
+          style="width: initial"
+        >
+          Primary
+        </cds-button>
+      `;
+        default:
+            return null;
+    }
+};
+const toActions = (kinds) => {
+    return kinds === null || kinds === void 0 ? void 0 : kinds.map((kind) => {
+        return html `<cds-button
+      key=${kind}
+      slot="actions"
+      kind=${kind}
+      @click=${kind === 'ghost' && cancelButton}
+    >
+      ${kind.charAt(0).toUpperCase() + kind.slice(1)}
+    </cds-button>`;
+    });
+};
+// TODO: There are problems switching this
+const getActionItems = (index) => {
+    switch (index) {
+        case 1:
+            return toActions([BUTTON_KIND.PRIMARY]);
+        case 2:
+            return toActions([BUTTON_KIND.GHOST, BUTTON_KIND.PRIMARY]);
+        case 3:
+            return toActions([BUTTON_KIND.DANGER, BUTTON_KIND.PRIMARY]);
+        case 4:
+            return toActions([
+                BUTTON_KIND.GHOST,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        case 5:
+            return toActions([
+                BUTTON_KIND.DANGER,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        case 6:
+            return toActions([
+                BUTTON_KIND.GHOST,
+                BUTTON_KIND.TERTIARY,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        case 7:
+            return toActions([
+                BUTTON_KIND.DANGER,
+                BUTTON_KIND.TERTIARY,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        case 8:
+            return toActions([
+                BUTTON_KIND.GHOST,
+                BUTTON_KIND.DANGER,
+                BUTTON_KIND.TERTIARY,
+                BUTTON_KIND.SECONDARY,
+                BUTTON_KIND.PRIMARY,
+            ]);
+        default:
+            return null;
+    }
+};
+const getNavigation = (index) => {
+    switch (index) {
+        case 1:
+            return html ` <div
+        className="tearsheet-stories__tabs"
+        slot="header-navigation"
+      >
+        <cds-tabs value="1">
+          <cds-tab value="1">Tab 1</cds-tab>
+          <cds-tab value="2">Tab 2</cds-tab>
+          <cds-tab value="3">Tab 3</cds-tab>
+          <cds-tab value="4">Tab 4</cds-tab>
+        </cds-tabs>
+      </div>`;
+        default:
+            return null;
+    }
+};
+const getSlug = (index) => {
+    switch (index) {
+        case 1:
+            return html `<cds-slug size="xs" alignment="bottom-right">
+        <div slot="body-text">
+          <p class="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p class="secondary bold">Confidence score</p>
+          <!-- //cspell: disable -->
+          <p class="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <!-- //cspell: enable -->
+          <hr />
+          <p class="secondary">Model type</p>
+          <p class="bold">Foundation model</p>
+        </div>
+      </cds-slug>`;
+        default:
+            return null;
+    }
+};
+// cspell: disable
+const getDecorator = (decorator) => {
+    switch (decorator) {
+        case 'WITH_AI_LABEL':
+            return html `
+        <cds-ai-label alignment="bottom-right" slot="decorator">
+          <div slot="body-text">
+            <p class="secondary">AI Explained</p>
+            <h2 class="ai-label-heading">84%</h2>
+            <p class="secondary bold">Confidence score</p>
+            <p class="secondary">
+              Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+              do eiusmod tempor incididunt ut fsil labore et dolore magna
+              aliqua.
+            </p>
+            <hr />
+            <p class="secondary">Model type</p>
+            <p class="bold">Foundation model</p>
+          </div>
+        </cds-ai-label>
+      `;
+        case 'NON_AI_LABEL_DECORATOR':
+            return html `
+        <cds-toggletip slot="decorator" alignment="bottom">
+          <p slot="body-text">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <cds-link slot="actions">Test</cds-link>
+          <cds-button slot="actions">Button</cds-button>
+        </cds-toggletip>
+      `;
+        default:
+            return;
+    }
+};
+// cspell: enable
+const getDescription = (index) => {
+    switch (index) {
+        case 1:
+            return html `
+        <span slot="description">
+          This is a description for the tearsheet, providing an opportunity to
+          describe the flow over a couple of lines in the header of the
+          tearsheet.
+        </span>
+      `;
+        case 2:
+            return html `
+        <span slot="description">
+          <c4p-truncated-text
+            value="This is a description for the tearsheet, providing an opportunity to describe the flow over a couple of lines in the header of the tearsheet."
+            lines="1"
+            autoalign="true"
+            align="bottom"
+          />
+        </span>
+      `;
+        case 3:
+            return html `
+        <span slot="description">
+          <c4p-truncated-text
+            value="This is a description for the tearsheet, providing an opportunity to describe the flow over a couple of lines in the header of the tearsheet."
+            lines="2"
+            autoalign="true"
+            align="bottom"
+          />
+        </span>
+      `;
+        default:
+            return null;
+    }
+};
+
+export { getActionItems, getActionToolbarItems, getContent, getDecorator, getDescription, getInfluencer, getLabel, getNavigation, getSlug, influencers };
+//# sourceMappingURL=utils.js.map

package/es/components/tearsheet/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/tearsheet/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es/components/truncated-text/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './truncated-text';

package/es/components/truncated-text/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './truncated-text.js';
+//# sourceMappingURL=index.js.map

package/es/components/truncated-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/es/components/truncated-text/truncated-text.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import '@carbon/web-components/es/components/tooltip/index.js';
+import '@carbon/web-components/es/components/button/button.js';
+import '@carbon/web-components/es/components/link/index.js';
+export declare const blockClass = "c4p--truncated-text";
+declare const elementName = "c4p-truncated-text";
+/**
+ * TruncatedText.
+ *
+ * @element c4p-truncated-text
+ */
+export declare class CDSTruncatedText extends LitElement {
+    /**
+     * Specify how the tooltip should align with the content.
+     */
+    align: string;
+    /**
+     * Specify whether a auto align functionality should be applied
+     */
+    autoalign: boolean;
+    /**
+     * The label on the collapse button.
+     */
+    collapseLabel: string;
+    /**
+     * The label on expand button.
+     */
+    expandLabel: string;
+    /**
+     * Unique identifier for the element.
+     */
+    id: string;
+    /**
+     * The maximum number of lines to display before truncation.
+     */
+    lines: number;
+    /**
+     * The method to display the full text when truncated. Options are "tooltip" or "expand". if not passed, the text would just be truncated with ellipsis.
+     */
+    type: 'tooltip' | 'expand';
+    /**
+     * The string value to be truncated.
+     */
+    value: string;
+    private _isOverflowing;
+    private _isExpanded;
+    private _maxHeight;
+    private _textElement;
+    private _lineHeight;
+    private _isLayered;
+    private _resizeObserver?;
+    static styles: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _updateMaxHeight;
+    private _setupResizeObserver;
+    private _updateOverflowStatus;
+    private _handleKeydown;
+    private _toggleExpansion;
+    private _renderToggleButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: CDSTruncatedText;
+    }
+}
+export default CDSTruncatedText;