@raintonic/formaui 0.2.0 → 0.3.0
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/CHANGELOG.md +104 -7
- package/LICENSE +21 -0
- package/README.md +199 -145
- package/fesm2022/raintonic-formaui-cdk-drag-drop.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs +0 -26
- package/fesm2022/raintonic-formaui-cdk-overlay.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs +2 -2
- package/fesm2022/raintonic-formaui-cdk-virtual-scroll.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-accordion.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-accordion.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-alert.mjs +24 -5
- package/fesm2022/raintonic-formaui-components-alert.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs +38 -9
- package/fesm2022/raintonic-formaui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-avatar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-badge.mjs +45 -31
- package/fesm2022/raintonic-formaui-components-badge.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-big-menu.mjs +23 -5
- package/fesm2022/raintonic-formaui-components-big-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-breadcrumb.mjs +24 -7
- package/fesm2022/raintonic-formaui-components-breadcrumb.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button-group.mjs +6 -6
- package/fesm2022/raintonic-formaui-components-button-group.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-button.mjs +63 -17
- package/fesm2022/raintonic-formaui-components-button.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-card.mjs +8 -8
- package/fesm2022/raintonic-formaui-components-card.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-checkbox.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-checkbox.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-data-table.mjs +67 -9
- package/fesm2022/raintonic-formaui-components-data-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-date-picker.mjs +63 -16
- package/fesm2022/raintonic-formaui-components-date-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-divider.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-divider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-drawer.mjs +19 -4
- package/fesm2022/raintonic-formaui-components-drawer.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-empty-state.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-empty-state.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-file-upload.mjs +25 -5
- package/fesm2022/raintonic-formaui-components-file-upload.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-form-field.mjs +21 -6
- package/fesm2022/raintonic-formaui-components-form-field.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-icon.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-icon.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-input.mjs +1 -1
- package/fesm2022/raintonic-formaui-components-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-list.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-list.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-menu.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-menu.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-number-input.mjs +20 -5
- package/fesm2022/raintonic-formaui-components-number-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-paginator.mjs +27 -7
- package/fesm2022/raintonic-formaui-components-paginator.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-password-input.mjs +23 -5
- package/fesm2022/raintonic-formaui-components-password-input.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-popover.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-popover.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-progressbar.mjs +32 -7
- package/fesm2022/raintonic-formaui-components-progressbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-radio.mjs +4 -4
- package/fesm2022/raintonic-formaui-components-radio.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-select.mjs +41 -26
- package/fesm2022/raintonic-formaui-components-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-side-panel.mjs +19 -4
- package/fesm2022/raintonic-formaui-components-side-panel.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-sidebar.mjs +23 -5
- package/fesm2022/raintonic-formaui-components-sidebar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-skeleton.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-skeleton.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-slider.mjs +23 -5
- package/fesm2022/raintonic-formaui-components-slider.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-spinner.mjs +24 -7
- package/fesm2022/raintonic-formaui-components-spinner.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-stepper.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-stepper.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tab.mjs +10 -10
- package/fesm2022/raintonic-formaui-components-tab.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tag.mjs +21 -4
- package/fesm2022/raintonic-formaui-components-tag.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-time-picker.mjs +26 -7
- package/fesm2022/raintonic-formaui-components-time-picker.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toggle.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-toggle.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-toolbar.mjs +41 -7
- package/fesm2022/raintonic-formaui-components-toolbar.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tooltip.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tooltip.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-select.mjs +2 -2
- package/fesm2022/raintonic-formaui-components-tree-select.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree-table.mjs +35 -6
- package/fesm2022/raintonic-formaui-components-tree-table.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-components-tree.mjs +25 -7
- package/fesm2022/raintonic-formaui-components-tree.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-core.mjs +25 -1
- package/fesm2022/raintonic-formaui-core.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-dialog.mjs +37 -37
- package/fesm2022/raintonic-formaui-services-dialog.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-notification.mjs +2 -2
- package/fesm2022/raintonic-formaui-services-notification.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-services-theme.mjs +3 -3
- package/fesm2022/raintonic-formaui-services-theme.mjs.map +1 -1
- package/fesm2022/raintonic-formaui-test-utils.mjs +21 -16
- package/fesm2022/raintonic-formaui-test-utils.mjs.map +1 -1
- package/fesm2022/raintonic-formaui.mjs +1 -1
- package/fesm2022/raintonic-formaui.mjs.map +1 -1
- package/llms-full.txt +36 -122
- package/llms.txt +4 -5
- package/package.json +1 -5
- package/styles/index.scss +5 -5
- package/styles/partials/_motion.scss +25 -0
- package/styles/partials/_theme.scss +6 -5
- package/styles/partials/components/_button.scss +361 -0
- package/styles/partials/components/_dialog.scss +180 -0
- package/styles/partials/components/_overlay.scss +87 -0
- package/styles/partials/themes/_dark.scss +14 -0
- package/styles/partials/themes/_light.scss +14 -0
- package/types/raintonic-formaui-cdk-overlay.d.ts +0 -1
- package/types/raintonic-formaui-cdk-overlay.d.ts.map +1 -1
- package/types/raintonic-formaui-components-alert.d.ts +11 -1
- package/types/raintonic-formaui-components-alert.d.ts.map +1 -1
- package/types/raintonic-formaui-components-autocomplete.d.ts +25 -7
- package/types/raintonic-formaui-components-autocomplete.d.ts.map +1 -1
- package/types/raintonic-formaui-components-badge.d.ts +20 -9
- package/types/raintonic-formaui-components-badge.d.ts.map +1 -1
- package/types/raintonic-formaui-components-big-menu.d.ts +12 -1
- package/types/raintonic-formaui-components-big-menu.d.ts.map +1 -1
- package/types/raintonic-formaui-components-breadcrumb.d.ts +11 -2
- package/types/raintonic-formaui-components-breadcrumb.d.ts.map +1 -1
- package/types/raintonic-formaui-components-button-group.d.ts +6 -6
- package/types/raintonic-formaui-components-button.d.ts +9 -7
- package/types/raintonic-formaui-components-button.d.ts.map +1 -1
- package/types/raintonic-formaui-components-card.d.ts +4 -4
- package/types/raintonic-formaui-components-checkbox.d.ts +1 -1
- package/types/raintonic-formaui-components-data-table.d.ts +56 -16
- package/types/raintonic-formaui-components-data-table.d.ts.map +1 -1
- package/types/raintonic-formaui-components-date-picker.d.ts +32 -4
- package/types/raintonic-formaui-components-date-picker.d.ts.map +1 -1
- package/types/raintonic-formaui-components-drawer.d.ts +10 -1
- package/types/raintonic-formaui-components-drawer.d.ts.map +1 -1
- package/types/raintonic-formaui-components-file-upload.d.ts +12 -1
- package/types/raintonic-formaui-components-file-upload.d.ts.map +1 -1
- package/types/raintonic-formaui-components-form-field.d.ts +12 -2
- package/types/raintonic-formaui-components-form-field.d.ts.map +1 -1
- package/types/raintonic-formaui-components-input.d.ts +1 -1
- package/types/raintonic-formaui-components-number-input.d.ts +11 -2
- package/types/raintonic-formaui-components-number-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-paginator.d.ts +13 -1
- package/types/raintonic-formaui-components-paginator.d.ts.map +1 -1
- package/types/raintonic-formaui-components-password-input.d.ts +12 -2
- package/types/raintonic-formaui-components-password-input.d.ts.map +1 -1
- package/types/raintonic-formaui-components-progressbar.d.ts +14 -1
- package/types/raintonic-formaui-components-progressbar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-select.d.ts.map +1 -1
- package/types/raintonic-formaui-components-side-panel.d.ts +10 -1
- package/types/raintonic-formaui-components-side-panel.d.ts.map +1 -1
- package/types/raintonic-formaui-components-sidebar.d.ts +12 -1
- package/types/raintonic-formaui-components-sidebar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-slider.d.ts +12 -1
- package/types/raintonic-formaui-components-slider.d.ts.map +1 -1
- package/types/raintonic-formaui-components-spinner.d.ts +12 -2
- package/types/raintonic-formaui-components-spinner.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tag.d.ts +10 -1
- package/types/raintonic-formaui-components-tag.d.ts.map +1 -1
- package/types/raintonic-formaui-components-time-picker.d.ts +14 -2
- package/types/raintonic-formaui-components-time-picker.d.ts.map +1 -1
- package/types/raintonic-formaui-components-toggle.d.ts +1 -1
- package/types/raintonic-formaui-components-toolbar.d.ts +22 -4
- package/types/raintonic-formaui-components-toolbar.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tree-table.d.ts +29 -4
- package/types/raintonic-formaui-components-tree-table.d.ts.map +1 -1
- package/types/raintonic-formaui-components-tree.d.ts +12 -1
- package/types/raintonic-formaui-components-tree.d.ts.map +1 -1
- package/types/raintonic-formaui-core.d.ts +19 -2
- package/types/raintonic-formaui-core.d.ts.map +1 -1
- package/types/raintonic-formaui-services-dialog.d.ts +1 -1
- package/types/raintonic-formaui-services-theme.d.ts +3 -3
- package/types/raintonic-formaui-test-utils.d.ts +15 -2
- package/types/raintonic-formaui-test-utils.d.ts.map +1 -1
- package/types/raintonic-formaui.d.ts +1 -1
- package/fesm2022/raintonic-formaui-components-dynamic-form.mjs +0 -266
- package/fesm2022/raintonic-formaui-components-dynamic-form.mjs.map +0 -1
- package/types/raintonic-formaui-components-dynamic-form.d.ts +0 -412
- package/types/raintonic-formaui-components-dynamic-form.d.ts.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-divider.mjs","sources":["../../../lib/components/divider/divider.component.ts","../../../lib/components/divider/divider.component.html","../../../lib/components/divider/raintonic-formaui-components-divider.ts"],"sourcesContent":["import {\n afterNextRender,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n input,\n signal,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { FuiDividerOrientation, FuiDividerTextAlign } from './divider.types';\n\n@Component({\n selector: 'fui-divider',\n standalone: true,\n templateUrl: './divider.component.html',\n styleUrls: ['./divider.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'fui-divider',\n '[class.fui-divider--vertical]': 'orientation() === \"vertical\"',\n '[class.fui-divider--inset]': 'inset()',\n '[class.fui-divider--with-text]': 'hasContent()',\n '[attr.role]': '\"separator\"',\n '[attr.aria-orientation]': 'orientation()',\n },\n})\nexport class FuiDividerComponent {\n static nextId = 0;\n\n readonly orientation = input<FuiDividerOrientation>('horizontal');\n readonly textAlign = input<FuiDividerTextAlign>('center');\n readonly inset = input(false);\n\n readonly hasContent = signal(false);\n\n @ViewChild('contentWrapper', { static: false }) contentWrapper?: ElementRef<HTMLElement>;\n\n constructor() {\n afterNextRender(() => {\n if (this.contentWrapper) {\n this.hasContent.set(this.contentWrapper.nativeElement.childNodes.length > 0);\n }\n });\n }\n}\n","@if (orientation() === 'horizontal' && hasContent()) {\n <div\n class=\"fui-divider__wrapper\"\n [class.fui-divider__wrapper--start]=\"textAlign() === 'start'\"\n [class.fui-divider__wrapper--center]=\"textAlign() === 'center'\"\n [class.fui-divider__wrapper--end]=\"textAlign() === 'end'\"\n >\n <span class=\"fui-divider__line fui-divider__line--before\"></span>\n <span class=\"fui-divider__text\" #contentWrapper>\n <ng-content></ng-content>\n </span>\n <span class=\"fui-divider__line fui-divider__line--after\"></span>\n </div>\n} @else {\n <span class=\"fui-divider__line\"></span>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MA4Ba,mBAAmB,CAAA;AAC9B,IAAA,OAAO,MAAM,GAAG,CAAC;AAER,IAAA,WAAW,GAAG,KAAK,CAAwB,YAAY,kFAAC;AACxD,IAAA,SAAS,GAAG,KAAK,CAAsB,QAAQ,gFAAC;AAChD,IAAA,KAAK,GAAG,KAAK,CAAC,KAAK,4EAAC;AAEpB,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,iFAAC;AAEa,IAAA,cAAc;AAE9D,IAAA,WAAA,GAAA;QACE,eAAe,CAAC,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9E;AACF,QAAA,CAAC,CAAC;IACJ;uGAjBW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,o2BC5BhC,
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-divider.mjs","sources":["../../../lib/components/divider/divider.component.ts","../../../lib/components/divider/divider.component.html","../../../lib/components/divider/raintonic-formaui-components-divider.ts"],"sourcesContent":["import {\r\n afterNextRender,\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n input,\r\n signal,\r\n ViewChild,\r\n ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { FuiDividerOrientation, FuiDividerTextAlign } from './divider.types';\r\n\r\n@Component({\r\n selector: 'fui-divider',\r\n standalone: true,\r\n templateUrl: './divider.component.html',\r\n styleUrls: ['./divider.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-divider',\r\n '[class.fui-divider--vertical]': 'orientation() === \"vertical\"',\r\n '[class.fui-divider--inset]': 'inset()',\r\n '[class.fui-divider--with-text]': 'hasContent()',\r\n '[attr.role]': '\"separator\"',\r\n '[attr.aria-orientation]': 'orientation()',\r\n },\r\n})\r\nexport class FuiDividerComponent {\r\n static nextId = 0;\r\n\r\n readonly orientation = input<FuiDividerOrientation>('horizontal');\r\n readonly textAlign = input<FuiDividerTextAlign>('center');\r\n readonly inset = input(false);\r\n\r\n readonly hasContent = signal(false);\r\n\r\n @ViewChild('contentWrapper', { static: false }) contentWrapper?: ElementRef<HTMLElement>;\r\n\r\n constructor() {\r\n afterNextRender(() => {\r\n if (this.contentWrapper) {\r\n this.hasContent.set(this.contentWrapper.nativeElement.childNodes.length > 0);\r\n }\r\n });\r\n }\r\n}\r\n","@if (orientation() === 'horizontal' && hasContent()) {\r\n <div\r\n class=\"fui-divider__wrapper\"\r\n [class.fui-divider__wrapper--start]=\"textAlign() === 'start'\"\r\n [class.fui-divider__wrapper--center]=\"textAlign() === 'center'\"\r\n [class.fui-divider__wrapper--end]=\"textAlign() === 'end'\"\r\n >\r\n <span class=\"fui-divider__line fui-divider__line--before\"></span>\r\n <span class=\"fui-divider__text\" #contentWrapper>\r\n <ng-content></ng-content>\r\n </span>\r\n <span class=\"fui-divider__line fui-divider__line--after\"></span>\r\n </div>\r\n} @else {\r\n <span class=\"fui-divider__line\"></span>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MA4Ba,mBAAmB,CAAA;AAC9B,IAAA,OAAO,MAAM,GAAG,CAAC;AAER,IAAA,WAAW,GAAG,KAAK,CAAwB,YAAY,kFAAC;AACxD,IAAA,SAAS,GAAG,KAAK,CAAsB,QAAQ,gFAAC;AAChD,IAAA,KAAK,GAAG,KAAK,CAAC,KAAK,4EAAC;AAEpB,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,iFAAC;AAEa,IAAA,cAAc;AAE9D,IAAA,WAAA,GAAA;QACE,eAAe,CAAC,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;YAC9E;AACF,QAAA,CAAC,CAAC;IACJ;uGAjBW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,o2BC5BhC,opBAgBA,EAAA,MAAA,EAAA,CAAA,8uCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDYa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAhB/B,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,+BAA+B,EAAE,8BAA8B;AAC/D,wBAAA,4BAA4B,EAAE,SAAS;AACvC,wBAAA,gCAAgC,EAAE,cAAc;AAChD,wBAAA,aAAa,EAAE,aAAa;AAC5B,wBAAA,yBAAyB,EAAE,eAAe;AAC3C,qBAAA,EAAA,QAAA,EAAA,opBAAA,EAAA,MAAA,EAAA,CAAA,8uCAAA,CAAA,EAAA;;sBAWA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;;;AErChD;;AAEG;;;;"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, booleanAttribute, output, signal, viewChild, computed, effect, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { Injectable, inject, ChangeDetectorRef, input, booleanAttribute, output, signal, viewChild, computed, effect, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
3
4
|
import { DOCUMENT } from '@angular/common';
|
|
4
5
|
import { FuiIconComponent } from '@raintonic/formaui/components/icon';
|
|
6
|
+
import { FuiIntlBase } from '@raintonic/formaui/core';
|
|
5
7
|
|
|
6
8
|
const DRAWER_SIZES = {
|
|
7
9
|
sm: '320px',
|
|
@@ -10,8 +12,20 @@ const DRAWER_SIZES = {
|
|
|
10
12
|
full: '100%',
|
|
11
13
|
};
|
|
12
14
|
|
|
15
|
+
class FuiDrawerIntl extends FuiIntlBase {
|
|
16
|
+
closeAriaLabel = 'Close drawer';
|
|
17
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
18
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerIntl, providedIn: 'root' });
|
|
19
|
+
}
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerIntl, decorators: [{
|
|
21
|
+
type: Injectable,
|
|
22
|
+
args: [{ providedIn: 'root' }]
|
|
23
|
+
}] });
|
|
24
|
+
|
|
13
25
|
class FuiDrawerComponent {
|
|
14
26
|
_document = inject(DOCUMENT);
|
|
27
|
+
intl = inject(FuiDrawerIntl);
|
|
28
|
+
_cdr = inject(ChangeDetectorRef);
|
|
15
29
|
// Inputs
|
|
16
30
|
position = input('right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
17
31
|
mode = input('overlay', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
@@ -61,6 +75,7 @@ class FuiDrawerComponent {
|
|
|
61
75
|
}
|
|
62
76
|
}
|
|
63
77
|
});
|
|
78
|
+
this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
|
|
64
79
|
}
|
|
65
80
|
onKeydown(event) {
|
|
66
81
|
if (!this._opened())
|
|
@@ -159,7 +174,7 @@ class FuiDrawerComponent {
|
|
|
159
174
|
return Array.from(panel.querySelectorAll(selectors)).filter((el) => el.offsetParent !== null);
|
|
160
175
|
}
|
|
161
176
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDrawerComponent, isStandalone: true, selector: "fui-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class.fui-drawer--open": "_opened()", "class.fui-drawer--left": "position() === \"left\"", "class.fui-drawer--right": "position() === \"right\"", "class.fui-drawer--top": "position() === \"top\"", "class.fui-drawer--bottom": "position() === \"bottom\"", "class.fui-drawer--overlay": "mode() === \"overlay\"", "class.fui-drawer--push": "mode() === \"push\"", "attr.role": "\"dialog\"", "attr.aria-modal": "_opened() ? \"true\" : null", "attr.aria-label": "ariaLabel() || (!ariaLabelledBy() ? title() : null)", "attr.aria-labelledby": "ariaLabelledBy()" }, classAttribute: "fui-drawer" }, viewQueries: [{ propertyName: "drawerPanel", first: true, predicate: ["drawerPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (_opened() && hasBackdrop()) {\n <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\n}\n\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\n @if (title() || showCloseButton()) {\n <div class=\"fui-drawer__header\">\n @if (title()) {\n <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\n }\n @if (showCloseButton()) {\n <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" aria-label=\"
|
|
177
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDrawerComponent, isStandalone: true, selector: "fui-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class.fui-drawer--open": "_opened()", "class.fui-drawer--left": "position() === \"left\"", "class.fui-drawer--right": "position() === \"right\"", "class.fui-drawer--top": "position() === \"top\"", "class.fui-drawer--bottom": "position() === \"bottom\"", "class.fui-drawer--overlay": "mode() === \"overlay\"", "class.fui-drawer--push": "mode() === \"push\"", "attr.role": "\"dialog\"", "attr.aria-modal": "_opened() ? \"true\" : null", "attr.aria-label": "ariaLabel() || (!ariaLabelledBy() ? title() : null)", "attr.aria-labelledby": "ariaLabelledBy()" }, classAttribute: "fui-drawer" }, viewQueries: [{ propertyName: "drawerPanel", first: true, predicate: ["drawerPanel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (_opened() && hasBackdrop()) {\r\n <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n @if (title() || showCloseButton()) {\r\n <div class=\"fui-drawer__header\">\r\n @if (title()) {\r\n <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n }\r\n @if (showCloseButton()) {\r\n <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fui-drawer__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div class=\"fui-drawer__footer\">\r\n <ng-content select=\"[drawerFooter]\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-drawer{--fui-drawer-z-index: var(--fui-z-index-modal, 1050);--fui-drawer-bg: var(--fui-surface-00);--fui-drawer-border-color: var(--fui-border-color);--fui-drawer-shadow: -4px 0 24px var(--fui-black-10);--fui-drawer-backdrop-color: var(--fui-black-30);--fui-drawer-header-padding: var(--fui-spacing-04) var(--fui-spacing-05);--fui-drawer-content-padding: var(--fui-spacing-05);--fui-drawer-footer-padding: var(--fui-spacing-04) var(--fui-spacing-05);position:fixed;inset:0;pointer-events:none;z-index:var(--fui-drawer-z-index);overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--fui-duration-moderate-01)}.fui-drawer--open{pointer-events:auto;visibility:visible;transition-delay:0s}.fui-drawer__backdrop{position:fixed;inset:0;background-color:var(--fui-drawer-backdrop-color);z-index:1;opacity:0;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-drawer--open .fui-drawer__backdrop{opacity:1}.fui-drawer__panel{position:fixed;display:flex;flex-direction:column;background-color:var(--fui-drawer-bg);z-index:2;pointer-events:auto;transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms}.fui-drawer--right .fui-drawer__panel{top:0;right:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-left:1px solid var(--fui-drawer-border-color);box-shadow:var(--fui-drawer-shadow);transform:translate(100%)}.fui-drawer--right.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--left .fui-drawer__panel{top:0;left:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-right:1px solid var(--fui-drawer-border-color);box-shadow:4px 0 24px var(--fui-black-10);transform:translate(-100%)}.fui-drawer--left.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--top .fui-drawer__panel{top:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-bottom:1px solid var(--fui-drawer-border-color);box-shadow:0 4px 24px var(--fui-black-10);transform:translateY(-100%)}.fui-drawer--top.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer--bottom .fui-drawer__panel{bottom:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-top:1px solid var(--fui-drawer-border-color);box-shadow:0 -4px 24px var(--fui-black-10);transform:translateY(100%)}.fui-drawer--bottom.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-drawer-header-padding);border-bottom:1px solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__title{font-size:var(--fui-font-size-03);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-primary);margin:0}.fui-drawer__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-moderate-01) var(--fui-ease-standard),color var(--fui-duration-moderate-01) var(--fui-ease-standard)}.fui-drawer__close:hover{background-color:var(--fui-surface-02);color:var(--fui-text-primary)}.fui-drawer__close:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-drawer__content{flex:1;overflow-y:auto;padding:var(--fui-drawer-content-padding)}.fui-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-03);padding:var(--fui-drawer-footer-padding);border-top:1px solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-drawer__backdrop,.fui-drawer__panel,.fui-drawer__close{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
163
178
|
}
|
|
164
179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDrawerComponent, decorators: [{
|
|
165
180
|
type: Component,
|
|
@@ -176,7 +191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
176
191
|
'[attr.aria-modal]': '_opened() ? "true" : null',
|
|
177
192
|
'[attr.aria-label]': 'ariaLabel() || (!ariaLabelledBy() ? title() : null)',
|
|
178
193
|
'[attr.aria-labelledby]': 'ariaLabelledBy()',
|
|
179
|
-
}, template: "@if (_opened() && hasBackdrop()) {\n <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\n}\n\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\n @if (title() || showCloseButton()) {\n <div class=\"fui-drawer__header\">\n @if (title()) {\n <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\n }\n @if (showCloseButton()) {\n <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" aria-label=\"
|
|
194
|
+
}, template: "@if (_opened() && hasBackdrop()) {\r\n <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n @if (title() || showCloseButton()) {\r\n <div class=\"fui-drawer__header\">\r\n @if (title()) {\r\n <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n }\r\n @if (showCloseButton()) {\r\n <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fui-drawer__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div class=\"fui-drawer__footer\">\r\n <ng-content select=\"[drawerFooter]\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-drawer{--fui-drawer-z-index: var(--fui-z-index-modal, 1050);--fui-drawer-bg: var(--fui-surface-00);--fui-drawer-border-color: var(--fui-border-color);--fui-drawer-shadow: -4px 0 24px var(--fui-black-10);--fui-drawer-backdrop-color: var(--fui-black-30);--fui-drawer-header-padding: var(--fui-spacing-04) var(--fui-spacing-05);--fui-drawer-content-padding: var(--fui-spacing-05);--fui-drawer-footer-padding: var(--fui-spacing-04) var(--fui-spacing-05);position:fixed;inset:0;pointer-events:none;z-index:var(--fui-drawer-z-index);overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--fui-duration-moderate-01)}.fui-drawer--open{pointer-events:auto;visibility:visible;transition-delay:0s}.fui-drawer__backdrop{position:fixed;inset:0;background-color:var(--fui-drawer-backdrop-color);z-index:1;opacity:0;transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-drawer--open .fui-drawer__backdrop{opacity:1}.fui-drawer__panel{position:fixed;display:flex;flex-direction:column;background-color:var(--fui-drawer-bg);z-index:2;pointer-events:auto;transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms}.fui-drawer--right .fui-drawer__panel{top:0;right:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-left:1px solid var(--fui-drawer-border-color);box-shadow:var(--fui-drawer-shadow);transform:translate(100%)}.fui-drawer--right.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--left .fui-drawer__panel{top:0;left:0;bottom:0;width:var(--_drawer-size, 480px);max-width:100%;border-right:1px solid var(--fui-drawer-border-color);box-shadow:4px 0 24px var(--fui-black-10);transform:translate(-100%)}.fui-drawer--left.fui-drawer--open .fui-drawer__panel{transform:translate(0)}.fui-drawer--top .fui-drawer__panel{top:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-bottom:1px solid var(--fui-drawer-border-color);box-shadow:0 4px 24px var(--fui-black-10);transform:translateY(-100%)}.fui-drawer--top.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer--bottom .fui-drawer__panel{bottom:0;left:0;right:0;height:var(--_drawer-size, 480px);max-height:100%;border-top:1px solid var(--fui-drawer-border-color);box-shadow:0 -4px 24px var(--fui-black-10);transform:translateY(100%)}.fui-drawer--bottom.fui-drawer--open .fui-drawer__panel{transform:translateY(0)}.fui-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--fui-drawer-header-padding);border-bottom:1px solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__title{font-size:var(--fui-font-size-03);font-weight:var(--fui-font-weight-semibold);color:var(--fui-text-primary);margin:0}.fui-drawer__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);cursor:pointer;transition:background-color var(--fui-duration-moderate-01) var(--fui-ease-standard),color var(--fui-duration-moderate-01) var(--fui-ease-standard)}.fui-drawer__close:hover{background-color:var(--fui-surface-02);color:var(--fui-text-primary)}.fui-drawer__close:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-drawer__content{flex:1;overflow-y:auto;padding:var(--fui-drawer-content-padding)}.fui-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fui-spacing-03);padding:var(--fui-drawer-footer-padding);border-top:1px solid var(--fui-drawer-border-color);flex-shrink:0}.fui-drawer__footer:empty{display:none}@media(prefers-reduced-motion:reduce){.fui-drawer__backdrop,.fui-drawer__panel,.fui-drawer__close{transition:none}}\n"] }]
|
|
180
195
|
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], closed: [{ type: i0.Output, args: ["closed"] }], drawerPanel: [{ type: i0.ViewChild, args: ['drawerPanel', { isSignal: true }] }], onKeydown: [{
|
|
181
196
|
type: HostListener,
|
|
182
197
|
args: ['document:keydown', ['$event']]
|
|
@@ -186,5 +201,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
186
201
|
* Generated bundle index. Do not edit.
|
|
187
202
|
*/
|
|
188
203
|
|
|
189
|
-
export { DRAWER_SIZES, FuiDrawerComponent };
|
|
204
|
+
export { DRAWER_SIZES, FuiDrawerComponent, FuiDrawerIntl };
|
|
190
205
|
//# sourceMappingURL=raintonic-formaui-components-drawer.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-drawer.mjs","sources":["../../../lib/components/drawer/drawer.types.ts","../../../lib/components/drawer/drawer.component.ts","../../../lib/components/drawer/drawer.component.html","../../../lib/components/drawer/raintonic-formaui-components-drawer.ts"],"sourcesContent":["export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';\nexport type DrawerMode = 'overlay' | 'push';\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\n\nexport const DRAWER_SIZES: Record<DrawerSize, string> = {\n sm: '320px',\n md: '480px',\n lg: '640px',\n full: '100%',\n};\n","import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n input,\n output,\n signal,\n computed,\n effect,\n booleanAttribute,\n HostListener,\n ElementRef,\n inject,\n viewChild,\n Signal,\n WritableSignal,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\nimport { DrawerPosition, DrawerMode, DrawerSize, DRAWER_SIZES } from './drawer.types';\n\n@Component({\n selector: 'fui-drawer',\n standalone: true,\n imports: [FuiIconComponent],\n templateUrl: './drawer.component.html',\n styleUrls: ['./drawer.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'fui-drawer',\n '[class.fui-drawer--open]': '_opened()',\n '[class.fui-drawer--left]': 'position() === \"left\"',\n '[class.fui-drawer--right]': 'position() === \"right\"',\n '[class.fui-drawer--top]': 'position() === \"top\"',\n '[class.fui-drawer--bottom]': 'position() === \"bottom\"',\n '[class.fui-drawer--overlay]': 'mode() === \"overlay\"',\n '[class.fui-drawer--push]': 'mode() === \"push\"',\n '[attr.role]': '\"dialog\"',\n '[attr.aria-modal]': '_opened() ? \"true\" : null',\n '[attr.aria-label]': 'ariaLabel() || (!ariaLabelledBy() ? title() : null)',\n '[attr.aria-labelledby]': 'ariaLabelledBy()',\n },\n})\nexport class FuiDrawerComponent {\n private readonly _document = inject(DOCUMENT);\n\n // Inputs\n readonly position = input<DrawerPosition>('right');\n readonly mode = input<DrawerMode>('overlay');\n readonly size = input('md');\n readonly opened = input<boolean, unknown>(false, { transform: booleanAttribute });\n readonly hasBackdrop = input<boolean, unknown>(true, { transform: booleanAttribute });\n readonly closeOnBackdropClick = input<boolean, unknown>(true, { transform: booleanAttribute });\n readonly closeOnEsc = input<boolean, unknown>(true, { transform: booleanAttribute });\n readonly title = input('');\n readonly showCloseButton = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n /** ARIA label for the drawer, used when no visible title is present */\n readonly ariaLabel = input<string | null>(null);\n\n /** ID of an element that labels the drawer */\n readonly ariaLabelledBy = input<string | null>(null);\n\n // Outputs\n readonly openedChange = output<boolean>();\n readonly closed = output();\n\n // Internal state\n readonly _opened: WritableSignal<boolean> = signal(false);\n readonly _animating: WritableSignal<boolean> = signal(false);\n\n // Track the last input value to avoid effect re-triggering on programmatic changes\n private _lastInputValue = false;\n\n // Focus management\n private _previouslyFocusedElement: HTMLElement | null = null;\n\n // ViewChild\n readonly drawerPanel: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('drawerPanel');\n\n // Computed\n readonly _sizeValue: Signal<string> = computed(() => {\n const size = this.size();\n return DRAWER_SIZES[size as DrawerSize] ?? size;\n });\n\n readonly _isHorizontal: Signal<boolean> = computed(() => {\n const pos = this.position();\n return pos === 'left' || pos === 'right';\n });\n\n constructor() {\n // Sync opened input with internal state — only react when the input actually changes\n effect(() => {\n const inputValue = this.opened();\n if (inputValue !== this._lastInputValue) {\n this._lastInputValue = inputValue;\n if (inputValue) {\n this._openInternal();\n } else {\n this._closeInternal();\n }\n }\n });\n }\n\n @HostListener('document:keydown', ['$event'])\n onKeydown(event: KeyboardEvent): void {\n if (!this._opened()) return;\n\n if (event.key === 'Escape' && this.closeOnEsc()) {\n this.close();\n return;\n }\n\n // Focus trap cycling\n if (event.key === 'Tab') {\n const focusableElements = this._getAllFocusableElements();\n if (focusableElements.length === 0) {\n event.preventDefault();\n return;\n }\n\n const firstFocusable = focusableElements[0];\n const lastFocusable = focusableElements[focusableElements.length - 1];\n const activeElement = this._document.activeElement;\n\n if (event.shiftKey) {\n if (activeElement === firstFocusable) {\n event.preventDefault();\n lastFocusable.focus();\n }\n } else {\n if (activeElement === lastFocusable) {\n event.preventDefault();\n firstFocusable.focus();\n }\n }\n }\n }\n\n open(): void {\n if (!this._opened()) {\n this._openInternal();\n this.openedChange.emit(true);\n }\n }\n\n close(): void {\n if (this._opened()) {\n this._closeInternal();\n this.openedChange.emit(false);\n this.closed.emit();\n }\n }\n\n toggle(): void {\n if (this._opened()) {\n this.close();\n } else {\n this.open();\n }\n }\n\n private _openInternal(): void {\n this._previouslyFocusedElement = document.activeElement as HTMLElement;\n this._opened.set(true);\n\n // Focus the panel after it renders\n setTimeout(() => {\n this._focusFirstTabbable();\n });\n }\n\n private _closeInternal(): void {\n this._opened.set(false);\n\n // Restore focus\n if (this._previouslyFocusedElement) {\n this._previouslyFocusedElement.focus();\n this._previouslyFocusedElement = null;\n }\n }\n\n private _focusFirstTabbable(): void {\n const panel = this.drawerPanel()?.nativeElement;\n if (!panel) return;\n\n const focusable = this._getAllFocusableElements();\n\n if (focusable.length > 0) {\n focusable[0].focus();\n } else {\n panel.setAttribute('tabindex', '-1');\n panel.focus();\n }\n }\n\n private _getAllFocusableElements(): HTMLElement[] {\n const panel = this.drawerPanel()?.nativeElement;\n if (!panel) return [];\n\n const selectors = [\n 'a[href]',\n 'button:not([disabled])',\n 'textarea:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n '[contenteditable=\"true\"]',\n ].join(',');\n\n return Array.from(panel.querySelectorAll<HTMLElement>(selectors)).filter((el) => el.offsetParent !== null);\n }\n}\n","@if (_opened() && hasBackdrop()) {\n <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\n}\n\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\n @if (title() || showCloseButton()) {\n <div class=\"fui-drawer__header\">\n @if (title()) {\n <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\n }\n @if (showCloseButton()) {\n <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" aria-label=\"Close drawer\">\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\n </button>\n }\n </div>\n }\n\n <div class=\"fui-drawer__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"fui-drawer__footer\">\n <ng-content select=\"[drawerFooter]\"></ng-content>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-drawer.mjs","sources":["../../../lib/components/drawer/drawer.types.ts","../../../lib/components/drawer/drawer.intl.ts","../../../lib/components/drawer/drawer.component.ts","../../../lib/components/drawer/drawer.component.html","../../../lib/components/drawer/raintonic-formaui-components-drawer.ts"],"sourcesContent":["export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';\r\nexport type DrawerMode = 'overlay' | 'push';\r\nexport type DrawerSize = 'sm' | 'md' | 'lg' | 'full';\r\n\r\nexport const DRAWER_SIZES: Record<DrawerSize, string> = {\r\n sm: '320px',\r\n md: '480px',\r\n lg: '640px',\r\n full: '100%',\r\n};\r\n","import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiDrawerIntl extends FuiIntlBase {\r\n closeAriaLabel = 'Close drawer';\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n input,\r\n output,\r\n signal,\r\n computed,\r\n effect,\r\n booleanAttribute,\r\n HostListener,\r\n ElementRef,\r\n inject,\r\n viewChild,\r\n Signal,\r\n WritableSignal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { DOCUMENT } from '@angular/common';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { DrawerPosition, DrawerMode, DrawerSize, DRAWER_SIZES } from './drawer.types';\r\nimport { FuiDrawerIntl } from './drawer.intl';\r\n\r\n@Component({\r\n selector: 'fui-drawer',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './drawer.component.html',\r\n styleUrls: ['./drawer.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-drawer',\r\n '[class.fui-drawer--open]': '_opened()',\r\n '[class.fui-drawer--left]': 'position() === \"left\"',\r\n '[class.fui-drawer--right]': 'position() === \"right\"',\r\n '[class.fui-drawer--top]': 'position() === \"top\"',\r\n '[class.fui-drawer--bottom]': 'position() === \"bottom\"',\r\n '[class.fui-drawer--overlay]': 'mode() === \"overlay\"',\r\n '[class.fui-drawer--push]': 'mode() === \"push\"',\r\n '[attr.role]': '\"dialog\"',\r\n '[attr.aria-modal]': '_opened() ? \"true\" : null',\r\n '[attr.aria-label]': 'ariaLabel() || (!ariaLabelledBy() ? title() : null)',\r\n '[attr.aria-labelledby]': 'ariaLabelledBy()',\r\n },\r\n})\r\nexport class FuiDrawerComponent {\r\n private readonly _document = inject(DOCUMENT);\r\n readonly intl = inject(FuiDrawerIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n // Inputs\r\n readonly position = input<DrawerPosition>('right');\r\n readonly mode = input<DrawerMode>('overlay');\r\n readonly size = input('md');\r\n readonly opened = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly hasBackdrop = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n readonly closeOnBackdropClick = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n readonly closeOnEsc = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n readonly title = input('');\r\n readonly showCloseButton = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n\r\n /** ARIA label for the drawer, used when no visible title is present */\r\n readonly ariaLabel = input<string | null>(null);\r\n\r\n /** ID of an element that labels the drawer */\r\n readonly ariaLabelledBy = input<string | null>(null);\r\n\r\n // Outputs\r\n readonly openedChange = output<boolean>();\r\n readonly closed = output();\r\n\r\n // Internal state\r\n readonly _opened: WritableSignal<boolean> = signal(false);\r\n readonly _animating: WritableSignal<boolean> = signal(false);\r\n\r\n // Track the last input value to avoid effect re-triggering on programmatic changes\r\n private _lastInputValue = false;\r\n\r\n // Focus management\r\n private _previouslyFocusedElement: HTMLElement | null = null;\r\n\r\n // ViewChild\r\n readonly drawerPanel: Signal<ElementRef<HTMLElement> | undefined> = viewChild<ElementRef<HTMLElement>>('drawerPanel');\r\n\r\n // Computed\r\n readonly _sizeValue: Signal<string> = computed(() => {\r\n const size = this.size();\r\n return DRAWER_SIZES[size as DrawerSize] ?? size;\r\n });\r\n\r\n readonly _isHorizontal: Signal<boolean> = computed(() => {\r\n const pos = this.position();\r\n return pos === 'left' || pos === 'right';\r\n });\r\n\r\n constructor() {\r\n // Sync opened input with internal state — only react when the input actually changes\r\n effect(() => {\r\n const inputValue = this.opened();\r\n if (inputValue !== this._lastInputValue) {\r\n this._lastInputValue = inputValue;\r\n if (inputValue) {\r\n this._openInternal();\r\n } else {\r\n this._closeInternal();\r\n }\r\n }\r\n });\r\n\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n }\r\n\r\n @HostListener('document:keydown', ['$event'])\r\n onKeydown(event: KeyboardEvent): void {\r\n if (!this._opened()) return;\r\n\r\n if (event.key === 'Escape' && this.closeOnEsc()) {\r\n this.close();\r\n return;\r\n }\r\n\r\n // Focus trap cycling\r\n if (event.key === 'Tab') {\r\n const focusableElements = this._getAllFocusableElements();\r\n if (focusableElements.length === 0) {\r\n event.preventDefault();\r\n return;\r\n }\r\n\r\n const firstFocusable = focusableElements[0];\r\n const lastFocusable = focusableElements[focusableElements.length - 1];\r\n const activeElement = this._document.activeElement;\r\n\r\n if (event.shiftKey) {\r\n if (activeElement === firstFocusable) {\r\n event.preventDefault();\r\n lastFocusable.focus();\r\n }\r\n } else {\r\n if (activeElement === lastFocusable) {\r\n event.preventDefault();\r\n firstFocusable.focus();\r\n }\r\n }\r\n }\r\n }\r\n\r\n open(): void {\r\n if (!this._opened()) {\r\n this._openInternal();\r\n this.openedChange.emit(true);\r\n }\r\n }\r\n\r\n close(): void {\r\n if (this._opened()) {\r\n this._closeInternal();\r\n this.openedChange.emit(false);\r\n this.closed.emit();\r\n }\r\n }\r\n\r\n toggle(): void {\r\n if (this._opened()) {\r\n this.close();\r\n } else {\r\n this.open();\r\n }\r\n }\r\n\r\n private _openInternal(): void {\r\n this._previouslyFocusedElement = document.activeElement as HTMLElement;\r\n this._opened.set(true);\r\n\r\n // Focus the panel after it renders\r\n setTimeout(() => {\r\n this._focusFirstTabbable();\r\n });\r\n }\r\n\r\n private _closeInternal(): void {\r\n this._opened.set(false);\r\n\r\n // Restore focus\r\n if (this._previouslyFocusedElement) {\r\n this._previouslyFocusedElement.focus();\r\n this._previouslyFocusedElement = null;\r\n }\r\n }\r\n\r\n private _focusFirstTabbable(): void {\r\n const panel = this.drawerPanel()?.nativeElement;\r\n if (!panel) return;\r\n\r\n const focusable = this._getAllFocusableElements();\r\n\r\n if (focusable.length > 0) {\r\n focusable[0].focus();\r\n } else {\r\n panel.setAttribute('tabindex', '-1');\r\n panel.focus();\r\n }\r\n }\r\n\r\n private _getAllFocusableElements(): HTMLElement[] {\r\n const panel = this.drawerPanel()?.nativeElement;\r\n if (!panel) return [];\r\n\r\n const selectors = [\r\n 'a[href]',\r\n 'button:not([disabled])',\r\n 'textarea:not([disabled])',\r\n 'input:not([disabled])',\r\n 'select:not([disabled])',\r\n '[tabindex]:not([tabindex=\"-1\"])',\r\n '[contenteditable=\"true\"]',\r\n ].join(',');\r\n\r\n return Array.from(panel.querySelectorAll<HTMLElement>(selectors)).filter((el) => el.offsetParent !== null);\r\n }\r\n}\r\n","@if (_opened() && hasBackdrop()) {\r\n <div class=\"fui-drawer__backdrop\" (click)=\"closeOnBackdropClick() ? close() : null\" aria-hidden=\"true\"></div>\r\n}\r\n\r\n<div class=\"fui-drawer__panel\" [style.--_drawer-size]=\"_sizeValue()\" #drawerPanel tabindex=\"-1\">\r\n @if (title() || showCloseButton()) {\r\n <div class=\"fui-drawer__header\">\r\n @if (title()) {\r\n <h2 class=\"fui-drawer__title\">{{ title() }}</h2>\r\n }\r\n @if (showCloseButton()) {\r\n <button type=\"button\" class=\"fui-drawer__close\" (click)=\"close()\" [attr.aria-label]=\"intl.closeAriaLabel\">\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"fui-drawer__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n <div class=\"fui-drawer__footer\">\r\n <ng-content select=\"[drawerFooter]\"></ng-content>\r\n </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ class FuiEmptyStateComponent {
|
|
|
12
12
|
return s === 'sm' ? 'md' : 'lg';
|
|
13
13
|
}, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
|
|
14
14
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiEmptyStateComponent, isStandalone: true, selector: "fui-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class.fui-empty-state--sm": "size() === \"sm\"", "class.fui-empty-state--md": "size() === \"md\"", "class.fui-empty-state--lg": "size() === \"lg\"" }, classAttribute: "fui-empty-state" }, ngImport: i0, template: "<div class=\"fui-empty-state__content\">\n @if (icon()) {\n <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\n <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\n </div>\n }\n @if (title()) {\n <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\n }\n @if (description()) {\n <p class=\"fui-empty-state__description\">{{ description() }}</p>\n }\n <div class=\"fui-empty-state__actions\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-padding-48, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-gap-12, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-gap-8, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);margin:0;line-height:1.5}.fui-empty-state__actions{margin-top:var(--fui-gap-16, 1rem);display:flex;gap:var(--fui-gap-8, .5rem)}.fui-empty-state--sm{padding:var(--fui-padding-24, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-font-size-03)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-font-size-05)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
15
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiEmptyStateComponent, isStandalone: true, selector: "fui-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class.fui-empty-state--sm": "size() === \"sm\"", "class.fui-empty-state--md": "size() === \"md\"", "class.fui-empty-state--lg": "size() === \"lg\"" }, classAttribute: "fui-empty-state" }, ngImport: i0, template: "<div class=\"fui-empty-state__content\">\r\n @if (icon()) {\r\n <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n </div>\r\n }\r\n @if (title()) {\r\n <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n }\r\n @if (description()) {\r\n <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n }\r\n <div class=\"fui-empty-state__actions\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-padding-48, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-gap-12, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-gap-8, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);margin:0;line-height:1.5}.fui-empty-state__actions{margin-top:var(--fui-gap-16, 1rem);display:flex;gap:var(--fui-gap-8, .5rem)}.fui-empty-state--sm{padding:var(--fui-padding-24, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-font-size-03)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-font-size-05)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16
16
|
}
|
|
17
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiEmptyStateComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
@@ -22,7 +22,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
22
22
|
'[class.fui-empty-state--md]': 'size() === "md"',
|
|
23
23
|
'[class.fui-empty-state--lg]': 'size() === "lg"',
|
|
24
24
|
role: 'status',
|
|
25
|
-
}, template: "<div class=\"fui-empty-state__content\">\n @if (icon()) {\n <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\n <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\n </div>\n }\n @if (title()) {\n <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\n }\n @if (description()) {\n <p class=\"fui-empty-state__description\">{{ description() }}</p>\n }\n <div class=\"fui-empty-state__actions\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-padding-48, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-gap-12, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-gap-8, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);margin:0;line-height:1.5}.fui-empty-state__actions{margin-top:var(--fui-gap-16, 1rem);display:flex;gap:var(--fui-gap-8, .5rem)}.fui-empty-state--sm{padding:var(--fui-padding-24, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-font-size-03)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-font-size-05)}\n"] }]
|
|
25
|
+
}, template: "<div class=\"fui-empty-state__content\">\r\n @if (icon()) {\r\n <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n </div>\r\n }\r\n @if (title()) {\r\n <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n }\r\n @if (description()) {\r\n <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n }\r\n <div class=\"fui-empty-state__actions\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-padding-48, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-gap-12, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-gap-8, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);margin:0;line-height:1.5}.fui-empty-state__actions{margin-top:var(--fui-gap-16, 1rem);display:flex;gap:var(--fui-gap-8, .5rem)}.fui-empty-state--sm{padding:var(--fui-padding-24, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-font-size-03)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-font-size-05)}\n"] }]
|
|
26
26
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
27
27
|
|
|
28
28
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-empty-state.mjs","sources":["../../../lib/components/empty-state/empty-state.component.ts","../../../lib/components/empty-state/empty-state.component.html","../../../lib/components/empty-state/raintonic-formaui-components-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\n\n@Component({\n selector: 'fui-empty-state',\n standalone: true,\n imports: [FuiIconComponent],\n templateUrl: './empty-state.component.html',\n styleUrls: ['./empty-state.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'fui-empty-state',\n '[class.fui-empty-state--sm]': 'size() === \"sm\"',\n '[class.fui-empty-state--md]': 'size() === \"md\"',\n '[class.fui-empty-state--lg]': 'size() === \"lg\"',\n role: 'status',\n },\n})\nexport class FuiEmptyStateComponent {\n readonly icon = input<string | null>(null);\n readonly title = input<string | null>(null);\n readonly description = input<string | null>(null);\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n readonly iconSize = computed(() => {\n const s = this.size();\n return s === 'sm' ? 'md' : 'lg';\n });\n}\n","<div class=\"fui-empty-state__content\">\n @if (icon()) {\n <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\n <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\n </div>\n }\n @if (title()) {\n <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\n }\n @if (description()) {\n <p class=\"fui-empty-state__description\">{{ description() }}</p>\n }\n <div class=\"fui-empty-state__actions\">\n <ng-content></ng-content>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAmBa,sBAAsB,CAAA;AACxB,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,2EAAC;AACjC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAClC,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACxC,IAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;AAEtC,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QACrB,OAAO,CAAC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI;AACjC,IAAA,CAAC,+EAAC;uGATS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBnC,
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-empty-state.mjs","sources":["../../../lib/components/empty-state/empty-state.component.ts","../../../lib/components/empty-state/empty-state.component.html","../../../lib/components/empty-state/raintonic-formaui-components-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\n\r\n@Component({\r\n selector: 'fui-empty-state',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './empty-state.component.html',\r\n styleUrls: ['./empty-state.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-empty-state',\r\n '[class.fui-empty-state--sm]': 'size() === \"sm\"',\r\n '[class.fui-empty-state--md]': 'size() === \"md\"',\r\n '[class.fui-empty-state--lg]': 'size() === \"lg\"',\r\n role: 'status',\r\n },\r\n})\r\nexport class FuiEmptyStateComponent {\r\n readonly icon = input<string | null>(null);\r\n readonly title = input<string | null>(null);\r\n readonly description = input<string | null>(null);\r\n readonly size = input<'sm' | 'md' | 'lg'>('md');\r\n\r\n readonly iconSize = computed(() => {\r\n const s = this.size();\r\n return s === 'sm' ? 'md' : 'lg';\r\n });\r\n}\r\n","<div class=\"fui-empty-state__content\">\r\n @if (icon()) {\r\n <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\r\n <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\r\n </div>\r\n }\r\n @if (title()) {\r\n <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\r\n }\r\n @if (description()) {\r\n <p class=\"fui-empty-state__description\">{{ description() }}</p>\r\n }\r\n <div class=\"fui-empty-state__actions\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAmBa,sBAAsB,CAAA;AACxB,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,2EAAC;AACjC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAClC,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACxC,IAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;AAEtC,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QACrB,OAAO,CAAC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI;AACjC,IAAA,CAAC,+EAAC;uGATS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBnC,ohBAgBA,EAAA,MAAA,EAAA,CAAA,k/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAaf,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAhBlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,IAAI,EAAE,QAAQ;AACf,qBAAA,EAAA,QAAA,EAAA,ohBAAA,EAAA,MAAA,EAAA,CAAA,k/BAAA,CAAA,EAAA;;;AEjBH;;AAEG;;;;"}
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { Injectable, inject, ChangeDetectorRef, input, booleanAttribute, output, signal, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
3
4
|
import { FuiIconComponent } from '@raintonic/formaui/components/icon';
|
|
5
|
+
import { FuiIntlBase } from '@raintonic/formaui/core';
|
|
6
|
+
|
|
7
|
+
class FuiFileUploadIntl extends FuiIntlBase {
|
|
8
|
+
dropzoneAriaLabel = 'Drop files here or click to browse';
|
|
9
|
+
removeFileAriaLabel(name) {
|
|
10
|
+
return `Remove ${name}`;
|
|
11
|
+
}
|
|
12
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
13
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadIntl, providedIn: 'root' });
|
|
14
|
+
}
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadIntl, decorators: [{
|
|
16
|
+
type: Injectable,
|
|
17
|
+
args: [{ providedIn: 'root' }]
|
|
18
|
+
}] });
|
|
4
19
|
|
|
5
20
|
/**
|
|
6
21
|
* # FuiFileUploadComponent
|
|
@@ -27,6 +42,11 @@ import { FuiIconComponent } from '@raintonic/formaui/components/icon';
|
|
|
27
42
|
* ```
|
|
28
43
|
*/
|
|
29
44
|
class FuiFileUploadComponent {
|
|
45
|
+
intl = inject(FuiFileUploadIntl);
|
|
46
|
+
_cdr = inject(ChangeDetectorRef);
|
|
47
|
+
constructor() {
|
|
48
|
+
this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
|
|
49
|
+
}
|
|
30
50
|
// Inputs
|
|
31
51
|
accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
32
52
|
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
@@ -226,7 +246,7 @@ class FuiFileUploadComponent {
|
|
|
226
246
|
return URL.createObjectURL(file);
|
|
227
247
|
}
|
|
228
248
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFileUploadComponent, isStandalone: true, selector: "fui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", filesDropped: "filesDropped", validationErrors: "validationErrors" }, host: { properties: { "class.fui-file-upload--disabled": "disabled()", "class.fui-file-upload--drag-over": "_isDragOver()", "class.fui-file-upload--has-files": "_files().length > 0" }, classAttribute: "fui-file-upload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #fileInput\n type=\"file\"\n class=\"fui-file-upload__native-input\"\n [attr.accept]=\"accept()\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [attr.disabled]=\"disabled() ? '' : null\"\n (change)=\"_onFileInputChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n/>\n\n<div\n class=\"fui-file-upload__dropzone\"\n (click)=\"browse()\"\n (dragenter)=\"_onDragEnter($event)\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (keydown.enter)=\"browse()\"\n (keydown.space)=\"browse(); $event.preventDefault()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n role=\"button\"\n [attr.aria-label]=\"'Drop files here or click to browse'\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\n <span class=\"fui-file-upload__text\"> Drag & drop files here or <strong>browse</strong> </span>\n @if (accept()) {\n <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\n }\n @if (maxFileSize() > 0) {\n <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\n }\n</div>\n\n@if (_files().length > 0) {\n <ul class=\"fui-file-upload__file-list\" role=\"list\">\n @for (fileItem of _files(); track fileItem.name; let i = $index) {\n <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\n @if (showPreview() && fileItem.previewUrl) {\n <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\n } @else {\n <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\n }\n <div class=\"fui-file-upload__file-info\">\n <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\n <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\n @if (fileItem.error) {\n <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\n }\n </div>\n <button\n type=\"button\"\n class=\"fui-file-upload__remove-btn\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"'Remove ' + fileItem.name\"\n [disabled]=\"disabled()\"\n >\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\n </button>\n </li>\n }\n </ul>\n}\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-gap-8);padding:var(--fui-padding-32, 2rem);border:2px dashed var(--fui-border-color);border-radius:var(--fui-border-radius-md);background-color:var(--fui-surface-bg);cursor:pointer;text-align:center;transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-primary);font-weight:var(--fui-font-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-gap-12, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-gap-4)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);padding:var(--fui-padding-8, .5rem) var(--fui-padding-12, .75rem);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-card, var(--fui-surface-01));transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__file-item--error{border-color:var(--fui-state-error);background-color:var(--fui-danger-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-border-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-state-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-state-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiFileUploadComponent, isStandalone: true, selector: "fui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesSelected: "filesSelected", fileRemoved: "fileRemoved", filesDropped: "filesDropped", validationErrors: "validationErrors" }, host: { properties: { "class.fui-file-upload--disabled": "disabled()", "class.fui-file-upload--drag-over": "_isDragOver()", "class.fui-file-upload--has-files": "_files().length > 0" }, classAttribute: "fui-file-upload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\r\n #fileInput\r\n type=\"file\"\r\n class=\"fui-file-upload__native-input\"\r\n [attr.accept]=\"accept()\"\r\n [attr.multiple]=\"multiple() ? '' : null\"\r\n [attr.disabled]=\"disabled() ? '' : null\"\r\n (change)=\"_onFileInputChange($event)\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n class=\"fui-file-upload__dropzone\"\r\n (click)=\"browse()\"\r\n (dragenter)=\"_onDragEnter($event)\"\r\n (dragover)=\"_onDragOver($event)\"\r\n (dragleave)=\"_onDragLeave($event)\"\r\n (drop)=\"_onDrop($event)\"\r\n (keydown.enter)=\"browse()\"\r\n (keydown.space)=\"browse(); $event.preventDefault()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n>\r\n <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n <span class=\"fui-file-upload__text\"> Drag & drop files here or <strong>browse</strong> </span>\r\n @if (accept()) {\r\n <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n }\r\n @if (maxFileSize() > 0) {\r\n <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n @if (showPreview() && fileItem.previewUrl) {\r\n <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n } @else {\r\n <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n }\r\n <div class=\"fui-file-upload__file-info\">\r\n <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n @if (fileItem.error) {\r\n <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"fui-file-upload__remove-btn\"\r\n (click)=\"removeFile(i); $event.stopPropagation()\"\r\n [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-gap-8);padding:var(--fui-padding-32, 2rem);border:2px dashed var(--fui-border-color);border-radius:var(--fui-border-radius-md);background-color:var(--fui-surface-bg);cursor:pointer;text-align:center;transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-primary);font-weight:var(--fui-font-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-gap-12, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-gap-4)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);padding:var(--fui-padding-8, .5rem) var(--fui-padding-12, .75rem);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-card, var(--fui-surface-01));transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__file-item--error{border-color:var(--fui-state-error);background-color:var(--fui-danger-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-border-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-state-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-state-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
230
250
|
}
|
|
231
251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiFileUploadComponent, decorators: [{
|
|
232
252
|
type: Component,
|
|
@@ -235,12 +255,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
235
255
|
'[class.fui-file-upload--disabled]': 'disabled()',
|
|
236
256
|
'[class.fui-file-upload--drag-over]': '_isDragOver()',
|
|
237
257
|
'[class.fui-file-upload--has-files]': '_files().length > 0',
|
|
238
|
-
}, template: "<input\n #fileInput\n type=\"file\"\n class=\"fui-file-upload__native-input\"\n [attr.accept]=\"accept()\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [attr.disabled]=\"disabled() ? '' : null\"\n (change)=\"_onFileInputChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n/>\n\n<div\n class=\"fui-file-upload__dropzone\"\n (click)=\"browse()\"\n (dragenter)=\"_onDragEnter($event)\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (keydown.enter)=\"browse()\"\n (keydown.space)=\"browse(); $event.preventDefault()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n role=\"button\"\n [attr.aria-label]=\"
|
|
239
|
-
}], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], validationErrors: [{ type: i0.Output, args: ["validationErrors"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
258
|
+
}, template: "<input\r\n #fileInput\r\n type=\"file\"\r\n class=\"fui-file-upload__native-input\"\r\n [attr.accept]=\"accept()\"\r\n [attr.multiple]=\"multiple() ? '' : null\"\r\n [attr.disabled]=\"disabled() ? '' : null\"\r\n (change)=\"_onFileInputChange($event)\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n class=\"fui-file-upload__dropzone\"\r\n (click)=\"browse()\"\r\n (dragenter)=\"_onDragEnter($event)\"\r\n (dragover)=\"_onDragOver($event)\"\r\n (dragleave)=\"_onDragLeave($event)\"\r\n (drop)=\"_onDrop($event)\"\r\n (keydown.enter)=\"browse()\"\r\n (keydown.space)=\"browse(); $event.preventDefault()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n>\r\n <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n <span class=\"fui-file-upload__text\"> Drag & drop files here or <strong>browse</strong> </span>\r\n @if (accept()) {\r\n <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n }\r\n @if (maxFileSize() > 0) {\r\n <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n @if (showPreview() && fileItem.previewUrl) {\r\n <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n } @else {\r\n <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n }\r\n <div class=\"fui-file-upload__file-info\">\r\n <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n @if (fileItem.error) {\r\n <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"fui-file-upload__remove-btn\"\r\n (click)=\"removeFile(i); $event.stopPropagation()\"\r\n [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-file-upload{display:block;width:100%}.fui-file-upload__native-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.fui-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--fui-gap-8);padding:var(--fui-padding-32, 2rem);border:2px dashed var(--fui-border-color);border-radius:var(--fui-border-radius-md);background-color:var(--fui-surface-bg);cursor:pointer;text-align:center;transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__dropzone:hover{border-color:var(--fui-primary-60, var(--fui-primary));background-color:var(--fui-primary-10, rgba(124, 58, 237, .04))}.fui-file-upload__dropzone:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__icon{color:var(--fui-text-secondary)}.fui-file-upload__text{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);color:var(--fui-text-secondary)}.fui-file-upload__text strong{color:var(--fui-primary);font-weight:var(--fui-font-weight-semibold, 600)}.fui-file-upload__hint{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-disabled)}.fui-file-upload__file-list{list-style:none;margin:var(--fui-gap-12, .75rem) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--fui-gap-4)}.fui-file-upload__file-item{display:flex;align-items:center;gap:var(--fui-gap-12, .75rem);padding:var(--fui-padding-8, .5rem) var(--fui-padding-12, .75rem);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-card, var(--fui-surface-01));transition:border-color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__file-item--error{border-color:var(--fui-state-error);background-color:var(--fui-danger-10, rgba(239, 68, 68, .04))}.fui-file-upload__preview{width:48px;height:48px;object-fit:cover;border-radius:var(--fui-border-radius-sm);flex-shrink:0}.fui-file-upload__file-icon{flex-shrink:0;color:var(--fui-text-secondary)}.fui-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fui-file-upload__file-name{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium, 500);color:var(--fui-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fui-file-upload__file-size{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-file-upload__file-error{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-01);color:var(--fui-state-error)}.fui-file-upload__remove-btn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-file-upload__remove-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:var(--fui-border-radius-sm);color:var(--fui-text-secondary);opacity:.7;transition:opacity,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-file-upload__remove-btn:hover:not(:disabled){opacity:1;color:var(--fui-state-error)}.fui-file-upload__remove-btn:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-file-upload__remove-btn:disabled{opacity:.4;cursor:not-allowed}.fui-file-upload--drag-over .fui-file-upload__dropzone{border-color:var(--fui-primary);border-style:solid;background-color:var(--fui-primary-10, rgba(124, 58, 237, .08))}.fui-file-upload--disabled{opacity:var(--fui-opacity-disabled, .5)}.fui-file-upload--disabled .fui-file-upload__dropzone{cursor:not-allowed;pointer-events:none}.fui-file-upload--disabled .fui-file-upload__remove-btn{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.fui-file-upload__dropzone,.fui-file-upload__file-item,.fui-file-upload__remove-btn{transition:none}}\n"] }]
|
|
259
|
+
}], ctorParameters: () => [], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }], filesDropped: [{ type: i0.Output, args: ["filesDropped"] }], validationErrors: [{ type: i0.Output, args: ["validationErrors"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
240
260
|
|
|
241
261
|
/**
|
|
242
262
|
* Generated bundle index. Do not edit.
|
|
243
263
|
*/
|
|
244
264
|
|
|
245
|
-
export { FuiFileUploadComponent };
|
|
265
|
+
export { FuiFileUploadComponent, FuiFileUploadIntl };
|
|
246
266
|
//# sourceMappingURL=raintonic-formaui-components-file-upload.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"raintonic-formaui-components-file-upload.mjs","sources":["../../../lib/components/file-upload/file-upload.component.ts","../../../lib/components/file-upload/file-upload.component.html","../../../lib/components/file-upload/raintonic-formaui-components-file-upload.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n input,\n output,\n signal,\n viewChild,\n ElementRef,\n WritableSignal,\n booleanAttribute,\n} from '@angular/core';\n\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\nimport { FileUploadFile, FileUploadValidationError } from './file-upload.types';\n\n/**\n * # FuiFileUploadComponent\n *\n * A file upload component with drag-and-drop support, file previews, and validation.\n *\n * ## Features\n * - Drag & drop file upload\n * - Click to browse\n * - File type, size, and count validation\n * - Image preview thumbnails\n * - Accessible (keyboard, ARIA)\n *\n * ## Usage\n *\n * ### Basic\n * ```html\n * <fui-file-upload\n * accept=\"image/*,.pdf\"\n * [multiple]=\"true\"\n * [maxFileSize]=\"5242880\"\n * (filesSelected)=\"onFiles($event)\"\n * ></fui-file-upload>\n * ```\n */\n@Component({\n selector: 'fui-file-upload',\n standalone: true,\n imports: [FuiIconComponent],\n templateUrl: './file-upload.component.html',\n styleUrls: ['./file-upload.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n class: 'fui-file-upload',\n '[class.fui-file-upload--disabled]': 'disabled()',\n '[class.fui-file-upload--drag-over]': '_isDragOver()',\n '[class.fui-file-upload--has-files]': '_files().length > 0',\n },\n})\nexport class FuiFileUploadComponent {\n // Inputs\n readonly accept = input('');\n readonly multiple = input<boolean, unknown>(false, { transform: booleanAttribute });\n readonly maxFileSize = input(0);\n readonly maxFiles = input(0);\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\n readonly showPreview = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n // Outputs\n readonly filesSelected = output<FileUploadFile[]>();\n readonly fileRemoved = output<FileUploadFile>();\n readonly filesDropped = output<FileUploadFile[]>();\n readonly validationErrors = output<FileUploadValidationError[]>();\n\n // Internal state\n readonly _files: WritableSignal<FileUploadFile[]> = signal([]);\n readonly _isDragOver: WritableSignal<boolean> = signal(false);\n\n // ViewChild\n readonly fileInput = viewChild<ElementRef<HTMLInputElement>>('fileInput');\n\n // Public methods\n browse(): void {\n if (this.disabled()) return;\n this.fileInput()?.nativeElement.click();\n }\n\n removeFile(index: number): void {\n if (this.disabled()) return;\n const files = [...this._files()];\n const removed = files.splice(index, 1)[0];\n if (removed) {\n if (removed.previewUrl) {\n URL.revokeObjectURL(removed.previewUrl);\n }\n this._files.set(files);\n this.fileRemoved.emit(removed);\n }\n }\n\n clearAll(): void {\n const files = this._files();\n for (const f of files) {\n if (f.previewUrl) {\n URL.revokeObjectURL(f.previewUrl);\n }\n }\n this._files.set([]);\n }\n\n getFiles(): FileUploadFile[] {\n return this._files();\n }\n\n // Template event handlers\n _onFileInputChange(event: Event): void {\n const input = event.target as HTMLInputElement;\n if (input.files && input.files.length > 0) {\n this._processFiles(input.files);\n }\n // Reset input so the same file can be selected again\n input.value = '';\n }\n\n _onDragEnter(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled()) {\n this._isDragOver.set(true);\n }\n }\n\n _onDragOver(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.disabled()) {\n this._isDragOver.set(true);\n }\n }\n\n _onDragLeave(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this._isDragOver.set(false);\n }\n\n _onDrop(event: DragEvent): void {\n event.preventDefault();\n event.stopPropagation();\n this._isDragOver.set(false);\n\n if (this.disabled()) return;\n\n const files = event.dataTransfer?.files;\n if (files && files.length > 0) {\n this._processFiles(files);\n this.filesDropped.emit(this._files());\n }\n }\n\n _formatFileSize(bytes: number): string {\n if (bytes === 0) return '0 B';\n const units = ['B', 'KB', 'MB', 'GB'];\n const k = 1024;\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n const size = parseFloat((bytes / Math.pow(k, i)).toFixed(1));\n return `${size} ${units[i]}`;\n }\n\n // Private methods\n private _processFiles(fileList: FileList): void {\n const newFiles: FileUploadFile[] = [];\n const errors: FileUploadValidationError[] = [];\n const currentFiles = this._files();\n\n const filesToProcess = Array.from(fileList);\n\n for (const file of filesToProcess) {\n // Max files check\n const maxFiles = this.maxFiles();\n if (maxFiles > 0 && currentFiles.length + newFiles.length >= maxFiles) {\n errors.push({\n file,\n error: 'maxFiles',\n message: `Maximum ${maxFiles} file(s) allowed`,\n });\n continue;\n }\n\n const validationError = this._validateFile(file);\n if (validationError) {\n errors.push(validationError);\n continue;\n }\n\n const uploadFile: FileUploadFile = {\n file,\n name: file.name,\n size: file.size,\n type: file.type,\n };\n\n if (this.showPreview() && this._isImage(file)) {\n uploadFile.previewUrl = this._generatePreview(file);\n }\n\n newFiles.push(uploadFile);\n }\n\n if (errors.length > 0) {\n this.validationErrors.emit(errors);\n }\n\n if (newFiles.length > 0) {\n if (this.multiple()) {\n this._files.set([...currentFiles, ...newFiles]);\n } else {\n // Single mode: replace existing\n for (const f of currentFiles) {\n if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);\n }\n this._files.set([newFiles[0]]);\n }\n this.filesSelected.emit(this._files());\n }\n }\n\n private _validateFile(file: File): FileUploadValidationError | null {\n // Type check\n const accept = this.accept();\n if (accept && !this._matchesAccept(file, accept)) {\n return {\n file,\n error: 'type',\n message: `File type \"${file.type || file.name.split('.').pop()}\" is not allowed`,\n };\n }\n\n // Size check\n const maxSize = this.maxFileSize();\n if (maxSize > 0 && file.size > maxSize) {\n return {\n file,\n error: 'size',\n message: `File size ${this._formatFileSize(file.size)} exceeds maximum ${this._formatFileSize(maxSize)}`,\n };\n }\n\n return null;\n }\n\n private _matchesAccept(file: File, accept: string): boolean {\n const acceptTypes = accept.split(',').map((t) => t.trim().toLowerCase());\n\n for (const acceptType of acceptTypes) {\n // Wildcard MIME type (e.g. \"image/*\")\n if (acceptType.endsWith('/*')) {\n const category = acceptType.slice(0, acceptType.indexOf('/'));\n if (file.type.toLowerCase().startsWith(category + '/')) {\n return true;\n }\n }\n // Extension match (e.g. \".pdf\")\n else if (acceptType.startsWith('.')) {\n if (file.name.toLowerCase().endsWith(acceptType)) {\n return true;\n }\n }\n // Exact MIME match\n else if (file.type.toLowerCase() === acceptType) {\n return true;\n }\n }\n\n return false;\n }\n\n private _isImage(file: File): boolean {\n return file.type.startsWith('image/');\n }\n\n private _generatePreview(file: File): string {\n return URL.createObjectURL(file);\n }\n}\n","<input\n #fileInput\n type=\"file\"\n class=\"fui-file-upload__native-input\"\n [attr.accept]=\"accept()\"\n [attr.multiple]=\"multiple() ? '' : null\"\n [attr.disabled]=\"disabled() ? '' : null\"\n (change)=\"_onFileInputChange($event)\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n/>\n\n<div\n class=\"fui-file-upload__dropzone\"\n (click)=\"browse()\"\n (dragenter)=\"_onDragEnter($event)\"\n (dragover)=\"_onDragOver($event)\"\n (dragleave)=\"_onDragLeave($event)\"\n (drop)=\"_onDrop($event)\"\n (keydown.enter)=\"browse()\"\n (keydown.space)=\"browse(); $event.preventDefault()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n role=\"button\"\n [attr.aria-label]=\"'Drop files here or click to browse'\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\n <span class=\"fui-file-upload__text\"> Drag & drop files here or <strong>browse</strong> </span>\n @if (accept()) {\n <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\n }\n @if (maxFileSize() > 0) {\n <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\n }\n</div>\n\n@if (_files().length > 0) {\n <ul class=\"fui-file-upload__file-list\" role=\"list\">\n @for (fileItem of _files(); track fileItem.name; let i = $index) {\n <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\n @if (showPreview() && fileItem.previewUrl) {\n <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\n } @else {\n <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\n }\n <div class=\"fui-file-upload__file-info\">\n <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\n <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\n @if (fileItem.error) {\n <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\n }\n </div>\n <button\n type=\"button\"\n class=\"fui-file-upload__remove-btn\"\n (click)=\"removeFile(i); $event.stopPropagation()\"\n [attr.aria-label]=\"'Remove ' + fileItem.name\"\n [disabled]=\"disabled()\"\n >\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\n </button>\n </li>\n }\n </ul>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"raintonic-formaui-components-file-upload.mjs","sources":["../../../lib/components/file-upload/file-upload.intl.ts","../../../lib/components/file-upload/file-upload.component.ts","../../../lib/components/file-upload/file-upload.component.html","../../../lib/components/file-upload/raintonic-formaui-components-file-upload.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiFileUploadIntl extends FuiIntlBase {\r\n dropzoneAriaLabel = 'Drop files here or click to browse';\r\n removeFileAriaLabel(name: string): string {\r\n return `Remove ${name}`;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ChangeDetectionStrategy,\r\n ChangeDetectorRef,\r\n ViewEncapsulation,\r\n inject,\r\n input,\r\n output,\r\n signal,\r\n viewChild,\r\n ElementRef,\r\n WritableSignal,\r\n booleanAttribute,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FileUploadFile, FileUploadValidationError } from './file-upload.types';\r\nimport { FuiFileUploadIntl } from './file-upload.intl';\r\n\r\n/**\r\n * # FuiFileUploadComponent\r\n *\r\n * A file upload component with drag-and-drop support, file previews, and validation.\r\n *\r\n * ## Features\r\n * - Drag & drop file upload\r\n * - Click to browse\r\n * - File type, size, and count validation\r\n * - Image preview thumbnails\r\n * - Accessible (keyboard, ARIA)\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic\r\n * ```html\r\n * <fui-file-upload\r\n * accept=\"image/*,.pdf\"\r\n * [multiple]=\"true\"\r\n * [maxFileSize]=\"5242880\"\r\n * (filesSelected)=\"onFiles($event)\"\r\n * ></fui-file-upload>\r\n * ```\r\n */\r\n@Component({\r\n selector: 'fui-file-upload',\r\n standalone: true,\r\n imports: [FuiIconComponent],\r\n templateUrl: './file-upload.component.html',\r\n styleUrls: ['./file-upload.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n encapsulation: ViewEncapsulation.None,\r\n host: {\r\n class: 'fui-file-upload',\r\n '[class.fui-file-upload--disabled]': 'disabled()',\r\n '[class.fui-file-upload--drag-over]': '_isDragOver()',\r\n '[class.fui-file-upload--has-files]': '_files().length > 0',\r\n },\r\n})\r\nexport class FuiFileUploadComponent {\r\n readonly intl = inject(FuiFileUploadIntl);\r\n private readonly _cdr = inject(ChangeDetectorRef);\r\n\r\n constructor() {\r\n this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });\r\n }\r\n\r\n // Inputs\r\n readonly accept = input('');\r\n readonly multiple = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly maxFileSize = input(0);\r\n readonly maxFiles = input(0);\r\n readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n readonly showPreview = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n\r\n // Outputs\r\n readonly filesSelected = output<FileUploadFile[]>();\r\n readonly fileRemoved = output<FileUploadFile>();\r\n readonly filesDropped = output<FileUploadFile[]>();\r\n readonly validationErrors = output<FileUploadValidationError[]>();\r\n\r\n // Internal state\r\n readonly _files: WritableSignal<FileUploadFile[]> = signal([]);\r\n readonly _isDragOver: WritableSignal<boolean> = signal(false);\r\n\r\n // ViewChild\r\n readonly fileInput = viewChild<ElementRef<HTMLInputElement>>('fileInput');\r\n\r\n // Public methods\r\n browse(): void {\r\n if (this.disabled()) return;\r\n this.fileInput()?.nativeElement.click();\r\n }\r\n\r\n removeFile(index: number): void {\r\n if (this.disabled()) return;\r\n const files = [...this._files()];\r\n const removed = files.splice(index, 1)[0];\r\n if (removed) {\r\n if (removed.previewUrl) {\r\n URL.revokeObjectURL(removed.previewUrl);\r\n }\r\n this._files.set(files);\r\n this.fileRemoved.emit(removed);\r\n }\r\n }\r\n\r\n clearAll(): void {\r\n const files = this._files();\r\n for (const f of files) {\r\n if (f.previewUrl) {\r\n URL.revokeObjectURL(f.previewUrl);\r\n }\r\n }\r\n this._files.set([]);\r\n }\r\n\r\n getFiles(): FileUploadFile[] {\r\n return this._files();\r\n }\r\n\r\n // Template event handlers\r\n _onFileInputChange(event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n if (input.files && input.files.length > 0) {\r\n this._processFiles(input.files);\r\n }\r\n // Reset input so the same file can be selected again\r\n input.value = '';\r\n }\r\n\r\n _onDragEnter(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this._isDragOver.set(true);\r\n }\r\n }\r\n\r\n _onDragOver(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n if (!this.disabled()) {\r\n this._isDragOver.set(true);\r\n }\r\n }\r\n\r\n _onDragLeave(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this._isDragOver.set(false);\r\n }\r\n\r\n _onDrop(event: DragEvent): void {\r\n event.preventDefault();\r\n event.stopPropagation();\r\n this._isDragOver.set(false);\r\n\r\n if (this.disabled()) return;\r\n\r\n const files = event.dataTransfer?.files;\r\n if (files && files.length > 0) {\r\n this._processFiles(files);\r\n this.filesDropped.emit(this._files());\r\n }\r\n }\r\n\r\n _formatFileSize(bytes: number): string {\r\n if (bytes === 0) return '0 B';\r\n const units = ['B', 'KB', 'MB', 'GB'];\r\n const k = 1024;\r\n const i = Math.floor(Math.log(bytes) / Math.log(k));\r\n const size = parseFloat((bytes / Math.pow(k, i)).toFixed(1));\r\n return `${size} ${units[i]}`;\r\n }\r\n\r\n // Private methods\r\n private _processFiles(fileList: FileList): void {\r\n const newFiles: FileUploadFile[] = [];\r\n const errors: FileUploadValidationError[] = [];\r\n const currentFiles = this._files();\r\n\r\n const filesToProcess = Array.from(fileList);\r\n\r\n for (const file of filesToProcess) {\r\n // Max files check\r\n const maxFiles = this.maxFiles();\r\n if (maxFiles > 0 && currentFiles.length + newFiles.length >= maxFiles) {\r\n errors.push({\r\n file,\r\n error: 'maxFiles',\r\n message: `Maximum ${maxFiles} file(s) allowed`,\r\n });\r\n continue;\r\n }\r\n\r\n const validationError = this._validateFile(file);\r\n if (validationError) {\r\n errors.push(validationError);\r\n continue;\r\n }\r\n\r\n const uploadFile: FileUploadFile = {\r\n file,\r\n name: file.name,\r\n size: file.size,\r\n type: file.type,\r\n };\r\n\r\n if (this.showPreview() && this._isImage(file)) {\r\n uploadFile.previewUrl = this._generatePreview(file);\r\n }\r\n\r\n newFiles.push(uploadFile);\r\n }\r\n\r\n if (errors.length > 0) {\r\n this.validationErrors.emit(errors);\r\n }\r\n\r\n if (newFiles.length > 0) {\r\n if (this.multiple()) {\r\n this._files.set([...currentFiles, ...newFiles]);\r\n } else {\r\n // Single mode: replace existing\r\n for (const f of currentFiles) {\r\n if (f.previewUrl) URL.revokeObjectURL(f.previewUrl);\r\n }\r\n this._files.set([newFiles[0]]);\r\n }\r\n this.filesSelected.emit(this._files());\r\n }\r\n }\r\n\r\n private _validateFile(file: File): FileUploadValidationError | null {\r\n // Type check\r\n const accept = this.accept();\r\n if (accept && !this._matchesAccept(file, accept)) {\r\n return {\r\n file,\r\n error: 'type',\r\n message: `File type \"${file.type || file.name.split('.').pop()}\" is not allowed`,\r\n };\r\n }\r\n\r\n // Size check\r\n const maxSize = this.maxFileSize();\r\n if (maxSize > 0 && file.size > maxSize) {\r\n return {\r\n file,\r\n error: 'size',\r\n message: `File size ${this._formatFileSize(file.size)} exceeds maximum ${this._formatFileSize(maxSize)}`,\r\n };\r\n }\r\n\r\n return null;\r\n }\r\n\r\n private _matchesAccept(file: File, accept: string): boolean {\r\n const acceptTypes = accept.split(',').map((t) => t.trim().toLowerCase());\r\n\r\n for (const acceptType of acceptTypes) {\r\n // Wildcard MIME type (e.g. \"image/*\")\r\n if (acceptType.endsWith('/*')) {\r\n const category = acceptType.slice(0, acceptType.indexOf('/'));\r\n if (file.type.toLowerCase().startsWith(category + '/')) {\r\n return true;\r\n }\r\n }\r\n // Extension match (e.g. \".pdf\")\r\n else if (acceptType.startsWith('.')) {\r\n if (file.name.toLowerCase().endsWith(acceptType)) {\r\n return true;\r\n }\r\n }\r\n // Exact MIME match\r\n else if (file.type.toLowerCase() === acceptType) {\r\n return true;\r\n }\r\n }\r\n\r\n return false;\r\n }\r\n\r\n private _isImage(file: File): boolean {\r\n return file.type.startsWith('image/');\r\n }\r\n\r\n private _generatePreview(file: File): string {\r\n return URL.createObjectURL(file);\r\n }\r\n}\r\n","<input\r\n #fileInput\r\n type=\"file\"\r\n class=\"fui-file-upload__native-input\"\r\n [attr.accept]=\"accept()\"\r\n [attr.multiple]=\"multiple() ? '' : null\"\r\n [attr.disabled]=\"disabled() ? '' : null\"\r\n (change)=\"_onFileInputChange($event)\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n/>\r\n\r\n<div\r\n class=\"fui-file-upload__dropzone\"\r\n (click)=\"browse()\"\r\n (dragenter)=\"_onDragEnter($event)\"\r\n (dragover)=\"_onDragOver($event)\"\r\n (dragleave)=\"_onDragLeave($event)\"\r\n (drop)=\"_onDrop($event)\"\r\n (keydown.enter)=\"browse()\"\r\n (keydown.space)=\"browse(); $event.preventDefault()\"\r\n [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"intl.dropzoneAriaLabel\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n>\r\n <fui-icon name=\"upload-simple\" size=\"lg\" class=\"fui-file-upload__icon\"></fui-icon>\r\n <span class=\"fui-file-upload__text\"> Drag & drop files here or <strong>browse</strong> </span>\r\n @if (accept()) {\r\n <span class=\"fui-file-upload__hint\">Accepted: {{ accept() }}</span>\r\n }\r\n @if (maxFileSize() > 0) {\r\n <span class=\"fui-file-upload__hint\">Max size: {{ _formatFileSize(maxFileSize()) }}</span>\r\n }\r\n</div>\r\n\r\n@if (_files().length > 0) {\r\n <ul class=\"fui-file-upload__file-list\" role=\"list\">\r\n @for (fileItem of _files(); track fileItem.name; let i = $index) {\r\n <li class=\"fui-file-upload__file-item\" [class.fui-file-upload__file-item--error]=\"fileItem.error\">\r\n @if (showPreview() && fileItem.previewUrl) {\r\n <img [src]=\"fileItem.previewUrl\" class=\"fui-file-upload__preview\" [alt]=\"fileItem.name\" />\r\n } @else {\r\n <fui-icon name=\"file\" size=\"sm\" class=\"fui-file-upload__file-icon\"></fui-icon>\r\n }\r\n <div class=\"fui-file-upload__file-info\">\r\n <span class=\"fui-file-upload__file-name\">{{ fileItem.name }}</span>\r\n <span class=\"fui-file-upload__file-size\">{{ _formatFileSize(fileItem.size) }}</span>\r\n @if (fileItem.error) {\r\n <span class=\"fui-file-upload__file-error\">{{ fileItem.error }}</span>\r\n }\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"fui-file-upload__remove-btn\"\r\n (click)=\"removeFile(i); $event.stopPropagation()\"\r\n [attr.aria-label]=\"intl.removeFileAriaLabel(fileItem.name)\"\r\n [disabled]=\"disabled()\"\r\n >\r\n <fui-icon name=\"x\" size=\"sm\"></fui-icon>\r\n </button>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|