@patternfly/pfe-select - npm Package Compare versions

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

package.json

 {
   "name": "@patternfly/pfe-select",
   "license": "MIT",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.3",
   "description": "Select element for PatternFly Elements",
@@ -69,5 +69,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-select.js

@@ -1,2 +0,2 @@
-var f=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=(a,e,t,i)=>{for(var r=i>1?void 0:i?m(e,t):e,n=a.length-1,s;n>=0;n--)(s=a[n])&&(r=(i?s(e,t,r):s(r))||r);return i&&r&&f(e,t,r),r};import{LitElement as g,html as b}from"lit";import{customElement as w,property as c}from"lit/decorators.js";import{ComposedEvent as x}from"@patternfly/pfe-core";import{bound as C,initializer as B,observed as p,pfelement as y}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as _}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{Logger as k}from"@patternfly/pfe-core/controllers/logger.js";import{css as v}from"lit";var u=v`:host{position:relative;display:inline-block;width:100%;line-height:1.5em;font-weight:400;text-align:left;text-rendering:optimizelegibility;border-top:var(--pfe-select--BorderTop,var(--pfe-select--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderColor,var(--pfe-theme--color--surface--lighter,#f0f0f0)));border-right:var(--pfe-select--BorderRight,var(--pfe-select--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderColor,var(--pfe-theme--color--surface--lighter,#f0f0f0)));border-bottom:var(--pfe-select--BorderBottom,var(--pfe-select--BorderBottomWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderBottomColor,var(--pfe-theme--color--surface--darker,#3c3f42)));border-left:var(--pfe-select--BorderLeft,var(--pfe-select--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderColor,var(--pfe-theme--color--surface--lighter,#f0f0f0)));background-color:var(--pfe-select--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));color:var(--pfe-select--Color,var(--pfe-theme--color--text,#151515))}:host *,:host ::after,:host ::before{box-sizing:border-box}:host::after{border-style:var(--pfe-theme--surface--border-style,solid);border-width:6px 6px 0;border-color:transparent;border-top-color:#3c3f42;display:inline-block;content:"";position:absolute;pointer-events:none;top:calc(var(--pfe-theme--container-padding,1rem) * .875);right:calc(var(--pfe-theme--container-padding,1rem) * .75)}:host([hidden]){display:none}:host(:hover){border-bottom:var(--pfe-select--BorderBottom--hover,var(--pfe-select--BorderBottomWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderBottomColor--hover,var(--pfe-theme--color--link,#06c)))}:host(:focus-within){border-bottom-width:calc(var(--pfe-theme--surface--border-width--heavy,4px)/ 2);border-bottom-color:var(--pfe-select--BorderBottomColor--hover,var(--pfe-theme--color--link,#06c))}:host(:focus-within) ::slotted(select){padding-bottom:calc(var(--pfe-theme-container-padding,1rem) * .438)}:host ::slotted(select){text-rendering:auto!important;background-color:var(--pfe-select--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));color:var(--pfe-select--Color,var(--pfe-theme--color--text,#151515));border-radius:0;width:100%;min-width:100%;font-size:var(--pfe-theme--font-size, 1rem);font-weight:var(--pfe-theme--font-weight--normal,400);font-family:var(--pfe-select--FontFamily, var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif));appearance:none;box-shadow:none;border:none;padding:calc(var(--pfe-theme--container-padding,1rem) * .5);padding-right:calc(var(--pfe-theme--container-padding,1rem) * 1.5)}:host([invalid]){border-bottom-width:calc(var(--pfe-theme--surface--border-width--heavy,4px)/ 2);border-bottom-color:var(--pfe-select--BorderBottomColor--error,var(--pfe-theme--color--feedback--critical,#a30000))}:host([invalid]) ::slotted(select){padding-bottom:calc(var(--pfe-theme--container-padding,1rem) * .438);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");background-size:.875rem;background-repeat:no-repeat;background-position:calc(100% - (var(--pfe-theme--container-padding,1rem) * 2)) center}:host([invalid]){border-bottom-width:calc(var(--pfe-theme--surface--border-width--heavy,4px)/ 2);border-bottom-color:var(--pfe-select--BorderBottomColor--error,var(--pfe-theme--color--feedback--critical,#a30000))}:host([invalid]) ::slotted(select){padding-bottom:calc(var(--pfe-theme--container-padding,1rem) * .438);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");background-size:.875rem;background-repeat:no-repeat;background-position:calc(100% - (var(--pfe-theme--container-padding,1rem) * 2)) center}`,d=u;var E=a=>!!a.selected,h=class extends x{constructor(e){super("select");this.value=e}},o=class extends g{constructor(){super(...arguments);this.invalid=!1;this.logger=new k(this);this._options=null}get value(){return this._input?.value??""}set value(e){this._input&&(this._input.value=e)}get pfeOptions(){return this.options??null}set pfeOptions(e){this.options=e}get _input(){return this.querySelector("select")}connectedCallback(){super.connectedCallback(),this.options&&this._modifyDOM()}render(){return b`<slot></slot>`}_optionsChanged(e,t){this._options=(t?.filter(E)?.length??0)<1?t:this._handleMultipleSelectedValues(t??[]),this._modifyDOM()}disconnectedCallback(){super.disconnectedCallback(),this._input&&this._input.removeEventListener("input",this._inputChanged)}_init(){if(!this._input){this.logger.warn("The first child needs to be a select element");return}this._input.addEventListener("change",this._inputChanged)}_invalidChanged(e,t){this.querySelector("select")?.setAttribute("aria-invalid",String(!!t))}_handleMultipleSelectedValues(e){this.logger.warn("The first 'selected' option will take precedence over others in case of multiple 'selected' options");let t=e.findIndex(i=>i.selected);return e.forEach((i,r)=>{i.selected=t===r}),e}_inputChanged(){let{value:e}=this._input??{};this.dispatchEvent(new h(e)),this.dispatchEvent(_("pfe-select:change",{value:e}))}_modifyDOM(){let e=document.createElement("select");for(let t of this.options??[])e.add(Object.assign(document.createElement("option"),t),null);this._input?this._input.parentNode?.replaceChild(e,this._input):this.appendChild(e)}addOptions(e){this.options=this._options?this._options.concat(e):e}};o.version="{{version}}",o.styles=[d],l([p,c({type:Boolean,reflect:!0})],o.prototype,"invalid",2),l([p,c({attribute:!1})],o.prototype,"options",2),l([B({emptyWarning:"The first child in the light DOM must be a supported select tag"})],o.prototype,"_init",1),l([C],o.prototype,"_inputChanged",1),o=l([w("pfe-select"),y()],o);export{o as PfeSelect,h as SelectChangeEvent};
+var f=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=(i,a,e,t)=>{for(var r=t>1?void 0:t?m(a,e):a,n=i.length-1,s;n>=0;n--)(s=i[n])&&(r=(t?s(a,e,r):s(r))||r);return t&&r&&f(a,e,r),r};import{LitElement as g,html as b}from"lit";import{customElement as w,property as p}from"lit/decorators.js";import{ComposedEvent as x}from"@patternfly/pfe-core";import{bound as B,initializer as C,observed as h,pfelement as y}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as _}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{Logger as k}from"@patternfly/pfe-core/controllers/logger.js";import{css as v}from"lit";var u=v`:host{position:relative;display:inline-block;width:100%;line-height:1.5em;font-weight:400;text-align:left;text-rendering:optimizelegibility;border-top:var(--pfe-select--BorderTop,var(--pfe-select--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderColor,var(--pfe-theme--color--surface--lighter,#f0f0f0)));border-right:var(--pfe-select--BorderRight,var(--pfe-select--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderColor,var(--pfe-theme--color--surface--lighter,#f0f0f0)));border-bottom:var(--pfe-select--BorderBottom,var(--pfe-select--BorderBottomWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderBottomColor,var(--pfe-theme--color--surface--darker,#3c3f42)));border-left:var(--pfe-select--BorderLeft,var(--pfe-select--BorderWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderColor,var(--pfe-theme--color--surface--lighter,#f0f0f0)));background-color:var(--pfe-select--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));color:var(--pfe-select--Color,var(--pfe-theme--color--text,#151515))}:host *,:host ::after,:host ::before{box-sizing:border-box}:host::after{border-style:var(--pfe-theme--surface--border-style,solid);border-width:6px 6px 0;border-color:transparent;border-top-color:#3c3f42;display:inline-block;content:"";position:absolute;pointer-events:none;top:calc(var(--pfe-theme--container-padding,1rem) * .875);right:calc(var(--pfe-theme--container-padding,1rem) * .75)}:host([hidden]){display:none}:host(:hover){border-bottom:var(--pfe-select--BorderBottom--hover,var(--pfe-select--BorderBottomWidth,var(--pfe-theme--ui--border-width,1px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-select--BorderBottomColor--hover,var(--pfe-theme--color--link,#06c)))}:host(:focus-within){border-bottom-width:calc(var(--pfe-theme--surface--border-width--heavy,4px)/ 2);border-bottom-color:var(--pfe-select--BorderBottomColor--hover,var(--pfe-theme--color--link,#06c))}:host(:focus-within) ::slotted(select){padding-bottom:calc(var(--pfe-theme-container-padding,1rem) * .438)}:host ::slotted(select){text-rendering:auto!important;background-color:var(--pfe-select--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));color:var(--pfe-select--Color,var(--pfe-theme--color--text,#151515));border-radius:0;width:100%;min-width:100%;font-size:var(--pfe-theme--font-size, 1rem);font-weight:var(--pfe-theme--font-weight--normal,400);font-family:var(--pfe-select--FontFamily, var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif));appearance:none;box-shadow:none;border:none;padding:calc(var(--pfe-theme--container-padding,1rem) * .5);padding-right:calc(var(--pfe-theme--container-padding,1rem) * 1.5)}:host([invalid]){border-bottom-width:calc(var(--pfe-theme--surface--border-width--heavy,4px)/ 2);border-bottom-color:var(--pfe-select--BorderBottomColor--error,var(--pfe-theme--color--feedback--critical,#a30000))}:host([invalid]) ::slotted(select){padding-bottom:calc(var(--pfe-theme--container-padding,1rem) * .438);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");background-size:.875rem;background-repeat:no-repeat;background-position:calc(100% - (var(--pfe-theme--container-padding,1rem) * 2)) center}:host([invalid]){border-bottom-width:calc(var(--pfe-theme--surface--border-width--heavy,4px)/ 2);border-bottom-color:var(--pfe-select--BorderBottomColor--error,var(--pfe-theme--color--feedback--critical,#a30000))}:host([invalid]) ::slotted(select){padding-bottom:calc(var(--pfe-theme--container-padding,1rem) * .438);background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");background-size:.875rem;background-repeat:no-repeat;background-position:calc(100% - (var(--pfe-theme--container-padding,1rem) * 2)) center}`,c=u;var O=i=>!!i.selected,d=class extends x{constructor(e){super("select");this.value=e}},o=class extends g{constructor(){super(...arguments);this.invalid=!1;this.logger=new k(this);this._options=null}get value(){return this._input?.value??""}set value(e){this._input&&(this._input.value=e)}get pfeOptions(){return this.options??null}set pfeOptions(e){this.options=e}get _input(){return this.querySelector("select")}connectedCallback(){super.connectedCallback(),this.options&&this._modifyDOM()}render(){return b`<slot></slot>`}_optionsChanged(e,t){this._options=(t?.filter(O)?.length??0)<1?t:this._handleMultipleSelectedValues(t??[]),this._modifyDOM()}disconnectedCallback(){super.disconnectedCallback(),this._input&&this._input.removeEventListener("input",this._inputChanged)}_init(){if(!this._input){this.logger.warn("The first child needs to be a select element");return}this._input.addEventListener("change",this._inputChanged)}_invalidChanged(e,t){this.querySelector("select")?.setAttribute("aria-invalid",String(!!t))}_handleMultipleSelectedValues(e){this.logger.warn("The first 'selected' option will take precedence over others in case of multiple 'selected' options");let t=e.findIndex(r=>r.selected);return e.forEach((r,n)=>{r.selected=t===n}),e}_inputChanged(){let{value:e}=this;this.dispatchEvent(new d(e)),this.dispatchEvent(_("pfe-select:change",{value:e}))}_modifyDOM(){let e=document.createElement("select");for(let t of this.options??[])e.add(Object.assign(document.createElement("option"),t),null);this._input?this._input.parentNode?.replaceChild(e,this._input):this.appendChild(e)}addOptions(e){this.options=this._options?this._options.concat(e):e}};o.version="{{version}}",o.styles=[c],l([h,p({type:Boolean,reflect:!0})],o.prototype,"invalid",2),l([h,p({attribute:!1})],o.prototype,"options",2),l([C({emptyWarning:"The first child in the light DOM must be a supported select tag"})],o.prototype,"_init",1),l([B],o.prototype,"_inputChanged",1),o=l([w("pfe-select"),y()],o);export{o as PfeSelect,d as SelectChangeEvent};
 //# sourceMappingURL=pfe-select.js.map

No alert changes

Worsened metrics

Total package byte prevSize

34846

decreased by-0.07%

Dependency changes

• + Added@floating-ui/core@1.6.1(transitive)

• + Added@floating-ui/utils@0.2.2(transitive)

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