@pobuca/email-builder 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/pobuca-email-builder.umd.js +3 -3
- package/bundles/pobuca-email-builder.umd.js.map +1 -1
- package/bundles/pobuca-email-builder.umd.min.js +1 -1
- package/bundles/pobuca-email-builder.umd.min.js.map +1 -1
- package/esm2015/lib/components/block-settings/block-settings.component.js +1 -1
- package/esm2015/lib/elements/social/social.component.js +3 -3
- package/fesm2015/pobuca-email-builder.js +3 -3
- package/fesm2015/pobuca-email-builder.js.map +1 -1
- package/package.json +1 -1
- package/pobuca-email-builder.metadata.json +1 -1
|
@@ -42,7 +42,7 @@ BlockSettingsComponent.decorators = [
|
|
|
42
42
|
template: "<!--\n ~ Copyright (c) 2024 Pobuca.\n ~ All rights reserved.\n -->\n\n<ng-container *ngIf=\"block$ | async as currentBlock\">\n <mat-accordion>\n <mat-expansion-panel expanded *ngIf=\"hasProperty(currentBlock.options, 'font')\">\n <mat-expansion-panel-header i18n=\"settings|Font\">\n Font\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-color [options]=\"currentBlock.options\" key=\"color\"></pb-color>\n <pb-font-styles [font]=\"currentBlock.options.font\"></pb-font-styles>\n <pb-line-height *ngIf=\"currentBlock.type !== 'social'\" [lineHeight]=\"currentBlock.options.lineHeight\">\n </pb-line-height>\n </ng-template>\n </mat-expansion-panel>\n\n <ng-container *ngIf=\"currentBlock.type === 'image'\">\n <mat-expansion-panel expanded>\n <mat-expansion-panel-header i18n=\"settings|Image\">\n Image\n </mat-expansion-panel-header>\n <pb-image-upload [block]=\"currentBlock\"></pb-image-upload>\n </mat-expansion-panel>\n\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Image Attributes\">\n Attributes\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <div class=\"group f-large\">\n <mat-form-field appearance=\"outline\">\n <mat-label i18n=\"settings|Image Alt\">Alt</mat-label>\n <input matInput [(ngModel)]=\"currentBlock.options.title\" type=\"text\" i18n-placeholder\n placeholder=\"settings|Image Alt\" (input)=\"markForCheck()\" />\n </mat-form-field>\n <pb-align [model]=\"currentBlock.options\"></pb-align>\n </div>\n <pb-link [link]=\"currentBlock.options.link\"></pb-link>\n </ng-template>\n </mat-expansion-panel>\n </ng-container>\n\n <ng-container *ngIf=\"currentBlock.type === 'button'\">\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Button Text\">\n Button Text\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n <mat-label i18n=\"settings|Button Text\">Button Text</mat-label>\n <input matInput [(ngModel)]=\"currentBlock.innerText\" type=\"text\" i18n-placeholder\n placeholder=\"settings|Button Text\" (input)=\"markForCheck()\" />\n </mat-form-field>\n </ng-template>\n </mat-expansion-panel>\n\n\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Background\">\n Background\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-color [options]=\"currentBlock.options\"></pb-color>\n </ng-template>\n </mat-expansion-panel>\n\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Button Attributes\">\n Attributes\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <div class=\"group two\" style=\"padding-bottom: 0\">\n <pb-align [model]=\"currentBlock.options\" [disabled]=\"currentBlock.options.fullWidth\"></pb-align>\n <mat-slide-toggle style=\"margin-top: -24px\" [(ngModel)]=\"currentBlock.options.fullWidth\"\n (change)=\"markForCheck()\">\n <ng-container i18n=\"settings|Button Full Width\">Full Width</ng-container>\n </mat-slide-toggle>\n </div>\n <pb-link [link]=\"currentBlock.options.link\"></pb-link>\n <pb-padding [padding]=\"currentBlock.options.innerPadding\"></pb-padding>\n </ng-template>\n </mat-expansion-panel>\n </ng-container>\n\n <mat-expansion-panel [expanded]=\"currentBlock.type === 'spacer'\"\n *ngIf=\"hasProperty(currentBlock.options, 'width') || hasProperty(currentBlock.options, 'height')\">\n <mat-expansion-panel-header i18n=\"settings|Sizes\">\n Sizes\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-width-height *ngIf=\"hasProperty(currentBlock.options, 'width')\" [model]=\"currentBlock.options.width\"\n label=\"width\"></pb-width-height>\n <pb-width-height *ngIf=\"hasProperty(currentBlock.options, 'height')\" [model]=\"currentBlock.options.height\"\n label=\"height\"></pb-width-height>\n </ng-template>\n </mat-expansion-panel>\n\n <mat-expansion-panel *ngIf=\"hasProperty(currentBlock.options, 'background')\">\n <mat-expansion-panel-header i18n=\"settings|Background\">\n Background\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-color [options]=\"currentBlock.options.background\"></pb-color>\n </ng-template>\n backgroundColor\n </mat-expansion-panel>\n\n <mat-expansion-panel [expanded]=\"currentBlock.type === 'divider'\"\n *ngIf=\"hasProperty(currentBlock.options, 'border')\">\n <mat-expansion-panel-header>\n <ng-container i18n=\"settings|Divider Styles\" *ngIf=\"currentBlock.type === 'divider'\">Styles</ng-container>\n <ng-container i18n=\"settings|Border\" *ngIf=\"currentBlock.type !== 'divider'\">Border</ng-container>\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-border [border]=\"currentBlock.options.border\"></pb-border>\n </ng-template>\n </mat-expansion-panel>\n\n <ng-container *ngIf=\"currentBlock.type === 'social'\">\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Icons\">\n Icons\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n <mat-label i18n=\"settings|Add new Network\">Add new Network</mat-label>\n <mat-select (selectionChange)=\"addSocialNetwork($event, currentBlock)\" [disabled]=\"!socialNetworks.length\">\n <mat-option style=\"text-transform: capitalize\" *ngFor=\"let link of socialNetworks(currentBlock)\"\n [value]=\"link\">\n {{ link }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </ng-template>\n </mat-expansion-panel>\n\n <mat-expansion-panel class=\"networks-list\" *ngFor=\"let network of currentBlock.networks\">\n <mat-expansion-panel-header style=\"text-transform: capitalize\">\n <img [class]=\"network.name\" [src]=\"getSocialIcon(network.name)\" [alt]=\"network.name\" />\n {{ network.name }}\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <div class=\"networks-list-item\">\n <div class=\"item-info\">\n <mat-form-field matLine appearance=\"outline\">\n <mat-label i18n=\"settings|Social Network Label\">Label</mat-label>\n <input matInput autocomplete=\"off\" [(ngModel)]=\"network.label\"\n i18n-placeholder=\"settings|Social Network Label\" placeholder=\"Label\" type=\"text\"\n (input)=\"markForCheck()\" />\n </mat-form-field>\n <button mat-stroked-button color=\"warn\" (click)=\"removeSocialNetwork(network, currentBlock)\">\n <mat-icon>delete_forever</mat-icon>\n </button>\n </div>\n <mat-form-field matLine appearance=\"outline\">\n <mat-label style=\"text-transform: capitalize\">\n {{ network.name }} <ng-container i18n=\"settings|Social Network Link\">Link</ng-container>\n </mat-label>\n <input autocomplete=\"off\" matInput [(ngModel)]=\"network.href\" type=\"url\" (input)=\"markForCheck()\" />\n </mat-form-field>\n </div>\n </ng-template>\n </mat-expansion-panel>\n\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Social Styles\">\n Styles\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <div class=\"group two\" style=\"padding-bottom: 0\">\n <mat-form-field appearance=\"outline\">\n <mat-label i18n=\"settings|Social Model\">Mode</mat-label>\n <mat-select (selectionChange)=\"markForCheck()\" i18n-placeholder=\"settings|Social Model\" placeholder=\"Mode\"\n [(value)]=\"currentBlock.options.mode\" disableRipple>\n <mat-option *ngFor=\"let mode of ['horizontal', 'vertical']\" [value]=\"mode\">\n {{ mode }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <pb-align [model]=\"currentBlock.options\"></pb-align>\n </div>\n <pb-line-height [units]=\"['px']\" [lineHeight]=\"currentBlock.options.iconSize\" label=\"Icon Size\">\n </pb-line-height>\n <pb-padding [padding]=\"currentBlock.options.innerPadding\"></pb-padding>\n </ng-template>\n </mat-expansion-panel>\n </ng-container>\n\n <mat-expansion-panel *ngIf=\"hasProperty(currentBlock.options, 'padding')\">\n <mat-expansion-panel-header i18n=\"settings|Padding\">\n Padding\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-padding [padding]=\"currentBlock.options.padding\"></pb-padding>\n </ng-template>\n </mat-expansion-panel>\n </mat-accordion>\n</ng-container>\n",
|
|
43
43
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
44
44
|
encapsulation: ViewEncapsulation.None,
|
|
45
|
-
styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */.networks-list mat-expansion-panel-header .mat-content{place-items:center}.networks-list mat-expansion-panel-header img{width:20px;margin:0 .5rem 0 0;border-radius:3px
|
|
45
|
+
styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */.networks-list mat-expansion-panel-header .mat-content{place-items:center}.networks-list mat-expansion-panel-header img{width:20px;margin:0 .5rem 0 0;border-radius:3px;background-color:#000}.networks-list-item{width:100%;display:grid;row-gap:.5rem}.networks-list-item .item-info{display:grid;grid-template-columns:2fr 1fr;-moz-column-gap:.5rem;column-gap:.5rem}.networks-list-item .item-info button{align-self:baseline;margin:.25rem 0;height:50px}.networks-list-item .item-info ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}"]
|
|
46
46
|
},] }
|
|
47
47
|
];
|
|
48
48
|
BlockSettingsComponent.ctorParameters = () => [
|
|
@@ -35,8 +35,8 @@ export class SocialComponent extends AbstractBlock {
|
|
|
35
35
|
SocialComponent.decorators = [
|
|
36
36
|
{ type: Component, args: [{
|
|
37
37
|
selector: 'pb-social',
|
|
38
|
-
template: "<!--\n ~ Copyright (c) 2024 Pobuca.\n ~ All rights reserved.\n -->\n\n<div fxLayout [ngStyle]=\"getParentStyles()\">\n <div [class]=\"getSocialListClasses()\" [ngStyle]=\"getSocialListStyles()\">\n <ng-container *ngIf=\"block.networks.length; else noSocialNetworks\">\n <div class=\"social-list-item\" *ngFor=\"let network of block.networks\">\n <div [ngStyle]=\"getLabelStyles()\">\n <img [src]=\"getSocialNetworkIcon(network.name)\" [width]=\"block.options.iconSize.value\"\n [height]=\"block.options.iconSize.value\" [classList]=\"network.name\" [alt]=\"network.name\" />\n </div>\n <span *ngIf=\"network.label\">{{ network.label }}</span>\n </div>\n </ng-container>\n </div>\n</div>\n\n<ng-template #noSocialNetworks>\n <p i18n=\"social block|Empty social list message\">Please add some social networks.</p>\n</ng-template>\n",
|
|
39
|
-
styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block}p{margin:0}.social-list{display:flex;width:100%;flex-wrap:wrap}.social-list.horizontal{flex-direction:row}.social-list.vertical{flex-direction:column}.social-list-item{display:flex;flex-direction:row;align-items:center}.social-list-item img{border-radius:3px
|
|
38
|
+
template: "<!--\n ~ Copyright (c) 2024 Pobuca.\n ~ All rights reserved.\n -->\n\n<div fxLayout [ngStyle]=\"getParentStyles()\">\n <div [class]=\"getSocialListClasses()\" [ngStyle]=\"getSocialListStyles()\">\n <ng-container *ngIf=\"block.networks.length; else noSocialNetworks\">\n <div class=\"social-list-item\" *ngFor=\"let network of block.networks\">\n <div [ngStyle]=\"getLabelStyles()\">\n <img [src]=\"getSocialNetworkIcon(network.name)\" [style.backgroundColor]=\"block.options.color\" [width]=\"block.options.iconSize.value\"\n [height]=\"block.options.iconSize.value\" [classList]=\"network.name\" [alt]=\"network.name\" />\n </div>\n <span *ngIf=\"network.label\">{{ network.label }}</span>\n </div>\n </ng-container>\n </div>\n</div>\n\n<ng-template #noSocialNetworks>\n <p i18n=\"social block|Empty social list message\">Please add some social networks.</p>\n</ng-template>\n",
|
|
39
|
+
styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block}p{margin:0}.social-list{display:flex;width:100%;flex-wrap:wrap}.social-list.horizontal{flex-direction:row}.social-list.vertical{flex-direction:column}.social-list-item{display:flex;flex-direction:row;align-items:center}.social-list-item img{border-radius:3px;background-color:#000}"]
|
|
40
40
|
},] }
|
|
41
41
|
];
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29jaWFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3BiLWVtYWlsLWJ1aWxkZXIvc3JjL2xpYi9lbGVtZW50cy9zb2NpYWwvc29jaWFsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFFSCxPQUFPLEVBQTBCLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVqRSxPQUFPLEVBQUMsVUFBVSxFQUFFLGdCQUFnQixFQUFFLGFBQWEsRUFBRSxjQUFjLEVBQUMsTUFBTSxhQUFhLENBQUM7QUFDeEYsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLG1CQUFtQixDQUFDO0FBUWhELE1BQU0sT0FBTyxlQUFnQixTQUFRLGFBQTBCO0lBQzdELFdBQVc7SUFDWCxzQkFBc0I7SUFFdEIsZUFBZTtRQUNiLE1BQU0sRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQztRQUVoRSxtREFDRSxLQUFLLElBQ0YsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLEdBQzVCLFVBQVUsQ0FBQyxJQUFJLENBQUMsR0FDaEIsYUFBYSxDQUFDLE9BQU8sQ0FBQyxFQUN6QjtJQUNKLENBQUM7SUFFRCxjQUFjO1FBQ1osTUFBTSxFQUFFLFlBQVksRUFBRSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDO1FBQzVDLHVDQUFZLGFBQWEsQ0FBQyxZQUFZLENBQUMsS0FBRSxVQUFVLEVBQUUsQ0FBQyxJQUFHO0lBQzNELENBQUM7SUFFRCxtQkFBbUI7UUFDakIsTUFBTSxFQUFFLEtBQUssRUFBRSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDO1FBQ3JDLE9BQU87WUFDTCxPQUFPLEVBQUUsTUFBTTtZQUNmLFlBQVksRUFDVixDQUFDLEtBQUssS0FBSyxNQUFNLElBQUksWUFBWSxDQUFDO2dCQUNsQyxDQUFDLEtBQUssS0FBSyxPQUFPLElBQUksVUFBVSxDQUFDO2dCQUNqQyxLQUFLO1NBQ1IsQ0FBQztJQUNKLENBQUM7SUFFRCxvQkFBb0I7UUFDbEIsT0FBTyxlQUFlLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2xELENBQUM7SUFFRCxvQkFBb0IsQ0FBQyxPQUFlO1FBQ2xDLE9BQU8sY0FBYyxDQUFDLEdBQUcsT0FBTyxNQUFNLENBQUMsQ0FBQztJQUMxQyxDQUFDOzs7WUEzQ0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxXQUFXO2dCQUNyQix3N0JBQXNDOzthQUd2QyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMjQgUG9idWNhLlxuICogQWxsIHJpZ2h0cyByZXNlcnZlZC5cbiAqL1xuXG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtTb2NpYWxCbG9ja30gZnJvbSAnLi4vLi4vY2xhc3Nlcy9FbGVtZW50cyc7XG5pbXBvcnQge2NyZWF0ZUZvbnQsIGNyZWF0ZUxpbmVIZWlnaHQsIGNyZWF0ZVBhZGRpbmcsIGdldEFzc2V0QnlQYXRofSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQge0Fic3RyYWN0QmxvY2t9IGZyb20gJy4uL2Fic3RyYWN0LWJsb2NrJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGItc29jaWFsJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NvY2lhbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NvY2lhbC5jb21wb25lbnQuc2NzcyddLFxuICAvLyBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBTb2NpYWxDb21wb25lbnQgZXh0ZW5kcyBBYnN0cmFjdEJsb2NrPFNvY2lhbEJsb2NrPiB7XG4gIC8vIEBJbnB1dCgpXG4gIC8vIGJsb2NrOiBTb2NpYWxCbG9jaztcblxuICBnZXRQYXJlbnRTdHlsZXMoKSB7XG4gICAgY29uc3QgeyBjb2xvciwgZm9udCwgbGluZUhlaWdodCwgcGFkZGluZyB9ID0gdGhpcy5ibG9jay5vcHRpb25zO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIGNvbG9yLFxuICAgICAgLi4uY3JlYXRlTGluZUhlaWdodChsaW5lSGVpZ2h0KSxcbiAgICAgIC4uLmNyZWF0ZUZvbnQoZm9udCksXG4gICAgICAuLi5jcmVhdGVQYWRkaW5nKHBhZGRpbmcpXG4gICAgfTtcbiAgfVxuXG4gIGdldExhYmVsU3R5bGVzKCkge1xuICAgIGNvbnN0IHsgaW5uZXJQYWRkaW5nIH0gPSB0aGlzLmJsb2NrLm9wdGlvbnM7XG4gICAgcmV0dXJuIHsgLi4uY3JlYXRlUGFkZGluZyhpbm5lclBhZGRpbmcpLCBsaW5lSGVpZ2h0OiAwIH07XG4gIH1cblxuICBnZXRTb2NpYWxMaXN0U3R5bGVzKCkge1xuICAgIGNvbnN0IHsgYWxpZ24gfSA9IHRoaXMuYmxvY2sub3B0aW9ucztcbiAgICByZXR1cm4ge1xuICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAgcGxhY2VDb250ZW50OlxuICAgICAgICAoYWxpZ24gPT09ICdsZWZ0JyAmJiAnZmxleC1zdGFydCcpIHx8XG4gICAgICAgIChhbGlnbiA9PT0gJ3JpZ2h0JyAmJiAnZmxleC1lbmQnKSB8fFxuICAgICAgICBhbGlnblxuICAgIH07XG4gIH1cblxuICBnZXRTb2NpYWxMaXN0Q2xhc3NlcygpIHtcbiAgICByZXR1cm4gYHNvY2lhbC1saXN0ICR7dGhpcy5ibG9jay5vcHRpb25zLm1vZGV9YDtcbiAgfVxuXG4gIGdldFNvY2lhbE5ldHdvcmtJY29uKG5ldHdvcms6IHN0cmluZykge1xuICAgIHJldHVybiBnZXRBc3NldEJ5UGF0aChgJHtuZXR3b3JrfS5wbmdgKTtcbiAgfVxufVxuIl19
|
|
@@ -2558,8 +2558,8 @@ class SocialComponent extends AbstractBlock {
|
|
|
2558
2558
|
SocialComponent.decorators = [
|
|
2559
2559
|
{ type: Component, args: [{
|
|
2560
2560
|
selector: 'pb-social',
|
|
2561
|
-
template: "<!--\n ~ Copyright (c) 2024 Pobuca.\n ~ All rights reserved.\n -->\n\n<div fxLayout [ngStyle]=\"getParentStyles()\">\n <div [class]=\"getSocialListClasses()\" [ngStyle]=\"getSocialListStyles()\">\n <ng-container *ngIf=\"block.networks.length; else noSocialNetworks\">\n <div class=\"social-list-item\" *ngFor=\"let network of block.networks\">\n <div [ngStyle]=\"getLabelStyles()\">\n <img [src]=\"getSocialNetworkIcon(network.name)\" [width]=\"block.options.iconSize.value\"\n [height]=\"block.options.iconSize.value\" [classList]=\"network.name\" [alt]=\"network.name\" />\n </div>\n <span *ngIf=\"network.label\">{{ network.label }}</span>\n </div>\n </ng-container>\n </div>\n</div>\n\n<ng-template #noSocialNetworks>\n <p i18n=\"social block|Empty social list message\">Please add some social networks.</p>\n</ng-template>\n",
|
|
2562
|
-
styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block}p{margin:0}.social-list{display:flex;width:100%;flex-wrap:wrap}.social-list.horizontal{flex-direction:row}.social-list.vertical{flex-direction:column}.social-list-item{display:flex;flex-direction:row;align-items:center}.social-list-item img{border-radius:3px
|
|
2561
|
+
template: "<!--\n ~ Copyright (c) 2024 Pobuca.\n ~ All rights reserved.\n -->\n\n<div fxLayout [ngStyle]=\"getParentStyles()\">\n <div [class]=\"getSocialListClasses()\" [ngStyle]=\"getSocialListStyles()\">\n <ng-container *ngIf=\"block.networks.length; else noSocialNetworks\">\n <div class=\"social-list-item\" *ngFor=\"let network of block.networks\">\n <div [ngStyle]=\"getLabelStyles()\">\n <img [src]=\"getSocialNetworkIcon(network.name)\" [style.backgroundColor]=\"block.options.color\" [width]=\"block.options.iconSize.value\"\n [height]=\"block.options.iconSize.value\" [classList]=\"network.name\" [alt]=\"network.name\" />\n </div>\n <span *ngIf=\"network.label\">{{ network.label }}</span>\n </div>\n </ng-container>\n </div>\n</div>\n\n<ng-template #noSocialNetworks>\n <p i18n=\"social block|Empty social list message\">Please add some social networks.</p>\n</ng-template>\n",
|
|
2562
|
+
styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */:host{display:block}p{margin:0}.social-list{display:flex;width:100%;flex-wrap:wrap}.social-list.horizontal{flex-direction:row}.social-list.vertical{flex-direction:column}.social-list-item{display:flex;flex-direction:row;align-items:center}.social-list-item img{border-radius:3px;background-color:#000}"]
|
|
2563
2563
|
},] }
|
|
2564
2564
|
];
|
|
2565
2565
|
|
|
@@ -3830,7 +3830,7 @@ BlockSettingsComponent.decorators = [
|
|
|
3830
3830
|
template: "<!--\n ~ Copyright (c) 2024 Pobuca.\n ~ All rights reserved.\n -->\n\n<ng-container *ngIf=\"block$ | async as currentBlock\">\n <mat-accordion>\n <mat-expansion-panel expanded *ngIf=\"hasProperty(currentBlock.options, 'font')\">\n <mat-expansion-panel-header i18n=\"settings|Font\">\n Font\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-color [options]=\"currentBlock.options\" key=\"color\"></pb-color>\n <pb-font-styles [font]=\"currentBlock.options.font\"></pb-font-styles>\n <pb-line-height *ngIf=\"currentBlock.type !== 'social'\" [lineHeight]=\"currentBlock.options.lineHeight\">\n </pb-line-height>\n </ng-template>\n </mat-expansion-panel>\n\n <ng-container *ngIf=\"currentBlock.type === 'image'\">\n <mat-expansion-panel expanded>\n <mat-expansion-panel-header i18n=\"settings|Image\">\n Image\n </mat-expansion-panel-header>\n <pb-image-upload [block]=\"currentBlock\"></pb-image-upload>\n </mat-expansion-panel>\n\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Image Attributes\">\n Attributes\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <div class=\"group f-large\">\n <mat-form-field appearance=\"outline\">\n <mat-label i18n=\"settings|Image Alt\">Alt</mat-label>\n <input matInput [(ngModel)]=\"currentBlock.options.title\" type=\"text\" i18n-placeholder\n placeholder=\"settings|Image Alt\" (input)=\"markForCheck()\" />\n </mat-form-field>\n <pb-align [model]=\"currentBlock.options\"></pb-align>\n </div>\n <pb-link [link]=\"currentBlock.options.link\"></pb-link>\n </ng-template>\n </mat-expansion-panel>\n </ng-container>\n\n <ng-container *ngIf=\"currentBlock.type === 'button'\">\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Button Text\">\n Button Text\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n <mat-label i18n=\"settings|Button Text\">Button Text</mat-label>\n <input matInput [(ngModel)]=\"currentBlock.innerText\" type=\"text\" i18n-placeholder\n placeholder=\"settings|Button Text\" (input)=\"markForCheck()\" />\n </mat-form-field>\n </ng-template>\n </mat-expansion-panel>\n\n\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Background\">\n Background\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-color [options]=\"currentBlock.options\"></pb-color>\n </ng-template>\n </mat-expansion-panel>\n\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Button Attributes\">\n Attributes\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <div class=\"group two\" style=\"padding-bottom: 0\">\n <pb-align [model]=\"currentBlock.options\" [disabled]=\"currentBlock.options.fullWidth\"></pb-align>\n <mat-slide-toggle style=\"margin-top: -24px\" [(ngModel)]=\"currentBlock.options.fullWidth\"\n (change)=\"markForCheck()\">\n <ng-container i18n=\"settings|Button Full Width\">Full Width</ng-container>\n </mat-slide-toggle>\n </div>\n <pb-link [link]=\"currentBlock.options.link\"></pb-link>\n <pb-padding [padding]=\"currentBlock.options.innerPadding\"></pb-padding>\n </ng-template>\n </mat-expansion-panel>\n </ng-container>\n\n <mat-expansion-panel [expanded]=\"currentBlock.type === 'spacer'\"\n *ngIf=\"hasProperty(currentBlock.options, 'width') || hasProperty(currentBlock.options, 'height')\">\n <mat-expansion-panel-header i18n=\"settings|Sizes\">\n Sizes\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-width-height *ngIf=\"hasProperty(currentBlock.options, 'width')\" [model]=\"currentBlock.options.width\"\n label=\"width\"></pb-width-height>\n <pb-width-height *ngIf=\"hasProperty(currentBlock.options, 'height')\" [model]=\"currentBlock.options.height\"\n label=\"height\"></pb-width-height>\n </ng-template>\n </mat-expansion-panel>\n\n <mat-expansion-panel *ngIf=\"hasProperty(currentBlock.options, 'background')\">\n <mat-expansion-panel-header i18n=\"settings|Background\">\n Background\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-color [options]=\"currentBlock.options.background\"></pb-color>\n </ng-template>\n backgroundColor\n </mat-expansion-panel>\n\n <mat-expansion-panel [expanded]=\"currentBlock.type === 'divider'\"\n *ngIf=\"hasProperty(currentBlock.options, 'border')\">\n <mat-expansion-panel-header>\n <ng-container i18n=\"settings|Divider Styles\" *ngIf=\"currentBlock.type === 'divider'\">Styles</ng-container>\n <ng-container i18n=\"settings|Border\" *ngIf=\"currentBlock.type !== 'divider'\">Border</ng-container>\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-border [border]=\"currentBlock.options.border\"></pb-border>\n </ng-template>\n </mat-expansion-panel>\n\n <ng-container *ngIf=\"currentBlock.type === 'social'\">\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Icons\">\n Icons\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <mat-form-field appearance=\"outline\" style=\"width: 100%\">\n <mat-label i18n=\"settings|Add new Network\">Add new Network</mat-label>\n <mat-select (selectionChange)=\"addSocialNetwork($event, currentBlock)\" [disabled]=\"!socialNetworks.length\">\n <mat-option style=\"text-transform: capitalize\" *ngFor=\"let link of socialNetworks(currentBlock)\"\n [value]=\"link\">\n {{ link }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </ng-template>\n </mat-expansion-panel>\n\n <mat-expansion-panel class=\"networks-list\" *ngFor=\"let network of currentBlock.networks\">\n <mat-expansion-panel-header style=\"text-transform: capitalize\">\n <img [class]=\"network.name\" [src]=\"getSocialIcon(network.name)\" [alt]=\"network.name\" />\n {{ network.name }}\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <div class=\"networks-list-item\">\n <div class=\"item-info\">\n <mat-form-field matLine appearance=\"outline\">\n <mat-label i18n=\"settings|Social Network Label\">Label</mat-label>\n <input matInput autocomplete=\"off\" [(ngModel)]=\"network.label\"\n i18n-placeholder=\"settings|Social Network Label\" placeholder=\"Label\" type=\"text\"\n (input)=\"markForCheck()\" />\n </mat-form-field>\n <button mat-stroked-button color=\"warn\" (click)=\"removeSocialNetwork(network, currentBlock)\">\n <mat-icon>delete_forever</mat-icon>\n </button>\n </div>\n <mat-form-field matLine appearance=\"outline\">\n <mat-label style=\"text-transform: capitalize\">\n {{ network.name }} <ng-container i18n=\"settings|Social Network Link\">Link</ng-container>\n </mat-label>\n <input autocomplete=\"off\" matInput [(ngModel)]=\"network.href\" type=\"url\" (input)=\"markForCheck()\" />\n </mat-form-field>\n </div>\n </ng-template>\n </mat-expansion-panel>\n\n <mat-expansion-panel>\n <mat-expansion-panel-header i18n=\"settings|Social Styles\">\n Styles\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <div class=\"group two\" style=\"padding-bottom: 0\">\n <mat-form-field appearance=\"outline\">\n <mat-label i18n=\"settings|Social Model\">Mode</mat-label>\n <mat-select (selectionChange)=\"markForCheck()\" i18n-placeholder=\"settings|Social Model\" placeholder=\"Mode\"\n [(value)]=\"currentBlock.options.mode\" disableRipple>\n <mat-option *ngFor=\"let mode of ['horizontal', 'vertical']\" [value]=\"mode\">\n {{ mode }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <pb-align [model]=\"currentBlock.options\"></pb-align>\n </div>\n <pb-line-height [units]=\"['px']\" [lineHeight]=\"currentBlock.options.iconSize\" label=\"Icon Size\">\n </pb-line-height>\n <pb-padding [padding]=\"currentBlock.options.innerPadding\"></pb-padding>\n </ng-template>\n </mat-expansion-panel>\n </ng-container>\n\n <mat-expansion-panel *ngIf=\"hasProperty(currentBlock.options, 'padding')\">\n <mat-expansion-panel-header i18n=\"settings|Padding\">\n Padding\n </mat-expansion-panel-header>\n <ng-template matExpansionPanelContent>\n <pb-padding [padding]=\"currentBlock.options.padding\"></pb-padding>\n </ng-template>\n </mat-expansion-panel>\n </mat-accordion>\n</ng-container>\n",
|
|
3831
3831
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3832
3832
|
encapsulation: ViewEncapsulation.None,
|
|
3833
|
-
styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */.networks-list mat-expansion-panel-header .mat-content{place-items:center}.networks-list mat-expansion-panel-header img{width:20px;margin:0 .5rem 0 0;border-radius:3px
|
|
3833
|
+
styles: ["/*!\n * Copyright (c) 2024 Pobuca.\n * All rights reserved.\n */.networks-list mat-expansion-panel-header .mat-content{place-items:center}.networks-list mat-expansion-panel-header img{width:20px;margin:0 .5rem 0 0;border-radius:3px;background-color:#000}.networks-list-item{width:100%;display:grid;row-gap:.5rem}.networks-list-item .item-info{display:grid;grid-template-columns:2fr 1fr;-moz-column-gap:.5rem;column-gap:.5rem}.networks-list-item .item-info button{align-self:baseline;margin:.25rem 0;height:50px}.networks-list-item .item-info ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}"]
|
|
3834
3834
|
},] }
|
|
3835
3835
|
];
|
|
3836
3836
|
BlockSettingsComponent.ctorParameters = () => [
|