@spscommerce/ds-web-components 5.10.5-ie → 5.11.0

package/dist/README.md

@@ -0,0 +1,3 @@
+[//]: # "START_AUTOGENERATED"
+
+[//]: # "END_AUTOGENERATED"

package/dist/global.d.ts

@@ -0,0 +1,15 @@
+export {};
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "frag": { children?: any };
+      "sps-file-upload": any;
+      "sps-insight-card": any;
+      "sps-insights": any;
+      "sps-nav-tab": any;
+      "sps-nav-tab-set": any;
+      "sps-photo": any;
+    }
+  }
+}

package/dist/lib/components/file-upload/file-upload.d.ts

@@ -0,0 +1,119 @@
+import { ClassBindings, Dispatcher } from "../../decorators/index";
+export declare class SpsFileUploadComponent extends HTMLElement {
+    static readonly displayName = "sps-file-upload";
+    static readonly props: {
+        description: string;
+        multiple: string;
+        dismissable: string;
+        processing: string;
+        mini: string;
+        downloadLabel: string;
+        acceptExtensions: string;
+        maxSize: string;
+        customRequirement: string;
+        selection: {
+            event: boolean;
+            type: string;
+        };
+        dismissal: {
+            event: boolean;
+            type: string;
+        };
+        download: {
+            event: boolean;
+            type: string;
+        };
+    };
+    /**
+     * The "term" for what the user should upload. Defaults to "File" or "Files",
+     * but if you set the `acceptExtensions` prop you might set this to something
+     * more specific, such as "Spreadsheet" or "Images".
+     */
+    description: any;
+    /**
+     * If true, the component will accept multiple files at once. By default, you can
+     * only select one file at a time.
+     */
+    multiple: boolean;
+    /** Controls whether the component is visible. */
+    shown: boolean;
+    /** Controls whether the user can hide the component from view. */
+    dismissable: boolean;
+    /**
+     * Puts the component in "processing" state, where it displays a spinner and
+     * does not allow any files to be selected.
+     */
+    processing: boolean;
+    /** Specifies that the component should be displayed in the "mini" style. */
+    mini: boolean;
+    /** If provided, the content area width will be set to 50% of the overall width. */
+    constrainContentWidth: boolean;
+    /** If provided, a button will be rendered with this text as its label. */
+    downloadLabel: string;
+    /**
+     * A list of extensions, provided either as an array of strings or a
+     * string containing comma-separates extensions. Only files with the MIME types
+     * associated with those extensions will be able to be selected. The case of
+     * the extensions does not matter; neither does whether you prefix them with a
+     * dot. That is, ".doc", "DOCX", and "jpg" are all valid extensions for this prop.
+     */
+    acceptExtensions: string[] | string;
+    /** The maximum allowable size in bytes for files selected by the component. */
+    maxSize: string;
+    /** custom label in requirements place. */
+    customRequirement: string;
+    /**
+     * Event which emits when a file or files have been selected by the user. The
+     * event detail will be an array of Files.
+     */
+    selection: Dispatcher<File[]>;
+    /**
+     * If the `dismissable` prop has been set, this event will fire when the user
+     * opts to hide the component.
+     */
+    dismissal: Dispatcher<void>;
+    /**
+     * If the `downloadLabel` prop has been provided, this event will fire when the
+     * user clicks the download button that is rendered.
+     */
+    download: Dispatcher<void>;
+    /** The HTML file input element within the component. */
+    fileInput: HTMLInputElement;
+    /**
+     * The list of selected files. If the `multiple` prop has not been provided,
+     * it is still an array; it will simply be an array of one when the user selects
+     * a file.
+     */
+    files: File[];
+    private accept;
+    private acceptMIMETypes;
+    private acceptExtensionsDescription;
+    private maxSizeBytes;
+    private active;
+    private error;
+    private namesOfUnsupportedFiles;
+    get [ClassBindings](): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    /**
+     * If the `dismissable` prop has been set, this will programmatically
+     * dismiss the component and fire the "dismissal" event.
+     */
+    dismiss(): void;
+    /** If the `dismissable` prop has been set, this will programmatically show the component. */
+    show(): void;
+    render({ t }: {
+        t: any;
+    }): JSX.Element;
+    private parseAndValidateMaxSize;
+    private processAcceptExtensions;
+    private selectFiles;
+    private handleDragOver;
+    private handleDragEnter;
+    private handleDragLeave;
+    private handleDrop;
+    private handleBrowseLinkClick;
+    private handleDownloadButtonClick;
+    private handleFileInputChange;
+}

package/dist/lib/components/file-upload/file-upload.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsFileUploadExamples: DSReactExamples;

