@yoobic/yobi 8.2.0-9 → 8.2.2

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.css

@@ -263,11 +263,14 @@ yoo-banner {
   margin-left: 0;
 }
 .filters-container.advanced yoo-form-input-container.operator {
-  display: block;
-  width: 3.5rem;
-  margin-right: var(--spacing-04, 0.25rem);
+  margin: calc(var(--spacing-04, 0.25rem) * -1) var(--spacing-04, 0.25rem) 0 calc(var(--spacing-08, 0.5rem) * -1);
+  padding: 0 0.5rem;
+  padding-bottom: 0;
   text-align: center;
 }
+.filters-container yoo-form-dynamic.fill-width:not(.web) {
+  width: 100%;
+}
 
 :host(.no-padding) yoo-button.filters.margin-left {
   margin-left: 0;

package/dist/collection/components/entities/entity-query-builder/entity-query-builder.js

@@ -321,7 +321,7 @@ export class YooEntityQueryBuilderComponent {
           const contentButtons = this.getContextMenuButtons(index);
           const finalData = { ...data, operator: operatorValue };
           return [
-            h("yoo-form-dynamic", { class: "inline inline-row inline-row-narrow transparent", ref: (el) => (this.formFiltersAdvanced[index] = el), animated: false, showRecap: false, slides: slides, scrollable: false, forceReadonly: this.readonly, data: finalData, hideOptional: true, formInputSize: this.size || 'medium', formInputcolor: this.alwaysShow ? 'light' : 'stable-light', onFieldChanged: (ev) => this.onAutocompleteChangeAdvanced(ev, index), onFieldFetchData: (ev) => this.onFieldFetchDataAdvanced(ev, index), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomDataAdvanced(ev, index), onFieldRemoved: (ev) => this.onRemoveFormFieldFromAdvancedSegment(ev, index), onFormValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation() },
+            h("yoo-form-dynamic", { class: "inline inline-row inline-row-narrow transparent fill-width", ref: (el) => (this.formFiltersAdvanced[index] = el), animated: false, showRecap: false, slides: slides, scrollable: false, forceReadonly: this.readonly, data: finalData, hideOptional: true, formInputSize: this.size || 'medium', formInputcolor: this.alwaysShow ? 'light' : 'stable-light', onFieldChanged: (ev) => this.onAutocompleteChangeAdvanced(ev, index), onFieldFetchData: (ev) => this.onFieldFetchDataAdvanced(ev, index), onFieldFetchCustomData: (ev) => this.onFieldFetchCustomDataAdvanced(ev, index), onFieldRemoved: (ev) => this.onRemoveFormFieldFromAdvancedSegment(ev, index), onFormValidityChanged: (ev) => ev.stopPropagation(), onDataChanged: (ev) => ev.stopPropagation() },
               !this.readonly && isWeb(this.host) && h("yoo-context-menu", { contentButtons: contentButtons, placement: "below", slot: "end" },
                 h("yoo-button", { color: "app-color", class: "margin-right", shape: "square", size: this.size || 'medium' },
                   h("yoo-icon", { color: "light", name: "plus", class: "add", size: "small" }))),
@@ -331,7 +331,7 @@ export class YooEntityQueryBuilderComponent {
               h("yoo-form-autocomplete", { class: "inline inline-narrow", readonly: this.readonly, idOnly: true, value: ((_d = (_c = this.values) === null || _c === void 0 ? void 0 : _c.advandedFiltersOperators) === null || _d === void 0 ? void 0 : _d.global) || 'or', values: [
                   { _id: 'and', title: 'YOOBICAND' },
                   { _id: 'or', title: 'YOOBICOR' }
-                ], displayType: "card-list", onInputChanged: (ev) => this.onAdvancedOperatorChange(ev), size: this.size || 'medium', color: "light" })))
+                ], displayType: "card-list", onInputChanged: (ev) => this.onAdvancedOperatorChange(ev), size: this.size || 'medium', color: "transparent" })))
           ];
         }
       });
