@progress/kendo-themes-html/dist/esm/notification/templates/notification-closable.mjs

A collection of HTML helpers used for developing Kendo UI themes

var c=(...o)=>o.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?c(...e):typeof e=="object"?Object.keys(e).map((a,s)=>e[s]||e[a]&&a||null).filter(a=>a!==null).join(" "):e).filter(e=>!!e).join(" ");var u=(o,e)=>c({[`${o}-xs`]:e.size==="xsmall",[`${o}-sm`]:e.size==="small",[`${o}-md`]:e.size==="medium",[`${o}-lg`]:e.size==="large",[`${o}-xl`]:e.size==="xlarge",[`${o}-xxl`]:e.size==="xxlarge",[`${o}-xxxl`]:e.size==="xxxlarge"},{[`${o}-${e.fillMode}`]:e.fillMode},{[`${o}-${e.themeColor}`]:e.themeColor},{"k-rounded-sm":e.rounded==="small","k-rounded-md":e.rounded==="medium","k-rounded-lg":e.rounded==="large","k-rounded-full":e.rounded==="full","k-rounded-none":e.rounded==="none"});var n={undefined:void 0,xsmall:"xsmall",small:"small",medium:"medium",large:"large",xlarge:"xlarge",xxlarge:"xxlarge",xxxlarge:"xxxlarge"};var f={undefined:void 0,outline:"outline",solid:"solid",duotone:"duotone"},t={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"};var A={};function R(o){return A[o]=(A[o]||0)+1,`k-${o}-${A[o]}`}import{Fragment as Y,jsx as H}from"react/jsx-runtime";var M="k-font-icon",W=[],j={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info]},Q={},v=o=>{let{size:e,themeColor:a,icon:s,rotate:i,flip:d,...p}=o;return s?H("span",{...p,className:c(o.className,M,u(M,{size:e}),{[`k-i-${s}`]:s,[`k-color-${a}`]:a,[`k-rotate-${i}`]:i,"k-flip-h":d==="h"||d==="both","k-flip-v":d==="v"||d==="both"}),"aria-hidden":"true"}):H(Y,{})};v.states=W;v.options=j;v.className=M;v.defaultOptions=Q;var B=v;import{Fragment as oe,jsx as C}from"react/jsx-runtime";var S="k-svg-icon",Z=[],ee={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info],variant:[f.outline,f.solid,f.duotone]},E={viewBox:"0 0 24 24",variant:f.outline},b=o=>{let{size:e,themeColor:a,rotate:s,flip:i,viewBox:d=E.viewBox,variant:p=E.variant,icon:r,...x}=o;if(!r)return C(oe,{});if(r==="none")return C("span",{...x,className:c(o.className,S,u("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let N=typeof r=="object"&&r.name&&r.name,g=typeof r=="object"?p&&r.variants?.[p]||r.variants?.outline||r.content:void 0;return C("span",{...x,className:c(o.className,S,u("k-icon",{size:e}),{[`k-svg-i-${N}`]:N,[`k-color-${a}`]:a,[`k-rotate-${s}`]:s,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:C("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof r=="object"?r.viewBox:d,dangerouslySetInnerHTML:g!==void 0?{__html:g}:void 0,children:r?void 0:o.children})})};b.states=Z;b.options=ee;b.className=S;b.defaultOptions=E;var w=b;import*as z from"@progress/kendo-svg-icons";var P="icon",K="icons";import{useContext as ne}from"react";import{createContext as te}from"react";var D=te({iconsType:"svg"});import{Fragment as V,jsx as y}from"react/jsx-runtime";var I="k-icon",ie=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ae=[],re={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info],variant:[f.outline,f.solid,f.duotone]},O={viewBox:"0 0 24 24",type:"svg",variant:f.outline},m=o=>{let{iconsType:e}=ne(D),{size:a,themeColor:s,icon:i,type:d=e||O.type,rotate:p,flip:r,viewBox:x=O.viewBox,variant:N=O.variant,...g}=o;if(!i)return y(V,{});if((e||d)==="svg"){if(i==="none")return y(w,{...g,className:c(o.className,I),icon:i,size:a,variant:N});let F=z[i]?i:ie(`${i}-icon`);return z[F]?y(w,{...g,className:c(o.className,I),icon:z[F],size:a,themeColor:s,rotate:p,flip:r,viewBox:x,variant:N}):y(V,{})}return y(B,{...g,className:c(o.className,I),icon:i,size:a,themeColor:s,rotate:p,flip:r})};m.states=ae;m.options=re;m.defaultOptions=O;m.className=I;m.moduleName=P;m.folderName=K;m.ariaSpec={selector:".k-icon, .k-svg-icon",rules:[{selector:".k-icon, .k-svg-icon",attribute:"aria-hidden=true",usage:"Hides the icon element and all its children from assistive technologies."}]};var L="notification",U=L;import{Fragment as ce,jsx as T,jsxs as G}from"react/jsx-runtime";var _="k-notification",se=[],le={themeColor:[t.undefined,t.base,t.primary,t.secondary,t.tertiary,t.success,t.warning,t.error,t.info,t.inverse]},q={closable:!1},l=o=>{let{actions:e,themeColor:a,text:s,icon:i,closable:d=q.closable,...p}=o,r=R("notification-content"),x=!!(s||o.children);return G("div",{...p,className:c(o.className,_,u(_,{themeColor:a}),{"k-notification-closable":d}),role:"status","aria-live":"polite","aria-describedby":x?r:void 0,children:[i&&T(m,{className:"k-notification-status",icon:i}),o.children?G("div",{id:r,className:"k-notification-content",children:[s,o.children]}):T(ce,{children:s&&T("div",{id:r,className:"k-notification-content",children:s})}),e&&T("span",{className:"k-notification-actions",children:e})]})};l.states=se;l.options=le;l.className=_;l.defaultOptions=q;l.moduleName=L;l.folderName=U;l.ariaSpec={selector:".k-notification",rules:[{selector:".k-notification",attribute:"role=status",usage:"Notification element should be marked as a status. Uses status instead of alert to avoid interrupting screen reader workflow."},{selector:".k-notification",attribute:"aria-live=polite",usage:"The aria-live value must be polite so it will not obscure other essential information."},{selector:".k-notification",attribute:"aria-describedby=.k-notification-content id",usage:"Used so that the content of the Notification will be announced by assistive technologies."},{selector:".k-notification .k-svg-i-x, .k-notification .k-i-x",attribute:"aria-hidden=true",usage:"The close button icon should not be present in the accessibility tree."}]};import{jsx as $}from"react/jsx-runtime";var de="k-notification-action",k=o=>{let{type:e}=o,a;if(e==="close")a=$(m,{icon:"x"});else return $(m,{icon:e});return $("span",{className:c(o.className,de,`k-notification-${e}-action`),children:a})};import{jsx as ro}from"react/jsx-runtime";import{jsx as mo}from"react/jsx-runtime";import{jsx as xo}from"react/jsx-runtime";import{jsx as J}from"react/jsx-runtime";var me=l.states,fe=l.defaultOptions,pe={...l.options,closable:{type:"boolean"}},ue=[{name:"icon",title:"Icon before"}],xe=[],h=o=>{let{modifiers:e,closable:a,...s}=o,i={};return a&&(i.closable=!0,i.actions=J(k,{type:"close"})),Object.keys(e||{}).forEach(d=>{d==="icon"&&(i.icon=e?.[d]?"info-circle":"")}),J(l,{text:"Notification",...s,...i})};h.options=pe;h.states=me;h.variants=xe;h.defaultOptions=fe;h.modifiers=ue;h.className=l.className;import{jsx as X}from"react/jsx-runtime";var wo=o=>X(l,{closable:!0,text:"Notification",actions:X(k,{type:"close"}),...o});export{wo as NotificationClosable};