Socket
Socket
Sign inDemoInstall

ionicons

Package Overview
Dependencies
1
Maintainers
3
Versions
177
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 7.1.3-dev.11695669134.18369c36 to 7.1.3-dev.11696883183.18297018

components/utils.js

17

components/index.d.ts

@@ -1,3 +0,6 @@

/* ionicons custom elements */
export { Icon as IonIcon } from '../dist/types/components/icon/icon';
/**
* Get the base path to where the assets can be found. Use "setAssetPath(path)"
* if the path needs to be customized.
*/
export declare const getAssetPath: (path: string) => string;

@@ -16,2 +19,11 @@ /**

/**
* Used to specify a nonce value that corresponds with an application's CSP.
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
* Alternatively, the nonce value can be set on a meta tag in the DOM head
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
* will result in the same behavior.
*/
export declare const setNonce: (nonce: string) => void
export interface SetPlatformOptions {

@@ -23,2 +35,1 @@ raf?: (c: FrameRequestCallback) => number;

export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
export * from '../dist/types';

4

components/index.js

@@ -1,2 +0,2 @@

export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
export { IonIcon, a as addIcons, defineCustomElement as defineCustomElementIonIcon } from './ion-icon.js';
export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
export { a as addIcons } from './utils.js';

@@ -1,127 +0,4 @@

import { getAssetPath, proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
import { i as isStr, b as inheritAttributes, g as getUrl, c as getName, d as isRTL } from './utils.js';
let CACHED_MAP;
const getIconMap = () => {
if (typeof window === 'undefined') {
return new Map();
}
else {
if (!CACHED_MAP) {
const win = window;
win.Ionicons = win.Ionicons || {};
CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
}
return CACHED_MAP;
}
};
const addIcons = (icons) => {
const map = getIconMap();
Object.keys(icons).forEach(name => map.set(name, icons[name]));
};
const getUrl = (i) => {
let url = getSrc(i.src);
if (url) {
return url;
}
url = getName(i.name, i.icon, i.mode, i.ios, i.md);
if (url) {
return getNamedUrl(url);
}
if (i.icon) {
url = getSrc(i.icon);
if (url) {
return url;
}
url = getSrc(i.icon[i.mode]);
if (url) {
return url;
}
}
return null;
};
const getNamedUrl = (iconName) => {
const url = getIconMap().get(iconName);
if (url) {
return url;
}
return getAssetPath(`svg/${iconName}.svg`);
};
const getName = (iconName, icon, mode, ios, md) => {
// default to "md" if somehow the mode wasn't set
mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
// if an icon was passed in using the ios or md attributes
// set the iconName to whatever was passed in
if (ios && mode === 'ios') {
iconName = toLower(ios);
}
else if (md && mode === 'md') {
iconName = toLower(md);
}
else {
if (!iconName && icon && !isSrc(icon)) {
iconName = icon;
}
if (isStr(iconName)) {
iconName = toLower(iconName);
}
}
if (!isStr(iconName) || iconName.trim() === '') {
return null;
}
// only allow alpha characters and dash
const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
if (invalidChars !== '') {
return null;
}
return iconName;
};
const getSrc = (src) => {
if (isStr(src)) {
src = src.trim();
if (isSrc(src)) {
return src;
}
}
return null;
};
const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
const isStr = (val) => typeof val === 'string';
const toLower = (val) => val.toLowerCase();
/**
* Elements inside of web components sometimes need to inherit global attributes
* set on the host. For example, the inner input in `ion-input` should inherit
* the `title` attribute that developers set directly on `ion-input`. This
* helper function should be called in componentWillLoad and assigned to a variable
* that is later used in the render function.
*
* This does not need to be reactive as changing attributes on the host element
* does not trigger a re-render.
*/
const inheritAttributes = (el, attributes = []) => {
const attributeObject = {};
attributes.forEach(attr => {
if (el.hasAttribute(attr)) {
const value = el.getAttribute(attr);
if (value !== null) {
attributeObject[attr] = el.getAttribute(attr);
}
el.removeAttribute(attr);
}
});
return attributeObject;
};
/**
* Returns `true` if the document or host element
* has a `dir` set to `rtl`. The host value will always
* take priority over the root document value.
*/
const isRTL = (hostEl) => {
if (hostEl) {
if (hostEl.dir !== '') {
return hostEl.dir.toLowerCase() === 'rtl';
}
}
return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
};
const validateContent = (svgContent) => {

@@ -227,3 +104,3 @@ const div = document.createElement('div');

const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
constructor() {

@@ -235,18 +112,15 @@ super();

this.inheritedAttributes = {};
this.didLoadIcon = false;
this.svgContent = undefined;
this.isVisible = false;
/**
* The mode determines which platform styles to use.
*/
this.mode = getIonMode();
/**
* If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
* Default, `false`.
*/
this.color = undefined;
this.ios = undefined;
this.md = undefined;
this.flipRtl = undefined;
this.name = undefined;
this.src = undefined;
this.icon = undefined;
this.size = undefined;
this.lazy = false;
/**
* When set to `false`, SVG content that is HTTP fetched will not be checked
* if the response SVG content has any `<script>` elements, or any attributes
* that start with `on`, such as `onclick`.
* @default true
*/
this.sanitize = true;

@@ -266,2 +140,13 @@ }

}
componentDidLoad() {
/**
* Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
* This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
* This modification pertains to the usage of Angular's binding syntax:
* `<ion-icon [name]="myIconName"></ion-icon>`
*/
if (!this.didLoadIcon) {
this.loadIcon();
}
}
disconnectedCallback() {

@@ -302,2 +187,3 @@ if (this.io) {

}
this.didLoadIcon = true;
}

@@ -369,2 +255,2 @@ }

export { IonIcon, addIcons as a, defineCustomElement };
export { IonIcon, defineCustomElement };

@@ -5,4 +5,4 @@ 'use strict';

const utils = require('./utils-18c46e61.js');
require('./index-53856ad1.js');
const utils = require('./utils-9a3e2e31.js');
require('./index-b34d10f5.js');

@@ -9,0 +9,0 @@

@@ -5,4 +5,4 @@ 'use strict';

const index = require('./index-53856ad1.js');
const utils = require('./utils-18c46e61.js');
const index = require('./index-b34d10f5.js');
const utils = require('./utils-9a3e2e31.js');

@@ -114,18 +114,15 @@ const validateContent = (svgContent) => {

this.inheritedAttributes = {};
this.didLoadIcon = false;
this.svgContent = undefined;
this.isVisible = false;
/**
* The mode determines which platform styles to use.
*/
this.mode = getIonMode();
/**
* If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
* Default, `false`.
*/
this.color = undefined;
this.ios = undefined;
this.md = undefined;
this.flipRtl = undefined;
this.name = undefined;
this.src = undefined;
this.icon = undefined;
this.size = undefined;
this.lazy = false;
/**
* When set to `false`, SVG content that is HTTP fetched will not be checked
* if the response SVG content has any `<script>` elements, or any attributes
* that start with `on`, such as `onclick`.
* @default true
*/
this.sanitize = true;

@@ -145,2 +142,13 @@ }

}
componentDidLoad() {
/**
* Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
* This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
* This modification pertains to the usage of Angular's binding syntax:
* `<ion-icon [name]="myIconName"></ion-icon>`
*/
if (!this.didLoadIcon) {
this.loadIcon();
}
}
disconnectedCallback() {

@@ -181,2 +189,3 @@ if (this.io) {

}
this.didLoadIcon = true;
}

