@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/collection/feature-operate/campaign/campaign-editor-recap/campaign-editor-recap.css

@@ -1,304 +0,0 @@
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* Z-Index (Ionic)
---------------------------------------------------
-Grouped by elements which would be siblings */
-/* Hairlines width */
-/* Default Colors
----------------------------------- */
-/* Private color variables */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff;*/
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* #3880ff; */
-/* Color map should provide
-- base: main color to be used.
-- contrast: Color that will provide readable text against the base color
-- shade: 12% darker version of the base color (mix with black)
-- tint: 10% lighter version of the base color (mix with white) */
-/* Themed Colors
-
- Default Foreground and Background Colors values
- Allows users to override an foreground / background colors
- $background-color-value:            $light !default;
- $background-color-rgb:              255, 255, 255 !default; */
-/* Default Foreground and Background Colors
--------------------------------------------------- */
-/* Default General Colors
--------------------------------------------------- */
-/* Default List & List Items
--------------------------------------------------- */
-/* Item Divider */
-/* iOS List & List Items
--------------------------------------------------- */
-/* Default Toolbar
---------------------------------------------------*/
-/* iOS Toolbar
---------------------------------------------------*/
-/* Default Tabs & Tab bar
---------------------------------------------------*/
-/* iOS Tabs & Tab bar
---------------------------------------------------*/
-/* Function related variables
---------------------------------------------------*/
-/* Gets the active color's css variable from a variation. Alpha is optional.
---------------------------------------------------------------------------------------------
-Example usage:
-current-color(base) => var(--ion-color-base)
-current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
---------------------------------------------------------------------------------------------*/
-/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
---------------------------------------------------------------------------------------------
-Example usage:
-ion-color(primary, base) => var(--ion-color-primary, #3880ff)
-ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
-ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
---------------------------------------------------------------------------------------------*/
-/* Mixes a color with black to create its shade.
---------------------------------------------------------------------------------------------*/
-/*Mixes a color with white to create its tint.
---------------------------------------------------------------------------------------------*/
-/* Converts a color to a comma separated rgb.
---------------------------------------------------------------------------------------------*/
-/* Str functions.
-___________________________________________________________________________________________*/
-/* Creates a pulse animation.
-  @param {color} $begin-color [stable-20] - starting color for pulse.
-  @param {color} $end-color [stable-20] - ending color for pulse.
-  @author Ben Morgan
-  @author Damien Arondel 
-*/
-/* Execute a content if the hover state is supported.
-
- @content the content to execute if relevant
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Properly hide overflow on rounded corner elements for Webkit based browsers.
- This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
-
- @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate every overflown elements with an ellipsis.
- This mixin does not work with flex box on the same level.
-
- @author Ben Morgan
- @author Damien Arondel
-*/
-/* Truncate text at a specific number of lines.
- */
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
-/* Single side border-radius */
-/* Text Direction - ltr / rtl
-$app-direction: multi | rtl | ltr | null (default)
-multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
-rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
-ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
-null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
----------------------------------------------------------- */
-/* Add property horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add property for all directions
-  @param {string} $prop
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-  @param {boolean} $content include content or use default
-----------------------------------------------------------*/
-/* Add margin for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add padding for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/*Font smoothing
---------------------------------------------------*/
-/* SVG Background Image Mixin
-  @param {string} $svg
-----------------------------------------------------------*/
-/* Add padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add margin horizontal
- @param {string} $start
- @param {string} $end
-----------------------------------------------------------*/
-/* Add safe area padding horizontal
-  @param {string} $start
-  @param {string} $end
-----------------------------------------------------------*/
-/* Add border radius for all directions
-  @param {string} $top-start
-  @param {string} $top-end
-  @param {string} $bottom-end
-  @param {string} $bottom-start
-----------------------------------------------------------*/
-/* Sets correct text align with support for old browsers
-  @param {string} $direction - text direction
-  @param {string} $decorator - !important
-----------------------------------------------------------*/
-/* Add position for all directions
-  @param {string} $top
-  @param {string} $end
-  @param {string} $bottom
-  @param {string} $start
-----------------------------------------------------------*/
-/* Add position horizontal
-  @param {string} $start - amount to position start
-  @param {string} $end - amount to left: 0; end
-----------------------------------------------------------*/
-/**
- * NOTE DO NOT USE FOR NEW COMPONENTS
- * LEGACY CODE -- Styles maintained only to prevent breaking changes
- * For all Font Sizes please use the appropreate font-size-XX Variables.
- */
-/**
-* Global style mixin for being able to change the background / font-color and border-color
-* programmatically using global classes
-*/
-/* app direction */
-/* border-radius */
-/* border-width */
-/* font family */
-/* font-size */
-/* font weights */
-/* icon size */
-/* used for logos */
-/* spacing for padding, margin, etc... */
-/* shadow */
-:host {
-  display: block;
-  width: 100%;
-}
-:host yoo-progress-bar {
-  --progress-value-font-size: var(--font-size-14, 0.875rem);
-  width: calc(100% - 4rem);
-  margin-top: var(--spacing-16, 1rem);
-  margin-left: var(--spacing-32, 2rem);
-}
-:host .advanced {
-  display: flex;
-  margin: 1.5rem;
-  margin-left: 3rem;
-  cursor: pointer;
-}
-:host .advanced yoo-icon {
-  margin-right: 0.8rem;
-}
-:host .top-container {
-  display: flex;
-  margin: 1.5rem;
-  margin-top: 1rem;
-  margin-bottom: 0;
-  padding: 1.5rem 1rem;
-  background: var(--light, #ffffff);
-  border: var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);
-  border-radius: var(--border-radius-08, 0.5rem);
-  cursor: pointer;
-}
-:host .top-container:hover {
-  border: var(--border-width-01, 0.0625rem) solid var(--dark, #000000) !important;
-}
-:host .top-container.invalid {
-  background-color: var(--stable-alt-10, rgba(208, 208, 208, 0.1));
-  border: var(--border-width-01, 0.0625rem) solid var(--stable-alt-10, rgba(208, 208, 208, 0.1));
-}
-:host .top-container.translated-partial .left-part .description-container {
-  color: var(--stable, #adadad);
-}
-:host .top-container.translated-partial .left-part .description-container span {
-  color: var(--warning, #ed6e33);
-}
-:host .top-container.translated-full .left-part .description-container, :host .top-container.translated-partial .left-part .description-container {
-  display: flex;
-}
-:host .top-container.translated-full .left-part .description-container span, :host .top-container.translated-partial .left-part .description-container span {
-  display: flex;
-}
-:host .top-container.translated-full .left-part .description-container span yoo-icon, :host .top-container.translated-partial .left-part .description-container span yoo-icon {
-  margin: 0 var(--spacing-04, 0.25rem);
-}
-:host .top-container .icon-part {
-  display: flex;
-  align-items: center;
-  padding-right: 1.5rem;
-}
-:host .top-container .number-part {
-  padding-right: 1.5rem;
-  font-weight: bold;
-  font-size: var(--font-size-54, 3.375rem);
-}
-:host .top-container .left-part {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
-}
-:host .top-container .left-part .heading-container {
-  display: flex;
-  align-items: center;
-}
-:host .top-container .left-part .heading-container .title-container {
-  display: flex;
-  align-items: center;
-  font-weight: var(--font-weight-900, 900);
-  font-size: var(--font-size-20, 1.25rem);
-}
-:host .top-container .left-part .description-container {
-  color: var(--text-color, #807f83);
-  font-weight: var(--font-weight-400, 400);
-  font-size: var(--font-size-16, 1rem);
-}
-:host .top-container .left-part .description-container p {
-  margin: 0;
-}
-:host .top-container .left-part .description-container .date-spacer {
-  margin-right: 1rem;
-}
-:host .top-container .left-part .description-container .black {
-  color: var(--dark, #000000);
-}
-:host .top-container .right-part {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-:host .top-container .right-part yoo-button {
-  padding: var(--spacing-08, 0.5rem);
-}

package/dist/collection/feature-operate/campaign/campaign-editor-recap/campaign-editor-recap.js

@@ -1,233 +0,0 @@
-import { getLanguageKey, MONGODB_ID_REGEX, pipes, translate } from '@shared/utils';
-import { Component, Event, h, Host, Prop } from '@stencil/core';
-export class YooCampaignEditorRecapComponent {
-  renderContainer(index, section, showSuccess, content, translatedLanguages) {
-    return (h("div", { class: { 'top-container': true, invalid: !showSuccess, 'translated-full': (translatedLanguages === null || translatedLanguages === void 0 ? void 0 : translatedLanguages.length) > 0 && this.fullyTranslated, 'translated-partial': (translatedLanguages === null || translatedLanguages === void 0 ? void 0 : translatedLanguages.length) > 0 && !this.fullyTranslated }, onClick: () => this.edited.emit(section) },
-      h("div", { class: "icon-part" },
-        h("yoo-icon", { name: "check", color: showSuccess ? 'app-color' : 'stable' })),
-      h("div", { class: "number-part" },
-        h("span", null, index)),
-      h("div", { class: "left-part" },
-        h("div", { class: "heading-container" },
-          h("div", { class: "title-container" }, translate('CAMPAIGNEDITOR' + section.toUpperCase()))),
-        content ? (h("div", { class: "description-container" },
-          content,
-          (translatedLanguages === null || translatedLanguages === void 0 ? void 0 : translatedLanguages.length) > 0 &&
-            h("yoo-tooltip", { content: this.getTooltipContent(), placement: "top" },
-              h("span", null,
-                h("yoo-icon", { color: !this.fullyTranslated ? 'warning' : 'stable', name: "translate" }),
-                " ",
-                translate('TRANSLATEDINCOUNT', { count: translatedLanguages.length }))))) : (h("div", { class: "description-container", innerHTML: translate('CAMPAIGNEDITOR' + this.campaign.type.toUpperCase() + section.toUpperCase() + 'DESCRIPTION') }))),
-      h("div", { class: "right-part" },
-        h("yoo-button", { color: showSuccess ? 'light' : 'app-color' }, translate((this.isTranslator && section === 'content' ? 'CAMPAIGNTRANSLATOR' : 'CAMPAIGNEDITOR') + section.toUpperCase() + 'EDIT')))));
-  }
-  renderCategory(text) {
-    return h("span", { class: "black" }, translate(text) + ': ');
-  }
-  getTooltipContent() {
-    let languagesDisplay = '';
-    this.campaign.languages.forEach((lang, langIndex) => {
-      languagesDisplay += translate(getLanguageKey(lang)) + (langIndex >= this.campaign.languages.length - 1 ? '' : ', ');
-    });
-    return '<span>' + translate('TRANSLATEDINLANGUAGES', { languages: languagesDisplay, baseLanguage: translate(getLanguageKey(this.campaign.baseLanguage) || 'TRANSLATE_EN') }) + (!this.fullyTranslated ? `<br/><br/>${translate('PARTIALTRANSLATEWARNING')}` : '') + '</span>';
-  }
-  isAudienceValid() {
-    var _a, _b, _c, _d, _e, _f;
-    return (((this.campaign.type === 'mission') && ((_a = this.campaign.storesQuery) === null || _a === void 0 ? void 0 : _a.total) > 0) ||
-      ((this.campaign.type === 'todo') && (((_c = (_b = this.campaign.audience) === null || _b === void 0 ? void 0 : _b.usersQuery) === null || _c === void 0 ? void 0 : _c.total) > 0 || ((_e = (_d = this.campaign.audience) === null || _d === void 0 ? void 0 : _d.storesQuery) === null || _e === void 0 ? void 0 : _e.total) > 0)) ||
-      ((this.campaign.type === 'service' || this.campaign.type === 'poll') && ((_f = this.campaign.group) === null || _f === void 0 ? void 0 : _f.length) > 0));
-  }
-  renderAudience(index) {
-    var _a, _b;
-    // Remove userId string from selection list.
-    const filteredCampaignGroups = (_b = (_a = this.campaign) === null || _a === void 0 ? void 0 : _a.group) === null || _b === void 0 ? void 0 : _b.filter((group) => !(group === null || group === void 0 ? void 0 : group.match(MONGODB_ID_REGEX)));
-    if (this.isAudienceValid()) {
-      return this.renderContainer(index, 'audience', true, this.campaign.type === 'mission' || this.campaign.type === 'todo'
-        ? this.campaign.storesQuery.total.toLocaleString() + ' ' + translate('CAMPAIGNEDITORSTORES')
-        : filteredCampaignGroups.length.toLocaleString() + ' ' + translate('CAMPAIGNEDITORGROUPS'));
-    }
-    return this.renderContainer(index, 'audience');
-  }
-  isScheduleValid() {
-    return this.campaign.type === 'poll' || !!this.campaign.recurrenceType;
-  }
-  renderSchedule(index) {
-    if (this.isScheduleValid()) {
-      const content = (h("div", null,
-        (this.campaign.autoRenew === false || this.campaign.autoRenew === true) && (h("span", null,
-          this.renderCategory('RECURRENCE'),
-          this.campaign.recurrenceType && translate('CAMPAIGN' + this.campaign.recurrenceType.toUpperCase()))),
-        (this.campaign.autoRenew === false || this.campaign.autoRenew === true) && h("span", { class: "date-spacer" }),
-        this.campaign.validFrom && (h("span", null,
-          this.renderCategory('VALIDFROM'),
-          pipes.dateFormat.transform(this.campaign.validFrom, 'L LT'))),
-        h("span", { class: "date-spacer" }),
-        this.campaign.validUntil && (h("span", null,
-          this.renderCategory('VALIDUNTIL'),
-          pipes.dateFormat.transform(this.campaign.validUntil, 'L LT'))),
-        h("span", { class: "date-spacer" }),
-        this.campaign.duedate && (h("span", null,
-          this.renderCategory('DUEDATE'),
-          pipes.dateFormat.transform(this.campaign.duedate, 'L LT')))));
-      return this.renderContainer(index, 'schedule', true, content);
-    }
-    return this.renderContainer(index, 'schedule');
-  }
-  isContentValid() {
-    return this.campaign.slides && this.campaign.slides.length > 0;
-  }
-  renderContent(index) {
-    var _a;
-    if (this.isContentValid()) {
-      return this.renderContainer(index, 'content', true, this.campaign.slides.length.toLocaleString() + ' ' + translate('PAGES'), (_a = this.campaign) === null || _a === void 0 ? void 0 : _a.languages);
-    }
-    return this.renderContainer(index, 'content');
-  }
-  isReportValid() {
-    return true;
-  }
-  hasSchedule() {
-    var _a, _b, _c;
-    return ((_a = this.campaign) === null || _a === void 0 ? void 0 : _a.type) === 'mission' || ((_b = this.campaign) === null || _b === void 0 ? void 0 : _b.type) === 'todo' || ((_c = this.campaign) === null || _c === void 0 ? void 0 : _c.type) === 'poll';
-  }
-  hasAudience() {
-    return !this.campaign.hasWorkflow || this.campaign.type === 'mission' || this.campaign.type === 'todo'; // this.campaign && this.campaign.type === 'mission';
-  }
-  renderReport(index) {
-    if (this.isReportValid()) {
-      const content = (h("div", null,
-        h("div", null)));
-      return this.renderContainer(index, 'report', true, content);
-    }
-    return this.renderContainer(index, 'report');
-  }
-  renderAdvanced() {
-    return h("div", { class: "advanced", onClick: () => this.edited.emit('settings') },
-      h("yoo-icon", { name: "settings" }),
-      h("span", null, translate('ADVANCEDSETTINGS')));
-  }
-  renderProgress() {
-    let progress = 0;
-    if (this.isAudienceValid() && this.hasAudience()) {
-      progress += 1;
-    }
-    if (this.isContentValid()) {
-      progress += 1;
-    }
-    if (this.isReportValid()) {
-      progress += 1;
-    }
-    if (this.isScheduleValid()) {
-      progress += 1;
-    }
-    const max = this.hasSchedule() && this.hasAudience() ? 4 : !this.hasSchedule() && !this.hasAudience() ? 2 : 3;
-    progress = Math.min(progress, max);
-    return (h("yoo-progress-bar", { value: progress, maxValue: max, metric: "step" }));
-  }
-  render() {
-    const hasAudience = this.hasAudience();
-    const hasSchedule = this.hasSchedule();
-    return h(Host, null,
-      this.renderProgress(),
-      this.renderContent(1),
-      hasAudience && this.renderAudience(2),
-      this.renderReport(hasAudience ? 3 : 2),
-      hasSchedule && this.renderSchedule(hasAudience ? 4 : 3),
-      this.renderAdvanced());
-  }
-  static get is() { return "yoo-campaign-editor-recap"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["campaign-editor-recap.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["campaign-editor-recap.css"]
-  }; }
-  static get properties() { return {
-    "isTranslator": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-translator",
-      "reflect": false
-    },
-    "campaign": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "IMissionDescription",
-        "resolved": "IMissionDescription",
-        "references": {
-          "IMissionDescription": {
-            "location": "import",
-            "path": "@shared/interfaces"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "fullyTranslated": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "fully-translated",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "edited",
-      "name": "edited",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "previewed",
-      "name": "previewed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }]; }
-}