https://24tv.ua/chunk-K2WCO22J.js

1import{a as d}from"./chunk-QVY2MJ37.js";import"./chunk-H4IOJQAC.js";import"./chunk-PSLZ3OTT.js";import{$b as t,Lc as n,Yc as r,Zb as a,_b as e,ac as o,cb as i,xb as c}from"./chunk-5DSEJYP2.js";import"./chunk-3FRIJCUZ.js";var p=()=>({strategy:"eager"}),g=()=>({strategy:"idle"}),m=()=>({strategy:"viewport"}),v=class l{title="Icon Testing & Examples";static \u0275fac=function(s){return new(s||l)};static \u0275cmp=c({type:l,selectors:[["app-icons-page"]],decls:133,vars:40,consts:[[1,"container"],[1,"header"],[1,"demo-section"],[2,"margin-bottom","1rem","color","#666"],[2,"margin-top","2rem"],[2,"color","#666","font-size","0.9rem","margin-bottom","1rem"],[1,"icon-grid"],[1,"icon-item"],[1,"h-10","w-10","text-blue-600",3,"svgPath","lazyLoad"],[1,"h-10","w-10","text-green-600",3,"svgPath","lazyLoad"],[2,"height","100vh","display","flex","align-items","center","justify-content","center","background","#f5f5f5","margin","1rem 0","border-radius","8px"],[2,"color","#999"],[1,"h-12","w-12","text-purple-600",3,"svgPath","lazyLoad"],[1,"h-4","w-4",3,"svgPath"],[1,"h-5","w-5",3,"svgPath"],[1,"h-6","w-6",3,"svgPath"],[1,"h-8","w-8",3,"svgPath"],[1,"h-10","w-10",3,"svgPath"],[1,"h-12","w-12",3,"svgPath"],[1,"h-16","w-16",3,"svgPath"],[1,"h-20","w-20",3,"svgPath"],[1,"h-8","w-8","text-blue-600",3,"svgPath"],[1,"h-8","w-8","text-red-600",3,"svgPath"],[1,"h-8","w-8","text-green-600",3,"svgPath"],[1,"h-8","w-8","text-purple-600",3,"svgPath"],[1,"h-8","w-8","text-yellow-600",3,"svgPath"],[1,"h-8","w-8",3,"svgPath","decorative"],[1,"h-8","w-8",3,"svgPath","decorative","ariaLabel"]],template:function(s,u){s&1&&(e(0,"main",0)(1,"header",1)(2,"h1"),n(3,"\u{1F3A8} Icon Testing & Examples"),t(),e(4,"p"),n(5,"Comprehensive icon system testing and demonstrations"),t()(),e(6,"section",2)(7,"h2"),n(8,"\u{1F680} Loading Strategies Showcase"),t(),e(9,"p",3),n(10," Each strategy uses unique icons to demonstrate browser loading behavior (not cached) "),t(),e(11,"h3",4),n(12,"1\uFE0F\u20E3 Eager Loading (Default)"),t(),e(13,"p",5),n(14," Loads immediately with the page - highest priority "),t(),e(15,"div",6)(16,"div",7),o(17,"app-icon",8),e(18,"span"),n(19,"Bookmark (Eager)"),t()(),e(20,"div",7),o(21,"app-icon",8),e(22,"span"),n(23,"Arrow Right (Eager)"),t()()(),e(24,"h3",4),n(25,"2\uFE0F\u20E3 Idle Loading"),t(),e(26,"p",5),n(27," Loads when browser is idle (requestIdleCallback) - deferred priority "),t(),e(28,"div",6)(29,"div",7),o(30,"app-icon",9),e(31,"span"),n(32,"Bell (Idle)"),t()(),e(33,"div",7),o(34,"app-icon",9),e(35,"span"),n(36,"Search (Idle)"),t()()(),e(37,"h3",4),n(38,"3\uFE0F\u20E3 Viewport Loading (Scroll Down)"),t(),e(39,"p",5),n(40," Loads only when icon enters viewport - lazy priority "),t(),e(41,"div",10)(42,"p",11),n(43,"\u2B07\uFE0F Scroll down to see viewport lazy-loading \u2B07\uFE0F"),t()(),e(44,"div",6)(45,"div",7),o(46,"app-icon",12),e(47,"span"),n(48,"Play (Viewport)"),t()(),e(49,"div",7),o(50,"app-icon",12),e(51,"span"),n(52,"Comments (Viewport)"),t()(),e(53,"div",7),o(54,"app-icon",12),e(55,"span"),n(56,"Logo (Viewport)"),t()()()(),e(57,"section",2)(58,"h2"),n(59,"Size Variations (Tailwind Classes)"),t(),e(60,"div",6)(61,"div",7),o(62,"app-icon",13),e(63,"span"),n(64,"w-4 h-4"),t()(),e(65,"div",7),o(66,"app-icon",14),e(67,"span"),n(68,"w-5 h-5"),t()(),e(69,"div",7),o(70,"app-icon",15),e(71,"span"),n(72,"w-6 h-6"),t()(),e(73,"div",7),o(74,"app-icon",16),e(75,"span"),n(76,"w-8 h-8"),t()(),e(77,"div",7),o(78,"app-icon",17),e(79,"span"),n(80,"w-10 h-10"),t()(),e(81,"div",7),o(82,"app-icon",18),e(83,"span"),n(84,"w-12 h-12"),t()(),e(85,"div",7),o(86,"app-icon",19),e(87,"span"),n(88,"w-16 h-16"),t()(),e(89,"div",7),o(90,"app-icon",20),e(91,"span"),n(92,"w-20 h-20"),t()()()(),e(93,"section",2)(94,"h2"),n(95,"Color Variations (Tailwind Classes)"),t(),e(96,"div",6)(97,"div",7),o(98,"app-icon",16),e(99,"span"),n(100,"Default"),t()(),e(101,"div",7),o(102,"app-icon",21),e(103,"span"),n(104,"Blue"),t()(),e(105,"div",7),o(106,"app-icon",22),e(107,"span"),n(108,"Red"),t()(),e(109,"div",7),o(110,"app-icon",23),e(111,"span"),n(112,"Green"),t()(),e(113,"div",7),o(114,"app-icon",24),e(115,"span"),n(116,"Purple"),t()(),e(117,"div",7),o(118,"app-icon",25),e(119,"span"),n(120,"Yellow"),t()()()(),e(121,"section",2)(122,"h2"),n(123,"Accessibility Features"),t(),e(124,"div",6)(125,"div",7),o(126,"app-icon",26),e(127,"span"),n(128,"Decorative"),t()(),e(129,"div",7),o(130,"app-icon",27),e(131,"span"),n(132,"With ARIA"),t()()()()()),s&2&&(i(17),a("svgPath","assets/icons/common/bookmark.svg")("lazyLoad",r(33,p)),i(4),a("svgPath","assets/icons/common/arrow-right.svg")("lazyLoad",r(34,p)),i(9),a("svgPath","assets/icons/common/bell.svg")("lazyLoad",r(35,g)),i(4),a("svgPath","assets/icons/common/search.svg")("lazyLoad",r(36,g)),i(12),a("svgPath","assets/icons/player/stroke/play-stroke.svg")("lazyLoad",r(37,m)),i(4),a("svgPath","assets/icons/common/comments.svg")("lazyLoad",r(38,m)),i(4),a("svgPath","assets/icons/common/logo.svg")("lazyLoad",r(39,m)),i(8),a("svgPath","assets/icons/common/arrow-down.svg"),i(4),a("svgPath","assets/icons/common/arrow-down.svg"),i(4),a("svgPath","assets/icons/common/arrow-down.svg"),i(4),a("svgPath","assets/icons/common/arrow-down.svg"),i(4),a("svgPath","assets/icons/common/arrow-down.svg"),i(4),a("svgPath","assets/icons/common/arrow-down.svg"),i(4),a("svgPath","assets/icons/common/arrow-down.svg"),i(4),a("svgPath","assets/icons/common/arrow-down.svg"),i(8),a("svgPath","assets/icons/common/views.svg"),i(4),a("svgPath","assets/icons/common/views.svg"),i(4),a("svgPath","assets/icons/common/views.svg"),i(4),a("svgPath","assets/icons/common/views.svg"),i(4),a("svgPath","assets/icons/common/views.svg"),i(4),a("svgPath","assets/icons/common/views.svg"),i(8),a("svgPath","assets/icons/common/views.svg")("decorative",!0),i(4),a("svgPath","assets/icons/common/views.svg")("decorative",!1)("ariaLabel","Views icon"))},dependencies:[d],styles:[".container[_ngcontent-%COMP%]{max-width:1200px;margin:0 auto;padding:2rem;font-family:system-ui,-apple-system,sans-serif}.header[_ngcontent-%COMP%]{text-align:center;margin-bottom:3rem}.header[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%]{font-size:2.5rem;margin-bottom:.5rem;color:#1f2937}.header[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]{font-size:1.125rem;color:#6b7280}.demo-section[_ngcontent-%COMP%]{margin-bottom:3rem;padding:2rem;background:#f9fafb;border-radius:.75rem;border:1px solid #e5e7eb}.demo-section[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]{font-size:1.5rem;margin-bottom:1.5rem;color:#1f2937}.icon-grid[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1.5rem}.icon-item[_ngcontent-%COMP%]{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:#fff;border-radius:.5rem;border:1px solid #e5e7eb;transition:all .2s ease}.icon-item[_ngcontent-%COMP%]:hover{transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a}.icon-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{font-size:.875rem;color:#6b7280;font-weight:500}.status-grid[_ngcontent-%COMP%]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}.status-item[_ngcontent-%COMP%]{background:#fff;padding:1.5rem;border-radius:.5rem;border:1px solid #e5e7eb}.status-item[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]{font-size:1.125rem;margin-bottom:1rem;color:#1f2937}.status-item[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{list-style:none;padding:0;margin:0}.status-item[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{padding:.25rem 0;font-size:.875rem;color:#6b7280}.text-blue-600[_ngcontent-%COMP%]{color:#2563eb}.text-red-600[_ngcontent-%COMP%]{color:#dc2626}.text-green-600[_ngcontent-%COMP%]{color:#16a34a}.text-purple-600[_ngcontent-%COMP%]{color:#9333ea}.text-yellow-600[_ngcontent-%COMP%]{color:#ca8a04}.button-grid[_ngcontent-%COMP%]{display:flex;gap:1rem;flex-wrap:wrap}.button-grid[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{padding:.5rem 1rem;border:1px solid #ccc;border-radius:.25rem;background:#fff;cursor:pointer;transition:all .2s ease}.button-grid[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:disabled{background:#dcfce7;border-color:#86efac;color:#16a34a;cursor:not-allowed}.button-grid[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}"]})};export{v as IconsPage};
2/**i18n:fd443cd02819152b82041c85b3b852d750c5b690a3deb04ec4bcb1027c8ad6d3*/