@@ -183,0 +192,0 @@ }

'use strict';
const index = require('./index-53856ad1.js');
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-b34d10f5.js');
/*
Stencil Client Patch Browser v2.18.0 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Browser v4.1.0 | MIT Licensed | https://stenciljs.com
*/

@@ -20,1 +22,3 @@ const patchBrowser = () => {

});
exports.setNonce = index.setNonce;

@@ -5,18 +5,10 @@ 'use strict';

const index = require('./index-53856ad1.js');
const index = require('./index-b34d10f5.js');
/*
Stencil Client Patch Esm v2.18.0 | MIT Licensed | https://stenciljs.com
*/
const patchEsm = () => {
return index.promiseResolve();
};
const defineCustomElements = (win, options) => {
if (typeof window === 'undefined') return Promise.resolve();
return patchEsm().then(() => {
if (typeof window === 'undefined') return undefined;
return index.bootstrapLazy([["ion-icon.cjs",[[1,"ion-icon",{"mode":[1025],"color":[1],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[513],"src":[1],"icon":[8],"size":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]}]]]], options);
});
};
exports.setNonce = index.setNonce;
exports.defineCustomElements = defineCustomElements;
{
"entries": [
"./components/icon/icon.js"
"components/icon/icon.js"
],
"compiler": {
"name": "@stencil/core",
"version": "2.18.0",
"typescriptVersion": "4.7.4"
"version": "4.1.0",
"typescriptVersion": "5.0.4"
},

@@ -10,0 +10,0 @@ "collections": [],

@@ -1,4 +0,4 @@

import { Build, Host, h } from '@stencil/core';
import { getSvgContent, ioniconContent } from './request';
import { getName, getUrl, inheritAttributes, isRTL } from './utils';
import { Build, Host, h } from "@stencil/core";
import { getSvgContent, ioniconContent } from "./request";
import { getName, getUrl, inheritAttributes, isRTL } from "./utils";
export class Icon {

@@ -8,18 +8,15 @@ constructor() {

this.inheritedAttributes = {};
this.didLoadIcon = false;
this.svgContent = undefined;
this.isVisible = false;
/**
* The mode determines which platform styles to use.
*/
this.mode = getIonMode();
/**
* If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
* Default, `false`.
*/
this.color = undefined;
this.ios = undefined;
this.md = undefined;
this.flipRtl = undefined;
this.name = undefined;
this.src = undefined;
this.icon = undefined;
this.size = undefined;
this.lazy = false;
/**
* When set to `false`, SVG content that is HTTP fetched will not be checked
* if the response SVG content has any `<script>` elements, or any attributes
* that start with `on`, such as `onclick`.
* @default true
*/
this.sanitize = true;

@@ -39,2 +36,13 @@ }

}
componentDidLoad() {
/**
* Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
* This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
* This modification pertains to the usage of Angular's binding syntax:
* `<ion-icon [name]="myIconName"></ion-icon>`
*/
if (!this.didLoadIcon) {
this.loadIcon();
}
}
disconnectedCallback() {

@@ -75,2 +83,3 @@ if (this.io) {

}
this.didLoadIcon = true;
}

@@ -77,0 +86,0 @@ }

