@patternfly/pfe-icon - npm Package Compare versions

Comparing version 2.0.0-next.1 to 2.0.0-next.2

custom-elements.json

@@ -141,2 +141,12 @@ {
               "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "ColorTheme | undefined"
+              },
+              "description": "Sets color theme based on parent context",
+              "attribute": "on",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "_iconHref",
@@ -244,2 +254,10 @@ "type": {
               "fieldName": "block"
+            },
+            {
+              "name": "on",
+              "type": {
+                "text": "ColorTheme | undefined"
+              },
+              "description": "Sets color theme based on parent context",
+              "fieldName": "on"
             }
@@ -246,0 +264,0 @@ ],

package.json

 {
   "name": "@patternfly/pfe-icon",
   "license": "MIT",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.2",
   "description": "Icon element for PatternFly Elements",
@@ -70,5 +70,5 @@ "customElements": "custom-elements.json",
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0-next.3",
+    "@patternfly/pfe-core": "^2.0.0-next.4",
     "lit": "^2.1.2"
   }
 }

pfe-icon.d.ts

 import type { IconNameResolverFn } from './icon-set.js';
 import { LitElement } from 'lit';
 import { PfeIconSet } from './icon-set.js';
+import { ColorTheme } from '@patternfly/pfe-core';
 export declare type IconColor = ('accent' | 'base' | 'complement' | 'critical' | 'darker' | 'darkest' | 'important' | 'info' | 'lightest' | 'moderate' | 'success');
@@ -57,2 +58,6 @@ /**
     block: boolean;
+    /**
+     * Sets color theme based on parent context
+     */
+    on?: ColorTheme;
     private _iconHref;
@@ -59,0 +64,0 @@ private _filterId?;

pfe-icon.js

