@yoobic/yobi 8.3.0-26 → 8.3.0-29

package/dist/types/components.d.ts

@@ -426,20 +426,6 @@ export namespace Components {
         "imgWidth": number;
         "scaleValue": number;
     }
-    interface YooBackgroundBlur {
-        /**
-          * Parent element height to fit background image into.
-         */
-        "height": number;
-        /**
-          * Cloudinary image url.
-         */
-        "imageUrl": string;
-        /**
-          * Parent element width to fit background image into.
-         */
-        "width": number;
-    }
     interface YooBadge {
         /**
           * Defines badge color, by default is set to danger
@@ -1870,6 +1856,7 @@ export namespace Components {
         "uploadInitialValue"?: boolean;
         "useTranslate": boolean;
         "useUploader": boolean;
+        "validateOnLoad"?: boolean;
         "validators": (Validator<any> | IValidatorEntry)[];
         "validity": boolean;
         "value": any[] | any;
@@ -6173,20 +6160,6 @@ export namespace Components {
          */
         "submittedLottie": TLottieType;
     }
-    interface YooRecapLink {
-        /**
-          * The main text in the recap link
-         */
-        "heading": string;
-        /**
-          * This will hold a string defining the icon to be shown in the link
-         */
-        "icon": TIconName;
-        /**
-          * The description in the recap link
-         */
-        "subheading": string;
-    }
     interface YooReportBuilder {
         "missionDescription": IMissionDescription;
     }
@@ -6528,8 +6501,6 @@ export namespace Components {
          */
         "textCustomColor": string;
     }
-    interface YooTappable {
-    }
     interface YooText {
         "content": string;
         /**
@@ -8306,12 +8277,6 @@ declare global {
         prototype: HTMLYooBackgroundElement;
         new (): HTMLYooBackgroundElement;
     };
-    interface HTMLYooBackgroundBlurElement extends Components.YooBackgroundBlur, HTMLStencilElement {
-    }
-    var HTMLYooBackgroundBlurElement: {
-        prototype: HTMLYooBackgroundBlurElement;
-        new (): HTMLYooBackgroundBlurElement;
-    };
     interface HTMLYooBadgeElement extends Components.YooBadge, HTMLStencilElement {
     }
     var HTMLYooBadgeElement: {
@@ -10064,12 +10029,6 @@ declare global {
         prototype: HTMLYooRatingElement;
         new (): HTMLYooRatingElement;
     };
-    interface HTMLYooRecapLinkElement extends Components.YooRecapLink, HTMLStencilElement {
-    }
-    var HTMLYooRecapLinkElement: {
-        prototype: HTMLYooRecapLinkElement;
-        new (): HTMLYooRecapLinkElement;
-    };
     interface HTMLYooReportBuilderElement extends Components.YooReportBuilder, HTMLStencilElement {
     }
     var HTMLYooReportBuilderElement: {
@@ -10190,12 +10149,6 @@ declare global {
         prototype: HTMLYooTagElement;
         new (): HTMLYooTagElement;
     };
-    interface HTMLYooTappableElement extends Components.YooTappable, HTMLStencilElement {
-    }
-    var HTMLYooTappableElement: {
-        prototype: HTMLYooTappableElement;
-        new (): HTMLYooTappableElement;
-    };
     interface HTMLYooTextElement extends Components.YooText, HTMLStencilElement {
     }
     var HTMLYooTextElement: {
@@ -10403,7 +10356,6 @@ declare global {
         "yoo-avatar": HTMLYooAvatarElement;
         "yoo-avatars": HTMLYooAvatarsElement;
         "yoo-background": HTMLYooBackgroundElement;
-        "yoo-background-blur": HTMLYooBackgroundBlurElement;
         "yoo-badge": HTMLYooBadgeElement;
         "yoo-banner": HTMLYooBannerElement;
         "yoo-barcode": HTMLYooBarcodeElement;
@@ -10696,7 +10648,6 @@ declare global {
         "yoo-property-card": HTMLYooPropertyCardElement;
         "yoo-range": HTMLYooRangeElement;
         "yoo-rating": HTMLYooRatingElement;
-        "yoo-recap-link": HTMLYooRecapLinkElement;
         "yoo-report-builder": HTMLYooReportBuilderElement;
         "yoo-reset-password": HTMLYooResetPasswordElement;
         "yoo-result-dialog": HTMLYooResultDialogElement;
@@ -10717,7 +10668,6 @@ declare global {
         "yoo-tabs": HTMLYooTabsElement;
         "yoo-tabs-slides": HTMLYooTabsSlidesElement;
         "yoo-tag": HTMLYooTagElement;
-        "yoo-tappable": HTMLYooTappableElement;
         "yoo-text": HTMLYooTextElement;
         "yoo-text-sequence": HTMLYooTextSequenceElement;
         "yoo-toast": HTMLYooToastElement;
@@ -11138,20 +11088,6 @@ declare namespace LocalJSX {
         "imgWidth"?: number;
         "scaleValue"?: number;
     }
-    interface YooBackgroundBlur {
-        /**
-          * Parent element height to fit background image into.
-         */
-        "height"?: number;
-        /**
-          * Cloudinary image url.
-         */
-        "imageUrl"?: string;
-        /**
-          * Parent element width to fit background image into.
-         */
-        "width"?: number;
-    }
     interface YooBadge {
         /**
           * Defines badge color, by default is set to danger
@@ -12722,6 +12658,7 @@ declare namespace LocalJSX {
         "uploadInitialValue"?: boolean;
         "useTranslate"?: boolean;
         "useUploader"?: boolean;
+        "validateOnLoad"?: boolean;
         "validators"?: (Validator<any> | IValidatorEntry)[];
         "validity"?: boolean;
         "value"?: any[] | any;
@@ -18069,20 +18006,6 @@ declare namespace LocalJSX {
          */
         "submittedLottie"?: TLottieType;
     }