@@ -1,2 +0,2 @@

import { isEncodedDataUrl, isSvgDataUrl, validateContent } from './validate';
import { isEncodedDataUrl, isSvgDataUrl, validateContent } from "./validate";
export const ioniconContent = new Map();

@@ -3,0 +3,0 @@ const requests = new Map();

@@ -1,2 +0,2 @@

import { getAssetPath } from '@stencil/core';
import { getAssetPath } from "@stencil/core";
let CACHED_MAP;

@@ -17,4 +17,33 @@ export const getIconMap = () => {

export const addIcons = (icons) => {
Object.keys(icons).forEach(name => {
addToIconMap(name, icons[name]);
/**
* Developers can also pass in the SVG object directly
* and Ionicons can map the object to a kebab case name.
* Example: addIcons({ addCircleOutline });
* This will create an "addCircleOutline" entry and
* an "add-circle-outline" entry.
* Usage: <ion-icon name="add-circle-outline"></ion-icon>
* Using name="addCircleOutline" is valid too, but the
* kebab case naming is preferred.
*/
const toKebabCase = name.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
if (name !== toKebabCase) {
addToIconMap(toKebabCase, icons[name]);
}
});
};
const addToIconMap = (name, data) => {
const map = getIconMap();
Object.keys(icons).forEach(name => map.set(name, icons[name]));
const existingIcon = map.get(name);
if (existingIcon === undefined) {
map.set(name, data);
/**
* Importing and defining the same icon reference
* multiple times should not yield a warning.
*/
}
else if (existingIcon !== data) {
console.warn(`[Ionicons Warning]: Multiple icons were mapped to name "${name}". Ensure that multiple icons are not mapped to the same icon name.`);
}
};

@@ -21,0 +50,0 @@ export const getUrl = (i) => {

@@ -1,2 +0,2 @@

import { isStr } from './utils';
import { isStr } from "./utils";
export const validateContent = (svgContent) => {

@@ -3,0 +3,0 @@ const div = document.createElement('div');

@@ -1,1 +0,1 @@

export{a as addIcons}from"./utils-ccb924b9.js";import"./index-5514a13d.js";
export{a as addIcons}from"./utils-aaa0769a.js";import"./index-c73a3717.js";

@@ -1,1 +0,1 @@

import{r as registerInstance,h,H as Host,a as getElement}from"./index-5514a13d.js";import{i as isStr,b as inheritAttributes,g as getUrl,c as getName,d as isRTL}from"./utils-ccb924b9.js";var validateContent=function(t){var e=document.createElement("div");e.innerHTML=t;for(var o=e.childNodes.length-1;o>=0;o--){if(e.childNodes[o].nodeName.toLowerCase()!=="svg"){e.removeChild(e.childNodes[o])}}var n=e.firstElementChild;if(n&&n.nodeName.toLowerCase()==="svg"){var i=n.getAttribute("class")||"";n.setAttribute("class",(i+" s-ion-icon").trim());if(isValid(n)){return e.innerHTML}}return""};var isValid=function(t){if(t.nodeType===1){if(t.nodeName.toLowerCase()==="script"){return false}for(var e=0;e<t.attributes.length;e++){var o=t.attributes[e].name;if(isStr(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(var e=0;e<t.childNodes.length;e++){if(!isValid(t.childNodes[e])){return false}}}return true};var isSvgDataUrl=function(t){return t.startsWith("data:image/svg+xml")};var isEncodedDataUrl=function(t){return t.indexOf(";utf8,")!==-1};var ioniconContent=new Map;var requests=new Map;var parser;var getSvgContent=function(t,e){var o=requests.get(t);if(!o){if(typeof fetch!=="undefined"&&typeof document!=="undefined"){if(isSvgDataUrl(t)&&isEncodedDataUrl(t)){if(!parser){parser=new DOMParser}var n=parser.parseFromString(t,"text/html");var i=n.querySelector("svg");if(i){ioniconContent.set(t,i.outerHTML)}return Promise.resolve()}else{o=fetch(t).then((function(o){if(o.ok){return o.text().then((function(o){if(o&&e!==false){o=validateContent(o)}ioniconContent.set(t,o||"")}))}ioniconContent.set(t,"")}));requests.set(t,o)}}else{ioniconContent.set(t,"");return Promise.resolve()}}return o};var iconCss=":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;font-size:1rem}: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)}";var Icon=function(){function t(t){registerInstance(this,t);this.iconName=null;this.inheritedAttributes={};this.isVisible=false;this.mode=getIonMode();this.lazy=false;this.sanitize=true}t.prototype.componentWillLoad=function(){this.inheritedAttributes=inheritAttributes(this.el,["aria-label"])};t.prototype.connectedCallback=function(){var t=this;this.waitUntilVisible(this.el,"50px",(function(){t.isVisible=true;t.loadIcon()}))};t.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};t.prototype.waitUntilVisible=function(t,e,o){var n=this;if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){var i=this.io=new window.IntersectionObserver((function(t){if(t[0].isIntersecting){i.disconnect();n.io=undefined;o()}}),{rootMargin:e});i.observe(t)}else{o()}};t.prototype.loadIcon=function(){var t=this;if(this.isVisible){var e=getUrl(this);if(e){if(ioniconContent.has(e)){this.svgContent=ioniconContent.get(e)}else{getSvgContent(e,this.sanitize).then((function(){return t.svgContent=ioniconContent.get(e)}))}}}this.iconName=getName(this.name,this.icon,this.mode,this.ios,this.md)};t.prototype.render=function(){var t,e;var o=this,n=o.flipRtl,i=o.iconName,r=o.inheritedAttributes,s=o.el;var a=this.mode||"md";var c=i?(i.includes("arrow")||i.includes("chevron"))&&n!==false:false;var l=n||c;return h(Host,Object.assign({role:"img",class:Object.assign(Object.assign((t={},t[a]=true,t),createColorClasses(this.color)),(e={},e["icon-".concat(this.size)]=!!this.size,e["flip-rtl"]=l,e["icon-rtl"]=l&&isRTL(s),e))},r),this.svgContent?h("div",{class:"icon-inner",innerHTML:this.svgContent}):h("div",{class:"icon-inner"}))};Object.defineProperty(t,"assetsDirs",{get:function(){return["svg"]},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"],ios:["loadIcon"],md:["loadIcon"]}},enumerable:false,configurable:true});return t}();var getIonMode=function(){return typeof document!=="undefined"&&document.documentElement.getAttribute("mode")||"md"};var createColorClasses=function(t){var e;return t?(e={"ion-color":true},e["ion-color-".concat(t)]=true,e):null};Icon.style=iconCss;export{Icon as ion_icon};
import{r as registerInstance,h,H as Host,a as getElement}from"./index-c73a3717.js";import{i as isStr,b as inheritAttributes,g as getUrl,c as getName,d as isRTL}from"./utils-aaa0769a.js";var validateContent=function(e){var t=document.createElement("div");t.innerHTML=e;for(var o=t.childNodes.length-1;o>=0;o--){if(t.childNodes[o].nodeName.toLowerCase()!=="svg"){t.removeChild(t.childNodes[o])}}var n=t.firstElementChild;if(n&&n.nodeName.toLowerCase()==="svg"){var i=n.getAttribute("class")||"";n.setAttribute("class",(i+" s-ion-icon").trim());if(isValid(n)){return t.innerHTML}}return""};var isValid=function(e){if(e.nodeType===1){if(e.nodeName.toLowerCase()==="script"){return false}for(var t=0;t<e.attributes.length;t++){var o=e.attributes[t].name;if(isStr(o)&&o.toLowerCase().indexOf("on")===0){return false}}for(var t=0;t<e.childNodes.length;t++){if(!isValid(e.childNodes[t])){return false}}}return true};var isSvgDataUrl=function(e){return e.startsWith("data:image/svg+xml")};var isEncodedDataUrl=function(e){return e.indexOf(";utf8,")!==-1};var ioniconContent=new Map;var requests=new Map;var parser;var getSvgContent=function(e,t){var o=requests.get(e);if(!o){if(typeof fetch!=="undefined"&&typeof document!=="undefined"){if(isSvgDataUrl(e)&&isEncodedDataUrl(e)){if(!parser){parser=new DOMParser}var n=parser.parseFromString(e,"text/html");var i=n.querySelector("svg");if(i){ioniconContent.set(e,i.outerHTML)}return Promise.resolve()}else{o=fetch(e).then((function(o){if(o.ok){return o.text().then((function(o){if(o&&t!==false){o=validateContent(o)}ioniconContent.set(e,o||"")}))}ioniconContent.set(e,"")}));requests.set(e,o)}}else{ioniconContent.set(e,"");return Promise.resolve()}}return o};var iconCss=":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;font-size:1rem}: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)}";var Icon=function(){function e(e){registerInstance(this,e);this.iconName=null;this.inheritedAttributes={};this.didLoadIcon=false;this.svgContent=undefined;this.isVisible=false;this.mode=getIonMode();this.color=undefined;this.ios=undefined;this.md=undefined;this.flipRtl=undefined;this.name=undefined;this.src=undefined;this.icon=undefined;this.size=undefined;this.lazy=false;this.sanitize=true}e.prototype.componentWillLoad=function(){this.inheritedAttributes=inheritAttributes(this.el,["aria-label"])};e.prototype.connectedCallback=function(){var e=this;this.waitUntilVisible(this.el,"50px",(function(){e.isVisible=true;e.loadIcon()}))};e.prototype.componentDidLoad=function(){if(!this.didLoadIcon){this.loadIcon()}};e.prototype.disconnectedCallback=function(){if(this.io){this.io.disconnect();this.io=undefined}};e.prototype.waitUntilVisible=function(e,t,o){var n=this;if(this.lazy&&typeof window!=="undefined"&&window.IntersectionObserver){var i=this.io=new window.IntersectionObserver((function(e){if(e[0].isIntersecting){i.disconnect();n.io=undefined;o()}}),{rootMargin:t});i.observe(e)}else{o()}};e.prototype.loadIcon=function(){var e=this;if(this.isVisible){var t=getUrl(this);if(t){if(ioniconContent.has(t)){this.svgContent=ioniconContent.get(t)}else{getSvgContent(t,this.sanitize).then((function(){return e.svgContent=ioniconContent.get(t)}))}this.didLoadIcon=true}}this.iconName=getName(this.name,this.icon,this.mode,this.ios,this.md)};e.prototype.render=function(){var e,t;var o=this,n=o.flipRtl,i=o.iconName,r=o.inheritedAttributes,s=o.el;var a=this.mode||"md";var c=i?(i.includes("arrow")||i.includes("chevron"))&&n!==false:false;var l=n||c;return h(Host,Object.assign({role:"img",class:Object.assign(Object.assign((e={},e[a]=true,e),createColorClasses(this.color)),(t={},t["icon-".concat(this.size)]=!!this.size,t["flip-rtl"]=l,t["icon-rtl"]=l&&isRTL(s),t))},r),this.svgContent?h("div",{class:"icon-inner",innerHTML:this.svgContent}):h("div",{class:"icon-inner"}))};Object.defineProperty(e,"assetsDirs",{get:function(){return["svg"]},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{name:["loadIcon"],src:["loadIcon"],icon:["loadIcon"],ios:["loadIcon"],md:["loadIcon"]}},enumerable:false,configurable:true});return e}();var getIonMode=function(){return typeof document!=="undefined"&&document.documentElement.getAttribute("mode")||"md"};var createColorClasses=function(e){var t;return e?(t={"ion-color":true},t["ion-color-".concat(e)]=true,t):null};Icon.style=iconCss;export{Icon as ion_icon};

@@ -1,1 +0,1 @@

import{p as promiseResolve,b as bootstrapLazy}from"./index-5514a13d.js";var patchBrowser=function(){var o=import.meta.url;var r={};if(o!==""){r.resourcesUrl=new URL(".",o).href}return promiseResolve(r)};patchBrowser().then((function(o){return bootstrapLazy([["ion-icon",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32]}]]]],o)}));
import{p as promiseResolve,b as bootstrapLazy}from"./index-c73a3717.js";export{s as setNonce}from"./index-c73a3717.js";var patchBrowser=function(){var o=import.meta.url;var r={};if(o!==""){r.resourcesUrl=new URL(".",o).href}return promiseResolve(r)};patchBrowser().then((function(o){return bootstrapLazy([["ion-icon",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32]}]]]],o)}));

