Domů Procházet Nápověda
Registrovat se Přihlásit se
wangdan
/
28035canboot
1
0
Rozštěpit 0
Soubory Úkoly 0 Pull Requesty 0 Wiki
Strom: cd4f25f745
Větve Značky
28035canboot
/
workspace
/
.jxbrowser.userdata
/
Default
/
Cache
/
f_000004

f_000004 23 KB
Historie Surový

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 
  1. import { r as registerInstance, h, H as Host, c as getElement } from './core-800e68f4.js';
    2. 

  2. 

  3. var SvgIconColor;
    4. 

  4. (function (SvgIconColor) {
    5. 

  5.     SvgIconColor["error"] = "error";
    6. 

  6.     SvgIconColor["primary"] = "primary";
    7. 

  7.     SvgIconColor["secondary"] = "secondary";
    8. 

  8.     SvgIconColor["success"] = "success";
    9. 

  9.     SvgIconColor["tertiary"] = "tertiary";
    10. 

  10.     SvgIconColor["warn"] = "warn";
    11. 

  11.     SvgIconColor["reversed"] = "reversed";
    12. 

  12. })(SvgIconColor || (SvgIconColor = {}));
    13. 

  13. ;
    14. 

  14. const SvgIconColorValues = [
    15. 

  15.     SvgIconColor.error,
    16. 

  16.     SvgIconColor.primary,
    17. 

  17.     SvgIconColor.secondary,
    18. 

  18.     SvgIconColor.success,
    19. 

  19.     SvgIconColor.tertiary,
    20. 

  20.     SvgIconColor.warn,
    21. 

  21.     SvgIconColor.reversed
    22. 

  22. ];
    23. 

  23. 

  24. const SvgIcon = class {
    25. 

  25.     constructor(hostRef) {
    26. 

  26.         registerInstance(this, hostRef);
    27. 

  27.         /**
    28. 

  28.          * Property for icon color and style.
    29. 

  29.          * Can be one of: `primary`, `secondary`, `tertiary`, `success`, `warn`, `error`. It is `tertiary` by default.
    30. 

  30.          * Also, `reversed` can be added as in `primary reversed`. This inverts the foreground and background colors.
    31. 

  31.          *
    32. 

  32.          * @type {string}
    33. 

  33.          * @memberof SvgIcon
    34. 

  34.          */
    35. 

  35.         this.appearance = 'tertiary';
    36. 

  36.         /**
    37. 

  37.          * Set the icon to look disabled.
    38. 

  38.          *
    39. 

  39.          * @type {boolean}
    40. 

  40.          * @memberof SvgIcon
    41. 

  41.          */
    42. 

  42.         this.disabled = false;
    43. 

  43.         /**
    44. 

  44.          * Place the icon in a circle wrapper.
    45. 

  45.          *
    46. 

  46.          * @type {boolean}
    47. 

  47.          * @memberof SvgIcon
    48. 

  48.          */
    49. 

  49.         this.circle = false;
    50. 

  50.         /**
    51. 

  51.          * Path to the assets folder, including any common svg prefix for the icon sets.
    52. 

  52.          * NOTE: do not append a trailing slash. Use forward slashes (URI format)
    53. 

  53.          *
    54. 

  54.          * @type {string}
    55. 

  55.          * @memberof SvgIcon
    56. 

  56.          */
    57. 

  57.         this.pathPrefix = 'assets/icons/ti_icons-';
    58. 

  58.         /**
    59. 

  59.          * Set true if the .svg file contains multiple icons, and should use #iconName suffix to access an icon from the set
    60. 

  60.          *
    61. 

  61.          * @type {boolean}
    62. 

  62.          * @memberOf SvgIcon
    63. 

  63.          */
    64. 

  64.         this.multiIconFile = false;
    65. 

  65.         /**
    66. 

  66.          * The icon set. There are two sets of icons - `actions` and `objects`. The default is `objects`.
    67. 

  67.          *
    68. 

  68.          * @type {('actions' | 'objects')}
    69. 

  69.          * @memberof SvgIcon
    70. 

  70.          */
    71. 

  71.         this.iconSet = 'objects';
    72. 

  72.         /**
    73. 

  73.          * Icon size - one of `xxs` (12x12), `xs` (14x14), `s` (18x18), `m` (24x24), `l` (36x36), or `xl` (48x48). Default is `m`.
    74. 

  74.          *
    75. 

  75.          * @type {('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl')}
    76. 

  76.          * @memberof SvgIcon
    77. 

  77.          */
    78. 

  78.         this.size = 'm';
    79. 

  79.     }
    80. 

  80.     componentWillLoad() {
    81. 

  81.         // get the icon name from the text inside the element if icon name is not defined
    82. 

  82.         if (!this.iconName) {
    83. 

  83.             this.iconName = this.hostElement.textContent ? this.hostElement.textContent.trim() : 'info-circle';
    84. 

  84.         }
    85. 

  85.         this.updateIconUrl();
    86. 

  86.         this.handleAppearanceChange();
    87. 

  87.     }
    88. 

  88.     handleAppearanceChange() {
    89. 

  89.         // transform appearance string into an array of options
    90. 

  90.         const appearances = this.appearance.toLowerCase().split(/\s+/);
    91. 

  91.         if (!appearances.some(color => {
    92. 

  92.             if ((SvgIconColorValues).indexOf(color) >= 0) {
    93. 

  93.                 this._color = color;
    94. 

  94.                 return true;
    95. 

  95.             }
    96. 

  96.             return false;
    97. 

  97.         })) {
    98. 

  98.             this._color = SvgIconColor.tertiary; // default color
    99. 

  99.         }
    100. 

  100.     }
    101. 

  101.     updateIconUrl() {
    102. 

  102.         this._iconUrl = `${this.pathPrefix}${this.iconSet}${this.multiIconFile ? '.svg#' + this.iconName : '/' + this.iconName + '.svg'}`;
    103. 

  103.     }
    104. 

  104.     render() {
    105. 

  105.         return (h(Host, { class: `
    106. 

  106.                         ti-svg-icon-${this._color}
    107. 

  107.                         ti-svg-icon-size-${this.size}
    108. 

  108.                         ${this.circle && 'ti-svg-icon-circle'}
    109. 

  109.                         ${this.disabled && 'ti-svg-icon-disabled'}
    110. 

  110.                     ` }, this.multiIconFile ? [
    111. 

  111.             h("svg", { role: "img" }, h("use", { xlinkHref: this._iconUrl })),
    112. 

  112.             h("span", { style: { 'display': 'none' } }, h("slot", null))
    113. 

  113.         ] : (h("div", { class: "ti-svg-icon-bg", style: { backgroundImage: `url('${this._iconUrl}')` } }, h("span", { style: { 'display': 'none' } }, h("slot", null))))));
    114. 

  114.     }
    115. 

  115.     get hostElement() { return getElement(this); }
    116. 

  116.     static get watchers() { return {
    117. 

  117.         "appearance": ["handleAppearanceChange"],
    118. 

  118.         "iconName": ["updateIconUrl"],
    119. 

  119.         "pathPrefix": ["updateIconUrl"],
    120. 

  120.         "iconSet": ["updateIconUrl"],
    121. 

  121.         "multiIconFile": ["updateIconUrl"]
    122. 

  122.     }; }
    123. 

  123.     static get style() { return "/*\n* ==========================================================================\n* _polaris.colors.scss\n* This file imports the Polaris color palette.\n* ==========================================================================\n*/\n/*\n* --------------------------------------------------------------------------\n* color palette\n* --------------------------------------------------------------------------\n*/\n/*\n* ==========================================================================\n* _polaris.mixins.scss\n* This file contains Polaris mixins\n* prefix with mix-\n* ==========================================================================\n*/\n/*\n* ==========================================================================\n* _polaris-variables.scss\n* This file contains global-css variables and is using component based naming.\n*\n* Naming structure: [application(namespacing)]-[type]-[function]-[property]\n* ==========================================================================\n*/\n/*\n* --------------------------------------------------------------------------\n* Color variables\n* --------------------------------------------------------------------------\n*/\n/*\n* Polaris Component color definitions\n*/\n/*\n* Polaris Card Background color definitions\n* Ref: (http://polaris/01-ui-style-foundations.html#02-style-principles.03-background-color)\n*/\n/*\n* --------------------------------------------------------------------------\n* shape variables\n* --------------------------------------------------------------------------\n*/\n/*\n* Polaris border radius definitions\n* Ref: (http://polaris/01-ui-style-foundations.html#02-style-principles.05-border-radius)\n*/\n/*\n* Polaris box shadow definitions\n* Ref: (http://polaris/01-ui-style-foundations.html#02-style-principles.06-box-shadow)\n*/\n/*\n* --------------------------------------------------------------------------\n* font variables\n* Ref: (http://polaris/01-ui-style-foundations.html#07-typography-fundamentals)\n* --------------------------------------------------------------------------\n*/\n/*\n* Font stack definitions\n*/\n/*\n* Font families\n*/\n/*\n* Root HTML and BODY tag values\n*/\n/*\n* Font size cadence values\n*/\n/*\n* Standard Paragraph font sizes\n*/\n/*\n* Header tag font sizes\n*/\n/*\n* Line height cadence values\n*/\n/*\n* Font weight values\n*/\n/*\n* --------------------------------------------------------------------------\n* spacing values variables\n* --------------------------------------------------------------------------\n*/\n/*\n* Base spacing cadence values\n* (base grid size x multiplier) / root font size = rem value\n*/\n/*\n* Component/element specific spacing\n*/\n/*\n* --------------------------------------------------------------------------\n* page layout variables\n* --------------------------------------------------------------------------\n*/\n/*\n* --------------------------------------------------------------------------\n* animation variables\n* ref: (http://polaris/01-ui-style-foundations.html#04-motion)\n* --------------------------------------------------------------------------\n*/\n/*\n* Animation easing types\n*/\n/*\n* Animation timings\n*/\n/*\n* --------------------------------------------------------------------------\n* icon size variables\n* --------------------------------------------------------------------------\n*/\n/*\n* --------------------------------------------------------------------------\n* legacy variable names\n* - May still be used in other component repos\n* --------------------------------------------------------------------------\n*/\n/* Font variables */\n/* Space size variables */\n/*\n* ==========================================================================\n* _ti-core.scss\n*\n*  This files contains mixins uses within TI Webcomponents\n* ==========================================================================\n*/\n/*\n * Base style for trigger element\n */\n/*\n* Tooltip trigger main mixin.\n* Use to add style to trigger tooltip display.\n* For example:\n*\n* .tooltip-trigger:hover {\n*     \@include ti-tooltip-trigger();\n* }\n*\n* Typically not used directly, but via the other mixins below.\n*/\n/*\n* Mixin for adding style to trigger tooltip display to\n* an element selector on hover, focus and checked.\n* For example:\n*\n* .tooltip-trigger {\n     \@include ti-tooltip-trigger-element();\n* }\n*/\n/*\n* Mixin for adding style to trigger tooltip display to\n* a web component shadow host on hover, focus and checked.\n* Use in the web component style sheet outside of :host{}.\n* For example:\n*\n* \@include ti-tooltip-trigger-host();\n* :host {\n*     ...\n* }\n*\n* The optional $selector parameter allows a CSS selector\n* which will be added to the :host selector to allow control\n* over the host trigger via a style class or another selector.\n* For example:\n*\n* \@include ti-tooltip-trigger-host(\'.ti-tooltip-trigger\');\n*\n* creates code like\n*\n* :host(.ti-tooltip-trigger:hover) {\n*     ...\n* }\n*\n* instead of\n*\n* :host(:hover) {\n*     ...\n* }\n*/\n:host {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  vertical-align: text-bottom;\n  fill: #555555;\n  width: 24px;\n  height: 24px;\n}\n:host svg {\n  display: block;\n  width: 24px;\n  height: 24px;\n  stroke-width: 0;\n}\n:host .ti-svg-icon-bg {\n  background-repeat: no-repeat;\n  background-position: 0 0;\n  width: 24px;\n  height: 24px;\n}\n\n:host(.ti-svg-icon-circle) {\n  border-radius: 100%;\n}\n:host(.ti-svg-icon-circle) svg,\n:host(.ti-svg-icon-circle) .ti-svg-icon-bg {\n  -webkit-transform: scale(0.75);\n  transform: scale(0.75);\n}\n\n/* svg icon size modifiers */\n:host(.ti-svg-icon-size-xxs) {\n  width: 12px;\n  height: 12px;\n}\n:host(.ti-svg-icon-size-xxs) svg {\n  width: 12px;\n  height: 12px;\n}\n:host(.ti-svg-icon-size-xxs) .ti-svg-icon-bg {\n  background-size: 12px;\n  width: 12px;\n  height: 12px;\n  line-height: 12px;\n}\n\n:host(.ti-svg-icon-size-xs) {\n  width: 14px;\n  height: 14px;\n}\n:host(.ti-svg-icon-size-xs) svg {\n  width: 14px;\n  height: 14px;\n}\n:host(.ti-svg-icon-size-xs) .ti-svg-icon-bg {\n  background-size: 14px;\n  width: 14px;\n  height: 14px;\n  line-height: 14px;\n}\n\n:host(.ti-svg-icon-size-s) {\n  width: 18px;\n  height: 18px;\n}\n:host(.ti-svg-icon-size-s) svg {\n  width: 18px;\n  height: 18px;\n}\n:host(.ti-svg-icon-size-s) .ti-svg-icon-bg {\n  background-size: 18px;\n  width: 18px;\n  height: 18px;\n  line-height: 18px;\n}\n\n:host(.ti-svg-icon-size-m) {\n  width: 24px;\n  height: 24px;\n}\n:host(.ti-svg-icon-size-m) svg {\n  width: 24px;\n  height: 24px;\n}\n:host(.ti-svg-icon-size-m) .ti-svg-icon-bg {\n  background-size: 24px;\n  width: 24px;\n  height: 24px;\n  line-height: 24px;\n}\n\n:host(.ti-svg-icon-size-l) {\n  width: 36px;\n  height: 36px;\n}\n:host(.ti-svg-icon-size-l) svg {\n  width: 36px;\n  height: 36px;\n}\n:host(.ti-svg-icon-size-l) .ti-svg-icon-bg {\n  background-size: 36px;\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n}\n\n:host(.ti-svg-icon-size-xl) {\n  width: 48px;\n  height: 48px;\n}\n:host(.ti-svg-icon-size-xl) svg {\n  width: 48px;\n  height: 48px;\n}\n:host(.ti-svg-icon-size-xl) .ti-svg-icon-bg {\n  background-size: 48px;\n  width: 48px;\n  height: 48px;\n  line-height: 48px;\n}\n\n/* svg icon color modifiers */\n:host(.ti-svg-icon-tertiary) {\n  fill: #555555;\n}\n\n:host(.ti-svg-icon-tertiary.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #555555;\n}\n\n:host(.ti-svg-icon-secondary) {\n  fill: #115566;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #115566;\n}\n\n:host(.ti-svg-icon-primary) {\n  fill: #cc0000;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #cc0000;\n}\n\n:host(.ti-svg-icon-disabled) {\n  fill: #cccccc;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #cccccc;\n}\n\n:host(.ti-svg-icon-reversed) {\n  fill: #ffffff;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #ffffff;\n}\n\n:host(.ti-svg-icon-error) {\n  fill: #990000;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #990000;\n}\n\n:host(.ti-svg-icon-success) {\n  fill: #44bb55;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #44bb55;\n}\n\n:host(.ti-svg-icon-warn) {\n  fill: #ff9933;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #ff9933;\n}\n\n/* bg icon color modifiers - position adjust */\n:host(.ti-svg-icon-tertiary.ti-svg-icon-size-xxs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-xxs) .ti-svg-icon-bg {\n  background-position: 0 -12px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-xxs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-xxs) .ti-svg-icon-bg {\n  background-position: 0 -24px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-xxs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-xxs) .ti-svg-icon-bg {\n  background-position: 0 -36px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-xxs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-xxs) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-xxs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-xxs) .ti-svg-icon-bg {\n  background-position: 0 -60px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-xxs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-xxs) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-xxs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-xxs) .ti-svg-icon-bg {\n  background-position: 0 -84px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-xxs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-tertiary.ti-svg-icon-size-xs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-xs) .ti-svg-icon-bg {\n  background-position: 0 -14px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-xs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-xs) .ti-svg-icon-bg {\n  background-position: 0 -28px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-xs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-xs) .ti-svg-icon-bg {\n  background-position: 0 -42px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-xs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-xs) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-xs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-xs) .ti-svg-icon-bg {\n  background-position: 0 -70px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-xs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-xs) .ti-svg-icon-bg {\n  background-position: 0 -84px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-xs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-xs) .ti-svg-icon-bg {\n  background-position: 0 -98px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-xs.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -56px;\n}\n\n:host(.ti-svg-icon-tertiary.ti-svg-icon-size-s.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-s) .ti-svg-icon-bg {\n  background-position: 0 -18px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-s.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-s) .ti-svg-icon-bg {\n  background-position: 0 -36px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-s.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-s) .ti-svg-icon-bg {\n  background-position: 0 -54px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-s.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-s) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-s.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-s) .ti-svg-icon-bg {\n  background-position: 0 -90px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-s.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-s) .ti-svg-icon-bg {\n  background-position: 0 -108px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-s.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-s) .ti-svg-icon-bg {\n  background-position: 0 -126px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-s.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-tertiary.ti-svg-icon-size-m.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-m) .ti-svg-icon-bg {\n  background-position: 0 -24px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-m.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-m) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-m.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-m) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-m.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-m) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-m.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-m) .ti-svg-icon-bg {\n  background-position: 0 -120px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-m.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-m) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-m.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-m) .ti-svg-icon-bg {\n  background-position: 0 -168px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-m.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-tertiary.ti-svg-icon-size-l.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-l) .ti-svg-icon-bg {\n  background-position: 0 -36px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-l.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-l) .ti-svg-icon-bg {\n  background-position: 0 -72px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-l.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-l) .ti-svg-icon-bg {\n  background-position: 0 -108px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-l.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-l) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-l.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-l) .ti-svg-icon-bg {\n  background-position: 0 -180px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-l.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-l) .ti-svg-icon-bg {\n  background-position: 0 -216px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-l.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-l) .ti-svg-icon-bg {\n  background-position: 0 -252px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-l.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-tertiary.ti-svg-icon-size-xl.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-xl) .ti-svg-icon-bg {\n  background-position: 0 -48px;\n}\n\n:host(.ti-svg-icon-secondary.ti-svg-icon-size-xl.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-xl) .ti-svg-icon-bg {\n  background-position: 0 -96px;\n}\n\n:host(.ti-svg-icon-primary.ti-svg-icon-size-xl.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-xl) .ti-svg-icon-bg {\n  background-position: 0 -144px;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-size-xl.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-xl) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n:host(.ti-svg-icon-reversed.ti-svg-icon-size-xl.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-xl) .ti-svg-icon-bg {\n  background-position: 0 -240px;\n}\n\n:host(.ti-svg-icon-error.ti-svg-icon-size-xl.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-xl) .ti-svg-icon-bg {\n  background-position: 0 -288px;\n}\n\n:host(.ti-svg-icon-success.ti-svg-icon-size-xl.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-xl) .ti-svg-icon-bg {\n  background-position: 0 -336px;\n}\n\n:host(.ti-svg-icon-warn.ti-svg-icon-size-xl.ti-svg-icon-circle) .ti-svg-icon-bg {\n  background-position: 0 -192px;\n}\n\n/* modifier for disabled icon */\n:host(.ti-svg-icon-disabled) {\n  fill: #cccccc;\n}\n\n:host(.ti-svg-icon-disabled.ti-svg-icon-circle) {\n  fill: #ffffff;\n  background-color: #cccccc;\n}"; }
    124. 

  124. };
    125. 

  125. 

  126. export { SvgIcon as ti_svg_icon };
    127.