@nuralyui/tag 0.0.2 → 0.0.4
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 +3 -172
- package/package.json +1 -1
- package/tag.component.d.ts +0 -2
- package/tag.component.js +0 -2
- package/tag.component.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -1,180 +1,11 @@
|
|
|
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 r=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 n;const l=window,a=l.trustedTypes,h=a?a.emptyScript:"",c=l.reactiveElementPolyfillSupport,d={toAttribute(t,i){switch(i){case Boolean:t=t?h: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}},u=(t,i)=>i!==t&&(i==i||t==t),v={attribute:!0,type:String,converter:d,reflect:!1,hasChanged:u},g="finalized";class f 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(g))return!1;this[g]=!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(r(t))}else void 0!==t&&i.push(r(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 r=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:d).toAttribute(i,s.type);this._$El=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),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),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:d;this._$El=o,this[o]=r.fromAttribute(i,t.type),this._$El=null}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||u)(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 p;f[g]=!0,f.elementProperties=new Map,f.elementStyles=[],f.shadowRootOptions={mode:"open"},null==c||c({ReactiveElement:f}),(null!==(n=l.reactiveElementVersions)&&void 0!==n?n:l.reactiveElementVersions=[]).push("1.6.3");const b=window,y=b.trustedTypes,m=y?y.createPolicy("lit-html",{createHTML:t=>t}):void 0,w="$lit$",$=`lit$${(Math.random()+"").slice(9)}$`,k="?"+$,_=`<${k}>`,A=document,S=()=>A.createComment(""),x=t=>null===t||"object"!=typeof t&&"function"!=typeof t,C=Array.isArray,E="[ \t\n\f\r]",O=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,j=/-->/g,T=/>/g,M=RegExp(`>|${E}(?:([^\\s"'>=/]+)(${E}*=${E}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),U=/'/g,R=/"/g,z=/^(?:script|style|textarea|title)$/i,N=Symbol.for("lit-noChange"),D=Symbol.for("lit-nothing"),P=new WeakMap,I=A.createTreeWalker(A,129,null,!1);function L(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==m?m.createHTML(i):i}class B{constructor({strings:t,_$litType$:i},s){let e;this.parts=[];let o=0,r=0;const n=t.length-1,l=this.parts,[a,h]=((t,i)=>{const s=t.length-1,e=[];let o,r=2===i?"<svg>":"",n=O;for(let i=0;i<s;i++){const s=t[i];let l,a,h=-1,c=0;for(;c<s.length&&(n.lastIndex=c,a=n.exec(s),null!==a);)c=n.lastIndex,n===O?"!--"===a[1]?n=j:void 0!==a[1]?n=T:void 0!==a[2]?(z.test(a[2])&&(o=RegExp("</"+a[2],"g")),n=M):void 0!==a[3]&&(n=M):n===M?">"===a[0]?(n=null!=o?o:O,h=-1):void 0===a[1]?h=-2:(h=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?M:'"'===a[3]?R:U):n===R||n===U?n=M:n===j||n===T?n=O:(n=M,o=void 0);const d=n===M&&t[i+1].startsWith("/>")?" ":"";r+=n===O?s+_:h>=0?(e.push(l),s.slice(0,h)+w+s.slice(h)+$+d):s+$+(-2===h?(e.push(void 0),i):d)}return[L(t,r+(t[s]||"<?>")+(2===i?"</svg>":"")),e]})(t,i);if(this.el=B.createElement(a,s),I.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(e=I.nextNode())&&l.length<n;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith(w)||i.startsWith($)){const s=h[r++];if(t.push(i),void 0!==s){const t=e.getAttribute(s.toLowerCase()+w).split($),i=/([.?@])?(.*)/.exec(s);l.push({type:1,index:o,name:i[2],strings:t,ctor:"."===i[1]?V:"?"===i[1]?Z:"@"===i[1]?J:H})}else l.push({type:6,index:o})}for(const i of t)e.removeAttribute(i)}if(z.test(e.tagName)){const t=e.textContent.split($),i=t.length-1;if(i>0){e.textContent=y?y.emptyScript:"";for(let s=0;s<i;s++)e.append(t[s],S()),I.nextNode(),l.push({type:2,index:++o});e.append(t[i],S())}}}else if(8===e.nodeType)if(e.data===k)l.push({type:2,index:o});else{let t=-1;for(;-1!==(t=e.data.indexOf($,t+1));)l.push({type:7,index:o}),t+=$.length-1}o++}}static createElement(t,i){const s=A.createElement("template");return s.innerHTML=t,s}}function F(t,i,s=t,e){var o,r,n,l;if(i===N)return i;let a=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const h=x(i)?void 0:i._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(r=null==a?void 0:a._$AO)||void 0===r||r.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,s,e)),void 0!==e?(null!==(n=(l=s)._$Co)&&void 0!==n?n:l._$Co=[])[e]=a:s._$Cl=a),void 0!==a&&(i=F(t,a._$AS(t,i.values),a,e)),i}class K{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);I.currentNode=o;let r=I.nextNode(),n=0,l=0,a=e[0];for(;void 0!==a;){if(n===a.index){let i;2===a.type?i=new q(r,r.nextSibling,this,t):1===a.type?i=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(i=new G(r,this,t)),this._$AV.push(i),a=e[++l]}n!==(null==a?void 0:a.index)&&(r=I.nextNode(),n++)}return I.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 q{constructor(t,i,s,e){var o;this.type=2,this._$AH=D,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=F(this,t,i),x(t)?t===D||null==t||""===t?(this._$AH!==D&&this._$AR(),this._$AH=D):t!==this._$AH&&t!==N&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>C(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!==D&&x(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=B.createElement(L(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 K(o,this),i=t.u(this.options);t.v(s),this.$(i),this._$AH=t}}_$AC(t){let i=P.get(t.strings);return void 0===i&&P.set(t.strings,i=new B(t)),i}T(t){C(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 q(this.k(S()),this.k(S()),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 H{constructor(t,i,s,e,o){this.type=1,this._$AH=D,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=D}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let r=!1;if(void 0===o)t=F(this,t,i,0),r=!x(t)||t!==this._$AH&&t!==N,r&&(this._$AH=t);else{const e=t;let n,l;for(t=o[0],n=0;n<o.length-1;n++)l=F(this,e[s+n],i,n),l===N&&(l=this._$AH[n]),r||(r=!x(l)||l!==this._$AH[n]),l===D?t=D:t!==D&&(t+=(null!=l?l:"")+o[n+1]),this._$AH[n]=l}r&&!e&&this.j(t)}j(t){t===D?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class V extends H{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===D?void 0:t}}const W=y?y.emptyScript:"";class Z extends H{constructor(){super(...arguments),this.type=4}j(t){t&&t!==D?this.element.setAttribute(this.name,W):this.element.removeAttribute(this.name)}}class J extends H{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=F(this,t,i,0))&&void 0!==s?s:D)===N)return;const e=this._$AH,o=t===D&&e!==D||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,r=t!==D&&(e===D||o);o&&this.element.removeEventListener(this.name,this,e),r&&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 G{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){F(this,t)}}const Q=b.litHtmlPolyfillSupport;
|
|
18
|
-
/**
|
|
19
|
-
* @license
|
|
20
|
-
* Copyright 2017 Google LLC
|
|
21
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/
|
|
23
|
-
var X;null==Q||Q(B,q),(null!==(p=b.litHtmlVersions)&&void 0!==p?p:b.litHtmlVersions=[]).push("2.8.0");const Y=window,tt=Y.trustedTypes,it=tt?tt.createPolicy("lit-html",{createHTML:t=>t}):void 0,st="$lit$",et=`lit$${(Math.random()+"").slice(9)}$`,ot="?"+et,rt=`<${ot}>`,nt=document,lt=()=>nt.createComment(""),at=t=>null===t||"object"!=typeof t&&"function"!=typeof t,ht=Array.isArray,ct="[ \t\n\f\r]",dt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ut=/-->/g,vt=/>/g,gt=RegExp(`>|${ct}(?:([^\\s"'>=/]+)(${ct}*=${ct}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),ft=/'/g,pt=/"/g,bt=/^(?:script|style|textarea|title)$/i,yt=(t=>(i,...s)=>({_$litType$:t,strings:i,values:s}))(1),mt=Symbol.for("lit-noChange"),wt=Symbol.for("lit-nothing"),$t=new WeakMap,kt=nt.createTreeWalker(nt,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,r=2===i?"<svg>":"",n=dt;for(let i=0;i<s;i++){const s=t[i];let l,a,h=-1,c=0;for(;c<s.length&&(n.lastIndex=c,a=n.exec(s),null!==a);)c=n.lastIndex,n===dt?"!--"===a[1]?n=ut:void 0!==a[1]?n=vt:void 0!==a[2]?(bt.test(a[2])&&(o=RegExp("</"+a[2],"g")),n=gt):void 0!==a[3]&&(n=gt):n===gt?">"===a[0]?(n=null!=o?o:dt,h=-1):void 0===a[1]?h=-2:(h=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?gt:'"'===a[3]?pt:ft):n===pt||n===ft?n=gt:n===ut||n===vt?n=dt:(n=gt,o=void 0);const d=n===gt&&t[i+1].startsWith("/>")?" ":"";r+=n===dt?s+rt:h>=0?(e.push(l),s.slice(0,h)+st+s.slice(h)+et+d):s+et+(-2===h?(e.push(void 0),i):d)}return[_t(t,r+(t[s]||"<?>")+(2===i?"</svg>":"")),e]};class St{constructor({strings:t,_$litType$:i},s){let e;this.parts=[];let o=0,r=0;const n=t.length-1,l=this.parts,[a,h]=At(t,i);if(this.el=St.createElement(a,s),kt.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(e=kt.nextNode())&&l.length<n;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith(st)||i.startsWith(et)){const s=h[r++];if(t.push(i),void 0!==s){const t=e.getAttribute(s.toLowerCase()+st).split(et),i=/([.?@])?(.*)/.exec(s);l.push({type:1,index:o,name:i[2],strings:t,ctor:"."===i[1]?jt:"?"===i[1]?Mt:"@"===i[1]?Ut:Ot})}else l.push({type:6,index:o})}for(const i of t)e.removeAttribute(i)}if(bt.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],lt()),kt.nextNode(),l.push({type:2,index:++o});e.append(t[i],lt())}}}else if(8===e.nodeType)if(e.data===ot)l.push({type:2,index:o});else{let t=-1;for(;-1!==(t=e.data.indexOf(et,t+1));)l.push({type:7,index:o}),t+=et.length-1}o++}}static createElement(t,i){const s=nt.createElement("template");return s.innerHTML=t,s}}function xt(t,i,s=t,e){var o,r,n,l;if(i===mt)return i;let a=void 0!==e?null===(o=s._$Co)||void 0===o?void 0:o[e]:s._$Cl;const h=at(i)?void 0:i._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(r=null==a?void 0:a._$AO)||void 0===r||r.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,s,e)),void 0!==e?(null!==(n=(l=s)._$Co)&&void 0!==n?n:l._$Co=[])[e]=a:s._$Cl=a),void 0!==a&&(i=xt(t,a._$AS(t,i.values),a,e)),i}class Ct{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:nt).importNode(s,!0);kt.currentNode=o;let r=kt.nextNode(),n=0,l=0,a=e[0];for(;void 0!==a;){if(n===a.index){let i;2===a.type?i=new Et(r,r.nextSibling,this,t):1===a.type?i=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(i=new Rt(r,this,t)),this._$AV.push(i),a=e[++l]}n!==(null==a?void 0:a.index)&&(r=kt.nextNode(),n++)}return kt.currentNode=nt,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 Et{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=xt(this,t,i),at(t)?t===wt||null==t||""===t?(this._$AH!==wt&&this._$AR(),this._$AH=wt):t!==this._$AH&&t!==mt&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>ht(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&&at(this._$AH)?this._$AA.nextSibling.data=t:this.$(nt.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=St.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 Ct(o,this),i=t.u(this.options);t.v(s),this.$(i),this._$AH=t}}_$AC(t){let i=$t.get(t.strings);return void 0===i&&$t.set(t.strings,i=new St(t)),i}T(t){ht(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 Et(this.k(lt()),this.k(lt()),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 Ot{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 r=!1;if(void 0===o)t=xt(this,t,i,0),r=!at(t)||t!==this._$AH&&t!==mt,r&&(this._$AH=t);else{const e=t;let n,l;for(t=o[0],n=0;n<o.length-1;n++)l=xt(this,e[s+n],i,n),l===mt&&(l=this._$AH[n]),r||(r=!at(l)||l!==this._$AH[n]),l===wt?t=wt:t!==wt&&(t+=(null!=l?l:"")+o[n+1]),this._$AH[n]=l}r&&!e&&this.j(t)}j(t){t===wt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class jt extends Ot{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===wt?void 0:t}}const Tt=tt?tt.emptyScript:"";class Mt extends Ot{constructor(){super(...arguments),this.type=4}j(t){t&&t!==wt?this.element.setAttribute(this.name,Tt):this.element.removeAttribute(this.name)}}class Ut extends Ot{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=xt(this,t,i,0))&&void 0!==s?s:wt)===mt)return;const e=this._$AH,o=t===wt&&e!==wt||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,r=t!==wt&&(e===wt||o);o&&this.element.removeEventListener(this.name,this,e),r&&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 Rt{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){xt(this,t)}}const zt=Y.litHtmlPolyfillSupport;null==zt||zt(St,Et),(null!==(X=Y.litHtmlVersions)&&void 0!==X?X:Y.litHtmlVersions=[]).push("2.8.0");
|
|
24
|
-
/**
|
|
25
|
-
* @license
|
|
26
|
-
* Copyright 2017 Google LLC
|
|
27
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
28
|
-
*/
|
|
29
|
-
var Nt,Dt;class Pt extends f{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 r=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let n=r._$litPart$;if(void 0===n){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;r._$litPart$=n=new Et(i.insertBefore(lt(),t),t,void 0,null!=s?s:{})}return n._$AI(t),n})(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 mt}}Pt.finalized=!0,Pt._$litElement$=!0,null===(Nt=globalThis.litElementHydrateSupport)||void 0===Nt||Nt.call(globalThis,{LitElement:Pt});const It=globalThis.litElementPolyfillSupport;null==It||It({LitElement:Pt}),(null!==(Dt=globalThis.litElementVersions)&&void 0!==Dt?Dt:globalThis.litElementVersions=[]).push("3.3.3");
|
|
30
|
-
/**
|
|
31
|
-
* @license
|
|
32
|
-
* Copyright 2017 Google LLC
|
|
33
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
34
|
-
*/
|
|
35
|
-
const Lt=(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)}},Bt=(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 Ft(t){return(i,s)=>void 0!==s?Bt(t,i,s):Lt(t,i)
|
|
41
|
-
/**
|
|
42
|
-
* @license
|
|
43
|
-
* Copyright 2017 Google LLC
|
|
44
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
45
|
-
*/}
|
|
46
|
-
/**
|
|
47
|
-
* @license
|
|
48
|
-
* Copyright 2021 Google LLC
|
|
49
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
50
|
-
*/
|
|
51
|
-
var Kt;null===(Kt=window.HTMLSlotElement)||void 0===Kt||Kt.prototype.assignedElements;
|
|
52
|
-
/**
|
|
53
|
-
* @license
|
|
54
|
-
* Copyright 2017 Google LLC
|
|
55
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
56
|
-
*/
|
|
57
|
-
const qt=1;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)}}
|
|
58
|
-
/**
|
|
59
|
-
* @license
|
|
60
|
-
* Copyright 2018 Google LLC
|
|
61
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
62
|
-
*/const Vt=(t=>(...i)=>({_$litDirective$:t,values:i}))(class extends Ht{constructor(t){var i;if(super(t),t.type!==qt||"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 N}}),Wt=((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)})`
|
|
63
|
-
:host { display: inline-block; }
|
|
64
|
-
|
|
65
|
-
.tag {
|
|
66
|
-
display: inline-flex;
|
|
67
|
-
align-items: center;
|
|
68
|
-
gap: var(--nuraly-tag-gap, 6px);
|
|
69
|
-
height: var(--nuraly-tag-height, auto);
|
|
70
|
-
padding: var(--nuraly-tag-padding-y, 0px) var(--nuraly-tag-padding-x, 8px);
|
|
71
|
-
font-family: var(--nuraly-font-family);
|
|
72
|
-
font-size: var(--nuraly-tag-font-size, var(--nuraly-font-size-sm));
|
|
73
|
-
line-height: 1;
|
|
74
|
-
color: var(--nuraly-tag-color, var(--nuraly-color-text));
|
|
75
|
-
background-color: var(--nuraly-tag-bg, var(--nuraly-color-background));
|
|
76
|
-
border: 1px solid var(--nuraly-tag-border-color, var(--nuraly-color-border));
|
|
77
|
-
border-radius: var(--nuraly-tag-radius, var(--nuraly-border-radius-sm));
|
|
78
|
-
transition: all var(--nuraly-transition-fast) ease;
|
|
79
|
-
user-select: none;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.tag--borderless { border-color: transparent; }
|
|
83
|
-
|
|
84
|
-
.tag--small {
|
|
85
|
-
padding: var(--nuraly-tag-padding-y-sm, 0px) var(--nuraly-tag-padding-x-sm, 6px);
|
|
86
|
-
font-size: var(--nuraly-tag-font-size-sm, var(--nuraly-font-size-xs));
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
/* Checkable behavior */
|
|
90
|
-
.tag--checkable { cursor: pointer; }
|
|
91
|
-
.tag--checkable:not(.tag--disabled):hover {
|
|
92
|
-
background-color: var(--nuraly-tag-checkable-hover-bg, var(--nuraly-color-background-hover));
|
|
93
|
-
}
|
|
94
|
-
.tag--checkable.tag--checked {
|
|
95
|
-
background-color: var(--nuraly-tag-checked-bg, var(--nuraly-color-primary-light));
|
|
96
|
-
color: var(--nuraly-tag-checked-color, var(--nuraly-color-primary-dark));
|
|
97
|
-
border-color: var(--nuraly-tag-checked-border-color, var(--nuraly-color-border-brand));
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.tag--disabled { opacity: 0.6; cursor: not-allowed; }
|
|
101
|
-
|
|
102
|
-
.tag__icon { display: inline-flex; align-items: center; }
|
|
103
|
-
.tag__content { display: inline-flex; align-items: center; }
|
|
104
|
-
|
|
105
|
-
.tag__close {
|
|
106
|
-
display: inline-flex;
|
|
107
|
-
align-items: center;
|
|
108
|
-
justify-content: center;
|
|
109
|
-
width: 16px;
|
|
110
|
-
height: 16px;
|
|
111
|
-
line-height: 1;
|
|
112
|
-
padding: 0;
|
|
113
|
-
border: none;
|
|
114
|
-
background: transparent;
|
|
115
|
-
color: currentColor;
|
|
116
|
-
cursor: pointer;
|
|
117
|
-
border-radius: var(--nuraly-border-radius-xs);
|
|
118
|
-
transition: background-color var(--nuraly-transition-fast) ease, opacity var(--nuraly-transition-fast) ease;
|
|
119
|
-
}
|
|
120
|
-
.tag__close:hover { background-color: var(--nuraly-color-background-hover); }
|
|
121
|
-
.tag__close:disabled { cursor: not-allowed; opacity: 0.6; }
|
|
122
|
-
|
|
123
|
-
/* Closing animation (height/opacity collapse) */
|
|
124
|
-
@keyframes tagFadeOut { from { opacity: 1; } to { opacity: 0; } }
|
|
125
|
-
.tag--closing { animation: tagFadeOut 0.2s ease forwards; }
|
|
126
|
-
|
|
127
|
-
/* Preset solid color tags similar to AntD */
|
|
128
|
-
.tag--magenta { background-color: #f759ab; border-color: #f759ab; color: #fff; }
|
|
129
|
-
.tag--red { background-color: #ff4d4f; border-color: #ff4d4f; color: #fff; }
|
|
130
|
-
.tag--volcano { background-color: #fa541c; border-color: #fa541c; color: #fff; }
|
|
131
|
-
.tag--orange { background-color: #fa8c16; border-color: #fa8c16; color: #fff; }
|
|
132
|
-
.tag--gold { background-color: #faad14; border-color: #faad14; color: rgba(0,0,0,0.88); }
|
|
133
|
-
.tag--lime { background-color: #a0d911; border-color: #a0d911; color: rgba(0,0,0,0.88); }
|
|
134
|
-
.tag--green { background-color: #52c41a; border-color: #52c41a; color: #fff; }
|
|
135
|
-
.tag--cyan { background-color: #13c2c2; border-color: #13c2c2; color: #fff; }
|
|
136
|
-
.tag--blue { background-color: #1677ff; border-color: #1677ff; color: #fff; }
|
|
137
|
-
.tag--geekblue { background-color: #2f54eb; border-color: #2f54eb; color: #fff; }
|
|
138
|
-
.tag--purple { background-color: #722ed1; border-color: #722ed1; color: #fff; }
|
|
139
|
-
|
|
140
|
-
/* Custom color tag hue via inline CSS variable */
|
|
141
|
-
.tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: var(--nuraly-color-text-on-color, #fff); }
|
|
142
|
-
`
|
|
143
|
-
/**
|
|
144
|
-
* @license
|
|
145
|
-
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
146
|
-
* SPDX-License-Identifier: MIT
|
|
147
|
-
*/,Zt=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))}},Jt=()=>{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)},Gt=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(Jt())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(!Jt())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)}},Qt=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}};
|
|
148
|
-
/**
|
|
149
|
-
* @license
|
|
150
|
-
* Copyright 2018 Google LLC
|
|
151
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
152
|
-
*/
|
|
1
|
+
import{css as r,LitElement as o,html as a,nothing as t}from"lit";import{property as e,state as l,customElement as c}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as i}from"lit/directives/if-defined.js";import{NuralyUIBaseMixin as n}from"@nuralyui/common/mixins";
|
|
153
2
|
/**
|
|
154
3
|
* @license
|
|
155
4
|
* Copyright 2025 Nuraly
|
|
156
5
|
* SPDX-License-Identifier: MIT
|
|
157
|
-
*/
|
|
158
|
-
var Xt=function(t,i,s,e){for(var o,r=arguments.length,n=r<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(i,s,n):o(i,s))||n);return r>3&&n&&Object.defineProperty(i,s,n),n};let Yt=class extends((t=>Gt(Zt(Qt(t))))(Pt)){constructor(){super(...arguments),this.bordered=!0,this.size="default",this.closable=!1,this.checkable=!1,this.checked=!1,this.disabled=!1,this.closing=!1}connectedCallback(){super.connectedCallback(),this.lightDomObserver=new MutationObserver((()=>{this.requestUpdate()})),this.lightDomObserver.observe(this,{childList:!0,subtree:!1,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){var t;null===(t=this.lightDomObserver)||void 0===t||t.disconnect(),this.lightDomObserver=void 0,super.disconnectedCallback()}onCloseClick(t){t.stopPropagation(),this.closable&&!this.disabled&&(this.closing=!0,setTimeout((()=>{this.dispatchEvent(new CustomEvent("nr-tag-close",{bubbles:!0,composed:!0})),this.closing=!1}),200))}onToggleChecked(){this.checkable&&!this.disabled&&(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-tag-checked-change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}isPreset(t){return!!t&&ti.has(t)}render(){const t=!!this.querySelector('[slot="icon"]'),i=!!this.color&&!this.isPreset(this.color),s=Object.assign(Object.assign({tag:!0,"tag--small":"small"===this.size,"tag--borderless":!this.bordered,"tag--closable":this.closable,"tag--checkable":this.checkable,"tag--checked":this.checkable&&this.checked,"tag--disabled":this.disabled,"tag--closing":this.closing},this.color&&this.isPreset(this.color)?{[`tag--${this.color}`]:!0}:{}),{"tag--custom":i}),e={};i&&this.color&&(e["--nr-tag-custom-bg"]=this.color);const o=this.checkable?"switch":"button",r=this.checkable?this.checked?"true":"false":void 0;return yt`
|
|
159
|
-
<span
|
|
160
|
-
class=${Vt(s)}
|
|
161
|
-
style=${Object.entries(e).map((([t,i])=>`${t}: ${i}`)).join(";")}
|
|
162
|
-
role=${o}
|
|
163
|
-
aria-pressed=${(t=>null!=t?t:D)
|
|
6
|
+
*/const d=r`:host{display:inline-block}.tag{display:inline-flex;align-items:center;gap:var(--nuraly-tag-gap,6px);height:var(--nuraly-tag-height,auto);padding:var(--nuraly-tag-padding-y,0) var(--nuraly-tag-padding-x,8px);font-family:var(--nuraly-font-family);font-size:var(--nuraly-tag-font-size,var(--nuraly-font-size-sm));line-height:1;color:var(--nuraly-tag-color,var(--nuraly-color-text));background-color:var(--nuraly-tag-bg,var(--nuraly-color-background));border:1px solid var(--nuraly-tag-border-color,var(--nuraly-color-border));border-radius:var(--nuraly-tag-radius,var(--nuraly-border-radius-sm));transition:all var(--nuraly-transition-fast) ease;user-select:none}.tag--borderless{border-color:transparent}.tag--small{padding:var(--nuraly-tag-padding-y-sm,0) var(--nuraly-tag-padding-x-sm,6px);font-size:var(--nuraly-tag-font-size-sm,var(--nuraly-font-size-xs))}.tag--checkable{cursor:pointer}.tag--checkable:not(.tag--disabled):hover{background-color:var(--nuraly-tag-checkable-hover-bg,var(--nuraly-color-background-hover))}.tag--checkable.tag--checked{background-color:var(--nuraly-tag-checked-bg,var(--nuraly-color-primary-light));color:var(--nuraly-tag-checked-color,var(--nuraly-color-primary-dark));border-color:var(--nuraly-tag-checked-border-color,var(--nuraly-color-border-brand))}.tag--disabled{opacity:.6;cursor:not-allowed}.tag__icon{display:inline-flex;align-items:center}.tag__content{display:inline-flex;align-items:center}.tag__close{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;line-height:1;padding:0;border:none;background:0 0;color:currentColor;cursor:pointer;border-radius:var(--nuraly-border-radius-xs);transition:background-color var(--nuraly-transition-fast) ease,opacity var(--nuraly-transition-fast) ease}.tag__close:hover{background-color:var(--nuraly-color-background-hover)}.tag__close:disabled{cursor:not-allowed;opacity:.6}@keyframes tagFadeOut{from{opacity:1}to{opacity:0}}.tag--closing{animation:tagFadeOut .2s ease forwards}.tag--magenta{background-color:#f759ab;border-color:#f759ab;color:#fff}.tag--red{background-color:#ff4d4f;border-color:#ff4d4f;color:#fff}.tag--volcano{background-color:#fa541c;border-color:#fa541c;color:#fff}.tag--orange{background-color:#fa8c16;border-color:#fa8c16;color:#fff}.tag--gold{background-color:#faad14;border-color:#faad14;color:rgba(0,0,0,.88)}.tag--lime{background-color:#a0d911;border-color:#a0d911;color:rgba(0,0,0,.88)}.tag--green{background-color:#52c41a;border-color:#52c41a;color:#fff}.tag--cyan{background-color:#13c2c2;border-color:#13c2c2;color:#fff}.tag--blue{background-color:#1677ff;border-color:#1677ff;color:#fff}.tag--geekblue{background-color:#2f54eb;border-color:#2f54eb;color:#fff}.tag--purple{background-color:#722ed1;border-color:#722ed1;color:#fff}.tag--custom{background-color:var(--nr-tag-custom-bg);border-color:var(--nr-tag-custom-bg);color:var(--nuraly-color-text-on-color,#fff)}`
|
|
164
7
|
/**
|
|
165
8
|
* @license
|
|
166
9
|
* Copyright 2025 Nuraly
|
|
167
10
|
* SPDX-License-Identifier: MIT
|
|
168
|
-
|
|
169
|
-
aria-disabled=${this.disabled?"true":"false"}
|
|
170
|
-
@click=${this.checkable?this.onToggleChecked:void 0}
|
|
171
|
-
>
|
|
172
|
-
${t?yt`<span class="tag__icon"><slot name="icon"></slot></span>`:wt}
|
|
173
|
-
<span class="tag__content"><slot></slot></span>
|
|
174
|
-
${this.closable?yt`
|
|
175
|
-
<button class="tag__close" part="close" aria-label="close" ?disabled=${this.disabled} @click=${this.onCloseClick}>
|
|
176
|
-
×
|
|
177
|
-
</button>
|
|
178
|
-
`:wt}
|
|
179
|
-
</span>
|
|
180
|
-
`}};Yt.styles=Wt,Xt([Ft({type:String})],Yt.prototype,"color",void 0),Xt([Ft({type:Boolean,reflect:!0})],Yt.prototype,"bordered",void 0),Xt([Ft({type:String})],Yt.prototype,"size",void 0),Xt([Ft({type:Boolean})],Yt.prototype,"closable",void 0),Xt([Ft({type:Boolean})],Yt.prototype,"checkable",void 0),Xt([Ft({type:Boolean,reflect:!0})],Yt.prototype,"checked",void 0),Xt([Ft({type:Boolean,reflect:!0})],Yt.prototype,"disabled",void 0),Xt([function(t){return Ft({...t,state:!0})}()],Yt.prototype,"closing",void 0),Yt=Xt([(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-tag")],Yt);const ti=new Set(["magenta","red","volcano","orange","gold","lime","green","cyan","blue","geekblue","purple"]);export{Yt as NrTagElement};
|
|
11
|
+
*/;var g=function(r,o,a,t){for(var e,l=arguments.length,c=l<3?o:null===t?t=Object.getOwnPropertyDescriptor(o,a):t,s=r.length-1;s>=0;s--)(e=r[s])&&(c=(l<3?e(c):l>3?e(o,a,c):e(o,a))||c);return l>3&&c&&Object.defineProperty(o,a,c),c};let u=class extends(n(o)){constructor(){super(...arguments),this.bordered=!0,this.size="default",this.closable=!1,this.checkable=!1,this.checked=!1,this.disabled=!1,this.closing=!1}connectedCallback(){super.connectedCallback(),this.lightDomObserver=new MutationObserver((()=>{this.requestUpdate()})),this.lightDomObserver.observe(this,{childList:!0,subtree:!1,attributes:!0,attributeFilter:["slot"]})}disconnectedCallback(){var r;null===(r=this.lightDomObserver)||void 0===r||r.disconnect(),this.lightDomObserver=void 0,super.disconnectedCallback()}onCloseClick(r){r.stopPropagation(),this.closable&&!this.disabled&&(this.closing=!0,setTimeout((()=>{this.dispatchEvent(new CustomEvent("nr-tag-close",{bubbles:!0,composed:!0})),this.closing=!1}),200))}onToggleChecked(){this.checkable&&!this.disabled&&(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-tag-checked-change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}isPreset(r){return!!r&&b.has(r)}render(){const r=!!this.querySelector('[slot="icon"]'),o=!!this.color&&!this.isPreset(this.color),e=Object.assign(Object.assign({tag:!0,"tag--small":"small"===this.size,"tag--borderless":!this.bordered,"tag--closable":this.closable,"tag--checkable":this.checkable,"tag--checked":this.checkable&&this.checked,"tag--disabled":this.disabled,"tag--closing":this.closing},this.color&&this.isPreset(this.color)?{[`tag--${this.color}`]:!0}:{}),{"tag--custom":o}),l={};o&&this.color&&(l["--nr-tag-custom-bg"]=this.color);const c=this.checkable?"switch":"button",n=this.checkable?this.checked?"true":"false":void 0;return a`<span class="${s(e)}" style="${Object.entries(l).map((([r,o])=>`${r}: ${o}`)).join(";")}" role="${c}" aria-pressed="${i(n)}" aria-disabled="${this.disabled?"true":"false"}" @click="${this.checkable?this.onToggleChecked:void 0}">${r?a`<span class="tag__icon"><slot name="icon"></slot></span>`:t} <span class="tag__content"><slot></slot></span>${this.closable?a`<button class="tag__close" part="close" aria-label="close" ?disabled="${this.disabled}" @click="${this.onCloseClick}">×</button>`:t}</span>`}};u.styles=d,g([e({type:String})],u.prototype,"color",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"bordered",void 0),g([e({type:String})],u.prototype,"size",void 0),g([e({type:Boolean})],u.prototype,"closable",void 0),g([e({type:Boolean})],u.prototype,"checkable",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"checked",void 0),g([e({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),g([l()],u.prototype,"closing",void 0),u=g([c("nr-tag")],u);const b=new Set(["magenta","red","volcano","orange","gold","lime","green","cyan","blue","geekblue","purple"]);export{u as NrTagElement};
|
package/package.json
CHANGED
package/tag.component.d.ts
CHANGED
|
@@ -8,8 +8,6 @@ import { TagSize } from './tag.types.js';
|
|
|
8
8
|
declare const NrTagElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
9
9
|
/**
|
|
10
10
|
* Tag component
|
|
11
|
-
* Inspired by Ant Design Tag: https://ant.design/components/tag
|
|
12
|
-
*
|
|
13
11
|
* Features:
|
|
14
12
|
* - Preset colors and custom color support
|
|
15
13
|
* - Closable tags with onClose event
|
package/tag.component.js
CHANGED
|
@@ -17,8 +17,6 @@ import { styles } from './tag.style.js';
|
|
|
17
17
|
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
18
18
|
/**
|
|
19
19
|
* Tag component
|
|
20
|
-
* Inspired by Ant Design Tag: https://ant.design/components/tag
|
|
21
|
-
*
|
|
22
20
|
* Features:
|
|
23
21
|
* - Preset colors and custom color support
|
|
24
22
|
* - Closable tags with onClose event
|
package/tag.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tag.component.js","sourceRoot":"","sources":["../../../src/components/tag/tag.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2025 Nuraly\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './tag.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { TagSize, type TagCheckedChangeDetail } from './tag.types.js';\n\n/**\n * Tag component\n * Inspired by Ant Design Tag: https://ant.design/components/tag\n *\n * Features:\n * - Preset colors and custom color support\n * - Closable tags with onClose event\n * - Checkable tags with checked state and change event\n * - Small size variant\n * - Disabled state\n * - Theme-aware through CSS variables\n *\n * @slot - Tag content\n * @slot icon - Optional leading icon\n * @fires nr-tag-close - when the close icon is clicked\n * @fires nr-tag-checked-change - when a checkable tag toggles\n */\n@customElement('nr-tag')\nexport class NrTagElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Tag color preset or custom color string (hex/rgb) */\n @property({ type: String })\n color?: string;\n\n /** Bordered style */\n @property({ type: Boolean, reflect: true })\n bordered = true;\n\n /** Small size */\n @property({ type: String })\n size: TagSize = TagSize.Default;\n\n /** Closable */\n @property({ type: Boolean })\n closable = false;\n\n /** Checkable */\n @property({ type: Boolean })\n checkable = false;\n\n /** Checked (for checkable) */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /** Disabled */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Internal closing anim state */\n @state() private closing = false;\n\n /** Track if an icon is actually provided via slot */\n private lightDomObserver?: MutationObserver;\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Observe light DOM children to detect when an icon slot is added/removed dynamically\n this.lightDomObserver = new MutationObserver(() => {\n // Trigger re-render so we can recompute hasIcon in render()\n this.requestUpdate();\n });\n this.lightDomObserver.observe(this, { childList: true, subtree: false, attributes: true, attributeFilter: ['slot'] });\n }\n\n override disconnectedCallback(): void {\n this.lightDomObserver?.disconnect();\n this.lightDomObserver = undefined;\n super.disconnectedCallback();\n }\n\n private onCloseClick(e: Event) {\n e.stopPropagation();\n if (!this.closable || this.disabled) return;\n this.closing = true;\n // match CSS animation duration ~200ms\n setTimeout(() => {\n this.dispatchEvent(new CustomEvent('nr-tag-close', { bubbles: true, composed: true }));\n // Consumers can remove the element on event; keep visible otherwise\n this.closing = false;\n }, 200);\n }\n\n private onToggleChecked() {\n if (!this.checkable || this.disabled) return;\n this.checked = !this.checked;\n this.dispatchEvent(new CustomEvent<TagCheckedChangeDetail>('nr-tag-checked-change', {\n detail: { checked: this.checked },\n bubbles: true,\n composed: true,\n }));\n }\n\n private isPreset(color?: string): boolean {\n if (!color) return false;\n return PRESET_COLOR_SET.has(color as string);\n }\n\n override render() {\n const hasIcon = !!this.querySelector('[slot=\"icon\"]');\n const isCustom = !!this.color && !this.isPreset(this.color as string);\n\n const classes = {\n tag: true,\n 'tag--small': this.size === TagSize.Small,\n 'tag--borderless': !this.bordered,\n 'tag--closable': this.closable,\n 'tag--checkable': this.checkable,\n 'tag--checked': this.checkable && this.checked,\n 'tag--disabled': this.disabled,\n 'tag--closing': this.closing,\n // preset color class e.g., tag--red\n ...(this.color && this.isPreset(this.color as string) ? { [`tag--${this.color}`]: true } : {}),\n // custom color modifier\n 'tag--custom': isCustom,\n };\n\n const styleMap: Record<string, string> = {};\n if (isCustom && this.color) {\n styleMap['--nr-tag-custom-bg'] = this.color as string;\n }\n\n const role = this.checkable ? 'switch' : 'button';\n const ariaPressed: 'true' | 'false' | undefined = this.checkable ? (this.checked ? 'true' : 'false') : undefined;\n\n return html`\n <span\n class=${classMap(classes)}\n style=${Object.entries(styleMap).map(([k, v]) => `${k}: ${v}`).join(';')}\n role=${role}\n aria-pressed=${ifDefined(ariaPressed)}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n @click=${this.checkable ? this.onToggleChecked : undefined}\n >\n ${hasIcon ? html`<span class=\"tag__icon\"><slot name=\"icon\"></slot></span>` : nothing}\n <span class=\"tag__content\"><slot></slot></span>\n ${this.closable ? html`\n <button class=\"tag__close\" part=\"close\" aria-label=\"close\" ?disabled=${this.disabled} @click=${this.onCloseClick}>\n ×\n </button>\n ` : nothing}\n </span>\n `;\n }\n}\n\nconst PRESET_COLOR_SET: Set<string> = new Set([\n 'magenta','red','volcano','orange','gold','lime','green','cyan','blue','geekblue','purple'\n]);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-tag': NrTagElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tag.component.js","sourceRoot":"","sources":["../../../src/components/tag/tag.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2025 Nuraly\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './tag.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { TagSize, type TagCheckedChangeDetail } from './tag.types.js';\n\n/**\n * Tag component\n * Features:\n * - Preset colors and custom color support\n * - Closable tags with onClose event\n * - Checkable tags with checked state and change event\n * - Small size variant\n * - Disabled state\n * - Theme-aware through CSS variables\n *\n * @slot - Tag content\n * @slot icon - Optional leading icon\n * @fires nr-tag-close - when the close icon is clicked\n * @fires nr-tag-checked-change - when a checkable tag toggles\n */\n@customElement('nr-tag')\nexport class NrTagElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n /** Tag color preset or custom color string (hex/rgb) */\n @property({ type: String })\n color?: string;\n\n /** Bordered style */\n @property({ type: Boolean, reflect: true })\n bordered = true;\n\n /** Small size */\n @property({ type: String })\n size: TagSize = TagSize.Default;\n\n /** Closable */\n @property({ type: Boolean })\n closable = false;\n\n /** Checkable */\n @property({ type: Boolean })\n checkable = false;\n\n /** Checked (for checkable) */\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /** Disabled */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Internal closing anim state */\n @state() private closing = false;\n\n /** Track if an icon is actually provided via slot */\n private lightDomObserver?: MutationObserver;\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Observe light DOM children to detect when an icon slot is added/removed dynamically\n this.lightDomObserver = new MutationObserver(() => {\n // Trigger re-render so we can recompute hasIcon in render()\n this.requestUpdate();\n });\n this.lightDomObserver.observe(this, { childList: true, subtree: false, attributes: true, attributeFilter: ['slot'] });\n }\n\n override disconnectedCallback(): void {\n this.lightDomObserver?.disconnect();\n this.lightDomObserver = undefined;\n super.disconnectedCallback();\n }\n\n private onCloseClick(e: Event) {\n e.stopPropagation();\n if (!this.closable || this.disabled) return;\n this.closing = true;\n // match CSS animation duration ~200ms\n setTimeout(() => {\n this.dispatchEvent(new CustomEvent('nr-tag-close', { bubbles: true, composed: true }));\n // Consumers can remove the element on event; keep visible otherwise\n this.closing = false;\n }, 200);\n }\n\n private onToggleChecked() {\n if (!this.checkable || this.disabled) return;\n this.checked = !this.checked;\n this.dispatchEvent(new CustomEvent<TagCheckedChangeDetail>('nr-tag-checked-change', {\n detail: { checked: this.checked },\n bubbles: true,\n composed: true,\n }));\n }\n\n private isPreset(color?: string): boolean {\n if (!color) return false;\n return PRESET_COLOR_SET.has(color as string);\n }\n\n override render() {\n const hasIcon = !!this.querySelector('[slot=\"icon\"]');\n const isCustom = !!this.color && !this.isPreset(this.color as string);\n\n const classes = {\n tag: true,\n 'tag--small': this.size === TagSize.Small,\n 'tag--borderless': !this.bordered,\n 'tag--closable': this.closable,\n 'tag--checkable': this.checkable,\n 'tag--checked': this.checkable && this.checked,\n 'tag--disabled': this.disabled,\n 'tag--closing': this.closing,\n // preset color class e.g., tag--red\n ...(this.color && this.isPreset(this.color as string) ? { [`tag--${this.color}`]: true } : {}),\n // custom color modifier\n 'tag--custom': isCustom,\n };\n\n const styleMap: Record<string, string> = {};\n if (isCustom && this.color) {\n styleMap['--nr-tag-custom-bg'] = this.color as string;\n }\n\n const role = this.checkable ? 'switch' : 'button';\n const ariaPressed: 'true' | 'false' | undefined = this.checkable ? (this.checked ? 'true' : 'false') : undefined;\n\n return html`\n <span\n class=${classMap(classes)}\n style=${Object.entries(styleMap).map(([k, v]) => `${k}: ${v}`).join(';')}\n role=${role}\n aria-pressed=${ifDefined(ariaPressed)}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n @click=${this.checkable ? this.onToggleChecked : undefined}\n >\n ${hasIcon ? html`<span class=\"tag__icon\"><slot name=\"icon\"></slot></span>` : nothing}\n <span class=\"tag__content\"><slot></slot></span>\n ${this.closable ? html`\n <button class=\"tag__close\" part=\"close\" aria-label=\"close\" ?disabled=${this.disabled} @click=${this.onCloseClick}>\n ×\n </button>\n ` : nothing}\n </span>\n `;\n }\n}\n\nconst PRESET_COLOR_SET: Set<string> = new Set([\n 'magenta','red','volcano','orange','gold','lime','green','cyan','blue','geekblue','purple'\n]);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-tag': NrTagElement;\n }\n}\n"]}
|