@vendure/admin-ui 2.1.4 → 2.1.6
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/core/common/version.d.ts +1 -1
- package/core/components/app-shell/app-shell.component.d.ts +1 -0
- package/core/extension/register-route-component.d.ts +1 -1
- package/core/shared/components/order-state-label/order-state-label.component.d.ts +1 -1
- package/core/shared/dynamic-form-inputs/default-form-inputs.d.ts +1 -1
- package/esm2022/catalog/components/collection-detail/collection-detail.component.mjs +2 -2
- package/esm2022/catalog/components/product-detail/product-detail.component.mjs +2 -2
- package/esm2022/core/common/utilities/configurable-operation-utils.mjs +1 -1
- package/esm2022/core/common/version.mjs +2 -2
- package/esm2022/core/components/app-shell/app-shell.component.mjs +4 -3
- package/esm2022/core/shared/components/asset-preview/asset-preview.component.mjs +3 -3
- package/esm2022/core/shared/components/chart/chart.component.mjs +1 -1
- package/esm2022/core/shared/components/configurable-input/configurable-input.component.mjs +1 -1
- package/esm2022/core/shared/components/datetime-picker/datetime-picker.service.mjs +1 -1
- package/esm2022/core/shared/components/page-header-tabs/page-header-tabs.component.mjs +2 -2
- package/esm2022/login/components/login/login.component.mjs +4 -5
- package/esm2022/marketing/components/promotion-detail/promotion-detail.component.mjs +8 -8
- package/esm2022/order/components/order-payment-card/order-payment-card.component.mjs +2 -2
- package/esm2022/order/components/refund-order-dialog/refund-order-dialog.component.mjs +2 -2
- package/esm2022/react/react-hooks/use-form-control.mjs +1 -1
- package/esm2022/settings/components/payment-method-detail/payment-method-detail.component.mjs +8 -8
- package/esm2022/settings/settings.routes.mjs +4 -4
- package/fesm2022/vendure-admin-ui-catalog.mjs +3 -3
- package/fesm2022/vendure-admin-ui-catalog.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-core.mjs +8 -7
- package/fesm2022/vendure-admin-ui-core.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-login.mjs +2 -3
- package/fesm2022/vendure-admin-ui-login.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-marketing.mjs +7 -7
- package/fesm2022/vendure-admin-ui-marketing.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-order.mjs +3 -3
- package/fesm2022/vendure-admin-ui-order.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-react.mjs.map +1 -1
- package/fesm2022/vendure-admin-ui-settings.mjs +10 -10
- package/fesm2022/vendure-admin-ui-settings.mjs.map +1 -1
- package/login/components/login/login.component.d.ts +0 -1
- package/package.json +8 -8
- package/settings/components/stock-location-list/stock-location-list.component.d.ts +1 -1
- package/static/i18n-messages/en.json +3 -3
- package/static/i18n-messages/pt_BR.json +1 -1
- package/static/styles/global/_sass-overrides.scss +5 -0
- package/static/styles/theme/dark.scss +5 -4
- package/static/styles/theme/default.scss +7 -2
- package/static/theme.min.css +1 -1
|
@@ -7147,7 +7147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
|
|
|
7147
7147
|
}], ctorParameters: function () { return [{ type: AlertsService }]; } });
|
|
7148
7148
|
|
|
7149
7149
|
// Auto-generated by the set-version.js script.
|
|
7150
|
-
const ADMIN_UI_VERSION = '2.1.
|
|
7150
|
+
const ADMIN_UI_VERSION = '2.1.6';
|
|
7151
7151
|
|
|
7152
7152
|
/* eslint-disable @angular-eslint/directive-selector */
|
|
7153
7153
|
class FormFieldControlDirective {
|
|
@@ -9450,6 +9450,7 @@ class AppShellComponent {
|
|
|
9450
9450
|
this.version = ADMIN_UI_VERSION;
|
|
9451
9451
|
this.availableLanguages = [];
|
|
9452
9452
|
this.hideVendureBranding = getAppConfig().hideVendureBranding;
|
|
9453
|
+
this.hideVersion = getAppConfig().hideVersion;
|
|
9453
9454
|
this.devMode = isDevMode();
|
|
9454
9455
|
}
|
|
9455
9456
|
ngOnInit() {
|
|
@@ -9501,11 +9502,11 @@ class AppShellComponent {
|
|
|
9501
9502
|
});
|
|
9502
9503
|
}
|
|
9503
9504
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, deps: [{ token: AuthService }, { token: DataService }, { token: i1$1.Router }, { token: I18nService }, { token: ModalService }, { token: LocalStorageService }, { token: BreadcrumbService }, { token: LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9504
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n <div class=\"branding\">\r\n <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n /></a>\r\n <div class=\"collapse-menu\">\r\n <button class=\"\" (click)=\"collapseNav()\">\r\n <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"mx-4\">\r\n <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n </div>\r\n <div class=\"main-nav-container\">\r\n <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n </div>\r\n <div class=\"settings-nav-container\">\r\n <hr />\r\n <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n </div>\r\n <div class=\"mx-2\">\r\n <div *ngIf=\"
|
|
9505
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AppShellComponent, selector: "vdr-app-shell", ngImport: i0, template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n <div class=\"branding\">\r\n <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n /></a>\r\n <div class=\"collapse-menu\">\r\n <button class=\"\" (click)=\"collapseNav()\">\r\n <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"mx-4\">\r\n <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n </div>\r\n <div class=\"main-nav-container\">\r\n <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n </div>\r\n <div class=\"settings-nav-container\">\r\n <hr />\r\n <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n </div>\r\n <div class=\"mx-2 flex center mb-1\" [class.mt-2]=\"hideVersion && !devMode\">\r\n <div *ngIf=\"!hideVersion\" class=\"version\">\r\n v{{ version }}\r\n </div>\r\n <vdr-dropdown *ngIf=\"devMode\">\r\n <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\r\n <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\r\n </button>\r\n <vdr-dropdown-menu>\r\n <div class=\"px-2 py-1\">\r\n <div>Version: {{ version }}</div>\r\n <div>View UI extension points: <kbd>CTRL + U</kbd></div>\r\n </div>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </div>\r\n\r\n <div class=\"surface\">\r\n <div class=\"content-container\">\r\n <div class=\"top-bar\">\r\n <div class=\"expand-menu mr-1\">\r\n <button class=\"\" (click)=\"expandNav()\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"1.5\"\r\n stroke=\"currentColor\"\r\n class=\"bars\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n <div>\r\n <vdr-breadcrumb></vdr-breadcrumb>\r\n </div>\r\n <div class=\"universal-search flex-spacer\"></div>\r\n <div class=\"mx-1\">\r\n <vdr-alerts></vdr-alerts>\r\n </div>\r\n <div>\r\n <vdr-user-menu\r\n [userName]=\"userName$ | async\"\r\n [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n [availableLanguages]=\"availableLanguages\"\r\n (selectUiLanguage)=\"selectUiLanguage()\"\r\n (logOut)=\"logOut()\"\r\n ></vdr-user-menu>\r\n </div>\r\n </div>\r\n <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}.version{color:var(--color-grey-300)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0 -10px 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: UserMenuComponent, selector: "vdr-user-menu", inputs: ["userName", "availableLanguages", "uiLanguageAndLocale"], outputs: ["logOut", "selectUiLanguage"] }, { kind: "component", type: MainNavComponent, selector: "vdr-main-nav", inputs: ["displayMode"], outputs: ["itemClick"] }, { kind: "component", type: BreadcrumbComponent, selector: "vdr-breadcrumb" }, { kind: "component", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher" }, { kind: "component", type: AlertsComponent, selector: "vdr-alerts" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
|
|
9505
9506
|
}
|
|
9506
9507
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AppShellComponent, decorators: [{
|
|
9507
9508
|
type: Component,
|
|
9508
|
-
args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n <div class=\"branding\">\r\n <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n /></a>\r\n <div class=\"collapse-menu\">\r\n <button class=\"\" (click)=\"collapseNav()\">\r\n <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"mx-4\">\r\n <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n </div>\r\n <div class=\"main-nav-container\">\r\n <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n </div>\r\n <div class=\"settings-nav-container\">\r\n <hr />\r\n <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n </div>\r\n <div class=\"mx-2\">\r\n <div *ngIf=\"
|
|
9509
|
+
args: [{ selector: 'vdr-app-shell', template: "<div class=\"app-container\" [dir]=\"direction$ | async\">\r\n <div class=\"left-nav\" [class.expanded]=\"mainNavExpanded$ | async\">\r\n <div class=\"branding\">\r\n <a [routerLink]=\"['/']\" *ngIf=\"!hideVendureBranding\"\r\n ><img src=\"assets/logo-top.webp\" class=\"logo\" style=\"max-width: 100px\"\r\n /></a>\r\n <div class=\"collapse-menu\">\r\n <button class=\"\" (click)=\"collapseNav()\">\r\n <clr-icon shape=\"window-close\" size=\"24\"></clr-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"mx-4\">\r\n <vdr-channel-switcher *vdrIfMultichannel></vdr-channel-switcher>\r\n </div>\r\n <div class=\"main-nav-container\">\r\n <vdr-main-nav (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n </div>\r\n <div class=\"settings-nav-container\">\r\n <hr />\r\n <vdr-main-nav displayMode=\"settings\" (itemClick)=\"collapseNav()\"></vdr-main-nav>\r\n </div>\r\n <div class=\"mx-2 flex center mb-1\" [class.mt-2]=\"hideVersion && !devMode\">\r\n <div *ngIf=\"!hideVersion\" class=\"version\">\r\n v{{ version }}\r\n </div>\r\n <vdr-dropdown *ngIf=\"devMode\">\r\n <button class=\"icon-button dev-mode-button\" vdrDropdownTrigger title=\"DEV MODE\">\r\n <clr-icon shape=\"code\" size=\"24\"></clr-icon> DEV MODE\r\n </button>\r\n <vdr-dropdown-menu>\r\n <div class=\"px-2 py-1\">\r\n <div>Version: {{ version }}</div>\r\n <div>View UI extension points: <kbd>CTRL + U</kbd></div>\r\n </div>\r\n </vdr-dropdown-menu>\r\n </vdr-dropdown>\r\n </div>\r\n </div>\r\n\r\n <div class=\"surface\">\r\n <div class=\"content-container\">\r\n <div class=\"top-bar\">\r\n <div class=\"expand-menu mr-1\">\r\n <button class=\"\" (click)=\"expandNav()\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"1.5\"\r\n stroke=\"currentColor\"\r\n class=\"bars\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n <div>\r\n <vdr-breadcrumb></vdr-breadcrumb>\r\n </div>\r\n <div class=\"universal-search flex-spacer\"></div>\r\n <div class=\"mx-1\">\r\n <vdr-alerts></vdr-alerts>\r\n </div>\r\n <div>\r\n <vdr-user-menu\r\n [userName]=\"userName$ | async\"\r\n [uiLanguageAndLocale]=\"uiLanguageAndLocale$ | async\"\r\n [availableLanguages]=\"availableLanguages\"\r\n (selectUiLanguage)=\"selectUiLanguage()\"\r\n (logOut)=\"logOut()\"\r\n ></vdr-user-menu>\r\n </div>\r\n </div>\r\n <div class=\"content-area\"><router-outlet></router-outlet></div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".app-container{display:flex;height:100vh;overflow:hidden}.left-nav{background-color:var(--color-left-nav-bg);color:var(--color-left-nav-text);display:flex;flex-direction:column;overflow:hidden;height:100%;border-inline-end:1px solid var(--color-weight-150);z-index:2;width:var(--left-nav-width);max-width:var(--left-nav-width)}@media screen and (max-width: 992px){.left-nav.expanded{position:fixed;inset:0;width:100%;max-width:100%;animation:fade-in .2s ease-in-out forwards}}.version{color:var(--color-grey-300)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media screen and (min-width: 992px){.expand-menu,.collapse-menu{display:none}}.expand-menu button,.collapse-menu button{border:none;padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);background-color:var(--color-page-header-item-bg);border-radius:var(--border-radius-lg);color:var(--color-text-100);display:flex;align-items:center;justify-content:center}.expand-menu .bars,.collapse-menu .bars{width:24px;height:24px}.collapse-menu button{height:40px;background-color:var(--color-weight-200)}.main-nav-container{overflow:auto;flex:1}.settings-nav-container{margin:calc(var(--space-unit) * 3) 0 -10px 0}.settings-nav-container hr{margin:0 calc(var(--space-unit) * 4);margin-bottom:calc(var(--space-unit) * 4);border:1px solid var(--color-weight-150);box-shadow:0 1px 0 var(--color-weight-100)}.logo{max-width:100%}.wordmark{font-weight:700;margin-inline-start:12px;font-size:24px;color:var(--color-primary-500)}@media screen and (max-width: 992px){.wordmark{display:none}}.surface{display:flex;flex-direction:column;flex:1;background-color:var(--color-surface-bg)}.content-container{overflow:auto;min-height:100vh;display:flex;flex-direction:column}.branding{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);padding-inline-end:calc(var(--space-unit) * 1.5)}@media screen and (min-width: 992px){.branding{padding:calc(var(--space-unit) * 4)}}.top-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 1);background-color:var(--color-page-header)}@media screen and (min-width: 992px){.top-bar{padding:calc(var(--space-unit) * 4);padding-inline-start:var(--surface-margin-left)}}.header-actions{align-items:center}.content-area{position:relative;margin-inline-end:auto;flex:1;display:block;width:100%}.dev-mode-button{opacity:.7;font-size:12px}\n"] }]
|
|
9509
9510
|
}], ctorParameters: function () { return [{ type: AuthService }, { type: DataService }, { type: i1$1.Router }, { type: I18nService }, { type: ModalService }, { type: LocalStorageService }, { type: BreadcrumbService }, { type: LocalizationService }]; } });
|
|
9510
9511
|
|
|
9511
9512
|
class NotificationComponent {
|
|
@@ -14128,11 +14129,11 @@ class AssetPreviewComponent {
|
|
|
14128
14129
|
this.disablePreviousButton = this.assets?.[this.previewAssetIndex - 1]?.id ? false : true;
|
|
14129
14130
|
}
|
|
14130
14131
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i1$4.FormBuilder }, { token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14131
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", assets: "assets", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <div *ngIf=\"!editable\" class=\"mb-2\">\r\n <a\r\n class=\"button-ghost\"\r\n [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n (click)=\"editClick.emit()\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"form.get('name')\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n />\r\n </vdr-form-field>\r\n <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n <span class=\"elide\">\r\n {{ asset.name }}\r\n </span>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n getSourceFileName()\r\n }}</a>\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n {{ asset.fileSize | filesize }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n {{ asset.width }} x {{ asset.height }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n <span *ngIf=\"fpx\"\r\n ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n {{ fpy | number : '1.2-2' }}</span\r\n >\r\n <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n <div class=\"flex mt-1\">\r\n <button\r\n class=\"button-small mr-1\"\r\n [disabled]=\"settingFocalPoint\"\r\n (click)=\"setFocalPointStart()\"\r\n >\r\n <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n </button>\r\n <button\r\n class=\"button-small\"\r\n [disabled]=\"settingFocalPoint\"\r\n *ngIf=\"!!fpx\"\r\n (click)=\"removeFocalPoint()\"\r\n >\r\n {{ 'asset.unset-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n <ng-container *ngIf=\"editable\">\r\n <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n <clr-icon shape=\"tags\"></clr-icon>\r\n {{ 'common.manage-tags' | translate }}\r\n </button>\r\n </ng-container>\r\n <div *ngIf=\"!editable\">\r\n <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n {{ tag.value }}</vdr-chip\r\n >\r\n </div>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Asset\"\r\n [compact]=\"true\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"customFieldsForm\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-card [title]=\"'asset.preview' | translate\">\r\n <vdr-form-field>\r\n <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n <option value=\"tiny\">tiny</option>\r\n <option value=\"thumb\">thumb</option>\r\n <option value=\"small\">small</option>\r\n <option value=\"medium\">medium</option>\r\n <option value=\"large\">large</option>\r\n <option value=\"\">full size</option>\r\n </select>\r\n </vdr-form-field>\r\n <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <div class=\"carousel-container\">\r\n <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" [class.disabled]=\"disablePreviousButton\"><clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon\r\n ></button>\r\n <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n <div class=\"image-wrapper\">\r\n <vdr-focal-point-control\r\n [width]=\"width\"\r\n [height]=\"height\"\r\n [fpx]=\"fpx\"\r\n [fpy]=\"fpy\"\r\n [editable]=\"settingFocalPoint\"\r\n (focalPointChange)=\"onFocalPointChange($event)\"\r\n >\r\n <img\r\n class=\"asset-image\"\r\n [src]=\"asset | assetPreview : size\"\r\n [ngClass]=\"size\"\r\n #imageElement\r\n (load)=\"onImageLoad()\"\r\n />\r\n </vdr-focal-point-control>\r\n <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n <clr-icon shape=\"times\"></clr-icon>\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm\"\r\n (click)=\"setFocalPointEnd()\"\r\n [disabled]=\"!lastFocalPoint\"\r\n >\r\n <clr-icon shape=\"crosshairs\"></clr-icon>\r\n {{ 'asset.set-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" [class.disabled]=\"disableNextButton\"><clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon\r\n ></button>\r\n </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", assets: "assets", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <div *ngIf=\"!editable\" class=\"mb-2\">\r\n <a\r\n class=\"button-ghost\"\r\n [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n (click)=\"editClick.emit()\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"form.get('name')\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n />\r\n </vdr-form-field>\r\n <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n <span class=\"elide\">\r\n {{ asset.name }}\r\n </span>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n getSourceFileName()\r\n }}</a>\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n {{ asset.fileSize | filesize }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n {{ asset.width }} x {{ asset.height }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n <span *ngIf=\"fpx\"\r\n ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n {{ fpy | number : '1.2-2' }}</span\r\n >\r\n <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n <div class=\"flex mt-1\">\r\n <button\r\n class=\"button-small mr-1\"\r\n [disabled]=\"settingFocalPoint\"\r\n (click)=\"setFocalPointStart()\"\r\n >\r\n <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n </button>\r\n <button\r\n class=\"button-small\"\r\n [disabled]=\"settingFocalPoint\"\r\n *ngIf=\"!!fpx\"\r\n (click)=\"removeFocalPoint()\"\r\n >\r\n {{ 'asset.unset-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n <ng-container *ngIf=\"editable\">\r\n <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n <clr-icon shape=\"tags\"></clr-icon>\r\n {{ 'common.manage-tags' | translate }}\r\n </button>\r\n </ng-container>\r\n <div *ngIf=\"!editable\">\r\n <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n {{ tag.value }}</vdr-chip\r\n >\r\n </div>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Asset\"\r\n [compact]=\"true\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"customFieldsForm\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-card [title]=\"'asset.preview' | translate\">\r\n <vdr-form-field>\r\n <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n <option value=\"tiny\">tiny</option>\r\n <option value=\"thumb\">thumb</option>\r\n <option value=\"small\">small</option>\r\n <option value=\"medium\">medium</option>\r\n <option value=\"large\">large</option>\r\n <option value=\"\">full size</option>\r\n </select>\r\n </vdr-form-field>\r\n <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <div class=\"carousel-container\">\r\n <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" class=\"carousel-button\" [class.disabled]=\"disablePreviousButton\">\r\n <clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon>\r\n </button>\r\n <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n <div class=\"image-wrapper\">\r\n <vdr-focal-point-control\r\n [width]=\"width\"\r\n [height]=\"height\"\r\n [fpx]=\"fpx\"\r\n [fpy]=\"fpy\"\r\n [editable]=\"settingFocalPoint\"\r\n (focalPointChange)=\"onFocalPointChange($event)\"\r\n >\r\n <img\r\n class=\"asset-image\"\r\n [src]=\"asset | assetPreview : size\"\r\n [ngClass]=\"size\"\r\n #imageElement\r\n (load)=\"onImageLoad()\"\r\n />\r\n </vdr-focal-point-control>\r\n <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n <clr-icon shape=\"times\"></clr-icon>\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm\"\r\n (click)=\"setFocalPointEnd()\"\r\n [disabled]=\"!lastFocalPoint\"\r\n >\r\n <clr-icon shape=\"crosshairs\"></clr-icon>\r\n {{ 'asset.set-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" class=\"carousel-button\" [class.disabled]=\"disableNextButton\">\r\n <clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon>\r\n </button>\r\n </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button.carousel-button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button.carousel-button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14132
14133
|
}
|
|
14133
14134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetPreviewComponent, decorators: [{
|
|
14134
14135
|
type: Component,
|
|
14135
|
-
args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <div *ngIf=\"!editable\" class=\"mb-2\">\r\n <a\r\n class=\"button-ghost\"\r\n [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n (click)=\"editClick.emit()\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"form.get('name')\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n />\r\n </vdr-form-field>\r\n <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n <span class=\"elide\">\r\n {{ asset.name }}\r\n </span>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n getSourceFileName()\r\n }}</a>\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n {{ asset.fileSize | filesize }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n {{ asset.width }} x {{ asset.height }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n <span *ngIf=\"fpx\"\r\n ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n {{ fpy | number : '1.2-2' }}</span\r\n >\r\n <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n <div class=\"flex mt-1\">\r\n <button\r\n class=\"button-small mr-1\"\r\n [disabled]=\"settingFocalPoint\"\r\n (click)=\"setFocalPointStart()\"\r\n >\r\n <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n </button>\r\n <button\r\n class=\"button-small\"\r\n [disabled]=\"settingFocalPoint\"\r\n *ngIf=\"!!fpx\"\r\n (click)=\"removeFocalPoint()\"\r\n >\r\n {{ 'asset.unset-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n <ng-container *ngIf=\"editable\">\r\n <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n <clr-icon shape=\"tags\"></clr-icon>\r\n {{ 'common.manage-tags' | translate }}\r\n </button>\r\n </ng-container>\r\n <div *ngIf=\"!editable\">\r\n <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n {{ tag.value }}</vdr-chip\r\n >\r\n </div>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Asset\"\r\n [compact]=\"true\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"customFieldsForm\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-card [title]=\"'asset.preview' | translate\">\r\n <vdr-form-field>\r\n <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n <option value=\"tiny\">tiny</option>\r\n <option value=\"thumb\">thumb</option>\r\n <option value=\"small\">small</option>\r\n <option value=\"medium\">medium</option>\r\n <option value=\"large\">large</option>\r\n <option value=\"\">full size</option>\r\n </select>\r\n </vdr-form-field>\r\n <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <div class=\"carousel-container\">\r\n
|
|
14136
|
+
args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n <vdr-page-detail-sidebar>\r\n <vdr-card>\r\n <div *ngIf=\"!editable\" class=\"mb-2\">\r\n <a\r\n class=\"button-ghost\"\r\n [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n (click)=\"editClick.emit()\"\r\n >\r\n <clr-icon shape=\"edit\"></clr-icon>\r\n {{ 'common.edit' | translate }}\r\n <clr-icon shape=\"arrow right\"></clr-icon>\r\n </a>\r\n </div>\r\n <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n <input\r\n type=\"text\"\r\n [formControl]=\"form.get('name')\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n />\r\n </vdr-form-field>\r\n <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n <span class=\"elide\">\r\n {{ asset.name }}\r\n </span>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n getSourceFileName()\r\n }}</a>\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n {{ asset.fileSize | filesize }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n {{ asset.width }} x {{ asset.height }}\r\n </vdr-labeled-data>\r\n\r\n <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n <span *ngIf=\"fpx\"\r\n ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n {{ fpy | number : '1.2-2' }}</span\r\n >\r\n <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n <div class=\"flex mt-1\">\r\n <button\r\n class=\"button-small mr-1\"\r\n [disabled]=\"settingFocalPoint\"\r\n (click)=\"setFocalPointStart()\"\r\n >\r\n <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n </button>\r\n <button\r\n class=\"button-small\"\r\n [disabled]=\"settingFocalPoint\"\r\n *ngIf=\"!!fpx\"\r\n (click)=\"removeFocalPoint()\"\r\n >\r\n {{ 'asset.unset-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </vdr-labeled-data>\r\n <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n <ng-container *ngIf=\"editable\">\r\n <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n <clr-icon shape=\"tags\"></clr-icon>\r\n {{ 'common.manage-tags' | translate }}\r\n </button>\r\n </ng-container>\r\n <div *ngIf=\"!editable\">\r\n <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n {{ tag.value }}</vdr-chip\r\n >\r\n </div>\r\n </vdr-labeled-data>\r\n </vdr-card>\r\n <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n <vdr-tabbed-custom-fields\r\n entityName=\"Asset\"\r\n [compact]=\"true\"\r\n [customFields]=\"customFields\"\r\n [customFieldsFormGroup]=\"customFieldsForm\"\r\n [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n ></vdr-tabbed-custom-fields>\r\n </vdr-card>\r\n <vdr-card [title]=\"'asset.preview' | translate\">\r\n <vdr-form-field>\r\n <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n <option value=\"tiny\">tiny</option>\r\n <option value=\"thumb\">thumb</option>\r\n <option value=\"small\">small</option>\r\n <option value=\"medium\">medium</option>\r\n <option value=\"large\">large</option>\r\n <option value=\"\">full size</option>\r\n </select>\r\n </vdr-form-field>\r\n <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n </vdr-card>\r\n <vdr-card>\r\n <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n </vdr-card>\r\n </vdr-page-detail-sidebar>\r\n <div class=\"carousel-container\">\r\n <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" class=\"carousel-button\" [class.disabled]=\"disablePreviousButton\">\r\n <clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon>\r\n </button>\r\n <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n <div class=\"image-wrapper\">\r\n <vdr-focal-point-control\r\n [width]=\"width\"\r\n [height]=\"height\"\r\n [fpx]=\"fpx\"\r\n [fpy]=\"fpy\"\r\n [editable]=\"settingFocalPoint\"\r\n (focalPointChange)=\"onFocalPointChange($event)\"\r\n >\r\n <img\r\n class=\"asset-image\"\r\n [src]=\"asset | assetPreview : size\"\r\n [ngClass]=\"size\"\r\n #imageElement\r\n (load)=\"onImageLoad()\"\r\n />\r\n </vdr-focal-point-control>\r\n <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n <clr-icon shape=\"times\"></clr-icon>\r\n </button>\r\n <button\r\n class=\"btn btn-primary btn-sm\"\r\n (click)=\"setFocalPointEnd()\"\r\n [disabled]=\"!lastFocalPoint\"\r\n >\r\n <clr-icon shape=\"crosshairs\"></clr-icon>\r\n {{ 'asset.set-focal-point' | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <button *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" class=\"carousel-button\" [class.disabled]=\"disableNextButton\">\r\n <clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon>\r\n </button>\r\n </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-inline-start:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-inline-end:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button.carousel-button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button.carousel-button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"] }]
|
|
14136
14137
|
}], ctorParameters: function () { return [{ type: i1$4.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }]; }, propDecorators: { asset: [{
|
|
14137
14138
|
type: Input
|
|
14138
14139
|
}], assets: [{
|
|
@@ -18480,11 +18481,11 @@ class PageHeaderTabsComponent {
|
|
|
18480
18481
|
};
|
|
18481
18482
|
}
|
|
18482
18483
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PageHeaderTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18483
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: PageHeaderTabsComponent, selector: "vdr-page-header-tabs", inputs: { tabs: "tabs" }, ngImport: i0, template: "<div class=\"tab-bar\" *ngIf=\"tabs.length\">\r\n <a\r\n [routerLink]=\"tab.route\"\r\n class=\"tab\"\r\n *ngFor=\"let tab of tabs\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\r\n >\r\n <clr-icon *ngIf=\"tab.icon\" [attr.shape]=\"tab.icon\"></clr-icon>\r\n {{ tab.label | translate }}\r\n </a>\r\n</div>\r\n", styles: [":host{display:block;margin-top:calc(var(--space-unit) * 2)}.tab-bar{display:flex}.tab{padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-bottom:1px solid var(--color-weight-300);margin-bottom:-1px;color:var(--color-weight-700);cursor:pointer}.tab.active{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: PageHeaderTabsComponent, selector: "vdr-page-header-tabs", inputs: { tabs: "tabs" }, ngImport: i0, template: "<div class=\"tab-bar\" *ngIf=\"tabs.length\">\r\n <a\r\n [routerLink]=\"tab.route\"\r\n class=\"tab\"\r\n *ngFor=\"let tab of tabs\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\r\n >\r\n <clr-icon *ngIf=\"tab.icon\" [attr.shape]=\"tab.icon\"></clr-icon>\r\n {{ tab.label | translate }}\r\n </a>\r\n</div>\r\n", styles: [":host{display:block;margin-top:calc(var(--space-unit) * 2)}.tab-bar{display:flex}.tab-bar a:hover{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}.tab{padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-bottom:1px solid var(--color-weight-300);margin-bottom:-1px;color:var(--color-weight-700);cursor:pointer}.tab.active{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}\n"], dependencies: [{ kind: "directive", type: i1$3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18484
18485
|
}
|
|
18485
18486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: PageHeaderTabsComponent, decorators: [{
|
|
18486
18487
|
type: Component,
|
|
18487
|
-
args: [{ selector: 'vdr-page-header-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-bar\" *ngIf=\"tabs.length\">\r\n <a\r\n [routerLink]=\"tab.route\"\r\n class=\"tab\"\r\n *ngFor=\"let tab of tabs\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\r\n >\r\n <clr-icon *ngIf=\"tab.icon\" [attr.shape]=\"tab.icon\"></clr-icon>\r\n {{ tab.label | translate }}\r\n </a>\r\n</div>\r\n", styles: [":host{display:block;margin-top:calc(var(--space-unit) * 2)}.tab-bar{display:flex}.tab{padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-bottom:1px solid var(--color-weight-300);margin-bottom:-1px;color:var(--color-weight-700);cursor:pointer}.tab.active{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}\n"] }]
|
|
18488
|
+
args: [{ selector: 'vdr-page-header-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tab-bar\" *ngIf=\"tabs.length\">\r\n <a\r\n [routerLink]=\"tab.route\"\r\n class=\"tab\"\r\n *ngFor=\"let tab of tabs\"\r\n routerLinkActive=\"active\"\r\n [routerLinkActiveOptions]=\"routerLinkActiveOptions\"\r\n >\r\n <clr-icon *ngIf=\"tab.icon\" [attr.shape]=\"tab.icon\"></clr-icon>\r\n {{ tab.label | translate }}\r\n </a>\r\n</div>\r\n", styles: [":host{display:block;margin-top:calc(var(--space-unit) * 2)}.tab-bar{display:flex}.tab-bar a:hover{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}.tab{padding:calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);border-bottom:1px solid var(--color-weight-300);margin-bottom:-1px;color:var(--color-weight-700);cursor:pointer}.tab.active{color:var(--color-text-active);border-bottom-color:var(--color-text-active)}\n"] }]
|
|
18488
18489
|
}], propDecorators: { tabs: [{
|
|
18489
18490
|
type: Input
|
|
18490
18491
|
}] } });
|