@@ -1,1 +0,1 @@

import{p as promiseResolve,b as bootstrapLazy}from"./index-5514a13d.js";var patchEsm=function(){return promiseResolve()};var defineCustomElements=function(e,o){if(typeof window==="undefined")return Promise.resolve();return patchEsm().then((function(){return bootstrapLazy([["ion-icon",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32]}]]]],o)}))};export{defineCustomElements};
import{b as bootstrapLazy}from"./index-c73a3717.js";export{s as setNonce}from"./index-c73a3717.js";var defineCustomElements=function(e,n){if(typeof window==="undefined")return undefined;return bootstrapLazy([["ion-icon",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32]}]]]],n)};export{defineCustomElements};

@@ -1,2 +0,2 @@

export { a as addIcons } from './utils-ccb924b9.js';
import './index-5514a13d.js';
export { a as addIcons } from './utils-aaa0769a.js';
import './index-c73a3717.js';

@@ -1,3 +0,3 @@

import { r as registerInstance, h, H as Host, a as getElement } from './index-5514a13d.js';
import { i as isStr, b as inheritAttributes, g as getUrl, c as getName, d as isRTL } from './utils-ccb924b9.js';
import { r as registerInstance, h, H as Host, a as getElement } from './index-c73a3717.js';
import { i as isStr, b as inheritAttributes, g as getUrl, c as getName, d as isRTL } from './utils-aaa0769a.js';

