@patternfly/elements
Version:
PatternFly Elements
1 lines • 3.2 kB
Source Map (JSON)
{"version":3,"file":"pf-spinner.js","sourceRoot":"","sources":["pf-spinner.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;;;AAwBxF,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAGL,2DAA2D;QAC3D,+BAAa,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,EAAC;QAEnE,mCAAmC;QACN,SAAI,GAA8B,IAAI,CAAC;;IAK3D,MAAM;QACb,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,EAAE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;;;KAGtE,CAAC;IACJ,CAAC;;;AAlBe,gBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAMtB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAkE;AAVnF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-spinner.css';\n\n/**\n * A **spinner** is used to indicate to users that an action is in progress. For actions\n * that may take a long time, use a progress bar instead.\n * @cssprop {<length>} [--pf-c-spinner--diameter=3.375rem]\n * @cssprop {<length>} [--pf-c-spinner--Width=3.375rem]\n * @cssprop {<length>} [--pf-c-spinner--Height=3.375rem]\n * @cssprop {<color>} [--pf-c-spinner--Color=#06c]\n * @cssprop {<length>} [--pf-c-spinner--m-sm--diameter=0.625rem]\n * @cssprop {<length>} [--pf-c-spinner--m-md--diameter=1.125rem]\n * @cssprop {<length>} [--pf-c-spinner--m-lg--diameter=1.5rem]\n * @cssprop {<length>} [--pf-c-spinner--m-xl--diameter=3.375rem]\n * @cssprop {<time>} [--pf-c-spinner--AnimationDuration=1.4s]\n * @cssprop {<string>} [--pf-c-spinner--AnimationTimingFunction=linear]\n * @cssprop {<number>} [--pf-c-spinner--stroke-width=10]\n * @cssprop {<color>} [--pf-c-spinner__path--Stroke=#06c]\n * @cssprop {<number>} [--pf-c-spinner__path--StrokeWidth=10]\n * @cssprop {<string>} [--pf-c-spinner__path--AnimationTimingFunction=ease-in-out]\n */\n\n@customElement('pf-spinner')\nexport class PfSpinner extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n // eslint-disable-next-line no-unused-private-class-members\n #internals = InternalsController.of(this, { role: 'progressbar' });\n\n /** Preset sizes for the spinner */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'xl';\n\n /** Custom diameter of spinner set as CSS variable */\n @property({ reflect: true }) diameter?: `${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}`;\n\n override render(): TemplateResult<1> {\n return html`\n <svg viewBox=\"0 0 100 100\"\n style=\"${styleMap({ '--pf-c-spinner--diameter': this.diameter })}\">\n <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n </svg>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-spinner': PfSpinner;\n }\n}\n"]}