@progress/kendo-themes-html/dist/esm/notification/templates/notification-normal.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 Q,jsx as H}from"react/jsx-runtime";var M="k-font-icon",X=[],W={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]},j={},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(Q,{})};v.states=X;v.options=W;v.className=M;v.defaultOptions=j;var B=v;import{Fragment as ee,jsx as k}from"react/jsx-runtime";var S="k-svg-icon",Y=[],Z={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 k(ee,{});if(r==="none")return k("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 k("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:k("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=Y;b.options=Z;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 te}from"react";import{createContext as oe}from"react";var D=oe({iconsType:"svg"});import{Fragment as V,jsx as y}from"react/jsx-runtime";var C="k-icon",ne=o=>o.replace(/([-_][a-z0-9])/gi,e=>e.toUpperCase().replace("-","").replace("_","")),ie=[],ae={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]},I={viewBox:"0 0 24 24",type:"svg",variant:f.outline},m=o=>{let{iconsType:e}=te(D),{size:a,themeColor:s,icon:i,type:d=e||I.type,rotate:p,flip:r,viewBox:x=I.viewBox,variant:N=I.variant,...g}=o;if(!i)return y(V,{});if((e||d)==="svg"){if(i==="none")return y(w,{...g,className:c(o.className,C),icon:i,size:a,variant:N});let F=z[i]?i:ne(`${i}-icon`);return z[F]?y(w,{...g,className:c(o.className,C),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,C),icon:i,size:a,themeColor:s,rotate:p,flip:r})};m.states=ie;m.options=ae;m.defaultOptions=I;m.className=C;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 le,jsx as O,jsxs as G}from"react/jsx-runtime";var _="k-notification",re=[],se={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&&O(m,{className:"k-notification-status",icon:i}),o.children?G("div",{id:r,className:"k-notification-content",children:[s,o.children]}):O(le,{children:s&&O("div",{id:r,className:"k-notification-content",children:s})}),e&&O("span",{className:"k-notification-actions",children:e})]})};l.states=re;l.options=se;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 ce="k-notification-action",T=o=>{let{type:e}=o,a;if(e==="close")a=$(m,{icon:"x"});else return $(m,{icon:e});return $("span",{className:c(o.className,ce,`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 de=l.states,me=l.defaultOptions,fe={...l.options,closable:{type:"boolean"}},pe=[{name:"icon",title:"Icon before"}],ue=[],h=o=>{let{modifiers:e,closable:a,...s}=o,i={};return a&&(i.closable=!0,i.actions=J(T,{type:"close"})),Object.keys(e||{}).forEach(d=>{d==="icon"&&(i.icon=e?.[d]?"info-circle":"")}),J(l,{text:"Notification",...s,...i})};h.options=fe;h.states=de;h.variants=ue;h.defaultOptions=me;h.modifiers=pe;h.className=l.className;import{jsx as xe}from"react/jsx-runtime";var wo=o=>xe(l,{text:"Notification",...o});export{wo as NotificationNormal};