@@ -109,18 +109,15 @@ const validateContent = (svgContent) => {

this.inheritedAttributes = {};
this.didLoadIcon = false;
this.svgContent = undefined;
this.isVisible = false;
/**
* The mode determines which platform styles to use.
*/
this.mode = getIonMode();
/**
* If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
* Default, `false`.
*/
this.color = undefined;
this.ios = undefined;
this.md = undefined;
this.flipRtl = undefined;
this.name = undefined;
this.src = undefined;
this.icon = undefined;
this.size = undefined;
this.lazy = false;
/**
* When set to `false`, SVG content that is HTTP fetched will not be checked
* if the response SVG content has any `<script>` elements, or any attributes
* that start with `on`, such as `onclick`.
* @default true
*/
this.sanitize = true;

@@ -140,2 +137,13 @@ }

}
componentDidLoad() {
/**
* Addresses an Angular issue where property values are assigned after the 'connectedCallback' but prior to the registration of watchers.
* This enhancement ensures the loading of an icon when the component has finished rendering and the icon has yet to apply the SVG data.
* This modification pertains to the usage of Angular's binding syntax:
* `<ion-icon [name]="myIconName"></ion-icon>`
*/
if (!this.didLoadIcon) {
this.loadIcon();
}
}
disconnectedCallback() {

@@ -176,2 +184,3 @@ if (this.io) {

}
this.didLoadIcon = true;
}