package/dist/lib/components/file-upload/mime-type.enum.d.ts

@@ -0,0 +1,75 @@
+export declare enum MIMEType {
+    "7Z" = "application/x-7z-compressed",
+    AAC = "audio/aac",
+    ABW = "application/x-abiword",
+    ARC = "application/octet-stream",
+    AVI = "video/x-msvideo",
+    AZW = "application/vnd.amazon.ebook",
+    BIN = "application/octet-stream",
+    BMP = "image/bmp",
+    BZ = "application/x-bzip",
+    BZ2 = "application/x-bzip2",
+    CSH = "application/x-csh",
+    CSS = "text/css",
+    CSV = "text/csv,application/vnd.ms-excel",
+    DOC = "application/msword",
+    DOCX = "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    EOT = "application/vnd.ms-fontobject",
+    EPUB = "application/epub+zip",
+    ES = "application/ecmascript",
+    FLV = "video/x-flv",
+    GIF = "image/gif",
+    GZ = "application/x-gzip",
+    HTM = "text/html",
+    HTML = "text/html",
+    ICO = "image/x-icon",
+    ICS = "text/calendar",
+    JAR = "application/java-archive",
+    JPEG = "image/jpeg",
+    JPG = "image/jpeg",
+    JS = "application/javascript",
+    JSON = "application/json",
+    M3U = "audio/x-mpequrl",
+    MID = "audio/midi",
+    MIDI = "audio/midi",
+    MOV = "video/quicktime",
+    MP3 = "audio/mpeg3",
+    MP4 = "video/mp4",
+    MPEG = "video/mpeg",
+    MPKG = "application/vnd.apple.installer+xml",
+    ODP = "application/vnd.oasis.opendocument.presentation",
+    ODS = "application/vnd.oasis.opendocument.spreadsheet",
+    ODT = "application/vnd.oasis.opendocument.text",
+    OGA = "audio/ogg",
+    OGV = "video/ogg",
+    OGX = "application/ogg",
+    OTF = "font/otf",
+    PNG = "image/png",
+    PDF = "application/pdf",
+    PPT = "application/vnd.ms-powerpoint",
+    PPTX = "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    RAR = "application/x-rar-compressed",
+    RTF = "application/rtf",
+    SH = "application/x-sh",
+    SVG = "image/svg+xml",
+    SWF = "application/x-shockwave-flash",
+    TAR = "application/x-tar",
+    TIF = "image/tiff",
+    TIFF = "image/tiff",
+    TS = "application/typescript",
+    TTF = "font/ttf",
+    TXT = "text/plain",
+    VSD = "application/vnd.visio",
+    WAV = "audio/wav",
+    WEBA = "audio/webm",
+    WEBM = "video/webm",
+    WEBP = "image/webp",
+    WOFF = "font/woff",
+    WOFF2 = "font/woff2",
+    XHTML = "application/xhtml+xml",
+    XLS = "application/vnd.ms-excel",
+    XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    XML = "application/xml",
+    XUL = "application/vnd.mozilla.xul+xml",
+    ZIP = "application/zip"
+}

package/dist/lib/components/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./file-upload/file-upload";
+export * from "./file-upload/file-upload.examples";
+export * from "./file-upload/mime-type.enum";
+export * from "./insight-card/insight-card";
+export * from "./insight-card/insights";
+export * from "./insight-card/insight-card.examples";
+export * from "./nav-tabs/nav-tab";
+export * from "./nav-tabs/nav-tab-set";
+export * from "./nav-tabs/nav-tabs.examples";
+export * from "./photo/photo";
+export * from "./photo/photo.examples";

package/dist/lib/components/insight-card/insight-card.d.ts

@@ -0,0 +1,40 @@
+/** @jsx h */
+import { SpsInsightCardKind, SpsIcon } from "@spscommerce/ds-shared";
+import { ClassBindings } from "../../decorators/index";
+export declare class SpsInsightCardComponent extends HTMLElement {
+    static readonly displayName = "sps-insight-card";
+    static readonly props: {
+        icon: string;
+        kind: string;
+        title: string;
+        metric: string;
+        partnerCount: string;
+        totalPartners: string;
+        secondary: string;
+    };
+    /** If icon is provided then it will override the default icon associated with kind */
+    icon: SpsIcon;
+    /** Specifies which of the visual styling variants of the Insight Card to use. */
+    kind: SpsInsightCardKind;
+    title: string;
+    /** The main number representing the metric that the Insight Card is intended to surface. */
+    metric: number;
+    /**
+     * The number of partners this insight applies to.
+     * Must be used together with `totalPartners`.
+     */
+    partnerCount: number;
+    /** The total number of partners. Must be used together with `partnerCount`. */
+    totalPartners: number;
+    /**
+     * Whether this is a "secondary" Insight Card,
+     * meaning it will be displayed in a compact layout.
+     */
+    secondary: boolean;
+    private content;
+    private detail;
+    get [ClassBindings](): string[];
+    render({ t }: {
+        t: any;
+    }): JSX.Element;
+}

