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 displ
|
||
|
|
};
|
||
|
|
|
||
|
|
export { SvgIcon as ti_svg_icon };
|