@@ -358,11 +358,10 @@ export class YooEntityQueryBuilderComponent {
         !this.readonly && isWeb(this.host) && h("yoo-context-menu", { contentButtons: contentButtons, placement: "below", class: { 'no-margin': !this.advancedSegments || this.advancedSegments.length <= 0 }, tooltipContent: this.disabled ? translate('AUDIENCESTOREQUERYACTIVEFILTER') : '', disabled: this.disabled },
           h("yoo-button", { color: "app-color", class: "add-filter", size: this.size },
             h("yoo-icon", { name: "plus", color: "light", slot: "start", size: "small" }),
-            isWeb(this.host) && translate('ADDFILTER'))),
+            translate('ADDFILTER'))),
         !this.readonly && !isWeb(this.host) &&
           h("yoo-button", { color: "app-color", class: "add-filter", onClick: () => showActionSheet(contentButtons), size: this.size },
-            h("yoo-icon", { name: "plus", color: "light", slot: "start", size: "small" }),
-            isWeb(this.host) && translate('ADDFILTER')),
+            h("yoo-icon", { name: "plus", color: "light", size: "small" })),
         this.renderAdvancedFiltersSegments()
       ];
     }

package/dist/collection/components/entities/entity-search/entity-search.css

@@ -246,9 +246,8 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   height: 6.25rem;
 }
 :host .empty-state div {
-  color: var(--text-color, #807f83);
+  color: var(--text-color-80, rgba(128, 127, 131, 0.8));
   font-size: var(--font-size-16, 1rem);
-  opacity: 0.7;
   text-align: center;
 }
 :host .content {

package/dist/collection/components/form/form-audience/form-audience.css

@@ -388,6 +388,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   order: 1;
   margin-top: 0;
 }
+:host(.mobile) .outer-container yoo-grid.audiences {
+  min-height: 25rem;
+}
 :host(.mobile) .outer-container .save-container {
   top: 3rem;
 }

package/dist/collection/components/form/form-audience/form-audience.js

@@ -1,7 +1,7 @@
 import { getAsyncExtraData, isWeb, translate } from '@shared/utils';
 import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
 import { assign, cloneDeep, isEmpty, isEqual } from 'lodash-es';
-import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers'; // 
+import { setValidator, setValueAndValidateInput } from '../../../utils/helpers/form-input-helpers'; //
 export class YooFormAudienceComponent {
   constructor() {
     this.validators = [];
@@ -325,7 +325,7 @@ export class YooFormAudienceComponent {
     const index = this.targetValues.findIndex((v) => v.id === target);
     return this.enableTarget && h("yoo-form-input-container", { class: "bordered", hideOptional: true, field: { title: translate('AUDIENCETARGET') } },
       h("div", { class: "segment-container" },
-        h("yoo-segmented-control", { readonly: this.readonly, values: this.targetValues, initialIndex: index, onSegmentSelected: (ev) => this.onTargetChanged(ev) }),
+        h("yoo-segmented-control", { readonly: this.readonly, size: "medium", class: "segment", values: this.targetValues, initialIndex: index, onSegmentSelected: (ev) => this.onTargetChanged(ev) }),
         this.renderHelp(`AUDIENCETARGET${target.toUpperCase()}HELP`)));
   }
   renderStoreTarget() {
@@ -429,7 +429,7 @@ export class YooFormAudienceComponent {
             (_a = this.gridUsers) === null || _a === void 0 ? void 0 : _a.updateGridConfig();
             this.refreshConfig = false;
           }
-        }, collectionName: "user", displayType: "card-grid", model: this.models[0], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.usersQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((this.mode !== 'store' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.usersQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false) || (this.mode === 'store' && ((_g = (_f = this.value) === null || _f === void 0 ? void 0 : _f.usersQuery) === null || _g === void 0 ? void 0 : _g.isSelectAll))), hideRefreshButton: true, onFetchData: (ev) => this.onPreviewGridUsersFetchData(ev), onInputChanged: (ev) => this.onPreviewGridUsersChanged(ev), isReadonly: this.readonly }));
+        }, key: "grid-users", collectionName: "user", displayType: isWeb(this.host) ? 'card-grid' : 'card-list', entityType: "useraudience", model: this.models[0], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.usersQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((this.mode !== 'store' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.usersQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false) || (this.mode === 'store' && ((_g = (_f = this.value) === null || _f === void 0 ? void 0 : _f.usersQuery) === null || _g === void 0 ? void 0 : _g.isSelectAll))), hideRefreshButton: true, onFetchData: (ev) => this.onPreviewGridUsersFetchData(ev), onInputChanged: (ev) => this.onPreviewGridUsersChanged(ev), isReadonly: this.readonly }));
   }
   renderStoresGridHeader() {
     var _a, _b, _c, _d;
@@ -460,14 +460,14 @@ export class YooFormAudienceComponent {
       }
     }
     return (this.showPreviewGrid || type === 'manual') && h("div", { class: "preview-grid" },
-      h("yoo-grid", { ref: (el) => {
+      h("yoo-grid", { key: "grid-stores", ref: (el) => {
           var _a;
           this.gridStores = el;
           if (this.refreshConfig) {
             (_a = this.gridStores) === null || _a === void 0 ? void 0 : _a.updateGridConfig();
             this.refreshConfig = false;
           }
-        }, collectionName: "locations", displayType: "card-grid", model: this.models[1], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.storesQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, hideRefreshButton: true, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false, onFetchData: (ev) => this.onPreviewGridStoresFetchData(ev), onInputChanged: (ev) => this.onPreviewGridStoresChanged(ev), isReadonly: this.readonly }));
+        }, collectionName: "locations", entityType: "locationsaudience", displayType: isWeb(this.host) ? 'card-grid' : 'card-list', model: this.models[1], gridConfig: gridConfig, initialQuery: (_c = this.value) === null || _c === void 0 ? void 0 : _c.storesQuery, isFormField: true, showSearch: true, hideAdvancedFilters: true, scrollable: true, class: "no-margin", gridClass: "transparent grid-font-small", showSelectionOnlyToggle: type === 'manual', multiple: true, returnQuery: true, showGridTotalHeader: false, hideRefreshButton: true, showSelectAll: type === 'manual', keepSelection: type === 'manual', isSelectAll: type === 'manual' && ((_e = (_d = this.value) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.isSelectAll) !== false, onFetchData: (ev) => this.onPreviewGridStoresFetchData(ev), onInputChanged: (ev) => this.onPreviewGridStoresChanged(ev), isReadonly: this.readonly }));
   }
   renderTabsGridHeader() {
     var _a, _b, _c;
@@ -501,14 +501,14 @@ export class YooFormAudienceComponent {
       suppressColumnsToolPanel: true
     });
     return h("div", { class: "saved-grid" },
-      h("yoo-grid", { ref: (el) => this.gridAudiences = el, collectionName: "audiences", displayType: "card-grid", isFormField: true, showSearch: true, scrollable: true, class: "no-margin", model: this.models[2], gridConfig: gridConfig, gridClass: "transparent grid-font-small", showGridTotalHeader: false, onFetchData: (ev) => this.onSavedGridFetchData(ev), onInputChanged: (ev) => ev.stopPropagation(), onSelected: (ev) => this.onUseSavedAudience(ev.detail), gridDomLayout: !isWeb(this.host) ? 'autoHeight' : null, isReadonly: this.readonly }));
+      h("yoo-grid", { ref: (el) => this.gridAudiences = el, entityType: "audiences", displayType: isWeb(this.host) ? 'card-grid' : 'card-list', isFormField: true, showSearch: true, scrollable: true, class: "no-margin", model: this.models[2], gridConfig: gridConfig, gridClass: "transparent grid-font-small", showGridTotalHeader: false, onFetchData: (ev) => this.onSavedGridFetchData(ev), onInputChanged: (ev) => ev.stopPropagation(), onSelected: (ev) => this.onUseSavedAudience(ev.detail), gridDomLayout: !isWeb(this.host) ? 'autoHeight' : null, isReadonly: this.readonly }));
   }
   renderContent() {
     return h("div", { class: "outer-container" },
-      !this.readonly && this.renderTabs(),
-      !this.readonly && this.selectedTabIndex === 0 && this.renderSave(),
+      !this.readonly && this.allowLibrary && this.renderTabs(),
+      !this.readonly && this.allowLibrary && this.selectedTabIndex === 0 && this.renderSave(),
       this.selectedTabIndex === 0 && this.mode !== 'store' && this.renderTarget(),
-      this.selectedTabIndex === 0 && this.renderType(),
+      this.selectedTabIndex === 0 && !this.forceManualType && this.renderType(),
       this.selectedTabIndex === 0 && this.renderRules(),
       this.selectedTabIndex === 0 && this.renderPreview(),
       !this.readonly && this.selectedTabIndex === 1 && this.renderSavedGrid());

package/dist/collection/components/form/form-autocomplete/form-autocomplete.css

@@ -591,6 +591,13 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
   margin-top: var(--spacing-08, 0.5rem);
 }
 
+:host(.web.inline) {
+  margin: 0;
+}
+:host(.web.inline) .readonly {
+  margin: var(--spacing-04, 0.25rem) 0;
+}
+
 :host(.web.card-tag, .web.card-tag-single) .outer-container .input-container {
   overflow: hidden;
 }