package/dist/lib/components/insight-card/insight-card.examples.d.ts

@@ -0,0 +1,51 @@
+export declare const SpsInsightCardExamples: {
+    basic: {
+        label: string;
+        examples: {
+            basic: {
+                jsx: string;
+            };
+        };
+    };
+    details: {
+        label: string;
+        examples: {
+            details: {
+                jsx: string;
+            };
+        };
+    };
+    partner_count: {
+        label: string;
+        examples: {
+            partner_count: {
+                jsx: string;
+            };
+        };
+    };
+    expansion: {
+        label: string;
+        examples: {
+            expansion: {
+                jsx: string;
+            };
+        };
+    };
+    events: {
+        label: string;
+        description: string;
+        examples: {
+            events: {
+                react: string;
+            };
+        };
+    };
+    alternateIcon: {
+        label: string;
+        examples: {
+            basic: {
+                react: string;
+            };
+        };
+    };
+};

package/dist/lib/components/insight-card/insights.d.ts

@@ -0,0 +1,18 @@
+import { ClassBindings } from "../../decorators/index";
+/** Container for Insight Cards. */
+export declare class SpsInsightsComponent extends HTMLElement {
+    static readonly displayName = "sps-insights";
+    static readonly props: {};
+    private content;
+    private details;
+    private showAdditionalInsights;
+    get [ClassBindings](): string[];
+    constructor();
+    /**
+     * Only the first ten Insight Cards are visible by default; the rest are behind
+     * the "Show Additional Insights"/"Hide Additional Insights" button. This method
+     * will toggle the additional insights.
+     */
+    toggleAdditionalInsights(): void;
+    render(): JSX.Element;
+}

package/dist/lib/components/nav-tabs/nav-tab-set.d.ts

@@ -0,0 +1,7 @@
+/** Contains a set of navigation tabs. */
+export declare class SpsNavTabSetComponent extends HTMLElement {
+    static readonly displayName = "sps-nav-tab-set";
+    static readonly props: {};
+    private content;
+    render(): JSX.Element;
+}

package/dist/lib/components/nav-tabs/nav-tab.d.ts

@@ -0,0 +1,24 @@
+/** @jsx h */
+import { SpsIcon } from "@spscommerce/ds-shared";
+import { ClassBindings } from "../../decorators/index";
+export declare class SpsNavTabComponent extends HTMLElement {
+    static readonly displayName = "sps-nav-tab";
+    static readonly props: {
+        active: string;
+        label: string;
+        icon: string;
+        tag: string;
+        href: string;
+        target: string;
+    };
+    active: boolean;
+    label: string;
+    icon: SpsIcon;
+    tag: string;
+    /** If you need the tab to operate as an HTML link, provide an href. */
+    href: string;
+    /** If you provide href, target is the same attribute as on an <a> element. */
+    target: string;
+    get [ClassBindings](): string[];
+    render(): JSX.Element;
+}

package/dist/lib/components/nav-tabs/nav-tabs.examples.d.ts

@@ -0,0 +1,11 @@
+export declare const SpsNavTabsExamples: {
+    basic: {
+        label: string;
+        description: string;
+        examples: {
+            basic: {
+                react: string;
+            };
+        };
+    };
+};

package/dist/lib/components/photo/photo.d.ts

@@ -0,0 +1,42 @@
+/** @jsx h */
+import { SpsIcon } from "@spscommerce/ds-shared";
+import { ClassBindings, StyleBindings } from "../../decorators/index";
+export declare enum SpsPhotoDisplayMode {
+    FIT = "fit",
+    FILL = "fill"
+}
+export declare class SpsPhotoComponent extends HTMLElement {
+    static readonly displayName = "sps-photo";
+    static readonly props: {
+        src: string;
+        altText: string;
+        mode: string;
+        placeholderIcon: string;
+    };
+    /** Photo source path, exactly the same as for an <img> tag. */
+    src: string;
+    /** Alt text to put on the image for vision impaired users. */
+    altText: string;
+    /** Display mode - fill or fit. */
+    mode: SpsPhotoDisplayMode;
+    /** If src is empty, the placeholder icon will be displayed instead. */
+    placeholderIcon: SpsIcon;
+    private width;
+    private fitWidth;
+    private imageInternal;
+    /** The native HTML <img> element within the photo component. */
+    get image(): HTMLImageElement;
+    set image(newValue: HTMLImageElement);
+    get [ClassBindings](): string[];
+    get [StyleBindings](): {
+        fontSize: string;
+        width: string;
+        height: string;
+    };
+    private waitForWidthInterval;
+    private waitForImgHeightInterval;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): JSX.Element;
+    private setWidth;
+}

