https://clarity.design/chunk-YOO5FVL6.js

1import{a as c}from"./chunk-YM4TG47C.js";import{a as q}from"./chunk-OOV4P5UE.js";import"./chunk-YLGERXK5.js";import{a as d}from"./chunk-DEN33KKN.js";import"./chunk-GEXPUMUX.js";import{a as H,b as K}from"./chunk-7ZGOLTZD.js";import{b as j,c as N,d as R}from"./chunk-HMA3OSKG.js";import"./chunk-OBR75ZGB.js";import"./chunk-LB2BUUS4.js";import"./chunk-VLFEXYCY.js";import{$ as u,Ca as m,Da as k,Ga as T,Ha as I,Jh as B,Na as g,Oc as A,Pa as S,Qa as L,Ra as z,Rc as V,Sa as P,Ta as s,U as M,Ua as n,Va as t,Wa as p,_ as f,bb as h,ck as X,db as E,eh as O,fb as b,pc as F,qb as U,ra as o,tb as e,ub as C}from"./chunk-MFI2B7BD.js";function $(i,x){if(i&1){let r=h();n(0,"button",9),E("click",function(){f(r);let l=b();return u(l.toggleSpinner("fetchingUserInformation"))}),e(1,"Fetch user information"),t()}}function G(i,x){if(i&1){let r=h();n(0,"clr-spinner"),e(1,"Loading data"),t(),p(2,"br")(3,"br"),n(4,"button",10),E("click",function(){f(r);let l=b();return u(l.toggleSpinner("fetchingUserInformation"))}),e(5,"Cancel fetching user information"),t()}}function J(i,x){if(i&1){let r=h();n(0,"button",9),E("click",function(){f(r);let l=b();return u(l.toggleSpinner("downloadingFile"))}),e(1,"Download file"),t()}}function Q(i,x){if(i&1){let r=h();n(0,"div")(1,"clr-spinner",11),e(2,"Downloading"),t(),n(3,"span"),e(4," Downloading"),t(),p(5,"br")(6,"br"),n(7,"button",10),E("click",function(){f(r);let l=b();return u(l.toggleSpinner("downloadingFile"))}),e(8,"Cancel file download"),t()()}}var W=`
2@if (fetchingUserInformation) {
3  <clr-spinner>Loading data</clr-spinner>
4}
5
6@if (!fetchingUserInformation) {
7  <button (click)="toggleUserInfo()" class="btn btn-primary">Fetch user information</button>
8} @else {
9  <button class="btn" (click)="toggleUserInfo()">Cancel fetching user information</button>
10}
11`,Y=`
12@if (downloadingFile) {
13  <div>
14    <clr-spinner clrInline>Downloading</clr-spinner>
15    <span>Downloading</span>
16  </div>
17}
18
19@if (!downloadingFile) {
20  <button (click)="toggleSpinner()" class="btn btn-primary">Download file</button>
21} @else {
22  <button class="btn" (click)="toggleSpinner()">Cancel file download</button>
23}
24`,Z=`
25import { Component } from '@angular/core';
26import { ClrSpinnerModule } from '@clr/angular';
27
28@Component({
29  selector: 'app-example',
30  templateUrl: './example.component.html',
31  styleUrl: './example.component.scss',
32
33  imports: [ClrSpinnerModule],
34})
35export class ExampleComponent {
36  fetchingUserInformation = false;
37
38  toggleUserInfo() {
39    this.fetchingUserInformation = !this.fetchingUserInformation;
40  }
41}
42`,ee=`
43import { Component } from '@angular/core';
44import { ClrSpinnerModule } from '@clr/angular';
45
46@Component({
47  selector: 'app-example',
48  templateUrl: './example.component.html',
49  styleUrl: './example.component.scss',
50
51  imports: [ClrSpinnerModule],
52})
53export class ExampleComponent {
54  downloadingFile = false;
55
56  toggleSpinner() {
57    this.downloadingFile = !this.downloadingFile;
58  }
59}
60`,v=(()=>{class i{constructor(){this.example1=W,this.example2=Y,this.code1=Z,this.code2=ee,this.fetchingUserInformation=!1,this.downloadingFile=!1}toggleSpinner(r){this[r]=!this[r]}static{this.\u0275fac=function(a){return new(a||i)}}static{this.\u0275cmp=m({type:i,selectors:[["clr-spinner-component"]],decls:35,vars:10,consts:[["id","angular-component","cds-text","title",1,"clr-mt-48px"],["cds-text","body",1,"clr-mt-16px"],["data-toc-item","","id","angular-examples","cds-text","section",1,"clr-mt-32px"],[1,"clr-example","squeeze"],[1,"btn","btn-primary"],["name","spinner fetch",3,"componentTemplate","componentClass","showComponentClass"],["data-toc-item","","id","modify","cds-text","section",1,"clr-mt-32px"],["cds-text","code"],["name","spinner file download",3,"componentTemplate","componentClass","showComponentClass"],[1,"btn","btn-primary",3,"click"],[1,"btn",3,"click"],["clrInline",""]],template:function(a,l){a&1&&(n(0,"h2",0),e(1,"Angular Spinner Component"),t(),n(2,"p",1),e(3,` Clarity provides a component to help with displaying a spinner for loading purposes. This component also helps with accessibility needs to announce loading tasks to a screen reader user.
61`),t(),n(4,"h3",2),e(5,"Examples"),t(),n(6,"div",3),g(7,$,2,0,"button",4),g(8,G,6,0),t(),p(9,"app-stackblitz-example",5),n(10,"h3",6),e(11,"Modifiers"),t(),n(12,"p",1),e(13," Add modifiers like "),n(14,"code",7),e(15,"clrInline"),t(),e(16," for Inline Spinners or "),n(17,"code",7),e(18,"clrInverse"),t(),e(19,` for spinners with dark background.
62`),t(),n(20,"p"),e(21," If you need to make change on the size you could add "),n(22,"code",7),e(23,"clrSmall"),t(),e(24," or "),n(25,"code",7),e(26,"clrMedium"),t(),e(27,", the default size is auto set to "),n(28,"code",7),e(29,"large"),t(),e(30,`.
63`),t(),n(31,"div",3),g(32,J,2,0,"button",4),g(33,Q,9,0,"div"),t(),p(34,"app-stackblitz-example",8)),a&2&&(

63o(7),S(l.fetchingUserInformation?-1:7),o(),S(l.fetchingUserInformation?8:-1),o(),s("componentTemplate",l.example1)("componentClass",l.code1)("showComponentClass",!1),o(23),S(l.downloadingFile?-1:32),o(),S(l.downloadingFile?33:-1),o(),s("componentTemplate",l.example2)("componentClass",l.code2)("showComponentClass",!1))},dependencies:[B,O,d],styles:[".clr-example[_ngcontent-%COMP%]{text-align:center}.spinner-box[_ngcontent-%COMP%]{display:flex;align-items:center;gap:var(--cds-global-layout-space-sm);justify-content:center}.spinner-examples[_ngcontent-%COMP%]{font-weight:var(--cds-alias-typography-font-weight-semibold)}"]})}}return i})();var te='<span class="spinner spinner-sm">Loading...</span>',ne='<span class="spinner spinner-md">Loading...</span>',ie='<span class="spinner spinner-lg">Loading...</span>',w=(()=>{class i{constructor(){this.example=te,this.example1=ne,this.example2=ie}static{this.\u0275fac=function(a){return new(a||i)}}static{this.\u0275cmp=m({type:i,selectors:[["clr-spinner-sizes"]],decls:18,vars:6,consts:[["cds-layout","m-b:md","cds-text","subsection",1,"clr-mt-32px"],[3,"label"],[1,"spinner","spinner-sm"],["name","spinner small",3,"componentTemplate"],[1,"spinner","spinner-md"],["name","spinner medium",3,"componentTemplate"],[1,"spinner","spinner-lg"],["name","spinner large",3,"componentTemplate"]],template:function(a,l){a&1&&(n(0,"h4",0),e(1,"Small"),t(),n(2,"app-animated-example",1)(3,"span",2),e(4," Loading... "),t()(),p(5,"app-stackblitz-example",3),n(6,"h4",0),e(7,"Medium"),t(),n(8,"app-animated-example",1)(9,"span",4),e(10," Loading... "),t()(),p(11,"app-stackblitz-example",5),n(12,"h4",0),e(13,"Large (default)"),t(),n(14,"app-animated-example",1)(15,"div",6),e(16,"Loading..."),t()(),p(17,"app-stackblitz-example",7)),a&2&&(o(2),s("label","Small Spinner"),o(3),s("componentTemplate",l.example),o(3),s("label","Medium Spinner"),o(3),s("componentTemplate",l.example1),o(3),s("label","Large Spinner"),o(3),s("componentTemplate",l.example2))},dependencies:[c,d],styles:[".clr-example[_ngcontent-%COMP%]{text-align:center}.spinner-box[_ngcontent-%COMP%]{display:flex;align-items:center;gap:var(--cds-global-layout-space-sm);justify-content:center}.spinner-examples[_ngcontent-%COMP%]{font-weight:var(--cds-alias-typography-font-weight-semibold)}"]})}}return i})();var oe='<span class="spinner">Loading...</span>',ae=`
64<span class="spinner spinner-inline">Loading...</span>
65<span>Loading...</span>
66`,le='<span class="spinner spinner-inverse">Loading...</span>',_=(()=>{class i{constructor(){this.example=oe,this.example1=ae,this.example2=le}static{this.\u0275fac=function(a){return new(a||i)}}static{this.\u0275cmp=m({type:i,selectors:[["clr-spinner-types"]],decls:42,vars:6,consts:[["cds-text","body",1,"clr-mt-24px"],["cds-text","code"],[1,"clr-mt-24px"],[3,"label"],[1,"spinner"],["name","page spinner",3,"componentTemplate"],["cds-layout","m-b:md","cds-text","subsection",1,"clr-mt-32px"],["cds-text","body",1,"clr-mt-16px"],[1,"spinner","spinner-inline"],["name","inline spinner",3,"componentTemplate"],[1,"dark",3,"label"],[1,"spinner","spinner-inverse"],["name","spinner large",3,"componentTemplate"]],template:function(a,l){a&1&&(n(0,"p",0),e(1," Use the "),n(2,"code",1),e(3,".spinner"),t(),e(4,` to create a default page spinner.
67`),t(),n(5,"div",2)(6,"app-animated-example",3)(7,"div",4),e(8,"Loading..."),t()(),p(9,"app-stackblitz-example",5),t(),n(10,"h4",6),e(11,"Inline Spinners"),t(),n(12,"p",7),e(13," Extend the "),n(14,"code",1),e(15,".spinner-inline"),t(),e(16," class with "),n(17,"code",1),e(18,".spinner"),t(),e(19,` to create an inline spinner.
68`),t(),n(20,"div",2)(21,"app-animated-example",3)(22,"span",8),e(23," Loading... "),t(),n(24,"span"),e(25," Loading... "),t()(),p(26,"app-stackblitz-example",9),t(),n(27,"h4",6),e(28,"Spinners on a dark background"),t(),n(29,"p",7),e(30," Extend the "),n(31,"code",1),e(32,".spinner-inverse"),t(),e(33," class with "),n(34,"code",1),e(35,".spinner"),t(),e(36,` to create a spinner for dark backgrounds.
69`),t(),n(37,"div",2)(38,"app-animated-example",10)(39,"span",11),e(40," Loading... "),t()(),p(41,"app-stackblitz-example",12),t()),a&2&&(

69o(6),s("label","Page Spinner"),o(3),s("componentTemplate",l.example),o(12),s("label","Inline Spinner"),o(5),s("componentTemplate",l.example1),o(12),s("label","Dark Spinner"),o(3),s("componentTemplate",l.example2))},dependencies:[c,d],styles:[".clr-example[_ngcontent-%COMP%]{text-align:center}.spinner-box[_ngcontent-%COMP%]{display:flex;align-items:center;gap:var(--cds-global-layout-space-sm);justify-content:center}.spinner-examples[_ngcontent-%COMP%]{font-weight:var(--cds-alias-typography-font-weight-semibold)}"]})}}return i})();function re(i,x){i&1&&p(0,"clr-spinner-component")}function se(i,x){if(i&1&&(n(0,"tr")(1,"td",13)(2,"b",14),e(3),t()(),n(4,"td",18),e(5),t(),n(6,"td",18),e(7),t(),n(8,"td",13),e(9),t()()),i&2){let r=x.$implicit;o(3),C(r.name),o(2),C(r.type),o(2),C(r.defaultValue),o(2),C(r.description)}}var D=(()=>{class i extends R{constructor(){super("spinner"),this.props=[{name:"[clrInline]",type:"Boolean",defaultValue:"false",description:"Create an inline spinner"},{name:"[clrInverse]",type:"Boolean",defaultValue:"false",description:"Create spinner for dark background"},{name:"[clrSmall]",type:"Boolean",defaultValue:"false",description:"Make the spinner small 18x18 pixels"},{name:"[clrMedium]",type:"Boolean",defaultValue:"false",description:"Medium spinners 36x36 pixels"}]}static{this.\u0275fac=function(a){return new(a||i)}}static{this.\u0275cmp=m({type:i,selectors:[["clr-spinner-demo"]],hostVars:4,hostBindings:function(a,l){a&2&&U("content-area",!0)("dox-content-panel",!0)},features:[T],decls:151,vars:2,consts:[["tab","overview"],[1,"component-summary"],["id","usage","cds-text","title",1,"clr-mt-48px"],["cds-text","body",1,"clr-mt-16px"],["cds-text","body","cds-layout","m-t:md m-l:lg",1,"list"],["cds-text","section","id","page-spinner-example",1,"spinner-examples","clr-mt-24px"],[1,"clr-mt-16px",3,"label"],[1,"spinner-box"],[1,"spinner"],["cds-text","section","id","inline-spinner-example",1,"spinner-examples","clr-mt-24px"],[1,"spinner","spinner-inline"],["cds-text","title","id","sizes",1,"clr-mt-48px"],[1,"table","clr-mt-16px"],[1,"left"],["cds-text","medium"],[1,"hidden-sm-up","nowrap"],[1,"left","hidden-xs-down","nowrap"],[1,"hidden-sm-up"],[1,"left","hidden-xs-down"],["cds-text","title","id","placement",1,"clr-mt-48px"],["cds-text","title","id","label",1,"clr-mt-48px"],["cds-text","title","id","spinners-versus-progress-bars",1,"clr-mt-48px"],["routerLink","/documentation/progress"],["cds-text","title","id","accessibility",1,"clr-mt-48px"],["routerLink","/documentation/accessibility"],["tab","code"],[4,"appIfTabActive"],["id","css-component","cds-text","title",1,"clr-mt-48px"],["data-toc-item","","id","css-examples","cds-text","section",1,"clr-mt-32px"],["data-toc-item","","id","spinner-sizes","cds-text","section",1,"clr-mt-32px"],[1,"list","list-spacer"],["cds-text","code"],["id","examples-1","cds-text","subsection",1,"clr-mt-32px"],["tab","api"],["id","angular-component"],[1,"table"],["styleDocsKey","Spinner"]],template:function(a,l){a&1&&(n(0,"app-doc-tabs")(1,"app-doc-tab",0)(2,"p",1),e(3,"A spinner is a visual indicator of an ongoing, user-initiated process."),t(),n(4,"h2",2),e(5,"Usage"),t(),n(6,"p",3),e(7,"Clarity has two types of spinners, each with its own use case:"),t(),n(8,"ul",4)(9,"li"),e(10,"Page Spinners: For tracking the progress of an operation related to an entire page."),t(),n(11,"li"),e(12,"Inline Spinners: For tracking the progress of an operation related to a specific component."),t()(),n(13,"h3",5),e(14,"Page spinner example"),t(),n(15,"app-animated-example",6)(16,"div",7)(17,"div",8),e(18,"Loading..."),t(),n(19,"span"),e(20,"Processing..."),t()()(),n(21,"h3",9),e(22,"Inline spinner example"),t(),n(23,"app-animated-example",6)(24,"div",7)(25,"span",10),e(26,"Loading..."),t(),n(27,"span"),e(28,"Processing..."),t()()(),n(29,"h2",11),e(30,"Sizes"),t(),n(31,"table",12)(32,"tbody")(33,"tr")(34,"td",13)(35,"b",14),e(36,"Large"),t(),n(37,"div",15),e(38,"72px \xD7 72px"),t()(),n(39,"td",16),e(40,"72px \xD7 72px"),t(),n(41,"td",13),e(42," Use to track the progress of an operation related to a page. For example, in the login form, a large spinner replaces the form fields while the data is being authenticated. "),t()(),n(43,"tr")(44,"td",13)(45,"b",14),e(46,"Medium"),t(),n(47,"div",15),e(48,"36px \xD7 36px"),t()(),n(49,"td",16),e(50,"36px \xD7 36px"),t(),n(51,"td",13),e(52,"Use when content is being loaded, for example, in a table or datagrid."),t()(),n(53,"tr")(54,"td",13)(55,"b",14),e(56,"Small"),t(),n(57,"div",17),e(58,"18px \xD7 18px"),t()(),n(59,"td",18),e(60,"18px \xD7 18px"),t(),n(61,"td",13),e(62," Use in constrained spaces, such as in an input field or next to a button. The spinner animates and the field or button is disabled until the action is complete. "),t()()()(),n(63,"h2",19),e(64,"Placement"),t(),n(65,"p",3),e(66," Place the spinner where you want to focus the user\u2019s attention when the process completes. "),t(),n(67,"h2",20),e(68,"Label"),t(),n(69,"p",3),e(70," Optionally, provide a brief description of the process, for example, \u201CLoading \u2026\u201D "),t(),n(71,"h2",21),e(72,"Spinners Versus Progress Bars"),t(),n(73,"p",3),e(74," Clarity provides a linear, indeterminate "),n(75,"a",22),e(76,"progress bar"),t(),e(77," that serves the same use cases as a 

69spinner. Using a spinner or an indeterminate progress bar is a matter of spacing, visual consistency, and the object that the user selected to begin the process. "),t(),n(78,"h2",23),e(79,"Accessibility"),t(),n(80,"p",3),e(81," For accessibility, there are two methods to let the user know that something is loading: "),t(),n(82,"ul",4)(83,"li"),e(84,"Move the focus to the spinner if that is logical for the user."),t(),n(85,"li"),e(86," If moving focus to the spinner is not logical for the user, the best practice is to "),n(87,"a",24),e(88,"announce that new content is loaded via aria-live."),t()()()(),n(89,"app-doc-tab",25),I(90,re,1,0,"clr-spinner-component",26),n(91,"h2",27),e(92,"CSS Spinner Component"),t(),n(93,"h3",28),e(94,"Examples"),t(),p(95,"clr-spinner-types"),n(96,"h3",29),e(97,"Sizes"),t(),n(98,"p",3),e(99,"Clarity spinners can be displayed in three sizes:"),t(),n(100,"ul",30)(101,"li")(102,"strong",14),e(103,"Small:"),t(),e(104," This is the required sizing for inline spinners (see below). It measures 18x18 pixels. Use class "),n(105,"code",31),e(106,".spinner-sm"),t(),e(107," for small size. "),t(),n(108,"li")(109,"strong",14),e(110,"Medium:"),t(),e(111," Medium spinners measure 36x36 pixels. Use "),n(112,"code",31),e(113,".spinner-md"),t(),e(114," for medium size "),t(),n(115,"li")(116,"strong",14),e(117,"Large:"),t(),e(118," This is the default size for page spinners (see below). Use "),n(119,"code",31),e(120,".spinner-lg"),t(),e(121," for large size "),t()(),n(122,"p",3),e(123," Note that using the "),n(124,"code",31),e(125,".spinner-inline"),t(),e(126," class will force a spinner to the small size and that "),n(127,"code",31),e(128,".spinner-lg"),t(),e(129," is the default sizing of page spinners. "),t(),n(130,"h4",32),e(131,"Examples"),t(),p(132,"clr-spinner-sizes"),t(),n(133,"app-doc-tab",33)(134,"h2",34),e(135,"Angular Component"),t(),n(136,"table",35)(137,"thead")(138,"tr")(139,"th",13),e(140,"Input/Output"),t(),n(141,"th",18),e(142,"Type"),t(),n(143,"th",18),e(144,"Default"),t(),n(145,"th",13),e(146,"Effect"),t()()(),n(147,"tbody"),z(148,se,10,4,"tr",null,L),t()(),p(150,"app-style-docs",36),t()()),a&2&&(o(15),s("label","page spinner"),o(8),s("label","inline spinner"),o(125),P(l.props))},dependencies:[j,N,c,A,H,v,_,w,q],styles:[".clr-example[_ngcontent-%COMP%]{text-align:center}.spinner-box[_ngcontent-%COMP%]{display:flex;align-items:center;gap:var(--cds-global-layout-space-sm);justify-content:center}.spinner-examples[_ngcontent-%COMP%]{font-weight:var(--cds-alias-typography-font-weight-semibold)}"]})}}return i})();var Ne=(()=>{class i{static{this.\u0275fac=function(a){return new(a||i)}}static{this.\u0275mod=k({type:i})}static{this.\u0275inj=M({imports:[F,X,K,V.forChild([{path:"",component:D}]),c,d,w,_,D,v]})}}return i})();export{Ne as SpinnersDemoModule};