@tekus/design-system 5.1.0 → 5.1.2
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.
|
@@ -163,11 +163,11 @@ class FallbackViewComponent {
|
|
|
163
163
|
this.linkAction.emit();
|
|
164
164
|
}
|
|
165
165
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FallbackViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
166
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: "type", imageSrc: "imageSrc", illustrationAlt: "illustrationAlt", title: "title", message: "message", buttonLabel: "buttonLabel", linkLabel: "linkLabel", buttonDisabled: "buttonDisabled" }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n class=\"tk-fallback-view\"\n [class.tk-fallback-view--section]=\"type === 'section'\">\n <ng-content select=\"[image]\"></ng-content>\n @if (imageSrc) {\n <img\n [src]=\"imageSrc\"\n [alt]=\"illustrationAlt || 'fallback illustration'\"\n class=\"tk-fallback-view__image\" />\n }\n\n <ng-content select=\"[title]\"></ng-content>\n @if (title && type === 'content') {\n <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n }\n\n <ng-content select=\"[message]\"></ng-content>\n @if (message) {\n <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n }\n\n <ng-content select=\"[actions]\"></ng-content>\n @if (type === 'content' && (buttonLabel || linkLabel)) {\n <div class=\"tk-fallback-view__actions\">\n @if (buttonLabel) {\n <tk-button\n [label]=\"buttonLabel\"\n severity=\"primary\"\n [disabled]=\"buttonDisabled\"\n (clicked)=\"onButtonActionClick()\" />\n } @if (linkLabel) {\n <tk-button\n [label]=\"linkLabel\"\n [link]=\"true\"\n (clicked)=\"onLinkActionClick()\" />\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-4, 1rem);padding:var(--tk-spacing-8, 2rem) var(--tk-spacing-4, 1rem);
|
|
166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FallbackViewComponent, isStandalone: true, selector: "tk-fallback-view", inputs: { type: "type", imageSrc: "imageSrc", illustrationAlt: "illustrationAlt", title: "title", message: "message", buttonLabel: "buttonLabel", linkLabel: "linkLabel", buttonDisabled: "buttonDisabled" }, outputs: { buttonAction: "buttonAction", linkAction: "linkAction" }, ngImport: i0, template: "<div\n class=\"tk-fallback-view\"\n [class.tk-fallback-view--section]=\"type === 'section'\">\n <ng-content select=\"[image]\"></ng-content>\n @if (imageSrc) {\n <img\n [src]=\"imageSrc\"\n [alt]=\"illustrationAlt || 'fallback illustration'\"\n class=\"tk-fallback-view__image\" />\n }\n\n <ng-content select=\"[title]\"></ng-content>\n @if (title && type === 'content') {\n <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n }\n\n <ng-content select=\"[message]\"></ng-content>\n @if (message) {\n <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n }\n\n <ng-content select=\"[actions]\"></ng-content>\n @if (type === 'content' && (buttonLabel || linkLabel)) {\n <div class=\"tk-fallback-view__actions\">\n @if (buttonLabel) {\n <tk-button\n [label]=\"buttonLabel\"\n severity=\"primary\"\n [disabled]=\"buttonDisabled\"\n (clicked)=\"onButtonActionClick()\" />\n } @if (linkLabel) {\n <tk-button\n [label]=\"linkLabel\"\n [link]=\"true\"\n (clicked)=\"onLinkActionClick()\" />\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-4, 1rem);padding:var(--tk-spacing-8, 2rem) var(--tk-spacing-4, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-6, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-md, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-text-default, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-text-default, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-3, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-4, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-6, 1.5rem) var(--tk-spacing-4, 1rem);background-color:var(--tk-surface-0, #ffffff);color:var(--tk-text-default, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-2xs);font-weight:var(--tk-font-weight-regular)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "tk-button", inputs: ["label", "disabled", "type", "severity", "link"], outputs: ["clicked"] }, { kind: "ngmodule", type: CardModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
167
167
|
}
|
|
168
168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FallbackViewComponent, decorators: [{
|
|
169
169
|
type: Component,
|
|
170
|
-
args: [{ selector: 'tk-fallback-view', standalone: true, imports: [CommonModule, ButtonComponent, CardModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"tk-fallback-view\"\n [class.tk-fallback-view--section]=\"type === 'section'\">\n <ng-content select=\"[image]\"></ng-content>\n @if (imageSrc) {\n <img\n [src]=\"imageSrc\"\n [alt]=\"illustrationAlt || 'fallback illustration'\"\n class=\"tk-fallback-view__image\" />\n }\n\n <ng-content select=\"[title]\"></ng-content>\n @if (title && type === 'content') {\n <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n }\n\n <ng-content select=\"[message]\"></ng-content>\n @if (message) {\n <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n }\n\n <ng-content select=\"[actions]\"></ng-content>\n @if (type === 'content' && (buttonLabel || linkLabel)) {\n <div class=\"tk-fallback-view__actions\">\n @if (buttonLabel) {\n <tk-button\n [label]=\"buttonLabel\"\n severity=\"primary\"\n [disabled]=\"buttonDisabled\"\n (clicked)=\"onButtonActionClick()\" />\n } @if (linkLabel) {\n <tk-button\n [label]=\"linkLabel\"\n [link]=\"true\"\n (clicked)=\"onLinkActionClick()\" />\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-4, 1rem);padding:var(--tk-spacing-8, 2rem) var(--tk-spacing-4, 1rem);
|
|
170
|
+
args: [{ selector: 'tk-fallback-view', standalone: true, imports: [CommonModule, ButtonComponent, CardModule], encapsulation: ViewEncapsulation.None, template: "<div\n class=\"tk-fallback-view\"\n [class.tk-fallback-view--section]=\"type === 'section'\">\n <ng-content select=\"[image]\"></ng-content>\n @if (imageSrc) {\n <img\n [src]=\"imageSrc\"\n [alt]=\"illustrationAlt || 'fallback illustration'\"\n class=\"tk-fallback-view__image\" />\n }\n\n <ng-content select=\"[title]\"></ng-content>\n @if (title && type === 'content') {\n <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n }\n\n <ng-content select=\"[message]\"></ng-content>\n @if (message) {\n <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n }\n\n <ng-content select=\"[actions]\"></ng-content>\n @if (type === 'content' && (buttonLabel || linkLabel)) {\n <div class=\"tk-fallback-view__actions\">\n @if (buttonLabel) {\n <tk-button\n [label]=\"buttonLabel\"\n severity=\"primary\"\n [disabled]=\"buttonDisabled\"\n (clicked)=\"onButtonActionClick()\" />\n } @if (linkLabel) {\n <tk-button\n [label]=\"linkLabel\"\n [link]=\"true\"\n (clicked)=\"onLinkActionClick()\" />\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;width:100%}.tk-fallback-view{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--tk-spacing-4, 1rem);padding:var(--tk-spacing-8, 2rem) var(--tk-spacing-4, 1rem);margin:0 auto}.tk-fallback-view__image,.tk-fallback-view>[image]{max-width:18.75rem;max-height:18.75rem;width:auto;height:auto;object-fit:contain;margin-bottom:var(--tk-spacing-6, 1.5rem)}.tk-fallback-view__title,.tk-fallback-view>[title]{font-size:var(--tk-font-size-md, 1.5rem);font-weight:var(--tk-font-weight-bold, 700);margin:0;max-width:31.25rem;color:var(--tk-text-default, #191a1b)}.tk-fallback-view__message,.tk-fallback-view>[message]{font-size:var(--tk-font-size-2xs, 1rem);font-weight:var(--tk-font-weight-regular, 400);margin:0;max-width:31.25rem;color:var(--tk-text-default, #191a1b)}.tk-fallback-view__actions,.tk-fallback-view>[actions]{display:flex;flex-direction:column;align-items:center;gap:var(--tk-spacing-3, .75rem)}.tk-fallback-view--section{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:var(--tk-spacing-4, 1rem);width:100%;min-height:3.75rem;padding:var(--tk-spacing-6, 1.5rem) var(--tk-spacing-4, 1rem);background-color:var(--tk-surface-0, #ffffff);color:var(--tk-text-default, #191a1b)}.tk-fallback-view--section .tk-fallback-view__image,.tk-fallback-view--section>[image]{width:3.75rem;height:3.75rem;max-width:3.75rem;max-height:3.75rem;margin-bottom:0;object-fit:contain}.tk-fallback-view--section .tk-fallback-view__message,.tk-fallback-view--section>[message]{font-size:var(--tk-font-size-2xs);font-weight:var(--tk-font-weight-regular)}\n"] }]
|
|
171
171
|
}], propDecorators: { type: [{
|
|
172
172
|
type: Input
|
|
173
173
|
}], imageSrc: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tekus-design-system-components-fallback-view.mjs","sources":["../../../projects/design-system/components/fallback-view/src/fallback-view.component.ts","../../../projects/design-system/components/fallback-view/src/fallback-view.component.html","../../../projects/design-system/components/fallback-view/tekus-design-system-components-fallback-view.ts"],"sourcesContent":["import {\n Component,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CardModule } from 'primeng/card';\n\nexport type FallbackViewType = 'content' | 'section';\n\n/**\n * @component FallbackViewComponent\n * @description\n * A reusable component for displaying fallback or empty states such as\n * “no results found”, “error loading data”, or “content not available”.\n * It provides a consistent structure with support for an image, title,\n * message, and optional action buttons.\n *\n * The component can be used in two ways:\n * 1. **Via Inputs:** Pass data directly through component inputs (`imageSrc`, `title`, `message`, etc.).\n * 2. **Via Content Projection (`ng-content`):** Use your own HTML structure for full customization.\n *\n * @usage\n * ### Basic Usage (via Inputs)\n * ```html\n * <tk-fallback-view\n * imageSrc=\"assets/img/empty-state.svg\"\n * title=\"No Items Found\"\n * message=\"There are currently no items to display. Try adding one.\"\n * buttonLabel=\"Add New Item\"\n * linkLabel=\"Learn More\"\n * (buttonAction)=\"handleAddNewItem()\"\n * (linkAction)=\"handleLearnMore()\">\n * </tk-fallback-view>\n * ```\n *\n * ### Compact Variant (Section type)\n * ```html\n * <tk-fallback-view\n * [type]=\"'section'\"\n * imageSrc=\"assets/img/check.svg\"\n * message=\"Saved successfully\">\n * </tk-fallback-view>\n * ```\n *\n * ### Advanced Usage (via ng-content)\n * ```html\n * <tk-fallback-view [type]=\"'content'\">\n * <img image src=\"assets/img/empty-state.svg\" alt=\"Tekus logo\">\n * <h2 title>Custom Title</h2>\n * <p message>\n * This is a <b>custom message</b> with <strong>HTML content</strong>.\n * </p>\n * <div actions>\n * <tk-button\n * label=\"Primary Action\"\n * severity=\"primary\"\n * (click)=\"onPrimaryAction()\">\n * </tk-button>\n * <tk-button\n * label=\"Secondary Action\"\n * [link]=\"true\"\n * (click)=\"onSecondaryAction()\">\n * </tk-button>\n * </div>\n * </tk-fallback-view>\n * ```\n */\n\n@Component({\n selector: 'tk-fallback-view',\n standalone: true,\n imports: [CommonModule, ButtonComponent, CardModule],\n templateUrl: './fallback-view.component.html',\n styleUrl: './fallback-view.component.scss',\n encapsulation: ViewEncapsulation.None,\n})\nexport class FallbackViewComponent {\n /**\n * @property {FallbackViewType} type\n * @description\n * Controls the overall type and spacing of the component.\n * - `'content'`: Standard size.\n * - `'section'`: A more compact version.\n *\n * @default `'default'`\n */\n @Input() type: FallbackViewType = 'content';\n\n /**\n * @property {string} imageSrc\n * @description\n * The URL for the illustrative image to be displayed at the top.\n *\n * @default `''`\n */\n @Input() imageSrc = '';\n\n /**\n * @property {string} illustrationAlt\n * Descriptive alternative text for the image. Improves accessibility.\n */\n @Input() illustrationAlt = '';\n\n /**\n * @property {string} title\n * @description\n * The main title or heading of the fallback view.\n *\n * @default `''`\n */\n @Input() title = '';\n\n /**\n * @property {string} message\n * @description\n * The descriptive text or message displayed below the title.\n *\n * @default `''`\n */\n @Input() message = '';\n\n /**\n * @property {string} buttonLabel\n * @description\n * Text for the primary action button. If left empty, the button is not rendered.\n *\n * @default `''`\n */\n @Input() buttonLabel = '';\n\n /**\n * @property {string} linkLabel\n * @description\n * Text for the secondary action, which is styled as a link.\n * If left empty, the link is not rendered.\n *\n * @default `''`\n */\n @Input() linkLabel = '';\n\n /**\n * @property {boolean} buttonDisabled\n * @description\n * Controls whether the primary action button is disabled.\n * When true, the button is visually disabled and cannot be clicked.\n *\n * @default false\n */\n @Input() buttonDisabled = false;\n\n /**\n * @event buttonAction\n * @description\n * Emits when the main action button is clicked. Listen to this event\n * to handle the primary call-to-action.\n */\n @Output() buttonAction = new EventEmitter<void>();\n\n /**\n * @event linkAction\n * @description\n * Emits when the link-styled button is clicked. Use for secondary\n * or alternative actions.\n */\n @Output() linkAction = new EventEmitter<void>();\n\n /**\n * @method onButtonActionClick\n * @description\n * Internal handler that emits the `primaryAction` event when the\n * main button is clicked.\n */\n onButtonActionClick(): void {\n this.buttonAction.emit();\n }\n\n /**\n * @method onLinkActionClick\n * @description\n * Internal handler that emits the `linkAction` event when the\n * link button is clicked.\n */\n onLinkActionClick(): void {\n this.linkAction.emit();\n }\n}\n","<div\n class=\"tk-fallback-view\"\n [class.tk-fallback-view--section]=\"type === 'section'\">\n <ng-content select=\"[image]\"></ng-content>\n @if (imageSrc) {\n <img\n [src]=\"imageSrc\"\n [alt]=\"illustrationAlt || 'fallback illustration'\"\n class=\"tk-fallback-view__image\" />\n }\n\n <ng-content select=\"[title]\"></ng-content>\n @if (title && type === 'content') {\n <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n }\n\n <ng-content select=\"[message]\"></ng-content>\n @if (message) {\n <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n }\n\n <ng-content select=\"[actions]\"></ng-content>\n @if (type === 'content' && (buttonLabel || linkLabel)) {\n <div class=\"tk-fallback-view__actions\">\n @if (buttonLabel) {\n <tk-button\n [label]=\"buttonLabel\"\n severity=\"primary\"\n [disabled]=\"buttonDisabled\"\n (clicked)=\"onButtonActionClick()\" />\n } @if (linkLabel) {\n <tk-button\n [label]=\"linkLabel\"\n [link]=\"true\"\n (clicked)=\"onLinkActionClick()\" />\n }\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDG;MAUU,qBAAqB,CAAA;AARlC,IAAA,WAAA,GAAA;AASE;;;;;;;;AAQG;QACM,IAAI,CAAA,IAAA,GAAqB,SAAS;AAE3C;;;;;;AAMG;QACM,IAAQ,CAAA,QAAA,GAAG,EAAE;AAEtB;;;AAGG;QACM,IAAe,CAAA,eAAA,GAAG,EAAE;AAE7B;;;;;;AAMG;QACM,IAAK,CAAA,KAAA,GAAG,EAAE;AAEnB;;;;;;AAMG;QACM,IAAO,CAAA,OAAA,GAAG,EAAE;AAErB;;;;;;AAMG;QACM,IAAW,CAAA,WAAA,GAAG,EAAE;AAEzB;;;;;;;AAOG;QACM,IAAS,CAAA,SAAA,GAAG,EAAE;AAEvB;;;;;;;AAOG;QACM,IAAc,CAAA,cAAA,GAAG,KAAK;AAE/B;;;;;AAKG;AACO,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAQ;AAEjD;;;;;AAKG;AACO,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAQ;AAqBhD;AAnBC;;;;;AAKG;IACH,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;AAG1B;;;;;AAKG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;+GA3Gb,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,+VChFlC,slCAuCA,EAAA,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"tekus-design-system-components-fallback-view.mjs","sources":["../../../projects/design-system/components/fallback-view/src/fallback-view.component.ts","../../../projects/design-system/components/fallback-view/src/fallback-view.component.html","../../../projects/design-system/components/fallback-view/tekus-design-system-components-fallback-view.ts"],"sourcesContent":["import {\n Component,\n EventEmitter,\n Input,\n Output,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonComponent } from '@tekus/design-system/components/button';\nimport { CardModule } from 'primeng/card';\n\nexport type FallbackViewType = 'content' | 'section';\n\n/**\n * @component FallbackViewComponent\n * @description\n * A reusable component for displaying fallback or empty states such as\n * “no results found”, “error loading data”, or “content not available”.\n * It provides a consistent structure with support for an image, title,\n * message, and optional action buttons.\n *\n * The component can be used in two ways:\n * 1. **Via Inputs:** Pass data directly through component inputs (`imageSrc`, `title`, `message`, etc.).\n * 2. **Via Content Projection (`ng-content`):** Use your own HTML structure for full customization.\n *\n * @usage\n * ### Basic Usage (via Inputs)\n * ```html\n * <tk-fallback-view\n * imageSrc=\"assets/img/empty-state.svg\"\n * title=\"No Items Found\"\n * message=\"There are currently no items to display. Try adding one.\"\n * buttonLabel=\"Add New Item\"\n * linkLabel=\"Learn More\"\n * (buttonAction)=\"handleAddNewItem()\"\n * (linkAction)=\"handleLearnMore()\">\n * </tk-fallback-view>\n * ```\n *\n * ### Compact Variant (Section type)\n * ```html\n * <tk-fallback-view\n * [type]=\"'section'\"\n * imageSrc=\"assets/img/check.svg\"\n * message=\"Saved successfully\">\n * </tk-fallback-view>\n * ```\n *\n * ### Advanced Usage (via ng-content)\n * ```html\n * <tk-fallback-view [type]=\"'content'\">\n * <img image src=\"assets/img/empty-state.svg\" alt=\"Tekus logo\">\n * <h2 title>Custom Title</h2>\n * <p message>\n * This is a <b>custom message</b> with <strong>HTML content</strong>.\n * </p>\n * <div actions>\n * <tk-button\n * label=\"Primary Action\"\n * severity=\"primary\"\n * (click)=\"onPrimaryAction()\">\n * </tk-button>\n * <tk-button\n * label=\"Secondary Action\"\n * [link]=\"true\"\n * (click)=\"onSecondaryAction()\">\n * </tk-button>\n * </div>\n * </tk-fallback-view>\n * ```\n */\n\n@Component({\n selector: 'tk-fallback-view',\n standalone: true,\n imports: [CommonModule, ButtonComponent, CardModule],\n templateUrl: './fallback-view.component.html',\n styleUrl: './fallback-view.component.scss',\n encapsulation: ViewEncapsulation.None,\n})\nexport class FallbackViewComponent {\n /**\n * @property {FallbackViewType} type\n * @description\n * Controls the overall type and spacing of the component.\n * - `'content'`: Standard size.\n * - `'section'`: A more compact version.\n *\n * @default `'default'`\n */\n @Input() type: FallbackViewType = 'content';\n\n /**\n * @property {string} imageSrc\n * @description\n * The URL for the illustrative image to be displayed at the top.\n *\n * @default `''`\n */\n @Input() imageSrc = '';\n\n /**\n * @property {string} illustrationAlt\n * Descriptive alternative text for the image. Improves accessibility.\n */\n @Input() illustrationAlt = '';\n\n /**\n * @property {string} title\n * @description\n * The main title or heading of the fallback view.\n *\n * @default `''`\n */\n @Input() title = '';\n\n /**\n * @property {string} message\n * @description\n * The descriptive text or message displayed below the title.\n *\n * @default `''`\n */\n @Input() message = '';\n\n /**\n * @property {string} buttonLabel\n * @description\n * Text for the primary action button. If left empty, the button is not rendered.\n *\n * @default `''`\n */\n @Input() buttonLabel = '';\n\n /**\n * @property {string} linkLabel\n * @description\n * Text for the secondary action, which is styled as a link.\n * If left empty, the link is not rendered.\n *\n * @default `''`\n */\n @Input() linkLabel = '';\n\n /**\n * @property {boolean} buttonDisabled\n * @description\n * Controls whether the primary action button is disabled.\n * When true, the button is visually disabled and cannot be clicked.\n *\n * @default false\n */\n @Input() buttonDisabled = false;\n\n /**\n * @event buttonAction\n * @description\n * Emits when the main action button is clicked. Listen to this event\n * to handle the primary call-to-action.\n */\n @Output() buttonAction = new EventEmitter<void>();\n\n /**\n * @event linkAction\n * @description\n * Emits when the link-styled button is clicked. Use for secondary\n * or alternative actions.\n */\n @Output() linkAction = new EventEmitter<void>();\n\n /**\n * @method onButtonActionClick\n * @description\n * Internal handler that emits the `primaryAction` event when the\n * main button is clicked.\n */\n onButtonActionClick(): void {\n this.buttonAction.emit();\n }\n\n /**\n * @method onLinkActionClick\n * @description\n * Internal handler that emits the `linkAction` event when the\n * link button is clicked.\n */\n onLinkActionClick(): void {\n this.linkAction.emit();\n }\n}\n","<div\n class=\"tk-fallback-view\"\n [class.tk-fallback-view--section]=\"type === 'section'\">\n <ng-content select=\"[image]\"></ng-content>\n @if (imageSrc) {\n <img\n [src]=\"imageSrc\"\n [alt]=\"illustrationAlt || 'fallback illustration'\"\n class=\"tk-fallback-view__image\" />\n }\n\n <ng-content select=\"[title]\"></ng-content>\n @if (title && type === 'content') {\n <h2 class=\"tk-fallback-view__title\">{{ title }}</h2>\n }\n\n <ng-content select=\"[message]\"></ng-content>\n @if (message) {\n <p class=\"tk-fallback-view__message\" [innerHTML]=\"message\"></p>\n }\n\n <ng-content select=\"[actions]\"></ng-content>\n @if (type === 'content' && (buttonLabel || linkLabel)) {\n <div class=\"tk-fallback-view__actions\">\n @if (buttonLabel) {\n <tk-button\n [label]=\"buttonLabel\"\n severity=\"primary\"\n [disabled]=\"buttonDisabled\"\n (clicked)=\"onButtonActionClick()\" />\n } @if (linkLabel) {\n <tk-button\n [label]=\"linkLabel\"\n [link]=\"true\"\n (clicked)=\"onLinkActionClick()\" />\n }\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;AAaA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDG;MAUU,qBAAqB,CAAA;AARlC,IAAA,WAAA,GAAA;AASE;;;;;;;;AAQG;QACM,IAAI,CAAA,IAAA,GAAqB,SAAS;AAE3C;;;;;;AAMG;QACM,IAAQ,CAAA,QAAA,GAAG,EAAE;AAEtB;;;AAGG;QACM,IAAe,CAAA,eAAA,GAAG,EAAE;AAE7B;;;;;;AAMG;QACM,IAAK,CAAA,KAAA,GAAG,EAAE;AAEnB;;;;;;AAMG;QACM,IAAO,CAAA,OAAA,GAAG,EAAE;AAErB;;;;;;AAMG;QACM,IAAW,CAAA,WAAA,GAAG,EAAE;AAEzB;;;;;;;AAOG;QACM,IAAS,CAAA,SAAA,GAAG,EAAE;AAEvB;;;;;;;AAOG;QACM,IAAc,CAAA,cAAA,GAAG,KAAK;AAE/B;;;;;AAKG;AACO,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAQ;AAEjD;;;;;AAKG;AACO,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAQ;AAqBhD;AAnBC;;;;;AAKG;IACH,mBAAmB,GAAA;AACjB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;AAG1B;;;;;AAKG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;+GA3Gb,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,+VChFlC,slCAuCA,EAAA,MAAA,EAAA,CAAA,mlDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDoCY,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,sIAAE,UAAU,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAKxC,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAChB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,CAAC,YAAY,EAAE,eAAe,EAAE,UAAU,CAAC,EAGrC,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,slCAAA,EAAA,MAAA,EAAA,CAAA,mlDAAA,CAAA,EAAA;8BAY5B,IAAI,EAAA,CAAA;sBAAZ;gBASQ,QAAQ,EAAA,CAAA;sBAAhB;gBAMQ,eAAe,EAAA,CAAA;sBAAvB;gBASQ,KAAK,EAAA,CAAA;sBAAb;gBASQ,OAAO,EAAA,CAAA;sBAAf;gBASQ,WAAW,EAAA,CAAA;sBAAnB;gBAUQ,SAAS,EAAA,CAAA;sBAAjB;gBAUQ,cAAc,EAAA,CAAA;sBAAtB;gBAQS,YAAY,EAAA,CAAA;sBAArB;gBAQS,UAAU,EAAA,CAAA;sBAAnB;;;AExKH;;AAEG;;;;"}
|