@spscommerce/ds-web-components 5.0.0-rc1 → 5.0.0

package/dist/lib/manifest.d.ts

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

package/dist/lib/utils/comment.d.ts

@@ -0,0 +1,2 @@
+/** docs:ignore */
+export declare function comment(content: string): any;

package/dist/lib/utils/i18n.d.ts

@@ -0,0 +1,3 @@
+import type { I18nObject } from "@spscommerce/ds-shared";
+export declare function webComponentsUseI18n(i18n: I18nObject): void;
+export declare function getI18n(): I18nObject;

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

@@ -0,0 +1,5 @@
+export * from "./comment";
+export * from "./i18n";
+export * from "./metadata";
+export * from "./pragma";
+export * from "./register";

package/dist/lib/utils/metadata.d.ts

@@ -0,0 +1,22 @@
+export interface ComponentConfig {
+    tag: string;
+}
+/** docs:ignore */
+export interface ComponentChildQuery {
+    key: string;
+    selector: string;
+    refresh: boolean;
+    all: boolean;
+}
+/** docs:ignore */
+export interface ComponentMetadata extends ComponentConfig {
+    childQueries?: ComponentChildQuery[];
+    contentProp?: PropertyKey;
+    eventListeners?: Array<[string, PropertyKey]>;
+}
+/** docs:ignore */
+export declare const Metadata: Readonly<{
+    has(target: any, key: string): boolean;
+    add(target: any, metadata: Partial<ComponentMetadata>): void;
+    get<T = any>(target: any, key: string, defaultValue?: T): T;
+}>;

package/dist/lib/utils/pragma.d.ts

@@ -0,0 +1,6 @@
+/** docs:ignore */
+export declare const MARK_CONTENT_START = "idom-pragma:content-begin";
+/** docs:ignore */
+export declare const MARK_CONTENT_END = "idom-pragma:content-end";
+/** JSX pragma that utilizes incremental-dom. */
+export declare function h(tagName: string, attrs: any, ...children: any[]): () => void;

package/dist/lib/utils/register.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Register a list of DS web components so that they can be used. Should be done
+ * just once in your app, at init/bootstrap time.
+ */
+export declare function register(...Components: any[]): void;
+/**
+ * If for some reason you have a tag name conflict between a DS web component and
+ * another component in your app, you can use this to override the "sps" namespace
+ * for the DS web component(s). You pass in the new namespace, and it returns a customized
+ * `register()` function that you can pass DS web components to. For example, you could
+ * use this to make `<sps-photo>` become `<foo-photo>` instead.
+ */
+export declare function namespaceOverrideRegistrar(overrideNamespace: string): (...Components: any[]) => void;

package/dist/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@spscommerce/ds-web-components",
+  "description": "SPS Design System Native Web Components",
+  "version": "5.0.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-web-components",
+  "homepage": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-web-components#readme",
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types && pnpm run build:create-dist && pnpm run build:copy-dist",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "pnpm pack && node ../../scripts/publish-package.js",
+    "build:create-dist": "mkdir -p dist && cp -r lib dist/ && cp package.json dist/ && cp README.md dist/ && cp global.d.ts dist/",
+    "build:copy-dist": "node ../../scripts/copy-built-package.js ../../node_modules/@spscommerce/ds-web-components"
+  },
+  "main": "./lib/index.cjs.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "incremental-dom": "^0.6.0"
+  },
+  "peerDependencies": {
+    "@spscommerce/ds-shared": "workspace:*",
+    "@spscommerce/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@spscommerce/ds-shared": "workspace:*",
+    "@spscommerce/utils": "workspace:*"
+  }
+}

package/global.d.ts

@@ -1,15 +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;
-        }
+  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/lib/components/file-upload/file-upload.d.ts

@@ -1,107 +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;
-        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;
-    private accept;
-    private acceptMIMETypes;
-    private acceptExtensionsDescription;
-    /** 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: Array<string> | string;
-    private maxSizeBytes;
-    /** The maximum allowable size in bytes for files selected by the component. */
-    maxSize: 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<Array<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;
-    private active;
-    private error;
-    /** 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: Array<File>;
-    private namesOfUnsupportedFiles;
-    get [ClassBindings](): string[];
-    constructor();
-    private parseAndValidateMaxSize;
-    private processAcceptExtensions;
-    connectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
-    private selectFiles;
-    private handleDragOver;
-    private handleDragEnter;
-    private handleDragLeave;
-    private handleDrop;
-    private handleBrowseLinkClick;
-    private handleDownloadButtonClick;
-    private handleFileInputChange;
-    /** 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;
-}
+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/lib/components/file-upload/file-upload.examples.d.ts

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

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

@@ -1,75 +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"
-}
+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/lib/components/index.d.ts

@@ -1,11 +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';
+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/lib/components/insight-card/insight-card.d.ts

@@ -1,36 +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;
-}
+/** @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;
+}