ion-icon.cjs.entry.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. const index = require('./index-4b66db81.js');
  4. const utils = require('./utils-b413c9c0.js');
  5. const validateContent = (svgContent) => {
  6. const div = document.createElement('div');
  7. div.innerHTML = svgContent;
  8. // setup this way to ensure it works on our buddy IE
  9. for (let i = div.childNodes.length - 1; i >= 0; i--) {
  10. if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
  11. div.removeChild(div.childNodes[i]);
  12. }
  13. }
  14. // must only have 1 root element
  15. const svgElm = div.firstElementChild;
  16. if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
  17. const svgClass = svgElm.getAttribute('class') || '';
  18. svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
  19. // root element must be an svg
  20. // lets double check we've got valid elements
  21. // do not allow scripts
  22. if (isValid(svgElm)) {
  23. return div.innerHTML;
  24. }
  25. }
  26. return '';
  27. };
  28. const isValid = (elm) => {
  29. if (elm.nodeType === 1) {
  30. if (elm.nodeName.toLowerCase() === 'script') {
  31. return false;
  32. }
  33. for (let i = 0; i < elm.attributes.length; i++) {
  34. const name = elm.attributes[i].name;
  35. if (utils.isStr(name) && name.toLowerCase().indexOf('on') === 0) {
  36. return false;
  37. }
  38. }
  39. for (let i = 0; i < elm.childNodes.length; i++) {
  40. if (!isValid(elm.childNodes[i])) {
  41. return false;
  42. }
  43. }
  44. }
  45. return true;
  46. };
  47. const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
  48. const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;
  49. const ioniconContent = new Map();
  50. const requests = new Map();
  51. let parser;
  52. const getSvgContent = (url, sanitize) => {
  53. // see if we already have a request for this url
  54. let req = requests.get(url);
  55. if (!req) {
  56. if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
  57. /**
  58. * If the url is a data url of an svg, then try to parse it
  59. * with the DOMParser. This works with content security policies enabled.
  60. */
  61. if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
  62. if (!parser) {
  63. /**
  64. * Create an instance of the DOM parser. This creates a single
  65. * parser instance for the entire app, which is more efficient.
  66. */
  67. parser = new DOMParser();
  68. }
  69. const doc = parser.parseFromString(url, 'text/html');
  70. const svg = doc.querySelector('svg');
  71. if (svg) {
  72. ioniconContent.set(url, svg.outerHTML);
  73. }
  74. return Promise.resolve();
  75. }
  76. else {
  77. // we don't already have a request
  78. req = fetch(url).then((rsp) => {
  79. if (rsp.ok) {
  80. return rsp.text().then((svgContent) => {
  81. if (svgContent && sanitize !== false) {
  82. svgContent = validateContent(svgContent);
  83. }
  84. ioniconContent.set(url, svgContent || '');
  85. });
  86. }
  87. ioniconContent.set(url, '');
  88. });
  89. // cache for the same requests
  90. requests.set(url, req);
  91. }
  92. }
  93. else {
  94. // set to empty for ssr scenarios and resolve promise
  95. ioniconContent.set(url, '');
  96. return Promise.resolve();
  97. }
  98. }
  99. return req;
  100. };
  101. const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}@supports (background: -webkit-named-image(i)){:host(.icon-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}}@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])){:host(.icon-rtl) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}}:host(.flip-rtl):host-context([dir='rtl']) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}@supports selector(:dir(rtl)){:host(.flip-rtl:dir(rtl)) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}}:host(.icon-small){font-size:1.125rem !important}:host(.icon-large){font-size:2rem !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
  102. const Icon = class {
  103. constructor(hostRef) {
  104. index.registerInstance(this, hostRef);
  105. this.iconName = null;
  106. this.inheritedAttributes = {};
  107. this.didLoadIcon = false;
  108. this.svgContent = undefined;
  109. this.isVisible = false;
  110. this.mode = getIonMode();
  111. this.color = undefined;
  112. this.ios = undefined;
  113. this.md = undefined;
  114. this.flipRtl = undefined;
  115. this.name = undefined;
  116. this.src = undefined;
  117. this.icon = undefined;
  118. this.size = undefined;
  119. this.lazy = false;
  120. this.sanitize = true;
  121. }
  122. componentWillLoad() {
  123. this.inheritedAttributes = utils.inheritAttributes(this.el, ['aria-label']);
  124. }
  125. connectedCallback() {
  126. // purposely do not return the promise here because loading
  127. // the svg file should not hold up loading the app
  128. // only load the svg if it's visible
  129. this.waitUntilVisible(this.el, '50px', () => {
  130. this.isVisible = true;
  131. this.loadIcon();
  132. });
  133. }
  134. componentDidLoad() {
  135. /**
  136. * Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
  137. * This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
  138. * This modification pertains to the usage of Angular's binding syntax:
  139. * `<ion-icon [name]="myIconName"></ion-icon>`
  140. */
  141. if (!this.didLoadIcon) {
  142. this.loadIcon();
  143. }
  144. }
  145. disconnectedCallback() {
  146. if (this.io) {
  147. this.io.disconnect();
  148. this.io = undefined;
  149. }
  150. }
  151. waitUntilVisible(el, rootMargin, cb) {
  152. if (this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
  153. const io = (this.io = new window.IntersectionObserver((data) => {
  154. if (data[0].isIntersecting) {
  155. io.disconnect();
  156. this.io = undefined;
  157. cb();
  158. }
  159. }, { rootMargin }));
  160. io.observe(el);
  161. }
  162. else {
  163. // browser doesn't support IntersectionObserver
  164. // so just fallback to always show it
  165. cb();
  166. }
  167. }
  168. loadIcon() {
  169. if (this.isVisible) {
  170. const url = utils.getUrl(this);
  171. if (url) {
  172. if (ioniconContent.has(url)) {
  173. // sync if it's already loaded
  174. this.svgContent = ioniconContent.get(url);
  175. }
  176. else {
  177. // async if it hasn't been loaded
  178. getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
  179. }
  180. this.didLoadIcon = true;
  181. }
  182. }
  183. this.iconName = utils.getName(this.name, this.icon, this.mode, this.ios, this.md);
  184. }
  185. render() {
  186. const { flipRtl, iconName, inheritedAttributes, el } = this;
  187. const mode = this.mode || 'md';
  188. // we have designated that arrows & chevrons should automatically flip (unless flip-rtl is set to false) because "back" is left in ltr and right in rtl, and "forward" is the opposite
  189. const shouldAutoFlip = iconName
  190. ? (iconName.includes('arrow') || iconName.includes('chevron')) && flipRtl !== false
  191. : false;
  192. // if shouldBeFlippable is true, the icon should change direction when `dir` changes
  193. const shouldBeFlippable = flipRtl || shouldAutoFlip;
  194. return (index.h(index.Host, Object.assign({ role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': shouldBeFlippable, 'icon-rtl': shouldBeFlippable && utils.isRTL(el) }) }, inheritedAttributes), this.svgContent ? (index.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (index.h("div", { class: "icon-inner" }))));
  195. }
  196. static get assetsDirs() { return ["svg"]; }
  197. get el() { return index.getElement(this); }
  198. static get watchers() { return {
  199. "name": ["loadIcon"],
  200. "src": ["loadIcon"],
  201. "icon": ["loadIcon"],
  202. "ios": ["loadIcon"],
  203. "md": ["loadIcon"]
  204. }; }
  205. };
  206. const getIonMode = () => (typeof document !== 'undefined' && document.documentElement.getAttribute('mode')) || 'md';
  207. const createColorClasses = (color) => {
  208. return color
  209. ? {
  210. 'ion-color': true,
  211. [`ion-color-${color}`]: true,
  212. }
  213. : null;
  214. };
  215. Icon.style = iconCss;
  216. exports.ion_icon = Icon;