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

package/es-custom/patterns/step-flow/_story-assets/step-side-panel.js

@@ -0,0 +1,217 @@
+/**
+ * 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 { state, customElement } from 'lit/decorators.js';
+import '../../../components/side-panel/side-panel.js';
+import '@carbon/web-components/es-custom/components/text-input/index.js';
+import '@carbon/web-components/es-custom/components/button/index.js';
+import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
+import { StepInstance } from '../step-flow-signal.js';
+import { SignalWatcher } from '@lit-labs/signals';
+import '../step-group.js';
+import styles from './step-side-panel.scss.js';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+const blockClass = 'c4p--step-side-panel';
+let StepSidePanel = class StepSidePanel extends SignalWatcher(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.open = true;
+        this._email = '';
+        this._city = '';
+        this._state = '';
+        this._stepInfo = new StepInstance();
+    }
+    _openHandler() {
+        this.open = !this.open;
+    }
+    _handleCancelButton() {
+        this._openHandler();
+        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) {
+            this._openHandler();
+            this._stepInfo.reset();
+            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;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._stepInfo.updateTotalStepCount = 3;
+    }
+    render() {
+        const { formState, totalSteps, currentStep } = this._stepInfo.data;
+        return html `
+      <div>
+        <cds-custom-button @click=${this._openHandler}>Create partitions</cds-custom-button>
+        <c4p-side-panel
+          @c4p-side-panel-closed=${this._openHandler}
+          class="${blockClass}"
+          ?animate-title=${false}
+          include-overlay
+          ?open=${this.open}
+          size="md"
+          title="Create partitions"
+        >
+          <div slot="subtitle">
+            Specify the details of the partitions you're creating
+          </div>
+          <div slot="below-title">
+            <cds-custom-progress-indicator class="progress-indicator">
+              <cds-custom-progress-step
+                label="First step"
+                state=${currentStep + 1 === 1 ? 'current' : 'complete'}
+              ></cds-custom-progress-step>
+              <cds-custom-progress-step
+                label="Second step"
+                state=${currentStep + 1 === 2
+            ? 'current'
+            : currentStep + 1 < 2
+                ? 'incomplete'
+                : 'complete'}
+              ></cds-custom-progress-step>
+              <cds-custom-progress-step
+                label="Third step"
+                state=${currentStep + 1 === 3
+            ? 'current'
+            : currentStep + 1 < 3
+                ? 'incomplete'
+                : 'complete'}
+              ></cds-custom-progress-step>
+            </cds-custom-progress-indicator>
+          </div>
+          <h3
+            class="${blockClass}__form-title-text ${blockClass}__content-text"
+          >
+            Core configuration
+          </h3>
+          <p
+            class="${blockClass}__form-description-text ${blockClass}__content-text"
+          >
+            We recommend you fill out and evaluate these details at a minimum
+            before deploying your topic.
+          </p>
+          <step-group>
+            ${currentStep + 1 === 1
+            ? html ` <cds-custom-text-input
+                  label="Email"
+                  id="tearsheet-story-text-input-a"
+                  value=${this._email}
+                  @input="${this._handleEmailInput}"
+                ></cds-custom-text-input>`
+            : nothing}
+            ${currentStep + 1 === 2
+            ? html ` <cds-custom-text-input
+                  label="City"
+                  id="tearsheet-story-text-input-city"
+                  value=${this._city}
+                  @input="${this._handleCityInput}"
+                ></cds-custom-text-input>`
+            : nothing}
+            ${currentStep + 1 === 2
+            ? html ` <cds-custom-text-input
+                  label="State"
+                  id="tearsheet-story-text-input-state"
+                  value=${this._state}
+                  @input="${this._handleStateInput}"
+                ></cds-custom-text-input>`
+            : nothing}
+            ${currentStep + 1 === 3
+            ? html `<div>
+                  <!-- //cspell: disable -->
+                  <cds-custom-code-snippet
+                    type="multi"
+                    copy-text=""
+                    maxcollapsednumberofrows="15"
+                    maxexpandednumberofrows=""
+                    mincollapsednumberofrows="3"
+                    minexpandednumberofrows=""
+                    show-less-text="Show less"
+                    show-more-text="Show more"
+                    feedback=""
+                    feedback-timeout="0"
+                    tooltip-content="Copy to clipboard"
+                  >
+                    ${JSON.stringify(formState, null, 2)}
+                  </cds-custom-code-snippet>
+                  <!-- //cspell: enable -->
+                </div>`
+            : nothing}
+          </step-group>
+          <cds-custom-button
+            slot="actions"
+            kind="ghost"
+            @click=${this._handleCancelButton}
+            >Cancel</cds-custom-button
+          >
+          <cds-custom-button
+            slot="actions"
+            kind="secondary"
+            @click=${this._handleBackButton}
+            >Back</cds-custom-button
+          >
+          <cds-custom-button slot="actions" @click=${this._handleNextButton}>
+            ${currentStep + 1 < totalSteps ? 'Next' : 'Submit'}
+          </cds-custom-button>
+        </c4p-side-panel>
+      </div>
+    `;
+    }
+};
+StepSidePanel.styles = styles;
+__decorate([
+    state()
+], StepSidePanel.prototype, "open", void 0);
+__decorate([
+    state()
+], StepSidePanel.prototype, "_email", void 0);
+__decorate([
+    state()
+], StepSidePanel.prototype, "_city", void 0);
+__decorate([
+    state()
+], StepSidePanel.prototype, "_state", void 0);
+StepSidePanel = __decorate([
+    customElement('step-side-panel')
+], StepSidePanel);
+
+export { StepSidePanel };
+//# sourceMappingURL=step-side-panel.js.map

package/es-custom/patterns/step-flow/_story-assets/step-side-panel.js.map

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

package/es-custom/patterns/step-flow/_story-assets/step-side-panel.scss.js

@@ -0,0 +1,13 @@
+/**
+ * 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 { css } from 'lit';
+
+var styles = css([":host(step-side-panel) .progress-indicator{margin-block-end:1rem}"]);
+
+export { styles as default };
+//# sourceMappingURL=step-side-panel.scss.js.map

package/es-custom/patterns/step-flow/_story-assets/step-side-panel.scss.js.map

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

package/es-custom/patterns/step-flow/_story-assets/step-tearsheet.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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, PropertyValues } from 'lit';
+import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
+import '@carbon/web-components/es-custom/components/stack/index.js';
+import '@carbon/web-components/es-custom/components/code-snippet/index.js';
+import '../step-group';
+import '../../../components/tearsheet/index.js';
+declare const StepTearsheet_base: typeof LitElement;
+export declare class StepTearsheet extends StepTearsheet_base {
+    narrow: boolean;
+    private _open;
+    private _email;
+    private _city;
+    private _state;
+    private _trapFocusAPI;
+    private _onButtonClick;
+    private _handleCancelButton;
+    private _handleBackButton;
+    private _handleNextButton;
+    private _handleEmailInput;
+    private _handleCityInput;
+    private _handleStateInput;
+    private _stepInfo;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    updated(changedProps: Map<string | number | symbol, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'step-tearsheet': StepTearsheet;
+    }
+}
+export {};

package/es-custom/patterns/step-flow/_story-assets/step-tearsheet.js

@@ -0,0 +1,255 @@
+/**
+ * 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 styles from '../story-styles.scss.js';
+import { StepInstance } from '../step-flow-signal.js';
+import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
+import '@carbon/web-components/es-custom/components/stack/index.js';
+import '@carbon/web-components/es-custom/components/code-snippet/index.js';
+import '../step-group.js';
+import '../../../components/tearsheet/tearsheet.js';
+import { registerFocusableContainers, trapFocus } from '../../../utilities/manageFocusTrap/manageFocusTrap.js';
+
+/**
+ * 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.
+ */
+let StepTearsheet = class StepTearsheet extends SignalWatcher(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.narrow = false;
+        this._open = false;
+        this._email = '';
+        this._city = '';
+        this._state = '';
+        this._trapFocusAPI = null;
+        this._stepInfo = new StepInstance();
+    }
+    _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) {
+            this._open = false;
+            this._stepInfo.reset();
+            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;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._stepInfo.updateTotalStepCount = 3;
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this._trapFocusAPI) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    firstUpdated(_changedProperties) {
+        var _a;
+        registerFocusableContainers((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`c4p-tearsheet`));
+    }
+    updated(changedProps) {
+        if (changedProps.has('_open')) {
+            const isOpen = this._open;
+            if (isOpen) {
+                // `focusableContainers` holds the containers where we can query DOM elements.
+                // Our strategy here is to let child/slotted components register their containers,
+                // which are then passed to `trapFocus`. This allows the utility to query elements
+                // directly without being blocked by shadow DOM boundaries.
+                this._trapFocusAPI = trapFocus();
+            }
+        }
+    }
+    render() {
+        const { formState, totalSteps, currentStep } = this._stepInfo.data;
+        return html ` <cds-custom-button
+        type="button"
+        size="md"
+        @click="${this._onButtonClick}"
+      >
+        Start create flow
+      </cds-custom-button>
+      <c4p-tearsheet
+        class=${'step-tearsheet-with-util'}
+        selector-initial-focus=${'#tearsheet-story-text-input-a'}
+        ?open=${this._open}
+        width=${this.narrow ? 'narrow' : 'wide'}
+        influencer-placement=${'left'}
+        prevent-close-on-click-outside
+      >
+        <!-- default slotted content -->
+        <step-group>
+          ${currentStep + 1 === 1
+            ? html `<div>
+                <cds-custom-stack gap="6" orientation="horizontal">
+                  <cds-custom-text-input
+                    label="Email"
+                    id="tearsheet-story-text-input-a"
+                    value=${this._email}
+                    @input="${this._handleEmailInput}"
+                  ></cds-custom-text-input>
+                </cds-custom-stack>
+              </div>`
+            : nothing}
+          ${currentStep + 1 === 2
+            ? html `<div>
+                <cds-custom-stack gap="6" orientation="horizontal">
+                  <cds-custom-text-input
+                    label="City"
+                    id="tearsheet-story-text-input-city"
+                    value=${this._city}
+                    @input="${this._handleCityInput}"
+                  ></cds-custom-text-input>
+                  <cds-custom-text-input
+                    label="State"
+                    id="tearsheet-story-text-input-state"
+                    value=${this._state}
+                    @input="${this._handleStateInput}"
+                  ></cds-custom-text-input>
+                </cds-custom-stack>
+              </div>`
+            : nothing}
+          ${currentStep + 1 === 3
+            ? html `<div>
+                <!-- //cspell: disable -->
+                <cds-custom-code-snippet
+                  type="multi"
+                  copy-text=""
+                  maxcollapsednumberofrows="15"
+                  maxexpandednumberofrows=""
+                  mincollapsednumberofrows="3"
+                  minexpandednumberofrows=""
+                  show-less-text="Show less"
+                  show-more-text="Show more"
+                  feedback=""
+                  feedback-timeout="0"
+                  tooltip-content="Copy to clipboard"
+                >
+                  ${JSON.stringify(formState, null, 2)}
+                </cds-custom-code-snippet>
+                <!-- //cspell: enable -->
+              </div>`
+            : nothing}
+        </step-group>
+
+        <!-- slotted header label -->
+        <span slot="label">Optional label for context</span>
+
+        <!-- slotted header title -->
+        <span slot="title">Create tearsheet title</span>
+
+        <!-- slotted header description -->
+        <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>
+
+        <!-- slotted action items cds-custom-buttons -->
+        <cds-custom-button
+          slot="actions"
+          kind=${'ghost'}
+          @click=${this._handleCancelButton}
+        >
+          Cancel
+        </cds-custom-button>
+        <cds-custom-button
+          slot="actions"
+          kind=${'secondary'}
+          @click=${this._handleBackButton}
+        >
+          Back
+        </cds-custom-button>
+        <cds-custom-button slot="actions" @click=${this._handleNextButton}>
+          ${currentStep + 1 < totalSteps ? 'Next' : 'Submit'}
+        </cds-custom-button>
+        <!-- slotted influencer -->
+        <div slot="influencer">
+          <cds-custom-progress-indicator
+            vertical
+            class=${`custom-step-util__dummy-content-block`}
+          >
+            <cds-custom-progress-step
+              label="First step"
+              state=${currentStep + 1 === 1 ? 'current' : 'complete'}
+            ></cds-custom-progress-step>
+            <cds-custom-progress-step
+              label="Second step"
+              state=${currentStep + 1 === 2
+            ? 'current'
+            : currentStep + 1 < 2
+                ? 'incomplete'
+                : 'complete'}
+            ></cds-custom-progress-step>
+            <cds-custom-progress-step
+              label="Third step"
+              state=${currentStep + 1 === 3
+            ? 'current'
+            : currentStep + 1 < 3
+                ? 'incomplete'
+                : 'complete'}
+            ></cds-custom-progress-step>
+          </cds-custom-progress-indicator>
+        </div>
+      </c4p-tearsheet>`;
+    }
+};
+StepTearsheet.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+__decorate([
+    property({ type: Boolean })
+], StepTearsheet.prototype, "narrow", void 0);
+__decorate([
+    state()
+], StepTearsheet.prototype, "_open", void 0);
+__decorate([
+    state()
+], StepTearsheet.prototype, "_email", void 0);
+__decorate([
+    state()
+], StepTearsheet.prototype, "_city", void 0);
+__decorate([
+    state()
+], StepTearsheet.prototype, "_state", void 0);
+StepTearsheet = __decorate([
+    customElement('step-tearsheet')
+], StepTearsheet);
+
+export { StepTearsheet };
+//# sourceMappingURL=step-tearsheet.js.map