@@ -178,0 +187,0 @@ }

@@ -1,5 +0,6 @@

import { p as promiseResolve, b as bootstrapLazy } from './index-5514a13d.js';
import { p as promiseResolve, b as bootstrapLazy } from './index-c73a3717.js';
export { s as setNonce } from './index-c73a3717.js';
/*
Stencil Client Patch Browser v2.18.0 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Browser v4.1.0 | MIT Licensed | https://stenciljs.com
*/

@@ -6,0 +7,0 @@ const patchBrowser = () => {

@@ -1,17 +0,9 @@

import { p as promiseResolve, b as bootstrapLazy } from './index-5514a13d.js';
import { b as bootstrapLazy } from './index-c73a3717.js';
export { s as setNonce } from './index-c73a3717.js';
/*
Stencil Client Patch Esm v2.18.0 | MIT Licensed | https://stenciljs.com
*/
const patchEsm = () => {
return promiseResolve();
};
const defineCustomElements = (win, options) => {
if (typeof window === 'undefined') return Promise.resolve();
return patchEsm().then(() => {
if (typeof window === 'undefined') return undefined;
return bootstrapLazy([["ion-icon",[[1,"ion-icon",{"mode":[1025],"color":[1],"ios":[1],"md":[1],"flipRtl":[4,"flip-rtl"],"name":[513],"src":[1],"icon":[8],"size":[1],"lazy":[4],"sanitize":[4],"svgContent":[32],"isVisible":[32]}]]]], options);
});
};
export { defineCustomElements };

@@ -1,1 +0,1 @@

export{a as addIcons}from"./p-40ae2aa7.js";import"./p-d15ec307.js";
export{a as addIcons}from"./p-485fbb5e.js";import"./p-c20d7e9f.js";

@@ -1,1 +0,1 @@

import{p as i,b as o}from"./p-d15ec307.js";(()=>{const o=import.meta.url,e={};return""!==o&&(e.resourcesUrl=new URL(".",o).href),i(e)})().then((i=>o([["p-e5001feb",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32]}]]]],i)));
import{p as o,b as e}from"./p-c20d7e9f.js";export{s as setNonce}from"./p-c20d7e9f.js";(()=>{const s=import.meta.url,e={};return""!==s&&(e.resourcesUrl=new URL(".",s).href),o(e)})().then((o=>e([["p-31c831f6",[[1,"ion-icon",{mode:[1025],color:[1],ios:[1],md:[1],flipRtl:[4,"flip-rtl"],name:[513],src:[1],icon:[8],size:[1],lazy:[4],sanitize:[4],svgContent:[32],isVisible:[32]}]]]],o)));