-    interface YooRecapLink {
-        /**
-          * The main text in the recap link
-         */
-        "heading"?: string;
-        /**
-          * This will hold a string defining the icon to be shown in the link
-         */
-        "icon"?: TIconName;
-        /**
-          * The description in the recap link
-         */
-        "subheading"?: string;
-    }
     interface YooReportBuilder {
         "missionDescription"?: IMissionDescription;
         "onMissionDescriptionChanged"?: (event: YooReportBuilderCustomEvent<IMissionDescription>) => void;
@@ -18458,8 +18381,6 @@ declare namespace LocalJSX {
          */
         "textCustomColor"?: string;
     }
-    interface YooTappable {
-    }
     interface YooText {
         "content"?: string;
         /**
@@ -19181,7 +19102,6 @@ declare namespace LocalJSX {
         "yoo-avatar": YooAvatar;
         "yoo-avatars": YooAvatars;
         "yoo-background": YooBackground;
-        "yoo-background-blur": YooBackgroundBlur;
         "yoo-badge": YooBadge;
         "yoo-banner": YooBanner;
         "yoo-barcode": YooBarcode;
@@ -19474,7 +19394,6 @@ declare namespace LocalJSX {
         "yoo-property-card": YooPropertyCard;
         "yoo-range": YooRange;
         "yoo-rating": YooRating;
-        "yoo-recap-link": YooRecapLink;
         "yoo-report-builder": YooReportBuilder;
         "yoo-reset-password": YooResetPassword;
         "yoo-result-dialog": YooResultDialog;
@@ -19495,7 +19414,6 @@ declare namespace LocalJSX {
         "yoo-tabs": YooTabs;
         "yoo-tabs-slides": YooTabsSlides;
         "yoo-tag": YooTag;
-        "yoo-tappable": YooTappable;
         "yoo-text": YooText;
         "yoo-text-sequence": YooTextSequence;
         "yoo-toast": YooToast;
@@ -19548,7 +19466,6 @@ declare module "@stencil/core" {
             "yoo-avatar": LocalJSX.YooAvatar & JSXBase.HTMLAttributes<HTMLYooAvatarElement>;
             "yoo-avatars": LocalJSX.YooAvatars & JSXBase.HTMLAttributes<HTMLYooAvatarsElement>;
             "yoo-background": LocalJSX.YooBackground & JSXBase.HTMLAttributes<HTMLYooBackgroundElement>;
-            "yoo-background-blur": LocalJSX.YooBackgroundBlur & JSXBase.HTMLAttributes<HTMLYooBackgroundBlurElement>;
             "yoo-badge": LocalJSX.YooBadge & JSXBase.HTMLAttributes<HTMLYooBadgeElement>;
             "yoo-banner": LocalJSX.YooBanner & JSXBase.HTMLAttributes<HTMLYooBannerElement>;
             "yoo-barcode": LocalJSX.YooBarcode & JSXBase.HTMLAttributes<HTMLYooBarcodeElement>;
@@ -19841,7 +19758,6 @@ declare module "@stencil/core" {
             "yoo-property-card": LocalJSX.YooPropertyCard & JSXBase.HTMLAttributes<HTMLYooPropertyCardElement>;
             "yoo-range": LocalJSX.YooRange & JSXBase.HTMLAttributes<HTMLYooRangeElement>;
             "yoo-rating": LocalJSX.YooRating & JSXBase.HTMLAttributes<HTMLYooRatingElement>;
-            "yoo-recap-link": LocalJSX.YooRecapLink & JSXBase.HTMLAttributes<HTMLYooRecapLinkElement>;
             "yoo-report-builder": LocalJSX.YooReportBuilder & JSXBase.HTMLAttributes<HTMLYooReportBuilderElement>;
             "yoo-reset-password": LocalJSX.YooResetPassword & JSXBase.HTMLAttributes<HTMLYooResetPasswordElement>;
             "yoo-result-dialog": LocalJSX.YooResultDialog & JSXBase.HTMLAttributes<HTMLYooResultDialogElement>;
@@ -19862,7 +19778,6 @@ declare module "@stencil/core" {
             "yoo-tabs": LocalJSX.YooTabs & JSXBase.HTMLAttributes<HTMLYooTabsElement>;
             "yoo-tabs-slides": LocalJSX.YooTabsSlides & JSXBase.HTMLAttributes<HTMLYooTabsSlidesElement>;
             "yoo-tag": LocalJSX.YooTag & JSXBase.HTMLAttributes<HTMLYooTagElement>;
-            "yoo-tappable": LocalJSX.YooTappable & JSXBase.HTMLAttributes<HTMLYooTappableElement>;
             "yoo-text": LocalJSX.YooText & JSXBase.HTMLAttributes<HTMLYooTextElement>;
             "yoo-text-sequence": LocalJSX.YooTextSequence & JSXBase.HTMLAttributes<HTMLYooTextSequenceElement>;
             "yoo-toast": LocalJSX.YooToast & JSXBase.HTMLAttributes<HTMLYooToastElement>;

package/dist/types/home/runner/work/yoobic-ng-6/yoobic-ng-6/design-system/stencil/.stencil/shared/interfaces/src/entities/form-field/form-field.interface.d.ts

@@ -512,6 +512,7 @@ export interface IFormField {
   disableToggle?: boolean;
   secondaryIconTitle?: string;
   customDataLoader?: TGridCustomDataLoader;
+  validateOnLoad?: boolean;
   enableTarget?: boolean;
   forceManualType?: boolean;
   tooltipPrefix?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoobic/yobi",
-  "version": "8.3.0-26",
+  "version": "8.3.0-29",
   "description": "Yobi - Yoobic Design System",
   "module": "dist/index.js",
   "main": "dist/index.cjs.js",

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-6482c595.js');
-require('./index-19c36fd7.js');
-const commonHelpers = require('./common-helpers-75423c49.js');
-const overlays = require('./overlays-cd917008.js');
-require('./lodash-597bda6d.js');
-require('./index-0eed64a9.js');
-require('./_commonjsHelpers-94df2ea7.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-6482c595.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-6482c595.js');
-const commonHelpers = require('./common-helpers-75423c49.js');
-require('./overlays-cd917008.js');
-require('./lodash-597bda6d.js');
-require('./index-0eed64a9.js');
-require('./_commonjsHelpers-94df2ea7.js');
-require('./index-19c36fd7.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;
-}