@spscommerce/ds-web-components 5.0.2 → 5.2.2-ie

package/dist/components/nav-tabs/nav-tab.js

@@ -0,0 +1,94 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/** @jsx h */
+/* eslint-disable new-cap */
+import { SpsIcon } from "@spscommerce/ds-shared";
+import { ClassBindings, Component, Prop } from "../../decorators/index";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from "../../utils/pragma";
+var SpsNavTabComponent = /** @class */ (function (_super) {
+    __extends(SpsNavTabComponent, _super);
+    function SpsNavTabComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.active = false;
+        _this.label = "";
+        _this.tag = "";
+        return _this;
+    }
+    Object.defineProperty(SpsNavTabComponent.prototype, ClassBindings, {
+        get: function () {
+            return [
+                "sps-tabbed-nav__nav-item", this.active && "sps-tabbed-nav__nav-item--active",
+            ];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SpsNavTabComponent.prototype.render = function () {
+        return (h("a", { href: this.href, target: this.target, className: "sps-tabbed-nav__nav-item-link", tabIndex: 0 },
+            this.icon && h("i", { className: "sps-icon sps-icon-" + this.icon }),
+            this.label && h("span", null, this.label),
+            this.tag && h("span", { className: "sps-tag sps-tag--default" }, this.tag)));
+    };
+    SpsNavTabComponent.displayName = "sps-nav-tab";
+    SpsNavTabComponent.props = {
+        active: "boolean",
+        label: "string",
+        icon: "SpsIcon",
+        tag: "string",
+        href: "string",
+        target: "string",
+    };
+    __decorate([
+        Prop(),
+        __metadata("design:type", Object)
+    ], SpsNavTabComponent.prototype, "active", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Object)
+    ], SpsNavTabComponent.prototype, "label", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsNavTabComponent.prototype, "icon", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Object)
+    ], SpsNavTabComponent.prototype, "tag", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsNavTabComponent.prototype, "href", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsNavTabComponent.prototype, "target", void 0);
+    SpsNavTabComponent = __decorate([
+        Component({ tag: "sps-nav-tab" })
+    ], SpsNavTabComponent);
+    return SpsNavTabComponent;
+}(HTMLElement));
+export { SpsNavTabComponent };
+//# sourceMappingURL=nav-tab.js.map

package/dist/components/nav-tabs/nav-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-tab.js","sourceRoot":"","sources":["../../../src/components/nav-tabs/nav-tab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,aAAa;AACb,4BAA4B;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AACxE,6DAA6D;AAC7D,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAGvC;IAAwC,sCAAW;IAAnD;QAAA,qEAyCC;QA7BS,YAAM,GAAG,KAAK,CAAC;QAEf,WAAK,GAAG,EAAE,CAAC;QAIX,SAAG,GAAG,EAAE,CAAC;;IAuBnB,CAAC;IAfC,sBAAI,2CAAe;aAAnB;YACE,OAAO;gBACL,0BAA0B,EAAE,IAAI,CAAC,MAAM,IAAI,kCAAkC;aAC9E,CAAC;QACJ,CAAC;;;OAAA;IAED,mCAAM,GAAN;QACE,OAAO,CACL,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAC,+BAA+B,EAAC,QAAQ,EAAE,CAAC;YAC3F,IAAI,CAAC,IAAI,IAAI,SAAG,SAAS,EAAE,uBAAqB,IAAI,CAAC,IAAM,GAAI;YAC/D,IAAI,CAAC,KAAK,IAAI,gBAAO,IAAI,CAAC,KAAK,CAAQ;YACvC,IAAI,CAAC,GAAG,IAAI,YAAM,SAAS,EAAC,0BAA0B,IAAE,IAAI,CAAC,GAAG,CAAQ,CACvE,CACL,CAAC;IACJ,CAAC;IAvCe,8BAAW,GAAG,aAAc,CAAA;IAE5B,wBAAK,GAAG;QACtB,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,SAAS;QACf,GAAG,EAAE,QAAQ;QACb,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,QAAQ;KAChB,CAAA;IAEM;QAAP,IAAI,EAAE;;sDAAgB;IAEf;QAAP,IAAI,EAAE;;qDAAY;IAEX;QAAP,IAAI,EAAE;;oDAAe;IAEd;QAAP,IAAI,EAAE;;mDAAU;IAGT;QAAP,IAAI,EAAE;;oDAAc;IAGb;QAAP,IAAI,EAAE;;sDAAgB;IAxBZ,kBAAkB;QAD9B,SAAS,CAAC,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC;OACrB,kBAAkB,CAyC9B;IAAD,yBAAC;CAAA,AAzCD,CAAwC,WAAW,GAyClD;SAzCY,kBAAkB"}

