@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
114 lines • 13.8 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, } from '@angular/core';
import { ImageLoadingStrategy } from './media.model';
import * as i0 from "@angular/core";
import * as i1 from "./media.service";
import * as i2 from "@angular/common";
export class MediaComponent {
constructor(mediaService) {
this.mediaService = mediaService;
// TODO: Remove type forcing of `this.loadingStrategy` (ie. <ImageLoadingStrategy | null>) in 5.0 (#14236)
/**
* Set the loading strategy of the media. Defaults to global loading strategy.
* Use 'lazy' or 'eager' strategies.
*/
this.loading = (this.loadingStrategy);
/**
* Once the media is loaded, we emit an event.
*/
this.loaded = new EventEmitter();
/**
* The `cx-media` component has an `is-initialized` class as long as the
* media is being initialized.
*/
this.isInitialized = false;
/**
* The `cx-media` component has a `is-loading` class as long as the
* media is loaded. Wehn the media is loaded, the `is-initialized` class
* is added.
*/
this.isLoading = true;
/**
* When there's no media provided for the content, or in case an error
* happened during loading, we add the `is-missing` class. Visual effects
* can be controlled by CSS.
*/
this.isMissing = false;
}
ngOnChanges() {
this.create();
}
/**
* Creates the `Media` object
*/
create() {
var _a;
this.media = this.mediaService.getMedia(this.container instanceof Array ? this.container[0] : this.container, this.format, this.alt, this.role);
if (!((_a = this.media) === null || _a === void 0 ? void 0 : _a.src)) {
this.handleMissing();
}
}
/**
* This handler is called from the UI when the image is loaded.
*/
loadHandler() {
this.isLoading = false;
this.isInitialized = true;
this.isMissing = false;
this.loaded.emit(true);
}
// TODO: Remove string return type (#14236)
/**
* Indicates whether the browser should lazy load the image.
* @deprecated since 4.2. use ImageLoadingStrategy or null return types only
*/
get loadingStrategy() {
return this.mediaService.loadingStrategy === ImageLoadingStrategy.LAZY
? ImageLoadingStrategy.LAZY
: null;
}
/**
* Whenever an error happens during load, we mark the component
* with css classes to have a missing media.
*/
errorHandler() {
this.handleMissing();
}
handleMissing() {
this.isLoading = false;
this.isInitialized = true;
this.isMissing = true;
this.loaded.emit(false);
}
}
MediaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MediaComponent, deps: [{ token: i1.MediaService }], target: i0.ɵɵFactoryTarget.Component });
MediaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: MediaComponent, selector: "cx-media", inputs: { container: "container", format: "format", alt: "alt", role: "role", loading: "loading" }, outputs: { loaded: "loaded" }, host: { properties: { "class.is-initialized": "this.isInitialized", "class.is-loading": "this.isLoading", "class.is-missing": "this.isMissing" } }, usesOnChanges: true, ngImport: i0, template: "<img\n *ngIf=\"media?.src\"\n [attr.src]=\"media.src\"\n [attr.srcset]=\"media.srcset\"\n [attr.alt]=\"media.alt\"\n [attr.role]=\"media.role\"\n [attr.loading]=\"loading\"\n (load)=\"loadHandler()\"\n (error)=\"errorHandler()\"\n/>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: MediaComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-media',
templateUrl: './media.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i1.MediaService }]; }, propDecorators: { container: [{
type: Input
}], format: [{
type: Input
}], alt: [{
type: Input
}], role: [{
type: Input
}], loading: [{
type: Input
}], loaded: [{
type: Output
}], isInitialized: [{
type: HostBinding,
args: ['class.is-initialized']
}], isLoading: [{
type: HostBinding,
args: ['class.is-loading']
}], isMissing: [{
type: HostBinding,
args: ['class.is-missing']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVkaWEuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3RvcmVmcm9udGxpYi9zaGFyZWQvY29tcG9uZW50cy9tZWRpYS9tZWRpYS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL3NoYXJlZC9jb21wb25lbnRzL21lZGlhL21lZGlhLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUVMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsb0JBQW9CLEVBQXlCLE1BQU0sZUFBZSxDQUFDOzs7O0FBUTVFLE1BQU0sT0FBTyxjQUFjO0lBc0V6QixZQUFzQixZQUEwQjtRQUExQixpQkFBWSxHQUFaLFlBQVksQ0FBYztRQXhDaEQsMEdBQTBHO1FBQzFHOzs7V0FHRztRQUNNLFlBQU8sR0FBNkQsQ0FDM0UsSUFBSSxDQUFDLGVBQWUsQ0FDckIsQ0FBQztRQUVGOztXQUVHO1FBQ08sV0FBTSxHQUEwQixJQUFJLFlBQVksRUFBVyxDQUFDO1FBUXRFOzs7V0FHRztRQUNrQyxrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUUzRDs7OztXQUlHO1FBQzhCLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFFbEQ7Ozs7V0FJRztRQUM4QixjQUFTLEdBQUcsS0FBSyxDQUFDO0lBRUEsQ0FBQztJQUVwRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ2hCLENBQUM7SUFFRDs7T0FFRztJQUNPLE1BQU07O1FBQ2QsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FDckMsSUFBSSxDQUFDLFNBQVMsWUFBWSxLQUFLLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQ3BFLElBQUksQ0FBQyxNQUFNLEVBQ1gsSUFBSSxDQUFDLEdBQUcsRUFDUixJQUFJLENBQUMsSUFBSSxDQUNWLENBQUM7UUFDRixJQUFJLENBQUMsQ0FBQSxNQUFBLElBQUksQ0FBQyxLQUFLLDBDQUFFLEdBQUcsQ0FBQSxFQUFFO1lBQ3BCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztTQUN0QjtJQUNILENBQUM7SUFFRDs7T0FFRztJQUNILFdBQVc7UUFDVCxJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztRQUN2QixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQztRQUMxQixJQUFJLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztRQUN2QixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBRUQsMkNBQTJDO0lBQzNDOzs7T0FHRztJQUNILElBQUksZUFBZTtRQUNqQixPQUFPLElBQUksQ0FBQyxZQUFZLENBQUMsZUFBZSxLQUFLLG9CQUFvQixDQUFDLElBQUk7WUFDcEUsQ0FBQyxDQUFDLG9CQUFvQixDQUFDLElBQUk7WUFDM0IsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNYLENBQUM7SUFFRDs7O09BR0c7SUFDSCxZQUFZO1FBQ1YsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFUyxhQUFhO1FBQ3JCLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1FBQzFCLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ3RCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7OzJHQTdIVSxjQUFjOytGQUFkLGNBQWMsNFZDbEIzQixvUEFVQTsyRkRRYSxjQUFjO2tCQUwxQixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxVQUFVO29CQUNwQixXQUFXLEVBQUUsd0JBQXdCO29CQUNyQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7bUdBUVUsU0FBUztzQkFBakIsS0FBSztnQkFVRyxNQUFNO3NCQUFkLEtBQUs7Z0JBTUcsR0FBRztzQkFBWCxLQUFLO2dCQUtHLElBQUk7c0JBQVosS0FBSztnQkFPRyxPQUFPO3NCQUFmLEtBQUs7Z0JBT0ksTUFBTTtzQkFBZixNQUFNO2dCQVk4QixhQUFhO3NCQUFqRCxXQUFXO3VCQUFDLHNCQUFzQjtnQkFPRixTQUFTO3NCQUF6QyxXQUFXO3VCQUFDLGtCQUFrQjtnQkFPRSxTQUFTO3NCQUF6QyxXQUFXO3VCQUFDLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJbWFnZSwgSW1hZ2VHcm91cCB9IGZyb20gJ0BzcGFydGFjdXMvY29yZSc7XG5pbXBvcnQgeyBJbWFnZUxvYWRpbmdTdHJhdGVneSwgTWVkaWEsIE1lZGlhQ29udGFpbmVyIH0gZnJvbSAnLi9tZWRpYS5tb2RlbCc7XG5pbXBvcnQgeyBNZWRpYVNlcnZpY2UgfSBmcm9tICcuL21lZGlhLnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjeC1tZWRpYScsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZWRpYS5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBNZWRpYUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIC8qKlxuICAgKiBUaGUgbWVkaWEgY29udGFpbmVyIGNhbiBob2xkIG11bHRpcGxlIG1lZGlhIGl0ZW1zLCBzbyB0aGF0XG4gICAqIGEgc3BlY2lmaWMgbWVkaWEgKGJ5IGZvcm1hdCkgY2FuIGJlIHVzZWQgb3IgbXVsdGlwbGUgbWVkaWFcbiAgICogY2FuIGJlIHByb3ZpZGVkIGluIGEgYHNyY3NldGAgc28gdGhlIGJyb3dzZXIgd2lsbCBmaWd1cmUgb3V0XG4gICAqIHRoZSBiZXN0IG1lZGlhIGZvciB0aGUgZGV2aWNlLlxuICAgKi9cbiAgQElucHV0KCkgY29udGFpbmVyOlxuICAgIHwgTWVkaWFDb250YWluZXJcbiAgICB8IEltYWdlXG4gICAgfCBJbWFnZUdyb3VwXG4gICAgfCBJbWFnZUdyb3VwW11cbiAgICB8IHVuZGVmaW5lZDtcblxuICAvKipcbiAgICogaWYgYSBtZWRpYSBmb3JtYXQgaXMgZ2l2ZW4sIGEgbWVkaWEgZm9yIHRoZSBnaXZlbiBmb3JtYXQgd2lsbCBiZSByZW5kZXJlZFxuICAgKi9cbiAgQElucHV0KCkgZm9ybWF0OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEEgc3BlY2lmaWMgYWx0IHRleHQgZm9yIGFuIGltYWdlLCB3aGljaCBvdmVycnVsZXMgdGhlIGFsdCB0ZXh0XG4gICAqIGZyb20gdGhlIGNvbnRhaW5lciBkYXRhLlxuICAgKi9cbiAgQElucHV0KCkgYWx0OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIHNldCByb2xlIG9mIHRoZSBpbWFnZSBpZiBkaWZmZXJlbnQgdGhhbiB3aGF0IGlzIGludGVuZGVkIChlZywgcm9sZT1cInByZXNlbnRhdGlvblwiKVxuICAgKi9cbiAgQElucHV0KCkgcm9sZTogc3RyaW5nO1xuXG4gIC8vIFRPRE86IFJlbW92ZSB0eXBlIGZvcmNpbmcgb2YgYHRoaXMubG9hZGluZ1N0cmF0ZWd5YCAoaWUuIDxJbWFnZUxvYWRpbmdTdHJhdGVneSB8IG51bGw+KSBpbiA1LjAgKCMxNDIzNilcbiAgLyoqXG4gICAqIFNldCB0aGUgbG9hZGluZyBzdHJhdGVneSBvZiB0aGUgbWVkaWEuIERlZmF1bHRzIHRvIGdsb2JhbCBsb2FkaW5nIHN0cmF0ZWd5LlxuICAgKiBVc2UgJ2xhenknIG9yICdlYWdlcicgc3RyYXRlZ2llcy5cbiAgICovXG4gIEBJbnB1dCgpIGxvYWRpbmc6IEltYWdlTG9hZGluZ1N0cmF0ZWd5IHwgbnVsbCA9IDxJbWFnZUxvYWRpbmdTdHJhdGVneSB8IG51bGw+KFxuICAgIHRoaXMubG9hZGluZ1N0cmF0ZWd5XG4gICk7XG5cbiAgLyoqXG4gICAqIE9uY2UgdGhlIG1lZGlhIGlzIGxvYWRlZCwgd2UgZW1pdCBhbiBldmVudC5cbiAgICovXG4gIEBPdXRwdXQoKSBsb2FkZWQ6IEV2ZW50RW1pdHRlcjxCb29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXI8Qm9vbGVhbj4oKTtcblxuICAvKipcbiAgICogVGhlIG1lZGlhIGNvbnRhaW5zIHRoZSBpbmZvIGZvciB0aGUgVUkgdG8gY3JlYXRlIHRoZSBpbWFnZS4gVGhpcyBtZWRpYVxuICAgKiBvYmplY3QgbWlnaHQgY29udGFpbiBtb3JlIGluZm8gb25jZSBvdGhlciBtZWRpYSB0eXBlcyAoaS5lLiB2aWRlbykgaXMgc3VwcG9ydGVkLlxuICAgKi9cbiAgbWVkaWE6IE1lZGlhO1xuXG4gIC8qKlxuICAgKiBUaGUgYGN4LW1lZGlhYCBjb21wb25lbnQgaGFzIGFuIGBpcy1pbml0aWFsaXplZGAgY2xhc3MgYXMgbG9uZyBhcyB0aGVcbiAgICogbWVkaWEgaXMgYmVpbmcgaW5pdGlhbGl6ZWQuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmlzLWluaXRpYWxpemVkJykgaXNJbml0aWFsaXplZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBUaGUgYGN4LW1lZGlhYCBjb21wb25lbnQgaGFzIGEgYGlzLWxvYWRpbmdgIGNsYXNzIGFzIGxvbmcgYXMgdGhlXG4gICAqIG1lZGlhIGlzIGxvYWRlZC4gV2VobiB0aGUgbWVkaWEgaXMgbG9hZGVkLCB0aGUgYGlzLWluaXRpYWxpemVkYCBjbGFzc1xuICAgKiBpcyBhZGRlZC5cbiAgICovXG4gIEBIb3N0QmluZGluZygnY2xhc3MuaXMtbG9hZGluZycpIGlzTG9hZGluZyA9IHRydWU7XG5cbiAgLyoqXG4gICAqIFdoZW4gdGhlcmUncyBubyBtZWRpYSBwcm92aWRlZCBmb3IgdGhlIGNvbnRlbnQsIG9yIGluIGNhc2UgYW4gZXJyb3JcbiAgICogaGFwcGVuZWQgZHVyaW5nIGxvYWRpbmcsIHdlIGFkZCB0aGUgYGlzLW1pc3NpbmdgIGNsYXNzLiBWaXN1YWwgZWZmZWN0c1xuICAgKiBjYW4gYmUgY29udHJvbGxlZCBieSBDU1MuXG4gICAqL1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmlzLW1pc3NpbmcnKSBpc01pc3NpbmcgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgbWVkaWFTZXJ2aWNlOiBNZWRpYVNlcnZpY2UpIHt9XG5cbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgdGhpcy5jcmVhdGUoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBDcmVhdGVzIHRoZSBgTWVkaWFgIG9iamVjdFxuICAgKi9cbiAgcHJvdGVjdGVkIGNyZWF0ZSgpOiB2b2lkIHtcbiAgICB0aGlzLm1lZGlhID0gdGhpcy5tZWRpYVNlcnZpY2UuZ2V0TWVkaWEoXG4gICAgICB0aGlzLmNvbnRhaW5lciBpbnN0YW5jZW9mIEFycmF5ID8gdGhpcy5jb250YWluZXJbMF0gOiB0aGlzLmNvbnRhaW5lcixcbiAgICAgIHRoaXMuZm9ybWF0LFxuICAgICAgdGhpcy5hbHQsXG4gICAgICB0aGlzLnJvbGVcbiAgICApO1xuICAgIGlmICghdGhpcy5tZWRpYT8uc3JjKSB7XG4gICAgICB0aGlzLmhhbmRsZU1pc3NpbmcoKTtcbiAgICB9XG4gIH1cblxuICAvKipcbiAgICogVGhpcyBoYW5kbGVyIGlzIGNhbGxlZCBmcm9tIHRoZSBVSSB3aGVuIHRoZSBpbWFnZSBpcyBsb2FkZWQuXG4gICAqL1xuICBsb2FkSGFuZGxlcigpOiB2b2lkIHtcbiAgICB0aGlzLmlzTG9hZGluZyA9IGZhbHNlO1xuICAgIHRoaXMuaXNJbml0aWFsaXplZCA9IHRydWU7XG4gICAgdGhpcy5pc01pc3NpbmcgPSBmYWxzZTtcbiAgICB0aGlzLmxvYWRlZC5lbWl0KHRydWUpO1xuICB9XG5cbiAgLy8gVE9ETzogUmVtb3ZlIHN0cmluZyByZXR1cm4gdHlwZSAoIzE0MjM2KVxuICAvKipcbiAgICogSW5kaWNhdGVzIHdoZXRoZXIgdGhlIGJyb3dzZXIgc2hvdWxkIGxhenkgbG9hZCB0aGUgaW1hZ2UuXG4gICAqIEBkZXByZWNhdGVkIHNpbmNlIDQuMi4gdXNlIEltYWdlTG9hZGluZ1N0cmF0ZWd5IG9yIG51bGwgcmV0dXJuIHR5cGVzIG9ubHlcbiAgICovXG4gIGdldCBsb2FkaW5nU3RyYXRlZ3koKTogc3RyaW5nIHwgSW1hZ2VMb2FkaW5nU3RyYXRlZ3kgfCBudWxsIHtcbiAgICByZXR1cm4gdGhpcy5tZWRpYVNlcnZpY2UubG9hZGluZ1N0cmF0ZWd5ID09PSBJbWFnZUxvYWRpbmdTdHJhdGVneS5MQVpZXG4gICAgICA/IEltYWdlTG9hZGluZ1N0cmF0ZWd5LkxBWllcbiAgICAgIDogbnVsbDtcbiAgfVxuXG4gIC8qKlxuICAgKiBXaGVuZXZlciBhbiBlcnJvciBoYXBwZW5zIGR1cmluZyBsb2FkLCB3ZSBtYXJrIHRoZSBjb21wb25lbnRcbiAgICogd2l0aCBjc3MgY2xhc3NlcyB0byBoYXZlIGEgbWlzc2luZyBtZWRpYS5cbiAgICovXG4gIGVycm9ySGFuZGxlcigpOiB2b2lkIHtcbiAgICB0aGlzLmhhbmRsZU1pc3NpbmcoKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVNaXNzaW5nKCkge1xuICAgIHRoaXMuaXNMb2FkaW5nID0gZmFsc2U7XG4gICAgdGhpcy5pc0luaXRpYWxpemVkID0gdHJ1ZTtcbiAgICB0aGlzLmlzTWlzc2luZyA9IHRydWU7XG4gICAgdGhpcy5sb2FkZWQuZW1pdChmYWxzZSk7XG4gIH1cbn1cbiIsIjxpbWdcbiAgKm5nSWY9XCJtZWRpYT8uc3JjXCJcbiAgW2F0dHIuc3JjXT1cIm1lZGlhLnNyY1wiXG4gIFthdHRyLnNyY3NldF09XCJtZWRpYS5zcmNzZXRcIlxuICBbYXR0ci5hbHRdPVwibWVkaWEuYWx0XCJcbiAgW2F0dHIucm9sZV09XCJtZWRpYS5yb2xlXCJcbiAgW2F0dHIubG9hZGluZ109XCJsb2FkaW5nXCJcbiAgKGxvYWQpPVwibG9hZEhhbmRsZXIoKVwiXG4gIChlcnJvcik9XCJlcnJvckhhbmRsZXIoKVwiXG4vPlxuIl19