package/es-custom/patterns/step-flow/_story-assets/step-tearsheet.js.map

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

package/es-custom/patterns/step-flow/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 './step-flow-signal';
+import './step-group';

package/es-custom/patterns/step-flow/index.js

@@ -0,0 +1,10 @@
+/**
+ * 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 './step-flow-signal.js';
+import './step-group.js';
+//# sourceMappingURL=index.js.map

package/es-custom/patterns/step-flow/index.js.map

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

package/es-custom/patterns/step-flow/step-flow-signal.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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.
+ */
+interface formStateType {
+    [key: string]: any;
+}
+export declare class StepInstance {
+    #private;
+    get data(): {
+        totalSteps: number;
+        formState: {};
+        currentStep: number;
+    };
+    set handleGoToStep(value: number);
+    set updateTotalStepCount(value: number);
+    set updateFormState(newFormValue: formStateType);
+    handleNext(): void;
+    handlePrevious(): void;
+    reset(): void;
+}
+export {};

package/es-custom/patterns/step-flow/step-flow-signal.js

@@ -0,0 +1,54 @@
+/**
+ * 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';
+
+/**
+ * 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.
+ */
+var _StepInstance_data;
+class StepInstance {
+    constructor() {
+        _StepInstance_data.set(this, signal({
+            totalSteps: 0,
+            formState: {},
+            currentStep: 0,
+        }));
+    }
+    get data() {
+        return __classPrivateFieldGet(this, _StepInstance_data, "f").get();
+    }
+    set handleGoToStep(value) {
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { currentStep: value }));
+    }
+    set updateTotalStepCount(value) {
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { totalSteps: value }));
+    }
+    set updateFormState(newFormValue) {
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { formState: newFormValue }));
+    }
+    handleNext() {
+        const currentStep = __classPrivateFieldGet(this, _StepInstance_data, "f").get().currentStep + 1;
+        const totalSteps = __classPrivateFieldGet(this, _StepInstance_data, "f").get().totalSteps;
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { currentStep: currentStep < totalSteps ? currentStep : totalSteps }));
+    }
+    handlePrevious() {
+        const currentStep = __classPrivateFieldGet(this, _StepInstance_data, "f").get().currentStep;
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { currentStep: currentStep > 0 ? currentStep - 1 : 0 }));
+    }
+    reset() {
+        __classPrivateFieldGet(this, _StepInstance_data, "f").set(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _StepInstance_data, "f").get()), { formState: {}, currentStep: 0 }));
+    }
+}
+_StepInstance_data = new WeakMap();
+
+export { StepInstance };
+//# sourceMappingURL=step-flow-signal.js.map

