@agorapulse/ui-components 22.0.33 → 22.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-components-22.1.0.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs +5 -3
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +3 -2
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-directives.mjs +140 -2
- package/fesm2022/agorapulse-ui-components-directives.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +7 -2
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-input-search.mjs +4 -3
- package/fesm2022/agorapulse-ui-components-input-search.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-popmenu.mjs +3 -2
- package/fesm2022/agorapulse-ui-components-popmenu.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs +3 -2
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +5 -4
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/package.json +1 -1
- package/types/agorapulse-ui-components-directives.d.ts +63 -1
- package/agorapulse-ui-components-22.0.33.tgz +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-input-search.mjs","sources":["../../../libs/ui-components/input-search/src/input-search.component.ts","../../../libs/ui-components/input-search/src/input-search.component.html","../../../libs/ui-components/input-search/src/agorapulse-ui-components-input-search.ts"],"sourcesContent":["import { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apClose, apSearch } from '@agorapulse/ui-symbol';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n ViewEncapsulation,\n computed,\n forwardRef,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet inputSearchId = 0;\n\n@Component({\n selector: 'ap-input-search',\n templateUrl: './input-search.component.html',\n styleUrls: ['./input-search.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [InputGroupComponent, InputDirective, FormsModule, SymbolComponent],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => InputSearchComponent),\n multi: true,\n },\n ],\n})\nexport class InputSearchComponent implements ControlValueAccessor {\n id = input<string>('');\n placeholder = input<string>('');\n clearable = input(true);\n\n // eslint-disable-next-line @angular-eslint/no-output-native\n focus = output<FocusEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n blur = output<FocusEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n keyup = output<KeyboardEvent>();\n\n inputElement = viewChild.required<ElementRef>('input');\n\n value = signal<string | null>('');\n defaultInputId = `ap-input-search-${inputSearchId++}`;\n\n inputId = computed(() => this.id() ?? this.defaultInputId);\n\n disabled = signal(false);\n\n onTouched: () => void = () => {};\n\n onChanged: (value: any) => void = () => {};\n\n private symbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apSearch, apClose]);\n }\n\n registerOnChange(fn: (value: string | null) => void): void {\n this.onChanged = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n onValueChange(value: string | null) {\n this.writeValue(value);\n this.onChanged(value);\n }\n\n focusInput(): void {\n this.inputElement().nativeElement.focus();\n }\n\n writeValue(value: string | null): void {\n this.value.set(value);\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n }\n\n onClear($event: Event): void {\n $event.stopImmediatePropagation();\n this.onValueChange(null);\n }\n\n onFocusHandle($event: FocusEvent): void {\n this.focus.emit($event);\n }\n\n onBlurHandle($event: FocusEvent): void {\n this.blur.emit($event);\n }\n\n onKeyup($event: KeyboardEvent): void {\n this.keyup.emit($event);\n }\n}\n","<ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n #input\n apInput\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value()\"\n (blur)=\"onBlurHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (keyup)=\"onKeyup($event)\"\n (ngModelChange)=\"onValueChange($event)\" />\n @if (clearable() && value()) {\n <div\n class=\"close\"\n
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-input-search.mjs","sources":["../../../libs/ui-components/input-search/src/input-search.component.ts","../../../libs/ui-components/input-search/src/input-search.component.html","../../../libs/ui-components/input-search/src/agorapulse-ui-components-input-search.ts"],"sourcesContent":["import { ClickDirective } from '@agorapulse/ui-components/directives';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apClose, apSearch } from '@agorapulse/ui-symbol';\nimport {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n ViewEncapsulation,\n computed,\n forwardRef,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet inputSearchId = 0;\n\n@Component({\n selector: 'ap-input-search',\n templateUrl: './input-search.component.html',\n styleUrls: ['./input-search.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [InputGroupComponent, InputDirective, FormsModule, SymbolComponent, ClickDirective],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => InputSearchComponent),\n multi: true,\n },\n ],\n})\nexport class InputSearchComponent implements ControlValueAccessor {\n id = input<string>('');\n placeholder = input<string>('');\n clearable = input(true);\n\n // eslint-disable-next-line @angular-eslint/no-output-native\n focus = output<FocusEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n blur = output<FocusEvent>();\n // eslint-disable-next-line @angular-eslint/no-output-native\n keyup = output<KeyboardEvent>();\n\n inputElement = viewChild.required<ElementRef>('input');\n\n value = signal<string | null>('');\n defaultInputId = `ap-input-search-${inputSearchId++}`;\n\n inputId = computed(() => this.id() ?? this.defaultInputId);\n\n disabled = signal(false);\n\n onTouched: () => void = () => {};\n\n onChanged: (value: any) => void = () => {};\n\n private symbolRegistry = inject(SymbolRegistry);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apSearch, apClose]);\n }\n\n registerOnChange(fn: (value: string | null) => void): void {\n this.onChanged = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n onValueChange(value: string | null) {\n this.writeValue(value);\n this.onChanged(value);\n }\n\n focusInput(): void {\n this.inputElement().nativeElement.focus();\n }\n\n writeValue(value: string | null): void {\n this.value.set(value);\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.disabled.set(isDisabled);\n }\n\n onClear($event: Event): void {\n $event.stopImmediatePropagation();\n this.onValueChange(null);\n }\n\n onFocusHandle($event: FocusEvent): void {\n this.focus.emit($event);\n }\n\n onBlurHandle($event: FocusEvent): void {\n this.blur.emit($event);\n }\n\n onKeyup($event: KeyboardEvent): void {\n this.keyup.emit($event);\n }\n}\n","<ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n #input\n apInput\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [ngModel]=\"value()\"\n (blur)=\"onBlurHandle($event)\"\n (focus)=\"onFocusHandle($event)\"\n (keyup)=\"onKeyup($event)\"\n (ngModelChange)=\"onValueChange($event)\" />\n @if (clearable() && value()) {\n <div\n class=\"close\"\n aria-label=\"Clear search\"\n (apClick)=\"onClear($event)\">\n <ap-symbol\n symbolId=\"close\"\n size=\"xs\" />\n </div>\n }\n</ap-input-group>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FrozenGifDirective } from '@agorapulse/ui-components/directives';
|
|
1
|
+
import { FrozenGifDirective, StopPropagationDirective } from '@agorapulse/ui-components/directives';
|
|
2
2
|
import * as i2 from '@agorapulse/ui-symbol';
|
|
3
3
|
import { apClose, apArrowLeft, apArrowRight, SymbolComponent } from '@agorapulse/ui-symbol';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
@@ -105,11 +105,11 @@ class MediaDisplayOverlayDialogComponent {
|
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MediaDisplayOverlayDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
108
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MediaDisplayOverlayDialogComponent, isStandalone: true, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div\n class=\"full\"\n (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n symbolId=\"close\"\n color=\"white\"\n size=\"sm\"\n (click)=\"onClose()\" />\n </header>\n <slot class=\"ap-modal-content\">\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-left\"\n size=\"lg\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n <div class=\"media-container\">\n @if (url && mediaType === 'PHOTO') {\n <img\n apFrozenGif\n [apFrozen]=\"!supportGif\"\n [src]=\"url\"\n (click)=\"$event.stopPropagation()\" />\n }\n @if (url && mediaType === 'VIDEO') {\n <div class=\"media-container-video\">\n <video\n #videoPlayer\n controls\n disablepictureinpicture\n muted\n controlsList=\"nofullscreen\"\n [id]=\"'video-' + currentUrlIndex\"\n [poster]=\"thumbnailCover\"\n [src]=\"url\"\n (click)=\"play($event)\"\n (playing)=\"isPlayingVideo = true\"\n (pause)=\"isPlayingVideo = false\"\n (ended)=\"isPlayingVideo = false\"></video>\n <svg\n class=\"play-button\"\n xmlns=\"http://www.w3.org/2000/svg\"\n (click)=\"play($event)\">\n @if (!isPlayingVideo) {\n <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n }\n </svg>\n </div>\n }\n </div>\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-right\"\n size=\"lg\"\n [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n </slot>\n @if (mediaInfo && mediaInfo.length > 1) {\n <footer class=\"ap-modal-footer\">\n <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n </footer>\n }\n </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
108
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MediaDisplayOverlayDialogComponent, isStandalone: true, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div\n class=\"full\"\n (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n symbolId=\"close\"\n color=\"white\"\n size=\"sm\"\n (click)=\"onClose()\" />\n </header>\n <slot class=\"ap-modal-content\">\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-left\"\n size=\"lg\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n <div class=\"media-container\">\n @if (url && mediaType === 'PHOTO') {\n <img\n apFrozenGif\n apStopPropagation\n [apFrozen]=\"!supportGif\"\n [src]=\"url\" />\n }\n @if (url && mediaType === 'VIDEO') {\n <div class=\"media-container-video\">\n <video\n #videoPlayer\n controls\n disablepictureinpicture\n muted\n controlsList=\"nofullscreen\"\n [id]=\"'video-' + currentUrlIndex\"\n [poster]=\"thumbnailCover\"\n [src]=\"url\"\n (click)=\"play($event)\"\n (playing)=\"isPlayingVideo = true\"\n (pause)=\"isPlayingVideo = false\"\n (ended)=\"isPlayingVideo = false\"></video>\n <svg\n class=\"play-button\"\n xmlns=\"http://www.w3.org/2000/svg\"\n (click)=\"play($event)\">\n @if (!isPlayingVideo) {\n <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n }\n </svg>\n </div>\n }\n </div>\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-right\"\n size=\"lg\"\n [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n </slot>\n @if (mediaInfo && mediaInfo.length > 1) {\n <footer class=\"ap-modal-footer\">\n <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n </footer>\n }\n </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }, { kind: "directive", type: StopPropagationDirective, selector: "[apStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
109
109
|
}
|
|
110
110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MediaDisplayOverlayDialogComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', imports: [SymbolComponent, FrozenGifDirective], template: "<div\n class=\"full\"\n (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n symbolId=\"close\"\n color=\"white\"\n size=\"sm\"\n (click)=\"onClose()\" />\n </header>\n <slot class=\"ap-modal-content\">\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-left\"\n size=\"lg\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n <div class=\"media-container\">\n @if (url && mediaType === 'PHOTO') {\n <img\n apFrozenGif\n [apFrozen]=\"!supportGif\"\n [src]=\"url\"\n (click)=\"$event.stopPropagation()\" />\n }\n @if (url && mediaType === 'VIDEO') {\n <div class=\"media-container-video\">\n <video\n #videoPlayer\n controls\n disablepictureinpicture\n muted\n controlsList=\"nofullscreen\"\n [id]=\"'video-' + currentUrlIndex\"\n [poster]=\"thumbnailCover\"\n [src]=\"url\"\n (click)=\"play($event)\"\n (playing)=\"isPlayingVideo = true\"\n (pause)=\"isPlayingVideo = false\"\n (ended)=\"isPlayingVideo = false\"></video>\n <svg\n class=\"play-button\"\n xmlns=\"http://www.w3.org/2000/svg\"\n (click)=\"play($event)\">\n @if (!isPlayingVideo) {\n <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n }\n </svg>\n </div>\n }\n </div>\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-right\"\n size=\"lg\"\n [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n </slot>\n @if (mediaInfo && mediaInfo.length > 1) {\n <footer class=\"ap-modal-footer\">\n <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n </footer>\n }\n </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"] }]
|
|
112
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', imports: [SymbolComponent, FrozenGifDirective, StopPropagationDirective], template: "<div\n class=\"full\"\n (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n symbolId=\"close\"\n color=\"white\"\n size=\"sm\"\n (click)=\"onClose()\" />\n </header>\n <slot class=\"ap-modal-content\">\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-left\"\n size=\"lg\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n <div class=\"media-container\">\n @if (url && mediaType === 'PHOTO') {\n <img\n apFrozenGif\n apStopPropagation\n [apFrozen]=\"!supportGif\"\n [src]=\"url\" />\n }\n @if (url && mediaType === 'VIDEO') {\n <div class=\"media-container-video\">\n <video\n #videoPlayer\n controls\n disablepictureinpicture\n muted\n controlsList=\"nofullscreen\"\n [id]=\"'video-' + currentUrlIndex\"\n [poster]=\"thumbnailCover\"\n [src]=\"url\"\n (click)=\"play($event)\"\n (playing)=\"isPlayingVideo = true\"\n (pause)=\"isPlayingVideo = false\"\n (ended)=\"isPlayingVideo = false\"></video>\n <svg\n class=\"play-button\"\n xmlns=\"http://www.w3.org/2000/svg\"\n (click)=\"play($event)\">\n @if (!isPlayingVideo) {\n <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n }\n </svg>\n </div>\n }\n </div>\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-right\"\n size=\"lg\"\n [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n </slot>\n @if (mediaInfo && mediaInfo.length > 1) {\n <footer class=\"ap-modal-footer\">\n <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n </footer>\n }\n </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"] }]
|
|
113
113
|
}], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
|
|
114
114
|
type: Inject,
|
|
115
115
|
args: [MAT_DIALOG_DATA]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-media-display-overlay.mjs","sources":["../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.ts","../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.html","../../../libs/ui-components/media-display-overlay/src/agorapulse-ui-components-media-display-overlay.ts"],"sourcesContent":["import { FrozenGifDirective } from '@agorapulse/ui-components/directives';\nimport { SymbolComponent, SymbolRegistry, apArrowLeft, apArrowRight, apClose } from '@agorapulse/ui-symbol';\n\nimport { ChangeDetectionStrategy, Component, ElementRef, HostListener, Inject, OnInit, ViewChild } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';\n\nexport interface MediaDisplayData {\n mediaInfo: MediaInfo[];\n clickedMedia?: MediaInfo;\n supportGif: boolean;\n}\n\nexport enum KEY_CODE {\n RIGHT_ARROW = 39,\n LEFT_ARROW = 37,\n}\n\nexport interface MediaInfo {\n url: string;\n type: 'PHOTO' | 'VIDEO';\n thumbnail?: string;\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-media-display-overlay',\n styleUrls: ['./media-display-overlay-dialog.component.scss'],\n templateUrl: './media-display-overlay-dialog.component.html',\n imports: [SymbolComponent, FrozenGifDirective],\n})\nexport class MediaDisplayOverlayDialogComponent implements OnInit {\n @ViewChild('videoPlayer') videoPlayer: ElementRef<HTMLVideoElement> | undefined;\n\n static config: MatDialogConfig<MediaDisplayData> = {\n position: {\n top: '10px',\n right: '10px',\n left: '10px',\n },\n height: '100%',\n width: '100%',\n maxWidth: 'none',\n panelClass: 'full-screen-modal',\n backdropClass: 'dark-backdrop',\n };\n\n currentUrlIndex = 1;\n mediaInfo: MediaInfo[] = []; // all urls and types\n mediaType: 'PHOTO' | 'VIDEO' | undefined = undefined;\n supportGif = true;\n thumbnailCover: string | undefined = undefined;\n isPlayingVideo = false;\n urls: string[] = []; // all urls\n url: string | undefined = undefined; // current displayed url\n\n constructor(\n public dialogRef: MatDialogRef<MediaDisplayOverlayDialogComponent>,\n @Inject(MAT_DIALOG_DATA) public data: MediaDisplayData,\n public symbolRegistry: SymbolRegistry\n ) {\n this.symbolRegistry.registerSymbols([apClose, apArrowLeft, apArrowRight]);\n }\n\n ngOnInit(): void {\n // const data = ModalService.getModal('media-display-overlay') || {};\n if (this.data) {\n if (this.data.mediaInfo && this.data.mediaInfo.length > 0) {\n this.mediaInfo = this.data.mediaInfo;\n }\n if (this.data.clickedMedia?.url && this.data.clickedMedia.url.length > 0) {\n const currentMedia: MediaInfo = this.data.clickedMedia;\n if (this.mediaInfo.length === 0) {\n this.mediaInfo = [currentMedia];\n }\n this.url = this.data.clickedMedia.url;\n this.mediaType = this.data.clickedMedia.type;\n this.thumbnailCover = this.data.clickedMedia.thumbnail;\n this.isPlayingVideo = false;\n this.currentUrlIndex = this.mediaInfo.findIndex(media => media.url === currentMedia.url) + 1;\n }\n }\n }\n\n onClose() {\n this.dialogRef.close();\n }\n\n onNext($event: UIEvent): void {\n if (this.currentUrlIndex < this.mediaInfo.length) {\n this.currentUrlIndex += 1;\n this.url = this.mediaInfo[this.currentUrlIndex - 1].url;\n this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;\n this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;\n this.isPlayingVideo = false;\n }\n $event.stopPropagation();\n }\n\n onPrevious($event: UIEvent): void {\n if (this.currentUrlIndex > 1) {\n this.currentUrlIndex -= 1;\n this.url = this.mediaInfo[this.currentUrlIndex - 1].url;\n this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;\n this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;\n this.isPlayingVideo = false;\n }\n $event.stopPropagation();\n }\n\n play($event: UIEvent): void {\n if (this.videoPlayer) {\n if (this.isPlayingVideo) {\n this.videoPlayer.nativeElement.pause();\n } else {\n this.videoPlayer.nativeElement.play();\n }\n this.isPlayingVideo = !this.isPlayingVideo;\n $event.stopPropagation();\n }\n }\n\n @HostListener('window:keyup', ['$event'])\n keyEvent(event: KeyboardEvent) {\n if (event.keyCode === KEY_CODE.RIGHT_ARROW) {\n this.onNext(event);\n }\n\n if (event.keyCode === KEY_CODE.LEFT_ARROW) {\n this.onPrevious(event);\n }\n }\n}\n","<div\n class=\"full\"\n (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n symbolId=\"close\"\n color=\"white\"\n size=\"sm\"\n (click)=\"onClose()\" />\n </header>\n <slot class=\"ap-modal-content\">\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-left\"\n size=\"lg\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n <div class=\"media-container\">\n @if (url && mediaType === 'PHOTO') {\n <img\n apFrozenGif\n [apFrozen]=\"!supportGif\"\n [src]=\"url\"\n (click)=\"$event.stopPropagation()\" />\n }\n @if (url && mediaType === 'VIDEO') {\n <div class=\"media-container-video\">\n <video\n #videoPlayer\n controls\n disablepictureinpicture\n muted\n controlsList=\"nofullscreen\"\n [id]=\"'video-' + currentUrlIndex\"\n [poster]=\"thumbnailCover\"\n [src]=\"url\"\n (click)=\"play($event)\"\n (playing)=\"isPlayingVideo = true\"\n (pause)=\"isPlayingVideo = false\"\n (ended)=\"isPlayingVideo = false\"></video>\n <svg\n class=\"play-button\"\n xmlns=\"http://www.w3.org/2000/svg\"\n (click)=\"play($event)\">\n @if (!isPlayingVideo) {\n <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n }\n </svg>\n </div>\n }\n </div>\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-right\"\n size=\"lg\"\n [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n </slot>\n @if (mediaInfo && mediaInfo.length > 1) {\n <footer class=\"ap-modal-footer\">\n <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n </footer>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-media-display-overlay.mjs","sources":["../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.ts","../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.html","../../../libs/ui-components/media-display-overlay/src/agorapulse-ui-components-media-display-overlay.ts"],"sourcesContent":["import { FrozenGifDirective, StopPropagationDirective } from '@agorapulse/ui-components/directives';\nimport { SymbolComponent, SymbolRegistry, apArrowLeft, apArrowRight, apClose } from '@agorapulse/ui-symbol';\n\nimport { ChangeDetectionStrategy, Component, ElementRef, HostListener, Inject, OnInit, ViewChild } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';\n\nexport interface MediaDisplayData {\n mediaInfo: MediaInfo[];\n clickedMedia?: MediaInfo;\n supportGif: boolean;\n}\n\nexport enum KEY_CODE {\n RIGHT_ARROW = 39,\n LEFT_ARROW = 37,\n}\n\nexport interface MediaInfo {\n url: string;\n type: 'PHOTO' | 'VIDEO';\n thumbnail?: string;\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-media-display-overlay',\n styleUrls: ['./media-display-overlay-dialog.component.scss'],\n templateUrl: './media-display-overlay-dialog.component.html',\n imports: [SymbolComponent, FrozenGifDirective, StopPropagationDirective],\n})\nexport class MediaDisplayOverlayDialogComponent implements OnInit {\n @ViewChild('videoPlayer') videoPlayer: ElementRef<HTMLVideoElement> | undefined;\n\n static config: MatDialogConfig<MediaDisplayData> = {\n position: {\n top: '10px',\n right: '10px',\n left: '10px',\n },\n height: '100%',\n width: '100%',\n maxWidth: 'none',\n panelClass: 'full-screen-modal',\n backdropClass: 'dark-backdrop',\n };\n\n currentUrlIndex = 1;\n mediaInfo: MediaInfo[] = []; // all urls and types\n mediaType: 'PHOTO' | 'VIDEO' | undefined = undefined;\n supportGif = true;\n thumbnailCover: string | undefined = undefined;\n isPlayingVideo = false;\n urls: string[] = []; // all urls\n url: string | undefined = undefined; // current displayed url\n\n constructor(\n public dialogRef: MatDialogRef<MediaDisplayOverlayDialogComponent>,\n @Inject(MAT_DIALOG_DATA) public data: MediaDisplayData,\n public symbolRegistry: SymbolRegistry\n ) {\n this.symbolRegistry.registerSymbols([apClose, apArrowLeft, apArrowRight]);\n }\n\n ngOnInit(): void {\n // const data = ModalService.getModal('media-display-overlay') || {};\n if (this.data) {\n if (this.data.mediaInfo && this.data.mediaInfo.length > 0) {\n this.mediaInfo = this.data.mediaInfo;\n }\n if (this.data.clickedMedia?.url && this.data.clickedMedia.url.length > 0) {\n const currentMedia: MediaInfo = this.data.clickedMedia;\n if (this.mediaInfo.length === 0) {\n this.mediaInfo = [currentMedia];\n }\n this.url = this.data.clickedMedia.url;\n this.mediaType = this.data.clickedMedia.type;\n this.thumbnailCover = this.data.clickedMedia.thumbnail;\n this.isPlayingVideo = false;\n this.currentUrlIndex = this.mediaInfo.findIndex(media => media.url === currentMedia.url) + 1;\n }\n }\n }\n\n onClose() {\n this.dialogRef.close();\n }\n\n onNext($event: UIEvent): void {\n if (this.currentUrlIndex < this.mediaInfo.length) {\n this.currentUrlIndex += 1;\n this.url = this.mediaInfo[this.currentUrlIndex - 1].url;\n this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;\n this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;\n this.isPlayingVideo = false;\n }\n $event.stopPropagation();\n }\n\n onPrevious($event: UIEvent): void {\n if (this.currentUrlIndex > 1) {\n this.currentUrlIndex -= 1;\n this.url = this.mediaInfo[this.currentUrlIndex - 1].url;\n this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;\n this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;\n this.isPlayingVideo = false;\n }\n $event.stopPropagation();\n }\n\n play($event: UIEvent): void {\n if (this.videoPlayer) {\n if (this.isPlayingVideo) {\n this.videoPlayer.nativeElement.pause();\n } else {\n this.videoPlayer.nativeElement.play();\n }\n this.isPlayingVideo = !this.isPlayingVideo;\n $event.stopPropagation();\n }\n }\n\n @HostListener('window:keyup', ['$event'])\n keyEvent(event: KeyboardEvent) {\n if (event.keyCode === KEY_CODE.RIGHT_ARROW) {\n this.onNext(event);\n }\n\n if (event.keyCode === KEY_CODE.LEFT_ARROW) {\n this.onPrevious(event);\n }\n }\n}\n","<div\n class=\"full\"\n (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n symbolId=\"close\"\n color=\"white\"\n size=\"sm\"\n (click)=\"onClose()\" />\n </header>\n <slot class=\"ap-modal-content\">\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-left\"\n size=\"lg\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n <div class=\"media-container\">\n @if (url && mediaType === 'PHOTO') {\n <img\n apFrozenGif\n apStopPropagation\n [apFrozen]=\"!supportGif\"\n [src]=\"url\" />\n }\n @if (url && mediaType === 'VIDEO') {\n <div class=\"media-container-video\">\n <video\n #videoPlayer\n controls\n disablepictureinpicture\n muted\n controlsList=\"nofullscreen\"\n [id]=\"'video-' + currentUrlIndex\"\n [poster]=\"thumbnailCover\"\n [src]=\"url\"\n (click)=\"play($event)\"\n (playing)=\"isPlayingVideo = true\"\n (pause)=\"isPlayingVideo = false\"\n (ended)=\"isPlayingVideo = false\"></video>\n <svg\n class=\"play-button\"\n xmlns=\"http://www.w3.org/2000/svg\"\n (click)=\"play($event)\">\n @if (!isPlayingVideo) {\n <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n }\n </svg>\n </div>\n }\n </div>\n @if (mediaInfo.length > 1) {\n <div\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n symbolId=\"arrow-right\"\n size=\"lg\"\n [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n </div>\n </div>\n }\n </slot>\n @if (mediaInfo && mediaInfo.length > 1) {\n <footer class=\"ap-modal-footer\">\n <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n </footer>\n }\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ButtonComponent } from '@agorapulse/ui-components/button';
|
|
2
|
+
import { StopPropagationDirective } from '@agorapulse/ui-components/directives';
|
|
2
3
|
import { NgStyle, NgTemplateOutlet } from '@angular/common';
|
|
3
4
|
import * as i0 from '@angular/core';
|
|
4
5
|
import { EventEmitter, Input, HostBinding, ViewChild, Output, ChangeDetectionStrategy, Component, InjectionToken, createComponent, HostListener, Optional, Inject, Directive, NgModule } from '@angular/core';
|
|
@@ -329,11 +330,11 @@ class PopmenuComponent {
|
|
|
329
330
|
}
|
|
330
331
|
}
|
|
331
332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
332
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PopmenuComponent, isStandalone: true, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button\n id=\"menuTrigger\"\n class=\"button-trigger\"\n mat-button\n [matMenuTriggerFor]=\"menu\"\n (menuClosed)=\"onMenuClosed()\"\n (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n #menu=\"matMenu\"\n [yPosition]=\"!below ? 'above' : 'below'\"\n [xPosition]=\"!before ? 'after' : 'before'\"\n [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n [backdropClass]=\"backdropClass\"\n class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n border ? '' : shadow ? 'shadow-no-border' : ''\n }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n @if (arrow) {\n <div\n class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n }\n <div\n class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n
|
|
333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PopmenuComponent, isStandalone: true, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button\n id=\"menuTrigger\"\n class=\"button-trigger\"\n mat-button\n [matMenuTriggerFor]=\"menu\"\n (menuClosed)=\"onMenuClosed()\"\n (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n #menu=\"matMenu\"\n [yPosition]=\"!below ? 'above' : 'below'\"\n [xPosition]=\"!before ? 'after' : 'before'\"\n [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n [backdropClass]=\"backdropClass\"\n class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n border ? '' : shadow ? 'shadow-no-border' : ''\n }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n @if (arrow) {\n <div\n class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n }\n <div\n class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n apStopPropagation>\n <div class=\"{{ border ? 'popover-content ' : '' }} {{ rounded ? 'rounded-component' : '' }}\">\n <ng-container *ngTemplateOutlet=\"value; context: { menu: this }\" />\n </div>\n </div>\n</mat-menu>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.mat-mdc-menu-content{padding:0}.mat-mdc-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-mdc-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-mdc-menu-item:hover:not([disabled]),.mat-mdc-menu-item.cdk-program-focused:not([disabled]),.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),.mat-mdc-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-mdc-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StopPropagationDirective, selector: "[apStopPropagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
333
334
|
}
|
|
334
335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopmenuComponent, decorators: [{
|
|
335
336
|
type: Component,
|
|
336
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', imports: [ButtonComponent, MatMenuModule, NgStyle, NgTemplateOutlet], template: "<button\n id=\"menuTrigger\"\n class=\"button-trigger\"\n mat-button\n [matMenuTriggerFor]=\"menu\"\n (menuClosed)=\"onMenuClosed()\"\n (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n #menu=\"matMenu\"\n [yPosition]=\"!below ? 'above' : 'below'\"\n [xPosition]=\"!before ? 'after' : 'before'\"\n [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n [backdropClass]=\"backdropClass\"\n class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n border ? '' : shadow ? 'shadow-no-border' : ''\n }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n @if (arrow) {\n <div\n class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n }\n <div\n class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n
|
|
337
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', imports: [ButtonComponent, MatMenuModule, NgStyle, NgTemplateOutlet, StopPropagationDirective], template: "<button\n id=\"menuTrigger\"\n class=\"button-trigger\"\n mat-button\n [matMenuTriggerFor]=\"menu\"\n (menuClosed)=\"onMenuClosed()\"\n (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n #menu=\"matMenu\"\n [yPosition]=\"!below ? 'above' : 'below'\"\n [xPosition]=\"!before ? 'after' : 'before'\"\n [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n [backdropClass]=\"backdropClass\"\n class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n border ? '' : shadow ? 'shadow-no-border' : ''\n }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n @if (arrow) {\n <div\n class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n }\n <div\n class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n apStopPropagation>\n <div class=\"{{ border ? 'popover-content ' : '' }} {{ rounded ? 'rounded-component' : '' }}\">\n <ng-container *ngTemplateOutlet=\"value; context: { menu: this }\" />\n </div>\n </div>\n</mat-menu>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.mat-mdc-menu-content{padding:0}.mat-mdc-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-mdc-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-mdc-menu-item:hover:not([disabled]),.mat-mdc-menu-item.cdk-program-focused:not([disabled]),.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),.mat-mdc-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-mdc-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"] }]
|
|
337
338
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
|
|
338
339
|
type: Input
|
|
339
340
|
}], menuClosed: [{
|