@@ -11,3 +11,12 @@ export * from '../types/components';

}
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
export declare function applyPolyfills(): Promise<void>;
/**
* Used to specify a nonce value that corresponds with an application's CSP.
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
* Alternatively, the nonce value can be set on a meta tag in the DOM head
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
* will result in the same behavior.
*/
export declare function setNonce(nonce: string): void;

@@ -5,2 +5,3 @@ export declare class Icon {

private inheritedAttributes;
private didLoadIcon;
el: HTMLElement;

@@ -62,2 +63,3 @@ private svgContent?;

connectedCallback(): void;
componentDidLoad(): void;
disconnectedCallback(): void;

@@ -64,0 +66,0 @@ private waitUntilVisible;

@@ -136,3 +136,3 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;

}
export declare type ListenTargetOptions = 'body' | 'document' | 'window';
export type ListenTargetOptions = 'body' | 'document' | 'window';
export interface StateDecorator {

@@ -218,4 +218,4 @@ (): PropertyDecorator;

export declare const Watch: WatchDecorator;
export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
export type ErrorHandler = (err: any, element?: HTMLElement) => void;
/**

@@ -226,3 +226,5 @@ * `setMode()` is used for libraries which provide multiple "modes" for styles.

/**
* getMode
* `getMode()` is used for libraries which provide multiple "modes" for styles.
* @param ref a reference to the node to get styles for
* @returns the current mode or undefined, if not found
*/

@@ -240,2 +242,5 @@ export declare function getMode<T = string | undefined>(ref: any): T;

* if the path needs to be customized.
* @param path the path to use in calculating the asset path. this value will be
* used in conjunction with the base asset path
* @returns the base path
*/

@@ -253,9 +258,22 @@ export declare function getAssetPath(path: string): string;

* But do note that this configuration depends on how your script is bundled, or lack of
* bunding, and where your assets can be loaded from. Additionally custom bundling
* bundling, and where your assets can be loaded from. Additionally custom bundling
* will have to ensure the static assets are copied to its build directory.
* @param path the asset path to set
* @returns the set path
*/
export declare function setAssetPath(path: string): string;
/**
* getElement
* Used to specify a nonce value that corresponds with an application's
* [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
* Alternatively, the nonce value can be set on a `meta` tag in the DOM head
* (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
* @param nonce The value to be used for the nonce attribute.
*/
export declare function setNonce(nonce: string): void;
/**
* Retrieve a Stencil element for a given reference
* @param ref the ref to get the Stencil element for
* @returns a reference to the element
*/
export declare function getElement(ref: any): HTMLStencilElement;

@@ -265,3 +283,5 @@ /**

*
* Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
* Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
*
* @param ref the node/element to force the re-render of
*/

@@ -271,2 +291,3 @@ export declare function forceUpdate(ref: any): void;

* getRenderingRef
* @returns the rendering ref
*/

@@ -282,2 +303,4 @@ export declare function getRenderingRef(): any;

* For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
*
* @param task the DOM-write to schedule
*/

@@ -290,2 +313,4 @@ export declare function writeTask(task: RafCallback): void;

* For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
*
* @param task the DOM-read to schedule
*/

@@ -419,3 +444,3 @@ export declare function readTask(task: RafCallback): void;

*/
interface HostAttributes {
export interface HostAttributes {
class?: string | {

@@ -430,4 +455,40 @@ [className: string]: boolean;

}
/**
* Utilities for working with functional Stencil components. An object
* conforming to this interface is passed by the Stencil runtime as the third
* argument to a functional component, allowing component authors to work with
* features like children.
*
* The children of a functional component will be passed as the second
* argument, so a functional component which uses these utils to transform its
* children might look like the following:
*
* ```ts
* export const AddClass: FunctionalComponent = (_, children, utils) => (
* utils.map(children, child => ({
* ...child,
* vattrs: {
* ...child.vattrs,
* class: `${child.vattrs.class} add-class`
* }
* }))
* );
* ```
*
* For more see the Stencil documentation, here:
* https://stenciljs.com/docs/functional-components
*/
export interface FunctionalUtilities {
/**
* Utility for reading the children of a functional component at runtime.
* Since the Stencil runtime uses a different interface for children it is
* not recommendeded to read the children directly, and is preferable to use
* this utility to, for instance, perform a side effect for each child.
*/
forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
/**
* Utility for transforming the children of a functional component. Given an
* array of children and a callback this will return a list of the results of
* passing each child to the supplied callback.
*/
map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];

@@ -438,2 +499,10 @@ }

}
/**
* A Child VDOM node
*
* This has most of the same properties as {@link VNode} but friendlier names
* (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
* order to provide a friendlier public interface for users of the
* {@link FunctionalUtilities}).
*/
export interface ChildNode {

@@ -485,2 +554,5 @@ vtag?: string | number | Function;

export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
/**
* A virtual DOM node
*/
export interface VNode {

@@ -756,2 +828,3 @@ $flags$: number;

interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
onCancel?: (event: Event) => void;
onClose?: (event: Event) => void;

@@ -816,2 +889,4 @@ open?: boolean;

alt?: string;
crossOrigin?: string;
crossorigin?: string;
decoding?: 'async' | 'auto' | 'sync';

@@ -838,4 +913,4 @@ importance?: 'low' | 'auto' | 'high';

alt?: string;
autoCapitalize?: any;
autocapitalize?: any;
autoCapitalize?: string;
autocapitalize?: string;
autoComplete?: string;

@@ -876,2 +951,4 @@ autocomplete?: string;

name?: string;
onSelect?: (event: Event) => void;
onselect?: (event: Event) => void;
pattern?: string;

@@ -1078,2 +1155,4 @@ placeholder?: string;

interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
autoComplete?: string;
autocomplete?: string;
autoFocus?: boolean;

@@ -1089,2 +1168,4 @@ autofocus?: boolean | string;

name?: string;
onSelect?: (event: Event) => void;
onselect?: (event: Event) => void;
placeholder?: string;

@@ -1167,4 +1248,4 @@ readOnly?: boolean;

vocab?: string;
autoCapitalize?: any;
autocapitalize?: any;
autoCapitalize?: string;
autocapitalize?: string;
autoCorrect?: string;

@@ -1237,3 +1318,3 @@ autocorrect?: string;

'color-interpolation'?: number | string;
'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
'color-profile'?: number | string;

@@ -1461,8 +1542,8 @@ 'color-rendering'?: number | string;

onPasteCapture?: (event: ClipboardEvent) => void;
onCompositionEnd?: (event: CompositionEvent) => void;
onCompositionEndCapture?: (event: CompositionEvent) => void;
onCompositionStart?: (event: CompositionEvent) => void;
onCompositionStartCapture?: (event: CompositionEvent) => void;
onCompositionUpdate?: (event: CompositionEvent) => void;
onCompositionUpdateCapture?: (event: CompositionEvent) => void;
onCompositionend?: (event: CompositionEvent) => void;
onCompositionendCapture?: (event: CompositionEvent) => void;
onCompositionstart?: (event: CompositionEvent) => void;
onCompositionstartCapture?: (event: CompositionEvent) => void;
onCompositionupdate?: (event: CompositionEvent) => void;
onCompositionupdateCapture?: (event: CompositionEvent) => void;
onFocus?: (event: FocusEvent) => void;

@@ -1478,4 +1559,4 @@ onFocusCapture?: (event: FocusEvent) => void;

onChangeCapture?: (event: Event) => void;
onInput?: (event: Event) => void;
onInputCapture?: (event: Event) => void;
onInput?: (event: InputEvent) => void;
onInputCapture?: (event: InputEvent) => void;
onReset?: (event: Event) => void;

@@ -1570,4 +1651,10 @@ onResetCapture?: (event: Event) => void;

onAnimationIterationCapture?: (event: AnimationEvent) => void;
onTransitionCancel?: (event: TransitionEvent) => void;
onTransitionCancelCapture?: (event: TransitionEvent) => void;
onTransitionEnd?: (event: TransitionEvent) => void;
onTransitionEndCapture?: (event: TransitionEvent) => void;
onTransitionRun?: (event: TransitionEvent) => void;
onTransitionRunCapture?: (event: TransitionEvent) => void;
onTransitionStart?: (event: TransitionEvent) => void;
onTransitionStartCapture?: (event: TransitionEvent) => void;
}

@@ -1574,0 +1661,0 @@ }

@@ -1,2 +0,2 @@

/* Ionicons v7.1.3-dev.11695669134.18369c36, Types */
/* Ionicons v7.1.3-dev.11696883183.18297018, Types */

@@ -3,0 +3,0 @@ export declare var accessibility: string;

{
"name": "ionicons/icons",
"version": "7.1.3-dev.11695669134.18369c36",
"version": "7.1.3-dev.11696883183.18297018",
"module": "index.mjs",

@@ -5,0 +5,0 @@ "main": "index.js",

{
"name": "ionicons",
"version": "7.1.3-dev.11695669134.18369c36",
"version": "7.1.3-dev.11696883183.18297018",
"description": "Premium icons for Ionic.",

@@ -26,3 +26,3 @@ "files": [

"dependencies": {
"@stencil/core": "^2.18.0"
"@stencil/core": "^4.0.3"
},

@@ -29,0 +29,0 @@ "devDependencies": {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc