@carbon-labs/wc-date-picker 0.2.0

package/es/__stories__/date-picker.stories.d.ts

@@ -0,0 +1,949 @@
+/**
+ * Copyright IBM Corp. 2019, 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 { INPUT_SIZE } from '../components/date-picker/defs.js';
+import '../components/date-picker/date-picker';
+import '../components/date-picker/date-picker-input';
+import '../components/date-picker/date-picker-input-skeleton';
+import '../components/date-picker/calendar-renderer';
+import '@carbon/web-components/es/components/layer/index.js';
+import '@carbon/web-components/es/components/ai-label/index.js';
+import '../temp-imports/.storybook/templates/with-layer';
+export declare const Default: {
+    args: {
+        kind: string;
+        dateFormat: string;
+        disabled: boolean;
+        minDate: string;
+        maxDate: string;
+        readonly: boolean;
+        short: boolean;
+        helperText: string;
+        invalid: boolean;
+        invalidText: string;
+        warn: boolean;
+        warnText: string;
+        placeholder: string;
+        size: INPUT_SIZE;
+    };
+    argTypes: {
+        kind: {
+            control: string;
+            options: {
+                Single: string;
+                Simple: string;
+                Range: string;
+            };
+            description: string;
+        };
+        dateFormat: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        invalidText: {
+            control: string;
+            description: string;
+        };
+        maxDate: {
+            control: string;
+            description: string;
+        };
+        minDate: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        short: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: {
+                "Small (sm)": INPUT_SIZE;
+                "Medium (md)": INPUT_SIZE;
+                "Large (lg)": INPUT_SIZE;
+            };
+            description: string;
+        };
+        warn: {
+            control: string;
+            description: string;
+        };
+        warnText: {
+            control: string;
+            description: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onInput: {
+            action: string;
+        };
+    };
+    /**
+     * Renders the default date picker story
+     * @param root0
+     * @param root0.dateFormat
+     * @param root0.disabled
+     * @param root0.invalid
+     * @param root0.invalidText
+     * @param root0.kind
+     * @param root0.maxDate
+     * @param root0.minDate
+     * @param root0.placeholder
+     * @param root0.readonly
+     * @param root0.size
+     * @param root0.warn
+     * @param root0.warnText
+     */
+    render: ({ dateFormat, disabled, invalid, invalidText, kind, maxDate, minDate, placeholder, readonly, size, warn, warnText, }: {
+        dateFormat: any;
+        disabled: any;
+        invalid: any;
+        invalidText: any;
+        kind: any;
+        maxDate: any;
+        minDate: any;
+        placeholder: any;
+        readonly: any;
+        size: any;
+        warn: any;
+        warnText: any;
+    }) => import("lit-html").TemplateResult<1>;
+};
+export declare const RangeWithCalendar: {
+    args: {
+        dateFormat: string;
+        disabled: boolean;
+        minDate: string;
+        maxDate: string;
+        readonly: boolean;
+        short: boolean;
+        helperText: string;
+        invalid: boolean;
+        invalidText: string;
+        warn: boolean;
+        warnText: string;
+        placeholder: string;
+        size: INPUT_SIZE;
+    };
+    argTypes: {
+        dateFormat: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        invalidText: {
+            control: string;
+            description: string;
+        };
+        maxDate: {
+            control: string;
+            description: string;
+        };
+        minDate: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        short: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: {
+                "Small (sm)": INPUT_SIZE;
+                "Medium (md)": INPUT_SIZE;
+                "Large (lg)": INPUT_SIZE;
+            };
+            description: string;
+        };
+        warn: {
+            control: string;
+            description: string;
+        };
+        warnText: {
+            control: string;
+            description: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onInput: {
+            action: string;
+        };
+    };
+    /**
+     * Renders the range with calendar date picker story
+     * @param root0
+     * @param root0.dateFormat
+     * @param root0.disabled
+     * @param root0.invalid
+     * @param root0.invalidText
+     * @param root0.maxDate
+     * @param root0.minDate
+     * @param root0.placeholder
+     * @param root0.readonly
+     * @param root0.size
+     * @param root0.warn
+     * @param root0.warnText
+     */
+    render: ({ dateFormat, disabled, invalid, invalidText, maxDate, minDate, placeholder, readonly, size, warn, warnText, }: {
+        dateFormat: any;
+        disabled: any;
+        invalid: any;
+        invalidText: any;
+        maxDate: any;
+        minDate: any;
+        placeholder: any;
+        readonly: any;
+        size: any;
+        warn: any;
+        warnText: any;
+    }) => import("lit-html").TemplateResult<1>;
+};
+export declare const RangeWithCalendarWithLayer: {
+    args: {
+        dateFormat: string;
+        disabled: boolean;
+        minDate: string;
+        maxDate: string;
+        readonly: boolean;
+        short: boolean;
+        helperText: string;
+        invalid: boolean;
+        invalidText: string;
+        warn: boolean;
+        warnText: string;
+        placeholder: string;
+        size: INPUT_SIZE;
+    };
+    argTypes: {
+        dateFormat: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        invalidText: {
+            control: string;
+            description: string;
+        };
+        maxDate: {
+            control: string;
+            description: string;
+        };
+        minDate: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        short: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: {
+                "Small (sm)": INPUT_SIZE;
+                "Medium (md)": INPUT_SIZE;
+                "Large (lg)": INPUT_SIZE;
+            };
+            description: string;
+        };
+        warn: {
+            control: string;
+            description: string;
+        };
+        warnText: {
+            control: string;
+            description: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onInput: {
+            action: string;
+        };
+    };
+    /**
+     * Renders the range with calendar and layer date picker story
+     * @param root0
+     * @param root0.dateFormat
+     * @param root0.disabled
+     * @param root0.invalid
+     * @param root0.invalidText
+     * @param root0.maxDate
+     * @param root0.minDate
+     * @param root0.placeholder
+     * @param root0.readonly
+     * @param root0.size
+     * @param root0.warn
+     * @param root0.warnText
+     */
+    render: ({ dateFormat, disabled, invalid, invalidText, maxDate, minDate, placeholder, readonly, size, warn, warnText, }: {
+        dateFormat: any;
+        disabled: any;
+        invalid: any;
+        invalidText: any;
+        maxDate: any;
+        minDate: any;
+        placeholder: any;
+        readonly: any;
+        size: any;
+        warn: any;
+        warnText: any;
+    }) => import("lit-html").TemplateResult<1>;
+};
+export declare const Simple: {
+    args: {
+        dateFormat: string;
+        disabled: boolean;
+        minDate: string;
+        maxDate: string;
+        readonly: boolean;
+        short: boolean;
+        helperText: string;
+        invalid: boolean;
+        invalidText: string;
+        warn: boolean;
+        warnText: string;
+        placeholder: string;
+        size: INPUT_SIZE;
+    };
+    argTypes: {
+        dateFormat: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        invalidText: {
+            control: string;
+            description: string;
+        };
+        maxDate: {
+            control: string;
+            description: string;
+        };
+        minDate: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        short: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: {
+                "Small (sm)": INPUT_SIZE;
+                "Medium (md)": INPUT_SIZE;
+                "Large (lg)": INPUT_SIZE;
+            };
+            description: string;
+        };
+        warn: {
+            control: string;
+            description: string;
+        };
+        warnText: {
+            control: string;
+            description: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onInput: {
+            action: string;
+        };
+    };
+    /**
+     *
+     * @param root0
+     * @param root0.dateFormat
+     * @param root0.disabled
+     * @param root0.invalid
+     * @param root0.invalidText
+     * @param root0.maxDate
+     * @param root0.minDate
+     * @param root0.placeholder
+     * @param root0.readonly
+     * @param root0.size
+     * @param root0.warn
+     * @param root0.warnText
+     */
+    render: ({ dateFormat, disabled, invalid, invalidText, maxDate, minDate, placeholder, readonly, size, warn, warnText, }: {
+        dateFormat: any;
+        disabled: any;
+        invalid: any;
+        invalidText: any;
+        maxDate: any;
+        minDate: any;
+        placeholder: any;
+        readonly: any;
+        size: any;
+        warn: any;
+        warnText: any;
+    }) => import("lit-html").TemplateResult<1>;
+};
+export declare const SimpleWithLayer: {
+    args: {
+        dateFormat: string;
+        disabled: boolean;
+        minDate: string;
+        maxDate: string;
+        readonly: boolean;
+        short: boolean;
+        helperText: string;
+        invalid: boolean;
+        invalidText: string;
+        warn: boolean;
+        warnText: string;
+        placeholder: string;
+        size: INPUT_SIZE;
+    };
+    argTypes: {
+        dateFormat: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        invalidText: {
+            control: string;
+            description: string;
+        };
+        maxDate: {
+            control: string;
+            description: string;
+        };
+        minDate: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        short: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: {
+                "Small (sm)": INPUT_SIZE;
+                "Medium (md)": INPUT_SIZE;
+                "Large (lg)": INPUT_SIZE;
+            };
+            description: string;
+        };
+        warn: {
+            control: string;
+            description: string;
+        };
+        warnText: {
+            control: string;
+            description: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onInput: {
+            action: string;
+        };
+    };
+    /**
+     *
+     * @param root0
+     * @param root0.dateFormat
+     * @param root0.disabled
+     * @param root0.invalid
+     * @param root0.invalidText
+     * @param root0.maxDate
+     * @param root0.minDate
+     * @param root0.placeholder
+     * @param root0.readonly
+     * @param root0.size
+     * @param root0.warn
+     * @param root0.warnText
+     */
+    render: ({ dateFormat, disabled, invalid, invalidText, maxDate, minDate, placeholder, readonly, size, warn, warnText, }: {
+        dateFormat: any;
+        disabled: any;
+        invalid: any;
+        invalidText: any;
+        maxDate: any;
+        minDate: any;
+        placeholder: any;
+        readonly: any;
+        size: any;
+        warn: any;
+        warnText: any;
+    }) => import("lit-html").TemplateResult<1>;
+};
+export declare const SingleWithCalendar: {
+    args: {
+        dateFormat: string;
+        disabled: boolean;
+        minDate: string;
+        maxDate: string;
+        readonly: boolean;
+        short: boolean;
+        helperText: string;
+        invalid: boolean;
+        invalidText: string;
+        warn: boolean;
+        warnText: string;
+        placeholder: string;
+        size: INPUT_SIZE;
+    };
+    argTypes: {
+        dateFormat: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        invalidText: {
+            control: string;
+            description: string;
+        };
+        maxDate: {
+            control: string;
+            description: string;
+        };
+        minDate: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        short: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: {
+                "Small (sm)": INPUT_SIZE;
+                "Medium (md)": INPUT_SIZE;
+                "Large (lg)": INPUT_SIZE;
+            };
+            description: string;
+        };
+        warn: {
+            control: string;
+            description: string;
+        };
+        warnText: {
+            control: string;
+            description: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onInput: {
+            action: string;
+        };
+    };
+    /**
+     *
+     * @param root0
+     * @param root0.dateFormat
+     * @param root0.disabled
+     * @param root0.invalid
+     * @param root0.invalidText
+     * @param root0.maxDate
+     * @param root0.minDate
+     * @param root0.placeholder
+     * @param root0.readonly
+     * @param root0.size
+     * @param root0.warn
+     * @param root0.warnText
+     */
+    render: ({ dateFormat, disabled, invalid, invalidText, maxDate, minDate, placeholder, readonly, size, warn, warnText, }: {
+        dateFormat: any;
+        disabled: any;
+        invalid: any;
+        invalidText: any;
+        maxDate: any;
+        minDate: any;
+        placeholder: any;
+        readonly: any;
+        size: any;
+        warn: any;
+        warnText: any;
+    }) => import("lit-html").TemplateResult<1>;
+};
+export declare const SingleWithCalendarWithLayer: {
+    args: {
+        dateFormat: string;
+        disabled: boolean;
+        minDate: string;
+        maxDate: string;
+        readonly: boolean;
+        short: boolean;
+        helperText: string;
+        invalid: boolean;
+        invalidText: string;
+        warn: boolean;
+        warnText: string;
+        placeholder: string;
+        size: INPUT_SIZE;
+    };
+    argTypes: {
+        dateFormat: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        invalidText: {
+            control: string;
+            description: string;
+        };
+        maxDate: {
+            control: string;
+            description: string;
+        };
+        minDate: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        short: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: {
+                "Small (sm)": INPUT_SIZE;
+                "Medium (md)": INPUT_SIZE;
+                "Large (lg)": INPUT_SIZE;
+            };
+            description: string;
+        };
+        warn: {
+            control: string;
+            description: string;
+        };
+        warnText: {
+            control: string;
+            description: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onInput: {
+            action: string;
+        };
+    };
+    /**
+     *
+     * @param root0
+     * @param root0.disabled
+     * @param root0.dateFormat
+     * @param root0.invalid
+     * @param root0.invalidText
+     * @param root0.maxDate
+     * @param root0.minDate
+     * @param root0.placeholder
+     * @param root0.readonly
+     * @param root0.size
+     * @param root0.warn
+     * @param root0.warnText
+     */
+    render: ({ disabled, dateFormat, invalid, invalidText, maxDate, minDate, placeholder, readonly, size, warn, warnText, }: {
+        disabled: any;
+        dateFormat: any;
+        invalid: any;
+        invalidText: any;
+        maxDate: any;
+        minDate: any;
+        placeholder: any;
+        readonly: any;
+        size: any;
+        warn: any;
+        warnText: any;
+    }) => import("lit-html").TemplateResult<1>;
+};
+export declare const Skeleton: {
+    args: {
+        hideLabel: boolean;
+        range: boolean;
+    };
+    argTypes: {
+        hideLabel: {
+            control: string;
+            description: string;
+        };
+        range: {
+            control: string;
+            description: string;
+        };
+    };
+    /**
+     *
+     * @param root0
+     * @param root0.hideLabel
+     * @param root0.range
+     */
+    render: ({ hideLabel, range }: {
+        hideLabel: any;
+        range: any;
+    }) => import("lit-html").TemplateResult<1>;
+    decorators: ((story: any) => import("lit-html").TemplateResult<1>)[];
+    parameters: {
+        percy: {
+            skip: boolean;
+        };
+    };
+};
+export declare const WithAILabel: {
+    args: {
+        dateFormat: string;
+        disabled: boolean;
+        minDate: string;
+        maxDate: string;
+        readonly: boolean;
+        short: boolean;
+        helperText: string;
+        invalid: boolean;
+        invalidText: string;
+        warn: boolean;
+        warnText: string;
+        placeholder: string;
+        size: INPUT_SIZE;
+    };
+    argTypes: {
+        dateFormat: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        helperText: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        invalidText: {
+            control: string;
+            description: string;
+        };
+        maxDate: {
+            control: string;
+            description: string;
+        };
+        minDate: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        short: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: string;
+            options: {
+                "Small (sm)": INPUT_SIZE;
+                "Medium (md)": INPUT_SIZE;
+                "Large (lg)": INPUT_SIZE;
+            };
+            description: string;
+        };
+        warn: {
+            control: string;
+            description: string;
+        };
+        warnText: {
+            control: string;
+            description: string;
+        };
+        onChange: {
+            action: string;
+        };
+        onInput: {
+            action: string;
+        };
+    };
+    /**
+     *
+     * @param root0
+     * @param root0.dateFormat
+     * @param root0.disabled
+     * @param root0.invalid
+     * @param root0.invalidText
+     * @param root0.maxDate
+     * @param root0.minDate
+     * @param root0.placeholder
+     * @param root0.readonly
+     * @param root0.size
+     * @param root0.warn
+     * @param root0.warnText
+     */
+    render: ({ dateFormat, disabled, invalid, invalidText, maxDate, minDate, placeholder, readonly, size, warn, warnText, }: {
+        dateFormat: any;
+        disabled: any;
+        invalid: any;
+        invalidText: any;
+        maxDate: any;
+        minDate: any;
+        placeholder: any;
+        readonly: any;
+        size: any;
+        warn: any;
+        warnText: any;
+    }) => import("lit-html").TemplateResult<1>;
+};
+declare const meta: {
+    title: string;
+    parameters: {
+        docs: {
+            controls: {
+                exclude: string[];
+            };
+        };
+    };
+};
+export default meta;