@seniorsistemas/angular-components 19.7.5 → 19.7.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/chips/README.md +3 -2
- package/chips/lib/chips/chip-item/chip-item.component.d.ts +2 -0
- package/chips/lib/chips/chips/chips.component.d.ts +2 -1
- package/datepicker/README.md +15 -2
- package/datepicker/lib/datepicker/date-segment-input.d.ts +82 -0
- package/datepicker/lib/datepicker/date.utils.d.ts +3 -7
- package/datepicker/lib/datepicker/datepicker.component.d.ts +101 -8
- package/esm2022/chips/lib/chips/chip-item/chip-item.component.mjs +15 -4
- package/esm2022/chips/lib/chips/chips/chips.component.mjs +26 -14
- package/esm2022/datepicker/lib/datepicker/date-segment-input.mjs +418 -0
- package/esm2022/datepicker/lib/datepicker/date.utils.mjs +7 -79
- package/esm2022/datepicker/lib/datepicker/datepicker.component.mjs +451 -41
- package/esm2022/sidebar/lib/sidebar/sidebar.component.mjs +8 -6
- package/esm2022/thumbnail/lib/thumbnail/thumbnail.component.mjs +3 -3
- package/fesm2022/seniorsistemas-angular-components-chips.mjs +39 -16
- package/fesm2022/seniorsistemas-angular-components-chips.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-datepicker.mjs +873 -118
- package/fesm2022/seniorsistemas-angular-components-datepicker.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-sidebar.mjs +7 -5
- package/fesm2022/seniorsistemas-angular-components-sidebar.mjs.map +1 -1
- package/fesm2022/seniorsistemas-angular-components-thumbnail.mjs +2 -2
- package/fesm2022/seniorsistemas-angular-components-thumbnail.mjs.map +1 -1
- package/package.json +1 -1
- package/sidebar/lib/sidebar/sidebar.component.d.ts +3 -1
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
2
|
+
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
3
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
2
4
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { model, effect, Component, ContentChildren, Input, NgModule } from '@angular/core';
|
|
5
|
+
import { model, contentChild, effect, Component, ContentChildren, Input, NgModule } from '@angular/core';
|
|
6
|
+
import { FooterComponent } from '@seniorsistemas/angular-components/structure';
|
|
4
7
|
import { TemplateDirective, TemplateModule } from '@seniorsistemas/angular-components/template';
|
|
5
8
|
import { disableScroll, enableScroll } from '@seniorsistemas/angular-components/utils';
|
|
6
|
-
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
7
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* @description Componente de painel lateral deslizante (sidebar) que aparece sobre o conteúdo
|
|
@@ -74,6 +75,7 @@ class SidebarComponent {
|
|
|
74
75
|
headerTemplate = null;
|
|
75
76
|
bodyTemplate = null;
|
|
76
77
|
footerTemplate = null;
|
|
78
|
+
footerComponent = contentChild(FooterComponent);
|
|
77
79
|
_confirmClose = () => true;
|
|
78
80
|
visibleEffect = effect(() => {
|
|
79
81
|
const visible = this.visible();
|
|
@@ -118,7 +120,7 @@ class SidebarComponent {
|
|
|
118
120
|
this.footerTemplate = this.getFooterTemplate();
|
|
119
121
|
}
|
|
120
122
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SidebarComponent, isStandalone: true, selector: "s-sidebar", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: false, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, largeSized: { classPropertyName: "largeSized", publicName: "largeSized", isSignal: false, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "cache", isSignal: false, isRequired: false, transformFunction: null }, registerConfirmClose: { classPropertyName: "registerConfirmClose", publicName: "registerConfirmClose", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { listeners: { "document:keydown.escape": "handleEscape()" } }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "@if (visible()) {\n <div\n class=\"backdrop\"\n (click)=\"dismissible && closeSidebar()\"\n ></div>\n}\n\n@if (cache || visible()) {\n <div\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"visible()\"\n [@visibilityChanged]\n class=\"sidebar\"\n [class.sidebar--open]=\"visible()\"\n [class.sidebar--large-size]=\"largeSized\"\n >\n <div class=\"sidebar__header\">\n @if (headerTemplate) {\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n } @else {\n <span class=\"sidebar__header__title\">{{ header }}</span>\n }\n @if (closable) {\n <button\n class=\"sidebar__header__close fa-solid fa-xmark\"\n (click)=\"closeSidebar()\"\n ></button>\n }\n </div>\n <div class=\"sidebar__body\">\n @if (bodyTemplate) {\n <ng-template [ngTemplateOutlet]=\"bodyTemplate\"></ng-template>\n } @else {\n <ng-content></ng-content>\n }\n </div>\n @if (footerTemplate) {\n <div class=\"sidebar__footer\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n </div>\n }\n </div>\n}\n", styles: [".backdrop{background-color:#00000080;height:100%;left:0;position:fixed;top:0;transition:opacity .3s;width:100%;z-index:998}.sidebar{background-color:#fff;box-shadow:0 1px 5px #00000040;display:flex;flex-direction:column;height:100%;right:-100%;padding:1rem;position:fixed;top:0;transition:right .3s;width:100%;z-index:999}.sidebar__header{border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding-bottom:.75rem}.sidebar__header__title{color:#212533;font-family:Inter,sans-serif;font-size:1rem;text-transform:uppercase;-webkit-user-select:none;user-select:none}.sidebar__header__close{background-color:transparent;border:none;color:#212533;cursor:pointer;font-size:1rem;padding:.5rem}.sidebar__body{flex-grow:1;overflow:auto;padding:1rem .5rem}.sidebar__footer{border-top:1px solid #dedce5;padding-top:.75rem}.sidebar--open{right:0}@media (min-width: 768px){.sidebar{width:75%}}@media (min-width: 992px){.sidebar{width:50%}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
123
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SidebarComponent, isStandalone: true, selector: "s-sidebar", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: false, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: false, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: false, isRequired: false, transformFunction: null }, largeSized: { classPropertyName: "largeSized", publicName: "largeSized", isSignal: false, isRequired: false, transformFunction: null }, cache: { classPropertyName: "cache", publicName: "cache", isSignal: false, isRequired: false, transformFunction: null }, registerConfirmClose: { classPropertyName: "registerConfirmClose", publicName: "registerConfirmClose", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange" }, host: { listeners: { "document:keydown.escape": "handleEscape()" } }, queries: [{ propertyName: "footerComponent", first: true, predicate: FooterComponent, descendants: true, isSignal: true }, { propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "@if (visible()) {\n <div\n class=\"backdrop\"\n (click)=\"dismissible && closeSidebar()\"\n ></div>\n}\n\n@if (cache || visible()) {\n <div\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"visible()\"\n [@visibilityChanged]\n class=\"sidebar\"\n [class.sidebar--open]=\"visible()\"\n [class.sidebar--large-size]=\"largeSized\"\n >\n <div class=\"sidebar__header\">\n @if (headerTemplate) {\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n } @else {\n <span class=\"sidebar__header__title\">{{ header }}</span>\n }\n @if (closable) {\n <button\n class=\"sidebar__header__close fa-solid fa-xmark\"\n (click)=\"closeSidebar()\"\n ></button>\n }\n </div>\n <div class=\"sidebar__body\">\n @if (bodyTemplate) {\n <ng-template [ngTemplateOutlet]=\"bodyTemplate\"></ng-template>\n } @else {\n <ng-content select=\":not(s-footer)\"></ng-content>\n }\n </div>\n @if (footerTemplate || footerComponent()) {\n <div class=\"sidebar__footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n <ng-content select=\"s-footer\"></ng-content>\n }\n </div>\n }\n </div>\n}\n\n", styles: [".backdrop{background-color:#00000080;height:100%;left:0;position:fixed;top:0;transition:opacity .3s;width:100%;z-index:998}.sidebar{background-color:#fff;box-shadow:0 1px 5px #00000040;display:flex;flex-direction:column;height:100%;right:-100%;padding:1rem;position:fixed;top:0;transition:right .3s;width:100%;z-index:999}.sidebar__header{border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding-bottom:.75rem}.sidebar__header__title{color:#212533;font-family:Inter,sans-serif;font-size:1rem;text-transform:uppercase;-webkit-user-select:none;user-select:none}.sidebar__header__close{background-color:transparent;border:none;color:#212533;cursor:pointer;font-size:1rem;padding:.5rem}.sidebar__body{flex-grow:1;overflow:auto;padding:1rem .5rem}.sidebar__footer{border-top:1px solid #dedce5;padding-top:.75rem}.sidebar--open{right:0}@media (min-width: 768px){.sidebar{width:75%}}@media (min-width: 992px){.sidebar{width:50%}}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
122
124
|
trigger('visibilityChanged', [
|
|
123
125
|
transition(':enter', [
|
|
124
126
|
style({ transform: 'translateX(100%)' }),
|
|
@@ -146,7 +148,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
146
148
|
animate('300ms', style({ transform: 'translateX(100%)' })),
|
|
147
149
|
]),
|
|
148
150
|
]),
|
|
149
|
-
], standalone: true, imports: [CdkTrapFocus, NgTemplateOutlet], template: "@if (visible()) {\n <div\n class=\"backdrop\"\n (click)=\"dismissible && closeSidebar()\"\n ></div>\n}\n\n@if (cache || visible()) {\n <div\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"visible()\"\n [@visibilityChanged]\n class=\"sidebar\"\n [class.sidebar--open]=\"visible()\"\n [class.sidebar--large-size]=\"largeSized\"\n >\n <div class=\"sidebar__header\">\n @if (headerTemplate) {\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n } @else {\n <span class=\"sidebar__header__title\">{{ header }}</span>\n }\n @if (closable) {\n <button\n class=\"sidebar__header__close fa-solid fa-xmark\"\n (click)=\"closeSidebar()\"\n ></button>\n }\n </div>\n <div class=\"sidebar__body\">\n @if (bodyTemplate) {\n <ng-template [ngTemplateOutlet]=\"bodyTemplate\"></ng-template>\n } @else {\n <ng-content></ng-content>\n }\n </div>\n @if (footerTemplate) {\n <div class=\"sidebar__footer\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n </div>\n }\n </div>\n}\n", styles: [".backdrop{background-color:#00000080;height:100%;left:0;position:fixed;top:0;transition:opacity .3s;width:100%;z-index:998}.sidebar{background-color:#fff;box-shadow:0 1px 5px #00000040;display:flex;flex-direction:column;height:100%;right:-100%;padding:1rem;position:fixed;top:0;transition:right .3s;width:100%;z-index:999}.sidebar__header{border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding-bottom:.75rem}.sidebar__header__title{color:#212533;font-family:Inter,sans-serif;font-size:1rem;text-transform:uppercase;-webkit-user-select:none;user-select:none}.sidebar__header__close{background-color:transparent;border:none;color:#212533;cursor:pointer;font-size:1rem;padding:.5rem}.sidebar__body{flex-grow:1;overflow:auto;padding:1rem .5rem}.sidebar__footer{border-top:1px solid #dedce5;padding-top:.75rem}.sidebar--open{right:0}@media (min-width: 768px){.sidebar{width:75%}}@media (min-width: 992px){.sidebar{width:50%}}\n"] }]
|
|
151
|
+
], standalone: true, imports: [CdkTrapFocus, NgTemplateOutlet], template: "@if (visible()) {\n <div\n class=\"backdrop\"\n (click)=\"dismissible && closeSidebar()\"\n ></div>\n}\n\n@if (cache || visible()) {\n <div\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"visible()\"\n [@visibilityChanged]\n class=\"sidebar\"\n [class.sidebar--open]=\"visible()\"\n [class.sidebar--large-size]=\"largeSized\"\n >\n <div class=\"sidebar__header\">\n @if (headerTemplate) {\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n } @else {\n <span class=\"sidebar__header__title\">{{ header }}</span>\n }\n @if (closable) {\n <button\n class=\"sidebar__header__close fa-solid fa-xmark\"\n (click)=\"closeSidebar()\"\n ></button>\n }\n </div>\n <div class=\"sidebar__body\">\n @if (bodyTemplate) {\n <ng-template [ngTemplateOutlet]=\"bodyTemplate\"></ng-template>\n } @else {\n <ng-content select=\":not(s-footer)\"></ng-content>\n }\n </div>\n @if (footerTemplate || footerComponent()) {\n <div class=\"sidebar__footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n <ng-content select=\"s-footer\"></ng-content>\n }\n </div>\n }\n </div>\n}\n\n", styles: [".backdrop{background-color:#00000080;height:100%;left:0;position:fixed;top:0;transition:opacity .3s;width:100%;z-index:998}.sidebar{background-color:#fff;box-shadow:0 1px 5px #00000040;display:flex;flex-direction:column;height:100%;right:-100%;padding:1rem;position:fixed;top:0;transition:right .3s;width:100%;z-index:999}.sidebar__header{border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding-bottom:.75rem}.sidebar__header__title{color:#212533;font-family:Inter,sans-serif;font-size:1rem;text-transform:uppercase;-webkit-user-select:none;user-select:none}.sidebar__header__close{background-color:transparent;border:none;color:#212533;cursor:pointer;font-size:1rem;padding:.5rem}.sidebar__body{flex-grow:1;overflow:auto;padding:1rem .5rem}.sidebar__footer{border-top:1px solid #dedce5;padding-top:.75rem}.sidebar--open{right:0}@media (min-width: 768px){.sidebar{width:75%}}@media (min-width: 992px){.sidebar{width:50%}}\n"] }]
|
|
150
152
|
}], propDecorators: { templates: [{
|
|
151
153
|
type: ContentChildren,
|
|
152
154
|
args: [TemplateDirective]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seniorsistemas-angular-components-sidebar.mjs","sources":["../../projects/angular-components/sidebar/src/lib/sidebar/sidebar.component.ts","../../projects/angular-components/sidebar/src/lib/sidebar/sidebar.component.html","../../projects/angular-components/sidebar/src/lib/sidebar/sidebar.module.ts","../../projects/angular-components/sidebar/src/seniorsistemas-angular-components-sidebar.ts"],"sourcesContent":["import { animate, style, transition, trigger } from '@angular/animations';\r\nimport {\r\n AfterContentInit,\r\n Component,\r\n ContentChildren,\r\n effect,\r\n Input,\r\n model,\r\n OnDestroy,\r\n QueryList,\r\n TemplateRef,\r\n} from '@angular/core';\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { disableScroll, enableScroll } from '@seniorsistemas/angular-components/utils';\r\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\n/**\r\n * @description Componente de painel lateral deslizante (sidebar) que aparece sobre o conteúdo\r\n * vindo do lado direito da tela. Suporta templates customizados para cabeçalho, corpo e rodapé\r\n * via `sTemplate`, bloqueio de scroll automático e confirmação de fechamento.\r\n *\r\n * @example\r\n * ```html\r\n * <s-sidebar [(visible)]=\"sidebarOpen\" header=\"Filtros\" [closable]=\"true\">\r\n * <ng-template sTemplate=\"body\">Conteúdo</ng-template>\r\n * </s-sidebar>\r\n * ```\r\n *\r\n * @category Overlay\r\n */\r\n@Component({\r\n selector: 's-sidebar',\r\n templateUrl: './sidebar.component.html',\r\n styleUrls: ['./sidebar.component.scss'],\r\n host: {\r\n '(document:keydown.escape)': 'handleEscape()',\r\n },\r\n animations: [\r\n trigger('visibilityChanged', [\r\n transition(':enter', [\r\n style({ transform: 'translateX(100%)' }),\r\n animate('300ms', style({ transform: 'translateX(0)' })),\r\n ]),\r\n transition(':leave', [\r\n style({ transform: 'translateX(0)' }),\r\n animate('300ms', style({ transform: 'translateX(100%)' })),\r\n ]),\r\n ]),\r\n ],\r\n standalone: true,\r\n imports: [CdkTrapFocus, NgTemplateOutlet],\r\n})\r\nexport class SidebarComponent implements AfterContentInit, OnDestroy {\r\n @ContentChildren(TemplateDirective)\r\n public templates: QueryList<TemplateDirective> | null = null;\r\n\r\n /**\r\n * @description Controla a visibilidade da sidebar. Suporta two-way binding via `[(visible)]`.\r\n *\r\n * @default false\r\n */\r\n public visible = model<boolean>(false);\r\n\r\n /**\r\n * @description Quando `true`, exibe o botão de fechar (X) no cabeçalho da sidebar.\r\n *\r\n * @default true\r\n */\r\n @Input()\r\n public closable = true;\r\n\r\n /**\r\n * @description Quando `true`, clicar no backdrop (área escurecida fora da sidebar) fecha o painel.\r\n *\r\n * @default true\r\n */\r\n @Input()\r\n public dismissible = true;\r\n\r\n /**\r\n * @description Quando `true`, pressionar a tecla Escape fecha a sidebar.\r\n *\r\n * @default true\r\n */\r\n @Input()\r\n public closeOnEscape = true;\r\n\r\n /**\r\n * @description Texto exibido no cabeçalho padrão da sidebar.\r\n * Pode ser substituído por um template customizado via `sTemplate=\"header\"`.\r\n */\r\n @Input()\r\n public header?: string;\r\n\r\n /**\r\n * @description Quando `true`, aumenta a largura da sidebar para acomodar mais conteúdo.\r\n *\r\n * @default false\r\n */\r\n @Input()\r\n public largeSized = false;\r\n\r\n /**\r\n * @description Quando `true`, mantém o conteúdo da sidebar no DOM mesmo quando oculta,\r\n * preservando o estado interno dos componentes filhos.\r\n *\r\n * @default false\r\n */\r\n @Input()\r\n public cache = false;\r\n\r\n /**\r\n * @description Função de confirmação chamada antes de fechar a sidebar.\r\n * Quando retornar `false`, o fechamento é bloqueado. Útil para validar formulários não salvos.\r\n */\r\n @Input()\r\n public set registerConfirmClose(fn: () => boolean) {\r\n this._confirmClose = fn;\r\n }\r\n\r\n public headerTemplate: TemplateRef<unknown> | null = null;\r\n public bodyTemplate: TemplateRef<unknown> | null = null;\r\n public footerTemplate: TemplateRef<unknown> | null = null;\r\n\r\n private _confirmClose = () => true;\r\n\r\n private readonly visibleEffect = effect(() => {\r\n const visible = this.visible();\r\n if (visible) {\r\n disableScroll();\r\n } else {\r\n enableScroll();\r\n }\r\n });\r\n\r\n public ngAfterContentInit(): void {\r\n this._getTemplates();\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n this.visibleEffect.destroy();\r\n }\r\n\r\n public closeSidebar(): void {\r\n if (this._confirmClose()) {\r\n this.visible.set(false);\r\n }\r\n }\r\n\r\n public handleEscape(): void {\r\n if (this.closeOnEscape) {\r\n this.closeSidebar();\r\n }\r\n }\r\n\r\n private _getCustomTemplate(type: string): TemplateRef<any> | null {\r\n return this.templates?.find((template: TemplateDirective) => template.type === type)?.template ?? null;\r\n }\r\n\r\n private getHeaderTemplate(): TemplateRef<unknown> | null {\r\n return this._getCustomTemplate('header') ?? null;\r\n }\r\n\r\n private getBodyTemplate(): TemplateRef<unknown> | null {\r\n return this._getCustomTemplate('body') ?? null;\r\n }\r\n\r\n private getFooterTemplate(): TemplateRef<unknown> | null {\r\n return this._getCustomTemplate('footer') ?? null;\r\n }\r\n\r\n private _getTemplates(): void {\r\n this.headerTemplate = this.getHeaderTemplate();\r\n this.bodyTemplate = this.getBodyTemplate();\r\n this.footerTemplate = this.getFooterTemplate();\r\n }\r\n}\r\n","@if (visible()) {\n <div\n class=\"backdrop\"\n (click)=\"dismissible && closeSidebar()\"\n ></div>\n}\n\n@if (cache || visible()) {\n <div\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"visible()\"\n [@visibilityChanged]\n class=\"sidebar\"\n [class.sidebar--open]=\"visible()\"\n [class.sidebar--large-size]=\"largeSized\"\n >\n <div class=\"sidebar__header\">\n @if (headerTemplate) {\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n } @else {\n <span class=\"sidebar__header__title\">{{ header }}</span>\n }\n @if (closable) {\n <button\n class=\"sidebar__header__close fa-solid fa-xmark\"\n (click)=\"closeSidebar()\"\n ></button>\n }\n </div>\n <div class=\"sidebar__body\">\n @if (bodyTemplate) {\n <ng-template [ngTemplateOutlet]=\"bodyTemplate\"></ng-template>\n } @else {\n <ng-content></ng-content>\n }\n </div>\n @if (footerTemplate) {\n <div class=\"sidebar__footer\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n </div>\n }\n </div>\n}\n","import { NgModule } from '@angular/core';\r\n\r\nimport { SidebarComponent } from './sidebar.component';\r\nimport { TemplateModule } from '@seniorsistemas/angular-components/template';\r\n\r\n@NgModule({\r\n imports: [SidebarComponent],\r\n exports: [SidebarComponent, TemplateModule],\r\n})\r\nexport class SidebarModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"seniorsistemas-angular-components-sidebar.mjs","sources":["../../projects/angular-components/sidebar/src/lib/sidebar/sidebar.component.ts","../../projects/angular-components/sidebar/src/lib/sidebar/sidebar.component.html","../../projects/angular-components/sidebar/src/lib/sidebar/sidebar.module.ts","../../projects/angular-components/sidebar/src/seniorsistemas-angular-components-sidebar.ts"],"sourcesContent":["import { animate, style, transition, trigger } from '@angular/animations';\r\nimport { CdkTrapFocus } from '@angular/cdk/a11y';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n AfterContentInit,\r\n Component,\r\n contentChild,\r\n ContentChildren,\r\n effect,\r\n Input,\r\n model,\r\n OnDestroy,\r\n QueryList,\r\n TemplateRef,\r\n} from '@angular/core';\r\nimport { FooterComponent } from '@seniorsistemas/angular-components/structure';\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { disableScroll, enableScroll } from '@seniorsistemas/angular-components/utils';\r\n\r\n/**\r\n * @description Componente de painel lateral deslizante (sidebar) que aparece sobre o conteúdo\r\n * vindo do lado direito da tela. Suporta templates customizados para cabeçalho, corpo e rodapé\r\n * via `sTemplate`, bloqueio de scroll automático e confirmação de fechamento.\r\n *\r\n * @example\r\n * ```html\r\n * <s-sidebar [(visible)]=\"sidebarOpen\" header=\"Filtros\" [closable]=\"true\">\r\n * <ng-template sTemplate=\"body\">Conteúdo</ng-template>\r\n * </s-sidebar>\r\n * ```\r\n *\r\n * @category Overlay\r\n */\r\n@Component({\r\n selector: 's-sidebar',\r\n templateUrl: './sidebar.component.html',\r\n styleUrls: ['./sidebar.component.scss'],\r\n host: {\r\n '(document:keydown.escape)': 'handleEscape()',\r\n },\r\n animations: [\r\n trigger('visibilityChanged', [\r\n transition(':enter', [\r\n style({ transform: 'translateX(100%)' }),\r\n animate('300ms', style({ transform: 'translateX(0)' })),\r\n ]),\r\n transition(':leave', [\r\n style({ transform: 'translateX(0)' }),\r\n animate('300ms', style({ transform: 'translateX(100%)' })),\r\n ]),\r\n ]),\r\n ],\r\n standalone: true,\r\n imports: [CdkTrapFocus, NgTemplateOutlet],\r\n})\r\nexport class SidebarComponent implements AfterContentInit, OnDestroy {\r\n @ContentChildren(TemplateDirective)\r\n public templates: QueryList<TemplateDirective> | null = null;\r\n\r\n /**\r\n * @description Controla a visibilidade da sidebar. Suporta two-way binding via `[(visible)]`.\r\n *\r\n * @default false\r\n */\r\n public visible = model<boolean>(false);\r\n\r\n /**\r\n * @description Quando `true`, exibe o botão de fechar (X) no cabeçalho da sidebar.\r\n *\r\n * @default true\r\n */\r\n @Input()\r\n public closable = true;\r\n\r\n /**\r\n * @description Quando `true`, clicar no backdrop (área escurecida fora da sidebar) fecha o painel.\r\n *\r\n * @default true\r\n */\r\n @Input()\r\n public dismissible = true;\r\n\r\n /**\r\n * @description Quando `true`, pressionar a tecla Escape fecha a sidebar.\r\n *\r\n * @default true\r\n */\r\n @Input()\r\n public closeOnEscape = true;\r\n\r\n /**\r\n * @description Texto exibido no cabeçalho padrão da sidebar.\r\n * Pode ser substituído por um template customizado via `sTemplate=\"header\"`.\r\n */\r\n @Input()\r\n public header?: string;\r\n\r\n /**\r\n * @description Quando `true`, aumenta a largura da sidebar para acomodar mais conteúdo.\r\n *\r\n * @default false\r\n */\r\n @Input()\r\n public largeSized = false;\r\n\r\n /**\r\n * @description Quando `true`, mantém o conteúdo da sidebar no DOM mesmo quando oculta,\r\n * preservando o estado interno dos componentes filhos.\r\n *\r\n * @default false\r\n */\r\n @Input()\r\n public cache = false;\r\n\r\n /**\r\n * @description Função de confirmação chamada antes de fechar a sidebar.\r\n * Quando retornar `false`, o fechamento é bloqueado. Útil para validar formulários não salvos.\r\n */\r\n @Input()\r\n public set registerConfirmClose(fn: () => boolean) {\r\n this._confirmClose = fn;\r\n }\r\n\r\n public headerTemplate: TemplateRef<unknown> | null = null;\r\n public bodyTemplate: TemplateRef<unknown> | null = null;\r\n public footerTemplate: TemplateRef<unknown> | null = null;\r\n\r\n protected readonly footerComponent = contentChild(FooterComponent);\r\n\r\n private _confirmClose = () => true;\r\n\r\n private readonly visibleEffect = effect(() => {\r\n const visible = this.visible();\r\n if (visible) {\r\n disableScroll();\r\n } else {\r\n enableScroll();\r\n }\r\n });\r\n\r\n public ngAfterContentInit(): void {\r\n this._getTemplates();\r\n }\r\n\r\n public ngOnDestroy(): void {\r\n this.visibleEffect.destroy();\r\n }\r\n\r\n public closeSidebar(): void {\r\n if (this._confirmClose()) {\r\n this.visible.set(false);\r\n }\r\n }\r\n\r\n public handleEscape(): void {\r\n if (this.closeOnEscape) {\r\n this.closeSidebar();\r\n }\r\n }\r\n\r\n private _getCustomTemplate(type: string): TemplateRef<any> | null {\r\n return this.templates?.find((template: TemplateDirective) => template.type === type)?.template ?? null;\r\n }\r\n\r\n private getHeaderTemplate(): TemplateRef<unknown> | null {\r\n return this._getCustomTemplate('header') ?? null;\r\n }\r\n\r\n private getBodyTemplate(): TemplateRef<unknown> | null {\r\n return this._getCustomTemplate('body') ?? null;\r\n }\r\n\r\n private getFooterTemplate(): TemplateRef<unknown> | null {\r\n return this._getCustomTemplate('footer') ?? null;\r\n }\r\n\r\n private _getTemplates(): void {\r\n this.headerTemplate = this.getHeaderTemplate();\r\n this.bodyTemplate = this.getBodyTemplate();\r\n this.footerTemplate = this.getFooterTemplate();\r\n }\r\n}\r\n","@if (visible()) {\n <div\n class=\"backdrop\"\n (click)=\"dismissible && closeSidebar()\"\n ></div>\n}\n\n@if (cache || visible()) {\n <div\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"visible()\"\n [@visibilityChanged]\n class=\"sidebar\"\n [class.sidebar--open]=\"visible()\"\n [class.sidebar--large-size]=\"largeSized\"\n >\n <div class=\"sidebar__header\">\n @if (headerTemplate) {\n <ng-template *ngTemplateOutlet=\"headerTemplate\"></ng-template>\n } @else {\n <span class=\"sidebar__header__title\">{{ header }}</span>\n }\n @if (closable) {\n <button\n class=\"sidebar__header__close fa-solid fa-xmark\"\n (click)=\"closeSidebar()\"\n ></button>\n }\n </div>\n <div class=\"sidebar__body\">\n @if (bodyTemplate) {\n <ng-template [ngTemplateOutlet]=\"bodyTemplate\"></ng-template>\n } @else {\n <ng-content select=\":not(s-footer)\"></ng-content>\n }\n </div>\n @if (footerTemplate || footerComponent()) {\n <div class=\"sidebar__footer\">\n @if (footerTemplate) {\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n } @else {\n <ng-content select=\"s-footer\"></ng-content>\n }\n </div>\n }\n </div>\n}\n\n","import { NgModule } from '@angular/core';\r\n\r\nimport { SidebarComponent } from './sidebar.component';\r\nimport { TemplateModule } from '@seniorsistemas/angular-components/template';\r\n\r\n@NgModule({\r\n imports: [SidebarComponent],\r\n exports: [SidebarComponent, TemplateModule],\r\n})\r\nexport class SidebarModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -126,11 +126,11 @@ class ThumbnailComponent {
|
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ThumbnailComponent, isStandalone: true, selector: "s-thumbnail", inputs: { id: "id", size: "size", imageSource: "imageSource", imageFallback: "imageFallback", imageAlt: "imageAlt", iconClass: "iconClass", hasAction: "hasAction", actionIconClass: "actionIconClass", isTile: "isTile", isBrand: "isBrand" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["img"], descendants: true }], ngImport: i0, template: "<div\n [id]=\"id\"\n class=\"thumbnail-container thumbnail-container--{{ size }}\"\n [ngClass]=\"{\n 'thumbnail-container--with-action': hasAction,\n 'thumbnail-container--brand': isBrand,\n }\"\n>\n @if (imageSource || imageFallback) {\n <div\n [id]=\"id + '-image-container'\"\n class=\"image-container\"\n [ngClass]=\"{\n 'image-container--rounded': !isBrand,\n }\"\n >\n @if (!fallback) {\n <img\n #img\n [id]=\"id + '-image'\"\n (error)=\"fallback = true\"\n [src]=\"imageSource\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && imageFallback) {\n <img\n #img\n [id]=\"id + '-image-fallback'\"\n (error)=\"imageFallback = undefined\"\n [src]=\"imageFallback\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && !imageFallback) {\n <i class=\"fallback-img-color far fa-image\"> </i>\n }\n </div>\n }\n\n @if (hasAction) {\n <div\n [id]=\"id + '-action-icon-container'\"\n class=\"action-icon-container action-icon-container--{{ size }}\"\n >\n <span\n [id]=\"id + '-action-icon'\"\n [class]=\"actionIconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n @if (!imageSource && !imageFallback) {\n <div\n [id]=\"id + '-icon-container'\"\n class=\"icon-container icon-container--{{ size }}\"\n [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n >\n <span\n [id]=\"id + '-icon'\"\n [class]=\"iconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{align-items:center;background-color:#ccc;display:flex;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ThumbnailComponent, isStandalone: true, selector: "s-thumbnail", inputs: { id: "id", size: "size", imageSource: "imageSource", imageFallback: "imageFallback", imageAlt: "imageAlt", iconClass: "iconClass", hasAction: "hasAction", actionIconClass: "actionIconClass", isTile: "isTile", isBrand: "isBrand" }, providers: [ThumbnailService], viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["img"], descendants: true }], ngImport: i0, template: "<div\n [id]=\"id\"\n class=\"thumbnail-container thumbnail-container--{{ size }}\"\n [ngClass]=\"{\n 'thumbnail-container--with-action': hasAction,\n 'thumbnail-container--brand': isBrand,\n }\"\n>\n @if (imageSource || imageFallback) {\n <div\n [id]=\"id + '-image-container'\"\n class=\"image-container\"\n [ngClass]=\"{\n 'image-container--rounded': !isBrand,\n }\"\n >\n @if (!fallback) {\n <img\n #img\n [id]=\"id + '-image'\"\n (error)=\"fallback = true\"\n [src]=\"imageSource\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && imageFallback) {\n <img\n #img\n [id]=\"id + '-image-fallback'\"\n (error)=\"imageFallback = undefined\"\n [src]=\"imageFallback\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && !imageFallback) {\n <i class=\"fallback-img-color far fa-image\"> </i>\n }\n </div>\n }\n\n @if (hasAction) {\n <div\n [id]=\"id + '-action-icon-container'\"\n class=\"action-icon-container action-icon-container--{{ size }}\"\n >\n <span\n [id]=\"id + '-action-icon'\"\n [class]=\"actionIconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n @if (!imageSource && !imageFallback) {\n <div\n [id]=\"id + '-icon-container'\"\n class=\"icon-container icon-container--{{ size }}\"\n [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n >\n <span\n [id]=\"id + '-icon'\"\n [class]=\"iconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{align-items:center;background-color:#ccc;display:flex;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
130
130
|
}
|
|
131
131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailComponent, decorators: [{
|
|
132
132
|
type: Component,
|
|
133
|
-
args: [{ selector: 's-thumbnail', standalone: true, imports: [NgClass], template: "<div\n [id]=\"id\"\n class=\"thumbnail-container thumbnail-container--{{ size }}\"\n [ngClass]=\"{\n 'thumbnail-container--with-action': hasAction,\n 'thumbnail-container--brand': isBrand,\n }\"\n>\n @if (imageSource || imageFallback) {\n <div\n [id]=\"id + '-image-container'\"\n class=\"image-container\"\n [ngClass]=\"{\n 'image-container--rounded': !isBrand,\n }\"\n >\n @if (!fallback) {\n <img\n #img\n [id]=\"id + '-image'\"\n (error)=\"fallback = true\"\n [src]=\"imageSource\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && imageFallback) {\n <img\n #img\n [id]=\"id + '-image-fallback'\"\n (error)=\"imageFallback = undefined\"\n [src]=\"imageFallback\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && !imageFallback) {\n <i class=\"fallback-img-color far fa-image\"> </i>\n }\n </div>\n }\n\n @if (hasAction) {\n <div\n [id]=\"id + '-action-icon-container'\"\n class=\"action-icon-container action-icon-container--{{ size }}\"\n >\n <span\n [id]=\"id + '-action-icon'\"\n [class]=\"actionIconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n @if (!imageSource && !imageFallback) {\n <div\n [id]=\"id + '-icon-container'\"\n class=\"icon-container icon-container--{{ size }}\"\n [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n >\n <span\n [id]=\"id + '-icon'\"\n [class]=\"iconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{align-items:center;background-color:#ccc;display:flex;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}\n"] }]
|
|
133
|
+
args: [{ selector: 's-thumbnail', standalone: true, imports: [NgClass], providers: [ThumbnailService], template: "<div\n [id]=\"id\"\n class=\"thumbnail-container thumbnail-container--{{ size }}\"\n [ngClass]=\"{\n 'thumbnail-container--with-action': hasAction,\n 'thumbnail-container--brand': isBrand,\n }\"\n>\n @if (imageSource || imageFallback) {\n <div\n [id]=\"id + '-image-container'\"\n class=\"image-container\"\n [ngClass]=\"{\n 'image-container--rounded': !isBrand,\n }\"\n >\n @if (!fallback) {\n <img\n #img\n [id]=\"id + '-image'\"\n (error)=\"fallback = true\"\n [src]=\"imageSource\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && imageFallback) {\n <img\n #img\n [id]=\"id + '-image-fallback'\"\n (error)=\"imageFallback = undefined\"\n [src]=\"imageFallback\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && !imageFallback) {\n <i class=\"fallback-img-color far fa-image\"> </i>\n }\n </div>\n }\n\n @if (hasAction) {\n <div\n [id]=\"id + '-action-icon-container'\"\n class=\"action-icon-container action-icon-container--{{ size }}\"\n >\n <span\n [id]=\"id + '-action-icon'\"\n [class]=\"actionIconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n @if (!imageSource && !imageFallback) {\n <div\n [id]=\"id + '-icon-container'\"\n class=\"icon-container icon-container--{{ size }}\"\n [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n >\n <span\n [id]=\"id + '-icon'\"\n [class]=\"iconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{align-items:center;background-color:#ccc;display:flex;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}\n"] }]
|
|
134
134
|
}], propDecorators: { imgEl: [{
|
|
135
135
|
type: ViewChild,
|
|
136
136
|
args: ['img', { static: false }]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"seniorsistemas-angular-components-thumbnail.mjs","sources":["../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.service.ts","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.component.ts","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.component.html","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.module.ts","../../projects/angular-components/thumbnail/src/seniorsistemas-angular-components-thumbnail.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ThumbnailService {\n public getBinaryFile(img: HTMLImageElement) {\n return new Promise(resolve => {\n const getOrientation = this.getOrientation.bind(this);\n\n let http: XMLHttpRequest | null = new XMLHttpRequest();\n http.addEventListener(\"load\", () => {\n if (http?.readyState === 4 && (http.status == 200 || http.status === 0)) {\n const orientation = getOrientation(http.response);\n http = null;\n resolve(orientation);\n }\n });\n\n http.addEventListener(\"error\", () => {\n http = null;\n throw new Error(\"Não foi possível carregar a imagem\");\n });\n\n http.open(\"GET\", img.src, true);\n http.responseType = \"arraybuffer\";\n http.send(null);\n });\n }\n\n /**\n * Retorna a tag da orientação EXIF {-1} Não definido, {-2} Não é formato JPEG, {1, 2, 3, 4, 5, 6, 7, 8} valores da orientação.\n */\n private getOrientation(file: ArrayBuffer): number {\n const view = new DataView(file);\n\n if (view.getUint16(0, false) != 0xffd8) return -2; // not jpeg\n\n const length = view.byteLength;\n let offset = 2;\n\n while (offset < length) {\n const marker = view.getUint16(offset, false);\n offset += 2;\n\n if (marker == 0xffe1) {\n if (view.getUint32((offset += 2), false) != 0x45786966) {\n return -1; // not defined\n }\n const little = view.getUint16((offset += 6), false) == 0x4949;\n offset += view.getUint32(offset + 4, little);\n const tags = view.getUint16(offset, little);\n offset += 2;\n\n for (let i = 0; i < tags; i++)\n if (view.getUint16(offset + i * 12, little) == 0x0112) return view.getUint16(offset + i * 12 + 8, little);\n // tslint:disable-next-line: no-bitwise\n } else if ((marker & 0xff00) != 0xff00) break;\n else offset += view.getUint16(offset, false);\n }\n return -1; // not defined\n }\n}\n","import { NgClass } from '@angular/common';\r\nimport { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy, ViewChild } from '@angular/core';\r\n\r\nimport { from, Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\n\r\nimport { ThumbnailSize } from './thumbnail-size';\r\nimport { ThumbnailService } from './thumbnail.service';\r\n\r\n/**\r\n * @description Componente de miniatura de imagem com suporte a imagem de fallback,\r\n * ícone de ação sobrepôsto, orientação automática e diferentes tamanhos predefinidos.\r\n *\r\n * @example\r\n * ```html\r\n * <s-thumbnail\r\n * [imageSource]=\"urlDaImagem\"\r\n * size=\"large\"\r\n * iconClass=\"fas fa-user\" />\r\n * ```\r\n *\r\n * @category Data\r\n */\r\n@Component({\r\n selector: 's-thumbnail',\r\n templateUrl: './thumbnail.component.html',\r\n styleUrls: ['./thumbnail.component.scss'],\r\n standalone: true,\r\n imports: [NgClass],\r\n})\r\nexport class ThumbnailComponent implements AfterViewInit, OnDestroy {\r\n private readonly thumbnailService = inject(ThumbnailService);\r\n\r\n public static nextId = 0;\r\n public fallback = false;\r\n public orientation = 0;\r\n\r\n @ViewChild('img', { static: false })\r\n public imgEl: ElementRef | null = null;\r\n\r\n /** @description Identificador único do componente no DOM. Gerado automaticamente se não informado. */\r\n @Input()\r\n public id = `s-thumbnail-${ThumbnailComponent.nextId++}`;\r\n\r\n /** @description Tamanho da miniatura: `'small'`, `'medium'`, `'large'`, etc. @default 'medium' */\r\n @Input()\r\n public size: ThumbnailSize = 'medium';\r\n\r\n /** @description URL da imagem principal. */\r\n @Input()\r\n public imageSource?: string;\r\n\r\n /** @description URL da imagem de fallback exibida quando a principal falha ao carregar. */\r\n @Input()\r\n public imageFallback?: string;\r\n\r\n /** @description Texto alternativo (atributo `alt`) da imagem. */\r\n @Input()\r\n public imageAlt?: string;\r\n\r\n /** @description Classe do ícone exibido quando não há imagem disponível. @default 'far fa-image' */\r\n @Input()\r\n public iconClass = 'far fa-image';\r\n\r\n /** @description Habilita a exibição de um botão de ação sobrepôsto. @default false */\r\n @Input()\r\n public hasAction = false;\r\n\r\n /** @description Classe do ícone do botão de ação. @default 'fas fa-camera' */\r\n @Input()\r\n public actionIconClass = 'fas fa-camera';\r\n\r\n /** @description Aplica estilo de tile ao thumbnail. @default false */\r\n @Input()\r\n public isTile = false;\r\n\r\n /** @description Aplica estilo de marca ao thumbnail. @default false */\r\n @Input()\r\n public isBrand = false;\r\n\r\n private ngUnsubscribe = new Subject<void>();\r\n\r\n public ngOnDestroy(): void {\r\n this.ngUnsubscribe.next();\r\n this.ngUnsubscribe.complete();\r\n }\r\n\r\n public ngAfterViewInit(): void {\r\n if (this.imgEl) {\r\n this.imgEl.nativeElement.addEventListener('load', () => {\r\n from(this.thumbnailService.getBinaryFile(this.imgEl?.nativeElement))\r\n .pipe(takeUntil(this.ngUnsubscribe))\r\n .subscribe((value: unknown) => {\r\n if (typeof value === 'number') {\r\n this.orientation = value;\r\n } else {\r\n console.error('Valor retornado não é um número:', value);\r\n }\r\n });\r\n });\r\n }\r\n }\r\n}\r\n","<div\n [id]=\"id\"\n class=\"thumbnail-container thumbnail-container--{{ size }}\"\n [ngClass]=\"{\n 'thumbnail-container--with-action': hasAction,\n 'thumbnail-container--brand': isBrand,\n }\"\n>\n @if (imageSource || imageFallback) {\n <div\n [id]=\"id + '-image-container'\"\n class=\"image-container\"\n [ngClass]=\"{\n 'image-container--rounded': !isBrand,\n }\"\n >\n @if (!fallback) {\n <img\n #img\n [id]=\"id + '-image'\"\n (error)=\"fallback = true\"\n [src]=\"imageSource\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && imageFallback) {\n <img\n #img\n [id]=\"id + '-image-fallback'\"\n (error)=\"imageFallback = undefined\"\n [src]=\"imageFallback\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && !imageFallback) {\n <i class=\"fallback-img-color far fa-image\"> </i>\n }\n </div>\n }\n\n @if (hasAction) {\n <div\n [id]=\"id + '-action-icon-container'\"\n class=\"action-icon-container action-icon-container--{{ size }}\"\n >\n <span\n [id]=\"id + '-action-icon'\"\n [class]=\"actionIconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n @if (!imageSource && !imageFallback) {\n <div\n [id]=\"id + '-icon-container'\"\n class=\"icon-container icon-container--{{ size }}\"\n [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n >\n <span\n [id]=\"id + '-icon'\"\n [class]=\"iconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\r\n\r\nimport { ThumbnailComponent } from './thumbnail.component';\r\nimport { ThumbnailService } from './thumbnail.service';\r\n\r\n@NgModule({\r\n imports: [ThumbnailComponent],\r\n exports: [ThumbnailComponent],\r\n providers: [ThumbnailService],\r\n})\r\nexport class ThumbnailModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"seniorsistemas-angular-components-thumbnail.mjs","sources":["../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.service.ts","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.component.ts","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.component.html","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.module.ts","../../projects/angular-components/thumbnail/src/seniorsistemas-angular-components-thumbnail.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ThumbnailService {\n public getBinaryFile(img: HTMLImageElement) {\n return new Promise(resolve => {\n const getOrientation = this.getOrientation.bind(this);\n\n let http: XMLHttpRequest | null = new XMLHttpRequest();\n http.addEventListener(\"load\", () => {\n if (http?.readyState === 4 && (http.status == 200 || http.status === 0)) {\n const orientation = getOrientation(http.response);\n http = null;\n resolve(orientation);\n }\n });\n\n http.addEventListener(\"error\", () => {\n http = null;\n throw new Error(\"Não foi possível carregar a imagem\");\n });\n\n http.open(\"GET\", img.src, true);\n http.responseType = \"arraybuffer\";\n http.send(null);\n });\n }\n\n /**\n * Retorna a tag da orientação EXIF {-1} Não definido, {-2} Não é formato JPEG, {1, 2, 3, 4, 5, 6, 7, 8} valores da orientação.\n */\n private getOrientation(file: ArrayBuffer): number {\n const view = new DataView(file);\n\n if (view.getUint16(0, false) != 0xffd8) return -2; // not jpeg\n\n const length = view.byteLength;\n let offset = 2;\n\n while (offset < length) {\n const marker = view.getUint16(offset, false);\n offset += 2;\n\n if (marker == 0xffe1) {\n if (view.getUint32((offset += 2), false) != 0x45786966) {\n return -1; // not defined\n }\n const little = view.getUint16((offset += 6), false) == 0x4949;\n offset += view.getUint32(offset + 4, little);\n const tags = view.getUint16(offset, little);\n offset += 2;\n\n for (let i = 0; i < tags; i++)\n if (view.getUint16(offset + i * 12, little) == 0x0112) return view.getUint16(offset + i * 12 + 8, little);\n // tslint:disable-next-line: no-bitwise\n } else if ((marker & 0xff00) != 0xff00) break;\n else offset += view.getUint16(offset, false);\n }\n return -1; // not defined\n }\n}\n","import { NgClass } from '@angular/common';\r\nimport { AfterViewInit, Component, ElementRef, inject, Input, OnDestroy, ViewChild } from '@angular/core';\r\n\r\nimport { from, Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\n\r\nimport { ThumbnailSize } from './thumbnail-size';\r\nimport { ThumbnailService } from './thumbnail.service';\r\n\r\n/**\r\n * @description Componente de miniatura de imagem com suporte a imagem de fallback,\r\n * ícone de ação sobrepôsto, orientação automática e diferentes tamanhos predefinidos.\r\n *\r\n * @example\r\n * ```html\r\n * <s-thumbnail\r\n * [imageSource]=\"urlDaImagem\"\r\n * size=\"large\"\r\n * iconClass=\"fas fa-user\" />\r\n * ```\r\n *\r\n * @category Data\r\n */\r\n@Component({\r\n selector: 's-thumbnail',\r\n templateUrl: './thumbnail.component.html',\r\n styleUrls: ['./thumbnail.component.scss'],\r\n standalone: true,\r\n imports: [NgClass],\r\n providers: [ThumbnailService],\r\n})\r\nexport class ThumbnailComponent implements AfterViewInit, OnDestroy {\r\n private readonly thumbnailService = inject(ThumbnailService);\r\n\r\n public static nextId = 0;\r\n public fallback = false;\r\n public orientation = 0;\r\n\r\n @ViewChild('img', { static: false })\r\n public imgEl: ElementRef | null = null;\r\n\r\n /** @description Identificador único do componente no DOM. Gerado automaticamente se não informado. */\r\n @Input()\r\n public id = `s-thumbnail-${ThumbnailComponent.nextId++}`;\r\n\r\n /** @description Tamanho da miniatura: `'small'`, `'medium'`, `'large'`, etc. @default 'medium' */\r\n @Input()\r\n public size: ThumbnailSize = 'medium';\r\n\r\n /** @description URL da imagem principal. */\r\n @Input()\r\n public imageSource?: string;\r\n\r\n /** @description URL da imagem de fallback exibida quando a principal falha ao carregar. */\r\n @Input()\r\n public imageFallback?: string;\r\n\r\n /** @description Texto alternativo (atributo `alt`) da imagem. */\r\n @Input()\r\n public imageAlt?: string;\r\n\r\n /** @description Classe do ícone exibido quando não há imagem disponível. @default 'far fa-image' */\r\n @Input()\r\n public iconClass = 'far fa-image';\r\n\r\n /** @description Habilita a exibição de um botão de ação sobrepôsto. @default false */\r\n @Input()\r\n public hasAction = false;\r\n\r\n /** @description Classe do ícone do botão de ação. @default 'fas fa-camera' */\r\n @Input()\r\n public actionIconClass = 'fas fa-camera';\r\n\r\n /** @description Aplica estilo de tile ao thumbnail. @default false */\r\n @Input()\r\n public isTile = false;\r\n\r\n /** @description Aplica estilo de marca ao thumbnail. @default false */\r\n @Input()\r\n public isBrand = false;\r\n\r\n private ngUnsubscribe = new Subject<void>();\r\n\r\n public ngOnDestroy(): void {\r\n this.ngUnsubscribe.next();\r\n this.ngUnsubscribe.complete();\r\n }\r\n\r\n public ngAfterViewInit(): void {\r\n if (this.imgEl) {\r\n this.imgEl.nativeElement.addEventListener('load', () => {\r\n from(this.thumbnailService.getBinaryFile(this.imgEl?.nativeElement))\r\n .pipe(takeUntil(this.ngUnsubscribe))\r\n .subscribe((value: unknown) => {\r\n if (typeof value === 'number') {\r\n this.orientation = value;\r\n } else {\r\n console.error('Valor retornado não é um número:', value);\r\n }\r\n });\r\n });\r\n }\r\n }\r\n}\r\n","<div\n [id]=\"id\"\n class=\"thumbnail-container thumbnail-container--{{ size }}\"\n [ngClass]=\"{\n 'thumbnail-container--with-action': hasAction,\n 'thumbnail-container--brand': isBrand,\n }\"\n>\n @if (imageSource || imageFallback) {\n <div\n [id]=\"id + '-image-container'\"\n class=\"image-container\"\n [ngClass]=\"{\n 'image-container--rounded': !isBrand,\n }\"\n >\n @if (!fallback) {\n <img\n #img\n [id]=\"id + '-image'\"\n (error)=\"fallback = true\"\n [src]=\"imageSource\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && imageFallback) {\n <img\n #img\n [id]=\"id + '-image-fallback'\"\n (error)=\"imageFallback = undefined\"\n [src]=\"imageFallback\"\n [alt]=\"imageAlt\"\n [ngClass]=\"{\n smallThumbnail: isTile,\n 'exif-orientation-2': orientation === 2,\n 'exif-orientation-3': orientation === 3,\n 'exif-orientation-4': orientation === 4,\n 'exif-orientation-5': orientation === 5,\n 'exif-orientation-6': orientation === 6,\n 'exif-orientation-7': orientation === 7,\n 'exif-orientation-8': orientation === 8,\n }\"\n />\n }\n\n @if (fallback && !imageFallback) {\n <i class=\"fallback-img-color far fa-image\"> </i>\n }\n </div>\n }\n\n @if (hasAction) {\n <div\n [id]=\"id + '-action-icon-container'\"\n class=\"action-icon-container action-icon-container--{{ size }}\"\n >\n <span\n [id]=\"id + '-action-icon'\"\n [class]=\"actionIconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n @if (!imageSource && !imageFallback) {\n <div\n [id]=\"id + '-icon-container'\"\n class=\"icon-container icon-container--{{ size }}\"\n [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n >\n <span\n [id]=\"id + '-icon'\"\n [class]=\"iconClass\"\n aria-hidden=\"true\"\n >\n </span>\n </div>\n }\n\n <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\r\n\r\nimport { ThumbnailComponent } from './thumbnail.component';\r\nimport { ThumbnailService } from './thumbnail.service';\r\n\r\n@NgModule({\r\n imports: [ThumbnailComponent],\r\n exports: [ThumbnailComponent],\r\n providers: [ThumbnailService],\r\n})\r\nexport class ThumbnailModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { AfterContentInit, OnDestroy, QueryList, TemplateRef } from '@angular/core';
|
|
2
|
+
import { FooterComponent } from '@seniorsistemas/angular-components/structure';
|
|
2
3
|
import { TemplateDirective } from '@seniorsistemas/angular-components/template';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
/**
|
|
@@ -67,6 +68,7 @@ export declare class SidebarComponent implements AfterContentInit, OnDestroy {
|
|
|
67
68
|
headerTemplate: TemplateRef<unknown> | null;
|
|
68
69
|
bodyTemplate: TemplateRef<unknown> | null;
|
|
69
70
|
footerTemplate: TemplateRef<unknown> | null;
|
|
71
|
+
protected readonly footerComponent: import("@angular/core").Signal<FooterComponent | undefined>;
|
|
70
72
|
private _confirmClose;
|
|
71
73
|
private readonly visibleEffect;
|
|
72
74
|
ngAfterContentInit(): void;
|
|
@@ -79,5 +81,5 @@ export declare class SidebarComponent implements AfterContentInit, OnDestroy {
|
|
|
79
81
|
private getFooterTemplate;
|
|
80
82
|
private _getTemplates;
|
|
81
83
|
static ɵfac: i0.ɵɵFactoryDeclaration<SidebarComponent, never>;
|
|
82
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "s-sidebar", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; "header": { "alias": "header"; "required": false; }; "largeSized": { "alias": "largeSized"; "required": false; }; "cache": { "alias": "cache"; "required": false; }; "registerConfirmClose": { "alias": "registerConfirmClose"; "required": false; }; }, { "visible": "visibleChange"; }, ["templates"], ["
|
|
84
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SidebarComponent, "s-sidebar", never, { "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; "header": { "alias": "header"; "required": false; }; "largeSized": { "alias": "largeSized"; "required": false; }; "cache": { "alias": "cache"; "required": false; }; "registerConfirmClose": { "alias": "registerConfirmClose"; "required": false; }; }, { "visible": "visibleChange"; }, ["footerComponent", "templates"], [":not(s-footer)", "s-footer"], true, never>;
|
|
83
85
|
}
|