@alauda-fe/common
Version:
Alauda frontend team common codes.
47 lines • 10.2 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../core/pipes/pure.pipe";
const _c0 = (a0, a1) => ({ "acl-skeleton-item-active": a0, "acl-skeleton-item-isSquare": a1 });
function SkeletonItemComponent__svg_svg_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(0, "svg", 2);
i0.ɵɵelement(1, "path", 3);
i0.ɵɵelementEnd();
} }
export class SkeletonItemComponent {
constructor() {
this.active = false;
this.type = 'rect';
this.isSquare = false;
}
getClass(type) {
return `acl-skeleton-item acl-skeleton-item-${type}`;
}
static { this.ɵfac = function SkeletonItemComponent_Factory(t) { return new (t || SkeletonItemComponent)(); }; }
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkeletonItemComponent, selectors: [["acl-skeleton-item"]], inputs: { active: "active", type: "type", isSquare: "isSquare", customStyle: "customStyle" }, decls: 3, vars: 11, consts: [[3, "ngClass", "ngStyle"], ["class", "acl-skeleton-image-svg", "viewBox", "0 0 1098 1024", "xmlns", "http://www.w3.org/2000/svg", 4, "ngIf"], ["viewBox", "0 0 1098 1024", "xmlns", "http://www.w3.org/2000/svg", 1, "acl-skeleton-image-svg"], ["d", "M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z", 1, "acl-skeleton-image-path"]], template: function SkeletonItemComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 0);
i0.ɵɵpipe(1, "pure");
i0.ɵɵtemplate(2, SkeletonItemComponent__svg_svg_2_Template, 2, 0, "svg", 1);
i0.ɵɵelementEnd();
} if (rf & 2) {
i0.ɵɵclassMap(i0.ɵɵpipeBind2(1, 5, ctx.type, ctx.getClass));
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(8, _c0, ctx.active, ctx.isSquare))("ngStyle", ctx.customStyle);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.type === "image");
} }, dependencies: [i1.NgClass, i1.NgIf, i1.NgStyle, i2.PurePipe], styles: ["@keyframes _ngcontent-%COMP%_loading{0%{transform:translate(-150px)}to{transform:translate(calc(150px + 100%))}}.acl-skeleton-item[_ngcontent-%COMP%]{background:rgb(var(--aui-color-n-7))}.acl-skeleton-item-rect[_ngcontent-%COMP%]{width:60px;height:20px;border-radius:2px}.acl-skeleton-item-round[_ngcontent-%COMP%]{width:16px;border-radius:16px}.acl-skeleton-item-active[_ngcontent-%COMP%]{position:relative;overflow:hidden}.acl-skeleton-item-active[_ngcontent-%COMP%]:before{content:\"\";display:block;position:absolute;left:-150px;top:0;height:100%;width:150px;background:linear-gradient(90deg,rgba(var(--aui-color-n-7),.7) 25%,rgba(var(--aui-color-n-8),.7) 37%,rgba(var(--aui-color-n-7),.7) 63%);animation:_ngcontent-%COMP%_loading 2s ease-in-out infinite}.acl-skeleton-item-isSquare[_ngcontent-%COMP%]{width:16px;height:16px;border-radius:2px}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkeletonItemComponent, [{
type: Component,
args: [{ selector: 'acl-skeleton-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class]=\"type | pure: getClass\"\n [ngClass]=\"{\n 'acl-skeleton-item-active': this.active,\n 'acl-skeleton-item-isSquare': this.isSquare\n }\"\n [ngStyle]=\"customStyle\"\n>\n <svg\n *ngIf=\"type === 'image'\"\n class=\"acl-skeleton-image-svg\"\n viewBox=\"0 0 1098 1024\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z\"\n class=\"acl-skeleton-image-path\"\n />\n </svg>\n</div>\n", styles: ["@keyframes loading{0%{transform:translate(-150px)}to{transform:translate(calc(150px + 100%))}}.acl-skeleton-item{background:rgb(var(--aui-color-n-7))}.acl-skeleton-item-rect{width:60px;height:20px;border-radius:2px}.acl-skeleton-item-round{width:16px;border-radius:16px}.acl-skeleton-item-active{position:relative;overflow:hidden}.acl-skeleton-item-active:before{content:\"\";display:block;position:absolute;left:-150px;top:0;height:100%;width:150px;background:linear-gradient(90deg,rgba(var(--aui-color-n-7),.7) 25%,rgba(var(--aui-color-n-8),.7) 37%,rgba(var(--aui-color-n-7),.7) 63%);animation:loading 2s ease-in-out infinite}.acl-skeleton-item-isSquare{width:16px;height:16px;border-radius:2px}\n"] }]
}], null, { active: [{
type: Input
}], type: [{
type: Input
}], isSquare: [{
type: Input
}], customStyle: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkeletonItemComponent, { className: "SkeletonItemComponent" }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL3NrZWxldG9uL2l0ZW0vY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9jb21tb24vc3JjL3NrZWxldG9uL2l0ZW0vdGVtcGxhdGUuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7OztJQ1F4RSw4QkFLQztJQUNDLDBCQUdFO0lBQ0osaUJBQU07O0FETlIsTUFBTSxPQUFPLHFCQUFxQjtJQU5sQztRQVFFLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFHZixTQUFJLEdBQWlCLE1BQU0sQ0FBQztRQUc1QixhQUFRLEdBQUcsS0FBSyxDQUFDO0tBUWxCO0lBSEMsUUFBUSxDQUFDLElBQWtCO1FBQ3pCLE9BQU8sdUNBQXVDLElBQUksRUFBRSxDQUFDO0lBQ3ZELENBQUM7c0ZBZlUscUJBQXFCO29FQUFyQixxQkFBcUI7WUNabEMsOEJBT0M7O1lBQ0MsMkVBS0M7WUFNSCxpQkFBTTs7WUFsQkosMkRBQStCO1lBSy9CLEFBSkEsOEVBR0UsNEJBQ3FCO1lBR3BCLGVBQXNCO1lBQXRCLDJDQUFzQjs7O2lGREdkLHFCQUFxQjtjQU5qQyxTQUFTOzJCQUNFLG1CQUFtQixtQkFHWix1QkFBdUIsQ0FBQyxNQUFNO2dCQUkvQyxNQUFNO2tCQURMLEtBQUs7WUFJTixJQUFJO2tCQURILEtBQUs7WUFJTixRQUFRO2tCQURQLEtBQUs7WUFJTixXQUFXO2tCQURWLEtBQUs7O2tGQVZLLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IFN0cmluZ01hcCB9IGZyb20gJy4uLy4uL2NvcmUvcHVibGljLWFwaSc7XG5cbmV4cG9ydCB0eXBlIHNrZWxldG9uVHlwZSA9ICdyZWN0JyB8ICdyb3VuZCcgfCAnaW1hZ2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhY2wtc2tlbGV0b24taXRlbScsXG4gIHRlbXBsYXRlVXJsOiAndGVtcGxhdGUuaHRtbCcsXG4gIHN0eWxlVXJsczogWydzdHlsZS5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTa2VsZXRvbkl0ZW1Db21wb25lbnQge1xuICBASW5wdXQoKVxuICBhY3RpdmUgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICB0eXBlOiBza2VsZXRvblR5cGUgPSAncmVjdCc7XG5cbiAgQElucHV0KClcbiAgaXNTcXVhcmUgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBjdXN0b21TdHlsZTogU3RyaW5nTWFwO1xuXG4gIGdldENsYXNzKHR5cGU6IHNrZWxldG9uVHlwZSkge1xuICAgIHJldHVybiBgYWNsLXNrZWxldG9uLWl0ZW0gYWNsLXNrZWxldG9uLWl0ZW0tJHt0eXBlfWA7XG4gIH1cbn1cbiIsIjxkaXZcbiAgW2NsYXNzXT1cInR5cGUgfCBwdXJlOiBnZXRDbGFzc1wiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAnYWNsLXNrZWxldG9uLWl0ZW0tYWN0aXZlJzogdGhpcy5hY3RpdmUsXG4gICAgJ2FjbC1za2VsZXRvbi1pdGVtLWlzU3F1YXJlJzogdGhpcy5pc1NxdWFyZVxuICB9XCJcbiAgW25nU3R5bGVdPVwiY3VzdG9tU3R5bGVcIlxuPlxuICA8c3ZnXG4gICAgKm5nSWY9XCJ0eXBlID09PSAnaW1hZ2UnXCJcbiAgICBjbGFzcz1cImFjbC1za2VsZXRvbi1pbWFnZS1zdmdcIlxuICAgIHZpZXdCb3g9XCIwIDAgMTA5OCAxMDI0XCJcbiAgICB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCJcbiAgPlxuICAgIDxwYXRoXG4gICAgICBkPVwiTTM2NS43MTQyODYgMzI5LjE0Mjg1N3EwIDQ1LjcxNDI4Ni0zMi4wMzY1NzEgNzcuNjc3NzE0dC03Ny42Nzc3MTQgMzIuMDM2NTcxLTc3LjY3NzcxNC0zMi4wMzY1NzEtMzIuMDM2NTcxLTc3LjY3NzcxNCAzMi4wMzY1NzEtNzcuNjc3NzE0IDc3LjY3NzcxNC0zMi4wMzY1NzEgNzcuNjc3NzE0IDMyLjAzNjU3MSAzMi4wMzY1NzEgNzcuNjc3NzE0ek05NTAuODU3MTQzIDU0OC41NzE0MjlsMCAyNTYtODA0LjU3MTQyOSAwIDAtMTA5LjcxNDI4NiAxODIuODU3MTQzLTE4Mi44NTcxNDMgOTEuNDI4NTcxIDkxLjQyODU3MSAyOTIuNTcxNDI5LTI5Mi41NzE0Mjl6TTEwMDUuNzE0Mjg2IDE0Ni4yODU3MTRsLTkxNC4yODU3MTQgMHEtNy40NjA1NzEgMC0xMi44NzMxNDMgNS40MTI1NzF0LTUuNDEyNTcxIDEyLjg3MzE0M2wwIDY5NC44NTcxNDNxMCA3LjQ2MDU3MSA1LjQxMjU3MSAxMi44NzMxNDN0MTIuODczMTQzIDUuNDEyNTcxbDkxNC4yODU3MTQgMHE3LjQ2MDU3MSAwIDEyLjg3MzE0My01LjQxMjU3MXQ1LjQxMjU3MS0xMi44NzMxNDNsMC02OTQuODU3MTQzcTAtNy40NjA1NzEtNS40MTI1NzEtMTIuODczMTQzdC0xMi44NzMxNDMtNS40MTI1NzF6TTEwOTcuMTQyODU3IDE2NC41NzE0MjlsMCA2OTQuODU3MTQzcTAgMzcuNzQxNzE0LTI2Ljg0MzQyOSA2NC41ODUxNDN0LTY0LjU4NTE0MyAyNi44NDM0MjlsLTkxNC4yODU3MTQgMHEtMzcuNzQxNzE0IDAtNjQuNTg1MTQzLTI2Ljg0MzQyOXQtMjYuODQzNDI5LTY0LjU4NTE0M2wwLTY5NC44NTcxNDNxMC0zNy43NDE3MTQgMjYuODQzNDI5LTY0LjU4NTE0M3Q2NC41ODUxNDMtMjYuODQzNDI5bDkxNC4yODU3MTQgMHEzNy43NDE3MTQgMCA2NC41ODUxNDMgMjYuODQzNDI5dDI2Ljg0MzQyOSA2NC41ODUxNDN6XCJcbiAgICAgIGNsYXNzPVwiYWNsLXNrZWxldG9uLWltYWdlLXBhdGhcIlxuICAgIC8+XG4gIDwvc3ZnPlxuPC9kaXY+XG4iXX0=