ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
2 lines (1 loc) • 14.4 kB
JavaScript
const l=require("./builder-Cb6jFd2B.cjs"),i=require("./utils-D2N_KPUb.cjs");var d=":host{display:var(--ran-icon-host-display, inline-flex)}:host([spin]){animation-name:var(--ran-icon-host-spin-animation, rotate);animation-duration:var(--ran-icon-host-spin-animation, 1.4s);animation-timing-function:linear;animation-iteration-count:var(--ran-icon-host-spin-animation, infinite)}.ran-icon{display:var(--ran-icon-display, flex);align-items:var(--ran-icon-align-items, center);justify-content:var(--ran-icon-justify-content, center);color:var(--ran-icon-color, inherit);font-size:var(--ran-icon-font-size, 1em);margin:var(--ran-icon-margin, 0)}.ran-icon svg{width:var(--ran-icon-svg-width, 1em);height:var(--ran-icon-svg-height, 1em);fill:var(--ran-icon-svg-fill, currentColor);stroke:var(--ran-icon-svg-stroke, currentColor)}@keyframes rotate{to{transform:var(--ran-icon-host-spin-transform, rotate(360deg))}}",f=!1,h=new Map,a=!1,o=e=>/<svg[\s>]/i.test(e),g=e=>{if(typeof e=="string")return o(e)?e:void 0;if(!e||typeof e!="object")return;const t=e,s=t.data;if(typeof s=="string"&&o(s))return s;const r=t.default;if(typeof r=="string"&&o(r))return r;if(r&&typeof r=="object"){const n=r;if(typeof n.data=="string"&&o(n.data))return n.data}},c=(e,t)=>{a=!0;const s=g(t);s&&(h.set(`inline:${e}`,s),typeof window<"u"&&window.dispatchEvent(new CustomEvent("ranui-icon-registered",{detail:{name:e}})))},p=e=>{a=!0,Object.entries(e).forEach(([t,s])=>{c(t,s)})},m=Object.assign({"../../assets/icons/add-user.svg":()=>Promise.resolve().then(()=>require("./add-user-i3xsC7_I.cjs")).then(e=>e.add_user_exports).then(e=>e.default),"../../assets/icons/arrow-down.svg":()=>Promise.resolve().then(()=>require("./arrow-down-BbPi6ze1.cjs")).then(e=>e.arrow_down_exports).then(e=>e.default),"../../assets/icons/book.svg":()=>Promise.resolve().then(()=>require("./book-vqOkHYHz.cjs")).then(e=>e.book_exports).then(e=>e.default),"../../assets/icons/cast.svg":()=>Promise.resolve().then(()=>require("./cast-DQVRrgnA.cjs")).then(e=>e.cast_exports).then(e=>e.default),"../../assets/icons/check-circle-fill.svg":()=>Promise.resolve().then(()=>require("./check-circle-fill-DiIpOdH2.cjs")).then(e=>e.check_circle_fill_exports).then(e=>e.default),"../../assets/icons/check-circle.svg":()=>Promise.resolve().then(()=>require("./check-circle-PfpJCPJS.cjs")).then(e=>e.check_circle_exports).then(e=>e.default),"../../assets/icons/check.svg":()=>Promise.resolve().then(()=>require("./check-CLPjT8s-.cjs")).then(e=>e.check_exports).then(e=>e.default),"../../assets/icons/chevron-down.svg":()=>Promise.resolve().then(()=>require("./chevron-down-vmfDZ-w9.cjs")).then(e=>e.chevron_down_exports).then(e=>e.default),"../../assets/icons/close-circle-fill.svg":()=>Promise.resolve().then(()=>require("./close-circle-fill-Bk3Jb_Eb.cjs")).then(e=>e.close_circle_fill_exports).then(e=>e.default),"../../assets/icons/close-circle.svg":()=>Promise.resolve().then(()=>require("./close-circle-C6zKZLRN.cjs")).then(e=>e.close_circle_exports).then(e=>e.default),"../../assets/icons/close.svg":()=>Promise.resolve().then(()=>require("./close-CnM3t3D4.cjs")).then(e=>e.close_exports).then(e=>e.default),"../../assets/icons/copy.svg":()=>Promise.resolve().then(()=>require("./copy-Z2EyEghL.cjs")).then(e=>e.copy_exports).then(e=>e.default),"../../assets/icons/download.svg":()=>Promise.resolve().then(()=>require("./download-DBF_xhgU.cjs")).then(e=>e.download_exports).then(e=>e.default),"../../assets/icons/drop.svg":()=>Promise.resolve().then(()=>require("./drop-CciYEd5H.cjs")).then(e=>e.drop_exports).then(e=>e.default),"../../assets/icons/eye-close.svg":()=>Promise.resolve().then(()=>require("./eye-close-BYDlU-hg.cjs")).then(e=>e.eye_close_exports).then(e=>e.default),"../../assets/icons/eye.svg":()=>Promise.resolve().then(()=>require("./eye-Ni2g2-pH.cjs")).then(e=>e.eye_exports).then(e=>e.default),"../../assets/icons/fullscreen.svg":()=>Promise.resolve().then(()=>require("./fullscreen-B6DbXMiy.cjs")).then(e=>e.fullscreen_exports).then(e=>e.default),"../../assets/icons/github.svg":()=>Promise.resolve().then(()=>require("./github-dQpTFKNi.cjs")).then(e=>e.github_exports).then(e=>e.default),"../../assets/icons/globe.svg":()=>Promise.resolve().then(()=>require("./globe-7dpBTPm0.cjs")).then(e=>e.globe_exports).then(e=>e.default),"../../assets/icons/home.svg":()=>Promise.resolve().then(()=>require("./home-CwTS_Hwv.cjs")).then(e=>e.home_exports).then(e=>e.default),"../../assets/icons/info-circle-fill.svg":()=>Promise.resolve().then(()=>require("./info-circle-fill-BMqkGq43.cjs")).then(e=>e.info_circle_fill_exports).then(e=>e.default),"../../assets/icons/info-circle.svg":()=>Promise.resolve().then(()=>require("./info-circle-DOJsiBjx.cjs")).then(e=>e.info_circle_exports).then(e=>e.default),"../../assets/icons/issue.svg":()=>Promise.resolve().then(()=>require("./issue-AIbjg3MD.cjs")).then(e=>e.issue_exports).then(e=>e.default),"../../assets/icons/loading-scene.svg":()=>Promise.resolve().then(()=>require("./loading-scene-DV1_LHWL.cjs")).then(e=>e.loading_scene_exports).then(e=>e.default),"../../assets/icons/loading.svg":()=>Promise.resolve().then(()=>require("./loading-YJuPtSr-.cjs")).then(e=>e.loading_exports).then(e=>e.default),"../../assets/icons/lock.svg":()=>Promise.resolve().then(()=>require("./lock-CHACfskP.cjs")).then(e=>e.lock_exports).then(e=>e.default),"../../assets/icons/menu.svg":()=>Promise.resolve().then(()=>require("./menu-mI5z4CVm.cjs")).then(e=>e.menu_exports).then(e=>e.default),"../../assets/icons/message.svg":()=>Promise.resolve().then(()=>require("./message-BVTmbcSk.cjs")).then(e=>e.message_exports).then(e=>e.default),"../../assets/icons/mic-off.svg":()=>Promise.resolve().then(()=>require("./mic-off-B9H_fK6N.cjs")).then(e=>e.mic_off_exports).then(e=>e.default),"../../assets/icons/mic.svg":()=>Promise.resolve().then(()=>require("./mic-nhAzHTBd.cjs")).then(e=>e.mic_exports).then(e=>e.default),"../../assets/icons/more.svg":()=>Promise.resolve().then(()=>require("./more-RDIM9xK2.cjs")).then(e=>e.more_exports).then(e=>e.default),"../../assets/icons/pause.svg":()=>Promise.resolve().then(()=>require("./pause-B3M4jqGQ.cjs")).then(e=>e.pause_exports).then(e=>e.default),"../../assets/icons/pencil.svg":()=>Promise.resolve().then(()=>require("./pencil-CiC5lzjW.cjs")).then(e=>e.pencil_exports).then(e=>e.default),"../../assets/icons/pip.svg":()=>Promise.resolve().then(()=>require("./pip-BuUHqrU8.cjs")).then(e=>e.pip_exports).then(e=>e.default),"../../assets/icons/play.svg":()=>Promise.resolve().then(()=>require("./play-DPT61OFI.cjs")).then(e=>e.play_exports).then(e=>e.default),"../../assets/icons/plus.svg":()=>Promise.resolve().then(()=>require("./plus-2gx1YEeo.cjs")).then(e=>e.plus_exports).then(e=>e.default),"../../assets/icons/power-off.svg":()=>Promise.resolve().then(()=>require("./power-off-CJoO_b8z.cjs")).then(e=>e.power_off_exports).then(e=>e.default),"../../assets/icons/preview.svg":()=>Promise.resolve().then(()=>require("./preview-CMZJijhN.cjs")).then(e=>e.preview_exports).then(e=>e.default),"../../assets/icons/refresh.svg":()=>Promise.resolve().then(()=>require("./refresh-C1j6QOZS.cjs")).then(e=>e.refresh_exports).then(e=>e.default),"../../assets/icons/search.svg":()=>Promise.resolve().then(()=>require("./search-CtrrUwtA.cjs")).then(e=>e.search_exports).then(e=>e.default),"../../assets/icons/setting.svg":()=>Promise.resolve().then(()=>require("./setting-C7IdHO-G.cjs")).then(e=>e.setting_exports).then(e=>e.default),"../../assets/icons/sort.svg":()=>Promise.resolve().then(()=>require("./sort-C24xZi_c.cjs")).then(e=>e.sort_exports).then(e=>e.default),"../../assets/icons/sprite.svg":()=>Promise.resolve().then(()=>require("./sprite-CgJul1A9.cjs")).then(e=>e.sprite_exports).then(e=>e.default),"../../assets/icons/team.svg":()=>Promise.resolve().then(()=>require("./team-BBMOEC-I.cjs")).then(e=>e.team_exports).then(e=>e.default),"../../assets/icons/unlock.svg":()=>Promise.resolve().then(()=>require("./unlock-D1llRnb_.cjs")).then(e=>e.unlock_exports).then(e=>e.default),"../../assets/icons/user.svg":()=>Promise.resolve().then(()=>require("./user-B8kATVU1.cjs")).then(e=>e.user_exports).then(e=>e.default),"../../assets/icons/volume-mute.svg":()=>Promise.resolve().then(()=>require("./volume-mute-D_8gXnSP.cjs")).then(e=>e.volume_mute_exports).then(e=>e.default),"../../assets/icons/volume.svg":()=>Promise.resolve().then(()=>require("./volume-j4FEnNSC.cjs")).then(e=>e.volume_exports).then(e=>e.default),"../../assets/icons/warning-circle-fill.svg":()=>Promise.resolve().then(()=>require("./warning-circle-fill-Bfet7z9m.cjs")).then(e=>e.warning_circle_fill_exports).then(e=>e.default),"../../assets/icons/warning-circle.svg":()=>Promise.resolve().then(()=>require("./warning-circle-CBwbxLgW.cjs")).then(e=>e.warning_circle_exports).then(e=>e.default),"../../assets/icons/without-content.svg":()=>Promise.resolve().then(()=>require("./without-content-BBaHsY2D.cjs")).then(e=>e.without_content_exports).then(e=>e.default),"../../assets/icons/zoom-in.svg":()=>Promise.resolve().then(()=>require("./zoom-in-oQic8WiD.cjs")).then(e=>e.zoom_in_exports).then(e=>e.default),"../../assets/icons/zoom-out.svg":()=>Promise.resolve().then(()=>require("./zoom-out-CiQ6TJQs.cjs")).then(e=>e.zoom_out_exports).then(e=>e.default)}),u={};for(const[e,t]of Object.entries(m)){const s=e.split("/").pop()?.replace(/\.svg$/,"");s&&s!=="sprite"&&(u[s]=t)}var _=["add-user","arrow-down","book","cast","check","check-circle","check-circle-fill","chevron-down","close","close-circle","close-circle-fill","copy","download","drop","eye","eye-close","fullscreen","github","globe","home","info-circle","info-circle-fill","issue","loading","loading-scene","lock","menu","message","mic","mic-off","more","pause","pencil","pip","play","plus","power-off","preview","refresh","search","setting","sort","team","unlock","user","volume","volume-mute","warning-circle","warning-circle-fill","without-content","zoom-in","zoom-out"],v=class extends i.RanElement{isDev=f;_events=new i.EventManager;static get observedAttributes(){return["name","size","color","spin","decorative","aria-label","sheet"]}_icon;_div;_shadowDom;_onIconRegistered=e=>{const t=e.detail?.name;t&&t===this.name&&!this._icon&&this.setIcon()};constructor(){super(),this._shadowDom=i.ensureShadowRoot(this,d);const e=l.Div().class("ran-icon").part("ran-icon").build();this._shadowDom.appendChild(e),this._div=e}get name(){return i.getStringAttribute(this,"name")}set name(e){e&&this.setAttribute("name",e)}get size(){return i.getStringAttribute(this,"size")}set size(e){e&&this.setAttribute("size",e)}get color(){return i.getStringAttribute(this,"color")}set color(e){e&&this.setAttribute("color",e)}get spin(){return this.hasAttribute("spin")}set spin(e){e?this.setAttribute("spin",""):this.removeAttribute("spin")}get decorative(){const e=this.getAttribute("decorative");return e==null?!this.hasAttribute("aria-label"):e!=="false"&&e!=="0"}set decorative(e){this.setAttribute("decorative",e?"true":"false")}get ariaLabel(){return i.getStringAttribute(this,"aria-label")}set ariaLabel(e){i.setStringAttribute(this,"aria-label",e,{removeEmpty:!0})}get sheet(){return i.getStringAttribute(this,"sheet")}set sheet(e){i.setStringAttribute(this,"sheet",e)}handlerExternalCss=()=>{i.syncSheetAttribute(this,this._shadowDom,"sheet",null,this.sheet)};syncA11y=()=>{if(this._icon){if(this.decorative){this.setAttribute("aria-hidden","true"),this.removeAttribute("role"),this._icon.setAttribute("aria-hidden","true"),this._icon.setAttribute("focusable","false");return}this.removeAttribute("aria-hidden"),this.setAttribute("role","img"),this._icon.removeAttribute("aria-hidden"),this._icon.setAttribute("focusable","false")}};setIcon=()=>{if(typeof document>"u")return;this._icon&&(this._icon.remove(),this._icon=void 0);const e=this.name;if(e)if(e.startsWith("<svg"))this.renderSvg(e,e);else try{const t=`inline:${e}`,s=h.get(t);if(!s){const r=u[e];if(r){this.lazyLoadBuiltinIcon(e,r);return}this.isDev&&a&&console.warn(`[ranui-icon] icon not registered: ${e}`);return}s&&this.isSvgText(s)?this.renderSvg(s,e):this.isDev&&console.warn(`[ranui-icon] invalid svg text: ${e}`)}catch(t){this.isDev&&console.warn(`[ranui-icon] render icon failed: ${e}`,t)}};lazyLoadBuiltinIcon=(e,t)=>{t().then(s=>{c(e,s)}).catch(s=>{this.isDev&&console.warn(`[ranui-icon] lazy load builtin failed: ${e}`,s)})};isSvgText=e=>o(e);parseSvg=e=>{const t=new window.DOMParser().parseFromString(e,"image/svg+xml").documentElement;if(!t||t.tagName.toLowerCase()==="parsererror"||t.tagName.toLowerCase()!=="svg")return;const s=new XMLSerializer().serializeToString(t),r=l.View("template").build();r.innerHTML=s.trim();const n=r.content.firstElementChild;if(!(!n||n.tagName.toLowerCase()!=="svg"))return n};renderSvg=(e,t)=>{const s=this.parseSvg(e);s?(this._icon=s,this._icon.setAttribute("part","icon-svg"),this._icon.setAttribute("data-name",t),this._div.appendChild(this._icon),this.setSize(),this.setColor(),this.setSpin(),this.syncA11y()):this.isDev&&console.warn(`[ranui-icon] parse svg failed: ${t}`)};setSize=()=>{if(this._icon){const e=this.size||"1em";this._icon.setAttribute("width",e),this._icon.setAttribute("height",e);const t=/^\d+(\.\d+)?$/.test(e)?`${e}px`:e;this._icon.style.setProperty("width",t),this._icon.style.setProperty("height",t)}};setColor=()=>{if(this._icon){const e=this.color||"currentColor";this._icon.style.setProperty("color",e),this._icon.style.setProperty("fill",e),this._icon.style.setProperty("stroke",e)}};setSpin=()=>{this.spin?this._div.classList.add("ran-icon-spin"):this._div.classList.remove("ran-icon-spin")};connectedCallback(){this._events.on(window,"ranui-icon-registered",this._onIconRegistered),this.handlerExternalCss(),this.setIcon()}disconnectedCallback(){this._events.abort()}attributeChangedCallback(e,t,s){t!==s&&(e==="name"&&this.setIcon(),e==="size"&&this.setSize(),e==="color"&&this.setColor(),e==="spin"&&this.setSpin(),(e==="decorative"||e==="aria-label")&&this.syncA11y(),e==="sheet"&&this.handlerExternalCss())}};i.defineSSR("r-icon",v);Object.defineProperty(exports,"Icon",{enumerable:!0,get:function(){return v}});Object.defineProperty(exports,"RAN_ICON_NAMES",{enumerable:!0,get:function(){return _}});Object.defineProperty(exports,"registerIcon",{enumerable:!0,get:function(){return c}});Object.defineProperty(exports,"registerIcons",{enumerable:!0,get:function(){return p}});