1import { 2 ChangeDetectionStrategy, 3 Component, 4 InjectionToken, 5 NgModule, 6 __spreadValues, 7 computed, 8 inject, 9 input, 10 isDevMode, 11 numberAttribute, 12 setClassMetadata, 13 ɵɵadvance, 14 ɵɵattribute, 15 ɵɵclassProp, 16 ɵɵconditional, 17 ɵɵconditionalCreate, 18 ɵɵdeclareLet, 19 ɵɵdefineComponent, 20 ɵɵdefineInjector, 21 ɵɵdefineNgModule, 22 ɵɵdomElementEnd, 23 ɵɵdomElementStart, 24 ɵɵnextContext, 25 ɵɵprojection, 26 ɵɵprojectionDef, 27 ɵɵreadContextLet, 28 ɵɵrepeater, 29 ɵɵrepeaterCreate, 30 ɵɵrepeaterTrackByIdentity, 31 ɵɵstoreLet, 32 ɵɵstyleMap 33} from "./chunk-ZGC4HH7K.js"; 34 35// node_modules/ngx-skeleton-loader/fesm2022/ngx-skeleton-loader.mjs 36var _c0 = ["*"]; 37function NgxSkeletonLoaderComponent_For_3_Conditional_1_Template(rf, ctx) { 38 if (rf & 1) { 39 \u0275\u0275projection(0); 40 } 41} 42function NgxSkeletonLoaderComponent_For_3_Template(rf, ctx) { 43 if (rf & 1) { 44 \u0275\u0275domElementStart(0, "div", 1); 45 \u0275\u0275conditionalCreate(1, NgxSkeletonLoaderComponent_For_3_Conditional_1_Template, 1, 0); 46 \u0275\u0275domElementEnd(); 47 } 48 if (rf & 2) { 49 const ctx_r0 = \u0275\u0275nextContext(); 50 const appearanceValue_r2 = \u0275\u0275readContextLet(0); 51 const animationValue_r3 = \u0275\u0275readContextLet(1); 52 \u0275\u0275styleMap(ctx_r0.styles()); 53 \u0275\u0275classProp("custom-content", appearanceValue_r2 === "custom-content")("circle", appearanceValue_r2 === "circle")("square", appearanceValue_r2 === "square")("progress", animationValue_r3 === "progress")("progress-dark", animationValue_r3 === "progress-dark")("pulse", animationValue_r3 === "pulse")("pulse-dark", animationValue_r3 === "pulse-dark"); 54 \u0275\u0275attribute("aria-label", ctx_r0.ariaLabel())("aria-valuetext", ctx_r0.loadingText()); 55 \u0275\u0275advance(); 56 \u0275\u0275conditional(appearanceValue_r2 === "custom-content" ? 1 : -1); 57 } 58} 59var NGX_SKELETON_LOADER_CONFIG = new InjectionToken("ngx-skeleton-loader.config"); 60var NgxSkeletonLoaderComponent = class _NgxSkeletonLoaderComponent { 61 constructor() { 62 this.#config = inject(NGX_SKELETON_LOADER_CONFIG, { 63 optional: true 64 }); 65 this.count = input(this.#config?.count || 1, { 66 transform: numberAttribute 67 }); 68 this.loadingText = input(this.#config?.loadingText || "Loading..."); 69 this.appearance = input(this.#config?.appearance || "line"); 70 this.animation = input(this.#config?.animation || "progress"); 71 this.ariaLabel = input(this.#config?.ariaLabel || "loading"); 72 this.theme = input(this.#config?.theme || null); 73 this.size = input(this.#config?.size || null); 74 this.measureUnit = input(this.#config?.measureUnit || "px"); 75 this.items = computed(() => { 76 let count = this.count() || 1; 77 if (this.appearance() === "custom-content") { 78 if (isDevMode() && count !== 1) { 79 console.error(`\`NgxSkeletonLoaderComponent\` enforces elements with "custom-content" appearance as DOM nodes. Forcing "count" to "1".`); 80 count = 1; 81 } 82 } 83 return [...Array(count)].map((_, index) => index); 84 }); 85 this.squareSize = computed(() => { 86 const size = this.size(); 87 if (this.appearance() !== "square" || typeof size !== "number" && typeof size !== "string") { 88 return null; 89 } 90 const sizeValueInNumbersOnly = Number(size.toString().trim().replace(/\D/g, "")); 91 if (!Number.isInteger(sizeValueInNumbersOnly)) { 92 return null; 93 } 94 return `${sizeValueInNumbersOnly}${this.measureUnit()}`; 95 }); 96 this.styles = computed(() => { 97 const theme = this.theme(); 98 const size = this.squareSize(); 99 if (this.#config?.theme?.extendsFromRoot) { 100 return __spreadValues(__spreadValues(__spreadValues({}, this.#config?.theme), theme), size && { 101 width: size, 102 height: size 103 }); 104 } 105 return __spreadValues(__spreadValues({}, theme), size && { 106 width: size, 107 height: size 108 }); 109 }); 110 } 111 /** 112 * Injects the `NgxSkeletonLoaderConfig` configuration object, which is optional. 113 * This configuration object provides various options for customizing the behavior 114 * and appearance of the `NgxSkeletonLoaderComponent`. 115 */ 116 #config; 117 static { 118 this.\u0275fac = function NgxSkeletonLoaderComponent_Factory(__ngFactoryType__) { 119 return new (__ngFactoryType__ || _NgxSkeletonLoaderComponent)(); 120 }; 121 } 122 static { 123 this.\u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ 124 type: _NgxSkeletonLoaderComponent, 125 selectors: [["ngx-skeleton-loader"]], 126 inputs: { 127 count: [1, "count"], 128 loadingText: [1, "loadingText"], 129 appearance: [1, "appearance"], 130 animation: [1, "animation"], 131 ariaLabel: [1, "ariaLabel"], 132 theme: [1, "theme"], 133 size: [1, "size"], 134 measureUnit: [1, "measureUnit"] 135 }, 136 ngContentSelectors: _c0, 137 decls: 4, 138 vars: 2, 139 consts: [["aria-busy", "true", "aria-valuemin", "0", "aria-valuemax", "100", "role", "progressbar", "tabindex", "-1", 1, "skeleton-loader", 3, "custom-content", "circle", "square", "progress", "progress-dark", "pulse", "pulse-dark", "style"], ["aria-busy", "true", "aria-valuemin", "0", "aria-valuemax", "100", "role", "progressbar", "tabindex", "-1", 1, "skeleton-loader"]], 140 template: function NgxSkeletonLoaderComponent_Template(rf, ctx) { 141 if (rf & 1) { 142 \u0275\u0275projectionDef(); 143 \u0275\u0275declareLet(0)(1); 144 \u0275\u0275repeaterCreate(2, NgxSkeletonLoaderComponent_For_3_Template, 2, 19, "div", 0, \u0275\u0275repeaterTrackByIdentity); 145 } 146 if (rf & 2) { 147 \u0275\u0275storeLet(ctx.appearance()); 148 \u0275\u0275advance(); 149 \u0275\u0275storeLet(ctx.animation()); 150 \u0275\u0275advance(); 151 \u0275\u0275repeater(ctx.items()); 152 } 153 }, 154 styles: ['.skeleton-loader[_ngcontent-%COMP%]{--ngx-skeleton-loader-base-color: rgb(239, 241, 246);--ngx-skeleton-loader-light-mode-color: rgba(255, 255, 255, .6);--ngx-skeleton-loader-light-mode-color-to: rgba(255, 255, 255, 0);--ngx-skeleton-loader-dark-mode-color: rgba(0, 0, 0, .2);--ngx-skeleton-loader-dark-mode-color-to: transparent;--ngx-skeleton-loader-animation-duration: 2s;--ngx-skeleton-loader-background-image-light-mode: linear-gradient( 90deg, var(--ngx-skeleton-loader-light-mode-color-to), var(--ngx-skeleton-loader-light-mode-color), var(--ngx-skeleton-loader-light-mode-color-to) );--ngx-skeleton-loader-background-image-dark-mode: linear-gradient( 90deg, var(--ngx-skeleton-loader-dark-mode-color-to), var(--ngx-skeleton-loader-dark-mode-color), var(--ngx-skeleton-loader-dark-mode-color-to) );box-sizing:border-box;overflow:hidden;position:relative;background:var(--ngx-skeleton-loader-base-color) no-repeat;border-radius:4px;width:100%;height:20px;
154display:inline-block;margin-bottom:10px;will-change:transform}.skeleton-loader[_ngcontent-%COMP%]:after, .skeleton-loader[_ngcontent-%COMP%]:before{box-sizing:border-box}.skeleton-loader.circle[_ngcontent-%COMP%]{width:40px;height:40px;margin:5px;border-radius:50%}.skeleton-loader.square[_ngcontent-%COMP%]{width:40px;height:40px;margin:5px}.skeleton-loader.progress[_ngcontent-%COMP%], .skeleton-loader.progress-dark[_ngcontent-%COMP%]{transform:translateZ(0)}.skeleton-loader.progress[_ngcontent-%COMP%]:after, .skeleton-loader.progress[_ngcontent-%COMP%]:before, .skeleton-loader.progress-dark[_ngcontent-%COMP%]:after, .skeleton-loader.progress-dark[_ngcontent-%COMP%]:before{box-sizing:border-box}.skeleton-loader.progress[_ngcontent-%COMP%]:before, .skeleton-loader.progress-dark[_ngcontent-%COMP%]:before{animation:_ngcontent-%COMP%_progress var(--ngx-skeleton-loader-animation-duration) ease-in-out infinite;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:""}.skeleton-loader.progress[_ngcontent-%COMP%]:before{background-image:var(--ngx-skeleton-loader-background-image-light-mode)}.skeleton-loader.progress-dark[_ngcontent-%COMP%]:before{background-image:var(--ngx-skeleton-loader-background-image-dark-mode)}.skeleton-loader.pulse[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_pulse var(--ngx-skeleton-loader-animation-duration) cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}.skeleton-loader.pulse-dark[_ngcontent-%COMP%]{background:var(--ngx-skeleton-loader-dark-mode-color);animation:_ngcontent-%COMP%_pulse var(--ngx-skeleton-loader-animation-duration) cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}.skeleton-loader.custom-content[_ngcontent-%COMP%]{height:100%;background:none}@media (prefers-reduced-motion: reduce){.skeleton-loader.pulse[_ngcontent-%COMP%], .skeleton-loader.progress-dark[_ngcontent-%COMP%], .skeleton-loader.pulse-dark[_ngcontent-%COMP%], .skeleton-loader.custom-content[_ngcontent-%COMP%], .skeleton-loader.progress[_ngcontent-%COMP%]:before{animation:none}.skeleton-loader.progress[_ngcontent-%COMP%]:before, .skeleton-loader.progress-dark[_ngcontent-%COMP%], .skeleton-loader.pulse-dark[_ngcontent-%COMP%], .skeleton-loader.custom-content[_ngcontent-%COMP%]{background-image:none}}@media screen and (min-device-width: 1200px){.skeleton-loader[_ngcontent-%COMP%]{-webkit-user-select:none;user-select:none;cursor:wait}}@keyframes _ngcontent-%COMP%_progress{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes _ngcontent-%COMP%_pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}'], 155 changeDetection: 0 156 }); 157 } 158}; 159(() => { 160 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(NgxSkeletonLoaderComponent, [{ 161 type: Component, 162 args: [{ 163 selector: "ngx-skeleton-loader", 164 changeDetection: ChangeDetectionStrategy.OnPush, 165 standalone: true, 166 template: `@let appearanceValue = appearance(); 167@let animationValue = animation(); 168@for (item of items(); track item) { 169 <div 170 class="skeleton-loader" 171 [attr.aria-label]="ariaLabel()" 172 aria-busy="true" 173 aria-valuemin="0" 174 aria-valuemax="100" 175 [attr.aria-valuetext]="loadingText()" 176 role="progressbar" 177 tabindex="-1" 178 [class.custom-content]="appearanceValue === 'custom-content'" 179 [class.circle]="appearanceValue === 'circle'" 180 [class.square]="appearanceValue === 'square'" 181 [class.progress]="animationValue === 'progress'" 182 [class.progress-dark]="animationValue === 'progress-dark'" 183 [class.pulse]="animationValue === 'pulse'" 184 [class.pulse-dark]="animationValue === 'pulse-dark'" 185 [style]="styles()" 186 > 187 @if (appearanceValue === 'custom-content') { 188 <ng-content></ng-content> 189 } 190 </div> 191} 192`, 193 styles: ['.skeleton-loader{--ngx-skeleton-loader-base-color: rgb(239, 241, 246);--ngx-skeleton-loader-light-mode-color: rgba(255, 255, 255, .6);--ngx-skeleton-loader-light-mode-color-to: rgba(255, 255, 255, 0);--ngx-skeleton-loader-dark-mode-color: rgba(0, 0, 0, .2);--ngx-skeleton-loader-dark-mode-color-to: transparent;--ngx-skeleton-loader-animation-duration: 2s;--ngx-skeleton-loader-background-image-light-mode: linear-gradient( 90deg, var(--ngx-skeleton-loader-light-mode-color-to), var(--ngx-skeleton-loader-light-mode-color), var(--ngx-skeleton-loader-light-mode-color-to) );--ngx-skeleton-loader-background-image-dark-mode: linear-gradient( 90deg, var(--ngx-skeleton-loader-dark-mode-color-to), var(--ngx-skeleton-loader-dark-mode-color), var(--ngx-skeleton-loader-dark-mode-color-to) );box-sizing:border-box;overflow:hidden;position:relative;background:var(--ngx-skeleton-loader-base-color) no-repeat;border-radius:4px;width:100%;height:20px;
193display:inline-block;margin-bottom:10px;will-change:transform}.skeleton-loader:after,.skeleton-loader:before{box-sizing:border-box}.skeleton-loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}.skeleton-loader.square{width:40px;height:40px;margin:5px}.skeleton-loader.progress,.skeleton-loader.progress-dark{transform:translateZ(0)}.skeleton-loader.progress:after,.skeleton-loader.progress:before,.skeleton-loader.progress-dark:after,.skeleton-loader.progress-dark:before{box-sizing:border-box}.skeleton-loader.progress:before,.skeleton-loader.progress-dark:before{animation:progress var(--ngx-skeleton-loader-animation-duration) ease-in-out infinite;background-size:200px 100%;position:absolute;z-index:1;top:0;left:0;width:200px;height:100%;content:""}.skeleton-loader.progress:before{background-image:var(--ngx-skeleton-loader-background-image-light-mode)}.skeleton-loader.progress-dark:before{background-image:var(--ngx-skeleton-loader-background-image-dark-mode)}.skeleton-loader.pulse{animation:pulse var(--ngx-skeleton-loader-animation-duration) cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}.skeleton-loader.pulse-dark{background:var(--ngx-skeleton-loader-dark-mode-color);animation:pulse var(--ngx-skeleton-loader-animation-duration) cubic-bezier(.4,0,.2,1) infinite;animation-delay:.5s}.skeleton-loader.custom-content{height:100%;background:none}@media (prefers-reduced-motion: reduce){.skeleton-loader.pulse,.skeleton-loader.progress-dark,.skeleton-loader.pulse-dark,.skeleton-loader.custom-content,.skeleton-loader.progress:before{animation:none}.skeleton-loader.progress:before,.skeleton-loader.progress-dark,.skeleton-loader.pulse-dark,.skeleton-loader.custom-content{background-image:none}}@media screen and (min-device-width: 1200px){.skeleton-loader{-webkit-user-select:none;user-select:none;cursor:wait}}@keyframes progress{0%{transform:translate3d(-200px,0,0)}to{transform:translate3d(calc(200px + 100vw),0,0)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}\n'] 194 }] 195 }], null, null); 196})(); 197var NgxSkeletonLoaderModule = class _NgxSkeletonLoaderModule { 198 static forRoot(config) { 199 return { 200 ngModule: _NgxSkeletonLoaderModule, 201 providers: [{ 202 provide: NGX_SKELETON_LOADER_CONFIG, 203 useValue: config 204 }] 205 }; 206 } 207 static { 208 this.\u0275fac = function NgxSkeletonLoaderModule_Factory(__ngFactoryType__) { 209 return new (__ngFactoryType__ || _NgxSkeletonLoaderModule)(); 210 }; 211 } 212 static { 213 this.\u0275mod = /* @__PURE__ */ \u0275\u0275defineNgModule({ 214 type: _NgxSkeletonLoaderModule, 215 imports: [NgxSkeletonLoaderComponent], 216 exports: [NgxSkeletonLoaderComponent] 217 }); 218 } 219 static { 220 this.\u0275inj = /* @__PURE__ */ \u0275\u0275defineInjector({}); 221 } 222}; 223(() => { 224 (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(NgxSkeletonLoaderModule, [{ 225 type: NgModule, 226 args: [{ 227 imports: [NgxSkeletonLoaderComponent], 228 exports: [NgxSkeletonLoaderComponent] 229 }] 230 }], null, null); 231})(); 232 233export { 234 NgxSkeletonLoaderComponent, 235 NgxSkeletonLoaderModule 236}; 237/**i18n:55a58011b6fcf12b70aba021cbe233ce2fe179902ce3502a5c6547ccaba0ed7f*/ 238//# sourceMappingURL=chunk-W3TZNBCT.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.