@yoobic/yobi 8.5.3-0 → 8.5.4

package/dist/cjs/yoo-form-carousel.cjs.entry.js

@@ -34,6 +34,7 @@ const YooFormCarouselComponent = class {
     this.allowOrientation = false;
     this.instant = false;
     this.displayPhotoCounter = true;
+    this.navbarVisiblity = 'visible';
     this.currentActiveIndex = 0;
     this.showPhotoCounts = this.displayPhotoCounter;
     this.visibility = false;
@@ -259,7 +260,7 @@ const YooFormCarouselComponent = class {
     var _a, _b;
     const toggleNavbarVisibility = (show) => this.photoEditorElements[index$1].navbarVisiblity = show ? 'visible' : 'hidden';
     if (this.previewMode || this.usePhotoEditor) {
-      return (index.h("yoo-photo-editor", { ref: (el) => (this.photoEditorElements[index$1] = el), src: src, isReadonly: true, zoomable: this.previewMode, annotations: ((_a = this.annotations) === null || _a === void 0 ? void 0 : _a.length) && this.annotations[index$1], drawings: ((_b = this.drawings) === null || _b === void 0 ? void 0 : _b.length) && this.drawings[index$1], extraActions: this.topBarActions, onImageClicked: () => {
+      return (index.h("yoo-photo-editor", { ref: (el) => (this.photoEditorElements[index$1] = el), src: src, isReadonly: true, zoomable: this.previewMode, annotations: ((_a = this.annotations) === null || _a === void 0 ? void 0 : _a.length) && this.annotations[index$1], drawings: ((_b = this.drawings) === null || _b === void 0 ? void 0 : _b.length) && this.drawings[index$1], extraActions: this.topBarActions, navbarVisiblity: this.navbarVisiblity, onImageClicked: () => {
           this.isPhotoClicked = !this.isPhotoClicked;
           this.showDetail.emit(index$1);
           this.photoEditorClicked.emit(this.isPhotoClicked);

package/dist/cjs/yoo-input-bar.cjs.entry.js

@@ -20,7 +20,7 @@ function race(...args) {
 }
 
 /**
- * @license Angular v14.2.6
+ * @license Angular v14.2.7
  * (c) 2010-2022 Google LLC. https://angular.io/
  * License: MIT
  */
@@ -7252,7 +7252,7 @@ class Version {
 /**
  * @publicApi
  */
-const VERSION = new Version('14.2.6');
+const VERSION = new Version('14.2.7');
 
 /**
  * @license

package/dist/cjs/yoo-kpi.cjs.entry.js

@@ -9,7 +9,7 @@ require('./index-ec5dad3e.js');
 require('./_commonjsHelpers-94df2ea7.js');
 require('./lodash-a9050d79.js');
 
-const kpiCss = "svg:not(:root){overflow:hidden}:host{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:0}:host .photo-container{position:relative;width:100%;height:100%}:host .empty-state{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;height:100%}:host .empty-state yoo-empty-state{height:6.25rem}:host .empty-state div{color:var(--text-color-80, rgba(128, 127, 131, 0.8));font-size:var(--font-size-16, 1rem)}";
+const kpiCss = "svg:not(:root){overflow:hidden}:host{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;min-height:0}:host .photo-container{position:relative;width:100%;height:100%}:host .photo-container yoo-form-carousel{display:block;-ms-flex:1;flex:1;height:100%;overflow:hidden}:host .empty-state{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-direction:column;flex-direction:column;height:100%}:host .empty-state yoo-empty-state{height:6.25rem}:host .empty-state div{color:var(--text-color-80, rgba(128, 127, 131, 0.8));font-size:var(--font-size-16, 1rem)}";
 
 const YooKpiComponent = class {
   constructor(hostRef) {
@@ -111,7 +111,7 @@ const YooKpiComponent = class {
       case 'calendar':
         return null;
       case 'carousel':
-        return this.photosSrc ? (index.h("div", { class: "photo-container" }, index.h("yoo-form-carousel", { ref: (el) => (this.carousel = el), usePhotoEditor: true, mediaSrc: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.value), annotations: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.annotations), drawings: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.drawings), class: { light: true, 'form-preview': this.isFormPreview } }))) : (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: "photo" }), index.h("div", null, index$1.translate('LISTEMPTY'))));
+        return this.photosSrc ? (index.h("div", { class: "photo-container" }, index.h("yoo-form-carousel", { ref: (el) => (this.carousel = el), usePhotoEditor: true, navbarVisiblity: "hidden", mediaSrc: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.value), annotations: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.annotations), drawings: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.drawings), class: { light: true, 'form-preview': this.isFormPreview } }))) : (index.h("div", { class: "empty-state" }, index.h("yoo-empty-state", { type: "photo" }), index.h("div", null, index$1.translate('LISTEMPTY'))));
       case 'grid':
         return (index.h("yoo-pivot-table", { ref: (el) => (this.pivotTable = el), onEdited: (ev) => this.onEdited(ev), onRowClick: (ev) => this.onChartClick(ev), onRowDoubleClick: (ev) => this.onChartDoubleClick(ev), config: this.config, definition: this.definition, isFullScreen: this.isFullScreen, gridClass: "grid-alternate no-border", class: {
             'rounded': (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('rounded')

package/dist/cjs/yoo-photo-editor.cjs.entry.js

@@ -345,7 +345,7 @@ const YooPhotoEditorComponent = class {
   }
   get isTextEditMode() {
     var _a;
-    return !!(this.mode === 'text' && ((_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a.type) == 'text');
+    return !!(this.mode === 'text' && ((_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a.type) === 'text');
   }
   get isDrawMode() {
     return !!(this.mode === 'draw' && !this.isReadonly);

package/dist/cjs/yoo-progress-bar.cjs.entry.js

@@ -20,7 +20,7 @@ const DEFAULT_SHAPES = {
   'semi-circle': 'M 0, y a r,r 0 1,1 d,0'
 };
 
-const progressBarCss = "svg:not(:root){overflow:hidden}:host{position:relative;display:block;--svg-width:100%;--svg-fill:var(--transparent, transparent);--stroke-width-line:3;--stroke-width-circle:3;--progress-value-font-size:var(--font-size-16, 1rem);--progress-value-font-weight:var(--font-weight-400, 400);--progress-value-color:var(--dark, #000000);--progress-bar-color:unset;--progress-bar-display:block;--trail-bar-color:var(--stable-light, #f1f1f1);--trail-bar-display:block}:host svg{width:var(--svg-width)}:host svg #trail{stroke-linecap:round;display:var(--trail-bar-display);stroke:var(--trail-bar-color)}:host svg #progress{display:var(--progress-bar-display);stroke:var(--progress-bar-color)}:host svg #progress:not([x2=\"0%\"]){stroke-linecap:round}:host #value{color:var(--progress-value-color);font-weight:var(--progress-value-font-weight);font-size:var(--progress-value-font-size);fill:var(--progress-value-color)}:host([shape=line]){display:inline-grid;grid-gap:var(--spacing-08, 0.5rem);grid-template-columns:1fr auto;place-items:center;width:100%}:host([shape=line]) svg{overflow:unset}:host([shape=line]) svg:not(.has-markers){height:var(--spacing-04, 0.25rem)}:host([shape=line]) svg:not(.has-markers) line{stroke-width:var(--stroke-width-line)}:host([shape=line]) svg .marker{font-size:var(--font-size-12, 0.75rem);-webkit-transform:translate(calc(var(--spacing-16, 1rem) * -1), calc(var(--spacing-16, 1rem) * 1.5));transform:translate(calc(var(--spacing-16, 1rem) * -1), calc(var(--spacing-16, 1rem) * 1.5))}:host([shape=line]) span{width:100%;text-align:center}:host([shape=line][x=right]) span{text-align:right}:host([shape=line][x=left]) span{text-align:left}:host([shape=line][y=bottom]),:host([shape=line][y=top]),:host([shape=line].no-value){grid-template-columns:initial;line-height:1}:host([shape=line][y=top]) svg{-ms-flex-order:1;order:1}:host([shape=line][y=top]) span{-ms-flex-order:0;order:0}:host([shape=circle]),:host([shape=semi-circle]){--progress-value-tsx:-50%;--progress-value-tsy:-50%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:0 auto}:host([shape=circle]) svg,:host([shape=semi-circle]) svg{overflow:initial;fill:var(--svg-fill)}:host([shape=circle]) svg path,:host([shape=semi-circle]) svg path{stroke-width:var(--stroke-width-circle)}:host([shape=circle]) #value,:host([shape=semi-circle]) #value{position:absolute;top:50%;left:50%;display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;-webkit-transform:translate(var(--progress-value-tsx), var(--progress-value-tsy));transform:translate(var(--progress-value-tsx), var(--progress-value-tsy))}:host([shape=semi-circle]){--progress-value-tsy:calc(-50% + var(--spacing-08, 0.5rem))}:host([metric=points]){--progress-bar-display:none;--trail-bar-display:none}:host([metric=step]){--progress-bar-color:var(--app-color, #5a30f4)}:host([shape=line].rtl){direction:ltr}:host([shape=line].rtl) svg{-webkit-transform:scaleX(-1);transform:scaleX(-1)}";
+const progressBarCss = "svg:not(:root){overflow:hidden}:host{position:relative;display:block;--svg-width:100%;--svg-fill:var(--transparent, transparent);--stroke-width-line:3;--stroke-width-circle:3;--progress-value-font-size:var(--font-size-16, 1rem);--progress-value-font-weight:var(--font-weight-400, 400);--progress-value-color:var(--dark, #000000);--progress-bar-color:unset;--progress-bar-display:block;--trail-bar-color:var(--stable-light, #f1f1f1);--trail-bar-display:block}:host svg{width:var(--svg-width)}:host svg #trail{stroke-linecap:round;display:var(--trail-bar-display);stroke:var(--trail-bar-color)}:host svg #progress{display:var(--progress-bar-display);stroke:var(--progress-bar-color)}:host svg #progress:not([x2=\"0%\"]){stroke-linecap:round}:host #value{color:var(--progress-value-color);font-weight:var(--progress-value-font-weight);font-size:var(--progress-value-font-size);fill:var(--progress-value-color)}:host([shape=line]){display:inline-grid;grid-gap:var(--spacing-08, 0.5rem);grid-template-columns:1fr auto;place-items:center;width:100%}:host([shape=line]) svg{overflow:unset}:host([shape=line]) svg:not(.has-markers){height:var(--spacing-04, 0.25rem)}:host([shape=line]) svg:not(.has-markers) line{stroke-width:var(--stroke-width-line)}:host([shape=line]) svg .marker{font-size:var(--font-size-12, 0.75rem);-webkit-transform:translate(calc(var(--spacing-16, 1rem) * -1), calc(var(--spacing-16, 1rem) * 1.5));transform:translate(calc(var(--spacing-16, 1rem) * -1), calc(var(--spacing-16, 1rem) * 1.5))}:host([shape=line]) span{width:100%;text-align:center}:host([shape=line][x=right]) span{text-align:right}:host([shape=line][x=left]) span{text-align:left}:host([shape=line][y=bottom]),:host([shape=line][y=top]),:host([shape=line].no-value){grid-template-columns:initial;line-height:1}:host([shape=line][y=top]) svg{-ms-flex-order:1;order:1}:host([shape=line][y=top]) span{-ms-flex-order:0;order:0}:host([shape=circle]),:host([shape=semi-circle]){--progress-value-tsx:-50%;--progress-value-tsy:-50%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin:0 auto}:host([shape=circle]) svg,:host([shape=semi-circle]) svg{overflow:initial;fill:var(--svg-fill)}:host([shape=circle]) svg path,:host([shape=semi-circle]) svg path{stroke-width:var(--stroke-width-circle)}:host([shape=circle]) #value,:host([shape=semi-circle]) #value{position:absolute;top:50%;left:50%;display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;-webkit-transform:translate(var(--progress-value-tsx), var(--progress-value-tsy));transform:translate(var(--progress-value-tsx), var(--progress-value-tsy))}:host([shape=semi-circle]){--progress-value-tsy:calc(-50% + var(--spacing-08, 0.5rem))}:host([metric=points]:not([max-value])){--progress-bar-display:none;--trail-bar-display:none}:host([metric=step]){--progress-bar-color:var(--app-color, #5a30f4)}:host([shape=line].rtl){direction:ltr}:host([shape=line].rtl) svg{-webkit-transform:scaleX(-1);transform:scaleX(-1)}";
 
 const YooProgressBarComponent = class {
   constructor(hostRef) {
@@ -199,7 +199,7 @@ const YooProgressBarComponent = class {
   }
   getProgress(progress = this.value) {
     const currentProgress = progress || 0;
-    const withMaxValue = !!(lodash.isFinite(this.maxValue) && this.maxValue) && !this.isMetric.points;
+    const withMaxValue = !!(lodash.isFinite(this.maxValue) && this.maxValue);
     const newProgress = withMaxValue ? (currentProgress / this.maxValue) * 100 : currentProgress;
     return this.truncateProgress(newProgress) || 0;
   }

package/dist/collection/components/1.atoms/progress-bar/progress-bar.css

@@ -324,7 +324,7 @@ svg:not(:root) {
   --progress-value-tsy: calc(-50% + var(--spacing-08, 0.5rem));
 }
 
-:host([metric=points]) {
+:host([metric=points]:not([max-value])) {
   --progress-bar-display: none;
   --trail-bar-display: none;
 }

package/dist/collection/components/1.atoms/progress-bar/progress-bar.js

@@ -177,7 +177,7 @@ export class YooProgressBarComponent {
   }
   getProgress(progress = this.value) {
     const currentProgress = progress || 0;
-    const withMaxValue = !!(isFinite(this.maxValue) && this.maxValue) && !this.isMetric.points;
+    const withMaxValue = !!(isFinite(this.maxValue) && this.maxValue);
     const newProgress = withMaxValue ? (currentProgress / this.maxValue) * 100 : currentProgress;
     return this.truncateProgress(newProgress) || 0;
   }
@@ -497,7 +497,7 @@ export class YooProgressBarComponent {
           "text": "If set, the progress will be the result of the value / maxValue\nif not, the progress display will be by default the one from the value"
         },
         "attribute": "max-value",
-        "reflect": false
+        "reflect": true
       },
       "hideProgressValue": {
         "type": "boolean",

package/dist/collection/components/3.organisms/photo-editor/photo-editor.js

@@ -160,7 +160,7 @@ export class YooPhotoEditorComponent {
   }
   get isTextEditMode() {
     var _a;
-    return !!(this.mode === 'text' && ((_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a.type) == 'text');
+    return !!(this.mode === 'text' && ((_a = this.activeAnnotation) === null || _a === void 0 ? void 0 : _a.type) === 'text');
   }
   get isDrawMode() {
     return !!(this.mode === 'draw' && !this.isReadonly);

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

@@ -18,6 +18,7 @@ export class YooFormCarouselComponent {
     this.allowOrientation = false;
     this.instant = false;
     this.displayPhotoCounter = true;
+    this.navbarVisiblity = 'visible';
     this.currentActiveIndex = 0;
     this.showPhotoCounts = this.displayPhotoCounter;
     this.visibility = false;
@@ -243,7 +244,7 @@ export class YooFormCarouselComponent {
     var _a, _b;
     const toggleNavbarVisibility = (show) => this.photoEditorElements[index].navbarVisiblity = show ? 'visible' : 'hidden';
     if (this.previewMode || this.usePhotoEditor) {
-      return (h("yoo-photo-editor", { ref: (el) => (this.photoEditorElements[index] = el), src: src, isReadonly: true, zoomable: this.previewMode, annotations: ((_a = this.annotations) === null || _a === void 0 ? void 0 : _a.length) && this.annotations[index], drawings: ((_b = this.drawings) === null || _b === void 0 ? void 0 : _b.length) && this.drawings[index], extraActions: this.topBarActions, onImageClicked: () => {
+      return (h("yoo-photo-editor", { ref: (el) => (this.photoEditorElements[index] = el), src: src, isReadonly: true, zoomable: this.previewMode, annotations: ((_a = this.annotations) === null || _a === void 0 ? void 0 : _a.length) && this.annotations[index], drawings: ((_b = this.drawings) === null || _b === void 0 ? void 0 : _b.length) && this.drawings[index], extraActions: this.topBarActions, navbarVisiblity: this.navbarVisiblity, onImageClicked: () => {
           this.isPhotoClicked = !this.isPhotoClicked;
           this.showDetail.emit(index);
           this.photoEditorClicked.emit(this.isPhotoClicked);
@@ -851,6 +852,24 @@ export class YooFormCarouselComponent {
         },
         "attribute": "hide-secondary-actions",
         "reflect": false
+      },
+      "navbarVisiblity": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'hidden' | 'visible' | 'disabled'",
+          "resolved": "\"disabled\" | \"hidden\" | \"visible\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "navbar-visiblity",
+        "reflect": false,
+        "defaultValue": "'visible'"
       }
     };
   }

package/dist/collection/feature-platform/insight/kpi/kpi.css

@@ -216,6 +216,12 @@ svg:not(:root) {
   width: 100%;
   height: 100%;
 }
+:host .photo-container yoo-form-carousel {
+  display: block;
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+}
 :host .empty-state {
   display: flex;
   align-items: center;

package/dist/collection/feature-platform/insight/kpi/kpi.js

@@ -91,7 +91,7 @@ export class YooKpiComponent {
       case 'calendar':
         return null;
       case 'carousel':
-        return this.photosSrc ? (h("div", { class: "photo-container" }, h("yoo-form-carousel", { ref: (el) => (this.carousel = el), usePhotoEditor: true, mediaSrc: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.value), annotations: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.annotations), drawings: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.drawings), class: { light: true, 'form-preview': this.isFormPreview } }))) : (h("div", { class: "empty-state" }, h("yoo-empty-state", { type: "photo" }), h("div", null, translate('LISTEMPTY'))));
+        return this.photosSrc ? (h("div", { class: "photo-container" }, h("yoo-form-carousel", { ref: (el) => (this.carousel = el), usePhotoEditor: true, navbarVisiblity: "hidden", mediaSrc: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.value), annotations: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.annotations), drawings: this.photosSrc.map((src) => src === null || src === void 0 ? void 0 : src.drawings), class: { light: true, 'form-preview': this.isFormPreview } }))) : (h("div", { class: "empty-state" }, h("yoo-empty-state", { type: "photo" }), h("div", null, translate('LISTEMPTY'))));
       case 'grid':
         return (h("yoo-pivot-table", { ref: (el) => (this.pivotTable = el), onEdited: (ev) => this.onEdited(ev), onRowClick: (ev) => this.onChartClick(ev), onRowDoubleClick: (ev) => this.onChartDoubleClick(ev), config: this.config, definition: this.definition, isFullScreen: this.isFullScreen, gridClass: "grid-alternate no-border", class: {
             'rounded': (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('rounded')