@carbon/ibm-products-web-components 0.34.0 → 0.35.0

package/es-custom/components/tearsheet-preview/_story-assets/step-tearsheet-preview.js

@@ -0,0 +1,264 @@
+/**
+ * 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 { __decorate } from 'tslib';
+import { LitElement, nothing, html } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { SignalWatcher } from '@lit-labs/signals';
+import { prefix } from '../../../globals/settings.js';
+import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
+import RightPanelClose32 from '@carbon/icons/es/right-panel--close/32';
+import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
+import '@carbon/web-components/es-custom/components/text-input/index.js';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import { StepInstance } from '../../../patterns/step-flow/step-flow-signal.js';
+import '../../../patterns/step-flow/step-group.js';
+import '../tearsheet.js';
+import '../tearsheet-body.js';
+import '../tearsheet-footer.js';
+import '../tearsheet-header.js';
+import '../tearsheet-influencer.js';
+import '../tearsheet-header-content.js';
+import '../tearsheet-navigation-bar.js';
+import '../tearsheet-scroller.js';
+import '../tearsheet-summary-content.js';
+import styles from './_storybook-styles.scss.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+let StepTearsheetNext = class StepTearsheetNext extends SignalWatcher(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.horizontal = false;
+        this._open = false;
+        this._stepInfo = new StepInstance();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._stepInfo.updateTotalStepCount = 3;
+    }
+    _onButtonClick() {
+        this._open = true;
+    }
+    _handleCancelButton() {
+        this._open = false;
+        this._stepInfo.reset();
+    }
+    _handleBackButton() {
+        const { currentStep } = this._stepInfo.data;
+        if (currentStep === 0) {
+            return;
+        }
+        return this._stepInfo.handlePrevious();
+    }
+    _handleNextButton() {
+        const { currentStep, totalSteps } = this._stepInfo.data;
+        if (currentStep + 1 === totalSteps) {
+            console.log('Form submitted:', this._stepInfo.data.formState);
+            this._handleCancelButton();
+            return;
+        }
+        return this._stepInfo.handleNext();
+    }
+    _handleEmailInput(e) {
+        const savedFormState = structuredClone(this._stepInfo.data.formState);
+        savedFormState.email = e.target.value;
+        this._stepInfo.updateFormState = savedFormState;
+    }
+    _handleCityInput(e) {
+        const savedFormState = structuredClone(this._stepInfo.data.formState);
+        savedFormState.city = e.target.value;
+        this._stepInfo.updateFormState = savedFormState;
+    }
+    _handleStateInput(e) {
+        const savedFormState = structuredClone(this._stepInfo.data.formState);
+        savedFormState.state = e.target.value;
+        this._stepInfo.updateFormState = savedFormState;
+    }
+    _toggleInfluencerPanel() {
+        var _a;
+        const influencer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${prefix}-tearsheet-influencer`);
+        if (influencer) {
+            influencer.toggleAttribute('influencer-panel-open');
+        }
+    }
+    _getStepContent() {
+        const { formState, currentStep } = this._stepInfo.data;
+        const typedFormState = formState;
+        switch (currentStep) {
+            case 0:
+                return html `
+          <div>
+            <cds-custom-text-input
+              label="Email"
+              id="step-email-input"
+              value=${typedFormState.email || ''}
+              @input="${this._handleEmailInput}"
+            ></cds-custom-text-input>
+          </div>
+        `;
+            case 1:
+                return html `
+          <div style="display: flex; gap: 1rem;">
+            <cds-custom-text-input
+              label="City"
+              id="step-city-input"
+              value=${typedFormState.city || ''}
+              @input="${this._handleCityInput}"
+            ></cds-custom-text-input>
+            <cds-custom-text-input
+              label="State"
+              id="step-state-input"
+              value=${typedFormState.state || ''}
+              @input="${this._handleStateInput}"
+            ></cds-custom-text-input>
+          </div>
+        `;
+            case 2:
+                return html `
+          <div>
+            <h4>Review your information</h4>
+            <pre>${JSON.stringify(formState, null, 2)}</pre>
+          </div>
+        `;
+            default:
+                return nothing;
+        }
+    }
+    _getProgressStepState(stepIndex) {
+        const { currentStep } = this._stepInfo.data;
+        if (stepIndex < currentStep) {
+            return 'complete';
+        }
+        if (stepIndex === currentStep) {
+            return 'current';
+        }
+        return 'incomplete';
+    }
+    render() {
+        const { currentStep, totalSteps } = this._stepInfo.data;
+        return html `
+      <cds-custom-button type="button" size="md" @click="${this._onButtonClick}">
+        Start create flow
+      </cds-custom-button>
+
+      <c4p-preview-tearsheet
+        ?open=${this._open}
+        variant="wide"
+        prevent-close-on-click-outside
+      >
+        <c4p-tearsheet-header ?hideCloseButton="${false}">
+          <c4p-tearsheet-header-content title="Create tearsheet title">
+            <label slot="label">Optional label for context</label>
+            <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>
+          </c4p-tearsheet-header-content>
+          ${this.horizontal
+            ? html `<cds-custom-progress-indicator>
+                <cds-custom-progress-step
+                  label="First step"
+                  state=${this._getProgressStepState(0)}
+                ></cds-custom-progress-step>
+                <cds-custom-progress-step
+                  label="Second step"
+                  state=${this._getProgressStepState(1)}
+                ></cds-custom-progress-step>
+                <cds-custom-progress-step
+                  label="Third step"
+                  state=${this._getProgressStepState(2)}
+                ></cds-custom-progress-step>
+              </cds-custom-progress-indicator>`
+            : nothing}
+        </c4p-tearsheet-header>
+
+        <!-- Influencer with Progress Indicator -->
+        ${!this.horizontal
+            ? html ` <c4p-tearsheet-influencer>
+              <cds-custom-progress-indicator vertical>
+                <cds-custom-progress-step
+                  label="First step"
+                  state=${this._getProgressStepState(0)}
+                ></cds-custom-progress-step>
+                <cds-custom-progress-step
+                  label="Second step"
+                  state=${this._getProgressStepState(1)}
+                ></cds-custom-progress-step>
+                <cds-custom-progress-step
+                  label="Third step"
+                  state=${this._getProgressStepState(2)}
+                ></cds-custom-progress-step>
+              </cds-custom-progress-indicator>
+            </c4p-tearsheet-influencer>`
+            : nothing}
+
+        <c4p-tearsheet-body>
+          <div slot="main-content">
+            <!-- Button to open influencer panel on small screens -->
+            <div class="influencerPanelTrigger">
+              <cds-custom-button
+                kind="ghost"
+                tooltip-text="Open Influencer"
+                tooltip-position="right"
+                @click="${this._toggleInfluencerPanel}"
+              >
+                ${iconLoader(RightPanelClose32, { slot: 'icon' })}
+              </cds-custom-button>
+            </div>
+
+            <!-- Step Content -->
+            ${this._getStepContent()}
+          </div>
+        </c4p-tearsheet-body>
+
+        <c4p-tearsheet-footer>
+          <div class="default__action-buttons">
+            <cds-custom-button
+              kind="ghost"
+              size="xl"
+              @click="${this._handleCancelButton}"
+            >
+              Cancel
+            </cds-custom-button>
+            <cds-custom-button
+              kind="secondary"
+              size="xl"
+              ?disabled="${currentStep === 0}"
+              @click="${this._handleBackButton}"
+            >
+              Back
+            </cds-custom-button>
+            <cds-custom-button size="xl" @click="${this._handleNextButton}">
+              ${currentStep < totalSteps - 1 ? 'Next' : 'Submit'}
+            </cds-custom-button>
+          </div>
+        </c4p-tearsheet-footer>
+      </c4p-preview-tearsheet>
+    `;
+    }
+};
+StepTearsheetNext.styles = styles; // Define your component's styles here
+__decorate([
+    property({ type: Boolean })
+], StepTearsheetNext.prototype, "horizontal", void 0);
+__decorate([
+    state()
+], StepTearsheetNext.prototype, "_open", void 0);
+StepTearsheetNext = __decorate([
+    customElement('step-tearsheet-preview')
+], StepTearsheetNext);
+
+export { StepTearsheetNext };
+//# sourceMappingURL=step-tearsheet-preview.js.map

package/es-custom/components/tearsheet-preview/_story-assets/step-tearsheet-preview.js.map

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

package/es-custom/components/tearsheet-preview/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * 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 './tearsheet';
+import './tearsheet-body';
+import './tearsheet-footer';
+import './tearsheet-header';
+import './tearsheet-influencer';
+import './tearsheet-header-content';
+import './tearsheet-navigation-bar';
+import './tearsheet-scroller';
+import './tearsheet-summary-content';

package/es-custom/components/tearsheet-preview/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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 './tearsheet.js';
+import './tearsheet-body.js';
+import './tearsheet-footer.js';
+import './tearsheet-header.js';
+import './tearsheet-influencer.js';
+import './tearsheet-header-content.js';
+import './tearsheet-navigation-bar.js';
+import './tearsheet-scroller.js';
+import './tearsheet-summary-content.js';
+//# sourceMappingURL=index.js.map

package/es-custom/components/tearsheet-preview/index.js.map

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

package/es-custom/components/tearsheet-preview/stack-signal.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export type StackStepSize = 'sm' | 'md' | 'lg';
+interface StackState {
+    stack: string[];
+    containers: Map<string, HTMLElement>;
+    stackStepSize: StackStepSize;
+}
+declare class StackManager {
+    #private;
+    get state(): StackState;
+    setStackStepSize(size: StackStepSize): void;
+    notifyStack(id: string, open: boolean, container: HTMLElement | null): void;
+    getDepth(id: string): number;
+    getScaleFactor(id: string): number;
+    getBlockSizeChange(id: string): string;
+    private remToPx;
+    reset(): void;
+}
+export declare const stackManager: StackManager;
+export {};

package/es-custom/components/tearsheet-preview/stack-signal.js

@@ -0,0 +1,103 @@
+/**
+ * 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 { __classPrivateFieldGet } from 'tslib';
+import { signal } from '@lit-labs/signals';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var _StackManager_state;
+const bufferMap = {
+    sm: 0.5,
+    md: 0.75,
+    lg: 1,
+};
+class StackManager {
+    constructor() {
+        _StackManager_state.set(this, signal({
+            stack: [],
+            containers: new Map(),
+            stackStepSize: 'lg',
+        }));
+    }
+    get state() {
+        return __classPrivateFieldGet(this, _StackManager_state, "f").get();
+    }
+    setStackStepSize(size) {
+        __classPrivateFieldGet(this, _StackManager_state, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StackManager_state, "f").get()), { stackStepSize: size }));
+    }
+    notifyStack(id, open, container) {
+        const currentState = __classPrivateFieldGet(this, _StackManager_state, "f").get();
+        const newContainers = new Map(currentState.containers);
+        if (open && container) {
+            newContainers.set(id, container);
+            // Move to top if already exists, otherwise add
+            const newStack = currentState.stack.includes(id)
+                ? [...currentState.stack.filter((i) => i !== id), id]
+                : [...currentState.stack, id];
+            __classPrivateFieldGet(this, _StackManager_state, "f").set(Object.assign(Object.assign({}, currentState), { stack: newStack, containers: newContainers }));
+        }
+        else {
+            // Remove from stack
+            newContainers.delete(id);
+            __classPrivateFieldGet(this, _StackManager_state, "f").set(Object.assign(Object.assign({}, currentState), { stack: currentState.stack.filter((i) => i !== id), containers: newContainers }));
+        }
+    }
+    getDepth(id) {
+        const { stack } = __classPrivateFieldGet(this, _StackManager_state, "f").get();
+        const index = stack.indexOf(id);
+        if (index === -1) {
+            return -1;
+        }
+        return stack.length - 1 - index; // topmost → 0
+    }
+    getScaleFactor(id) {
+        const depth = this.getDepth(id);
+        const { stackStepSize, containers } = __classPrivateFieldGet(this, _StackManager_state, "f").get();
+        const container = containers.get(id);
+        if (depth === -1 || !container) {
+            return 1;
+        }
+        const buffer = bufferMap[stackStepSize];
+        const bufferInPx = this.remToPx(buffer);
+        const width = container.offsetWidth;
+        const scale = (width - bufferInPx * 2 * depth) / width;
+        return scale;
+    }
+    getBlockSizeChange(id) {
+        const depth = this.getDepth(id);
+        const { stackStepSize } = __classPrivateFieldGet(this, _StackManager_state, "f").get();
+        if (depth === -1) {
+            return '0px';
+        }
+        const buffer = bufferMap[stackStepSize];
+        const bufferInPx = this.remToPx(buffer);
+        return `${bufferInPx * depth}px`;
+    }
+    remToPx(rem) {
+        return (rem * parseFloat(getComputedStyle(document.documentElement).fontSize));
+    }
+    reset() {
+        __classPrivateFieldGet(this, _StackManager_state, "f").set({
+            stack: [],
+            containers: new Map(),
+            stackStepSize: 'lg',
+        });
+    }
+}
+_StackManager_state = new WeakMap();
+// Export a singleton instance
+const stackManager = new StackManager();
+
+export { stackManager };
+//# sourceMappingURL=stack-signal.js.map

package/es-custom/components/tearsheet-preview/stack-signal.js.map

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