package/dist/lib/components/photo/photo.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsPhotoExamples: DSReactExamples;

package/dist/lib/decorators/component.d.ts

@@ -0,0 +1,33 @@
+import type { I18nObject } from "@spscommerce/ds-shared";
+import type { ComponentConfig } from "../utils/index";
+export declare const AttrBindings: unique symbol;
+export declare const ClassBindings: unique symbol;
+export declare const StyleBindings: unique symbol;
+interface DSElementExtension {
+    __initialized: boolean;
+    __observer: MutationObserver;
+    __queuedUpdate: number;
+    __managedClasses: Set<string>;
+    __cbAttributeChanged?: (key: string, oldValue: any, newValue: any) => any;
+    __cbConnected?: () => any;
+    __cbDisconnected?: () => any;
+    __updateHostBindings: () => any;
+    __updateChildQueries: (adhereToRefreshOption?: boolean) => any;
+    __gatherChildren: () => any;
+    __startMutObs: () => any;
+    __stopMutObs: () => any;
+    __doRender: () => any;
+    update: () => any;
+    attributeChangedCallback: (key: string, oldValue: any, newValue: any) => any;
+    connectedCallback: () => any;
+    disconnectedCallback: () => any;
+    contentChangedCallback?: () => any;
+    render?: (i18n: I18nObject) => any;
+}
+export declare type DSComponent = HTMLElement & DSElementExtension;
+/**
+ * Marks a class as a component, setting the tag it will be registered under
+ * when the class is passed to `register()`.
+ */
+export declare function Component(config: ComponentConfig): ClassDecorator;
+export {};

package/dist/lib/decorators/content.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A property on a component class, when decorated with `@Content()`, will
+ * be set to the content that has been placed inside the component. It can
+ * then be placed wherever you want in the component's JSX. Analogous to
+ * the `children` prop in react or `<ng-content>` in Angular.
+ */
+export declare function Content(): PropertyDecorator;

package/dist/lib/decorators/event-dispatcher.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A custom event dispatcher for a component. `T` is the type of `event.detail`,
+ * which will be set to whatever is passed in to `dispatch()`.
+ */
+export interface Dispatcher<T> {
+    dispatch: (detail: T) => CustomEvent<T>;
+}
+/** Defines a component class property as a dispatcher for a custom event. */
+export declare function EventDispatcher(eventName?: string): PropertyDecorator;

package/dist/lib/decorators/event-listener.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Marks a method as a handler for a given event on the host element. For example, to respond
+ * to clicks on a component, you would use a method decorated with `@EventListener("click")`.
+ */
+export declare function EventListener(eventName: string): MethodDecorator;

package/dist/lib/decorators/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./component";
+export * from "./content";
+export * from "./event-dispatcher";
+export * from "./event-listener";
+export * from "./prop";
+export * from "./query-selector";
+export * from "./watch";

package/dist/lib/decorators/prop.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Marks a component class property as a prop, meaning that a value can be passed
+ * in for it via an attribute on the element, and whenever that value changes, the
+ * component will be re-rendered.
+ */
+export declare function Prop(castToType?: (value: unknown) => unknown): PropertyDecorator;

package/dist/lib/decorators/query-selector.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Options for the query selector decorators. If `refresh` is set to true,
+ * the property will be refreshed on every render.
+ */
+export interface QuerySelectorOptions {
+    refresh?: boolean;
+}
+/**
+ * Defines a component class property as containing the
+ * results of a `querySelector(selector)` call on
+ * the component host element.
+ */
+export declare function QuerySelector(selector: string, options?: QuerySelectorOptions): PropertyDecorator;
+/**
+ * Defines a component class property as containing the
+ * results of a `querySelectorAll(selector)` call on
+ * the component host element.
+ */
+export declare function QuerySelectorAll(selector: string, options?: QuerySelectorOptions): PropertyDecorator;

package/dist/lib/decorators/watch.d.ts

@@ -0,0 +1,2 @@
+/** A "watched" property will trigger an update whenever it's written to. */
+export declare function Watch(): PropertyDecorator;