@nuralyui/image 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +163 -0
- package/image.component.d.ts +20 -8
- package/image.component.js +89 -45
- package/image.component.js.map +1 -1
- package/image.style.js +4 -4
- package/image.style.js.map +1 -1
- package/image.types.d.ts +68 -0
- package/image.types.js +7 -0
- package/image.types.js.map +1 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/package.json +16 -2
- package/react.d.ts +6 -305
- package/react.js +8 -6
- package/react.js.map +1 -1
- package/demo/image-demo.d.ts +0 -17
- package/demo/image-demo.d.ts.map +0 -1
- package/demo/image-demo.js +0 -66
- package/demo/image-demo.js.map +0 -1
- package/image.component.d.ts.map +0 -1
- package/image.style.d.ts.map +0 -1
- package/index.d.ts.map +0 -1
- package/react.d.ts.map +0 -1
package/bundle.js
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2019 Google LLC
|
|
4
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
|
+
*/
|
|
6
|
+
const t=window,i=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),e=new WeakMap;class o{constructor(t,i,e){if(this._$cssResult$=!0,e!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=i}get styleSheet(){let t=this.o;const s=this.t;if(i&&void 0===t){const i=void 0!==s&&1===s.length;i&&(t=e.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&e.set(s,t))}return t}toString(){return this.cssText}}const n=i?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let i="";for(const s of t.cssRules)i+=s.cssText;return(t=>new o("string"==typeof t?t:t+"",void 0,s))(i)})(t):t
|
|
7
|
+
/**
|
|
8
|
+
* @license
|
|
9
|
+
* Copyright 2017 Google LLC
|
|
10
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
+
*/;var r;const h=window,l=h.trustedTypes,a=l?l.emptyScript:"",d=h.reactiveElementPolyfillSupport,u={toAttribute(t,i){switch(i){case Boolean:t=t?a:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},c=(t,i)=>i!==t&&(i==i||t==t),v={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:c},p="finalized";class g extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this._$Eu()}static addInitializer(t){var i;this.finalize(),(null!==(i=this.h)&&void 0!==i?i:this.h=[]).push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Ep(s,i);void 0!==e&&(this._$Ev.set(e,s),t.push(e))})),t}static createProperty(t,i=v){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e)}}static getPropertyDescriptor(t,i,s){return{get(){return this[i]},set(e){const o=this[t];this[i]=e,this.requestUpdate(t,o,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||v}static finalize(){if(this.hasOwnProperty(p))return!1;this[p]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.h&&(this.h=[...t.h]),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const i=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)i.unshift(n(t))}else void 0!==t&&i.push(n(t));return i}static _$Ep(t,i){const s=i.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}_$Eu(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var i,s;(null!==(i=this._$ES)&&void 0!==i?i:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var i;null===(i=this._$ES)||void 0===i||i.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Ei.set(i,this[i]),delete this[i])}))}createRenderRoot(){var s;const e=null!==(s=this.shadowRoot)&&void 0!==s?s:this.attachShadow(this.constructor.shadowRootOptions);return((s,e)=>{i?s.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((i=>{const e=document.createElement("style"),o=t.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=i.cssText,s.appendChild(e)}))})(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}))}attributeChangedCallback(t,i,s){this._$AK(t,s)}_$EO(t,i,s=v){var e;const o=this.constructor._$Ep(t,s);if(void 0!==o&&!0===s.reflect){const n=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:u).toAttribute(i,s.type);this._$El=t,null==n?this.removeAttribute(o):this.setAttribute(o,n),this._$El=null}}_$AK(t,i){var s;const e=this.constructor,o=e._$Ev.get(t);if(void 0!==o&&this._$El!==o){const t=e.getPropertyOptions(o),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:u;this._$El=o,this[o]=n.fromAttribute(i,t.type),this._$El=null}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||c)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,i)=>this[i]=t)),this._$Ei=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$Ek()}catch(t){throw i=!1,this._$Ek(),t}i&&this._$AE(s)}willUpdate(t){}_$AE(t){var i;null===(i=this._$ES)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$EO(i,this[i],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}
|
|
12
|
+
/**
|
|
13
|
+
* @license
|
|
14
|
+
* Copyright 2017 Google LLC
|
|
15
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
|
+
*/
|
|
17
|
+
var f;g[p]=!0,g.elementProperties=new Map,g.elementStyles=[],g.shadowRootOptions={mode:"open"},null==d||d({ReactiveElement:g}),(null!==(r=h.reactiveElementVersions)&&void 0!==r?r:h.reactiveElementVersions=[]).push("1.6.3");const m=window,b=m.trustedTypes,y=b?b.createPolicy("lit-html",{createHTML:t=>t}):void 0,w="$lit$",N=`lit$${(Math.random()+"").slice(9)}$`,M="?"+N,$=`<${M}>`,A=document,D=()=>A.createComment(""),S=t=>null===t||"object"!=typeof t&&"function"!=typeof t,x=Array.isArray,j="[ \t\n\f\r]",I=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,z=/-->/g,E=/>/g,T=RegExp(`>|${j}(?:([^\\s"'>=/]+)(${j}*=${j}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),O=/'/g,C=/"/g,k=/^(?:script|style|textarea|title)$/i,U=Symbol.for("lit-noChange"),_=Symbol.for("lit-nothing"),L=new WeakMap,R=A.createTreeWalker(A,129,null,!1);function Q(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==y?y.createHTML(i):i}class P{constructor({strings:t,_$litType$:i},s){let e;this.parts=[];let o=0,n=0;const r=t.length-1,h=this.parts,[l,a]=((t,i)=>{const s=t.length-1,e=[];let o,n=2===i?"<svg>":"",r=I;for(let i=0;i<s;i++){const s=t[i];let h,l,a=-1,d=0;for(;d<s.length&&(r.lastIndex=d,l=r.exec(s),null!==l);)d=r.lastIndex,r===I?"!--"===l[1]?r=z:void 0!==l[1]?r=E:void 0!==l[2]?(k.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=T):void 0!==l[3]&&(r=T):r===T?">"===l[0]?(r=null!=o?o:I,a=-1):void 0===l[1]?a=-2:(a=r.lastIndex-l[2].length,h=l[1],r=void 0===l[3]?T:'"'===l[3]?C:O):r===C||r===O?r=T:r===z||r===E?r=I:(r=T,o=void 0);const u=r===T&&t[i+1].startsWith("/>")?" ":"";n+=r===I?s+$:a>=0?(e.push(h),s.slice(0,a)+w+s.slice(a)+N+u):s+N+(-2===a?(e.push(void 0),i):u)}return[Q(t,n+(t[s]||"<?>")+(2===i?"</svg>":"")),e]})(t,i);if(this.el=P.createElement(l,s),R.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(e=R.nextNode())&&h.length<r;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith(w)||i.startsWith(N)){const s=a[n++];if(t.push(i),void 0!==s){const t=e.getAttribute(s.toLowerCase()+w).split(N),i=/([.?@])?(.*)/.exec(s);h.push({type:1,index:o,name:i[2],strings:t,ctor:"."===i[1]?B:"?"===i[1]?Y:"@"===i[1]?F:G})}else h.push({type:6,index:o})}for(const i of t)e.removeAttribute(i)}if(k.test(e.tagName)){const t=e.textContent.split(N),i=t.length-1;if(i>0){e.textContent=b?b.emptyScript:"";for(let s=0;s<i;s++)e.append(t[s],D()),R.nextNode(),h.push({type:2,index:++o});e.append(t[i],D())}}}else if(8===e.nodeType)if(e.data===M)h.push({type:2,index:o});else{let t=-1;for(;-1!==(t=e.data.indexOf(N,t+1));)h.push({type:7,index:o}),t+=N.length-1}o++}}static createElement(t,i){const s=A.createElement("template");return s.innerHTML=t,s}}function Z(t,i,s=t,e){var o,n,r,h;if(i===U)return i;let l=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const a=S(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==a&&(null===(n=null==l?void 0:l._$AO)||void 0===n||n.call(l,!1),void 0===a?l=void 0:(l=new a(t),l._$AT(t,s,e)),void 0!==e?(null!==(r=(h=s)._$Co)&&void 0!==r?r:h._$Co=[])[e]=l:s._$Cl=l),void 0!==l&&(i=Z(t,l._$AS(t,i.values),l,e)),i}class V{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:A).importNode(s,!0);R.currentNode=o;let n=R.nextNode(),r=0,h=0,l=e[0];for(;void 0!==l;){if(r===l.index){let i;2===l.type?i=new W(n,n.nextSibling,this,t):1===l.type?i=new l.ctor(n,l.name,l.strings,this,t):6===l.type&&(i=new K(n,this,t)),this._$AV.push(i),l=e[++h]}r!==(null==l?void 0:l.index)&&(n=R.nextNode(),r++)}return R.currentNode=A,o}v(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++}}class W{constructor(t,i,s,e){var o;this.type=2,this._$AH=_,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cp=null===(o=null==e?void 0:e.isConnected)||void 0===o||o}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=Z(this,t,i),S(t)?t===_||null==t||""===t?(this._$AH!==_&&this._$AR(),this._$AH=_):t!==this._$AH&&t!==U&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>x(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==_&&S(this._$AH)?this._$AA.nextSibling.data=t:this.$(A.createTextNode(t)),this._$AH=t}g(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=P.createElement(Q(e.h,e.h[0]),this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(s);else{const t=new V(o,this),i=t.u(this.options);t.v(s),this.$(i),this._$AH=t}}_$AC(t){let i=L.get(t.strings);return void 0===i&&L.set(t.strings,i=new P(t)),i}T(t){x(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new W(this.k(D()),this.k(D()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e)}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class G{constructor(t,i,s,e,o){this.type=1,this._$AH=_,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=_}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=Z(this,t,i,0),n=!S(t)||t!==this._$AH&&t!==U,n&&(this._$AH=t);else{const e=t;let r,h;for(t=o[0],r=0;r<o.length-1;r++)h=Z(this,e[s+r],i,r),h===U&&(h=this._$AH[r]),n||(n=!S(h)||h!==this._$AH[r]),h===_?t=_:t!==_&&(t+=(null!=h?h:"")+o[r+1]),this._$AH[r]=h}n&&!e&&this.j(t)}j(t){t===_?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class B extends G{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===_?void 0:t}}const H=b?b.emptyScript:"";class Y extends G{constructor(){super(...arguments),this.type=4}j(t){t&&t!==_?this.element.setAttribute(this.name,H):this.element.removeAttribute(this.name)}}class F extends G{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5}_$AI(t,i=this){var s;if((t=null!==(s=Z(this,t,i,0))&&void 0!==s?s:_)===U)return;const e=this._$AH,o=t===_&&e!==_||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==_&&(e===_||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class K{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){Z(this,t)}}const J=m.litHtmlPolyfillSupport;
|
|
18
|
+
/**
|
|
19
|
+
* @license
|
|
20
|
+
* Copyright 2017 Google LLC
|
|
21
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
+
*/
|
|
23
|
+
var q;null==J||J(P,W),(null!==(f=m.litHtmlVersions)&&void 0!==f?f:m.litHtmlVersions=[]).push("2.8.0");const X=window,tt=X.trustedTypes,it=tt?tt.createPolicy("lit-html",{createHTML:t=>t}):void 0,st="$lit$",et=`lit$${(Math.random()+"").slice(9)}$`,ot="?"+et,nt=`<${ot}>`,rt=document,ht=()=>rt.createComment(""),lt=t=>null===t||"object"!=typeof t&&"function"!=typeof t,at=Array.isArray,dt="[ \t\n\f\r]",ut=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ct=/-->/g,vt=/>/g,pt=RegExp(`>|${dt}(?:([^\\s"'>=/]+)(${dt}*=${dt}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),gt=/'/g,ft=/"/g,mt=/^(?:script|style|textarea|title)$/i,bt=(t=>(i,...s)=>({_$litType$:t,strings:i,values:s}))(1),yt=Symbol.for("lit-noChange"),wt=Symbol.for("lit-nothing"),Nt=new WeakMap,Mt=rt.createTreeWalker(rt,129,null,!1);function $t(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==it?it.createHTML(i):i}const At=(t,i)=>{const s=t.length-1,e=[];let o,n=2===i?"<svg>":"",r=ut;for(let i=0;i<s;i++){const s=t[i];let h,l,a=-1,d=0;for(;d<s.length&&(r.lastIndex=d,l=r.exec(s),null!==l);)d=r.lastIndex,r===ut?"!--"===l[1]?r=ct:void 0!==l[1]?r=vt:void 0!==l[2]?(mt.test(l[2])&&(o=RegExp("</"+l[2],"g")),r=pt):void 0!==l[3]&&(r=pt):r===pt?">"===l[0]?(r=null!=o?o:ut,a=-1):void 0===l[1]?a=-2:(a=r.lastIndex-l[2].length,h=l[1],r=void 0===l[3]?pt:'"'===l[3]?ft:gt):r===ft||r===gt?r=pt:r===ct||r===vt?r=ut:(r=pt,o=void 0);const u=r===pt&&t[i+1].startsWith("/>")?" ":"";n+=r===ut?s+nt:a>=0?(e.push(h),s.slice(0,a)+st+s.slice(a)+et+u):s+et+(-2===a?(e.push(void 0),i):u)}return[$t(t,n+(t[s]||"<?>")+(2===i?"</svg>":"")),e]};class Dt{constructor({strings:t,_$litType$:i},s){let e;this.parts=[];let o=0,n=0;const r=t.length-1,h=this.parts,[l,a]=At(t,i);if(this.el=Dt.createElement(l,s),Mt.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(e=Mt.nextNode())&&h.length<r;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith(st)||i.startsWith(et)){const s=a[n++];if(t.push(i),void 0!==s){const t=e.getAttribute(s.toLowerCase()+st).split(et),i=/([.?@])?(.*)/.exec(s);h.push({type:1,index:o,name:i[2],strings:t,ctor:"."===i[1]?zt:"?"===i[1]?Tt:"@"===i[1]?Ot:It})}else h.push({type:6,index:o})}for(const i of t)e.removeAttribute(i)}if(mt.test(e.tagName)){const t=e.textContent.split(et),i=t.length-1;if(i>0){e.textContent=tt?tt.emptyScript:"";for(let s=0;s<i;s++)e.append(t[s],ht()),Mt.nextNode(),h.push({type:2,index:++o});e.append(t[i],ht())}}}else if(8===e.nodeType)if(e.data===ot)h.push({type:2,index:o});else{let t=-1;for(;-1!==(t=e.data.indexOf(et,t+1));)h.push({type:7,index:o}),t+=et.length-1}o++}}static createElement(t,i){const s=rt.createElement("template");return s.innerHTML=t,s}}function St(t,i,s=t,e){var o,n,r,h;if(i===yt)return i;let l=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const a=lt(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==a&&(null===(n=null==l?void 0:l._$AO)||void 0===n||n.call(l,!1),void 0===a?l=void 0:(l=new a(t),l._$AT(t,s,e)),void 0!==e?(null!==(r=(h=s)._$Co)&&void 0!==r?r:h._$Co=[])[e]=l:s._$Cl=l),void 0!==l&&(i=St(t,l._$AS(t,i.values),l,e)),i}class xt{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var i;const{el:{content:s},parts:e}=this._$AD,o=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:rt).importNode(s,!0);Mt.currentNode=o;let n=Mt.nextNode(),r=0,h=0,l=e[0];for(;void 0!==l;){if(r===l.index){let i;2===l.type?i=new jt(n,n.nextSibling,this,t):1===l.type?i=new l.ctor(n,l.name,l.strings,this,t):6===l.type&&(i=new Ct(n,this,t)),this._$AV.push(i),l=e[++h]}r!==(null==l?void 0:l.index)&&(n=Mt.nextNode(),r++)}return Mt.currentNode=rt,o}v(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++}}class jt{constructor(t,i,s,e){var o;this.type=2,this._$AH=wt,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cp=null===(o=null==e?void 0:e.isConnected)||void 0===o||o}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===(null==t?void 0:t.nodeType)&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=St(this,t,i),lt(t)?t===wt||null==t||""===t?(this._$AH!==wt&&this._$AR(),this._$AH=wt):t!==this._$AH&&t!==yt&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>at(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==wt&<(this._$AH)?this._$AA.nextSibling.data=t:this.$(rt.createTextNode(t)),this._$AH=t}g(t){var i;const{values:s,_$litType$:e}=t,o="number"==typeof e?this._$AC(t):(void 0===e.el&&(e.el=Dt.createElement($t(e.h,e.h[0]),this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===o)this._$AH.v(s);else{const t=new xt(o,this),i=t.u(this.options);t.v(s),this.$(i),this._$AH=t}}_$AC(t){let i=Nt.get(t.strings);return void 0===i&&Nt.set(t.strings,i=new Dt(t)),i}T(t){at(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const o of t)e===i.length?i.push(s=new jt(this.k(ht()),this.k(ht()),this,this.options)):s=i[e],s._$AI(o),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e)}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cp=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class It{constructor(t,i,s,e,o){this.type=1,this._$AH=wt,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=o,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=wt}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=St(this,t,i,0),n=!lt(t)||t!==this._$AH&&t!==yt,n&&(this._$AH=t);else{const e=t;let r,h;for(t=o[0],r=0;r<o.length-1;r++)h=St(this,e[s+r],i,r),h===yt&&(h=this._$AH[r]),n||(n=!lt(h)||h!==this._$AH[r]),h===wt?t=wt:t!==wt&&(t+=(null!=h?h:"")+o[r+1]),this._$AH[r]=h}n&&!e&&this.j(t)}j(t){t===wt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class zt extends It{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===wt?void 0:t}}const Et=tt?tt.emptyScript:"";class Tt extends It{constructor(){super(...arguments),this.type=4}j(t){t&&t!==wt?this.element.setAttribute(this.name,Et):this.element.removeAttribute(this.name)}}class Ot extends It{constructor(t,i,s,e,o){super(t,i,s,e,o),this.type=5}_$AI(t,i=this){var s;if((t=null!==(s=St(this,t,i,0))&&void 0!==s?s:wt)===yt)return;const e=this._$AH,o=t===wt&&e!==wt||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,n=t!==wt&&(e===wt||o);o&&this.element.removeEventListener(this.name,this,e),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,s;"function"==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==s?s:this.element,t):this._$AH.handleEvent(t)}}class Ct{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){St(this,t)}}const kt=X.litHtmlPolyfillSupport;null==kt||kt(Dt,jt),(null!==(q=X.litHtmlVersions)&&void 0!==q?q:X.litHtmlVersions=[]).push("2.8.0");
|
|
24
|
+
/**
|
|
25
|
+
* @license
|
|
26
|
+
* Copyright 2017 Google LLC
|
|
27
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
28
|
+
*/
|
|
29
|
+
var Ut,_t;class Lt extends g{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,i;const s=super.createRenderRoot();return null!==(t=(i=this.renderOptions).renderBefore)&&void 0!==t||(i.renderBefore=s.firstChild),s}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let r=n._$litPart$;if(void 0===r){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=r=new jt(i.insertBefore(ht(),t),t,void 0,null!=s?s:{})}return r._$AI(t),r})(i,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return yt}}Lt.finalized=!0,Lt._$litElement$=!0,null===(Ut=globalThis.litElementHydrateSupport)||void 0===Ut||Ut.call(globalThis,{LitElement:Lt});const Rt=globalThis.litElementPolyfillSupport;null==Rt||Rt({LitElement:Lt}),(null!==(_t=globalThis.litElementVersions)&&void 0!==_t?_t:globalThis.litElementVersions=[]).push("3.3.3");
|
|
30
|
+
/**
|
|
31
|
+
* @license
|
|
32
|
+
* Copyright 2017 Google LLC
|
|
33
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
34
|
+
*/
|
|
35
|
+
const Qt=(t,i)=>"method"===i.kind&&i.descriptor&&!("value"in i.descriptor)?{...i,finisher(s){s.createProperty(i.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:i.key,initializer(){"function"==typeof i.initializer&&(this[i.key]=i.initializer.call(this))},finisher(s){s.createProperty(i.key,t)}},Pt=(t,i,s)=>{i.constructor.createProperty(s,t)};
|
|
36
|
+
/**
|
|
37
|
+
* @license
|
|
38
|
+
* Copyright 2017 Google LLC
|
|
39
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
40
|
+
*/function Zt(t){return(i,s)=>void 0!==s?Pt(t,i,s):Qt(t,i)
|
|
41
|
+
/**
|
|
42
|
+
* @license
|
|
43
|
+
* Copyright 2017 Google LLC
|
|
44
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
45
|
+
*/}function Vt(t){return Zt({...t,state:!0})}
|
|
46
|
+
/**
|
|
47
|
+
* @license
|
|
48
|
+
* Copyright 2021 Google LLC
|
|
49
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
50
|
+
*/var Wt;null===(Wt=window.HTMLSlotElement)||void 0===Wt||Wt.prototype.assignedElements;
|
|
51
|
+
/**
|
|
52
|
+
* @license
|
|
53
|
+
* Copyright 2017 Google LLC
|
|
54
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
55
|
+
*/
|
|
56
|
+
const Gt=1,Bt=t=>(...i)=>({_$litDirective$:t,values:i});class Ht{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,s){this._$Ct=t,this._$AM=i,this._$Ci=s}_$AS(t,i){return this.update(t,i)}update(t,i){return this.render(...i)}}
|
|
57
|
+
/**
|
|
58
|
+
* @license
|
|
59
|
+
* Copyright 2018 Google LLC
|
|
60
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
61
|
+
*/const Yt=Bt(class extends Ht{constructor(t){var i;if(super(t),t.type!==Gt||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var s,e;if(void 0===this.it){this.it=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(s=this.nt)||void 0===s?void 0:s.has(t))&&this.it.add(t);return this.render(i)}const o=t.element.classList;this.it.forEach((t=>{t in i||(o.remove(t),this.it.delete(t))}));for(const t in i){const s=!!i[t];s===this.it.has(t)||(null===(e=this.nt)||void 0===e?void 0:e.has(t))||(s?(o.add(t),this.it.add(t)):(o.remove(t),this.it.delete(t)))}return U}}),Ft="important",Kt=" !"+Ft,Jt=Bt(class extends Ht{constructor(t){var i;if(super(t),t.type!==Gt||"style"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((i,s)=>{const e=t[s];return null==e?i:i+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`}),"")}update(t,[i]){const{style:s}=t.element;if(void 0===this.ht){this.ht=new Set;for(const t in i)this.ht.add(t);return this.render(i)}this.ht.forEach((t=>{null==i[t]&&(this.ht.delete(t),t.includes("-")?s.removeProperty(t):s[t]="")}));for(const t in i){const e=i[t];if(null!=e){this.ht.add(t);const i="string"==typeof e&&e.endsWith(Kt);t.includes("-")||i?s.setProperty(t,i?e.slice(0,-11):e,i?Ft:""):s[t]=e}}return U}}),qt=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,i,s;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(i=this.designSystemObserver)||void 0===i||i.disconnect(),null===(s=this.mediaQuery)||void 0===s||s.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,i;const s=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return s||((null===(i=window.matchMedia)||void 0===i?void 0:i.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const i=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===i?i:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver((()=>{this.requestUpdate()})),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver((()=>{this.requestUpdate()})),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},Xt=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},ti=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(Xt())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!Xt())return!0;let i=!0;for(const s of this.requiredComponents)if(!this.isComponentAvailable(s)){i=!1;const e=new Error(`Required component "${s}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(s,e):console.error(e.message)}return i}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter((t=>!this.isComponentAvailable(t)))}areDependenciesAvailable(){return this.requiredComponents.every((t=>this.isComponentAvailable(t)))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const i=this.requiredComponents.indexOf(t);i>-1&&this.requiredComponents.splice(i,1)}},ii=t=>class extends t{dispatchCustomEvent(t,i){this.dispatchEvent(new CustomEvent(t,{detail:i,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,i){var s;const e=Object.assign(Object.assign({},i),{timestamp:Date.now(),componentName:(null===(s=this.tagName)||void 0===s?void 0:s.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,e)}dispatchInputEvent(t,i){const s=Object.assign({target:i.target||this,value:i.value,originalEvent:i.originalEvent},i);this.dispatchCustomEvent(t,s)}dispatchFocusEvent(t,i){const s=Object.assign({target:i.target||this,value:i.value,focused:i.focused,cursorPosition:i.cursorPosition,selectedText:i.selectedText},i);this.dispatchCustomEvent(t,s)}dispatchValidationEvent(t,i){var s;const e=Object.assign({target:i.target||this,value:i.value,isValid:null!==(s=i.isValid)&&void 0!==s&&s,error:i.error},i);this.dispatchCustomEvent(t,e)}dispatchActionEvent(t,i){const s=Object.assign({target:i.target||this,action:i.action,previousValue:i.previousValue,newValue:i.newValue},i);this.dispatchCustomEvent(t,s)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}};
|
|
62
|
+
/**
|
|
63
|
+
* @license
|
|
64
|
+
* Copyright 2018 Google LLC
|
|
65
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
66
|
+
*/var si=((t,...i)=>{const e=1===t.length?t[0]:i.reduce(((i,s,e)=>i+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[e+1]),t[0]);return new o(e,t,s)})`
|
|
67
|
+
img{
|
|
68
|
+
border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;
|
|
69
|
+
border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));
|
|
70
|
+
border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));
|
|
71
|
+
border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));
|
|
72
|
+
}
|
|
73
|
+
.image-container {
|
|
74
|
+
position: relative;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
img {
|
|
78
|
+
display: block;
|
|
79
|
+
max-width: 100%;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.preview-modal {
|
|
83
|
+
position: fixed;
|
|
84
|
+
top: 0;
|
|
85
|
+
left: 0;
|
|
86
|
+
right: 0;
|
|
87
|
+
bottom: 0;
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
background-color: rgba(0, 0, 0, 0.7);
|
|
92
|
+
z-index: 1000;
|
|
93
|
+
animation: fadeIn 0.3s ease;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.preview-modal img {
|
|
97
|
+
max-width: 90%;
|
|
98
|
+
max-height: 90%;
|
|
99
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
100
|
+
border-radius: 4px;
|
|
101
|
+
animation: zoomIn 0.3s ease;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.preview-close {
|
|
105
|
+
position: absolute;
|
|
106
|
+
top: 20px;
|
|
107
|
+
right: 20px;
|
|
108
|
+
width: 40px;
|
|
109
|
+
height: 40px;
|
|
110
|
+
background: rgba(255, 255, 255, 0.2);
|
|
111
|
+
border: none;
|
|
112
|
+
border-radius: 50%;
|
|
113
|
+
color: white;
|
|
114
|
+
font-size: 24px;
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
outline: none;
|
|
120
|
+
transition: background-color 0.3s;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.preview-close:hover {
|
|
124
|
+
background: rgba(255, 255, 255, 0.4);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
@keyframes fadeIn {
|
|
128
|
+
from {
|
|
129
|
+
opacity: 0;
|
|
130
|
+
}
|
|
131
|
+
to {
|
|
132
|
+
opacity: 1;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@keyframes zoomIn {
|
|
137
|
+
from {
|
|
138
|
+
transform: scale(0.9);
|
|
139
|
+
opacity: 0;
|
|
140
|
+
}
|
|
141
|
+
to {
|
|
142
|
+
transform: scale(1);
|
|
143
|
+
opacity: 1;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
`,ei=function(t,i,s,e){for(var o,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(r=(n<3?o(r):n>3?o(i,s,r):o(i,s))||r);return n>3&&r&&Object.defineProperty(i,s,r),r};let oi=class extends((t=>ti(qt(ii(t))))(Lt)){constructor(){super(...arguments),this.width="auto",this.height="auto",this.alt="",this.previewable=!1,this.block=!1,this.currentSrc="",this.showPreview=!1,this.hasError=!1,this.defaultFallback="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg=="}willUpdate(t){t.has("src")&&(this.currentSrc=this.src,this.hasError=!1)}handleError(){this.hasError=!0,this.dispatchEvent(new CustomEvent("nr-image-error",{bubbles:!0,composed:!0,detail:{error:`Error loading image: ${this.currentSrc}`,src:this.currentSrc}})),this.fallback&&this.currentSrc!==this.fallback&&this.currentSrc!==this.defaultFallback?this.currentSrc=this.fallback:this.currentSrc!==this.defaultFallback&&(this.currentSrc=this.defaultFallback)}handleLoad(){this.hasError=!1,this.dispatchEvent(new CustomEvent("nr-image-load",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}}))}showPreviewModal(){this.previewable&&!this.hasError&&(this.showPreview=!0,this.dispatchEvent(new CustomEvent("nr-image-preview-open",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}})))}closePreviewModal(){this.showPreview=!1,this.dispatchEvent(new CustomEvent("nr-image-preview-close",{bubbles:!0,composed:!0,detail:{src:this.currentSrc}}))}render(){const t={"image-container":!0,"image--previewable":this.previewable,"image--error":this.hasError},i={width:"number"==typeof this.width?`${this.width}px`:this.width,height:"number"==typeof this.height?`${this.height}px`:this.height};return this.fit&&(i["object-fit"]=this.fit),bt`
|
|
147
|
+
<div class=${Yt(t)}>
|
|
148
|
+
<img
|
|
149
|
+
src=${this.currentSrc}
|
|
150
|
+
alt=${this.alt}
|
|
151
|
+
style=${Jt(i)}
|
|
152
|
+
@error=${this.handleError}
|
|
153
|
+
@load=${this.handleLoad}
|
|
154
|
+
@click=${this.showPreviewModal}
|
|
155
|
+
/>
|
|
156
|
+
${this.showPreview?bt`
|
|
157
|
+
<div class="preview-modal" @click=${this.closePreviewModal}>
|
|
158
|
+
<button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
|
|
159
|
+
<img src="${this.currentSrc}" alt="${this.alt}" />
|
|
160
|
+
</div>
|
|
161
|
+
`:""}
|
|
162
|
+
</div>
|
|
163
|
+
`}};oi.styles=si,ei([Zt({type:String})],oi.prototype,"src",void 0),ei([Zt({type:String})],oi.prototype,"fallback",void 0),ei([Zt({type:String})],oi.prototype,"width",void 0),ei([Zt({type:String})],oi.prototype,"height",void 0),ei([Zt({type:String})],oi.prototype,"alt",void 0),ei([Zt({type:Boolean})],oi.prototype,"previewable",void 0),ei([Zt({type:String})],oi.prototype,"fit",void 0),ei([Zt({type:Boolean,reflect:!0})],oi.prototype,"block",void 0),ei([Vt()],oi.prototype,"currentSrc",void 0),ei([Vt()],oi.prototype,"showPreview",void 0),ei([Vt()],oi.prototype,"hasError",void 0),oi=ei([(t=>i=>"function"==typeof i?((t,i)=>(customElements.define(t,i),i))(t,i):((t,i)=>{const{kind:s,elements:e}=i;return{kind:s,elements:e,finisher(i){customElements.define(t,i)}}})(t,i))("nr-image")],oi);export{oi as NrImageElement};
|
package/image.component.d.ts
CHANGED
|
@@ -1,19 +1,31 @@
|
|
|
1
1
|
import { LitElement, PropertyValues } from "lit";
|
|
2
|
-
|
|
2
|
+
import { ImageFit } from "./image.types.js";
|
|
3
|
+
declare const NrImageElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
|
|
4
|
+
export declare class NrImageElement extends NrImageElement_base {
|
|
3
5
|
static styles: import("lit").CSSResult;
|
|
4
6
|
src: string;
|
|
5
|
-
fallback
|
|
7
|
+
fallback?: string;
|
|
6
8
|
width: string;
|
|
7
9
|
height: string;
|
|
8
10
|
alt: string;
|
|
9
11
|
previewable: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
fit?: ImageFit;
|
|
13
|
+
block: boolean;
|
|
14
|
+
private currentSrc;
|
|
15
|
+
private showPreview;
|
|
16
|
+
private hasError;
|
|
17
|
+
private readonly defaultFallback;
|
|
18
|
+
willUpdate(changedProperties: PropertyValues): void;
|
|
14
19
|
private handleError;
|
|
15
|
-
private
|
|
16
|
-
private
|
|
20
|
+
private handleLoad;
|
|
21
|
+
private showPreviewModal;
|
|
22
|
+
private closePreviewModal;
|
|
17
23
|
render(): import("lit").TemplateResult<1>;
|
|
18
24
|
}
|
|
25
|
+
declare global {
|
|
26
|
+
interface HTMLElementTagNameMap {
|
|
27
|
+
'nr-image': NrImageElement;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
19
31
|
//# sourceMappingURL=image.component.d.ts.map
|
package/image.component.js
CHANGED
|
@@ -4,96 +4,140 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import {
|
|
7
|
+
import { html, LitElement } from "lit";
|
|
8
8
|
import { customElement, property, state } from "lit/decorators.js";
|
|
9
|
-
import
|
|
10
|
-
|
|
9
|
+
import { classMap } from "lit/directives/class-map.js";
|
|
10
|
+
import { styleMap } from "lit/directives/style-map.js";
|
|
11
|
+
import { NuralyUIBaseMixin } from "../../shared/base-mixin.js";
|
|
12
|
+
import styles from "./image.style.js";
|
|
13
|
+
let NrImageElement = class NrImageElement extends NuralyUIBaseMixin(LitElement) {
|
|
11
14
|
constructor() {
|
|
12
15
|
super(...arguments);
|
|
13
16
|
this.width = 'auto';
|
|
14
17
|
this.height = 'auto';
|
|
15
18
|
this.alt = '';
|
|
16
19
|
this.previewable = false;
|
|
17
|
-
this.
|
|
20
|
+
this.block = false;
|
|
21
|
+
this.currentSrc = '';
|
|
18
22
|
this.showPreview = false;
|
|
19
|
-
this.
|
|
23
|
+
this.hasError = false;
|
|
24
|
+
this.defaultFallback = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';
|
|
20
25
|
}
|
|
21
|
-
willUpdate(
|
|
22
|
-
if (
|
|
23
|
-
this.
|
|
26
|
+
willUpdate(changedProperties) {
|
|
27
|
+
if (changedProperties.has('src')) {
|
|
28
|
+
this.currentSrc = this.src;
|
|
29
|
+
this.hasError = false;
|
|
24
30
|
}
|
|
25
31
|
}
|
|
26
32
|
handleError() {
|
|
27
|
-
this.
|
|
33
|
+
this.hasError = true;
|
|
34
|
+
this.dispatchEvent(new CustomEvent('nr-image-error', {
|
|
28
35
|
bubbles: true,
|
|
29
36
|
composed: true,
|
|
30
|
-
detail: {
|
|
31
|
-
error: `error loading image ${this.image}`
|
|
32
|
-
}
|
|
37
|
+
detail: { error: `Error loading image: ${this.currentSrc}`, src: this.currentSrc }
|
|
33
38
|
}));
|
|
34
|
-
if (this.fallback && this.
|
|
35
|
-
this.
|
|
39
|
+
if (this.fallback && this.currentSrc !== this.fallback && this.currentSrc !== this.defaultFallback) {
|
|
40
|
+
this.currentSrc = this.fallback;
|
|
36
41
|
}
|
|
37
|
-
else if (this.
|
|
38
|
-
this.
|
|
42
|
+
else if (this.currentSrc !== this.defaultFallback) {
|
|
43
|
+
this.currentSrc = this.defaultFallback;
|
|
39
44
|
}
|
|
40
45
|
}
|
|
41
|
-
|
|
42
|
-
|
|
46
|
+
handleLoad() {
|
|
47
|
+
this.hasError = false;
|
|
48
|
+
this.dispatchEvent(new CustomEvent('nr-image-load', {
|
|
49
|
+
bubbles: true,
|
|
50
|
+
composed: true,
|
|
51
|
+
detail: { src: this.currentSrc }
|
|
52
|
+
}));
|
|
53
|
+
}
|
|
54
|
+
showPreviewModal() {
|
|
55
|
+
if (this.previewable && !this.hasError) {
|
|
43
56
|
this.showPreview = true;
|
|
57
|
+
this.dispatchEvent(new CustomEvent('nr-image-preview-open', {
|
|
58
|
+
bubbles: true,
|
|
59
|
+
composed: true,
|
|
60
|
+
detail: { src: this.currentSrc }
|
|
61
|
+
}));
|
|
44
62
|
}
|
|
45
63
|
}
|
|
46
|
-
|
|
64
|
+
closePreviewModal() {
|
|
47
65
|
this.showPreview = false;
|
|
66
|
+
this.dispatchEvent(new CustomEvent('nr-image-preview-close', {
|
|
67
|
+
bubbles: true,
|
|
68
|
+
composed: true,
|
|
69
|
+
detail: { src: this.currentSrc }
|
|
70
|
+
}));
|
|
48
71
|
}
|
|
49
72
|
render() {
|
|
73
|
+
const containerClasses = {
|
|
74
|
+
'image-container': true,
|
|
75
|
+
'image--previewable': this.previewable,
|
|
76
|
+
'image--error': this.hasError
|
|
77
|
+
};
|
|
78
|
+
const imageStyles = {
|
|
79
|
+
width: typeof this.width === 'number' ? `${this.width}px` : this.width,
|
|
80
|
+
height: typeof this.height === 'number' ? `${this.height}px` : this.height,
|
|
81
|
+
};
|
|
82
|
+
if (this.fit) {
|
|
83
|
+
imageStyles['object-fit'] = this.fit;
|
|
84
|
+
}
|
|
50
85
|
return html `
|
|
51
|
-
<div class
|
|
86
|
+
<div class=${classMap(containerClasses)}>
|
|
52
87
|
<img
|
|
53
|
-
src=${this.
|
|
54
|
-
@error=${this.handleError}
|
|
55
|
-
@click=${this._showPreview}
|
|
56
|
-
style="width:${this.width}; height:${this.height}; cursor: ${this.previewable ? 'pointer' : 'default'}"
|
|
88
|
+
src=${this.currentSrc}
|
|
57
89
|
alt=${this.alt}
|
|
90
|
+
style=${styleMap(imageStyles)}
|
|
91
|
+
@error=${this.handleError}
|
|
92
|
+
@load=${this.handleLoad}
|
|
93
|
+
@click=${this.showPreviewModal}
|
|
58
94
|
/>
|
|
59
|
-
|
|
60
95
|
${this.showPreview ? html `
|
|
61
|
-
<div class="preview-modal" @click=${this.
|
|
62
|
-
<button class="preview-close">×</button>
|
|
63
|
-
<img src="${this.
|
|
96
|
+
<div class="preview-modal" @click=${this.closePreviewModal}>
|
|
97
|
+
<button class="preview-close" @click=${this.closePreviewModal} aria-label="Close preview">×</button>
|
|
98
|
+
<img src="${this.currentSrc}" alt="${this.alt}" />
|
|
64
99
|
</div>
|
|
65
100
|
` : ''}
|
|
66
101
|
</div>
|
|
67
102
|
`;
|
|
68
103
|
}
|
|
69
104
|
};
|
|
70
|
-
|
|
105
|
+
NrImageElement.styles = styles;
|
|
71
106
|
__decorate([
|
|
72
|
-
property()
|
|
73
|
-
],
|
|
107
|
+
property({ type: String })
|
|
108
|
+
], NrImageElement.prototype, "src", void 0);
|
|
74
109
|
__decorate([
|
|
75
110
|
property({ type: String })
|
|
76
|
-
],
|
|
111
|
+
], NrImageElement.prototype, "fallback", void 0);
|
|
77
112
|
__decorate([
|
|
78
|
-
property()
|
|
79
|
-
],
|
|
113
|
+
property({ type: String })
|
|
114
|
+
], NrImageElement.prototype, "width", void 0);
|
|
80
115
|
__decorate([
|
|
81
|
-
property()
|
|
82
|
-
],
|
|
116
|
+
property({ type: String })
|
|
117
|
+
], NrImageElement.prototype, "height", void 0);
|
|
83
118
|
__decorate([
|
|
84
|
-
property()
|
|
85
|
-
],
|
|
119
|
+
property({ type: String })
|
|
120
|
+
], NrImageElement.prototype, "alt", void 0);
|
|
86
121
|
__decorate([
|
|
87
122
|
property({ type: Boolean })
|
|
88
|
-
],
|
|
123
|
+
], NrImageElement.prototype, "previewable", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
property({ type: String })
|
|
126
|
+
], NrImageElement.prototype, "fit", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property({ type: Boolean, reflect: true })
|
|
129
|
+
], NrImageElement.prototype, "block", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
state()
|
|
132
|
+
], NrImageElement.prototype, "currentSrc", void 0);
|
|
89
133
|
__decorate([
|
|
90
134
|
state()
|
|
91
|
-
],
|
|
135
|
+
], NrImageElement.prototype, "showPreview", void 0);
|
|
92
136
|
__decorate([
|
|
93
137
|
state()
|
|
94
|
-
],
|
|
95
|
-
|
|
96
|
-
customElement('
|
|
97
|
-
],
|
|
98
|
-
export {
|
|
138
|
+
], NrImageElement.prototype, "hasError", void 0);
|
|
139
|
+
NrImageElement = __decorate([
|
|
140
|
+
customElement('nr-image')
|
|
141
|
+
], NrImageElement);
|
|
142
|
+
export { NrImageElement };
|
|
99
143
|
//# sourceMappingURL=image.component.js.map
|
package/image.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.component.js","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,
|
|
1
|
+
{"version":3,"file":"image.component.js","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAItC,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAjE;;QAUE,UAAK,GAAG,MAAM,CAAC;QAGf,WAAM,GAAG,MAAM,CAAC;QAGhB,QAAG,GAAG,EAAE,CAAC;QAGT,gBAAW,GAAG,KAAK,CAAC;QAMpB,UAAK,GAAG,KAAK,CAAC;QAGN,eAAU,GAAG,EAAE,CAAC;QAGhB,gBAAW,GAAG,KAAK,CAAC;QAGpB,aAAQ,GAAG,KAAK,CAAC;QAER,oBAAe,GAAG,osCAAosC,CAAC;IAoF1uC,CAAC;IAlFU,UAAU,CAAC,iBAAiC;QACnD,IAAI,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC;YAC3B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,EAAE;YACnD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,wBAAwB,IAAI,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE;SACnF,CAAC,CAAC,CAAC;QACJ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,eAAe,EAAE;YAClG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;SACjC;aAAM,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,eAAe,EAAE;YACnD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;SACxC;IACH,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE;YAClD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE;SACjC,CAAC,CAAC,CAAC;IACN,CAAC;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACtC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,uBAAuB,EAAE;gBAC1D,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE;aACjC,CAAC,CAAC,CAAC;SACL;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,wBAAwB,EAAE;YAC3D,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE;SACjC,CAAC,CAAC,CAAC;IACN,CAAC;IAEQ,MAAM;QACb,MAAM,gBAAgB,GAAG;YACvB,iBAAiB,EAAE,IAAI;YACvB,oBAAoB,EAAE,IAAI,CAAC,WAAW;YACtC,cAAc,EAAE,IAAI,CAAC,QAAQ;SAC9B,CAAC;QACF,MAAM,WAAW,GAA2B;YAC1C,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;YACtE,MAAM,EAAE,OAAO,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;SAC3E,CAAC;QACF,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,WAAW,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;SACtC;QACD,OAAO,IAAI,CAAA;mBACI,QAAQ,CAAC,gBAAgB,CAAC;;gBAE7B,IAAI,CAAC,UAAU;gBACf,IAAI,CAAC,GAAG;kBACN,QAAQ,CAAC,WAAW,CAAC;mBACpB,IAAI,CAAC,WAAW;kBACjB,IAAI,CAAC,UAAU;mBACd,IAAI,CAAC,gBAAgB;;UAE9B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;8CACa,IAAI,CAAC,iBAAiB;mDACjB,IAAI,CAAC,iBAAiB;wBACjD,IAAI,CAAC,UAAU,UAAU,IAAI,CAAC,GAAG;;SAEhD,CAAC,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;CACF,CAAA;AAvHiB,qBAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACR;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC7B;AAGd;IADC,KAAK,EAAE;kDACgB;AAGxB;IADC,KAAK,EAAE;mDACoB;AAG5B;IADC,KAAK,EAAE;gDACiB;AAlCd,cAAc;IAD1B,aAAa,CAAC,UAAU,CAAC;GACb,cAAc,CAwH1B;SAxHY,cAAc","sourcesContent":["import { html, LitElement, PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { NuralyUIBaseMixin } from \"../../shared/base-mixin.js\";\nimport styles from \"./image.style.js\";\nimport { ImageFit } from \"./image.types.js\";\n\n@customElement('nr-image')\nexport class NrImageElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n @property({ type: String })\n src!: string;\n\n @property({ type: String })\n fallback?: string;\n\n @property({ type: String })\n width = 'auto';\n\n @property({ type: String })\n height = 'auto';\n\n @property({ type: String })\n alt = '';\n\n @property({ type: Boolean })\n previewable = false;\n\n @property({ type: String })\n fit?: ImageFit;\n\n @property({ type: Boolean, reflect: true })\n block = false;\n\n @state()\n private currentSrc = '';\n\n @state()\n private showPreview = false;\n\n @state()\n private hasError = false;\n\n private readonly defaultFallback = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNFRkYxRjMiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMjUwMyAzOC40ODE2QzMzLjI2MDMgMzcuMDQ3MiAzNC40MTk5IDM1Ljg4NjQgMzUuODU0MyAzNS44NzVIODMuMTQ2M0M4NC41ODQ4IDM1Ljg3NSA4NS43NTAzIDM3LjA0MzEgODUuNzUwMyAzOC40ODE2VjgwLjUxODRDODUuNzQwMyA4MS45NTI4IDg0LjU4MDcgODMuMTEzNiA4My4xNDYzIDgzLjEyNUgzNS44NTQzQzM0LjQxNTggODMuMTIzNiAzMy4yNTAzIDgxLjk1NyAzMy4yNTAzIDgwLjUxODRWMzguNDgxNlpNODAuNTAwNiA0MS4xMjUxSDM4LjUwMDZWNzcuODc1MUw2Mi44OTIxIDUzLjQ3ODNDNjMuOTE3MiA1Mi40NTM2IDY1LjU3ODggNTIuNDUzNiA2Ni42MDM5IDUzLjQ3ODNMODAuNTAwNiA2Ny40MDEzVjQxLjEyNTFaTTQzLjc1IDUxLjYyNDlDNDMuNzUgNTQuNTI0NCA0Ni4xMDA1IDU2Ljg3NDkgNDkgNTYuODc0OUM1MS44OTk1IDU2Ljg3NDkgNTQuMjUgNTQuNTI0NCA1NC4yNSA1MS42MjQ5QzU0LjI1IDQ4LjcyNTQgNTEuODk5NSA0Ni4zNzQ5IDQ5IDQ2LjM3NDlDNDYuMTAwNSA0Ni4zNzQ5IDQzLjc1IDQ4LjcyNTQgNDMuNzUgNTEuNjI0OVoiIGZpbGw9IiM2ODc3ODciLz4NCjwvc3ZnPg==';\n\n override willUpdate(changedProperties: PropertyValues): void {\n if (changedProperties.has('src')) {\n this.currentSrc = this.src;\n this.hasError = false;\n }\n }\n\n private handleError() {\n this.hasError = true;\n this.dispatchEvent(new CustomEvent('nr-image-error', {\n bubbles: true,\n composed: true,\n detail: { error: `Error loading image: ${this.currentSrc}`, src: this.currentSrc }\n }));\n if (this.fallback && this.currentSrc !== this.fallback && this.currentSrc !== this.defaultFallback) {\n this.currentSrc = this.fallback;\n } else if (this.currentSrc !== this.defaultFallback) {\n this.currentSrc = this.defaultFallback;\n }\n }\n\n private handleLoad() {\n this.hasError = false;\n this.dispatchEvent(new CustomEvent('nr-image-load', {\n bubbles: true,\n composed: true,\n detail: { src: this.currentSrc }\n }));\n }\n\n private showPreviewModal() {\n if (this.previewable && !this.hasError) {\n this.showPreview = true;\n this.dispatchEvent(new CustomEvent('nr-image-preview-open', {\n bubbles: true,\n composed: true,\n detail: { src: this.currentSrc }\n }));\n }\n }\n\n private closePreviewModal() {\n this.showPreview = false;\n this.dispatchEvent(new CustomEvent('nr-image-preview-close', {\n bubbles: true,\n composed: true,\n detail: { src: this.currentSrc }\n }));\n }\n\n override render() {\n const containerClasses = {\n 'image-container': true,\n 'image--previewable': this.previewable,\n 'image--error': this.hasError\n };\n const imageStyles: Record<string, string> = {\n width: typeof this.width === 'number' ? `${this.width}px` : this.width,\n height: typeof this.height === 'number' ? `${this.height}px` : this.height,\n };\n if (this.fit) {\n imageStyles['object-fit'] = this.fit;\n }\n return html`\n <div class=${classMap(containerClasses)}>\n <img\n src=${this.currentSrc}\n alt=${this.alt}\n style=${styleMap(imageStyles)}\n @error=${this.handleError}\n @load=${this.handleLoad}\n @click=${this.showPreviewModal}\n />\n ${this.showPreview ? html`\n <div class=\"preview-modal\" @click=${this.closePreviewModal}>\n <button class=\"preview-close\" @click=${this.closePreviewModal} aria-label=\"Close preview\">×</button>\n <img src=\"${this.currentSrc}\" alt=\"${this.alt}\" />\n </div>\n ` : ''}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-image': NrImageElement;\n }\n}\n"]}
|
package/image.style.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
export default css `
|
|
3
3
|
img{
|
|
4
|
-
border-top-left-radius:var(--
|
|
5
|
-
border-top-right-radius: var(--
|
|
6
|
-
border-bottom-left-radius: var(--
|
|
7
|
-
border-bottom-right-radius: var(--
|
|
4
|
+
border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;
|
|
5
|
+
border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));
|
|
6
|
+
border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));
|
|
7
|
+
border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));
|
|
8
8
|
}
|
|
9
9
|
.image-container {
|
|
10
10
|
position: relative;
|
package/image.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.style.js","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAgB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFlB,CAAA","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\nimg{\n border-top-left-radius:var(--
|
|
1
|
+
{"version":3,"file":"image.style.js","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAgB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFlB,CAAA","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\nimg{\n border-top-left-radius:var(--nuraly-image-border-top-left-radius,var(--nuraly-image-local-border-top-left-radius)) ;\n border-top-right-radius: var(--nuraly-image-border-top-right-radius,var(--nuraly-image-local-border-top-right-radius));\n border-bottom-left-radius: var(--nuraly-image-border-bottom-left-radius,var(--nuraly-image-local-border-bottom-left-radius));\n border-bottom-right-radius: var(--nuraly-image-border-bottom-right-radius,var(--nuraly-image-local-border-bottom-right-radius));\n}\n.image-container {\n position: relative;\n }\n\n img {\n display: block;\n max-width: 100%;\n }\n\n .preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 1000;\n animation: fadeIn 0.3s ease;\n }\n\n .preview-modal img {\n max-width: 90%;\n max-height: 90%;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n animation: zoomIn 0.3s ease;\n }\n\n .preview-close {\n position: absolute;\n top: 20px;\n right: 20px;\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, 0.2);\n border: none;\n border-radius: 50%;\n color: white;\n font-size: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n outline: none;\n transition: background-color 0.3s;\n }\n\n .preview-close:hover {\n background: rgba(255, 255, 255, 0.4);\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes zoomIn {\n from {\n transform: scale(0.9);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n`"]}
|
package/image.types.d.ts
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Image fit modes
|
|
8
|
+
*/
|
|
9
|
+
export declare const enum ImageFit {
|
|
10
|
+
/** Default behavior, no scaling */
|
|
11
|
+
None = "none",
|
|
12
|
+
/** The content is sized to fill the element's box */
|
|
13
|
+
Fill = "fill",
|
|
14
|
+
/** The content is sized to maintain its aspect ratio while fitting within the element's box */
|
|
15
|
+
Contain = "contain",
|
|
16
|
+
/** The content is sized to maintain its aspect ratio while filling the element's entire box */
|
|
17
|
+
Cover = "cover",
|
|
18
|
+
/** The content is sized as if none or contain were specified */
|
|
19
|
+
ScaleDown = "scale-down"
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Image placeholder type
|
|
23
|
+
*/
|
|
24
|
+
export declare const enum ImagePlaceholder {
|
|
25
|
+
/** Default placeholder icon */
|
|
26
|
+
Default = "default",
|
|
27
|
+
/** Custom placeholder */
|
|
28
|
+
Custom = "custom"
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Image configuration interface
|
|
32
|
+
*/
|
|
33
|
+
export interface ImageConfig {
|
|
34
|
+
/** Image source URL */
|
|
35
|
+
src: string;
|
|
36
|
+
/** Fallback image URL when loading fails */
|
|
37
|
+
fallback?: string;
|
|
38
|
+
/** Image width */
|
|
39
|
+
width?: string | number;
|
|
40
|
+
/** Image height */
|
|
41
|
+
height?: string | number;
|
|
42
|
+
/** Alternative text for the image */
|
|
43
|
+
alt?: string;
|
|
44
|
+
/** Whether the image is previewable (clickable to show fullscreen) */
|
|
45
|
+
previewable?: boolean;
|
|
46
|
+
/** Object-fit CSS property value */
|
|
47
|
+
fit?: ImageFit;
|
|
48
|
+
/** Whether to show a placeholder while loading */
|
|
49
|
+
placeholder?: boolean | string;
|
|
50
|
+
/** Custom CSS class */
|
|
51
|
+
customClass?: string;
|
|
52
|
+
/** Callback when image loads successfully */
|
|
53
|
+
onLoad?: () => void;
|
|
54
|
+
/** Callback when image fails to load */
|
|
55
|
+
onError?: (error: Error) => void;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Image event detail
|
|
59
|
+
*/
|
|
60
|
+
export interface ImageEventDetail {
|
|
61
|
+
/** Original event */
|
|
62
|
+
originalEvent?: Event;
|
|
63
|
+
/** Error message if applicable */
|
|
64
|
+
error?: string;
|
|
65
|
+
/** Image source */
|
|
66
|
+
src?: string;
|
|
67
|
+
}
|
|
68
|
+
//# sourceMappingURL=image.types.d.ts.map
|
package/image.types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"image.types.js","sourceRoot":"","sources":["../../../src/components/image/image.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Image fit modes\n */\nexport const enum ImageFit {\n /** Default behavior, no scaling */\n None = 'none',\n /** The content is sized to fill the element's box */\n Fill = 'fill',\n /** The content is sized to maintain its aspect ratio while fitting within the element's box */\n Contain = 'contain',\n /** The content is sized to maintain its aspect ratio while filling the element's entire box */\n Cover = 'cover',\n /** The content is sized as if none or contain were specified */\n ScaleDown = 'scale-down',\n}\n\n/**\n * Image placeholder type\n */\nexport const enum ImagePlaceholder {\n /** Default placeholder icon */\n Default = 'default',\n /** Custom placeholder */\n Custom = 'custom',\n}\n\n/**\n * Image configuration interface\n */\nexport interface ImageConfig {\n /** Image source URL */\n src: string;\n \n /** Fallback image URL when loading fails */\n fallback?: string;\n \n /** Image width */\n width?: string | number;\n \n /** Image height */\n height?: string | number;\n \n /** Alternative text for the image */\n alt?: string;\n \n /** Whether the image is previewable (clickable to show fullscreen) */\n previewable?: boolean;\n \n /** Object-fit CSS property value */\n fit?: ImageFit;\n \n /** Whether to show a placeholder while loading */\n placeholder?: boolean | string;\n \n /** Custom CSS class */\n customClass?: string;\n \n /** Callback when image loads successfully */\n onLoad?: () => void;\n \n /** Callback when image fails to load */\n onError?: (error: Error) => void;\n}\n\n/**\n * Image event detail\n */\nexport interface ImageEventDetail {\n /** Original event */\n originalEvent?: Event;\n \n /** Error message if applicable */\n error?: string;\n \n /** Image source */\n src?: string;\n}\n"]}
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './image.component.js';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './image.component.js';\nexport * from './image.types.js';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/image",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -8,5 +8,19 @@
|
|
|
8
8
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
9
9
|
},
|
|
10
10
|
"author": "Labidi Aymen",
|
|
11
|
-
"license": "ISC"
|
|
11
|
+
"license": "ISC",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./index.js"
|
|
15
|
+
},
|
|
16
|
+
"./bundle": {
|
|
17
|
+
"import": "./bundle.js"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"bundle.js",
|
|
22
|
+
"*.js",
|
|
23
|
+
"*.d.ts",
|
|
24
|
+
"*.js.map"
|
|
25
|
+
]
|
|
12
26
|
}
|
package/react.d.ts
CHANGED
|
@@ -1,307 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
hidden: boolean;
|
|
8
|
-
innerText: string;
|
|
9
|
-
lang: string;
|
|
10
|
-
readonly offsetHeight: number;
|
|
11
|
-
readonly offsetLeft: number;
|
|
12
|
-
readonly offsetParent: Element | null;
|
|
13
|
-
readonly offsetTop: number;
|
|
14
|
-
readonly offsetWidth: number;
|
|
15
|
-
outerText: string;
|
|
16
|
-
spellcheck: boolean;
|
|
17
|
-
title: string;
|
|
18
|
-
translate: boolean;
|
|
19
|
-
attachInternals(): ElementInternals;
|
|
20
|
-
click(): void;
|
|
21
|
-
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
|
|
22
|
-
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
|
|
23
|
-
removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
|
|
24
|
-
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
|
|
25
|
-
readonly attributes: NamedNodeMap;
|
|
26
|
-
readonly classList: DOMTokenList;
|
|
27
|
-
className: string;
|
|
28
|
-
readonly clientHeight: number;
|
|
29
|
-
readonly clientLeft: number;
|
|
30
|
-
readonly clientTop: number;
|
|
31
|
-
readonly clientWidth: number;
|
|
32
|
-
id: string;
|
|
33
|
-
readonly localName: string;
|
|
34
|
-
readonly namespaceURI: string | null;
|
|
35
|
-
onfullscreenchange: ((this: Element, ev: Event) => any) | null;
|
|
36
|
-
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
|
|
37
|
-
outerHTML: string;
|
|
38
|
-
readonly ownerDocument: Document;
|
|
39
|
-
readonly part: DOMTokenList;
|
|
40
|
-
readonly prefix: string | null;
|
|
41
|
-
readonly scrollHeight: number;
|
|
42
|
-
scrollLeft: number;
|
|
43
|
-
scrollTop: number;
|
|
44
|
-
readonly scrollWidth: number;
|
|
45
|
-
readonly shadowRoot: ShadowRoot | null;
|
|
46
|
-
slot: string;
|
|
47
|
-
readonly tagName: string;
|
|
48
|
-
attachShadow(init: ShadowRootInit): ShadowRoot;
|
|
49
|
-
closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
|
|
50
|
-
closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
|
|
51
|
-
closest<E extends Element = Element>(selectors: string): E | null;
|
|
52
|
-
getAttribute(qualifiedName: string): string | null;
|
|
53
|
-
getAttributeNS(namespace: string | null, localName: string): string | null;
|
|
54
|
-
getAttributeNames(): string[];
|
|
55
|
-
getAttributeNode(qualifiedName: string): Attr | null;
|
|
56
|
-
getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
|
|
57
|
-
getBoundingClientRect(): DOMRect;
|
|
58
|
-
getClientRects(): DOMRectList;
|
|
59
|
-
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
|
|
60
|
-
getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
|
|
61
|
-
getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
|
|
62
|
-
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
|
|
63
|
-
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
|
|
64
|
-
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
|
|
65
|
-
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
|
|
66
|
-
hasAttribute(qualifiedName: string): boolean;
|
|
67
|
-
hasAttributeNS(namespace: string | null, localName: string): boolean;
|
|
68
|
-
hasAttributes(): boolean;
|
|
69
|
-
hasPointerCapture(pointerId: number): boolean;
|
|
70
|
-
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
|
|
71
|
-
insertAdjacentHTML(position: InsertPosition, text: string): void;
|
|
72
|
-
insertAdjacentText(where: InsertPosition, data: string): void;
|
|
73
|
-
matches(selectors: string): boolean;
|
|
74
|
-
releasePointerCapture(pointerId: number): void;
|
|
75
|
-
removeAttribute(qualifiedName: string): void;
|
|
76
|
-
removeAttributeNS(namespace: string | null, localName: string): void;
|
|
77
|
-
removeAttributeNode(attr: Attr): Attr;
|
|
78
|
-
requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
|
|
79
|
-
requestPointerLock(): void;
|
|
80
|
-
scroll(options?: ScrollToOptions | undefined): void;
|
|
81
|
-
scroll(x: number, y: number): void;
|
|
82
|
-
scrollBy(options?: ScrollToOptions | undefined): void;
|
|
83
|
-
scrollBy(x: number, y: number): void;
|
|
84
|
-
scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
|
|
85
|
-
scrollTo(options?: ScrollToOptions | undefined): void;
|
|
86
|
-
scrollTo(x: number, y: number): void;
|
|
87
|
-
setAttribute(qualifiedName: string, value: string): void;
|
|
88
|
-
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
|
|
89
|
-
setAttributeNode(attr: Attr): Attr | null;
|
|
90
|
-
setAttributeNodeNS(attr: Attr): Attr | null;
|
|
91
|
-
setPointerCapture(pointerId: number): void;
|
|
92
|
-
toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
|
|
93
|
-
webkitMatchesSelector(selectors: string): boolean;
|
|
94
|
-
readonly baseURI: string;
|
|
95
|
-
readonly childNodes: NodeListOf<ChildNode>;
|
|
96
|
-
readonly firstChild: ChildNode | null;
|
|
97
|
-
readonly isConnected: boolean;
|
|
98
|
-
readonly lastChild: ChildNode | null;
|
|
99
|
-
readonly nextSibling: ChildNode | null;
|
|
100
|
-
readonly nodeName: string;
|
|
101
|
-
readonly nodeType: number;
|
|
102
|
-
nodeValue: string | null;
|
|
103
|
-
readonly parentElement: HTMLElement | null;
|
|
104
|
-
readonly parentNode: ParentNode | null;
|
|
105
|
-
readonly previousSibling: ChildNode | null;
|
|
106
|
-
textContent: string | null;
|
|
107
|
-
appendChild<T extends Node>(node: T): T;
|
|
108
|
-
cloneNode(deep?: boolean | undefined): Node;
|
|
109
|
-
compareDocumentPosition(other: Node): number;
|
|
110
|
-
contains(other: Node | null): boolean;
|
|
111
|
-
getRootNode(options?: GetRootNodeOptions | undefined): Node;
|
|
112
|
-
hasChildNodes(): boolean;
|
|
113
|
-
insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
|
|
114
|
-
isDefaultNamespace(namespace: string | null): boolean;
|
|
115
|
-
isEqualNode(otherNode: Node | null): boolean;
|
|
116
|
-
isSameNode(otherNode: Node | null): boolean;
|
|
117
|
-
lookupNamespaceURI(prefix: string | null): string | null;
|
|
118
|
-
lookupPrefix(namespace: string | null): string | null;
|
|
119
|
-
normalize(): void;
|
|
120
|
-
removeChild<T_2 extends Node>(child: T_2): T_2;
|
|
121
|
-
replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
|
|
122
|
-
readonly ATTRIBUTE_NODE: number;
|
|
123
|
-
readonly CDATA_SECTION_NODE: number;
|
|
124
|
-
readonly COMMENT_NODE: number;
|
|
125
|
-
readonly DOCUMENT_FRAGMENT_NODE: number;
|
|
126
|
-
readonly DOCUMENT_NODE: number;
|
|
127
|
-
readonly DOCUMENT_POSITION_CONTAINED_BY: number;
|
|
128
|
-
readonly DOCUMENT_POSITION_CONTAINS: number;
|
|
129
|
-
readonly DOCUMENT_POSITION_DISCONNECTED: number;
|
|
130
|
-
readonly DOCUMENT_POSITION_FOLLOWING: number;
|
|
131
|
-
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
|
|
132
|
-
readonly DOCUMENT_POSITION_PRECEDING: number;
|
|
133
|
-
readonly DOCUMENT_TYPE_NODE: number;
|
|
134
|
-
readonly ELEMENT_NODE: number;
|
|
135
|
-
readonly ENTITY_NODE: number;
|
|
136
|
-
readonly ENTITY_REFERENCE_NODE: number;
|
|
137
|
-
readonly NOTATION_NODE: number;
|
|
138
|
-
readonly PROCESSING_INSTRUCTION_NODE: number;
|
|
139
|
-
readonly TEXT_NODE: number;
|
|
140
|
-
dispatchEvent(event: Event): boolean;
|
|
141
|
-
ariaAtomic: string | null;
|
|
142
|
-
ariaAutoComplete: string | null;
|
|
143
|
-
ariaBusy: string | null;
|
|
144
|
-
ariaChecked: string | null;
|
|
145
|
-
ariaColCount: string | null;
|
|
146
|
-
ariaColIndex: string | null;
|
|
147
|
-
ariaColSpan: string | null;
|
|
148
|
-
ariaCurrent: string | null;
|
|
149
|
-
ariaDisabled: string | null;
|
|
150
|
-
ariaExpanded: string | null;
|
|
151
|
-
ariaHasPopup: string | null;
|
|
152
|
-
ariaHidden: string | null;
|
|
153
|
-
ariaKeyShortcuts: string | null;
|
|
154
|
-
ariaLabel: string | null;
|
|
155
|
-
ariaLevel: string | null;
|
|
156
|
-
ariaLive: string | null;
|
|
157
|
-
ariaModal: string | null;
|
|
158
|
-
ariaMultiLine: string | null;
|
|
159
|
-
ariaMultiSelectable: string | null;
|
|
160
|
-
ariaOrientation: string | null;
|
|
161
|
-
ariaPlaceholder: string | null;
|
|
162
|
-
ariaPosInSet: string | null;
|
|
163
|
-
ariaPressed: string | null;
|
|
164
|
-
ariaReadOnly: string | null;
|
|
165
|
-
ariaRequired: string | null;
|
|
166
|
-
ariaRoleDescription: string | null;
|
|
167
|
-
ariaRowCount: string | null;
|
|
168
|
-
ariaRowIndex: string | null;
|
|
169
|
-
ariaRowSpan: string | null;
|
|
170
|
-
ariaSelected: string | null;
|
|
171
|
-
ariaSetSize: string | null;
|
|
172
|
-
ariaSort: string | null;
|
|
173
|
-
ariaValueMax: string | null;
|
|
174
|
-
ariaValueMin: string | null;
|
|
175
|
-
ariaValueNow: string | null;
|
|
176
|
-
ariaValueText: string | null;
|
|
177
|
-
animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
|
|
178
|
-
getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
|
|
179
|
-
after(...nodes: (string | Node)[]): void;
|
|
180
|
-
before(...nodes: (string | Node)[]): void;
|
|
181
|
-
remove(): void;
|
|
182
|
-
replaceWith(...nodes: (string | Node)[]): void;
|
|
183
|
-
innerHTML: string;
|
|
184
|
-
readonly nextElementSibling: Element | null;
|
|
185
|
-
readonly previousElementSibling: Element | null;
|
|
186
|
-
readonly childElementCount: number;
|
|
187
|
-
readonly children: HTMLCollection;
|
|
188
|
-
readonly firstElementChild: Element | null;
|
|
189
|
-
readonly lastElementChild: Element | null;
|
|
190
|
-
append(...nodes: (string | Node)[]): void;
|
|
191
|
-
prepend(...nodes: (string | Node)[]): void;
|
|
192
|
-
querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
|
|
193
|
-
querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
|
|
194
|
-
querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
|
|
195
|
-
querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
|
|
196
|
-
querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
|
|
197
|
-
querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
|
|
198
|
-
replaceChildren(...nodes: (string | Node)[]): void;
|
|
199
|
-
readonly assignedSlot: HTMLSlotElement | null;
|
|
200
|
-
oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
201
|
-
oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
202
|
-
onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
|
|
203
|
-
readonly style: CSSStyleDeclaration;
|
|
204
|
-
contentEditable: string;
|
|
205
|
-
enterKeyHint: string;
|
|
206
|
-
inputMode: string;
|
|
207
|
-
readonly isContentEditable: boolean;
|
|
208
|
-
onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
209
|
-
onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
210
|
-
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
211
|
-
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
212
|
-
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
|
|
213
|
-
onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
214
|
-
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
215
|
-
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
216
|
-
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
217
|
-
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
218
|
-
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
219
|
-
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
220
|
-
oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
221
|
-
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
222
|
-
ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
223
|
-
ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
224
|
-
ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
225
|
-
ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
226
|
-
ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
227
|
-
ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
228
|
-
ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
229
|
-
ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
|
|
230
|
-
ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
231
|
-
onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
232
|
-
onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
233
|
-
onerror: OnErrorEventHandler;
|
|
234
|
-
onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
|
|
235
|
-
onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
|
|
236
|
-
ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
237
|
-
oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
238
|
-
oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
239
|
-
onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
240
|
-
onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
241
|
-
onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
|
|
242
|
-
onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
243
|
-
onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
244
|
-
onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
245
|
-
onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
246
|
-
onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
247
|
-
onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
248
|
-
onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
249
|
-
onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
250
|
-
onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
251
|
-
onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
252
|
-
onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
253
|
-
onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
|
|
254
|
-
onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
255
|
-
onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
256
|
-
onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
257
|
-
onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
258
|
-
onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
259
|
-
onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
260
|
-
onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
261
|
-
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
262
|
-
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
263
|
-
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
264
|
-
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
|
|
265
|
-
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
|
|
266
|
-
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
267
|
-
onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
268
|
-
onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
|
|
269
|
-
onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
270
|
-
onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
|
|
271
|
-
onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
272
|
-
onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
273
|
-
onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
274
|
-
onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
275
|
-
onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
276
|
-
onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
277
|
-
onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
278
|
-
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
|
|
279
|
-
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
280
|
-
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
281
|
-
ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
282
|
-
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
283
|
-
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
284
|
-
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
285
|
-
ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
|
|
286
|
-
ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
287
|
-
ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
288
|
-
ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
289
|
-
ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
|
|
290
|
-
onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
291
|
-
onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
292
|
-
onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
293
|
-
onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
294
|
-
onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
295
|
-
onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
|
|
296
|
-
onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
|
|
297
|
-
autofocus: boolean;
|
|
298
|
-
readonly dataset: DOMStringMap;
|
|
299
|
-
nonce?: string | undefined;
|
|
300
|
-
tabIndex: number;
|
|
301
|
-
blur(): void;
|
|
302
|
-
focus(options?: FocusOptions | undefined): void;
|
|
303
|
-
}, {
|
|
304
|
-
load: string;
|
|
305
|
-
error: string;
|
|
1
|
+
import { NrImageElement } from './image.component.js';
|
|
2
|
+
export declare const NrImage: import("@lit-labs/react").ReactWebComponent<NrImageElement, {
|
|
3
|
+
onLoad: string;
|
|
4
|
+
onError: string;
|
|
5
|
+
onPreviewOpen: string;
|
|
6
|
+
onPreviewClose: string;
|
|
306
7
|
}>;
|
|
307
8
|
//# sourceMappingURL=react.d.ts.map
|
package/react.js
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { createComponent } from '@lit-labs/react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
import { NrImageElement } from './image.component.js';
|
|
4
|
+
export const NrImage = createComponent({
|
|
5
|
+
tagName: 'nr-image',
|
|
6
|
+
elementClass: NrImageElement,
|
|
7
7
|
react: React,
|
|
8
8
|
events: {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
onLoad: 'nr-image-load',
|
|
10
|
+
onError: 'nr-image-error',
|
|
11
|
+
onPreviewOpen: 'nr-image-preview-open',
|
|
12
|
+
onPreviewClose: 'nr-image-preview-close',
|
|
11
13
|
},
|
|
12
14
|
});
|
|
13
15
|
//# sourceMappingURL=react.js.map
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/image/react.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/image/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,MAAM,EAAE,eAAe;QACvB,OAAO,EAAE,gBAAgB;QACzB,aAAa,EAAE,uBAAuB;QACtC,cAAc,EAAE,wBAAwB;KACzC;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrImageElement } from './image.component.js';\n\nexport const NrImage = createComponent({\n tagName: 'nr-image',\n elementClass: NrImageElement,\n react: React,\n events: {\n onLoad: 'nr-image-load',\n onError: 'nr-image-error',\n onPreviewOpen: 'nr-image-preview-open',\n onPreviewClose: 'nr-image-preview-close',\n },\n});\n"]}
|
package/demo/image-demo.d.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
import { LitElement } from 'lit';
|
|
7
|
-
import '../image.component';
|
|
8
|
-
import '../../../helpers/ThemeHandler';
|
|
9
|
-
export declare class ImageDemoElement extends LitElement {
|
|
10
|
-
render(): import("lit").TemplateResult<1>;
|
|
11
|
-
}
|
|
12
|
-
declare global {
|
|
13
|
-
interface HTMLElementTagNameMap {
|
|
14
|
-
'hy-image-demo': ImageDemoElement;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
//# sourceMappingURL=image-demo.d.ts.map
|
package/demo/image-demo.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"image-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/image/demo/image-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAErC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,+BAA+B,CAAC;AAEvC,qBACa,gBAAiB,SAAQ,UAAU;IACrC,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,gBAAgB,CAAC;KACnC;CACF"}
|
package/demo/image-demo.js
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
7
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
9
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
10
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
11
|
-
};
|
|
12
|
-
import { LitElement, html } from 'lit';
|
|
13
|
-
import { customElement } from 'lit/decorators.js';
|
|
14
|
-
import '../image.component';
|
|
15
|
-
import '../../../helpers/ThemeHandler';
|
|
16
|
-
let ImageDemoElement = class ImageDemoElement extends LitElement {
|
|
17
|
-
render() {
|
|
18
|
-
return html `
|
|
19
|
-
<theme-handler>
|
|
20
|
-
<h2>With valid src and alt</h2>
|
|
21
|
-
<hy-image
|
|
22
|
-
.src="${'https://picsum.photos/200'}"
|
|
23
|
-
.alt="${'Image'}"
|
|
24
|
-
></hy-image>
|
|
25
|
-
<h2>With custom width and height</h2>
|
|
26
|
-
|
|
27
|
-
<hy-image
|
|
28
|
-
.src="${'https://picsum.photos/200'}"
|
|
29
|
-
.width="${'100px'}"
|
|
30
|
-
.height="${'300px'}">
|
|
31
|
-
</hy-image>
|
|
32
|
-
|
|
33
|
-
<h2>With custom width and height and invalid src</h2>
|
|
34
|
-
|
|
35
|
-
<hy-image
|
|
36
|
-
.src="${'https://picsffum.photos/200'}"
|
|
37
|
-
.width="${'100px'}"
|
|
38
|
-
.height="${'300px'}">
|
|
39
|
-
</hy-image>
|
|
40
|
-
|
|
41
|
-
<h2>With invalid src and valid fallback provided</h2>
|
|
42
|
-
<hy-image
|
|
43
|
-
.src="${'https://picdsum.photos/200'}"
|
|
44
|
-
.fallback="${'https://placehold.co/50?text=image'}">
|
|
45
|
-
</hy-image>
|
|
46
|
-
<h2>With invalid src no fallback provided and without alt </h2>
|
|
47
|
-
<hy-image
|
|
48
|
-
.src="${'https://picdsum.photos/200'}"
|
|
49
|
-
></hy-image>
|
|
50
|
-
<h2>With invalid src, invalid fallback provided and with alt</h2>
|
|
51
|
-
<hy-image
|
|
52
|
-
.src="${'https://picdsum.photos/200'}"
|
|
53
|
-
.fallback="${'https://placehfold.jp/150x150.png'}"
|
|
54
|
-
.alt="${'image'}"
|
|
55
|
-
>
|
|
56
|
-
</hy-image>
|
|
57
|
-
|
|
58
|
-
</theme-handler>
|
|
59
|
-
`;
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
ImageDemoElement = __decorate([
|
|
63
|
-
customElement('hy-image-demo')
|
|
64
|
-
], ImageDemoElement);
|
|
65
|
-
export { ImageDemoElement };
|
|
66
|
-
//# sourceMappingURL=image-demo.js.map
|
package/demo/image-demo.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"image-demo.js","sourceRoot":"","sources":["../../../../src/components/image/demo/image-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAChD,OAAO,oBAAoB,CAAC;AAC5B,OAAO,+BAA+B,CAAC;AAGvC,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,UAAU;IACrC,MAAM;QACb,OAAO,IAAI,CAAA;;;;oBAIK,2BAA2B;oBAC3B,OAAO;;;;;iBAKV,2BAA2B;mBACzB,OAAO;oBACN,OAAO;;;;;;iBAMV,6BAA6B;mBAC3B,OAAO;oBACN,OAAO;;;;;oBAKP,4BAA4B;yBACvB,oCAAoC;;;;qBAIxC,4BAA4B;;;;qBAI5B,4BAA4B;0BACvB,mCAAmC;qBACxC,OAAO;;;;;KAKvB,CAAC;IACJ,CAAC;CACF,CAAA;AA7CY,gBAAgB;IAD5B,aAAa,CAAC,eAAe,CAAC;GAClB,gBAAgB,CA6C5B;SA7CY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport '../image.component';\nimport '../../../helpers/ThemeHandler';\n\n@customElement('hy-image-demo')\nexport class ImageDemoElement extends LitElement {\n override render() {\n return html`\n <theme-handler>\n <h2>With valid src and alt</h2>\n <hy-image\n .src=\"${'https://picsum.photos/200'}\"\n .alt=\"${'Image'}\"\n ></hy-image>\n <h2>With custom width and height</h2>\n\n <hy-image\n .src=\"${'https://picsum.photos/200'}\"\n .width=\"${'100px'}\"\n .height=\"${'300px'}\">\n </hy-image> \n\n <h2>With custom width and height and invalid src</h2>\n\n <hy-image\n .src=\"${'https://picsffum.photos/200'}\"\n .width=\"${'100px'}\"\n .height=\"${'300px'}\">\n </hy-image> \n\n <h2>With invalid src and valid fallback provided</h2>\n <hy-image\n .src=\"${'https://picdsum.photos/200'}\"\n .fallback=\"${'https://placehold.co/50?text=image'}\">\n </hy-image>\n <h2>With invalid src no fallback provided and without alt </h2>\n <hy-image\n .src=\"${'https://picdsum.photos/200'}\"\n ></hy-image>\n <h2>With invalid src, invalid fallback provided and with alt</h2>\n <hy-image\n .src=\"${'https://picdsum.photos/200'}\"\n .fallback=\"${'https://placehfold.jp/150x150.png'}\"\n .alt=\"${'image'}\"\n >\n </hy-image>\n\n </theme-handler>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hy-image-demo': ImageDemoElement;\n }\n}\n"]}
|
package/image.component.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"image.component.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIvD,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAGhC,GAAG,EAAG,MAAM,CAAC;IAGb,QAAQ,EAAI,MAAM,CAAC;IAGnB,KAAK,SAAU;IAGf,MAAM,SAAU;IAGhB,GAAG,SAAM;IAGT,WAAW,UAAS;IAGpB,KAAK,SAAM;IAGX,WAAW,UAAS;IAEpB,eAAe,SAAwsC;IAE9sC,UAAU,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAM7D,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIZ,MAAM;CAoBhB"}
|
package/image.style.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"image.style.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.style.ts"],"names":[],"mappings":";AAEA,wBAgFC"}
|
package/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
|
package/react.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/image/react.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQlB,CAAC"}
|