@pepperi-addons/ngx-lib 0.3.7 → 0.3.9-beta.11

package/bundles/pepperi-addons-ngx-lib-top-bar.umd.js

@@ -79,7 +79,7 @@
         { type: core.Component, args: [{
                     selector: 'pep-top-bar',
                     template: "<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\n    <div class=\"header-content\">\n        <div class=\"main-layout\">\n            <div class=\"content pep-border-bottom\">\n                <div class=\"left-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\n                </div>\n                <div class=\"pep-spacing-element\"></div>\n                <div class=\"right-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\n    <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\n        [style.height.rem]=\"customizationService.footerHeight\">\n        <div class=\"content pep-border-top\">\n            <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-start-content]\"></ng-content>\n            </div>\n            <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-end-content]\"></ng-content>\n            </div>\n        </div>\n        <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\n        </ng-container>\n        <ng-template #footerBlock>\n            {{ customizationService.showFooter() }}\n        </ng-template>\n        <ng-template #noFooterBlock>\n            {{ customizationService.hideFooter() }}\n        </ng-template> -->\n    </div>\n\n</div>\n\n<!-- Left side templates -->\n<ng-template #listActionsTemplate>\n    <div class=\"list-actions-wrapper\">\n        <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #titleTemplate>\n    <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\n        <span [title]=\"title\">{{ title }}</span>\n    </div>\n</ng-template>\n\n<ng-template #listChooserTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\n        <ng-content select=\"pep-list-chooser\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #leftContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-start-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #listTotalTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\n        <ng-content select=\"pep-list-total\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Right side templates -->\n<ng-template #searchTemplate>\n    <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\n        <ng-content select=\"pep-search\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #sortingTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\n        <ng-content select=\"pep-list-sorting\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #viewsTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\n        <ng-content select=\"pep-list-views\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #rightContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-end-content]\"></ng-content>\n    </div>\n</ng-template>",
-                    styles: [".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}", ".pep-top-bar-container{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%))}.pep-top-bar-container .footer{background-color:#fff;background-color: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%))}"]
+                    styles: [".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}", ".pep-top-bar-container{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%))}.pep-top-bar-container .footer{background-color:#fff;background-color: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%))}"]
                 },] }
     ];
     PepTopBarComponent.ctorParameters = function () { return [

package/bundles/pepperi-addons-ngx-lib.umd.js

@@ -788,7 +788,9 @@
         };
         PepUtilitiesService.prototype.getSvgElementFromString = function (document, svgContent) {
             var div = document.createElement('DIV');
-            div.innerHTML = svgContent;
+            // div.className = 'svg-icon';
+            // Add class svg-icon
+            div.innerHTML = svgContent.replace('<svg ', '<svg class="svg-icon" ');
             return (div.querySelector('svg') ||
                 document.createElementNS('http://www.w3.org/2000/svg', 'path'));
         };
@@ -3667,6 +3669,26 @@
         };
         return PepTextboxField;
     }(PepFieldBase));
+    var PepLinkField = /** @class */ (function (_super) {
+        __extends(PepLinkField, _super);
+        function PepLinkField(options) {
+            if (options === void 0) { options = {}; }
+            var _this = _super.call(this, options) || this;
+            _this.controlType = 'link';
+            _this.type = 'link';
+            _this.update(options);
+            return _this;
+        }
+        PepLinkField.prototype.update = function (options) {
+            _super.prototype.update.call(this, options);
+            // DI-11292 - add changes for link field for the "Read Only display value" prop
+            this.formattedValue =
+                this.disabled && this.formattedValue && this.value
+                    ? this.formattedValue
+                    : this.value;
+        };
+        return PepLinkField;
+    }(PepFieldBase));
     var PepTextareaField = /** @class */ (function (_super) {
         __extends(PepTextareaField, _super);
         function PepTextareaField(options) {
@@ -4902,6 +4924,7 @@
     exports.PepInternalPageField = PepInternalPageField;
     exports.PepJwtHelperService = PepJwtHelperService;
     exports.PepLayoutService = PepLayoutService;
+    exports.PepLinkField = PepLinkField;
     exports.PepLoaderService = PepLoaderService;
     exports.PepMenuBlurDirective = PepMenuBlurDirective;
     exports.PepNgxLibModule = PepNgxLibModule;