package/es-custom/patterns/step-flow/step-flow-signal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-flow-signal.js","sources":["../../../src/patterns/step-flow/step-flow-signal.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAAA;;;;;AAKG;;MAWU,YAAY,CAAA;AAAzB,IAAA,WAAA,GAAA;AACE,QAAA,kBAAA,CAAA,GAAA,CAAA,IAAA,EAAQ,MAAM,CAAC;AACb,YAAA,UAAU,EAAE,CAAC;AACb,YAAA,SAAS,EAAE,EAAE;AACb,YAAA,WAAW,EAAE,CAAC;AACf,SAAA,CAAC,CAAC;;AAEH,IAAA,IAAI,IAAI,GAAA;AACN,QAAA,OAAO,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE;;IAGzB,IAAI,cAAc,CAAC,KAAa,EAAA;AAC9B,QAAA,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,WAAW,EAAE,KAAK,IAClB;;IAGJ,IAAI,oBAAoB,CAAC,KAAa,EAAA;AACpC,QAAA,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,UAAU,EAAE,KAAK,IACjB;;IAGJ,IAAI,eAAe,CAAC,YAA2B,EAAA;AAC7C,QAAA,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,uBAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,SAAS,EAAE,YAAY,IACvB;;IAGJ,UAAU,GAAA;AACR,QAAA,MAAM,WAAW,GAAG,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,EAAE,CAAC,WAAW,GAAG,CAAC;QACpD,MAAM,UAAU,GAAG,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CAAC,UAAU;QAC9C,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACT,sBAAA,CAAA,IAAI,EAAM,kBAAA,EAAA,GAAA,CAAA,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,WAAW,EAAE,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,EAAA,CAAA,CAChE;;IAGJ,cAAc,GAAA;QACZ,MAAM,WAAW,GAAG,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CAAC,WAAW;AAChD,QAAA,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,CACT,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAA,GAAA,CAAM,CAAC,GAAG,EAAE,CAAA,EAAA,EACnB,WAAW,EAAE,WAAW,GAAG,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,CAAC,EAAA,CAAA,CAClD;;IAGJ,KAAK,GAAA;QACH,sBAAA,CAAA,IAAI,0BAAM,CAAC,GAAG,iCACT,sBAAA,CAAA,IAAI,0BAAM,CAAC,GAAG,EAAE,CACnB,EAAA,EAAA,SAAS,EAAE,EAAE,EACb,WAAW,EAAE,CAAC,IACd;;AAEL;;;;;"}

package/es-custom/patterns/step-flow/step-flow-signal.test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export {};