@yoobic/yobi 8.3.0-3 → 8.3.0-30

package/dist/cjs/yoo-background-blur.cjs.entry.js

@@ -1,57 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e182c32d.js');
-require('./index-1fdbd9b3.js');
-const commonHelpers = require('./common-helpers-a4efe957.js');
-const overlays = require('./overlays-b6c94fc8.js');
-require('./lodash-597bda6d.js');
-require('./_commonjsHelpers-94df2ea7.js');
-require('./index-de8540eb.js');
-
-const backgroundBlurCss = ":host .background-blur-image{background-repeat:no-repeat;background-position-x:center;background-position-y:top}";
-
-const YooBackgroundBlurComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    // settings
-    this.opacity = 0.8;
-    this.blur = 1000;
-    this.cropMode = 'fill';
-    this.imageFlag = 'lossy';
-    this.gradientLayer = new overlays.CloudinaryGradientLayer('y', -0.4);
-  }
-  componentWillLoad() {
-    return this.prepareImgSrc();
-  }
-  componentWillUpdate() {
-    return this.prepareImgSrc();
-  }
-  getWidth() {
-    return this.width || commonHelpers.getScreenWidth();
-  }
-  getHeight() {
-    return this.height || commonHelpers.getScreenHeight();
-  }
-  async prepareImgSrc() {
-    if (this.imageUrl) {
-      const url = new overlays.Cloudinary(this.imageUrl)
-        .width(this.getWidth())
-        .height(this.getHeight())
-        .crop(this.cropMode)
-        .blur(this.blur)
-        .flag(this.imageFlag)
-        .opacity(this.opacity * 100)
-        .addLayer(this.gradientLayer)
-        .getUrl();
-      this.imgSrc = url;
-    }
-  }
-  render() {
-    return (index.h("div", { class: "background-blur-image", style: { backgroundImage: this.imgSrc && `url('${this.imgSrc}')` } }, index.h("slot", null)));
-  }
-};
-YooBackgroundBlurComponent.style = backgroundBlurCss;
-
-exports.yoo_background_blur = YooBackgroundBlurComponent;

package/dist/cjs/yoo-recap-link.cjs.entry.js

@@ -1,32 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e182c32d.js');
-
-const recapLinkCss = ":host .link-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:5.6rem;margin:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);text-align:left;background-color:var(--light, #ffffff);border-radius:0.5rem;-webkit-box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1));box-shadow:var(--tile-shadow, 0 1px 4px 0 rgba(0, 0, 0, 0.1))}:host .link-wrapper .tag-outer-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:4rem;height:100%;margin:var(--spacing-16, 1rem)}:host .link-wrapper .tag-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:2rem;height:2rem;color:var(--app-color, #5a30f4);font-size:var(--font-size-16, 1rem);border-radius:50%}:host .link-wrapper .text-container{width:calc(100% - 4rem);padding:var(--spacing-08, 0.5rem) var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem) 0}:host .link-wrapper .heading-container{color:var(--dark, #000000);font-size:var(--font-size-18, 1.125rem)}:host .link-wrapper .subheading-container{color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}";
-
-const YooRecapLinkComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  renderTag() {
-    return index.h("yoo-tag", { icon: this.icon || 'left', iconOnlyColor: "app-color", color: "app-color-20", size: "large" });
-  }
-  renderHeading() {
-    if (this.heading) {
-      return index.h("yoo-truncate", { showEllipsisButton: true, content: this.heading });
-    }
-  }
-  renderSubheading() {
-    if (this.subheading) {
-      return this.subheading;
-    }
-  }
-  render() {
-    return index.h("div", { class: "link-wrapper" }, index.h("div", { class: "tag-outer-container" }, this.renderTag()), index.h("div", { class: "text-container" }, index.h("div", { class: "heading-container" }, this.renderHeading()), index.h("div", { class: "subheading-container" }, this.renderSubheading())), index.h("div", { class: "tag-outer-container" }, index.h("div", { class: "tag-container" }, index.h("yoo-icon", { size: "small", color: "stable-alt", name: "right" }))));
-  }
-};
-YooRecapLinkComponent.style = recapLinkCss;
-
-exports.yoo_recap_link = YooRecapLinkComponent;

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

