@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-query-builder.2

package/group-buttons/pepperi-addons-ngx-lib-group-buttons.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepGroupButtonsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"PepGroupButtonsComponent"}],"declarations":[{"__symbolic":"reference","name":"PepGroupButtonsComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":36,"character":41}]}]}},"PepGroupButtonsViewType":{"__symbolic":"interface"},"PepGroupButtonsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"pep-group-buttons","template":"<div class=\"group-buttons-container\" pepRtlDirection>\r\n    <ng-container *ngIf=\"viewType === 'regular'\">\r\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\r\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\r\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\r\n        </button>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\r\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\r\n        <button [pepDataQa]=\"buttons[0]?.value\"\r\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\r\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\r\n            mat-button>\r\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\r\n        </button>\r\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\r\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\r\n            <mat-icon>\r\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\r\n                </pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n\r\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\r\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\r\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\r\n                    (click)=\"onButtonClicked($event, button)\">\r\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\r\n                </button>\r\n            </ng-container>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\r\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\r\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\r\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\r\n                'first-button': isFirst, \r\n                'middle-button': !isFirst && !isLast, \r\n                'last-button': isLast, \r\n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\r\n\r\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\r\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\r\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\r\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\r\n                'first-button': isFirst && !isLast, \r\n                'middle-button': !isFirst && !isLast, \r\n                'last-button': isLast && !isFirst,\r\n                'icon-button': button?.iconName && !button?.value,\r\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\r\n            (click)=\"onButtonClicked($event, button)\">\r\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #contentTemplate let-button=\"button\">\r\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\r\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\r\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\r\n    </mat-icon>\r\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\r\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\r\n        [title]=\"button.value\">\r\n        {{button.value}}\r\n    </span>\r\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\r\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\r\n    </mat-icon>\r\n</ng-template>","styles":[".group-buttons-container{display:flex;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{-webkit-margin-end:1px;margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:.25rem 0 0 .25rem;border-radius:var(--pep-border-radius-md,.25rem) 0 0 var(--pep-border-radius-md,.25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 .25rem .25rem 0;border-radius:0 var(--pep-border-radius-md,.25rem) var(--pep-border-radius-md,.25rem) 0}.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused{z-index:2}@media (max-width:599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{-webkit-margin-end:-1px;margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;-webkit-margin-end:-1px;margin-inline-end:-1px}"]}]}],"members":{"viewType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"styleType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"sizeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"buttonsDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"selectedButtonKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"stretch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"buttonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":37,"character":38}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onButtonClicked":[{"__symbolic":"method"}]}}},"origins":{"PepGroupButtonsModule":"./group-buttons.module","PepGroupButtonsViewType":"./group-buttons.component","PepGroupButtonsComponent":"./group-buttons.component"},"importAs":"@pepperi-addons/ngx-lib/group-buttons"}
+{"__symbolic":"module","version":4,"metadata":{"PepGroupButtonsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":25,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"PepGroupButtonsComponent"}],"declarations":[{"__symbolic":"reference","name":"PepGroupButtonsComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":36,"character":41}]}]}},"PepGroupButtonsViewType":{"__symbolic":"interface"},"PepGroupButtonsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"pep-group-buttons","template":"<div class=\"group-buttons-container\" pepRtlDirection>\r\n    <ng-container *ngIf=\"viewType === 'regular'\">\r\n        <button *ngFor=\"let button of buttons\" [pepDataQa]=\"button?.value\"\r\n            class=\"pep-button pep-spacing-element pull-left flip first-button {{ sizeType }} {{ styleType }}\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" mat-button (click)=\"onButtonClicked($event, button)\">\r\n            <span [title]=\"button?.value\">{{ button?.value }}</span>\r\n        </button>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"viewType === 'dropdown'\" class=\"dropdown-buttons pep-spacing-element\"\r\n        [ngClass]=\"{dropup: screenSize >= PepScreenSizeType.MD}\">\r\n        <button [pepDataQa]=\"buttons[0]?.value\"\r\n            class=\"pep-button pull-left flip first-button {{ sizeType }} {{ styleType }}\"\r\n            (click)=\"onButtonClicked($event, buttons[0])\" [disabled]=\"buttonsDisabled || buttons[0].disabled\"\r\n            mat-button>\r\n            <span class=\"ellipsis\" [title]=\"buttons[0]?.value\">{{ buttons[0]?.value }}</span>\r\n        </button>\r\n        <button class=\"pep-button icon-button pull-right flip last-button {{ sizeType }} {{ styleType }}\"\r\n            [matMenuTriggerFor]=\"actionsMenu\" [disabled]=\"buttonsDisabled\" pepMenuBlur mat-button>\r\n            <mat-icon>\r\n                <pep-icon name=\"{{ screenSize < PepScreenSizeType.MD ? 'arrow_down' : 'arrow_up' }}\">\r\n                </pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n\r\n        <mat-menu #actionsMenu=\"matMenu\" xPosition=\"before\">\r\n            <ng-container *ngFor=\"let button of buttons; let i = index; first as isFirst\">\r\n                <button *ngIf=\"!isFirst\" mat-menu-item [pepDataQa]=\"button?.value\"\r\n                    (click)=\"onButtonClicked($event, button)\">\r\n                    <span [title]=\"button?.value\">{{ button?.value }}</span>\r\n                </button>\r\n            </ng-container>\r\n        </mat-menu>\r\n    </div>\r\n\r\n    <div *ngIf=\"viewType === 'split'\" class=\"split-buttons\">\r\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\r\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\r\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\r\n                'first-button': isFirst, \r\n                'middle-button': !isFirst && !isLast, \r\n                'last-button': isLast, \r\n                'icon-button': button?.iconName && !button?.value}\" (click)=\"onButtonClicked($event, button)\">\r\n\r\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\r\n        </button>\r\n    </div>\r\n\r\n    <div *ngIf=\"viewType === 'toggle'\" class=\"toggle-buttons\" [ngClass]=\"{ 'stretch': stretch }\">\r\n        <button *ngFor=\"let button of buttons; let index; let isFirst = first; let isLast = last\"\r\n            [pepDataQa]=\"button?.value\" mat-button pepButtonBlur\r\n            class=\"pep-button {{ sizeType }} {{ styleType }} {{ button?.classNames }} pull-left flip\"\r\n            [disabled]=\"buttonsDisabled || button.disabled\" [ngClass]=\"{\r\n                'first-button': isFirst && !isLast, \r\n                'middle-button': !isFirst && !isLast, \r\n                'last-button': isLast && !isFirst,\r\n                'icon-button': button?.iconName && !button?.value,\r\n                'is-selected': button?.key !== '' && button?.key === selectedButtonKey}\"\r\n            (click)=\"onButtonClicked($event, button)\">\r\n            <ng-container *ngTemplateOutlet=\"contentTemplate; context: {button: button}\"></ng-container>\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #contentTemplate let-button=\"button\">\r\n    <mat-icon *ngIf=\"button.iconName && (!button.iconPosition || button.iconPosition === 'start')\"\r\n        [ngClass]=\"{ 'pull-left flip': button.value }\">\r\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\r\n    </mat-icon>\r\n    <span *ngIf=\"button.value\" class=\"ellipsis pull-left flip\"\r\n        [ngClass]=\"{ 'button-title-with-icon': button.iconName, 'icon-before': button.iconPosition === 'start' }\"\r\n        [title]=\"button.value\">\r\n        {{button.value}}\r\n    </span>\r\n    <mat-icon *ngIf=\"button.iconName && button.iconPosition === 'end'\" [ngClass]=\"{ 'pull-left flip': button.value }\">\r\n        <pep-icon name=\"{{button.iconName}}\"></pep-icon>\r\n    </mat-icon>\r\n</ng-template>","styles":[".group-buttons-container{display:flex;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{-webkit-margin-end:1px;margin-inline-end:1px}.group-buttons-container .dropdown-buttons .first-button,.group-buttons-container .dropdown-buttons .first-button:after,.group-buttons-container .split-buttons .first-button,.group-buttons-container .split-buttons .first-button:after,.group-buttons-container .toggle-buttons .first-button,.group-buttons-container .toggle-buttons .first-button:after{border-radius:.25rem 0 0 .25rem;border-radius:var(--pep-border-radius-md,.25rem) 0 0 var(--pep-border-radius-md,.25rem)}.group-buttons-container .dropdown-buttons .last-button,.group-buttons-container .dropdown-buttons .last-button:after,.group-buttons-container .split-buttons .last-button,.group-buttons-container .split-buttons .last-button:after,.group-buttons-container .toggle-buttons .last-button,.group-buttons-container .toggle-buttons .last-button:after{border-radius:0 .25rem .25rem 0;border-radius:0 var(--pep-border-radius-md,.25rem) var(--pep-border-radius-md,.25rem) 0}.group-buttons-container .dropdown-buttons .pep-button,.group-buttons-container .dropdown-buttons .pepperi-button,.group-buttons-container .split-buttons .pep-button,.group-buttons-container .split-buttons .pepperi-button,.group-buttons-container .toggle-buttons .pep-button,.group-buttons-container .toggle-buttons .pepperi-button{margin-top:0!important}.group-buttons-container .dropdown-buttons .pep-button.cdk-focused,.group-buttons-container .dropdown-buttons .pepperi-button.cdk-focused,.group-buttons-container .split-buttons .pep-button.cdk-focused,.group-buttons-container .split-buttons .pepperi-button.cdk-focused,.group-buttons-container .toggle-buttons .pep-button.cdk-focused,.group-buttons-container .toggle-buttons .pepperi-button.cdk-focused{z-index:2}@media (max-width:599px){.group-buttons-container .dropdown-buttons.dropup .first-button,.group-buttons-container .split-buttons.dropup .first-button,.group-buttons-container .toggle-buttons.dropup .first-button{max-width:200px;padding:0 .25rem}.group-buttons-container .dropdown-buttons.dropup .last-button,.group-buttons-container .split-buttons.dropup .last-button,.group-buttons-container .toggle-buttons.dropup .last-button{padding:0}}.group-buttons-container .split-buttons,.group-buttons-container .toggle-buttons{display:grid;grid-auto-flow:column}.group-buttons-container .split-buttons.stretch,.group-buttons-container .toggle-buttons.stretch{width:100%}.group-buttons-container .split-buttons .pep-button,.group-buttons-container .toggle-buttons .pep-button{max-width:unset}.group-buttons-container .split-buttons .first-button,.group-buttons-container .toggle-buttons .first-button{-webkit-margin-end:-1px;margin-inline-end:-1px}.group-buttons-container .split-buttons .middle-button,.group-buttons-container .toggle-buttons .middle-button{border-radius:0;-webkit-margin-end:-1px;margin-inline-end:-1px}",".group-buttons-container .toggle-buttons .is-selected.weak{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 30%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.group-buttons-container .toggle-buttons .is-selected.weak:hover{background:#fafafa;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),98%);box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16);border:1px solid hsl(0,0%,calc(10% + 20%));border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.group-buttons-container .toggle-buttons .is-selected.weak:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16);box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}.group-buttons-container .toggle-buttons .is-selected.weak:active,.group-buttons-container .toggle-buttons .is-selected.weak:focus{background:#e0e0e0;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),var(--pep-color-regular-l,10%))}.group-buttons-container .toggle-buttons .is-selected.weak:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:#e0e0e0!important;background:hsl(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),88%)!important;box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.04)!important;box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.04)!important;border:1px solid rgba(26,26,26,.08);border:1px solid hsla(var(--pep-color-regular-h,0),var(--pep-color-regular-s,0%),var(--pep-color-regular-l,10%),.08)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}.group-buttons-container .toggle-buttons .is-selected.weak:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}.group-buttons-container .toggle-buttons .is-selected.regular:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}.group-buttons-container .toggle-buttons .is-selected.regular:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative;box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}.group-buttons-container .toggle-buttons .is-selected.regular:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.group-buttons-container .toggle-buttons .is-selected.regular:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}.group-buttons-container .toggle-buttons .is-selected.regular:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}.group-buttons-container .toggle-buttons .is-selected.regular:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.group-buttons-container .toggle-buttons .is-selected.regular:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled):after{border:unset}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}.group-buttons-container .toggle-buttons .is-selected.regular:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}"]}]}],"members":{"viewType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"styleType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"sizeType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"buttons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"buttonsDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"selectedButtonKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"stretch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"buttonClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":33,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":37,"character":38}]}],"ngOnDestroy":[{"__symbolic":"method"}],"onButtonClicked":[{"__symbolic":"method"}]}}},"origins":{"PepGroupButtonsModule":"./group-buttons.module","PepGroupButtonsViewType":"./group-buttons.component","PepGroupButtonsComponent":"./group-buttons.component"},"importAs":"@pepperi-addons/ngx-lib/group-buttons"}