@@ -1,2 +0,2 @@
-var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var c=(f,e,t,a)=>{for(var r=a>1?void 0:a?g(e,t):e,i=f.length-1,n;i>=0;i--)(n=f[i])&&(r=(a?n(e,t,r):n(r))||r);return a&&r&&m(e,t,r),r};import{LitElement as b,html as x,svg as C}from"lit";import{customElement as z,property as l,query as B,state as h}from"lit/decorators.js";import{styleMap as w}from"lit/directives/style-map.js";import{pfelement as F,bound as s,observed as y}from"@patternfly/pfe-core/decorators.js";import{getRandomId as S}from"@patternfly/pfe-core/functions/random.js";import{Logger as v}from"@patternfly/pfe-core/controllers/logger.js";import{PfeIconSet as _}from"./icon-set.js";import{addBuiltIns as L}from"./builtin-icon-sets.js";import{css as u}from"lit";var k=u`:host{--context:var(--pfe-icon--context, light);position:relative;display:inline-block;box-sizing:content-box!important;width:fit-content!important;height:fit-content!important;line-height:0;max-width:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em));max-height:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em))}:host svg{width:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em));height:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em))}:host([block]){display:block;margin-bottom:var(--pfe-icon--spacing,var(--pfe-theme--container-spacer,1rem));margin-top:var(--pfe-icon--spacing,var(--pfe-theme--container-spacer,1rem))}:host([block]):first-child{margin-top:0}:host(:not(.load-failed)){vertical-align:middle;border-radius:50%;background-color:var(--pfe-icon--BackgroundColor,transparent);border:var(--pfe-icon--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,transparent));padding:var(--pfe-icon--Padding,0)}:host(:not(.load-failed)) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-broadcasted--text,#3c3f42)))}:host(:not(.load-failed)) .pfe-icon--fallback{display:none}:host([size="2x"]){max-width:var(--pfe-icon--size,2em);max-height:var(--pfe-icon--size,2em)}:host([size="2x"]) svg{width:var(--pfe-icon--size,2em);height:var(--pfe-icon--size,2em)}:host([size="3x"]){max-width:var(--pfe-icon--size,3em);max-height:var(--pfe-icon--size,3em)}:host([size="3x"]) svg{width:var(--pfe-icon--size,3em);height:var(--pfe-icon--size,3em)}:host([size="4x"]){max-width:var(--pfe-icon--size,4em);max-height:var(--pfe-icon--size,4em)}:host([size="4x"]) svg{width:var(--pfe-icon--size,4em);height:var(--pfe-icon--size,4em)}:host([size=xl]){max-width:var(--pfe-icon--size,100px);max-height:var(--pfe-icon--size,100px)}:host([size=xl]) svg{width:var(--pfe-icon--size,100px);height:var(--pfe-icon--size,100px)}:host([size=lg]){max-width:var(--pfe-icon--size,64px);max-height:var(--pfe-icon--size,64px)}:host([size=lg]) svg{width:var(--pfe-icon--size,64px);height:var(--pfe-icon--size,64px)}:host([size=md]){max-width:var(--pfe-icon--size,32px);max-height:var(--pfe-icon--size,32px)}:host([size=md]) svg{width:var(--pfe-icon--size,32px);height:var(--pfe-icon--size,32px)}:host([size=sm]){max-width:var(--pfe-icon--size,14px);max-height:var(--pfe-icon--size,14px)}:host([size=sm]) svg{width:var(--pfe-icon--size,14px);height:var(--pfe-icon--size,14px)}:host([circled]:not([circled=false])){padding:var(--pfe-icon--Padding,.5em);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--border,#d2d2d2)))}:host([color=critical]:not([circled])) filter feFlood,:host([color=critical][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--critical,#a30000)))}:host([color=critical][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--critical,#a30000));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--critical,#a30000)));--pfe-icon--context:dark}:host([color=important]:not([circled])) filter feFlood,:host([color=important][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--important,#c9190b)))}:host([color=important][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--important,#c9190b));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--important,#c9190b)));--pfe-icon--context:dark}:host([color=moderate]:not([circled])) filter feFlood,:host([color=moderate][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--moderate,#f0ab00)))}:host([color=moderate][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--moderate,#f0ab00));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--moderate,#f0ab00)))}:host([color=success]:not([circled])) filter feFlood,:host([color=success][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--success,#3e8635)))}:host([color=success][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--success,#3e8635));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--success,#3e8635)));--pfe-icon--context:dark}:host([color=info]:not([circled])) filter feFlood,:host([color=info][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--info,#06c)))}:host([color=info][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--info,#06c));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--info,#06c)));--pfe-icon--context:dark}:host([color=default]:not([circled])) filter feFlood,:host([color=default][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--default,#4f5255)))}:host([color=default][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--default,#4f5255));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--default,#4f5255)));--pfe-icon--context:dark}:host([color=lightest]:not([circled])) filter feFlood,:host([color=lightest][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--lightest,#fff)))}:host([color=lightest][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--lightest--context, light);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff)))}:host([color=base]:not([circled])) filter feFlood,:host([color=base][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--base,#f0f0f0)))}:host([color=base][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--base--context, light);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0)))}:host([color=darker]:not([circled])) filter feFlood,:host([color=darker][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--darker,#3c3f42)))}:host([color=darker][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--darker--context, dark);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darker,#3c3f42));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darker,#3c3f42)))}:host([color=darkest]:not([circled])) filter feFlood,:host([color=darkest][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--darkest,#151515)))}:host([color=darkest][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--darkest--context, dark);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darkest,#151515));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darkest,#151515)))}:host([color=complement]:not([circled])) filter feFlood,:host([color=complement][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--complement,#002952)))}:host([color=complement][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--complement--context, saturated);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--complement,#002952));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--complement,#002952)))}:host([color=accent]:not([circled])) filter feFlood,:host([color=accent][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--accent,#004080)))}:host([color=accent][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--accent--context, saturated);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--accent,#004080));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--accent,#004080)))}:host(.load-failed) svg image,:host(.load-failed.has-fallback) svg,:host(.load-failed[on-fail=collapse]) svg{display:none}:host(.load-failed[on-fail=collapse]){max-width:var(--pfe-icon--size,0);max-height:var(--pfe-icon--size,0)}:host(.load-failed[on-fail=collapse]) svg{width:var(--pfe-icon--size,0);height:var(--pfe-icon--size,0)}`,p=k;var d=new Set;function E(f){window.PfeConfig??(window.PfeConfig={}),L({PfeIcon:f,config:window.PfeConfig}),document.body.addEventListener("pfe-icon:add-icon-set",()=>{for(let e of d)e.updateIcon()})}var o=class extends b{constructor(){super(...arguments);this.icon="";this.size="xl";this.circled=!1;this.block=!1;this._iconHref=""}static getIconSet(e){e??(e="");let[t]=e.split("-");return{set:this._iconSets.get(t)}}static addIconSet(e,t,a){let r=a,i=this._iconSets.get(e);if(!r&&i&&typeof i?.resolver=="function")r=i.resolver;else{if(r&&typeof r!="function")return v.warn("[pfe-icon]: The third input to addIconSet should be a function that parses and returns the icon's filename.");if(!r)return v.warn(`[pfe-icon]: The set ${e} needs a resolve function for the icon names.`)}this._iconSets.set(e,new _(e,t,r)),document.body.dispatchEvent(new CustomEvent("pfe-icon:add-icon-set",{bubbles:!1,detail:{set:this._iconSets.get(e)}}))}get upgraded(){return this.image?.hasAttribute("href")??!1}connectedCallback(){super.connectedCallback(),d.add(this)}render(){return x`<div class="pfe-icon--fallback"><slot></slot></div>${C`<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><filter id="${this._filterId}" color-interpolation-filters="sRGB" x="0" y="0" height="100%" width="100%"><feFlood result="COLOR"/><feComposite operator="in" in="COLOR" in2="SourceAlpha"/></filter><image href="${this._iconHref}" width="100%" height="100%" @load="${this._iconLoad}" @error="${this._iconLoadError}" style="${w({filter:this._filterId&&`url(#${this._filterId})`})}"></image></svg>`}`}disconnectedCallback(){super.disconnectedCallback(),d.delete(this)}_iconLoad(){this.classList.remove("load-failed")}_iconLoadError(){this.classList.add("load-failed"),this.classList.toggle("has-fallback",!!(this.children.length||this.textContent?.trim().length))}_iconChanged(){this.updateIcon()}updateIcon(){let{set:e}=o.getIconSet(this.icon);e&&(this._iconHref=e.resolveIconName(this.icon),this._filterId=S("filter"))}};o.version="{{version}}",o.styles=[p],o._iconSets=new Map,c([y,l({type:String,reflect:!0})],o.prototype,"icon",2),c([l({type:String,reflect:!0})],o.prototype,"size",2),c([l({type:String,reflect:!0})],o.prototype,"color",2),c([l({type:String,reflect:!0,attribute:"on-fail"})],o.prototype,"onFail",2),c([l({type:Boolean,reflect:!0})],o.prototype,"circled",2),c([l({type:Boolean,reflect:!0})],o.prototype,"block",2),c([h()],o.prototype,"_iconHref",2),c([h()],o.prototype,"_filterId",2),c([B("svg image")],o.prototype,"image",2),c([s],o.prototype,"_iconLoad",1),c([s],o.prototype,"_iconLoadError",1),c([s],o.prototype,"updateIcon",1),o=c([z("pfe-icon"),E,F()],o);export{o as PfeIcon};
+var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(n,l,e,i)=>{for(var t=i>1?void 0:i?g(l,e):l,c=n.length-1,a;c>=0;c--)(a=n[c])&&(t=(i?a(l,e,t):a(t))||t);return i&&t&&m(l,e,t),t};import{LitElement as b,html as x,svg as C}from"lit";import{customElement as z,property as f,query as B,state as h}from"lit/decorators.js";import{styleMap as w}from"lit/directives/style-map.js";import{pfelement as F,bound as s,observed as y,colorContextConsumer as S}from"@patternfly/pfe-core/decorators.js";import{getRandomId as _}from"@patternfly/pfe-core/functions/random.js";import{Logger as v}from"@patternfly/pfe-core/controllers/logger.js";import{PfeIconSet as L}from"./icon-set.js";import{addBuiltIns as E}from"./builtin-icon-sets.js";import{css as u}from"lit";var k=u`:host{--context:var(--pfe-icon--context, light);position:relative;display:inline-block;box-sizing:content-box!important;width:fit-content!important;height:fit-content!important;line-height:0;max-width:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em));max-height:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em))}:host svg{width:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em));height:var(--pfe-icon--size,var(--pfe-theme--icon-size,1em))}:host([block]){display:block;margin-bottom:var(--pfe-icon--spacing,var(--pfe-theme--container-spacer,1rem));margin-top:var(--pfe-icon--spacing,var(--pfe-theme--container-spacer,1rem))}:host([block]):first-child{margin-top:0}:host(:not(.load-failed)){vertical-align:middle;border-radius:50%;background-color:var(--pfe-icon--BackgroundColor,transparent);border:var(--pfe-icon--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,transparent));padding:var(--pfe-icon--Padding,0)}:host(:not(.load-failed)) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-broadcasted--text,#3c3f42)))}:host(:not(.load-failed)) .pfe-icon--fallback{display:none}:host([size="2x"]){max-width:var(--pfe-icon--size,2em);max-height:var(--pfe-icon--size,2em)}:host([size="2x"]) svg{width:var(--pfe-icon--size,2em);height:var(--pfe-icon--size,2em)}:host([size="3x"]){max-width:var(--pfe-icon--size,3em);max-height:var(--pfe-icon--size,3em)}:host([size="3x"]) svg{width:var(--pfe-icon--size,3em);height:var(--pfe-icon--size,3em)}:host([size="4x"]){max-width:var(--pfe-icon--size,4em);max-height:var(--pfe-icon--size,4em)}:host([size="4x"]) svg{width:var(--pfe-icon--size,4em);height:var(--pfe-icon--size,4em)}:host([size=xl]){max-width:var(--pfe-icon--size,100px);max-height:var(--pfe-icon--size,100px)}:host([size=xl]) svg{width:var(--pfe-icon--size,100px);height:var(--pfe-icon--size,100px)}:host([size=lg]){max-width:var(--pfe-icon--size,64px);max-height:var(--pfe-icon--size,64px)}:host([size=lg]) svg{width:var(--pfe-icon--size,64px);height:var(--pfe-icon--size,64px)}:host([size=md]){max-width:var(--pfe-icon--size,32px);max-height:var(--pfe-icon--size,32px)}:host([size=md]) svg{width:var(--pfe-icon--size,32px);height:var(--pfe-icon--size,32px)}:host([size=sm]){max-width:var(--pfe-icon--size,14px);max-height:var(--pfe-icon--size,14px)}:host([size=sm]) svg{width:var(--pfe-icon--size,14px);height:var(--pfe-icon--size,14px)}:host([circled]:not([circled=false])){padding:var(--pfe-icon--Padding,.5em);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--border,#d2d2d2)))}:host([color=critical]:not([circled])) filter feFlood,:host([color=critical][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--critical,#a30000)))}:host([color=critical][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--critical,#a30000));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--critical,#a30000)));--pfe-icon--context:dark}:host([color=important]:not([circled])) filter feFlood,:host([color=important][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--important,#c9190b)))}:host([color=important][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--important,#c9190b));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--important,#c9190b)));--pfe-icon--context:dark}:host([color=moderate]:not([circled])) filter feFlood,:host([color=moderate][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--moderate,#f0ab00)))}:host([color=moderate][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--moderate,#f0ab00));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--moderate,#f0ab00)))}:host([color=success]:not([circled])) filter feFlood,:host([color=success][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--success,#3e8635)))}:host([color=success][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--success,#3e8635));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--success,#3e8635)));--pfe-icon--context:dark}:host([color=info]:not([circled])) filter feFlood,:host([color=info][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--info,#06c)))}:host([color=info][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--info,#06c));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--info,#06c)));--pfe-icon--context:dark}:host([color=default]:not([circled])) filter feFlood,:host([color=default][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--feedback--default,#4f5255)))}:host([color=default][circled]:not([circled=false])){background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--default,#4f5255));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--feedback--default,#4f5255)));--pfe-icon--context:dark}:host([color=lightest]:not([circled])) filter feFlood,:host([color=lightest][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--lightest,#fff)))}:host([color=lightest][circled]){--pfe-icon--color:white}:host([color=lightest][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--lightest--context, light);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff)))}:host([color=base]:not([circled])) filter feFlood,:host([color=base][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--base,#f0f0f0)))}:host([color=base][circled]){--pfe-icon--color:white}:host([color=base][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--base--context, light);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--base,#f0f0f0)))}:host([color=darker]:not([circled])) filter feFlood,:host([color=darker][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--darker,#3c3f42)))}:host([color=darker][circled]){--pfe-icon--color:white}:host([color=darker][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--darker--context, dark);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darker,#3c3f42));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darker,#3c3f42)))}:host([color=darkest]:not([circled])) filter feFlood,:host([color=darkest][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--darkest,#151515)))}:host([color=darkest][circled]){--pfe-icon--color:white}:host([color=darkest][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--darkest--context, dark);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darkest,#151515));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--darkest,#151515)))}:host([color=complement]:not([circled])) filter feFlood,:host([color=complement][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--complement,#002952)))}:host([color=complement][circled]){--pfe-icon--color:white}:host([color=complement][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--complement--context, saturated);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--complement,#002952));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--complement,#002952)))}:host([color=accent]:not([circled])) filter feFlood,:host([color=accent][circled=false]) filter feFlood{flood-color:var(--pfe-icon--color,var(--pfe-icon--Color,var(--pfe-theme--color--surface--accent,#004080)))}:host([color=accent][circled]){--pfe-icon--color:white}:host([color=accent][circled]:not([circled=false])){--pfe-icon--context:var(--pfe-theme--color--surface--accent--context, saturated);background-color:var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--accent,#004080));border-color:var(--pfe-icon--BorderColor,var(--pfe-icon--BackgroundColor,var(--pfe-theme--color--surface--accent,#004080)))}:host(.load-failed) svg image,:host(.load-failed.has-fallback) svg,:host(.load-failed[on-fail=collapse]) svg{display:none}:host(.load-failed[on-fail=collapse]){max-width:var(--pfe-icon--size,0);max-height:var(--pfe-icon--size,0)}:host(.load-failed[on-fail=collapse]) svg{width:var(--pfe-icon--size,0);height:var(--pfe-icon--size,0)}`,p=k;import"@patternfly/pfe-core";var d=new Set;function $(n){window.PfeConfig??(window.PfeConfig={}),E({PfeIcon:n,config:window.PfeConfig}),document.body.addEventListener("pfe-icon:add-icon-set",()=>{for(let l of d)l.updateIcon()})}var o=class extends b{constructor(){super(...arguments);this.icon="";this.size="xl";this.circled=!1;this.block=!1;this._iconHref=""}static getIconSet(e){e??(e="");let[i]=e.split("-");return{set:this._iconSets.get(i)}}static addIconSet(e,i,t){let c=t,a=this._iconSets.get(e);if(!c&&a&&typeof a?.resolver=="function")c=a.resolver;else{if(c&&typeof c!="function")return v.warn("[pfe-icon]: The third input to addIconSet should be a function that parses and returns the icon's filename.");if(!c)return v.warn(`[pfe-icon]: The set ${e} needs a resolve function for the icon names.`)}this._iconSets.set(e,new L(e,i,c)),document.body.dispatchEvent(new CustomEvent("pfe-icon:add-icon-set",{bubbles:!1,detail:{set:this._iconSets.get(e)}}))}get upgraded(){return this.image?.hasAttribute("href")??!1}connectedCallback(){super.connectedCallback(),d.add(this)}render(){return x`<div class="pfe-icon--fallback"><slot></slot></div>${C`<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><filter id="${this._filterId}" color-interpolation-filters="sRGB" x="0" y="0" height="100%" width="100%"><feFlood result="COLOR"/><feComposite operator="in" in="COLOR" in2="SourceAlpha"/></filter><image href="${this._iconHref}" width="100%" height="100%" @load="${this._iconLoad}" @error="${this._iconLoadError}" style="${w({filter:this._filterId&&`url(#${this._filterId})`})}"></image></svg>`}`}disconnectedCallback(){super.disconnectedCallback(),d.delete(this)}_iconLoad(){this.classList.remove("load-failed")}_iconLoadError(){this.classList.add("load-failed"),this.classList.toggle("has-fallback",!!(this.children.length||this.textContent?.trim().length))}_iconChanged(){this.updateIcon()}updateIcon(){let{set:e}=o.getIconSet(this.icon);e&&(this._iconHref=e.resolveIconName(this.icon),this._filterId=_("filter"))}};o.version="{{version}}",o.styles=[p],o._iconSets=new Map,r([y,f({type:String,reflect:!0})],o.prototype,"icon",2),r([f({type:String,reflect:!0})],o.prototype,"size",2),r([f({type:String,reflect:!0})],o.prototype,"color",2),r([f({type:String,reflect:!0,attribute:"on-fail"})],o.prototype,"onFail",2),r([f({type:Boolean,reflect:!0})],o.prototype,"circled",2),r([f({type:Boolean,reflect:!0})],o.prototype,"block",2),r([S(),f({reflect:!0})],o.prototype,"on",2),r([h()],o.prototype,"_iconHref",2),r([h()],o.prototype,"_filterId",2),r([B("svg image")],o.prototype,"image",2),r([s],o.prototype,"_iconLoad",1),r([s],o.prototype,"_iconLoadError",1),r([s],o.prototype,"updateIcon",1),o=r([z("pfe-icon"),$,F()],o);export{o as PfeIcon};
 //# sourceMappingURL=pfe-icon.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51292

increased by3.13%

Lines of code

476

increased by5.31%

Dependency changes

• Updated@patternfly/pfe-core@^2.0.0-next.4