@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e182c32d.js');
-const commonHelpers = require('./common-helpers-a4efe957.js');
-require('./overlays-b6c94fc8.js');
-require('./lodash-597bda6d.js');
-require('./index-de8540eb.js');
-require('./_commonjsHelpers-94df2ea7.js');
-require('./index-1fdbd9b3.js');
-
-const tappableCss = ":host{position:relative;z-index:0;display:-ms-flexbox;display:flex;width:100%;overflow:hidden}:host .dot{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:var(--app-color, #5a30f4);z-index:-1;opacity:0.2}@-webkit-keyframes expand-to-full{0%{background-color:var(--app-color, #5a30f4);width:0;opacity:0}100%{background-color:var(--app-color, #5a30f4);width:100%;opacity:0.8}}@keyframes expand-to-full{0%{background-color:var(--app-color, #5a30f4);width:0;opacity:0}100%{background-color:var(--app-color, #5a30f4);width:100%;opacity:0.8}}@-webkit-keyframes anim-in{0%{width:0}100%{z-index:-1;width:100%}}@keyframes anim-in{0%{width:0}100%{z-index:-1;width:100%}}:host .dot.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host .dot:before{position:relative;display:block;margin-top:100%;border-radius:50%;content:\"\"}:host .dot:after{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;content:\"\"}:host .dot.tapped,:host .dot.active,:host .dot.tapped:after,:host .dot.active:after{border-radius:50%;-webkit-animation:anim-in 0.35s;animation:anim-in 0.35s}:host .dot.hovered,:host .dot.hovered:after{border-radius:50%;-webkit-animation:anim-in 0.15s;animation:anim-in 0.15s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.neutral) .dot{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:var(--dark, #000000) !important;z-index:-1;opacity:0.2}@keyframes expand-to-full{0%{background-color:var(--dark, #000000) !important;width:0;opacity:0}100%{background-color:var(--dark, #000000) !important;width:100%;opacity:0.8}}@keyframes anim-in{0%{width:0}100%{z-index:-1;width:100%}}:host(.neutral) .dot.rtl{top:50%;right:50%;-webkit-transform:translate(50%, -50%);transform:translate(50%, -50%)}:host(.neutral) .dot:before{position:relative;display:block;margin-top:100%;border-radius:50%;content:\"\"}:host(.neutral) .dot:after{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;content:\"\"}:host(.neutral) .dot.tapped,:host(.neutral) .dot.active,:host(.neutral) .dot.tapped:after,:host(.neutral) .dot.active:after{border-radius:50%;-webkit-animation:anim-in 0.35s;animation:anim-in 0.35s}:host(.neutral) .dot.hovered,:host(.neutral) .dot.hovered:after{border-radius:50%;-webkit-animation:anim-in 0.15s;animation:anim-in 0.15s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(.center){-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}";
-
-const YooTappableComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tapped = false;
-    this.hovered = false;
-    this.touchFlag = true;
-    this.touch_timeout = 500;
-  }
-  onTouchDown() {
-    if (!this.tapped) {
-      this.touchFlag = false;
-      this.dotDiv.classList.add('tapped');
-      setTimeout(() => {
-        if (this.dotDiv && this.dotDiv.classList) {
-          this.dotDiv.classList.remove('tapped');
-          this.tapped = false;
-          this.touchFlag = true;
-        }
-      }, this.touch_timeout);
-    }
-  }
-  onMouseOver() {
-    if (!this.hovered && this.touchFlag) {
-      this.hovered = true;
-      this.dotDiv.classList.add('hovered');
-    }
-  }
-  onMouseOut() {
-    if (this.hovered && this.touchFlag) {
-      this.hovered = false;
-      this.dotDiv.classList.remove('hovered');
-    }
-  }
-  render() {
-    return index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("slot", null), index.h("div", { class: "dot", ref: (el) => (this.dotDiv = el) }));
-  }
-  get host() { return index.getElement(this); }
-};
-YooTappableComponent.style = tappableCss;
-
-exports.yoo_tappable = YooTappableComponent;

package/dist/collection/components/1.atoms/background-blur/background-blur.css

@@ -1,208 +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 .background-blur-image {
-  background-repeat: no-repeat;
-  background-position-x: center;
-  background-position-y: top;
-}

package/dist/collection/components/1.atoms/background-blur/background-blur.js

@@ -1,107 +0,0 @@
-/**
- * @name: Background Blur
- */
-import { Cloudinary, CloudinaryGradientLayer } from '@shared/utils';
-import { Component, h, Prop } from '@stencil/core';
-import { getScreenHeight, getScreenWidth } from '../../../utils/helpers/common-helpers';
-export class YooBackgroundBlurComponent {
-  constructor() {
-    // settings
-    this.opacity = 0.8;
-    this.blur = 1000;
-    this.cropMode = 'fill';
-    this.imageFlag = 'lossy';
-    this.gradientLayer = new CloudinaryGradientLayer('y', -0.4);
-  }
-  componentWillLoad() {
-    return this.prepareImgSrc();
-  }
-  componentWillUpdate() {
-    return this.prepareImgSrc();
-  }
-  getWidth() {
-    return this.width || getScreenWidth();
-  }
-  getHeight() {
-    return this.height || getScreenHeight();
-  }
-  async prepareImgSrc() {
-    if (this.imageUrl) {
-      const url = new Cloudinary(this.imageUrl)
-        .width(this.getWidth())
-        .height(this.getHeight())
-        .crop(this.cropMode)
-        .blur(this.blur)
-        .flag(this.imageFlag)
-        .opacity(this.opacity * 100)
-        .addLayer(this.gradientLayer)
-        .getUrl();
-      this.imgSrc = url;
-    }
-  }
-  render() {
-    return (h("div", { class: "background-blur-image", style: { backgroundImage: this.imgSrc && `url('${this.imgSrc}')` } },
-      h("slot", null)));
-  }
-  static get is() { return "yoo-background-blur"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["background-blur.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["background-blur.css"]
-  }; }
-  static get properties() { return {
-    "imageUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Cloudinary image url."
-      },
-      "attribute": "image-url",
-      "reflect": false
-    },
-    "width": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Parent element width to fit background image into."
-      },
-      "attribute": "width",
-      "reflect": false
-    },
-    "height": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Parent element height to fit background image into."
-      },
-      "attribute": "height",
-      "reflect": false
-    }
-  }; }
-}