package/dist/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/components/nav-tabs/nav-tabs.examples.js

@@ -0,0 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsNavTabsExamples = {
+    basic: {
+        label: "Basic Navigation Tabs",
+        description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          <p>Navigation tabs native web component</p>\n        "], ["\n          <p>Navigation tabs native web component</p>\n        "]))),
+        examples: {
+            basic: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const tabs = [\n                            { label: \"Tab A\", icon: \"chart-line\" },\n                            { label: \"Tab B\", icon: \"chart-bar\", tag: \"12\" },\n                            { label: \"Tab C\", icon: \"chart-pie\" }\n                        ]\n\n                        const [activeTab, setActiveTab] = React.useState(0)\n\n                        return (\n                        <sps-nav-tab-set>\n                            {tabs.map((tab, index) => (\n                                <sps-nav-tab\n                                    key={index}\n                                    icon={tab.icon}\n                                    label={tab.label}\n                                    tag={tab.tag}\n                                    active={index === activeTab || null}\n                                    onClick={() => setActiveTab(index)}\n                                />\n                            ))}\n                        </sps-nav-tab-set>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const tabs = [\n                            { label: \"Tab A\", icon: \"chart-line\" },\n                            { label: \"Tab B\", icon: \"chart-bar\", tag: \"12\" },\n                            { label: \"Tab C\", icon: \"chart-pie\" }\n                        ]\n\n                        const [activeTab, setActiveTab] = React.useState(0)\n\n                        return (\n                        <sps-nav-tab-set>\n                            {tabs.map((tab, index) => (\n                                <sps-nav-tab\n                                    key={index}\n                                    icon={tab.icon}\n                                    label={tab.label}\n                                    tag={tab.tag}\n                                    active={index === activeTab || null}\n                                    onClick={() => setActiveTab(index)}\n                                />\n                            ))}\n                        </sps-nav-tab-set>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=nav-tabs.examples.js.map

package/dist/components/nav-tabs/nav-tabs.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-tabs.examples.js","sourceRoot":"","sources":["../../../src/components/nav-tabs/nav-tabs.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE1C,MAAM,CAAC,IAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE;QACL,KAAK,EAAE,uBAAuB;QAC9B,WAAW,EAAE,IAAI,sIAAA,mEAEZ,IAAA;QACL,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,0rCAAA,unCAyBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/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/components/photo/photo.examples.d.ts

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

package/dist/components/photo/photo.examples.js

@@ -0,0 +1,58 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsPhotoExamples = {
+    sizing: {
+        label: "Sizing",
+        description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        <p>\n            Photos are block elements, so a photo fills its container's width unless\n            an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n            photos have been placed in cards which have different widths in the 12\n            column grid.\n        </p>\n    "], ["\n        <p>\n            Photos are block elements, so a photo fills its container's width unless\n            an explicit width is set. It is always a 4:3 aspect ratio. In this example,\n            photos have been placed in cards which have different widths in the 12\n            column grid.\n        </p>\n    "]))),
+        examples: {
+            basic: {
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-2\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n                <div className=\"sfg-col-6\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n            </div>\n        "], ["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-2\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n                <div className=\"sfg-col-6\">\n                    <sps-card>\n                        <sps-photo src=\"assets/images/photo-landscape.jpg\"></sps-photo>\n                    </sps-card>\n                </div>\n            </div>\n        "]))),
+            },
+        },
+    },
+    displayMode: {
+        label: "Fill vs. Fit",
+        description: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        <p>\n            There are two display modes available:\n            <ul>\n                <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n                <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n            </ul>\n        </p>\n    "], ["\n        <p>\n            There are two display modes available:\n            <ul>\n                <li><b>\"fill\"</b> fills the entire 4:3 container, cropping off any excess portions of the image.\n                <li><b>\"fit\"</b> fits the entire image into the container, leaving any excess portions of the container blank.\n            </ul>\n        </p>\n    "]))),
+        examples: {
+            landscape: {
+                description: "<p>Landscape oriented photo (container outline added for illustrative purposes)</p>",
+                jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n                </div>\n            </div>\n        "], ["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fill\"></sps-photo>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-landscape.jpg\" mode=\"fit\"></sps-photo>\n                </div>\n            </div>\n        "]))),
+            },
+            portrait: {
+                description: "<p>Portrait oriented photo (container outline added for illustrative purposes)</p>",
+                jsx: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n                </div>\n            </div>\n        "], ["\n            <div className=\"sfg-row\">\n                <div className=\"sfg-col-4\">\n                    <sps-photo src=\"assets/images/photo-portrait.jpg\" mode=\"fill\"></sps-photo>\n                </div>\n                <div className=\"sfg-col-4\">\n                    <sps-photo id=\"foo\" src=\"assets/images/photo-portrait.jpg\" mode=\"fit\"></sps-photo>\n                </div>\n            </div>\n        "]))),
+            },
+        },
+    },
+    placeholder: {
+        label: "Placeholders",
+        description: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        <p>\n            When an image is not provided for a particular use case (such as a user avatar,\n            a company photo, item image, etc.), a placeholder should be shown in its place.\n\n            The placeholder's icon, selected from our SPS icon set, should represent the\n            type of image it is substituting for.\n        </p>\n    "], ["\n        <p>\n            When an image is not provided for a particular use case (such as a user avatar,\n            a company photo, item image, etc.), a placeholder should be shown in its place.\n\n            The placeholder's icon, selected from our SPS icon set, should represent the\n            type of image it is substituting for.\n        </p>\n    "]))),
+        examples: {
+            general: {
+                description: "<p>General Photo</p>",
+                jsx: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"photo\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"photo\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
+            },
+            photoAlt: {
+                description: "<p>Photo Alt</p>",
+                jsx: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"camera\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"camera\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
+            },
+            user: {
+                description: "<p>User / Single Person</p>",
+                jsx: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"user\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"user\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
+            },
+            group: {
+                description: "<p>Group / Multiple People</p>",
+                jsx: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"group\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"group\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
+            },
+            company: {
+                description: "<p>Company / Building</p>",
+                jsx: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"building\"></sps-photo>\n                    </div>\n                </div>\n            "], ["\n                <div className=\"sfg-row\">\n                    <div className=\"sfg-col-3\">\n                        <sps-photo placeholderIcon=\"building\"></sps-photo>\n                    </div>\n                </div>\n            "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+//# sourceMappingURL=photo.examples.js.map

package/dist/components/photo/photo.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo.examples.js","sourceRoot":"","sources":["../../../src/components/photo/photo.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,gBAAgB,GAAoB;IAC/C,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,IAAI,mYAAA,gUAOhB,IAAA;QACD,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,qzBAAA,kvBAkBR,IAAA;aACF;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,IAAI,qbAAA,kXAQhB,IAAA;QACD,QAAQ,EAAE;YACR,SAAS,EAAE;gBACT,WAAW,EAAE,qFAAqF;gBAClG,GAAG,EAAE,IAAI,meAAA,gaASR,IAAA;aACF;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,oFAAoF;gBACjG,GAAG,EAAE,IAAI,4eAAA,yaASR,IAAA;aACF;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,IAAI,+aAAA,4WAQhB,IAAA;QACD,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,WAAW,EAAE,sBAAsB;gBACnC,GAAG,EAAE,IAAI,kTAAA,+OAMJ,IAAA;aACN;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,kBAAkB;gBAC/B,GAAG,EAAE,IAAI,mTAAA,gPAMJ,IAAA;aACN;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,6BAA6B;gBAC1C,GAAG,EAAE,IAAI,iTAAA,8OAMJ,IAAA;aACN;YACD,KAAK,EAAE;gBACL,WAAW,EAAE,gCAAgC;gBAC7C,GAAG,EAAE,IAAI,oTAAA,+OAMJ,IAAA;aACN;YACD,OAAO,EAAE;gBACP,WAAW,EAAE,2BAA2B;gBACxC,GAAG,EAAE,IAAI,uTAAA,kPAMJ,IAAA;aACN;SACF;KACF;CACF,CAAC"}

package/dist/components/photo/photo.js

@@ -0,0 +1,172 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+/** @jsx h */
+/* eslint-disable new-cap */
+import { SpsIcon } from "@spscommerce/ds-shared";
+import { ClassBindings, Component, Prop, QuerySelector, StyleBindings, Watch, } from "../../decorators/index";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from "../../utils/pragma";
+export var SpsPhotoDisplayMode;
+(function (SpsPhotoDisplayMode) {
+    SpsPhotoDisplayMode["FIT"] = "fit";
+    SpsPhotoDisplayMode["FILL"] = "fill";
+})(SpsPhotoDisplayMode || (SpsPhotoDisplayMode = {}));
+var CPT_NAME = "sps-photo";
+var SpsPhotoComponent = /** @class */ (function (_super) {
+    __extends(SpsPhotoComponent, _super);
+    function SpsPhotoComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /** Display mode - fill or fit. */
+        _this.mode = SpsPhotoDisplayMode.FILL;
+        return _this;
+    }
+    Object.defineProperty(SpsPhotoComponent.prototype, "image", {
+        /** The native HTML <img> element within the photo component. */
+        get: function () {
+            return this.imageInternal;
+        },
+        set: function (newValue) {
+            var _this = this;
+            this.imageInternal = newValue;
+            if (newValue) {
+                if (this.waitForImgHeightInterval) {
+                    window.clearInterval(this.waitForImgHeightInterval);
+                }
+                this.waitForImgHeightInterval = window.setInterval(function () {
+                    var imgRect = newValue.getBoundingClientRect();
+                    if (imgRect.height) {
+                        window.clearInterval(_this.waitForImgHeightInterval);
+                        delete _this.waitForImgHeightInterval;
+                        var imageIsLandscape = true;
+                        imageIsLandscape = imgRect.width / imgRect.height > 1;
+                        _this.fitWidth = imageIsLandscape === (_this.mode === SpsPhotoDisplayMode.FIT);
+                    }
+                }, 1000 / 60);
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SpsPhotoComponent.prototype, ClassBindings, {
+        get: function () {
+            return [
+                CPT_NAME,
+                this.fitWidth
+                    ? CPT_NAME + "--fit-width"
+                    : CPT_NAME + "--fit-height",
+                this.placeholderIcon && CPT_NAME + "--placeholder",
+            ];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SpsPhotoComponent.prototype, StyleBindings, {
+        get: function () {
+            return {
+                fontSize: this.width * 0.05 + "rem",
+                width: this.width + "rem",
+                height: 0.75 * this.width + "rem",
+            };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SpsPhotoComponent.prototype.connectedCallback = function () {
+        var _this = this;
+        this.waitForWidthInterval = window.setInterval(function () {
+            var boundingClientRect = _this.getBoundingClientRect();
+            if (boundingClientRect.width) {
+                _this.setWidth(boundingClientRect.width);
+                window.clearInterval(_this.waitForWidthInterval);
+                delete _this.waitForWidthInterval;
+            }
+        }, 1000 / 60);
+    };
+    SpsPhotoComponent.prototype.disconnectedCallback = function () {
+        if (this.waitForWidthInterval) {
+            window.clearInterval(this.waitForWidthInterval);
+        }
+        if (this.waitForImgHeightInterval) {
+            window.clearInterval(this.waitForImgHeightInterval);
+        }
+    };
+    SpsPhotoComponent.prototype.render = function () {
+        if (this.src) {
+            return this.width
+                ? h("img", { src: this.src, alt: this.altText })
+                : h("span", null);
+        }
+        return h("i", { className: "sps-icon sps-icon-" + this.placeholderIcon });
+    };
+    SpsPhotoComponent.prototype.setWidth = function (hostWidth) {
+        if (hostWidth && !this.width) {
+            var baseFontSize = document.body.parentElement.style.fontSize || "16px";
+            var remPx = Number(baseFontSize.substr(0, baseFontSize.length - 2));
+            this.width = hostWidth / remPx;
+        }
+    };
+    SpsPhotoComponent.displayName = CPT_NAME;
+    SpsPhotoComponent.props = {
+        src: "string",
+        altText: "string",
+        mode: "SpsPhotoDisplayMode",
+        placeholderIcon: "SpsIcon",
+    };
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsPhotoComponent.prototype, "src", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsPhotoComponent.prototype, "altText", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", Object)
+    ], SpsPhotoComponent.prototype, "mode", void 0);
+    __decorate([
+        Prop(),
+        __metadata("design:type", String)
+    ], SpsPhotoComponent.prototype, "placeholderIcon", void 0);
+    __decorate([
+        Watch(),
+        __metadata("design:type", Number)
+    ], SpsPhotoComponent.prototype, "width", void 0);
+    __decorate([
+        Watch(),
+        __metadata("design:type", Object)
+    ], SpsPhotoComponent.prototype, "fitWidth", void 0);
+    __decorate([
+        QuerySelector("img", { refresh: true }),
+        __metadata("design:type", HTMLImageElement),
+        __metadata("design:paramtypes", [HTMLImageElement])
+    ], SpsPhotoComponent.prototype, "image", null);
+    SpsPhotoComponent = __decorate([
+        Component({ tag: CPT_NAME })
+    ], SpsPhotoComponent);
+    return SpsPhotoComponent;
+}(HTMLElement));
+export { SpsPhotoComponent };
+//# sourceMappingURL=photo.js.map

package/dist/components/photo/photo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo.js","sourceRoot":"","sources":["../../../src/components/photo/photo.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,aAAa;AACb,4BAA4B;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EACL,aAAa,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,GACpE,MAAM,wBAAwB,CAAC;AAChC,6DAA6D;AAC7D,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AAEvC,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,kCAAW,CAAA;IACX,oCAAa,CAAA;AACf,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED,IAAM,QAAQ,GAAG,WAAW,CAAC;AAG7B;IAAuC,qCAAW;IAAlD;QAAA,qEA+GC;QA/FC,kCAAkC;QAC1B,UAAI,GAAG,mBAAmB,CAAC,IAAI,CAAC;;IA8F1C,CAAC;IAjF0C,sBAAI,oCAAK;QADlD,gEAAgE;aACvB;YACvC,OAAO,IAAI,CAAC,aAAa,CAAC;QAC5B,CAAC;aAED,UAAU,QAA0B;YAApC,iBAiBC;YAhBC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;YAC9B,IAAI,QAAQ,EAAE;gBACZ,IAAI,IAAI,CAAC,wBAAwB,EAAE;oBACjC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;iBACrD;gBACD,IAAI,CAAC,wBAAwB,GAAG,MAAM,CAAC,WAAW,CAAC;oBACjD,IAAM,OAAO,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAC;oBACjD,IAAI,OAAO,CAAC,MAAM,EAAE;wBAClB,MAAM,CAAC,aAAa,CAAC,KAAI,CAAC,wBAAwB,CAAC,CAAC;wBACpD,OAAO,KAAI,CAAC,wBAAwB,CAAC;wBACrC,IAAI,gBAAgB,GAAG,IAAI,CAAC;wBAC5B,gBAAgB,GAAG,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;wBACtD,KAAI,CAAC,QAAQ,GAAG,gBAAgB,KAAK,CAAC,KAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,GAAG,CAAC,CAAC;qBAC9E;gBACH,CAAC,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;aACf;QACH,CAAC;;;OAnBA;IAqBD,sBAAI,0CAAe;aAAnB;YACE,OAAO;gBACL,QAAQ;gBACR,IAAI,CAAC,QAAQ;oBACX,CAAC,CAAI,QAAQ,gBAAa;oBAC1B,CAAC,CAAI,QAAQ,iBAAc;gBAC7B,IAAI,CAAC,eAAe,IAAO,QAAQ,kBAAe;aACnD,CAAC;QACJ,CAAC;;;OAAA;IAED,sBAAI,0CAAe;aAAnB;YACE,OAAO;gBACL,QAAQ,EAAK,IAAI,CAAC,KAAK,GAAG,IAAI,QAAK;gBACnC,KAAK,EAAK,IAAI,CAAC,KAAK,QAAK;gBACzB,MAAM,EAAK,IAAI,GAAG,IAAI,CAAC,KAAK,QAAK;aAClC,CAAC;QACJ,CAAC;;;OAAA;IAMD,6CAAiB,GAAjB;QAAA,iBASC;QARC,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAAC;YAC7C,IAAM,kBAAkB,GAAG,KAAI,CAAC,qBAAqB,EAAE,CAAC;YACxD,IAAI,kBAAkB,CAAC,KAAK,EAAE;gBAC5B,KAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;gBACxC,MAAM,CAAC,aAAa,CAAC,KAAI,CAAC,oBAAoB,CAAC,CAAC;gBAChD,OAAO,KAAI,CAAC,oBAAoB,CAAC;aAClC;QACH,CAAC,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC;IAChB,CAAC;IAED,gDAAoB,GAApB;QACE,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;SACjD;QACD,IAAI,IAAI,CAAC,wBAAwB,EAAE;YACjC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SACrD;IACH,CAAC;IAED,kCAAM,GAAN;QACE,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,OAAO,IAAI,CAAC,KAAK;gBACf,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI;gBAC3C,CAAC,CAAC,eAAQ,CAAC;SACd;QACD,OAAO,SAAG,SAAS,EAAE,uBAAqB,IAAI,CAAC,eAAiB,GAAI,CAAC;IACvE,CAAC;IAEO,oCAAQ,GAAhB,UAAiB,SAAS;QACxB,IAAI,SAAS,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAC5B,IAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,IAAI,MAAM,CAAC;YAC1E,IAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;YACtE,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC;SAChC;IACH,CAAC;IA7Ge,6BAAW,GAAG,QAAS,CAAA;IAEvB,uBAAK,GAAG;QACtB,GAAG,EAAE,QAAQ;QACb,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,qBAAqB;QAC3B,eAAe,EAAE,SAAS;KAC1B,CAAA;IAGM;QAAP,IAAI,EAAE;;kDAAa;IAGZ;QAAP,IAAI,EAAE;;sDAAiB;IAGhB;QAAP,IAAI,EAAE;;mDAAiC;IAGhC;QAAP,IAAI,EAAE;;8DAA0B;IAGxB;QAAR,KAAK,EAAE;;oDAAuB;IAEtB;QAAR,KAAK,EAAE;;uDAAkB;IAKe;QAAxC,aAAa,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kCAIpB,gBAAgB;yCAAhB,gBAAgB;kDAFnC;IAhCU,iBAAiB;QAD7B,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC;OAChB,iBAAiB,CA+G7B;IAAD,wBAAC;CAAA,AA/GD,CAAuC,WAAW,GA+GjD;SA/GY,iBAAiB"}

package/dist/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 {};