package/image/image.component.theme.scss

@@ -1,35 +1,33 @@
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-@mixin pep-image-component-theme($pepperi-theme) {
-    .indicators-container {
-        .circle {
-            box-shadow: get-pep-shadow($pepperi-theme, shadow-xs, soft);
-            @include inline(get-pep-color($pepperi-theme, color-system-primary, color-flat-r-10), 1px, solid, true);
-        }
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
+
+.indicators-container {
+    .circle {
+        box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+        @include mixins.inline(functions.get-pep-color(color-system-primary, color-flat-r-10), 1px, solid, true);
     }
-    
-    .floating-field {
-        &.has-active-campaign {
-            .svg-icon {
-                fill: get-pep-color($pepperi-theme, color-system-caution, color-base);
-            }
-        }
+}
 
-        &.indicators-container {
-            @include state-weak-invert-default($pepperi-theme);
-            
-            &:hover {
-                cursor: inherit;
-            }
+.floating-field {
+    &.has-active-campaign {
+        .svg-icon {
+            fill: functions.get-pep-color(color-system-caution, color-base);
         }
     }
 
-    .image-container {
-        .mat-form-field-disabled { 
-            .mat-form-field-flex {
-                background: transparent !important;
-            }
+    &.indicators-container {
+        @include mixins.state-weak-invert-default();
+        
+        &:hover {
+            cursor: inherit;
         }
     }
 }
+
+.image-container {
+    .mat-form-field-disabled { 
+        .mat-form-field-flex {
+            background: transparent !important;
+        }
+    }
+}

package/image/pepperi-addons-ngx-lib-image.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepImageModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":35,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":36,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":39,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImageComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImageComponent"}],"entryComponents":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripComponent","line":43,"character":22}],"providers":[{"__symbolic":"reference","name":"PepImageService"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":47,"character":41}]}]}},"PepImageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"pep-image","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":35,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\r\n    <ng-container>\r\n        <ng-template #readonlyTemplate>\r\n            <div class=\"img-wrapper\" [ngClass]=\"{\r\n                'left-alignment': xAlignment == 'left',\r\n                'right-alignment': xAlignment == 'right',\r\n                'center-alignment': xAlignment == 'center'\r\n            }\">\r\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file\" [alt]=\"label\" [src]=\"src\"\r\n                    (click)=\"itemImageClick($event)\" (error)=\"errorHandler($event)\" (load)=\"onImageLoad($event)\" />\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'form'\">\r\n            <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\r\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n            </pep-field-title>\r\n            <ng-container *ngIf=\"disabled || readonly; then disabledTemplate; else editableTemplate\"></ng-container>\r\n            <ng-template #disabledTemplate>\r\n                <div class=\"pep-file body-sm\" [style.height]=\"fieldHeight\" [ngClass]=\"{'one-row': rowSpan == 1}\">\r\n                    <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #editableTemplate>\r\n                <div class=\"pep-file-container image-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\r\n                    <pep-files-uploader [id]=\"key\" [key]=\"key\" [fieldHeight]=\"fieldHeight\" [layoutType]=\"layoutType\"\r\n                        [standAlone]=\"standAlone\" [src]=\"srcLarge || src\" [label]=\"label\" [mandatory]=\"mandatory\"\r\n                        [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [rowSpan]=\"rowSpan\" [controlType]=\"controlType\"\r\n                        [form]=\"form\" [acceptedExtensions]=\"acceptImagesType\" (fileChange)=\"onFileChanged($event)\"\r\n                        (elementClick)=\"onFileClicked($event)\" [sizeLimitMB]=\"sizeLimitMB\">\r\n                    </pep-files-uploader>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'card'\">\r\n            <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\r\n            <!-- <div class=\"img-wrapper\"\r\n                [ngClass]=\"{\r\n                    'left-alignment': xAlignment == 'left',\r\n                    'right-alignment': xAlignment == 'right',\r\n                    'center-alignment': xAlignment == 'center'\r\n                }\">\r\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file\" [alt]=\"label\" [src]=\"src\"\r\n                    (click)=\"itemImageClick($event)\" (error)=\"errorHandler($event)\" />\r\n            </div> -->\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'table'\">\r\n            <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\r\n            <!-- <div class=\"img-wrapper\" [ngClass]=\"{\r\n                    'left-alignment': xAlignment == 'left',\r\n                    'right-alignment': xAlignment == 'right',\r\n                    'center-alignment': xAlignment == 'center'\r\n                }\">\r\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file pep-report-img\"\r\n                    [ngClass]=\"['text-align-' + xAlignment]\" [alt]=\"label\" [src]=\"src\" (click)=\"itemImageClick($event)\"\r\n                    (error)=\"errorHandler($event)\" (load)=\"onImageLoad($event)\" />\r\n            </div> -->\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- Menu -->\r\n    <ng-container *ngIf=\"menuField\">\r\n        <button [id]=\"key\" (click)=\"onMenuClick($event)\" class=\"floating-field pep-button icon-button weak invert\"\r\n            [ngClass]=\"{\r\n                bottom: menuField?.Layout?.YAlignment == '2',\r\n                top: menuField?.Layout?.YAlignment == '1',\r\n                left: menuField?.Layout?.XAlignment == '1',\r\n                right: menuField?.Layout?.XAlignment == '2'\r\n            }\">\r\n            <mat-icon>\r\n                <pep-icon name=\"system_menu\"></pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n    </ng-container>\r\n\r\n    <!-- Campaign -->\r\n    <ng-container *ngIf=\"hasCampaignField && hasCampaignField?.FormattedValue\">\r\n        <span [id]=\"key\" class=\"campaign floating-field\" title=\"{{ hasCampaignField?.FormattedValue }}\" [ngClass]=\"{\r\n                bottom: hasCampaignField?.Layout?.YAlignment == '2',\r\n                top: hasCampaignField?.Layout?.YAlignment == '1',\r\n                left: hasCampaignField?.Layout?.XAlignment == '1',\r\n                right: hasCampaignField?.Layout?.XAlignment == '2'\r\n            }\">\r\n            <mat-icon class=\"has-active-campaign\">\r\n                <pep-icon name=\"system_bolt\"></pep-icon>\r\n            </mat-icon>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <!-- Indicators -->\r\n    <ng-container *ngIf=\"indicatorsField && indicatorsField?.FormattedValue != ''\">\r\n        <span [id]=\"key\" class=\"indicators-container floating-field\" [ngClass]=\"{\r\n                bottom: indicatorsField?.Layout?.YAlignment == '2',\r\n                top: indicatorsField?.Layout?.YAlignment == '1',\r\n                left: indicatorsField?.Layout?.XAlignment == '1',\r\n                right: indicatorsField?.Layout?.XAlignment == '2'\r\n            }\">\r\n            <mat-icon>\r\n                <ng-container *ngFor=\"let value of indicatorsField?.FormattedValue?.split(';')\">\r\n                    <pep-icon class=\"pull-left flip\" name=\"indicator_dot_placeholder\" [fill]=\"value\"></pep-icon>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"indicatorsField?.FormattedValue?.split(';').length < 4\">\r\n                    <pep-icon class=\"pull-left flip\" name=\"indicator_dot_placeholder\"></pep-icon>\r\n                </ng-container>\r\n            </mat-icon>\r\n        </span>\r\n    </ng-container>\r\n</ng-container>","styles":[":host{width:100%;height:inherit;display:grid}:host>*{align-self:center}.img-wrapper{display:flex;align-items:center;height:100%;max-width:100%}.img-wrapper.left-alignment{justify-content:flex-start}.img-wrapper.center-alignment{justify-content:center}.img-wrapper.right-alignment{justify-content:flex-end}.img-wrapper img{max-width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.pep-file-container,.pepperi-file-container{height:100%}.pep-file-container .img-wrapper,.pepperi-file-container .img-wrapper{height:calc(100% - 1.5rem)}.pep-file-container img,.pepperi-file-container img{cursor:pointer}.indicators-container{padding:0!important}.indicators-container mat-icon{height:100%;width:100%;padding:.4rem}.indicators-container mat-icon pep-icon{height:.75rem!important;width:.75rem!important;margin:.05rem}.floating-field{width:2.5rem;height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;cursor:pointer;position:absolute!important}.top{top:0}.bottom{bottom:0}.left{left:0}.right{right:0}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"srcLarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"indicatorsField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"menuField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"hasCampaignField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"sizeLimitMB":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"acceptImagesType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":106,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":109,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"PepImageService"},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":118,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":119,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":120,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":121,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":122,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"errorHandler":[{"__symbolic":"method"}],"onImageLoad":[{"__symbolic":"method"}],"onMenuClick":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"objectIdIsNotEmpty":[{"__symbolic":"method"}],"onFileClicked":[{"__symbolic":"method"}],"itemImageClick":[{"__symbolic":"method"}]},"statics":{"MENU_CLICKED":"[MenuClicked]"}},"PepImageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":15,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":16,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":17,"character":29}]}],"openImageDialog":[{"__symbolic":"method"}],"openFromURI":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}},"origins":{"PepImageModule":"./image.module","PepImageComponent":"./image.component","PepImageService":"./image.service"},"importAs":"@pepperi-addons/ngx-lib/image"}
+{"__symbolic":"module","version":4,"metadata":{"PepImageModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":35,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":36,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":39,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImageComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImageComponent"}],"entryComponents":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/images-filmstrip","name":"PepImagesFilmstripComponent","line":43,"character":22}],"providers":[{"__symbolic":"reference","name":"PepImageService"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":47,"character":41}]}]}},"PepImageComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"pep-image","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":35,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\r\n    <ng-container>\r\n        <ng-template #readonlyTemplate>\r\n            <div class=\"img-wrapper\" [ngClass]=\"{\r\n                'left-alignment': xAlignment == 'left',\r\n                'right-alignment': xAlignment == 'right',\r\n                'center-alignment': xAlignment == 'center'\r\n            }\">\r\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file\" [alt]=\"label\" [src]=\"src\"\r\n                    (click)=\"itemImageClick($event)\" (error)=\"errorHandler($event)\" (load)=\"onImageLoad($event)\" />\r\n            </div>\r\n        </ng-template>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'form'\">\r\n            <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\r\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n            </pep-field-title>\r\n            <ng-container *ngIf=\"disabled || readonly; then disabledTemplate; else editableTemplate\"></ng-container>\r\n            <ng-template #disabledTemplate>\r\n                <div class=\"pep-file body-sm\" [style.height]=\"fieldHeight\" [ngClass]=\"{'one-row': rowSpan == 1}\">\r\n                    <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\r\n                </div>\r\n            </ng-template>\r\n            <ng-template #editableTemplate>\r\n                <div class=\"pep-file-container image-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\r\n                    <pep-files-uploader [id]=\"key\" [key]=\"key\" [fieldHeight]=\"fieldHeight\" [layoutType]=\"layoutType\"\r\n                        [standAlone]=\"standAlone\" [src]=\"srcLarge || src\" [label]=\"label\" [mandatory]=\"mandatory\"\r\n                        [disabled]=\"disabled\" [xAlignment]=\"xAlignment\" [rowSpan]=\"rowSpan\" [controlType]=\"controlType\"\r\n                        [form]=\"form\" [acceptedExtensions]=\"acceptImagesType\" (fileChange)=\"onFileChanged($event)\"\r\n                        (elementClick)=\"onFileClicked($event)\" [sizeLimitMB]=\"sizeLimitMB\">\r\n                    </pep-files-uploader>\r\n                </div>\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'card'\">\r\n            <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\r\n            <!-- <div class=\"img-wrapper\"\r\n                [ngClass]=\"{\r\n                    'left-alignment': xAlignment == 'left',\r\n                    'right-alignment': xAlignment == 'right',\r\n                    'center-alignment': xAlignment == 'center'\r\n                }\">\r\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file\" [alt]=\"label\" [src]=\"src\"\r\n                    (click)=\"itemImageClick($event)\" (error)=\"errorHandler($event)\" />\r\n            </div> -->\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"layoutType === 'table'\">\r\n            <ng-container *ngTemplateOutlet=\"readonlyTemplate\"></ng-container>\r\n            <!-- <div class=\"img-wrapper\" [ngClass]=\"{\r\n                    'left-alignment': xAlignment == 'left',\r\n                    'right-alignment': xAlignment == 'right',\r\n                    'center-alignment': xAlignment == 'center'\r\n                }\">\r\n                <img [id]=\"key\" [style.max-height]=\"fieldHeight\" class=\"pep-report-file pep-report-img\"\r\n                    [ngClass]=\"['text-align-' + xAlignment]\" [alt]=\"label\" [src]=\"src\" (click)=\"itemImageClick($event)\"\r\n                    (error)=\"errorHandler($event)\" (load)=\"onImageLoad($event)\" />\r\n            </div> -->\r\n        </ng-container>\r\n    </ng-container>\r\n\r\n    <!-- Menu -->\r\n    <ng-container *ngIf=\"menuField\">\r\n        <button [id]=\"key\" (click)=\"onMenuClick($event)\" class=\"floating-field pep-button icon-button weak invert\"\r\n            [ngClass]=\"{\r\n                bottom: menuField?.Layout?.YAlignment == '2',\r\n                top: menuField?.Layout?.YAlignment == '1',\r\n                left: menuField?.Layout?.XAlignment == '1',\r\n                right: menuField?.Layout?.XAlignment == '2'\r\n            }\">\r\n            <mat-icon>\r\n                <pep-icon name=\"system_menu\"></pep-icon>\r\n            </mat-icon>\r\n        </button>\r\n    </ng-container>\r\n\r\n    <!-- Campaign -->\r\n    <ng-container *ngIf=\"hasCampaignField && hasCampaignField?.FormattedValue\">\r\n        <span [id]=\"key\" class=\"campaign floating-field\" title=\"{{ hasCampaignField?.FormattedValue }}\" [ngClass]=\"{\r\n                bottom: hasCampaignField?.Layout?.YAlignment == '2',\r\n                top: hasCampaignField?.Layout?.YAlignment == '1',\r\n                left: hasCampaignField?.Layout?.XAlignment == '1',\r\n                right: hasCampaignField?.Layout?.XAlignment == '2'\r\n            }\">\r\n            <mat-icon class=\"has-active-campaign\">\r\n                <pep-icon name=\"system_bolt\"></pep-icon>\r\n            </mat-icon>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <!-- Indicators -->\r\n    <ng-container *ngIf=\"indicatorsField && indicatorsField?.FormattedValue != ''\">\r\n        <span [id]=\"key\" class=\"indicators-container floating-field\" [ngClass]=\"{\r\n                bottom: indicatorsField?.Layout?.YAlignment == '2',\r\n                top: indicatorsField?.Layout?.YAlignment == '1',\r\n                left: indicatorsField?.Layout?.XAlignment == '1',\r\n                right: indicatorsField?.Layout?.XAlignment == '2'\r\n            }\">\r\n            <mat-icon>\r\n                <ng-container *ngFor=\"let value of indicatorsField?.FormattedValue?.split(';')\">\r\n                    <pep-icon class=\"pull-left flip\" name=\"indicator_dot_placeholder\" [fill]=\"value\"></pep-icon>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"indicatorsField?.FormattedValue?.split(';').length < 4\">\r\n                    <pep-icon class=\"pull-left flip\" name=\"indicator_dot_placeholder\"></pep-icon>\r\n                </ng-container>\r\n            </mat-icon>\r\n        </span>\r\n    </ng-container>\r\n</ng-container>","styles":[":host{width:100%;height:inherit;display:grid}:host>*{align-self:center}.img-wrapper{display:flex;align-items:center;height:100%;max-width:100%}.img-wrapper.left-alignment{justify-content:flex-start}.img-wrapper.center-alignment{justify-content:center}.img-wrapper.right-alignment{justify-content:flex-end}.img-wrapper img{max-width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.pep-file-container,.pepperi-file-container{height:100%}.pep-file-container .img-wrapper,.pepperi-file-container .img-wrapper{height:calc(100% - 1.5rem)}.pep-file-container img,.pepperi-file-container img{cursor:pointer}.indicators-container{padding:0!important}.indicators-container mat-icon{height:100%;width:100%;padding:.4rem}.indicators-container mat-icon pep-icon{height:.75rem!important;width:.75rem!important;margin:.05rem}.floating-field{width:2.5rem;height:2.5rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;cursor:pointer;position:absolute!important}.top{top:0}.bottom{bottom:0}.left{left:0}.right{right:0}",".indicators-container .circle{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);border:1px solid hsl(0,0%,calc(10% + 20%));border:1px solid hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),calc(var(--pep-color-system-primary-l, 10%) + 20%))}.floating-field.has-active-campaign .svg-icon{fill:#e60000;fill:hsl(var(--pep-color-system-caution-h,360),var(--pep-color-system-caution-s,100%),var(--pep-color-system-caution-l,45%))}.floating-field.indicators-container{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5)}.floating-field.indicators-container:hover{cursor:inherit}.image-container .mat-form-field-disabled .mat-form-field-flex{background:transparent!important}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"srcLarge":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":5}}]}],"indicatorsField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"menuField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"hasCampaignField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"sizeLimitMB":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"acceptImagesType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":106,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":109,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"PepImageService"},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":118,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":119,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":120,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":121,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":122,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"errorHandler":[{"__symbolic":"method"}],"onImageLoad":[{"__symbolic":"method"}],"onMenuClick":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"objectIdIsNotEmpty":[{"__symbolic":"method"}],"onFileClicked":[{"__symbolic":"method"}],"itemImageClick":[{"__symbolic":"method"}]},"statics":{"MENU_CLICKED":"[MenuClicked]"}},"PepImageService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":10,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":15,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":16,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":17,"character":29}]}],"openImageDialog":[{"__symbolic":"method"}],"openFromURI":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}}},"origins":{"PepImageModule":"./image.module","PepImageComponent":"./image.component","PepImageService":"./image.service"},"importAs":"@pepperi-addons/ngx-lib/image"}

package/images-filmstrip/images-filmstrip.component.theme.scss

@@ -1,32 +1,33 @@
-@mixin pep-images-filmstrip-component-theme($pepperi-theme) {
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
 
-    gallery {
-        background-color: transparent;
+gallery {
+    background-color: transparent;
+}
+
+gallery-thumb {
+    box-shadow: functions.get-pep-shadow(shadow-sm, hard);
+}
+
+.g-nav-prev,
+.g-nav-next  {
+    @include mixins.state-weak-invert-default();
+            
+    &:hover {
+        @include mixins.state-weak-invert-hover();
     }
-    
-    gallery-thumb {
-        box-shadow: get-pep-shadow($pepperi-theme, shadow-sm, hard);
+    &:focus {
+        @include mixins.state-weak-invert-focus();
     }
-    
-    .g-nav-prev,
-    .g-nav-next  {
-        @include state-weak-invert-default($pepperi-theme);
-                
-        &:hover {
-            @include state-weak-invert-hover($pepperi-theme);
-        }
-        &:focus {
-            @include state-weak-invert-focus($pepperi-theme);
-        }
-        &:active {
-            @include state-weak-invert-active($pepperi-theme);
-        }
-        &:disabled {
-            @include state-weak-invert-disable($pepperi-theme);
-        }
-
+    &:active {
+        @include mixins.state-weak-invert-active();
     }
-    gallery-dots {
-        @include state-weak-default($pepperi-theme);
+    &:disabled {
+        @include mixins.state-weak-invert-disable();
     }
+
 }
+
+gallery-dots {
+    @include mixins.state-weak-default();
+}

package/images-filmstrip/pepperi-addons-ngx-lib-images-filmstrip.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepImagesFilmstripModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":34,"character":8},{"__symbolic":"reference","module":"ng-gallery","name":"GalleryModule","line":36,"character":8},{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"ImageViewerModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":56,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":57,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":58,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":59,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":65,"character":41}]}]}},"createViewerConfig":{"__symbolic":"function","parameters":["translate"],"value":{"bgStyle":"#FFF","loadingMessage":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"translate"},"member":"instant"},"arguments":["MESSAGES.INFO_LOADING_FILE"]},"nextPageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":106,"character":24},"arguments":["navigate_next","Next page",0,false]},"beforePageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":112,"character":26},"arguments":["navigate_before","Previous page",1,false]},"zoomOutButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":118,"character":23},"arguments":["zoom_out","Zoom out",0,false]},"zoomInButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":119,"character":22},"arguments":["zoom_in","Zoom in",1,false]},"rotateLeftButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":120,"character":26},"arguments":["rotate_left","Rotate left",2,false]},"rotateRightButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":126,"character":27},"arguments":["rotate_right","Rotate right",3,false]},"resetButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":132,"character":21},"arguments":["autorenew","Reset",4,false]}}},"PepImagesFilmstripComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":136,"character":1},"arguments":[{"selector":"pep-images-filmstrip","providers":[{"provide":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"IMAGEVIEWER_CONFIG","line":143,"character":21},"useFactory":{"__symbolic":"reference","name":"createViewerConfig"},"deps":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":146,"character":19}]}],"template":"<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\r\n<ng-template #regularTemplate>\r\n    <ng-container [formGroup]=\"form\">\r\n        <div class=\"images-filmstrip-container\">\r\n            <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n            </pep-field-title>\r\n            <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\r\n                [style.height]=\"fieldHeight\">\r\n                <gallery id=\"{{key}}-{{uid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\r\n                    (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\r\n                </gallery>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #galleryDialogTemplate>\r\n    <div class=\"gallery-dialog\">\r\n        <pep-dialog [title]=\"label\" [showFooter]=\"false\">\r\n            <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\r\n                [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\r\n                <gallery id=\"{{key}}-{{uid}}-dlgGallery\" [imageSize]=\"'contain'\" (indexChange)=\"indexChange($event)\"\r\n                    (error)=\"onError($event)\">\r\n                </gallery>\r\n            </div>\r\n        </pep-dialog>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Add custom template to image items -->\r\n<ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\r\n    <ng-container *ngIf=\"index === currIndex\">\r\n        <ngx-imageviewer [src]=\"data.src\">\r\n        </ngx-imageviewer>\r\n    </ng-container>\r\n</ng-template>","styles":[":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container,.images-filmstrip-container .img-wrapper,gallery{height:100%}gallery{direction:ltr;min-height:100%}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.gallery-dialog-content ::ng-deep gallery-item .g-item-template ngx-imageviewer canvas{max-width:100%!important;max-height:100%!important}::ng-deep gallery-thumbs{margin:0 1rem 0 .5rem;margin:0 var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep gallery-dots.pep-button,::ng-deep gallery-dots.pepperi-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep .g-nav-next,::ng-deep .g-nav-prev{width:2rem!important;height:2rem!important;padding:.25rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep .g-nav-next .mat-icon,::ng-deep .g-nav-prev .mat-icon{display:inline-block!important}::ng-deep .g-nav-prev{transform:translateY(-50%) perspective(1px) scaleX(-1)!important}.vertical-gallery ::ng-deep gallery-thumbs{margin:1rem 0 .5rem;margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":170,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":172,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":173,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":5}}]}],"currIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":5}}]}],"showThumbnails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"galleryCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":188,"character":5},"arguments":["galleryCont"]}]}],"galleryDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":189,"character":5},"arguments":["galleryDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":189,"character":48}}]}]}],"galleryDialogCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":191,"character":5},"arguments":["galleryDialogCont"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":218,"character":9}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":220,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":221,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":221,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":210,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":211,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":212,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":213,"character":29},{"__symbolic":"reference","module":"ng-gallery","name":"Gallery","line":214,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":215,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":216,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":217,"character":20},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]},{"__symbolic":"reference","name":"any"}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"initGalleryStyle":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"enlargeImage":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"setThumbnailDimension":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}}},"origins":{"PepImagesFilmstripModule":"./images-filmstrip.module","createViewerConfig":"./images-filmstrip.component","PepImagesFilmstripComponent":"./images-filmstrip.component"},"importAs":"@pepperi-addons/ngx-lib/images-filmstrip"}
+{"__symbolic":"module","version":4,"metadata":{"PepImagesFilmstripModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":26,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":28,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":34,"character":8},{"__symbolic":"reference","module":"ng-gallery","name":"GalleryModule","line":36,"character":8},{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"ImageViewerModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":56,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":57,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":58,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":59,"character":8}],"exports":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}],"declarations":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":65,"character":41}]}]}},"createViewerConfig":{"__symbolic":"function","parameters":["translate"],"value":{"bgStyle":"#FFF","loadingMessage":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"translate"},"member":"instant"},"arguments":["MESSAGES.INFO_LOADING_FILE"]},"nextPageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":106,"character":24},"arguments":["navigate_next","Next page",0,false]},"beforePageButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":112,"character":26},"arguments":["navigate_before","Previous page",1,false]},"zoomOutButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":118,"character":23},"arguments":["zoom_out","Zoom out",0,false]},"zoomInButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":119,"character":22},"arguments":["zoom_in","Zoom in",1,false]},"rotateLeftButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":120,"character":26},"arguments":["rotate_left","Rotate left",2,false]},"rotateRightButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":126,"character":27},"arguments":["rotate_right","Rotate right",3,false]},"resetButton":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"createButtonConfig","line":132,"character":21},"arguments":["autorenew","Reset",4,false]}}},"PepImagesFilmstripComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":136,"character":1},"arguments":[{"selector":"pep-images-filmstrip","providers":[{"provide":{"__symbolic":"reference","module":"@hallysonh/ngx-imageviewer","name":"IMAGEVIEWER_CONFIG","line":143,"character":21},"useFactory":{"__symbolic":"reference","name":"createViewerConfig"},"deps":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":146,"character":19}]}],"template":"<ng-container *ngIf=\"inDialog; then galleryDialogTemplate; else regularTemplate\"></ng-container>\r\n<ng-template #regularTemplate>\r\n    <ng-container [formGroup]=\"form\">\r\n        <div class=\"images-filmstrip-container\">\r\n            <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n            </pep-field-title>\r\n            <div #galleryCont class=\"img-wrapper\" [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\"\r\n                [style.height]=\"fieldHeight\">\r\n                <gallery id=\"{{key}}-{{uid}}-gallery\" (itemClick)=\"enlargeImage($event);\" [imageSize]=\"'contain'\"\r\n                    (indexChange)=\"indexChange($event)\" (error)=\"onError($event)\">\r\n                </gallery>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #galleryDialogTemplate>\r\n    <div class=\"gallery-dialog\">\r\n        <pep-dialog [title]=\"label\" [showFooter]=\"false\">\r\n            <div pep-dialog-content #galleryDialogCont class=\"gallery-dialog-content\"\r\n                [ngClass]=\"isVertical ? 'vertical-gallery' : 'horizontal-gallery'\">\r\n                <gallery id=\"{{key}}-{{uid}}-dlgGallery\" [imageSize]=\"'contain'\" (indexChange)=\"indexChange($event)\"\r\n                    (error)=\"onError($event)\">\r\n                </gallery>\r\n            </div>\r\n        </pep-dialog>\r\n    </div>\r\n</ng-template>\r\n\r\n<!-- Add custom template to image items -->\r\n<ng-template #itemTemplate let-index=\"index\" let-type=\"type\" let-data=\"data\" let-currIndex=\"currIndex\">\r\n    <ng-container *ngIf=\"index === currIndex\">\r\n        <ngx-imageviewer [src]=\"data.src\">\r\n        </ngx-imageviewer>\r\n    </ng-container>\r\n</ng-template>","styles":[":host{width:100%;height:inherit;display:block}:host>*{align-self:center}.gallery-dialog{height:inherit}.images-filmstrip-container,.images-filmstrip-container .img-wrapper,gallery{height:100%}gallery{direction:ltr;min-height:100%}.gallery-dialog-content gallery{min-width:65vw}.gallery-dialog-content ::ng-deep gallery-item gallery-image .g-image-item{background-size:content!important}.gallery-dialog-content ::ng-deep gallery-item .g-item-template ngx-imageviewer canvas{max-width:100%!important;max-height:100%!important}::ng-deep gallery-thumbs{margin:0 1rem 0 .5rem;margin:0 var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem)}::ng-deep gallery-thumbs gallery-thumb{padding:0!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);margin:.5rem 0;margin:var(--pep-spacing-sm,.5rem) 0}::ng-deep gallery-thumbs gallery-thumb .g-image-item{background-size:cover!important}::ng-deep gallery-item gallery-image .g-image-item{border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}::ng-deep gallery-item:hover{cursor:pointer}::ng-deep gallery-dots{position:absolute!important;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep gallery-dots.pep-button,::ng-deep gallery-dots.pepperi-button{display:flex!important}::ng-deep .img-container{display:flex;align-items:center}::ng-deep .g-nav-next,::ng-deep .g-nav-prev{width:2rem!important;height:2rem!important;padding:.25rem;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}::ng-deep .g-nav-next .mat-icon,::ng-deep .g-nav-prev .mat-icon{display:inline-block!important}::ng-deep .g-nav-prev{transform:translateY(-50%) perspective(1px) scaleX(-1)!important}.vertical-gallery ::ng-deep gallery-thumbs{margin:1rem 0 .5rem;margin:var(--pep-spacing-lg,1rem) 0 var(--pep-spacing-sm,.5rem) 0}.vertical-gallery ::ng-deep gallery-thumbs gallery-thumb{margin:0 .5rem;margin:0 var(--pep-spacing-sm,.5rem)}","gallery{background-color:transparent}gallery-thumb{box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32)}.g-nav-next,.g-nav-next:hover,.g-nav-prev,.g-nav-prev:hover{background:hsla(0,0%,100%,.5);background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.5)}.g-nav-next:hover,.g-nav-prev:hover{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);cursor:pointer}.g-nav-next:focus,.g-nav-prev:focus{box-shadow:0 0 0 .25rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-xs,.25rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}.g-nav-next:active,.g-nav-next:focus,.g-nav-prev:active,.g-nav-prev:focus{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}.g-nav-next:active,.g-nav-prev:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.16)}.g-nav-next:disabled,.g-nav-prev:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:hsla(0,0%,100%,.08)!important;background:hsla(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%),.08)!important}.g-nav-next:disabled:after,.g-nav-prev:disabled:after{border:unset}.g-nav-next:disabled .svg-icon,.g-nav-prev:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}.g-nav-next:disabled .svg-icon.stroke,.g-nav-prev:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}gallery-dots{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.12)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":153,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":154,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":155,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":156,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":159,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":170,"character":5}}]}],"uid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":171,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":172,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":173,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":176,"character":5}}]}],"currIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":185,"character":5}}]}],"showThumbnails":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":186,"character":5}}]}],"galleryCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":188,"character":5},"arguments":["galleryCont"]}]}],"galleryDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":189,"character":5},"arguments":["galleryDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":189,"character":48}}]}]}],"galleryDialogCont":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":191,"character":5},"arguments":["galleryDialogCont"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,null,null,null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":218,"character":9}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":220,"character":9}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":221,"character":9},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":221,"character":16}]}]],"parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":210,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":211,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":212,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":213,"character":29},{"__symbolic":"reference","module":"ng-gallery","name":"Gallery","line":214,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":215,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":216,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":217,"character":20},{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"PepImagesFilmstripComponent"}]},{"__symbolic":"reference","name":"any"}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"initGalleryStyle":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"enlargeImage":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"setThumbnailDimension":[{"__symbolic":"method"}],"indexChange":[{"__symbolic":"method"}]}}},"origins":{"PepImagesFilmstripModule":"./images-filmstrip.module","createViewerConfig":"./images-filmstrip.component","PepImagesFilmstripComponent":"./images-filmstrip.component"},"importAs":"@pepperi-addons/ngx-lib/images-filmstrip"}

package/list/list-total.component.theme.scss

@@ -1,10 +1,10 @@
-@mixin pep-list-total-component-theme($pepperi-theme) {
-    .total-items {
-        color: get-pep-color($pepperi-theme, color-text, color-dimmed);
+@use '../src/core/style/abstracts/functions';
 
-        .number {
-            color: get-pep-color($pepperi-theme, color-text, color-main);
-        }
+.total-items {
+    color: functions.get-pep-color(color-text, color-dimmed);
 
+    .number {
+        color: functions.get-pep-color(color-text, color-main);
     }
+
 }