@depict-ai/js-ui - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/index.d.ts

@@ -1,27 +0,21 @@
-import { category_i18n, DepictAPI, DepictCategory as _DepictCategory1, DepictBaseConfig, DepictSearchConfig, search_i18n, BasePLPConfig, BaseSearchPageConfig } from "@depict-ai/ui";
+import { BaseProviderConfig, BaseSearchProviderConfig, search_i18n, category_i18n, BasePLPConfig, BaseSearchPageConfig, BaseCategoryPageConfig } from "@depict-ai/ui";
 import { Display } from "@depict-ai/utilishared";
-export const version = "0.0.2";
-type JSDepictCategoryConstructorOptions = {
-    market: string;
-    merchant: string;
-    localization: category_i18n;
-    api?: DepictAPI;
-};
-export interface DepictCategory extends _DepictCategory1 {
+export const version = "0.0.3";
+interface SearchProviderConfig extends BaseProviderConfig, BaseSearchProviderConfig {
+    locale?: search_i18n;
 }
-export class DepictCategory extends _DepictCategory1 {
+export class DepictSearchProvider<T extends Display> {
     #private;
-    get category_id(): _DepictCategory1["category_id"];
-    set category_id(id: _DepictCategory1["category_id"]);
-    constructor(options: JSDepictCategoryConstructorOptions);
+    openModal(alignerElement?: HTMLElement): void;
+    constructor(options: SearchProviderConfig);
 }
-interface JSDepictBaseConfig extends DepictBaseConfig {
+interface CategoryProviderConfig extends BaseProviderConfig {
+    categoryId?: string;
+    locale?: category_i18n;
 }
-interface JSDepictSearchConfig extends DepictSearchConfig {
-    locale?: search_i18n;
-}
-export class DepictSearch<T extends Display> {
+export class DepictCategoryProvider {
     #private;
-    openModal(alignerElement?: HTMLElement): void;
-    constructor(options: JSDepictBaseConfig & JSDepictSearchConfig);
+    get categoryId(): string;
+    set categoryId(id: string);
+    constructor(options: CategoryProviderConfig);
 }
@@ -38,8 +32,8 @@ interface PLPConfig<T extends Display> extends BasePLPConfig {
 type DepictProductCard<T extends Display> = (display: T | null) => HTMLElement | HTMLElement[];
-interface JSDepictSearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
-    depictSearch: DepictSearch<T>;
+interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
+    searchProvider: DepictSearchProvider<T>;
 }
-export function DepictSearchPage<T extends Display>({ depictSearch, includeInputField, gridSpacing, columnsAtSize, productCard, }: JSDepictSearchPageConfig<T>): HTMLElement;
-interface JSDepictSearchFieldConfig<T extends Display> {
-    depictSearch: DepictSearch<T>;
+export function SearchPage<T extends Display>({ searchProvider, includeInputField, gridSpacing, columnsAtSize, productCard, }: SearchPageConfig<T>): HTMLElement;
+interface SearchFieldConfig<T extends Display> {
+    searchProvider: DepictSearchProvider<T>;
     /**
@@ -55,4 +49,19 @@ * A DOM element that the modal should be aligned to.
 }
-export function DepictSearchField<T extends Display>({ depictSearch, alignerRef, }: JSDepictSearchFieldConfig<T>): HTMLElement;
-export { QuickLinks, BreadCrumbs, CategoryPage as DepictCategoryPage, CategoryTitle, embedded_num_products as EmbeddedNumProducts, PageReplacer, } from "@depict-ai/ui";
+export function SearchField<T extends Display>({ searchProvider, alignerRef }: SearchFieldConfig<T>): HTMLElement;
+interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig, PLPConfig<T> {
+    categoryProvider: DepictCategoryProvider;
+}
+export function CategoryPage<T extends Display>({ gridSpacing, columnsAtSize, productCard, categoryProvider, showBreadcrumbs, showQuicklinks, }: CategoryPageConfig<T>): HTMLElement;
+type renderMode = "append" | "replace";
+interface PageReplacerConfig {
+    isPageToReplace: (url: URL) => boolean;
+    selectorToReplace: string;
+    renderContent: () => HTMLElement | HTMLElement[];
+    renderMode?: renderMode;
+    documentTitle?: string;
+}
+export class PageReplacer {
+    #private;
+    constructor({ isPageToReplace, selectorToReplace, renderContent, renderMode, documentTitle, }: PageReplacerConfig);
+}
 export type { SDKGridSpacing, SDKColsAtSize } from "@depict-ai/ui";

dist/main.js

@@ -10,14 +10,10 @@ var $kJ2V0$depictaiutilishared = require("@depict-ai/utilishared");
 
-$parcel$export(module.exports, "DepictCategory", () => $5d73daadc1ecf2eb$export$a37bc0da76a8b4a3);
-$parcel$export(module.exports, "DepictSearch", () => $ec6586e193d9e04c$export$3c9b3f63af0b0eda);
-$parcel$export(module.exports, "DepictSearchPage", () => $845246e31bc6ced7$export$96f2e505ff09cc14);
-$parcel$export(module.exports, "DepictSearchField", () => $d67bcb30c03ff910$export$92c234cce2fb32b0);
-$parcel$export(module.exports, "QuickLinks", () => $05c934aa8b1a01c6$re_export$QuickLinks);
-$parcel$export(module.exports, "BreadCrumbs", () => $05c934aa8b1a01c6$re_export$BreadCrumbs);
-$parcel$export(module.exports, "DepictCategoryPage", () => $05c934aa8b1a01c6$re_export$DepictCategoryPage);
-$parcel$export(module.exports, "CategoryTitle", () => $05c934aa8b1a01c6$re_export$CategoryTitle);
-$parcel$export(module.exports, "EmbeddedNumProducts", () => $05c934aa8b1a01c6$re_export$EmbeddedNumProducts);
-$parcel$export(module.exports, "PageReplacer", () => $05c934aa8b1a01c6$re_export$PageReplacer);
+$parcel$export(module.exports, "DepictCategoryProvider", () => $9ff57c3a0cadef46$export$5d13af1f32ae532e);
+$parcel$export(module.exports, "DepictSearchProvider", () => $535f678cc496dfac$export$9aa84a6b7bde7bae);
+$parcel$export(module.exports, "SearchPage", () => $65f91034a62918b3$export$a54ec244c8863715);
+$parcel$export(module.exports, "SearchField", () => $4e06d78c766e0b19$export$b94867ecbd698f21);
+$parcel$export(module.exports, "CategoryPage", () => $9a1e0759dcd82445$export$f7d2f673fc2f091d);
+$parcel$export(module.exports, "PageReplacer", () => $6c803eee2e4cc289$export$3ccaa27d81dd8556);
 $parcel$export(module.exports, "version", () => $98b48f9e57507434$export$83d89fbfd8236492);
-const $98b48f9e57507434$export$83d89fbfd8236492 = "0.0.2";
+const $98b48f9e57507434$export$83d89fbfd8236492 = "0.0.3";
 
@@ -28,8 +24,16 @@
 
-class $5d73daadc1ecf2eb$export$a37bc0da76a8b4a3 extends (0, $kJ2V0$depictaiui.DepictCategory) {
-    #original_category_id_descriptor = Object.getOwnPropertyDescriptor((0, $kJ2V0$depictaiui.DepictCategory).prototype, "category_id");
-    get category_id() {
-        return this.#original_category_id_descriptor.get.call(this);
+
+// A workaround system for completely hiding our @depict-ai/ui internals in wrapped components,
+// while still allowing the wrapped components to expose the internals to each other. Each wrapped component is responsible for creating
+// the internal instance and storing it in this WeakMap, then other wrapped components can access the internals related to another wrapped component.
+const $54abd1d4301187ef$export$981972f5b84bc3cb = new WeakMap();
+const $54abd1d4301187ef$export$cad8b33069faf956 = new WeakMap();
+
+
+class $9ff57c3a0cadef46$export$5d13af1f32ae532e {
+    #category;
+    get categoryId() {
+        return this.#category.category_id;
     }
-    set category_id(id) {
+    set categoryId(id) {
         // When they set a category id, save it in the state, so we can restore it on back/forward
@@ -41,6 +45,12 @@ const old_state = history.state;
         }, "", location.href);
-        this.#original_category_id_descriptor.set.call(this, id);
+        this.#category.category_id = id;
     }
+    // Todo: Expose changing merchant and market etc, same as react-ui.
     constructor(options){
-        super({
+        const { market: market , merchant: merchant , locale: locale , categoryId: categoryId  } = options;
+        const usedLocale = locale ?? (0, $kJ2V0$depictaiuilocales.en);
+        this.#category = new (0, $kJ2V0$depictaiui.DepictCategory)({
+            market: market,
+            merchant: merchant,
+            localization: usedLocale,
             // Navigate between different categories using `history.pushState` by default, to avoid costly full page loads on server side rendered sites
@@ -58,5 +68,6 @@ on_navigation: (url, _event, _ref)=>{
                 }, "", url);
-            },
-            ...options
+            }
         });
+        if (categoryId) this.#category.category_id = categoryId;
+        (0, $54abd1d4301187ef$export$cad8b33069faf956).set(this, this.#category);
         (0, $kJ2V0$depictaiutilishared.catchify)(async ()=>{
@@ -66,4 +77,4 @@ for await (const _ of (0, $kJ2V0$depictaiutilishared.href_change_ipns)){
                 const id_in_state = history.state.category_current_query_id;
-                if (id_in_state && id_in_state !== this.category_id) // Don't actually call the setter on (this), because we don't want to update the state
-                this.#original_category_id_descriptor.set.call(this, id_in_state);
+                if (id_in_state && id_in_state !== this.categoryId) // Don't actually call the setter on (this), because we don't want to update the state
+                this.#category.category_id = id_in_state;
             }
@@ -77,9 +88,4 @@ })();
 
-// A workaround system for completely hiding our @depict-ai/ui internals in wrapped components,
-// while still allowing the wrapped components to expose the internals to each other. Each wrapped component is responsible for creating
-// the internal instance and storing it in this WeakMap, then other wrapped components can access the internals related to another wrapped component.
-const $54abd1d4301187ef$export$981972f5b84bc3cb = new WeakMap();
 
-
-class $ec6586e193d9e04c$export$3c9b3f63af0b0eda {
+class $535f678cc496dfac$export$9aa84a6b7bde7bae {
     #search;
@@ -119,10 +125,10 @@ openModal(alignerElement) {
 
-const $845246e31bc6ced7$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div></div>`, 2);
-function $845246e31bc6ced7$export$96f2e505ff09cc14(_ref) {
-    let { depictSearch: depictSearch , includeInputField: includeInputField , gridSpacing: gridSpacing , columnsAtSize: columnsAtSize , productCard: productCard  } = _ref;
+const $65f91034a62918b3$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div></div>`, 2);
+function $65f91034a62918b3$export$a54ec244c8863715(_ref) {
+    let { searchProvider: searchProvider , includeInputField: includeInputField , gridSpacing: gridSpacing , columnsAtSize: columnsAtSize , productCard: productCard  } = _ref;
     // Todo: get rid of wrapper div by making Searchpage just export one element. Comments can go inside that element.
     return (()=>{
-        const _el$ = $845246e31bc6ced7$var$_tmpl$.cloneNode(true);
+        const _el$ = $65f91034a62918b3$var$_tmpl$.cloneNode(true);
         (0, $kJ2V0$solidjsweb.insert)(_el$, ()=>(0, $kJ2V0$depictaiui.SearchPage)({
-                depict_search: (0, $54abd1d4301187ef$export$981972f5b84bc3cb).get(depictSearch),
+                depict_search: (0, $54abd1d4301187ef$export$981972f5b84bc3cb).get(searchProvider),
                 include_input_field: includeInputField,
@@ -163,10 +169,10 @@ // Todo: shared defaults with react-ui
 
-const $d67bcb30c03ff910$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div></div>`, 2);
-function $d67bcb30c03ff910$export$92c234cce2fb32b0(_ref) {
-    let { depictSearch: depictSearch , alignerRef: alignerRef  } = _ref;
+const $4e06d78c766e0b19$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div></div>`, 2);
+function $4e06d78c766e0b19$export$b94867ecbd698f21(_ref) {
+    let { searchProvider: searchProvider , alignerRef: alignerRef  } = _ref;
     // Todo: get rid of wrapper div by making SearchField just export one element. Comments can go inside that element.
     return (()=>{
-        const _el$ = $d67bcb30c03ff910$var$_tmpl$.cloneNode(true);
+        const _el$ = $4e06d78c766e0b19$var$_tmpl$.cloneNode(true);
         (0, $kJ2V0$solidjsweb.insert)(_el$, ()=>(0, $kJ2V0$depictaiui.SearchField)({
-                depict_search: (0, $54abd1d4301187ef$export$981972f5b84bc3cb).get(depictSearch),
+                depict_search: (0, $54abd1d4301187ef$export$981972f5b84bc3cb).get(searchProvider),
                 aligner_ref: alignerRef
@@ -180,4 +186,72 @@ }));
 
+
+
+
+const $9a1e0759dcd82445$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$kJ2V0$solidjsweb.template)(`<div></div>`, 2);
+function $9a1e0759dcd82445$export$f7d2f673fc2f091d(_ref) {
+    let { gridSpacing: gridSpacing , columnsAtSize: columnsAtSize , productCard: productCard , categoryProvider: categoryProvider , showBreadcrumbs: showBreadcrumbs , showQuicklinks: showQuicklinks  } = _ref;
+    // Todo: get rid of wrapper div by making CategoryPage just export one element. Comments can go inside that element.
+    return (()=>{
+        const _el$ = $9a1e0759dcd82445$var$_tmpl$.cloneNode(true);
+        (0, $kJ2V0$solidjsweb.insert)(_el$, ()=>(0, $kJ2V0$depictaiui.CategoryPage)({
+                depict_category: (0, $54abd1d4301187ef$export$cad8b33069faf956).get(categoryProvider),
+                // Todo: shared defaults with react-ui
+                show_breadcrumbs: showBreadcrumbs === undefined ? true : showBreadcrumbs,
+                show_quicklinks: showQuicklinks === undefined ? true : showQuicklinks,
+                cols_at_size: columnsAtSize ?? [
+                    [
+                        4
+                    ],
+                    [
+                        3,
+                        1024
+                    ],
+                    [
+                        2,
+                        901
+                    ]
+                ],
+                grid_spacing: gridSpacing ?? "2%",
+                // Todo: Allow customization
+                category_title: (0, $kJ2V0$depictaiui.CategoryTitle),
+                // Todo: Do we need this?
+                get_product_id: ()=>"",
+                // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
+                product_card_template: (display)=>{
+                    const card = productCard(display);
+                    return Array.isArray(card) ? card : [
+                        card
+                    ];
+                }
+            }));
+        return _el$;
+    })();
+}
+
+
+
+class $6c803eee2e4cc289$export$3ccaa27d81dd8556 {
+    #page_replacer;
+    // Todo: expose more things, such as a close/dispose method? Do we need the event handling stuff?
+    constructor(_ref){
+        let { isPageToReplace: isPageToReplace , selectorToReplace: selectorToReplace , renderContent: renderContent , renderMode: renderMode = "append" , documentTitle: documentTitle  } = _ref;
+        this.#page_replacer = new (0, $kJ2V0$depictaiui.PageReplacer)({
+            is_page_: isPageToReplace,
+            selector_: selectorToReplace,
+            // Todo: Most optimized way to do this
+            render_: ()=>{
+                const content = renderContent();
+                return Array.isArray(content) ? content : [
+                    content
+                ];
+            },
+            append_instead_of_replace_: renderMode === "append",
+            title_: documentTitle
+        });
+    }
+}
+
+
 (0, $kJ2V0$depictaiutilishared.add_to_version_info)("js-ui", (0, $98b48f9e57507434$export$83d89fbfd8236492));
 
 

dist/module.js

 import {add_to_version_info as $gXbnb$add_to_version_info, catchify as $gXbnb$catchify, href_change_ipns as $gXbnb$href_change_ipns} from "@depict-ai/utilishared";
-import {QuickLinks as $b9ade2e31ecd6301$re_export$QuickLinks, BreadCrumbs as $b9ade2e31ecd6301$re_export$BreadCrumbs, CategoryPage as $b9ade2e31ecd6301$re_export$DepictCategoryPage, CategoryTitle as $b9ade2e31ecd6301$re_export$CategoryTitle, embedded_num_products as $b9ade2e31ecd6301$re_export$EmbeddedNumProducts, PageReplacer as $b9ade2e31ecd6301$re_export$PageReplacer, DepictCategory as $gXbnb$DepictCategory, open_modal_with_alignment as $gXbnb$open_modal_with_alignment, DepictSearch as $gXbnb$DepictSearch, SearchPage as $gXbnb$SearchPage, SearchField as $gXbnb$SearchField} from "@depict-ai/ui";
+import {DepictCategory as $gXbnb$DepictCategory, open_modal_with_alignment as $gXbnb$open_modal_with_alignment, DepictSearch as $gXbnb$DepictSearch, SearchPage as $gXbnb$SearchPage, SearchField as $gXbnb$SearchField, CategoryPage as $gXbnb$CategoryPage, CategoryTitle as $gXbnb$CategoryTitle, PageReplacer as $gXbnb$PageReplacer} from "@depict-ai/ui";
 import {en as $gXbnb$en} from "@depict-ai/ui/locales";
 import {template as $gXbnb$template, insert as $gXbnb$insert} from "solid-js/web";
 
-const $384f36a64c74679e$export$83d89fbfd8236492 = "0.0.2";
+const $384f36a64c74679e$export$83d89fbfd8236492 = "0.0.3";
 
@@ -12,8 +12,16 @@
 
-class $c5a45273c059819b$export$a37bc0da76a8b4a3 extends (0, $gXbnb$DepictCategory) {
-    #original_category_id_descriptor = Object.getOwnPropertyDescriptor((0, $gXbnb$DepictCategory).prototype, "category_id");
-    get category_id() {
-        return this.#original_category_id_descriptor.get.call(this);
+
+// A workaround system for completely hiding our @depict-ai/ui internals in wrapped components,
+// while still allowing the wrapped components to expose the internals to each other. Each wrapped component is responsible for creating
+// the internal instance and storing it in this WeakMap, then other wrapped components can access the internals related to another wrapped component.
+const $d240dc94bec9dea4$export$981972f5b84bc3cb = new WeakMap();
+const $d240dc94bec9dea4$export$cad8b33069faf956 = new WeakMap();
+
+
+class $2d74c140fd7068d0$export$5d13af1f32ae532e {
+    #category;
+    get categoryId() {
+        return this.#category.category_id;
     }
-    set category_id(id) {
+    set categoryId(id) {
         // When they set a category id, save it in the state, so we can restore it on back/forward
@@ -25,6 +33,12 @@ const old_state = history.state;
         }, "", location.href);
-        this.#original_category_id_descriptor.set.call(this, id);
+        this.#category.category_id = id;
     }
+    // Todo: Expose changing merchant and market etc, same as react-ui.
     constructor(options){
-        super({
+        const { market: market , merchant: merchant , locale: locale , categoryId: categoryId  } = options;
+        const usedLocale = locale ?? (0, $gXbnb$en);
+        this.#category = new (0, $gXbnb$DepictCategory)({
+            market: market,
+            merchant: merchant,
+            localization: usedLocale,
             // Navigate between different categories using `history.pushState` by default, to avoid costly full page loads on server side rendered sites
@@ -42,5 +56,6 @@ on_navigation: (url, _event, _ref)=>{
                 }, "", url);
-            },
-            ...options
+            }
         });
+        if (categoryId) this.#category.category_id = categoryId;
+        (0, $d240dc94bec9dea4$export$cad8b33069faf956).set(this, this.#category);
         (0, $gXbnb$catchify)(async ()=>{
@@ -50,4 +65,4 @@ for await (const _ of (0, $gXbnb$href_change_ipns)){
                 const id_in_state = history.state.category_current_query_id;
-                if (id_in_state && id_in_state !== this.category_id) // Don't actually call the setter on (this), because we don't want to update the state
-                this.#original_category_id_descriptor.set.call(this, id_in_state);
+                if (id_in_state && id_in_state !== this.categoryId) // Don't actually call the setter on (this), because we don't want to update the state
+                this.#category.category_id = id_in_state;
             }
@@ -61,9 +76,4 @@ })();
 
-// A workaround system for completely hiding our @depict-ai/ui internals in wrapped components,
-// while still allowing the wrapped components to expose the internals to each other. Each wrapped component is responsible for creating
-// the internal instance and storing it in this WeakMap, then other wrapped components can access the internals related to another wrapped component.
-const $d240dc94bec9dea4$export$981972f5b84bc3cb = new WeakMap();
 
-
-class $1bb8e3facdfd455e$export$3c9b3f63af0b0eda {
+class $140f992baa1081ff$export$9aa84a6b7bde7bae {
     #search;
@@ -103,10 +113,10 @@ openModal(alignerElement) {
 
-const $2bf495ce71b25c5f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div></div>`, 2);
-function $2bf495ce71b25c5f$export$96f2e505ff09cc14(_ref) {
-    let { depictSearch: depictSearch , includeInputField: includeInputField , gridSpacing: gridSpacing , columnsAtSize: columnsAtSize , productCard: productCard  } = _ref;
+const $0fcd5f18160cc39d$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div></div>`, 2);
+function $0fcd5f18160cc39d$export$a54ec244c8863715(_ref) {
+    let { searchProvider: searchProvider , includeInputField: includeInputField , gridSpacing: gridSpacing , columnsAtSize: columnsAtSize , productCard: productCard  } = _ref;
     // Todo: get rid of wrapper div by making Searchpage just export one element. Comments can go inside that element.
     return (()=>{
-        const _el$ = $2bf495ce71b25c5f$var$_tmpl$.cloneNode(true);
+        const _el$ = $0fcd5f18160cc39d$var$_tmpl$.cloneNode(true);
         (0, $gXbnb$insert)(_el$, ()=>(0, $gXbnb$SearchPage)({
-                depict_search: (0, $d240dc94bec9dea4$export$981972f5b84bc3cb).get(depictSearch),
+                depict_search: (0, $d240dc94bec9dea4$export$981972f5b84bc3cb).get(searchProvider),
                 include_input_field: includeInputField,
@@ -147,10 +157,10 @@ // Todo: shared defaults with react-ui
 
-const $e4c829b9296b4ae5$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div></div>`, 2);
-function $e4c829b9296b4ae5$export$92c234cce2fb32b0(_ref) {
-    let { depictSearch: depictSearch , alignerRef: alignerRef  } = _ref;
+const $bae8104bbb62fa4a$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div></div>`, 2);
+function $bae8104bbb62fa4a$export$b94867ecbd698f21(_ref) {
+    let { searchProvider: searchProvider , alignerRef: alignerRef  } = _ref;
     // Todo: get rid of wrapper div by making SearchField just export one element. Comments can go inside that element.
     return (()=>{
-        const _el$ = $e4c829b9296b4ae5$var$_tmpl$.cloneNode(true);
+        const _el$ = $bae8104bbb62fa4a$var$_tmpl$.cloneNode(true);
         (0, $gXbnb$insert)(_el$, ()=>(0, $gXbnb$SearchField)({
-                depict_search: (0, $d240dc94bec9dea4$export$981972f5b84bc3cb).get(depictSearch),
+                depict_search: (0, $d240dc94bec9dea4$export$981972f5b84bc3cb).get(searchProvider),
                 aligner_ref: alignerRef
@@ -164,5 +174,73 @@ }));
 
+
+
+
+const $fb06f2a0e9f40e9f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gXbnb$template)(`<div></div>`, 2);
+function $fb06f2a0e9f40e9f$export$f7d2f673fc2f091d(_ref) {
+    let { gridSpacing: gridSpacing , columnsAtSize: columnsAtSize , productCard: productCard , categoryProvider: categoryProvider , showBreadcrumbs: showBreadcrumbs , showQuicklinks: showQuicklinks  } = _ref;
+    // Todo: get rid of wrapper div by making CategoryPage just export one element. Comments can go inside that element.
+    return (()=>{
+        const _el$ = $fb06f2a0e9f40e9f$var$_tmpl$.cloneNode(true);
+        (0, $gXbnb$insert)(_el$, ()=>(0, $gXbnb$CategoryPage)({
+                depict_category: (0, $d240dc94bec9dea4$export$cad8b33069faf956).get(categoryProvider),
+                // Todo: shared defaults with react-ui
+                show_breadcrumbs: showBreadcrumbs === undefined ? true : showBreadcrumbs,
+                show_quicklinks: showQuicklinks === undefined ? true : showQuicklinks,
+                cols_at_size: columnsAtSize ?? [
+                    [
+                        4
+                    ],
+                    [
+                        3,
+                        1024
+                    ],
+                    [
+                        2,
+                        901
+                    ]
+                ],
+                grid_spacing: gridSpacing ?? "2%",
+                // Todo: Allow customization
+                category_title: (0, $gXbnb$CategoryTitle),
+                // Todo: Do we need this?
+                get_product_id: ()=>"",
+                // Todo: find the most optimized way to do this optional array wrapping (maybe do it inside ui instead?)
+                product_card_template: (display)=>{
+                    const card = productCard(display);
+                    return Array.isArray(card) ? card : [
+                        card
+                    ];
+                }
+            }));
+        return _el$;
+    })();
+}
+
+
+
+class $0821002aa3b2b433$export$3ccaa27d81dd8556 {
+    #page_replacer;
+    // Todo: expose more things, such as a close/dispose method? Do we need the event handling stuff?
+    constructor(_ref){
+        let { isPageToReplace: isPageToReplace , selectorToReplace: selectorToReplace , renderContent: renderContent , renderMode: renderMode = "append" , documentTitle: documentTitle  } = _ref;
+        this.#page_replacer = new (0, $gXbnb$PageReplacer)({
+            is_page_: isPageToReplace,
+            selector_: selectorToReplace,
+            // Todo: Most optimized way to do this
+            render_: ()=>{
+                const content = renderContent();
+                return Array.isArray(content) ? content : [
+                    content
+                ];
+            },
+            append_instead_of_replace_: renderMode === "append",
+            title_: documentTitle
+        });
+    }
+}
+
+
 (0, $gXbnb$add_to_version_info)("js-ui", (0, $384f36a64c74679e$export$83d89fbfd8236492));
 
 
-export {$c5a45273c059819b$export$a37bc0da76a8b4a3 as DepictCategory, $1bb8e3facdfd455e$export$3c9b3f63af0b0eda as DepictSearch, $2bf495ce71b25c5f$export$96f2e505ff09cc14 as DepictSearchPage, $e4c829b9296b4ae5$export$92c234cce2fb32b0 as DepictSearchField, $b9ade2e31ecd6301$re_export$QuickLinks as QuickLinks, $b9ade2e31ecd6301$re_export$BreadCrumbs as BreadCrumbs, $b9ade2e31ecd6301$re_export$DepictCategoryPage as DepictCategoryPage, $b9ade2e31ecd6301$re_export$CategoryTitle as CategoryTitle, $b9ade2e31ecd6301$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $b9ade2e31ecd6301$re_export$PageReplacer as PageReplacer, $384f36a64c74679e$export$83d89fbfd8236492 as version};
+export {$2d74c140fd7068d0$export$5d13af1f32ae532e as DepictCategoryProvider, $140f992baa1081ff$export$9aa84a6b7bde7bae as DepictSearchProvider, $0fcd5f18160cc39d$export$a54ec244c8863715 as SearchPage, $bae8104bbb62fa4a$export$b94867ecbd698f21 as SearchField, $fb06f2a0e9f40e9f$export$f7d2f673fc2f091d as CategoryPage, $0821002aa3b2b433$export$3ccaa27d81dd8556 as PageReplacer, $384f36a64c74679e$export$83d89fbfd8236492 as version};

package.json

 {
   "name": "@depict-ai/js-ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "packageManager": "yarn@3.2.2",
@@ -49,4 +49,4 @@ "source": [
   "dependencies": {
-    "@depict-ai/ui": "^0.0.54",
-    "@depict-ai/utilishared": "^0.0.51",
+    "@depict-ai/ui": "^0.0.55",
+    "@depict-ai/utilishared": "^0.0.52",
     "solid-js": "^1.6.2"
@@ -53,0 +53,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26389

increased by28.97%

Lines of code

486

increased by40.06%

Number of medium supply chain risk alerts

0

decreased by-100%

Number of versions

207

increased by1.47%

Published versions last months

3

increased byInfinity%

Published versions last two months

4

increased by300%

Published versions last week

3

increased byInfinity%

Published versions last year

113

increased by2.73%

Dependency changes

• + Added@depict-ai/types@0.0.7(transitive)

• + Added@depict-ai/ui@0.0.55(transitive)

• + Added@depict-ai/utilishared@0.0.52(transitive)

• + Added@sentry-internal/feedback@7.119.1(transitive)

• + Added@sentry-internal/replay-canvas@7.119.1(transitive)

• + Added@sentry-internal/tracing@7.119.1(transitive)

• + Added@sentry/browser@7.119.1(transitive)

• + Added@sentry/core@7.119.1(transitive)

• + Added@sentry/integrations@7.119.1(transitive)

• + Added@sentry/replay@7.119.1(transitive)

• + Added@sentry/types@7.119.1(transitive)

• + Added@sentry/utils@7.119.1(transitive)

• - Removed@depict-ai/types@0.0.6(transitive)

• - Removed@depict-ai/ui@0.0.54(transitive)

• - Removed@depict-ai/utilishared@0.0.51(transitive)

• - Removed@sentry-internal/feedback@7.119.0(transitive)

• - Removed@sentry-internal/replay-canvas@7.119.0(transitive)

• - Removed@sentry-internal/tracing@7.119.0(transitive)

• - Removed@sentry/browser@7.119.0(transitive)

• - Removed@sentry/core@7.119.0(transitive)

• - Removed@sentry/integrations@7.119.0(transitive)

• - Removed@sentry/replay@7.119.0(transitive)

• - Removed@sentry/types@7.119.0(transitive)

• - Removed@sentry/utils@7.119.0(transitive)

• Updated@depict-ai/ui@^0.0.55

• Updated@depict-ai/utilishared@^0.0.52