@nuralyui/tag 0.0.1
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 +180 -0
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/index.js.map +1 -0
- package/package.json +28 -0
- package/react.d.ts +6 -0
- package/react.js +13 -0
- package/react.js.map +1 -0
- package/tag.component.d.ts +55 -0
- package/tag.component.js +143 -0
- package/tag.component.js.map +1 -0
- package/tag.style.d.ts +7 -0
- package/tag.style.js +88 -0
- package/tag.style.js.map +1 -0
- package/tag.types.d.ts +28 -0
- package/tag.types.js +7 -0
- package/tag.types.js.map +1 -0
package/bundle.js
ADDED
|
@@ -0,0 +1,180 @@
|
|
|
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,E=Array.isArray,C="[ \t\n\f\r]",j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,O=/-->/g,T=/>/g,U=RegExp(`>|${C}(?:([^\\s"'>=/]+)(${C}*=${C}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),M=/'/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 B(t,i){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==m?m.createHTML(i):i}class L{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=j;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===j?"!--"===a[1]?n=O:void 0!==a[1]?n=T:void 0!==a[2]?(z.test(a[2])&&(o=RegExp("</"+a[2],"g")),n=U):void 0!==a[3]&&(n=U):n===U?">"===a[0]?(n=null!=o?o:j,h=-1):void 0===a[1]?h=-2:(h=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?U:'"'===a[3]?R:M):n===R||n===M?n=U:n===O||n===T?n=j:(n=U,o=void 0);const d=n===U&&t[i+1].startsWith("/>")?" ":"";r+=n===j?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[B(t,r+(t[s]||"<?>")+(2===i?"</svg>":"")),e]})(t,i);if(this.el=L.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 K(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=K(t,a._$AS(t,i.values),a,e)),i}class q{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 F(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 F{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=K(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=>E(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=L.createElement(B(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 q(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 L(t)),i}T(t){E(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 F(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=K(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=K(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=K(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){K(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(L,F),(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]?Ot:"?"===i[1]?Ut:"@"===i[1]?Mt:jt})}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 Et{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 Ct(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 Ct{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 Et(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 Ct(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 jt{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 Ot extends jt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===wt?void 0:t}}const Tt=tt?tt.emptyScript:"";class Ut extends jt{constructor(){super(...arguments),this.type=4}j(t){t&&t!==wt?this.element.setAttribute(this.name,Tt):this.element.removeAttribute(this.name)}}class Mt extends jt{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,Ct),(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 Ct(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 Bt=(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)}},Lt=(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 Kt(t){return(i,s)=>void 0!==s?Lt(t,i,s):Bt(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 qt;null===(qt=window.HTMLSlotElement)||void 0===qt||qt.prototype.assignedElements;
|
|
52
|
+
/**
|
|
53
|
+
* @license
|
|
54
|
+
* Copyright 2017 Google LLC
|
|
55
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
56
|
+
*/
|
|
57
|
+
const Ft=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!==Ft||"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
|
+
*/
|
|
153
|
+
/**
|
|
154
|
+
* @license
|
|
155
|
+
* Copyright 2025 Nuraly
|
|
156
|
+
* 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}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.color&&!this.isPreset(this.color),i=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":t}),s={};t&&this.color&&(s["--nr-tag-custom-bg"]=this.color);const e=this.checkable?"switch":"button",o=this.checkable?this.checked?"true":"false":void 0;return yt`
|
|
159
|
+
<span
|
|
160
|
+
class=${Vt(i)}
|
|
161
|
+
style=${Object.entries(s).map((([t,i])=>`${t}: ${i}`)).join(";")}
|
|
162
|
+
role=${e}
|
|
163
|
+
aria-pressed=${(t=>null!=t?t:D)
|
|
164
|
+
/**
|
|
165
|
+
* @license
|
|
166
|
+
* Copyright 2025 Nuraly
|
|
167
|
+
* SPDX-License-Identifier: MIT
|
|
168
|
+
*/(o)}
|
|
169
|
+
aria-disabled=${this.disabled?"true":"false"}
|
|
170
|
+
@click=${this.checkable?this.onToggleChecked:void 0}
|
|
171
|
+
>
|
|
172
|
+
<span class="tag__icon"><slot name="icon"></slot></span>
|
|
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([Kt({type:String})],Yt.prototype,"color",void 0),Xt([Kt({type:Boolean,reflect:!0})],Yt.prototype,"bordered",void 0),Xt([Kt({type:String})],Yt.prototype,"size",void 0),Xt([Kt({type:Boolean})],Yt.prototype,"closable",void 0),Xt([Kt({type:Boolean})],Yt.prototype,"checkable",void 0),Xt([Kt({type:Boolean,reflect:!0})],Yt.prototype,"checked",void 0),Xt([Kt({type:Boolean,reflect:!0})],Yt.prototype,"disabled",void 0),Xt([function(t){return Kt({...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};
|
package/index.d.ts
ADDED
package/index.js
ADDED
package/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './tag.component.js';\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nuralyui/tag",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Tag component for NuralyUI library",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": { "import": "./index.js" },
|
|
9
|
+
"./bundle": { "import": "./bundle.js" }
|
|
10
|
+
},
|
|
11
|
+
"files": [
|
|
12
|
+
"*.js",
|
|
13
|
+
"*.d.ts",
|
|
14
|
+
"*.js.map",
|
|
15
|
+
"tag.bundled.js",
|
|
16
|
+
"bundle.js"
|
|
17
|
+
],
|
|
18
|
+
"repository": {
|
|
19
|
+
"type": "git",
|
|
20
|
+
"url": "https://github.com/NuralyUI/NuralyUI.git",
|
|
21
|
+
"directory": "src/components/tag"
|
|
22
|
+
},
|
|
23
|
+
"keywords": ["tag", "label", "chip", "web-components", "lit", "nuralyui"],
|
|
24
|
+
"author": "Nuraly",
|
|
25
|
+
"license": "MIT",
|
|
26
|
+
"bugs": { "url": "https://github.com/NuralyUI/NuralyUI/issues" },
|
|
27
|
+
"homepage": "https://github.com/NuralyUI/NuralyUI#readme"
|
|
28
|
+
}
|
package/react.d.ts
ADDED
package/react.js
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createComponent } from '@lit-labs/react';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { NrTagElement } from './tag.component.js';
|
|
4
|
+
export const NrTag = createComponent({
|
|
5
|
+
tagName: 'nr-tag',
|
|
6
|
+
elementClass: NrTagElement,
|
|
7
|
+
react: React,
|
|
8
|
+
events: {
|
|
9
|
+
'nr-tag-close': 'nr-tag-close',
|
|
10
|
+
'nr-tag-checked-change': 'nr-tag-checked-change',
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
|
+
//# sourceMappingURL=react.js.map
|
package/react.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/tag/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,CAAC,MAAM,KAAK,GAAG,eAAe,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,cAAc,EAAE,cAAc;QAC9B,uBAAuB,EAAE,uBAAuB;KACjD;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrTagElement } from './tag.component.js';\n\nexport const NrTag = createComponent({\n tagName: 'nr-tag',\n elementClass: NrTagElement,\n react: React,\n events: {\n 'nr-tag-close': 'nr-tag-close',\n 'nr-tag-checked-change': 'nr-tag-checked-change',\n },\n});\n"]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2025 Nuraly
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { LitElement } from 'lit';
|
|
7
|
+
import { TagSize } from './tag.types.js';
|
|
8
|
+
declare const NrTagElement_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;
|
|
9
|
+
/**
|
|
10
|
+
* Tag component
|
|
11
|
+
* Inspired by Ant Design Tag: https://ant.design/components/tag
|
|
12
|
+
*
|
|
13
|
+
* Features:
|
|
14
|
+
* - Preset colors and custom color support
|
|
15
|
+
* - Closable tags with onClose event
|
|
16
|
+
* - Checkable tags with checked state and change event
|
|
17
|
+
* - Small size variant
|
|
18
|
+
* - Disabled state
|
|
19
|
+
* - Theme-aware through CSS variables
|
|
20
|
+
*
|
|
21
|
+
* @slot - Tag content
|
|
22
|
+
* @slot icon - Optional leading icon
|
|
23
|
+
* @fires nr-tag-close - when the close icon is clicked
|
|
24
|
+
* @fires nr-tag-checked-change - when a checkable tag toggles
|
|
25
|
+
*/
|
|
26
|
+
export declare class NrTagElement extends NrTagElement_base {
|
|
27
|
+
static styles: import("lit").CSSResult;
|
|
28
|
+
/** Tag color preset or custom color string (hex/rgb) */
|
|
29
|
+
color?: string;
|
|
30
|
+
/** Bordered style */
|
|
31
|
+
bordered: boolean;
|
|
32
|
+
/** Small size */
|
|
33
|
+
size: TagSize;
|
|
34
|
+
/** Closable */
|
|
35
|
+
closable: boolean;
|
|
36
|
+
/** Checkable */
|
|
37
|
+
checkable: boolean;
|
|
38
|
+
/** Checked (for checkable) */
|
|
39
|
+
checked: boolean;
|
|
40
|
+
/** Disabled */
|
|
41
|
+
disabled: boolean;
|
|
42
|
+
/** Internal closing anim state */
|
|
43
|
+
private closing;
|
|
44
|
+
private onCloseClick;
|
|
45
|
+
private onToggleChecked;
|
|
46
|
+
private isPreset;
|
|
47
|
+
render(): import("lit").TemplateResult<1>;
|
|
48
|
+
}
|
|
49
|
+
declare global {
|
|
50
|
+
interface HTMLElementTagNameMap {
|
|
51
|
+
'nr-tag': NrTagElement;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
export {};
|
|
55
|
+
//# sourceMappingURL=tag.component.d.ts.map
|
package/tag.component.js
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2025 Nuraly
|
|
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, nothing } from 'lit';
|
|
13
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
14
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
15
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
16
|
+
import { styles } from './tag.style.js';
|
|
17
|
+
import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
|
|
18
|
+
/**
|
|
19
|
+
* Tag component
|
|
20
|
+
* Inspired by Ant Design Tag: https://ant.design/components/tag
|
|
21
|
+
*
|
|
22
|
+
* Features:
|
|
23
|
+
* - Preset colors and custom color support
|
|
24
|
+
* - Closable tags with onClose event
|
|
25
|
+
* - Checkable tags with checked state and change event
|
|
26
|
+
* - Small size variant
|
|
27
|
+
* - Disabled state
|
|
28
|
+
* - Theme-aware through CSS variables
|
|
29
|
+
*
|
|
30
|
+
* @slot - Tag content
|
|
31
|
+
* @slot icon - Optional leading icon
|
|
32
|
+
* @fires nr-tag-close - when the close icon is clicked
|
|
33
|
+
* @fires nr-tag-checked-change - when a checkable tag toggles
|
|
34
|
+
*/
|
|
35
|
+
let NrTagElement = class NrTagElement extends NuralyUIBaseMixin(LitElement) {
|
|
36
|
+
constructor() {
|
|
37
|
+
super(...arguments);
|
|
38
|
+
/** Bordered style */
|
|
39
|
+
this.bordered = true;
|
|
40
|
+
/** Small size */
|
|
41
|
+
this.size = "default" /* TagSize.Default */;
|
|
42
|
+
/** Closable */
|
|
43
|
+
this.closable = false;
|
|
44
|
+
/** Checkable */
|
|
45
|
+
this.checkable = false;
|
|
46
|
+
/** Checked (for checkable) */
|
|
47
|
+
this.checked = false;
|
|
48
|
+
/** Disabled */
|
|
49
|
+
this.disabled = false;
|
|
50
|
+
/** Internal closing anim state */
|
|
51
|
+
this.closing = false;
|
|
52
|
+
}
|
|
53
|
+
onCloseClick(e) {
|
|
54
|
+
e.stopPropagation();
|
|
55
|
+
if (!this.closable || this.disabled)
|
|
56
|
+
return;
|
|
57
|
+
this.closing = true;
|
|
58
|
+
// match CSS animation duration ~200ms
|
|
59
|
+
setTimeout(() => {
|
|
60
|
+
this.dispatchEvent(new CustomEvent('nr-tag-close', { bubbles: true, composed: true }));
|
|
61
|
+
// Consumers can remove the element on event; keep visible otherwise
|
|
62
|
+
this.closing = false;
|
|
63
|
+
}, 200);
|
|
64
|
+
}
|
|
65
|
+
onToggleChecked() {
|
|
66
|
+
if (!this.checkable || this.disabled)
|
|
67
|
+
return;
|
|
68
|
+
this.checked = !this.checked;
|
|
69
|
+
this.dispatchEvent(new CustomEvent('nr-tag-checked-change', {
|
|
70
|
+
detail: { checked: this.checked },
|
|
71
|
+
bubbles: true,
|
|
72
|
+
composed: true,
|
|
73
|
+
}));
|
|
74
|
+
}
|
|
75
|
+
isPreset(color) {
|
|
76
|
+
if (!color)
|
|
77
|
+
return false;
|
|
78
|
+
return PRESET_COLOR_SET.has(color);
|
|
79
|
+
}
|
|
80
|
+
render() {
|
|
81
|
+
const isCustom = !!this.color && !this.isPreset(this.color);
|
|
82
|
+
const classes = Object.assign(Object.assign({ tag: true, 'tag--small': this.size === "small" /* TagSize.Small */, '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}`]: true } : {})), {
|
|
83
|
+
// custom color modifier
|
|
84
|
+
'tag--custom': isCustom });
|
|
85
|
+
const styleMap = {};
|
|
86
|
+
if (isCustom && this.color) {
|
|
87
|
+
styleMap['--nr-tag-custom-bg'] = this.color;
|
|
88
|
+
}
|
|
89
|
+
const role = this.checkable ? 'switch' : 'button';
|
|
90
|
+
const ariaPressed = this.checkable ? (this.checked ? 'true' : 'false') : undefined;
|
|
91
|
+
return html `
|
|
92
|
+
<span
|
|
93
|
+
class=${classMap(classes)}
|
|
94
|
+
style=${Object.entries(styleMap).map(([k, v]) => `${k}: ${v}`).join(';')}
|
|
95
|
+
role=${role}
|
|
96
|
+
aria-pressed=${ifDefined(ariaPressed)}
|
|
97
|
+
aria-disabled=${this.disabled ? 'true' : 'false'}
|
|
98
|
+
@click=${this.checkable ? this.onToggleChecked : undefined}
|
|
99
|
+
>
|
|
100
|
+
<span class="tag__icon"><slot name="icon"></slot></span>
|
|
101
|
+
<span class="tag__content"><slot></slot></span>
|
|
102
|
+
${this.closable ? html `
|
|
103
|
+
<button class="tag__close" part="close" aria-label="close" ?disabled=${this.disabled} @click=${this.onCloseClick}>
|
|
104
|
+
×
|
|
105
|
+
</button>
|
|
106
|
+
` : nothing}
|
|
107
|
+
</span>
|
|
108
|
+
`;
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
NrTagElement.styles = styles;
|
|
112
|
+
__decorate([
|
|
113
|
+
property({ type: String })
|
|
114
|
+
], NrTagElement.prototype, "color", void 0);
|
|
115
|
+
__decorate([
|
|
116
|
+
property({ type: Boolean, reflect: true })
|
|
117
|
+
], NrTagElement.prototype, "bordered", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
property({ type: String })
|
|
120
|
+
], NrTagElement.prototype, "size", void 0);
|
|
121
|
+
__decorate([
|
|
122
|
+
property({ type: Boolean })
|
|
123
|
+
], NrTagElement.prototype, "closable", void 0);
|
|
124
|
+
__decorate([
|
|
125
|
+
property({ type: Boolean })
|
|
126
|
+
], NrTagElement.prototype, "checkable", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property({ type: Boolean, reflect: true })
|
|
129
|
+
], NrTagElement.prototype, "checked", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
property({ type: Boolean, reflect: true })
|
|
132
|
+
], NrTagElement.prototype, "disabled", void 0);
|
|
133
|
+
__decorate([
|
|
134
|
+
state()
|
|
135
|
+
], NrTagElement.prototype, "closing", void 0);
|
|
136
|
+
NrTagElement = __decorate([
|
|
137
|
+
customElement('nr-tag')
|
|
138
|
+
], NrTagElement);
|
|
139
|
+
export { NrTagElement };
|
|
140
|
+
const PRESET_COLOR_SET = new Set([
|
|
141
|
+
'magenta', 'red', 'volcano', 'orange', 'gold', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple'
|
|
142
|
+
]);
|
|
143
|
+
//# sourceMappingURL=tag.component.js.map
|
|
@@ -0,0 +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 '../../shared/base-mixin.js';\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 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 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 <span class=\"tag__icon\"><slot name=\"icon\"></slot></span>\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"]}
|
package/tag.style.d.ts
ADDED
package/tag.style.js
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2025 Nuraly
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
import { css } from 'lit';
|
|
7
|
+
export const styles = css `
|
|
8
|
+
:host { display: inline-block; }
|
|
9
|
+
|
|
10
|
+
.tag {
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: var(--nuraly-tag-gap, 6px);
|
|
14
|
+
height: var(--nuraly-tag-height, auto);
|
|
15
|
+
padding: var(--nuraly-tag-padding-y, 0px) var(--nuraly-tag-padding-x, 8px);
|
|
16
|
+
font-family: var(--nuraly-font-family);
|
|
17
|
+
font-size: var(--nuraly-tag-font-size, var(--nuraly-font-size-sm));
|
|
18
|
+
line-height: 1;
|
|
19
|
+
color: var(--nuraly-tag-color, var(--nuraly-color-text));
|
|
20
|
+
background-color: var(--nuraly-tag-bg, var(--nuraly-color-background));
|
|
21
|
+
border: 1px solid var(--nuraly-tag-border-color, var(--nuraly-color-border));
|
|
22
|
+
border-radius: var(--nuraly-tag-radius, var(--nuraly-border-radius-sm));
|
|
23
|
+
transition: all var(--nuraly-transition-fast) ease;
|
|
24
|
+
user-select: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.tag--borderless { border-color: transparent; }
|
|
28
|
+
|
|
29
|
+
.tag--small {
|
|
30
|
+
padding: var(--nuraly-tag-padding-y-sm, 0px) var(--nuraly-tag-padding-x-sm, 6px);
|
|
31
|
+
font-size: var(--nuraly-tag-font-size-sm, var(--nuraly-font-size-xs));
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Checkable behavior */
|
|
35
|
+
.tag--checkable { cursor: pointer; }
|
|
36
|
+
.tag--checkable:not(.tag--disabled):hover {
|
|
37
|
+
background-color: var(--nuraly-tag-checkable-hover-bg, var(--nuraly-color-background-hover));
|
|
38
|
+
}
|
|
39
|
+
.tag--checkable.tag--checked {
|
|
40
|
+
background-color: var(--nuraly-tag-checked-bg, var(--nuraly-color-primary-light));
|
|
41
|
+
color: var(--nuraly-tag-checked-color, var(--nuraly-color-primary-dark));
|
|
42
|
+
border-color: var(--nuraly-tag-checked-border-color, var(--nuraly-color-border-brand));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.tag--disabled { opacity: 0.6; cursor: not-allowed; }
|
|
46
|
+
|
|
47
|
+
.tag__icon { display: inline-flex; align-items: center; }
|
|
48
|
+
.tag__content { display: inline-flex; align-items: center; }
|
|
49
|
+
|
|
50
|
+
.tag__close {
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
width: 16px;
|
|
55
|
+
height: 16px;
|
|
56
|
+
line-height: 1;
|
|
57
|
+
padding: 0;
|
|
58
|
+
border: none;
|
|
59
|
+
background: transparent;
|
|
60
|
+
color: currentColor;
|
|
61
|
+
cursor: pointer;
|
|
62
|
+
border-radius: var(--nuraly-border-radius-xs);
|
|
63
|
+
transition: background-color var(--nuraly-transition-fast) ease, opacity var(--nuraly-transition-fast) ease;
|
|
64
|
+
}
|
|
65
|
+
.tag__close:hover { background-color: var(--nuraly-color-background-hover); }
|
|
66
|
+
.tag__close:disabled { cursor: not-allowed; opacity: 0.6; }
|
|
67
|
+
|
|
68
|
+
/* Closing animation (height/opacity collapse) */
|
|
69
|
+
@keyframes tagFadeOut { from { opacity: 1; } to { opacity: 0; } }
|
|
70
|
+
.tag--closing { animation: tagFadeOut 0.2s ease forwards; }
|
|
71
|
+
|
|
72
|
+
/* Preset solid color tags similar to AntD */
|
|
73
|
+
.tag--magenta { background-color: #f759ab; border-color: #f759ab; color: #fff; }
|
|
74
|
+
.tag--red { background-color: #ff4d4f; border-color: #ff4d4f; color: #fff; }
|
|
75
|
+
.tag--volcano { background-color: #fa541c; border-color: #fa541c; color: #fff; }
|
|
76
|
+
.tag--orange { background-color: #fa8c16; border-color: #fa8c16; color: #fff; }
|
|
77
|
+
.tag--gold { background-color: #faad14; border-color: #faad14; color: rgba(0,0,0,0.88); }
|
|
78
|
+
.tag--lime { background-color: #a0d911; border-color: #a0d911; color: rgba(0,0,0,0.88); }
|
|
79
|
+
.tag--green { background-color: #52c41a; border-color: #52c41a; color: #fff; }
|
|
80
|
+
.tag--cyan { background-color: #13c2c2; border-color: #13c2c2; color: #fff; }
|
|
81
|
+
.tag--blue { background-color: #1677ff; border-color: #1677ff; color: #fff; }
|
|
82
|
+
.tag--geekblue { background-color: #2f54eb; border-color: #2f54eb; color: #fff; }
|
|
83
|
+
.tag--purple { background-color: #722ed1; border-color: #722ed1; color: #fff; }
|
|
84
|
+
|
|
85
|
+
/* Custom color tag hue via inline CSS variable */
|
|
86
|
+
.tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: var(--nuraly-color-text-on-color, #fff); }
|
|
87
|
+
`;
|
|
88
|
+
//# sourceMappingURL=tag.style.js.map
|
package/tag.style.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tag.style.js","sourceRoot":"","sources":["../../../src/components/tag/tag.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2025 Nuraly\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n :host { display: inline-block; }\n\n .tag {\n display: inline-flex;\n align-items: center;\n gap: var(--nuraly-tag-gap, 6px);\n height: var(--nuraly-tag-height, auto);\n padding: var(--nuraly-tag-padding-y, 0px) var(--nuraly-tag-padding-x, 8px);\n font-family: var(--nuraly-font-family);\n font-size: var(--nuraly-tag-font-size, var(--nuraly-font-size-sm));\n line-height: 1;\n color: var(--nuraly-tag-color, var(--nuraly-color-text));\n background-color: var(--nuraly-tag-bg, var(--nuraly-color-background));\n border: 1px solid var(--nuraly-tag-border-color, var(--nuraly-color-border));\n border-radius: var(--nuraly-tag-radius, var(--nuraly-border-radius-sm));\n transition: all var(--nuraly-transition-fast) ease;\n user-select: none;\n }\n\n .tag--borderless { border-color: transparent; }\n\n .tag--small {\n padding: var(--nuraly-tag-padding-y-sm, 0px) var(--nuraly-tag-padding-x-sm, 6px);\n font-size: var(--nuraly-tag-font-size-sm, var(--nuraly-font-size-xs));\n }\n\n /* Checkable behavior */\n .tag--checkable { cursor: pointer; }\n .tag--checkable:not(.tag--disabled):hover {\n background-color: var(--nuraly-tag-checkable-hover-bg, var(--nuraly-color-background-hover));\n }\n .tag--checkable.tag--checked {\n background-color: var(--nuraly-tag-checked-bg, var(--nuraly-color-primary-light));\n color: var(--nuraly-tag-checked-color, var(--nuraly-color-primary-dark));\n border-color: var(--nuraly-tag-checked-border-color, var(--nuraly-color-border-brand));\n }\n\n .tag--disabled { opacity: 0.6; cursor: not-allowed; }\n\n .tag__icon { display: inline-flex; align-items: center; }\n .tag__content { display: inline-flex; align-items: center; }\n\n .tag__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n line-height: 1;\n padding: 0;\n border: none;\n background: transparent;\n color: currentColor;\n cursor: pointer;\n border-radius: var(--nuraly-border-radius-xs);\n transition: background-color var(--nuraly-transition-fast) ease, opacity var(--nuraly-transition-fast) ease;\n }\n .tag__close:hover { background-color: var(--nuraly-color-background-hover); }\n .tag__close:disabled { cursor: not-allowed; opacity: 0.6; }\n\n /* Closing animation (height/opacity collapse) */\n @keyframes tagFadeOut { from { opacity: 1; } to { opacity: 0; } }\n .tag--closing { animation: tagFadeOut 0.2s ease forwards; }\n\n /* Preset solid color tags similar to AntD */\n .tag--magenta { background-color: #f759ab; border-color: #f759ab; color: #fff; }\n .tag--red { background-color: #ff4d4f; border-color: #ff4d4f; color: #fff; }\n .tag--volcano { background-color: #fa541c; border-color: #fa541c; color: #fff; }\n .tag--orange { background-color: #fa8c16; border-color: #fa8c16; color: #fff; }\n .tag--gold { background-color: #faad14; border-color: #faad14; color: rgba(0,0,0,0.88); }\n .tag--lime { background-color: #a0d911; border-color: #a0d911; color: rgba(0,0,0,0.88); }\n .tag--green { background-color: #52c41a; border-color: #52c41a; color: #fff; }\n .tag--cyan { background-color: #13c2c2; border-color: #13c2c2; color: #fff; }\n .tag--blue { background-color: #1677ff; border-color: #1677ff; color: #fff; }\n .tag--geekblue { background-color: #2f54eb; border-color: #2f54eb; color: #fff; }\n .tag--purple { background-color: #722ed1; border-color: #722ed1; color: #fff; }\n\n /* Custom color tag hue via inline CSS variable */\n .tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: var(--nuraly-color-text-on-color, #fff); }\n`;\n"]}
|
package/tag.types.d.ts
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright 2025 Nuraly
|
|
4
|
+
* SPDX-License-Identifier: MIT
|
|
5
|
+
*/
|
|
6
|
+
/** Preset color names for Tag component */
|
|
7
|
+
export declare const enum TagPresetColor {
|
|
8
|
+
Magenta = "magenta",
|
|
9
|
+
Red = "red",
|
|
10
|
+
Volcano = "volcano",
|
|
11
|
+
Orange = "orange",
|
|
12
|
+
Gold = "gold",
|
|
13
|
+
Lime = "lime",
|
|
14
|
+
Green = "green",
|
|
15
|
+
Cyan = "cyan",
|
|
16
|
+
Blue = "blue",
|
|
17
|
+
Geekblue = "geekblue",
|
|
18
|
+
Purple = "purple"
|
|
19
|
+
}
|
|
20
|
+
/** Tag sizes */
|
|
21
|
+
export declare const enum TagSize {
|
|
22
|
+
Default = "default",
|
|
23
|
+
Small = "small"
|
|
24
|
+
}
|
|
25
|
+
export interface TagCheckedChangeDetail {
|
|
26
|
+
checked: boolean;
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=tag.types.d.ts.map
|
package/tag.types.js
ADDED
package/tag.types.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tag.types.js","sourceRoot":"","sources":["../../../src/components/tag/tag.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2025 Nuraly\n * SPDX-License-Identifier: MIT\n */\n\n/** Preset color names for Tag component */\nexport const enum TagPresetColor {\n Magenta = 'magenta',\n Red = 'red',\n Volcano = 'volcano',\n Orange = 'orange',\n Gold = 'gold',\n Lime = 'lime',\n Green = 'green',\n Cyan = 'cyan',\n Blue = 'blue',\n Geekblue = 'geekblue',\n Purple = 'purple',\n}\n\n/** Tag sizes */\nexport const enum TagSize {\n Default = 'default',\n Small = 'small',\n}\n\nexport interface TagCheckedChangeDetail {\n checked: boolean;\n}\n"]}
|