127 lines
23 KiB
Plaintext
127 lines
23 KiB
Plaintext
import { r as registerInstance, h, H as Host, c as getElement } from './core-800e68f4.js';
|
|
|
|
var SvgIconColor;
|
|
(function (SvgIconColor) {
|
|
SvgIconColor["error"] = "error";
|
|
SvgIconColor["primary"] = "primary";
|
|
SvgIconColor["secondary"] = "secondary";
|
|
SvgIconColor["success"] = "success";
|
|
SvgIconColor["tertiary"] = "tertiary";
|
|
SvgIconColor["warn"] = "warn";
|
|
SvgIconColor["reversed"] = "reversed";
|
|
})(SvgIconColor || (SvgIconColor = {}));
|
|
;
|
|
const SvgIconColorValues = [
|
|
SvgIconColor.error,
|
|
SvgIconColor.primary,
|
|
SvgIconColor.secondary,
|
|
SvgIconColor.success,
|
|
SvgIconColor.tertiary,
|
|
SvgIconColor.warn,
|
|
SvgIconColor.reversed
|
|
];
|
|
|
|
const SvgIcon = class {
|
|
constructor(hostRef) {
|
|
registerInstance(this, hostRef);
|
|
/**
|
|
* Property for icon color and style.
|
|
* Can be one of: `primary`, `secondary`, `tertiary`, `success`, `warn`, `error`. It is `tertiary` by default.
|
|
* Also, `reversed` can be added as in `primary reversed`. This inverts the foreground and background colors.
|
|
*
|
|
* @type {string}
|
|
* @memberof SvgIcon
|
|
*/
|
|
this.appearance = 'tertiary';
|
|
/**
|
|
* Set the icon to look disabled.
|
|
*
|
|
* @type {boolean}
|
|
* @memberof SvgIcon
|
|
*/
|
|
this.disabled = false;
|
|
/**
|
|
* Place the icon in a circle wrapper.
|
|
*
|
|
* @type {boolean}
|
|
* @memberof SvgIcon
|
|
*/
|
|
this.circle = false;
|
|
/**
|
|
* Path to the assets folder, including any common svg prefix for the icon sets.
|
|
* NOTE: do not append a trailing slash. Use forward slashes (URI format)
|
|
*
|
|
* @type {string}
|
|
* @memberof SvgIcon
|
|
*/
|
|
this.pathPrefix = 'assets/icons/ti_icons-';
|
|
/**
|
|
* Set true if the .svg file contains multiple icons, and should use #iconName suffix to access an icon from the set
|
|
*
|
|
* @type {boolean}
|
|
* @memberOf SvgIcon
|
|
*/
|
|
this.multiIconFile = false;
|
|
/**
|
|
* The icon set. There are two sets of icons - `actions` and `objects`. The default is `objects`.
|
|
*
|
|
* @type {('actions' | 'objects')}
|
|
* @memberof SvgIcon
|
|
*/
|
|
this.iconSet = 'objects';
|
|
/**
|
|
* Icon size - one of `xxs` (12x12), `xs` (14x14), `s` (18x18), `m` (24x24), `l` (36x36), or `xl` (48x48). Default is `m`.
|
|
*
|
|
* @type {('xxs' | 'xs' | 's' | 'm' | 'l' | 'xl')}
|
|
* @memberof SvgIcon
|
|
*/
|
|
this.size = 'm';
|
|
}
|
|
componentWillLoad() {
|
|
// get the icon name from the text inside the element if icon name is not defined
|
|
if (!this.iconName) {
|
|
this.iconName = this.hostElement.textContent ? this.hostElement.textContent.trim() : 'info-circle';
|
|
}
|
|
this.updateIconUrl();
|
|
this.handleAppearanceChange();
|
|
}
|
|
handleAppearanceChange() {
|
|
// transform appearance string into an array of options
|
|
const appearances = this.appearance.toLowerCase().split(/\s+/);
|
|
if (!appearances.some(color => {
|
|
if ((SvgIconColorValues).indexOf(color) >= 0) {
|
|
this._color = color;
|
|
return true;
|
|
}
|
|
return false;
|
|
})) {
|
|
this._color = SvgIconColor.tertiary; // default color
|
|
}
|
|
}
|
|
updateIconUrl() {
|
|
this._iconUrl = `${this.pathPrefix}${this.iconSet}${this.multiIconFile ? '.svg#' + this.iconName : '/' + this.iconName + '.svg'}`;
|
|
}
|
|
render() {
|
|
return (h(Host, { class: `
|
|
ti-svg-icon-${this._color}
|
|
ti-svg-icon-size-${this.size}
|
|
${this.circle && 'ti-svg-icon-circle'}
|
|
${this.disabled && 'ti-svg-icon-disabled'}
|
|
` }, this.multiIconFile ? [
|
|
h("svg", { role: "img" }, h("use", { xlinkHref: this._iconUrl })),
|
|
h("span", { style: { 'display': 'none' } }, h("slot", null))
|
|
] : (h("div", { class: "ti-svg-icon-bg", style: { backgroundImage: `url('${this._iconUrl}')` } }, h("span", { style: { 'display': 'none' } }, h("slot", null))))));
|
|
}
|
|
get hostElement() { return getElement(this); }
|
|
static get watchers() { return {
|
|
"appearance": ["handleAppearanceChange"],
|
|
"iconName": ["updateIconUrl"],
|
|
"pathPrefix": ["updateIconUrl"],
|
|
"iconSet": ["updateIconUrl"],
|
|
"multiIconFile": ["updateIconUrl"]
|
|
}; }
|
|
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}"; }
|
|
};
|
|
|
|
export { SvgIcon as ti_svg_icon };
|