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

A collection of HTML helpers used for developing Kendo UI themes

var l=(...t)=>t.filter(e=>e!==!0&&!!e).map(e=>Array.isArray(e)?l(...e):typeof e=="object"?Object.keys(e).map((s,r)=>e[r]||e[s]&&s||null).filter(s=>s!==null).join(" "):e).filter(e=>!!e).join(" ");var p=(t,e)=>l({[`${t}-xs`]:e.size==="xsmall",[`${t}-sm`]:e.size==="small",[`${t}-md`]:e.size==="medium",[`${t}-lg`]:e.size==="large",[`${t}-xl`]:e.size==="xlarge",[`${t}-xxl`]:e.size==="xxlarge",[`${t}-xxxl`]:e.size==="xxxlarge"},{[`${t}-${e.fillMode}`]:e.fillMode},{[`${t}-${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"},o={undefined:void 0,inherit:"inherit",base:"base",primary:"primary",secondary:"secondary",tertiary:"tertiary",info:"info",success:"success",warning:"warning",error:"error",inverse:"inverse"};var T={};function F(t){return T[t]=(T[t]||0)+1,`k-${t}-${T[t]}`}import{Fragment as Q,jsx as R}from"react/jsx-runtime";var A="k-font-icon",J=[],X={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info]},W={},N=t=>{let{size:e,themeColor:s,icon:r,rotate:i,flip:c,...u}=t;return r?R("span",{...u,className:l(t.className,A,p(A,{size:e}),{[`k-i-${r}`]:r,[`k-color-${s}`]:s,[`k-rotate-${i}`]:i,"k-flip-h":c==="h"||c==="both","k-flip-v":c==="v"||c==="both"}),"aria-hidden":"true"}):R(Q,{})};N.states=J;N.options=X;N.className=A;N.defaultOptions=W;var H=N;import{Fragment as ee,jsx as k}from"react/jsx-runtime";var M="k-svg-icon",Y=[],Z={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[f.outline,f.solid,f.duotone]},S={viewBox:"0 0 24 24",variant:f.outline},b=t=>{let{size:e,themeColor:s,rotate:r,flip:i,viewBox:c=S.viewBox,variant:u=S.variant,icon:a,...g}=t;if(!a)return k(ee,{});if(a==="none")return k("span",{...g,className:l(t.className,M,p("k-icon",{size:e}),"k-none"),"aria-hidden":"true"});let v=typeof a=="object"&&a.name&&a.name,h=typeof a=="object"?u&&a.variants?.[u]||a.variants?.outline||a.content:void 0;return k("span",{...g,className:l(t.className,M,p("k-icon",{size:e}),{[`k-svg-i-${v}`]:v,[`k-color-${s}`]:s,[`k-rotate-${r}`]:r,"k-flip-h":i==="h"||i==="both","k-flip-v":i==="v"||i==="both"}),"aria-hidden":"true",children:k("svg",{"aria-hidden":!0,focusable:!1,xmlns:"http://www.w3.org/2000/svg",viewBox:typeof a=="object"?a.viewBox:c,dangerouslySetInnerHTML:h!==void 0?{__html:h}:void 0,children:a?void 0:t.children})})};b.states=Y;b.options=Z;b.className=M;b.defaultOptions=S;var E=b;import*as w from"@progress/kendo-svg-icons";var B="icon",P="icons";import{useContext as oe}from"react";import{createContext as te}from"react";var K=te({iconsType:"svg"});import{Fragment as D,jsx as y}from"react/jsx-runtime";var C="k-icon",ne=t=>t.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ie=[],se={size:[n.undefined,n.xsmall,n.small,n.medium,n.large,n.xlarge,n.xxlarge,n.xxxlarge],themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info],variant:[f.outline,f.solid,f.duotone]},I={viewBox:"0 0 24 24",type:"svg",variant:f.outline},m=t=>{let{iconsType:e}=oe(K),{size:s,themeColor:r,icon:i,type:c=e||I.type,rotate:u,flip:a,viewBox:g=I.viewBox,variant:v=I.variant,...h}=t;if(!i)return y(D,{});if((e||c)==="svg"){if(i==="none")return y(E,{...h,className:l(t.className,C),icon:i,size:s,variant:v});let $=w[i]?i:ne(`${i}-icon`);return w[$]?y(E,{...h,className:l(t.className,C),icon:w[$],size:s,themeColor:r,rotate:u,flip:a,viewBox:g,variant:v}):y(D,{})}return y(H,{...h,className:l(t.className,C),icon:i,size:s,themeColor:r,rotate:u,flip:a})};m.states=ie;m.options=se;m.defaultOptions=I;m.className=C;m.moduleName=B;m.folderName=P;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 z="notification",V=z;import{Fragment as le,jsx as O,jsxs as U}from"react/jsx-runtime";var L="k-notification",ae=[],re={themeColor:[o.undefined,o.base,o.primary,o.secondary,o.tertiary,o.success,o.warning,o.error,o.info,o.inverse]},G={closable:!1},d=t=>{let{actions:e,themeColor:s,text:r,icon:i,closable:c=G.closable,...u}=t,a=F("notification-content"),g=!!(r||t.children);return U("div",{...u,className:l(t.className,L,p(L,{themeColor:s}),{"k-notification-closable":c}),role:"status","aria-live":"polite","aria-describedby":g?a:void 0,children:[i&&O(m,{className:"k-notification-status",icon:i}),t.children?U("div",{id:a,className:"k-notification-content",children:[r,t.children]}):O(le,{children:r&&O("div",{id:a,className:"k-notification-content",children:r})}),e&&O("span",{className:"k-notification-actions",children:e})]})};d.states=ae;d.options=re;d.className=L;d.defaultOptions=G;d.moduleName=z;d.folderName=V;d.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 ce="k-notification-action",j=t=>{let{type:e}=t,s;if(e==="close")s=_(m,{icon:"x"});else return _(m,{icon:e});return _("span",{className:l(t.className,ce,`k-notification-${e}-action`),children:s})};import{jsx as q}from"react/jsx-runtime";var de=d.states,me=d.defaultOptions,fe={...d.options,closable:{type:"boolean"}},ue=[{name:"icon",title:"Icon before"}],pe=[],x=t=>{let{modifiers:e,closable:s,...r}=t,i={};return s&&(i.closable=!0,i.actions=q(j,{type:"close"})),Object.keys(e||{}).forEach(c=>{c==="icon"&&(i.icon=e?.[c]?"info-circle":"")}),q(d,{text:"Notification",...r,...i})};x.options=fe;x.states=de;x.variants=pe;x.defaultOptions=me;x.modifiers=ue;x.className=d.className;var at=x;export{x as NotificationDemo,at as default};