@sdcorejs/angular 19.1.6 → 19.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (374) hide show
  1. package/README.md +10 -0
  2. package/assets/scss/core/menu.scss +18 -0
  3. package/assets/scss/core/utilities/_misc.scss +15 -0
  4. package/assets/scss/sd-core.scss +1 -0
  5. package/components/anchor/src/components/anchor/anchor.component.d.ts +3 -1
  6. package/components/api-contract-builder/index.d.ts +8 -0
  7. package/components/api-contract-builder/src/api-contract-builder.component.d.ts +123 -0
  8. package/components/api-contract-builder/src/api-contract.configuration.d.ts +41 -0
  9. package/components/api-contract-builder/src/api-contract.expression.d.ts +43 -0
  10. package/components/api-contract-builder/src/api-contract.model.d.ts +167 -0
  11. package/components/api-contract-builder/src/api-contract.samples.d.ts +25 -0
  12. package/components/api-contract-builder/src/api-contract.schema.d.ts +126 -0
  13. package/components/api-contract-builder/src/api-contract.serializer.d.ts +17 -0
  14. package/components/api-contract-builder/src/api-contract.validation.d.ts +12 -0
  15. package/components/api-contract-builder/src/components/api-contract-diagnostic-list.component.d.ts +18 -0
  16. package/components/api-contract-builder/src/components/api-contract-node-drawer.component.d.ts +130 -0
  17. package/components/api-contract-builder/src/components/api-contract-node-editor.component.d.ts +35 -0
  18. package/components/api-contract-builder/src/components/api-contract-node-summary.component.d.ts +41 -0
  19. package/components/api-contract-builder/src/components/api-contract-record-editor.component.d.ts +36 -0
  20. package/components/api-contract-builder/src/components/api-contract-source-editor.component.d.ts +86 -0
  21. package/components/api-contract-builder/src/components/api-contract-suggestion.model.d.ts +17 -0
  22. package/components/badge/src/badge.component.d.ts +2 -0
  23. package/components/ckeditor-styles/src/ckeditor-styles.component.d.ts +1 -1
  24. package/components/form-generic/src/components/form-builder/components/expression-builder/expression-builder.component.d.ts +2 -1
  25. package/components/form-generic/src/components/form-builder/form-builder.component.d.ts +3 -1
  26. package/components/form-generic/src/components/form-render/components/item/components/checkbox/checkbox.component.d.ts +34 -0
  27. package/components/form-generic/src/components/form-render/components/item/components/index.d.ts +1 -0
  28. package/components/form-generic/src/components/form-render/components/item/components/table/table.component.d.ts +6 -1
  29. package/components/form-generic/src/components/sd-feel-expression/sd-feel-expression.component.d.ts +1 -1
  30. package/components/form-generic/src/configurations/form.configuration.d.ts +1 -1
  31. package/components/form-generic/src/models/form-generic-component.model.d.ts +8 -8
  32. package/components/form-generic/src/models/form-generic-definition-selection.model.d.ts +5 -5
  33. package/components/form-generic/src/models/form-generic-expression.model.d.ts +12 -12
  34. package/components/form-generic/src/models/index.d.ts +1 -0
  35. package/components/form-generic/src/services/form-generic.service.d.ts +2 -2
  36. package/components/import-excel/src/import-excel.component.d.ts +1 -0
  37. package/components/index.d.ts +7 -1
  38. package/components/mini-editor/src/mini-editor.model.d.ts +1 -1
  39. package/components/modal/src/modal.component.d.ts +3 -2
  40. package/components/modal-resizable/src/modal-resizable.component.d.ts +92 -0
  41. package/components/modal-resizable/src/modal-resizable.registry.d.ts +22 -0
  42. package/components/org-chart/src/org-chart.component.d.ts +6 -0
  43. package/components/preview/src/preview-image/preview-image.component.d.ts +1 -0
  44. package/components/query-bar/src/components/actions-bar/actions-bar.component.d.ts +6 -2
  45. package/components/query-bar/src/components/build-chip/build-chip.component.d.ts +4 -1
  46. package/components/query-bar/src/components/chip-popover/chip-popover.component.d.ts +8 -0
  47. package/components/query-bar/src/components/field-picker/field-picker.component.d.ts +2 -0
  48. package/components/query-bar/src/components/inline-chip/inline-chip.component.d.ts +2 -0
  49. package/components/query-bar/src/components/inline-value-chip/inline-value-chip.component.d.ts +3 -3
  50. package/components/query-bar/src/components/saved-filters-menu/saved-filters-menu.component.d.ts +9 -4
  51. package/components/query-bar/src/query-bar.component.d.ts +32 -5
  52. package/components/query-bar/src/query-bar.model.d.ts +15 -12
  53. package/components/query-builder/src/query-builder.component.d.ts +76 -39
  54. package/components/query-builder/src/query-builder.model.d.ts +59 -52
  55. package/components/query-builder/src/query-builder.serializer.d.ts +15 -6
  56. package/components/section/src/section.component.d.ts +5 -0
  57. package/components/side-drawer/src/body-scroll-lock.service.d.ts +10 -0
  58. package/components/splitter/src/splitter-handle/splitter-handle.component.d.ts +1 -0
  59. package/components/tab-router/index.d.ts +2 -1
  60. package/components/tab-router/src/actions/tab-router.action.d.ts +2 -2
  61. package/components/tab-router/src/components/tab-router-item/tab-router-item.component.d.ts +2 -2
  62. package/components/tab-router/src/components/tab-router-nav/tab-router-nav.component.d.ts +3 -3
  63. package/components/tab-router/src/components/tab-router-outlet/tab-router-outlet.component.d.ts +3 -3
  64. package/components/tab-router/src/decorators/tab.decorator.d.ts +13 -1
  65. package/components/tab-router/src/events/tab-router.event.d.ts +3 -3
  66. package/components/tab-router/src/models/tab-router.model.d.ts +2 -2
  67. package/components/tab-router/src/pipes/tab-info.pipe.d.ts +2 -2
  68. package/components/tab-router/src/services/tab-router.service.d.ts +9 -9
  69. package/components/table/index.d.ts +1 -0
  70. package/components/table/src/components/config/config.component.d.ts +6 -1
  71. package/components/table/src/components/desktop-cell/view/view.component.d.ts +1 -0
  72. package/components/table/src/components/filter/external-filter/external-filter.component.d.ts +1 -1
  73. package/components/table/src/components/filter/mobile-filter/mobile-filter.component.d.ts +1 -1
  74. package/components/table/src/components/selector-action/action-filter.pipe.d.ts +8 -1
  75. package/components/table/src/components/selector-action/selector-action.component.d.ts +2 -0
  76. package/components/table/src/directives/index.d.ts +1 -0
  77. package/components/table/src/directives/sd-table-command-header-def.directive.d.ts +24 -0
  78. package/components/table/src/models/table-column.model.d.ts +30 -13
  79. package/components/table/src/models/table-item.model.d.ts +30 -1
  80. package/components/table/src/models/table-option-selector.model.d.ts +5 -4
  81. package/components/table/src/models/table-option.model.d.ts +12 -0
  82. package/components/table/src/pipes/sd-group.pipe.d.ts +6 -2
  83. package/components/table/src/services/table-filter/table-filter.model.d.ts +15 -15
  84. package/components/table/src/services/table-filter/table-filter.service.d.ts +2 -2
  85. package/components/table/src/services/table-format/table-format.service.d.ts +1 -1
  86. package/components/table/src/services/table-selection/selection-action.util.d.ts +24 -0
  87. package/components/table/src/services/table-selection/table-selection.util.d.ts +31 -0
  88. package/components/table/src/services/tree/tree.util.d.ts +3 -2
  89. package/components/table/src/table.component.d.ts +51 -5
  90. package/components/tree/src/tree-item-def.directive.d.ts +1 -1
  91. package/components/tree/src/tree.component.d.ts +16 -4
  92. package/components/tree/src/tree.model.d.ts +31 -25
  93. package/components/upload-file/src/configurations/upload-file.configuration.d.ts +2 -2
  94. package/components/upload-file/src/upload-file.component.d.ts +4 -1
  95. package/configurations/src/sd-core.configuration.d.ts +1 -2
  96. package/fesm2022/sdcorejs-angular-components-anchor.mjs +36 -12
  97. package/fesm2022/sdcorejs-angular-components-anchor.mjs.map +1 -1
  98. package/fesm2022/sdcorejs-angular-components-api-contract-builder.mjs +3411 -0
  99. package/fesm2022/sdcorejs-angular-components-api-contract-builder.mjs.map +1 -0
  100. package/fesm2022/sdcorejs-angular-components-autoid-inspector.mjs +2 -2
  101. package/fesm2022/sdcorejs-angular-components-autoid-inspector.mjs.map +1 -1
  102. package/fesm2022/sdcorejs-angular-components-badge.mjs +27 -2
  103. package/fesm2022/sdcorejs-angular-components-badge.mjs.map +1 -1
  104. package/fesm2022/sdcorejs-angular-components-button.mjs +2 -2
  105. package/fesm2022/sdcorejs-angular-components-button.mjs.map +1 -1
  106. package/fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs +1 -1
  107. package/fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs.map +1 -1
  108. package/fesm2022/sdcorejs-angular-components-code-editor.mjs +3 -3
  109. package/fesm2022/sdcorejs-angular-components-code-editor.mjs.map +1 -1
  110. package/fesm2022/sdcorejs-angular-components-data-state.mjs +3 -3
  111. package/fesm2022/sdcorejs-angular-components-data-state.mjs.map +1 -1
  112. package/fesm2022/sdcorejs-angular-components-editor.mjs +2 -2
  113. package/fesm2022/sdcorejs-angular-components-editor.mjs.map +1 -1
  114. package/fesm2022/sdcorejs-angular-components-form-generic.mjs +324 -192
  115. package/fesm2022/sdcorejs-angular-components-form-generic.mjs.map +1 -1
  116. package/fesm2022/sdcorejs-angular-components-history.mjs +4 -4
  117. package/fesm2022/sdcorejs-angular-components-history.mjs.map +1 -1
  118. package/fesm2022/sdcorejs-angular-components-import-excel.mjs +13 -5
  119. package/fesm2022/sdcorejs-angular-components-import-excel.mjs.map +1 -1
  120. package/fesm2022/sdcorejs-angular-components-inform.mjs +3 -3
  121. package/fesm2022/sdcorejs-angular-components-inform.mjs.map +1 -1
  122. package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs +164 -8
  123. package/fesm2022/sdcorejs-angular-components-modal-resizable.mjs.map +1 -1
  124. package/fesm2022/sdcorejs-angular-components-modal.mjs +30 -18
  125. package/fesm2022/sdcorejs-angular-components-modal.mjs.map +1 -1
  126. package/fesm2022/sdcorejs-angular-components-operator.mjs +2 -2
  127. package/fesm2022/sdcorejs-angular-components-operator.mjs.map +1 -1
  128. package/fesm2022/sdcorejs-angular-components-org-chart.mjs +60 -13
  129. package/fesm2022/sdcorejs-angular-components-org-chart.mjs.map +1 -1
  130. package/fesm2022/sdcorejs-angular-components-preview.mjs +27 -17
  131. package/fesm2022/sdcorejs-angular-components-preview.mjs.map +1 -1
  132. package/fesm2022/sdcorejs-angular-components-query-bar.mjs +192 -30
  133. package/fesm2022/sdcorejs-angular-components-query-bar.mjs.map +1 -1
  134. package/fesm2022/sdcorejs-angular-components-query-builder.mjs +187 -127
  135. package/fesm2022/sdcorejs-angular-components-query-builder.mjs.map +1 -1
  136. package/fesm2022/sdcorejs-angular-components-section.mjs +33 -2
  137. package/fesm2022/sdcorejs-angular-components-section.mjs.map +1 -1
  138. package/fesm2022/sdcorejs-angular-components-side-drawer.mjs +83 -24
  139. package/fesm2022/sdcorejs-angular-components-side-drawer.mjs.map +1 -1
  140. package/fesm2022/sdcorejs-angular-components-splitter.mjs +57 -21
  141. package/fesm2022/sdcorejs-angular-components-splitter.mjs.map +1 -1
  142. package/fesm2022/sdcorejs-angular-components-stepper.mjs +2 -2
  143. package/fesm2022/sdcorejs-angular-components-stepper.mjs.map +1 -1
  144. package/fesm2022/sdcorejs-angular-components-tab-router.mjs +68 -20
  145. package/fesm2022/sdcorejs-angular-components-tab-router.mjs.map +1 -1
  146. package/fesm2022/sdcorejs-angular-components-tab.mjs +3 -2
  147. package/fesm2022/sdcorejs-angular-components-tab.mjs.map +1 -1
  148. package/fesm2022/sdcorejs-angular-components-table.mjs +555 -267
  149. package/fesm2022/sdcorejs-angular-components-table.mjs.map +1 -1
  150. package/fesm2022/sdcorejs-angular-components-tree.mjs +80 -17
  151. package/fesm2022/sdcorejs-angular-components-tree.mjs.map +1 -1
  152. package/fesm2022/sdcorejs-angular-components-upload-file.mjs +48 -13
  153. package/fesm2022/sdcorejs-angular-components-upload-file.mjs.map +1 -1
  154. package/fesm2022/sdcorejs-angular-components.mjs +7 -1
  155. package/fesm2022/sdcorejs-angular-components.mjs.map +1 -1
  156. package/fesm2022/sdcorejs-angular-configurations.mjs.map +1 -1
  157. package/fesm2022/sdcorejs-angular-directives.mjs +45 -8
  158. package/fesm2022/sdcorejs-angular-directives.mjs.map +1 -1
  159. package/fesm2022/sdcorejs-angular-forms-autocomplete.mjs +40 -29
  160. package/fesm2022/sdcorejs-angular-forms-autocomplete.mjs.map +1 -1
  161. package/fesm2022/sdcorejs-angular-forms-checkbox.mjs +5 -5
  162. package/fesm2022/sdcorejs-angular-forms-checkbox.mjs.map +1 -1
  163. package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs +67 -50
  164. package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs.map +1 -1
  165. package/fesm2022/sdcorejs-angular-forms-chip.mjs +57 -43
  166. package/fesm2022/sdcorejs-angular-forms-chip.mjs.map +1 -1
  167. package/fesm2022/sdcorejs-angular-forms-date-range.mjs +231 -60
  168. package/fesm2022/sdcorejs-angular-forms-date-range.mjs.map +1 -1
  169. package/fesm2022/sdcorejs-angular-forms-date.mjs +95 -23
  170. package/fesm2022/sdcorejs-angular-forms-date.mjs.map +1 -1
  171. package/fesm2022/sdcorejs-angular-forms-datetime.mjs +130 -26
  172. package/fesm2022/sdcorejs-angular-forms-datetime.mjs.map +1 -1
  173. package/fesm2022/sdcorejs-angular-forms-entity-picker.mjs +39 -15
  174. package/fesm2022/sdcorejs-angular-forms-entity-picker.mjs.map +1 -1
  175. package/fesm2022/sdcorejs-angular-forms-input-color.mjs +16 -5
  176. package/fesm2022/sdcorejs-angular-forms-input-color.mjs.map +1 -1
  177. package/fesm2022/sdcorejs-angular-forms-input-number.mjs +24 -9
  178. package/fesm2022/sdcorejs-angular-forms-input-number.mjs.map +1 -1
  179. package/fesm2022/sdcorejs-angular-forms-input.mjs +58 -10
  180. package/fesm2022/sdcorejs-angular-forms-input.mjs.map +1 -1
  181. package/fesm2022/sdcorejs-angular-forms-models.mjs +227 -6
  182. package/fesm2022/sdcorejs-angular-forms-models.mjs.map +1 -1
  183. package/fesm2022/sdcorejs-angular-forms-radio.mjs +4 -4
  184. package/fesm2022/sdcorejs-angular-forms-radio.mjs.map +1 -1
  185. package/fesm2022/sdcorejs-angular-forms-select.mjs +135 -37
  186. package/fesm2022/sdcorejs-angular-forms-select.mjs.map +1 -1
  187. package/fesm2022/sdcorejs-angular-forms-switch.mjs +18 -3
  188. package/fesm2022/sdcorejs-angular-forms-switch.mjs.map +1 -1
  189. package/fesm2022/sdcorejs-angular-forms-textarea.mjs +51 -62
  190. package/fesm2022/sdcorejs-angular-forms-textarea.mjs.map +1 -1
  191. package/fesm2022/sdcorejs-angular-forms-time-range.mjs +57 -12
  192. package/fesm2022/sdcorejs-angular-forms-time-range.mjs.map +1 -1
  193. package/fesm2022/sdcorejs-angular-forms-time.mjs +16 -5
  194. package/fesm2022/sdcorejs-angular-forms-time.mjs.map +1 -1
  195. package/fesm2022/sdcorejs-angular-forms-tree-select.mjs +100 -9
  196. package/fesm2022/sdcorejs-angular-forms-tree-select.mjs.map +1 -1
  197. package/fesm2022/sdcorejs-angular-forms.mjs +91 -46
  198. package/fesm2022/sdcorejs-angular-forms.mjs.map +1 -1
  199. package/fesm2022/sdcorejs-angular-handlers.mjs +18 -3
  200. package/fesm2022/sdcorejs-angular-handlers.mjs.map +1 -1
  201. package/fesm2022/sdcorejs-angular-i18n.mjs +895 -68
  202. package/fesm2022/sdcorejs-angular-i18n.mjs.map +1 -1
  203. package/fesm2022/sdcorejs-angular-interceptors.mjs +87 -29
  204. package/fesm2022/sdcorejs-angular-interceptors.mjs.map +1 -1
  205. package/fesm2022/sdcorejs-angular-modules-auth.mjs +25 -15
  206. package/fesm2022/sdcorejs-angular-modules-auth.mjs.map +1 -1
  207. package/fesm2022/sdcorejs-angular-modules-icon.mjs +2 -2
  208. package/fesm2022/sdcorejs-angular-modules-icon.mjs.map +1 -1
  209. package/fesm2022/sdcorejs-angular-modules-keycloak.mjs +32 -3
  210. package/fesm2022/sdcorejs-angular-modules-keycloak.mjs.map +1 -1
  211. package/fesm2022/sdcorejs-angular-modules-layout.mjs +342 -111
  212. package/fesm2022/sdcorejs-angular-modules-layout.mjs.map +1 -1
  213. package/fesm2022/sdcorejs-angular-modules-permission.mjs +177 -40
  214. package/fesm2022/sdcorejs-angular-modules-permission.mjs.map +1 -1
  215. package/fesm2022/sdcorejs-angular-pipes.mjs +62 -28
  216. package/fesm2022/sdcorejs-angular-pipes.mjs.map +1 -1
  217. package/fesm2022/sdcorejs-angular-services-api.mjs +123 -13
  218. package/fesm2022/sdcorejs-angular-services-api.mjs.map +1 -1
  219. package/fesm2022/sdcorejs-angular-services-cache.mjs +53 -3
  220. package/fesm2022/sdcorejs-angular-services-cache.mjs.map +1 -1
  221. package/fesm2022/sdcorejs-angular-services-confirm.mjs +25 -73
  222. package/fesm2022/sdcorejs-angular-services-confirm.mjs.map +1 -1
  223. package/fesm2022/sdcorejs-angular-services-excel.mjs +12 -10
  224. package/fesm2022/sdcorejs-angular-services-excel.mjs.map +1 -1
  225. package/fesm2022/sdcorejs-angular-services-loading.mjs +75 -84
  226. package/fesm2022/sdcorejs-angular-services-loading.mjs.map +1 -1
  227. package/fesm2022/sdcorejs-angular-services-notify.mjs +46 -5
  228. package/fesm2022/sdcorejs-angular-services-notify.mjs.map +1 -1
  229. package/fesm2022/sdcorejs-angular-services-storage.mjs +4 -0
  230. package/fesm2022/sdcorejs-angular-services-storage.mjs.map +1 -1
  231. package/fesm2022/sdcorejs-angular-services.mjs +0 -1
  232. package/fesm2022/sdcorejs-angular-services.mjs.map +1 -1
  233. package/fesm2022/sdcorejs-angular-utilities-extensions.mjs +225 -80
  234. package/fesm2022/sdcorejs-angular-utilities-extensions.mjs.map +1 -1
  235. package/fesm2022/sdcorejs-angular-utilities-models.mjs +1 -63
  236. package/fesm2022/sdcorejs-angular-utilities-models.mjs.map +1 -1
  237. package/fesm2022/sdcorejs-angular.mjs +17 -10
  238. package/fesm2022/sdcorejs-angular.mjs.map +1 -1
  239. package/forms/autocomplete/src/autocomplete.component.d.ts +5 -2
  240. package/forms/chip-calendar/src/chip-calendar.component.d.ts +10 -0
  241. package/forms/date/src/date.component.d.ts +13 -2
  242. package/forms/date-range/src/date-range.component.d.ts +13 -2
  243. package/forms/datetime/src/datetime.component.d.ts +13 -2
  244. package/forms/entity-picker/src/entity-picker.component.d.ts +9 -3
  245. package/forms/input/src/input.component.d.ts +3 -0
  246. package/forms/input-color/src/input-color.component.d.ts +4 -0
  247. package/forms/input-number/src/input-number.component.d.ts +3 -0
  248. package/forms/models/index.d.ts +3 -0
  249. package/forms/models/src/sd-form-control-connector.d.ts +12 -0
  250. package/forms/models/src/sd-model-facing-control.d.ts +43 -0
  251. package/forms/models/src/sd-search.model.d.ts +1 -1
  252. package/forms/models/src/sd-selection-data.model.d.ts +1 -1
  253. package/forms/models/src/sd-temporal-transform.d.ts +31 -0
  254. package/forms/models/src/sd-timer-scope.d.ts +29 -0
  255. package/forms/select/src/select.component.d.ts +27 -4
  256. package/forms/src/forms.module.d.ts +22 -13
  257. package/forms/switch/src/switch.component.d.ts +5 -0
  258. package/forms/textarea/src/textarea.component.d.ts +5 -3
  259. package/forms/time-range/src/time-range.component.d.ts +22 -1
  260. package/forms/tree-select/src/tree-select.component.d.ts +36 -5
  261. package/i18n/src/en.d.ts +170 -10
  262. package/i18n/src/i18n.messages.d.ts +1 -1
  263. package/i18n/src/i18n.pipe.d.ts +3 -3
  264. package/i18n/src/i18n.service.d.ts +2 -1
  265. package/i18n/src/i18n.types.d.ts +0 -3
  266. package/interceptors/no-internet/no-internet.interceptor.d.ts +11 -1
  267. package/modules/auth/services/auth.model.d.ts +1 -1
  268. package/modules/keycloak/keycloak.service.d.ts +1 -0
  269. package/modules/layout/components/shared/menu-tree/menu-tree.component.d.ts +2 -0
  270. package/modules/layout/components/sidebar-mobile-v1/components/sidebar/sidebar.component.d.ts +3 -3
  271. package/modules/layout/components/sidebar-mobile-v1/main.component.d.ts +3 -3
  272. package/modules/layout/components/sidebar-mobile-v2/main.component.d.ts +3 -3
  273. package/modules/layout/components/sidebar-mobile-v3/main.component.d.ts +3 -3
  274. package/modules/layout/components/sidebar-v1/components/sidebar/sidebar.component.d.ts +16 -3
  275. package/modules/layout/components/sidebar-v1/main.component.d.ts +3 -3
  276. package/modules/layout/components/sidebar-v2/main.component.d.ts +3 -3
  277. package/modules/layout/components/sidebar-v3/main.component.d.ts +3 -3
  278. package/modules/layout/modules/forbidden/pages/root/root.component.d.ts +5 -0
  279. package/modules/layout/modules/not-found/pages/root/root.component.d.ts +5 -0
  280. package/modules/layout/services/layout.service.d.ts +21 -0
  281. package/modules/layout/services/storage/storage.service.d.ts +52 -7
  282. package/modules/permission/src/configurations/permission.configuration.d.ts +11 -0
  283. package/modules/permission/src/directives/permission.directive.d.ts +2 -1
  284. package/modules/permission/src/services/permission.service.d.ts +52 -1
  285. package/package.json +40 -29
  286. package/pipes/src/safe-html.pipe.d.ts +26 -4
  287. package/pipes/src/time-different.pipe.d.ts +1 -0
  288. package/public-api.d.ts +11 -10
  289. package/services/api/src/api-host.d.ts +15 -0
  290. package/services/api/src/api.model.d.ts +14 -0
  291. package/services/api/src/api.module.d.ts +6 -0
  292. package/services/cache/src/cache.model.d.ts +10 -0
  293. package/services/index.d.ts +0 -1
  294. package/services/notify/index.d.ts +1 -1
  295. package/utilities/extensions/index.d.ts +1 -5
  296. package/utilities/extensions/src/url-safety.d.ts +72 -0
  297. package/utilities/extensions/src/utility.extension.d.ts +9 -5
  298. package/utilities/models/index.d.ts +0 -10
  299. package/components/base/index.d.ts +0 -1
  300. package/components/base/src/base-secure.component.d.ts +0 -8
  301. package/components/document-builder/index.d.ts +0 -4
  302. package/components/document-builder/src/components/header-footer-builder/header-footer-builder.component.d.ts +0 -15
  303. package/components/document-builder/src/components/header-footer-builder/plugins/page-number.plugin.d.ts +0 -4
  304. package/components/document-builder/src/components/index.d.ts +0 -1
  305. package/components/document-builder/src/document-builder.component.d.ts +0 -53
  306. package/components/document-builder/src/document-builder.config.d.ts +0 -21
  307. package/components/document-builder/src/document-builder.model.d.ts +0 -41
  308. package/components/document-builder/src/document-builder.utils.d.ts +0 -10
  309. package/components/document-builder/src/plugins/block-space/block-space.plugin.d.ts +0 -9
  310. package/components/document-builder/src/plugins/ck-comment/ck-comment.plugin.d.ts +0 -44
  311. package/components/document-builder/src/plugins/ck-comment/ck-comment.plugin.model.d.ts +0 -57
  312. package/components/document-builder/src/plugins/heading/heading.plugin.d.ts +0 -5
  313. package/components/document-builder/src/plugins/highlight-range/highlight-range.plugin.d.ts +0 -4
  314. package/components/document-builder/src/plugins/image-custom/image-custom.plugin.d.ts +0 -31
  315. package/components/document-builder/src/plugins/image-upload/image-upload.plugin.d.ts +0 -5
  316. package/components/document-builder/src/plugins/index.d.ts +0 -11
  317. package/components/document-builder/src/plugins/page-orientation/page-orientation.plugin.d.ts +0 -24
  318. package/components/document-builder/src/plugins/paste-handler/filters/bookmark.d.ts +0 -14
  319. package/components/document-builder/src/plugins/paste-handler/filters/br.d.ts +0 -15
  320. package/components/document-builder/src/plugins/paste-handler/filters/image.d.ts +0 -25
  321. package/components/document-builder/src/plugins/paste-handler/filters/list.d.ts +0 -29
  322. package/components/document-builder/src/plugins/paste-handler/filters/parse.d.ts +0 -35
  323. package/components/document-builder/src/plugins/paste-handler/filters/removeboldwrapper.d.ts +0 -15
  324. package/components/document-builder/src/plugins/paste-handler/filters/removegooglesheetstag.d.ts +0 -15
  325. package/components/document-builder/src/plugins/paste-handler/filters/removeinvalidtablewidth.d.ts +0 -15
  326. package/components/document-builder/src/plugins/paste-handler/filters/removemsattributes.d.ts +0 -15
  327. package/components/document-builder/src/plugins/paste-handler/filters/removestyleblock.d.ts +0 -15
  328. package/components/document-builder/src/plugins/paste-handler/filters/removexmlns.d.ts +0 -15
  329. package/components/document-builder/src/plugins/paste-handler/filters/replacemsfootnotes.d.ts +0 -54
  330. package/components/document-builder/src/plugins/paste-handler/filters/space.d.ts +0 -27
  331. package/components/document-builder/src/plugins/paste-handler/filters/table.d.ts +0 -16
  332. package/components/document-builder/src/plugins/paste-handler/filters/utils.d.ts +0 -25
  333. package/components/document-builder/src/plugins/paste-handler/index.d.ts +0 -35
  334. package/components/document-builder/src/plugins/paste-handler/normalizers/googledocsnormalizer.d.ts +0 -31
  335. package/components/document-builder/src/plugins/paste-handler/normalizers/googlesheetsnormalizer.d.ts +0 -31
  336. package/components/document-builder/src/plugins/paste-handler/normalizers/mswordnormalizer.d.ts +0 -29
  337. package/components/document-builder/src/plugins/paste-handler/types.d.ts +0 -30
  338. package/components/document-builder/src/plugins/table-custom/index.d.ts +0 -34
  339. package/components/document-builder/src/plugins/variable/variable.plugin.d.ts +0 -51
  340. package/components/table/src/pipes/selection-visible-select-all.pipe.d.ts +0 -9
  341. package/fesm2022/sdcorejs-angular-components-base.mjs +0 -23
  342. package/fesm2022/sdcorejs-angular-components-base.mjs.map +0 -1
  343. package/fesm2022/sdcorejs-angular-components-document-builder.mjs +0 -5038
  344. package/fesm2022/sdcorejs-angular-components-document-builder.mjs.map +0 -1
  345. package/fesm2022/sdcorejs-angular-models.mjs +0 -6
  346. package/fesm2022/sdcorejs-angular-models.mjs.map +0 -1
  347. package/fesm2022/sdcorejs-angular-services-docx.mjs +0 -291
  348. package/fesm2022/sdcorejs-angular-services-docx.mjs.map +0 -1
  349. package/fesm2022/sdcorejs-angular-services-license.mjs +0 -97
  350. package/fesm2022/sdcorejs-angular-services-license.mjs.map +0 -1
  351. package/models/index.d.ts +0 -1
  352. package/models/src/language.model.d.ts +0 -2
  353. package/services/docx/index.d.ts +0 -1
  354. package/services/docx/src/lib/docx.model.d.ts +0 -9
  355. package/services/docx/src/lib/docx.service.d.ts +0 -14
  356. package/services/docx/src/lib/pandoc-core.d.ts +0 -11
  357. package/services/docx/src/public-api.d.ts +0 -2
  358. package/services/license/index.d.ts +0 -1
  359. package/services/license/src/license.service.d.ts +0 -9
  360. package/utilities/extensions/src/array.extension.d.ts +0 -1
  361. package/utilities/extensions/src/color.extension.d.ts +0 -5
  362. package/utilities/extensions/src/date.extension.d.ts +0 -1
  363. package/utilities/extensions/src/number.extension.d.ts +0 -1
  364. package/utilities/extensions/src/string.extension.d.ts +0 -50
  365. package/utilities/models/src/color.model.d.ts +0 -4
  366. package/utilities/models/src/empty.model.d.ts +0 -4
  367. package/utilities/models/src/filter.model.d.ts +0 -12
  368. package/utilities/models/src/maybe-async.model.d.ts +0 -10
  369. package/utilities/models/src/nested-key-of.model.d.ts +0 -4
  370. package/utilities/models/src/operator.model.d.ts +0 -13
  371. package/utilities/models/src/order.model.d.ts +0 -4
  372. package/utilities/models/src/paging.model.d.ts +0 -8
  373. package/utilities/models/src/pattern.model.d.ts +0 -21
  374. package/utilities/models/src/size.model.d.ts +0 -4
package/fesm2022/sdcorejs-angular-components-ckeditor-styles.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sdcorejs-angular-components-ckeditor-styles.mjs","sources":["../../../projects/sdcorejs-angular/components/ckeditor-styles/src/ckeditor-styles.component.ts","../../../projects/sdcorejs-angular/components/ckeditor-styles/sdcorejs-angular-components-ckeditor-styles.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Styles-only component that loads the global CKEditor 5 stylesheet on demand.\n *\n * Why this exists:\n * - CKEditor's CSS must be global (applies to body-rendered overlays, dialogs, balloons),\n * which means whichever Angular component declares it must use ViewEncapsulation.None.\n * - Switching encapsulation on the main editor components (`<sd-editor>`, `<sd-mini-editor>`,\n * `<sd-document-builder>`) would un-scope all their local styles too.\n * - Instead, this tiny no-render component owns the global CSS. The editor components embed\n * `<sd-ckeditor-styles>` at the top of their template; the CSS is injected once into <head>\n * the first time any editor instance mounts. Editor components themselves keep\n * ViewEncapsulation.Emulated.\n *\n * Behavior:\n * - Renders nothing in the DOM (empty template).\n * - Angular dedupes styles per component class — multiple instances inject the <style> tag\n * only once.\n * - When the host editor component is lazy-loaded, this component's chunk and its CSS travel\n * with it.\n */\n@Component({\n selector: 'sd-ckeditor-styles',\n standalone: true,\n template: '',\n styleUrl: '../../../assets/scss/ckeditor5.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdCKEditorStyles {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;MASU,gBAAgB,CAAA;wGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,8EALjB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6khJAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAKD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EAAA,QAAA,EACN,EAAE,EAAA,aAAA,EAEG,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,6khJAAA,CAAA,EAAA;;;AC5BjD;;AAEG;;;;"}
1
+ {"version":3,"file":"sdcorejs-angular-components-ckeditor-styles.mjs","sources":["../../../projects/sdcorejs-angular/components/ckeditor-styles/src/ckeditor-styles.component.ts","../../../projects/sdcorejs-angular/components/ckeditor-styles/sdcorejs-angular-components-ckeditor-styles.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Styles-only component that loads the global CKEditor 5 stylesheet on demand.\n *\n * Why this exists:\n * - CKEditor's CSS must be global (applies to body-rendered overlays, dialogs, balloons),\n * which means whichever Angular component declares it must use ViewEncapsulation.None.\n * - Switching encapsulation on the main editor components (`<sd-editor>`, `<sd-mini-editor>`,\n * `<sd-mini-editor>`) would un-scope all their local styles too.\n * - Instead, this tiny no-render component owns the global CSS. The editor components embed\n * `<sd-ckeditor-styles>` at the top of their template; the CSS is injected once into <head>\n * the first time any editor instance mounts. Editor components themselves keep\n * ViewEncapsulation.Emulated.\n *\n * Behavior:\n * - Renders nothing in the DOM (empty template).\n * - Angular dedupes styles per component class — multiple instances inject the <style> tag\n * only once.\n * - When the host editor component is lazy-loaded, this component's chunk and its CSS travel\n * with it.\n */\n@Component({\n selector: 'sd-ckeditor-styles',\n standalone: true,\n template: '',\n styleUrl: '../../../assets/scss/ckeditor5.scss',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdCKEditorStyles {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;AAmBG;MASU,gBAAgB,CAAA;wGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,8EALjB,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6khJAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAKD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;+BACE,oBAAoB,EAAA,UAAA,EAClB,IAAI,EAAA,QAAA,EACN,EAAE,EAAA,aAAA,EAEG,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,6khJAAA,CAAA,EAAA;;;AC5BjD;;AAEG;;;;"}
package/fesm2022/sdcorejs-angular-components-code-editor.mjs CHANGED
@@ -10,7 +10,7 @@ import 'prismjs/components/prism-typescript';
10
10
  import 'prismjs/components/prism-json';
11
11
  import 'prismjs/components/prism-css';
12
12
  import 'prismjs/components/prism-scss';
13
- import { TranslatePipe } from '@sdcorejs/angular/i18n';
13
+ import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
14
14
  import { SdIcon } from '@sdcorejs/angular/modules/icon';
15
15
  import 'prismjs/components/prism-markup';
16
16
 
@@ -112,11 +112,11 @@ class SdCodeEditor {
112
112
  }
113
113
  }
114
114
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCodeEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
115
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdCodeEditor, isStandalone: true, selector: "sd-code-editor", inputs: { valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange" }, ngImport: i0, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\n\n <div class=\"sd-code-header\">\n <div class=\"mac-dots\">\n <span class=\"dot red\"></span>\n <span class=\"dot yellow\"></span>\n <span class=\"dot green\"></span>\n </div>\n\n <div class=\"lang-badge\">\n {{ language().toUpperCase() }}\n <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\n {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\n </span>\n </div>\n\n <button class=\"copy-btn\" [matTooltip]=\"copied() ? ('core.component.code-editor.copied' | translate) : 'Copy code'\" (click)=\"copyToClipboard()\">\n <sd-icon [class.text-success]=\"copied()\" [name]=\"copied() ? 'check' : 'content_copy'\"></sd-icon>\n <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n </button>\n </div>\n\n <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\n <div class=\"editor-overlay-container\">\n\n @if (!viewed()) {\n <textarea\n class=\"code-textarea\"\n [value]=\"textValue()\"\n (input)=\"onTextChange($any($event.target).value)\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\">\n </textarea>\n }\n\n <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\n\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.sd-code-wrapper{background-color:#1e1e1e;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;margin:16px 0;font-family:Fira Code,Consolas,Monaco,monospace}.sd-code-wrapper .sd-code-header{display:flex;align-items:center;justify-content:space-between;background-color:#2d2d2d;padding:8px 16px;border-bottom:1px solid #404040}.sd-code-wrapper .sd-code-header .mac-dots{display:flex;gap:6px}.sd-code-wrapper .sd-code-header .mac-dots .dot{width:12px;height:12px;border-radius:50%}.sd-code-wrapper .sd-code-header .mac-dots .dot.red{background-color:#ff5f56}.sd-code-wrapper .sd-code-header .mac-dots .dot.yellow{background-color:#ffbd2e}.sd-code-wrapper .sd-code-header .mac-dots .dot.green{background-color:#27c93f}.sd-code-wrapper .sd-code-header .lang-badge{color:#858585;font-size:12px;font-weight:600;letter-spacing:.5px}.sd-code-wrapper .sd-code-header .copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.sd-code-wrapper .sd-code-header .copy-btn sd-icon{font-size:16px;width:16px;height:16px}.sd-code-wrapper .sd-code-header .copy-btn:hover{background-color:#404040;color:#fff}.sd-code-wrapper .sd-code-header .copy-btn .text-success{color:#27c93f!important}.sd-code-wrapper .sd-code-content{overflow-y:auto;position:relative}.sd-code-wrapper .sd-code-content::-webkit-scrollbar{width:8px;height:8px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb:hover{background:#777}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-track{background:#1e1e1e}.sd-code-wrapper .sd-code-content .editor-overlay-container{position:relative;min-height:100px}.sd-code-wrapper .sd-code-content .code-textarea,.sd-code-wrapper .sd-code-content .code-display{margin:0;padding:16px;border:0;width:100%;min-height:100%;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;tab-size:2}.sd-code-wrapper .sd-code-content .code-textarea{position:absolute;top:0;left:0;z-index:2;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:#fff;resize:none;outline:none;overflow:hidden}.sd-code-wrapper .sd-code-content .code-display{position:relative;z-index:1;pointer-events:none}.sd-code-wrapper .sd-code-content .code-display code{color:#d4d4d4;font-family:inherit}.sd-code-wrapper .token.comment,.sd-code-wrapper .token.block-comment,.sd-code-wrapper .token.prolog,.sd-code-wrapper .token.doctype,.sd-code-wrapper .token.cdata{color:#999}.sd-code-wrapper .token.punctuation{color:#ccc}.sd-code-wrapper .token.tag,.sd-code-wrapper .token.attr-name,.sd-code-wrapper .token.namespace,.sd-code-wrapper .token.deleted{color:#e2777a}.sd-code-wrapper .token.function-name{color:#6196cc}.sd-code-wrapper .token.boolean,.sd-code-wrapper .token.number,.sd-code-wrapper .token.function{color:#f08d49}.sd-code-wrapper .token.property,.sd-code-wrapper .token.class-name,.sd-code-wrapper .token.constant,.sd-code-wrapper .token.symbol{color:#f8c555}.sd-code-wrapper .token.selector,.sd-code-wrapper .token.important,.sd-code-wrapper .token.atrule,.sd-code-wrapper .token.keyword,.sd-code-wrapper .token.builtin{color:#cc99cd}.sd-code-wrapper .token.string,.sd-code-wrapper .token.char,.sd-code-wrapper .token.attr-value,.sd-code-wrapper .token.regex,.sd-code-wrapper .token.variable{color:#7ec699}.sd-code-wrapper .token.operator,.sd-code-wrapper .token.entity,.sd-code-wrapper .token.url{color:#67cdcc}.sd-code-wrapper .token.important,.sd-code-wrapper .token.bold{font-weight:700}.sd-code-wrapper .token.italic{font-style:italic}.sd-code-wrapper .token.entity{cursor:help}.sd-code-wrapper .token.inserted{color:green}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
115
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdCodeEditor, isStandalone: true, selector: "sd-code-editor", inputs: { valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange" }, ngImport: i0, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\n\n <div class=\"sd-code-header\">\n <div class=\"mac-dots\">\n <span class=\"dot red\"></span>\n <span class=\"dot yellow\"></span>\n <span class=\"dot green\"></span>\n </div>\n\n <div class=\"lang-badge\">\n {{ language().toUpperCase() }}\n <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\n {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\n </span>\n </div>\n\n <button class=\"copy-btn\" [matTooltip]=\"copied() ? ('core.component.code-editor.copied' | sdTranslate) : 'Copy code'\" (click)=\"copyToClipboard()\">\n <sd-icon [class.text-success]=\"copied()\" [name]=\"copied() ? 'check' : 'content_copy'\"></sd-icon>\n <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n </button>\n </div>\n\n <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\n <div class=\"editor-overlay-container\">\n\n @if (!viewed()) {\n <textarea\n class=\"code-textarea\"\n [value]=\"textValue()\"\n (input)=\"onTextChange($any($event.target).value)\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\">\n </textarea>\n }\n\n <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\n\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.sd-code-wrapper{background-color:#1e1e1e;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;margin:16px 0;font-family:Fira Code,Consolas,Monaco,monospace}.sd-code-wrapper .sd-code-header{display:flex;align-items:center;justify-content:space-between;background-color:#2d2d2d;padding:8px 16px;border-bottom:1px solid #404040}.sd-code-wrapper .sd-code-header .mac-dots{display:flex;gap:6px}.sd-code-wrapper .sd-code-header .mac-dots .dot{width:12px;height:12px;border-radius:50%}.sd-code-wrapper .sd-code-header .mac-dots .dot.red{background-color:#ff5f56}.sd-code-wrapper .sd-code-header .mac-dots .dot.yellow{background-color:#ffbd2e}.sd-code-wrapper .sd-code-header .mac-dots .dot.green{background-color:#27c93f}.sd-code-wrapper .sd-code-header .lang-badge{color:#858585;font-size:12px;font-weight:600;letter-spacing:.5px}.sd-code-wrapper .sd-code-header .copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.sd-code-wrapper .sd-code-header .copy-btn sd-icon{font-size:16px;width:16px;height:16px}.sd-code-wrapper .sd-code-header .copy-btn:hover{background-color:#404040;color:#fff}.sd-code-wrapper .sd-code-header .copy-btn .text-success{color:#27c93f!important}.sd-code-wrapper .sd-code-content{overflow-y:auto;position:relative}.sd-code-wrapper .sd-code-content::-webkit-scrollbar{width:8px;height:8px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb:hover{background:#777}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-track{background:#1e1e1e}.sd-code-wrapper .sd-code-content .editor-overlay-container{position:relative;min-height:100px}.sd-code-wrapper .sd-code-content .code-textarea,.sd-code-wrapper .sd-code-content .code-display{margin:0;padding:16px;border:0;width:100%;min-height:100%;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;tab-size:2}.sd-code-wrapper .sd-code-content .code-textarea{position:absolute;top:0;left:0;z-index:2;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:#fff;resize:none;outline:none;overflow:hidden}.sd-code-wrapper .sd-code-content .code-textarea:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.sd-code-wrapper .sd-code-content .code-display{position:relative;z-index:1;pointer-events:none}.sd-code-wrapper .sd-code-content .code-display code{color:#d4d4d4;font-family:inherit}.sd-code-wrapper .token.comment,.sd-code-wrapper .token.block-comment,.sd-code-wrapper .token.prolog,.sd-code-wrapper .token.doctype,.sd-code-wrapper .token.cdata{color:#999}.sd-code-wrapper .token.punctuation{color:#ccc}.sd-code-wrapper .token.tag,.sd-code-wrapper .token.attr-name,.sd-code-wrapper .token.namespace,.sd-code-wrapper .token.deleted{color:#e2777a}.sd-code-wrapper .token.function-name{color:#6196cc}.sd-code-wrapper .token.boolean,.sd-code-wrapper .token.number,.sd-code-wrapper .token.function{color:#f08d49}.sd-code-wrapper .token.property,.sd-code-wrapper .token.class-name,.sd-code-wrapper .token.constant,.sd-code-wrapper .token.symbol{color:#f8c555}.sd-code-wrapper .token.selector,.sd-code-wrapper .token.important,.sd-code-wrapper .token.atrule,.sd-code-wrapper .token.keyword,.sd-code-wrapper .token.builtin{color:#cc99cd}.sd-code-wrapper .token.string,.sd-code-wrapper .token.char,.sd-code-wrapper .token.attr-value,.sd-code-wrapper .token.regex,.sd-code-wrapper .token.variable{color:#7ec699}.sd-code-wrapper .token.operator,.sd-code-wrapper .token.entity,.sd-code-wrapper .token.url{color:#67cdcc}.sd-code-wrapper .token.important,.sd-code-wrapper .token.bold{font-weight:700}.sd-code-wrapper .token.italic{font-style:italic}.sd-code-wrapper .token.entity{cursor:help}.sd-code-wrapper .token.inserted{color:green}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
116
116
  }
117
117
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCodeEditor, decorators: [{
118
118
  type: Component,
119
- args: [{ selector: 'sd-code-editor', standalone: true, imports: [SdIcon, CommonModule, MatTooltipModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\n\n <div class=\"sd-code-header\">\n <div class=\"mac-dots\">\n <span class=\"dot red\"></span>\n <span class=\"dot yellow\"></span>\n <span class=\"dot green\"></span>\n </div>\n\n <div class=\"lang-badge\">\n {{ language().toUpperCase() }}\n <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\n {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\n </span>\n </div>\n\n <button class=\"copy-btn\" [matTooltip]=\"copied() ? ('core.component.code-editor.copied' | translate) : 'Copy code'\" (click)=\"copyToClipboard()\">\n <sd-icon [class.text-success]=\"copied()\" [name]=\"copied() ? 'check' : 'content_copy'\"></sd-icon>\n <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n </button>\n </div>\n\n <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\n <div class=\"editor-overlay-container\">\n\n @if (!viewed()) {\n <textarea\n class=\"code-textarea\"\n [value]=\"textValue()\"\n (input)=\"onTextChange($any($event.target).value)\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\">\n </textarea>\n }\n\n <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\n\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.sd-code-wrapper{background-color:#1e1e1e;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;margin:16px 0;font-family:Fira Code,Consolas,Monaco,monospace}.sd-code-wrapper .sd-code-header{display:flex;align-items:center;justify-content:space-between;background-color:#2d2d2d;padding:8px 16px;border-bottom:1px solid #404040}.sd-code-wrapper .sd-code-header .mac-dots{display:flex;gap:6px}.sd-code-wrapper .sd-code-header .mac-dots .dot{width:12px;height:12px;border-radius:50%}.sd-code-wrapper .sd-code-header .mac-dots .dot.red{background-color:#ff5f56}.sd-code-wrapper .sd-code-header .mac-dots .dot.yellow{background-color:#ffbd2e}.sd-code-wrapper .sd-code-header .mac-dots .dot.green{background-color:#27c93f}.sd-code-wrapper .sd-code-header .lang-badge{color:#858585;font-size:12px;font-weight:600;letter-spacing:.5px}.sd-code-wrapper .sd-code-header .copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.sd-code-wrapper .sd-code-header .copy-btn sd-icon{font-size:16px;width:16px;height:16px}.sd-code-wrapper .sd-code-header .copy-btn:hover{background-color:#404040;color:#fff}.sd-code-wrapper .sd-code-header .copy-btn .text-success{color:#27c93f!important}.sd-code-wrapper .sd-code-content{overflow-y:auto;position:relative}.sd-code-wrapper .sd-code-content::-webkit-scrollbar{width:8px;height:8px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb:hover{background:#777}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-track{background:#1e1e1e}.sd-code-wrapper .sd-code-content .editor-overlay-container{position:relative;min-height:100px}.sd-code-wrapper .sd-code-content .code-textarea,.sd-code-wrapper .sd-code-content .code-display{margin:0;padding:16px;border:0;width:100%;min-height:100%;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;tab-size:2}.sd-code-wrapper .sd-code-content .code-textarea{position:absolute;top:0;left:0;z-index:2;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:#fff;resize:none;outline:none;overflow:hidden}.sd-code-wrapper .sd-code-content .code-display{position:relative;z-index:1;pointer-events:none}.sd-code-wrapper .sd-code-content .code-display code{color:#d4d4d4;font-family:inherit}.sd-code-wrapper .token.comment,.sd-code-wrapper .token.block-comment,.sd-code-wrapper .token.prolog,.sd-code-wrapper .token.doctype,.sd-code-wrapper .token.cdata{color:#999}.sd-code-wrapper .token.punctuation{color:#ccc}.sd-code-wrapper .token.tag,.sd-code-wrapper .token.attr-name,.sd-code-wrapper .token.namespace,.sd-code-wrapper .token.deleted{color:#e2777a}.sd-code-wrapper .token.function-name{color:#6196cc}.sd-code-wrapper .token.boolean,.sd-code-wrapper .token.number,.sd-code-wrapper .token.function{color:#f08d49}.sd-code-wrapper .token.property,.sd-code-wrapper .token.class-name,.sd-code-wrapper .token.constant,.sd-code-wrapper .token.symbol{color:#f8c555}.sd-code-wrapper .token.selector,.sd-code-wrapper .token.important,.sd-code-wrapper .token.atrule,.sd-code-wrapper .token.keyword,.sd-code-wrapper .token.builtin{color:#cc99cd}.sd-code-wrapper .token.string,.sd-code-wrapper .token.char,.sd-code-wrapper .token.attr-value,.sd-code-wrapper .token.regex,.sd-code-wrapper .token.variable{color:#7ec699}.sd-code-wrapper .token.operator,.sd-code-wrapper .token.entity,.sd-code-wrapper .token.url{color:#67cdcc}.sd-code-wrapper .token.important,.sd-code-wrapper .token.bold{font-weight:700}.sd-code-wrapper .token.italic{font-style:italic}.sd-code-wrapper .token.entity{cursor:help}.sd-code-wrapper .token.inserted{color:green}\n"] }]
119
+ args: [{ selector: 'sd-code-editor', standalone: true, imports: [SdIcon, CommonModule, MatTooltipModule, SdTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\n\n <div class=\"sd-code-header\">\n <div class=\"mac-dots\">\n <span class=\"dot red\"></span>\n <span class=\"dot yellow\"></span>\n <span class=\"dot green\"></span>\n </div>\n\n <div class=\"lang-badge\">\n {{ language().toUpperCase() }}\n <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\n {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\n </span>\n </div>\n\n <button class=\"copy-btn\" [matTooltip]=\"copied() ? ('core.component.code-editor.copied' | sdTranslate) : 'Copy code'\" (click)=\"copyToClipboard()\">\n <sd-icon [class.text-success]=\"copied()\" [name]=\"copied() ? 'check' : 'content_copy'\"></sd-icon>\n <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n </button>\n </div>\n\n <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\n <div class=\"editor-overlay-container\">\n\n @if (!viewed()) {\n <textarea\n class=\"code-textarea\"\n [value]=\"textValue()\"\n (input)=\"onTextChange($any($event.target).value)\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\">\n </textarea>\n }\n\n <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\n\n </div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";.sd-code-wrapper{background-color:#1e1e1e;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;margin:16px 0;font-family:Fira Code,Consolas,Monaco,monospace}.sd-code-wrapper .sd-code-header{display:flex;align-items:center;justify-content:space-between;background-color:#2d2d2d;padding:8px 16px;border-bottom:1px solid #404040}.sd-code-wrapper .sd-code-header .mac-dots{display:flex;gap:6px}.sd-code-wrapper .sd-code-header .mac-dots .dot{width:12px;height:12px;border-radius:50%}.sd-code-wrapper .sd-code-header .mac-dots .dot.red{background-color:#ff5f56}.sd-code-wrapper .sd-code-header .mac-dots .dot.yellow{background-color:#ffbd2e}.sd-code-wrapper .sd-code-header .mac-dots .dot.green{background-color:#27c93f}.sd-code-wrapper .sd-code-header .lang-badge{color:#858585;font-size:12px;font-weight:600;letter-spacing:.5px}.sd-code-wrapper .sd-code-header .copy-btn{display:flex;align-items:center;gap:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:13px;padding:4px 8px;border-radius:4px;transition:all .2s ease}.sd-code-wrapper .sd-code-header .copy-btn sd-icon{font-size:16px;width:16px;height:16px}.sd-code-wrapper .sd-code-header .copy-btn:hover{background-color:#404040;color:#fff}.sd-code-wrapper .sd-code-header .copy-btn .text-success{color:#27c93f!important}.sd-code-wrapper .sd-code-content{overflow-y:auto;position:relative}.sd-code-wrapper .sd-code-content::-webkit-scrollbar{width:8px;height:8px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-thumb:hover{background:#777}.sd-code-wrapper .sd-code-content::-webkit-scrollbar-track{background:#1e1e1e}.sd-code-wrapper .sd-code-content .editor-overlay-container{position:relative;min-height:100px}.sd-code-wrapper .sd-code-content .code-textarea,.sd-code-wrapper .sd-code-content .code-display{margin:0;padding:16px;border:0;width:100%;min-height:100%;font-family:inherit;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;tab-size:2}.sd-code-wrapper .sd-code-content .code-textarea{position:absolute;top:0;left:0;z-index:2;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:#fff;resize:none;outline:none;overflow:hidden}.sd-code-wrapper .sd-code-content .code-textarea:focus-visible{outline:2px solid var(--sd-primary, #005cbb);outline-offset:-2px}.sd-code-wrapper .sd-code-content .code-display{position:relative;z-index:1;pointer-events:none}.sd-code-wrapper .sd-code-content .code-display code{color:#d4d4d4;font-family:inherit}.sd-code-wrapper .token.comment,.sd-code-wrapper .token.block-comment,.sd-code-wrapper .token.prolog,.sd-code-wrapper .token.doctype,.sd-code-wrapper .token.cdata{color:#999}.sd-code-wrapper .token.punctuation{color:#ccc}.sd-code-wrapper .token.tag,.sd-code-wrapper .token.attr-name,.sd-code-wrapper .token.namespace,.sd-code-wrapper .token.deleted{color:#e2777a}.sd-code-wrapper .token.function-name{color:#6196cc}.sd-code-wrapper .token.boolean,.sd-code-wrapper .token.number,.sd-code-wrapper .token.function{color:#f08d49}.sd-code-wrapper .token.property,.sd-code-wrapper .token.class-name,.sd-code-wrapper .token.constant,.sd-code-wrapper .token.symbol{color:#f8c555}.sd-code-wrapper .token.selector,.sd-code-wrapper .token.important,.sd-code-wrapper .token.atrule,.sd-code-wrapper .token.keyword,.sd-code-wrapper .token.builtin{color:#cc99cd}.sd-code-wrapper .token.string,.sd-code-wrapper .token.char,.sd-code-wrapper .token.attr-value,.sd-code-wrapper .token.regex,.sd-code-wrapper .token.variable{color:#7ec699}.sd-code-wrapper .token.operator,.sd-code-wrapper .token.entity,.sd-code-wrapper .token.url{color:#67cdcc}.sd-code-wrapper .token.important,.sd-code-wrapper .token.bold{font-weight:700}.sd-code-wrapper .token.italic{font-style:italic}.sd-code-wrapper .token.entity{cursor:help}.sd-code-wrapper .token.inserted{color:green}\n"] }]
120
120
  }], ctorParameters: () => [] });
121
121
 
122
122
  /**
package/fesm2022/sdcorejs-angular-components-code-editor.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sdcorejs-angular-components-code-editor.mjs","sources":["../../../projects/sdcorejs-angular/components/code-editor/src/code-editor.component.ts","../../../projects/sdcorejs-angular/components/code-editor/src/code-editor.component.html","../../../projects/sdcorejs-angular/components/code-editor/sdcorejs-angular-components-code-editor.ts"],"sourcesContent":["import { Clipboard } from '@angular/cdk/clipboard';\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n inject,\n input,\n model,\n signal,\n untracked,\n ViewEncapsulation,\n booleanAttribute,\n} from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\nimport * as Prism from 'prismjs';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-scss';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport 'prismjs/components/prism-markup'; // HTML\n\nexport type CodeLanguage = 'html' | 'typescript' | 'json' | 'css' | 'scss';\n\n@Component({\n selector: 'sd-code-editor',\n standalone: true,\n imports: [SdIcon, CommonModule, MatTooltipModule, TranslatePipe],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './code-editor.component.html',\n styleUrl: './code-editor.component.scss',\n encapsulation: ViewEncapsulation.None, // Bắt buộc để nhận màu Prism\n})\nexport class SdCodeEditor {\n #clipboard = inject(Clipboard);\n #sanitizer = inject(DomSanitizer);\n\n // ==========================================\n // 1. SIGNAL INPUTS & MODEL\n // ==========================================\n // Nhận bất kỳ kiểu dữ liệu nào (string, array, object)\n valueModel = model<any>(undefined, { alias: 'model' });\n\n language = input<CodeLanguage>('typescript');\n maxHeight = input<string>('500px');\n\n // Trạng thái Viewed (true = Read Only, false = Editable)\n viewed = input(false, { transform: booleanAttribute });\n\n // ==========================================\n // 2. INTERNAL STATE\n // ==========================================\n copied = signal<boolean>(false);\n\n // Chuỗi text nội bộ dùng để map với thẻ <textarea>\n textValue = signal<string>('');\n\n prismLang = computed(() => (this.language() === 'html' ? 'markup' : this.language()));\n\n // Cờ lưu vết để chống Loop (Vòng lặp vô tận khi bắn 2 chiều)\n private _lastEmittedValue: any = undefined;\n\n constructor() {\n // ==========================================\n // EFFECT 1: Dữ liệu từ CHA truyền vào (Model -> TextValue)\n // ==========================================\n effect(() => {\n const extVal = this.valueModel();\n const lang = this.language();\n\n untracked(() => {\n // Nếu giá trị này do chính component bắn ra, bỏ qua để tránh loop\n if (extVal === this._lastEmittedValue) return;\n\n if (typeof extVal === 'string') {\n this.textValue.set(extVal);\n } else if (extVal !== undefined && extVal !== null) {\n // Tự động format Object -> String nếu là JSON\n if (lang === 'json') {\n try {\n this.textValue.set(JSON.stringify(extVal, null, 2));\n } catch {\n this.textValue.set('// Lỗi: Object có tham chiếu vòng (Circular Reference)');\n }\n } else {\n this.textValue.set(String(extVal));\n }\n } else {\n this.textValue.set('');\n }\n });\n });\n }\n\n // ==========================================\n // EFFECT 2: PrismJS render (TextValue -> HTML MÀU)\n // ==========================================\n highlightedCode = computed<SafeHtml>(() => {\n // Dùng khoảng trắng để giữ độ cao cho thẻ pre nếu rỗng\n const rawCode = this.textValue() || ' ';\n const langKey = this.prismLang();\n const grammar = Prism.languages[langKey] || Prism.languages['markup'];\n\n // Cộng thêm \\n ở cuối để chống lỗi con trỏ textarea ăn lẹm dòng cuối\n const highlightedString = Prism.highlight(rawCode, grammar, langKey) + '\\n';\n return this.#sanitizer.bypassSecurityTrustHtml(highlightedString);\n });\n\n // ==========================================\n // EVENTS\n // ==========================================\n\n // Khi người dùng gõ vào Textarea (TextValue -> Model)\n onTextChange(newText: string) {\n this.textValue.set(newText);\n\n let valToEmit: any = newText;\n\n // Nếu ngôn ngữ là JSON, cố gắng trả về Object thật\n if (this.language() === 'json') {\n try {\n valToEmit = JSON.parse(newText);\n } catch {\n // Nếu gõ dở ngoặc/sai cú pháp -> Trả về chuỗi String tạm\n valToEmit = newText;\n }\n }\n\n // Ghi sổ và bắn ra ngoài\n this._lastEmittedValue = valToEmit;\n this.valueModel.set(valToEmit);\n }\n\n copyToClipboard() {\n const rawCode = this.textValue();\n if (!rawCode) return;\n\n if (this.#clipboard.copy(rawCode)) {\n this.copied.set(true);\n setTimeout(() => this.copied.set(false), 2000);\n }\n }\n}\n","<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\n\n <div class=\"sd-code-header\">\n <div class=\"mac-dots\">\n <span class=\"dot red\"></span>\n <span class=\"dot yellow\"></span>\n <span class=\"dot green\"></span>\n </div>\n\n <div class=\"lang-badge\">\n {{ language().toUpperCase() }}\n <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\n {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\n </span>\n </div>\n\n <button class=\"copy-btn\" [matTooltip]=\"copied() ? ('core.component.code-editor.copied' | translate) : 'Copy code'\" (click)=\"copyToClipboard()\">\n <sd-icon [class.text-success]=\"copied()\" [name]=\"copied() ? 'check' : 'content_copy'\"></sd-icon>\n <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n </button>\n </div>\n\n <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\n <div class=\"editor-overlay-container\">\n\n @if (!viewed()) {\n <textarea\n class=\"code-textarea\"\n [value]=\"textValue()\"\n (input)=\"onTextChange($any($event.target).value)\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\">\n </textarea>\n }\n\n <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\n\n </div>\n </div>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"sdcorejs-angular-components-code-editor.mjs","sources":["../../../projects/sdcorejs-angular/components/code-editor/src/code-editor.component.ts","../../../projects/sdcorejs-angular/components/code-editor/src/code-editor.component.html","../../../projects/sdcorejs-angular/components/code-editor/sdcorejs-angular-components-code-editor.ts"],"sourcesContent":["import { Clipboard } from '@angular/cdk/clipboard';\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n effect,\n inject,\n input,\n model,\n signal,\n untracked,\n ViewEncapsulation,\n booleanAttribute,\n} from '@angular/core';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\nimport * as Prism from 'prismjs';\nimport 'prismjs/components/prism-typescript';\nimport 'prismjs/components/prism-json';\nimport 'prismjs/components/prism-css';\nimport 'prismjs/components/prism-scss';\nimport { SdTranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdIcon } from '@sdcorejs/angular/modules/icon';\nimport 'prismjs/components/prism-markup'; // HTML\n\nexport type CodeLanguage = 'html' | 'typescript' | 'json' | 'css' | 'scss';\n\n@Component({\n selector: 'sd-code-editor',\n standalone: true,\n imports: [SdIcon, CommonModule, MatTooltipModule, SdTranslatePipe],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './code-editor.component.html',\n styleUrl: './code-editor.component.scss',\n encapsulation: ViewEncapsulation.None, // Bắt buộc để nhận màu Prism\n})\nexport class SdCodeEditor {\n #clipboard = inject(Clipboard);\n #sanitizer = inject(DomSanitizer);\n\n // ==========================================\n // 1. SIGNAL INPUTS & MODEL\n // ==========================================\n // Nhận bất kỳ kiểu dữ liệu nào (string, array, object)\n valueModel = model<any>(undefined, { alias: 'model' });\n\n language = input<CodeLanguage>('typescript');\n maxHeight = input<string>('500px');\n\n // Trạng thái Viewed (true = Read Only, false = Editable)\n viewed = input(false, { transform: booleanAttribute });\n\n // ==========================================\n // 2. INTERNAL STATE\n // ==========================================\n copied = signal<boolean>(false);\n\n // Chuỗi text nội bộ dùng để map với thẻ <textarea>\n textValue = signal<string>('');\n\n prismLang = computed(() => (this.language() === 'html' ? 'markup' : this.language()));\n\n // Cờ lưu vết để chống Loop (Vòng lặp vô tận khi bắn 2 chiều)\n private _lastEmittedValue: any = undefined;\n\n constructor() {\n // ==========================================\n // EFFECT 1: Dữ liệu từ CHA truyền vào (Model -> TextValue)\n // ==========================================\n effect(() => {\n const extVal = this.valueModel();\n const lang = this.language();\n\n untracked(() => {\n // Nếu giá trị này do chính component bắn ra, bỏ qua để tránh loop\n if (extVal === this._lastEmittedValue) return;\n\n if (typeof extVal === 'string') {\n this.textValue.set(extVal);\n } else if (extVal !== undefined && extVal !== null) {\n // Tự động format Object -> String nếu là JSON\n if (lang === 'json') {\n try {\n this.textValue.set(JSON.stringify(extVal, null, 2));\n } catch {\n this.textValue.set('// Lỗi: Object có tham chiếu vòng (Circular Reference)');\n }\n } else {\n this.textValue.set(String(extVal));\n }\n } else {\n this.textValue.set('');\n }\n });\n });\n }\n\n // ==========================================\n // EFFECT 2: PrismJS render (TextValue -> HTML MÀU)\n // ==========================================\n highlightedCode = computed<SafeHtml>(() => {\n // Dùng khoảng trắng để giữ độ cao cho thẻ pre nếu rỗng\n const rawCode = this.textValue() || ' ';\n const langKey = this.prismLang();\n const grammar = Prism.languages[langKey] || Prism.languages['markup'];\n\n // Cộng thêm \\n ở cuối để chống lỗi con trỏ textarea ăn lẹm dòng cuối\n const highlightedString = Prism.highlight(rawCode, grammar, langKey) + '\\n';\n return this.#sanitizer.bypassSecurityTrustHtml(highlightedString);\n });\n\n // ==========================================\n // EVENTS\n // ==========================================\n\n // Khi người dùng gõ vào Textarea (TextValue -> Model)\n onTextChange(newText: string) {\n this.textValue.set(newText);\n\n let valToEmit: any = newText;\n\n // Nếu ngôn ngữ là JSON, cố gắng trả về Object thật\n if (this.language() === 'json') {\n try {\n valToEmit = JSON.parse(newText);\n } catch {\n // Nếu gõ dở ngoặc/sai cú pháp -> Trả về chuỗi String tạm\n valToEmit = newText;\n }\n }\n\n // Ghi sổ và bắn ra ngoài\n this._lastEmittedValue = valToEmit;\n this.valueModel.set(valToEmit);\n }\n\n copyToClipboard() {\n const rawCode = this.textValue();\n if (!rawCode) return;\n\n if (this.#clipboard.copy(rawCode)) {\n this.copied.set(true);\n setTimeout(() => this.copied.set(false), 2000);\n }\n }\n}\n","<div class=\"sd-code-wrapper\" [class.is-editable]=\"!viewed()\">\n\n <div class=\"sd-code-header\">\n <div class=\"mac-dots\">\n <span class=\"dot red\"></span>\n <span class=\"dot yellow\"></span>\n <span class=\"dot green\"></span>\n </div>\n\n <div class=\"lang-badge\">\n {{ language().toUpperCase() }}\n <span style=\"opacity: 0.6; margin-left: 4px; font-weight: normal;\">\n {{ viewed() ? '(READ ONLY)' : '(EDITING)' }}\n </span>\n </div>\n\n <button class=\"copy-btn\" [matTooltip]=\"copied() ? ('core.component.code-editor.copied' | sdTranslate) : 'Copy code'\" (click)=\"copyToClipboard()\">\n <sd-icon [class.text-success]=\"copied()\" [name]=\"copied() ? 'check' : 'content_copy'\"></sd-icon>\n <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n </button>\n </div>\n\n <div class=\"sd-code-content\" [style.maxHeight]=\"maxHeight()\">\n <div class=\"editor-overlay-container\">\n\n @if (!viewed()) {\n <textarea\n class=\"code-textarea\"\n [value]=\"textValue()\"\n (input)=\"onTextChange($any($event.target).value)\"\n spellcheck=\"false\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\">\n </textarea>\n }\n\n <pre aria-hidden=\"true\" class=\"code-display\"><code [class]=\"'language-' + prismLang()\" [innerHTML]=\"highlightedCode()\"></code></pre>\n\n </div>\n </div>\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/sdcorejs-angular-components-data-state.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import { NgTemplateOutlet } from '@angular/common';
2
2
  import * as i0 from '@angular/core';
3
3
  import { inject, TemplateRef, Directive, input, booleanAttribute, output, contentChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
4
- import { TranslatePipe } from '@sdcorejs/angular/i18n';
4
+ import { SdTranslatePipe } from '@sdcorejs/angular/i18n';
5
5
  import { SdIcon } from '@sdcorejs/angular/modules/icon';
6
6
 
7
7
  class SdDataStateTemplateDirective {
@@ -53,11 +53,11 @@ class SdDataState {
53
53
  action: this.action,
54
54
  }));
55
55
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDataState, deps: [], target: i0.ɵɵFactoryTarget.Component });
56
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdDataState, isStandalone: true, selector: "sd-data-state", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, retryable: { classPropertyName: "retryable", publicName: "retryable", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdRetry: "sdRetry", sdAction: "sdAction" }, queries: [{ propertyName: "customTemplate", first: true, predicate: SdDataStateTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n @if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n } @else {\n <ng-content></ng-content>\n }\n} @else if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n <section\n class=\"sd-data-state\"\n [class.sd-data-state--compact]=\"compact()\"\n [class.sd-data-state--full-page]=\"fullPage()\"\n [attr.data-state]=\"currentState\"\n [attr.role]=\"role()\"\n [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n @if (effectiveIcon(); as currentIcon) {\n <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n }\n\n <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | translate) }}</div>\n <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | translate) }}</div>\n\n @if (retryable() || actionLabel()) {\n <div class=\"sd-data-state__actions\">\n @if (retryable()) {\n <button type=\"button\" data-state-retry (click)=\"retry()\">\n {{ retryLabel() || ('core.component.data-state.retry' | translate) }}\n </button>\n }\n @if (actionLabel(); as label) {\n <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n }\n </div>\n }\n </section>\n}\n", styles: [":host{display:contents}.sd-data-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:240px;padding:32px;text-align:center;color:var(--sd-text, #2f3136)}.sd-data-state--compact{min-height:120px;padding:16px}.sd-data-state--full-page{min-height:100dvh}.sd-data-state__icon{width:48px;height:48px;color:var(--sd-text-secondary, #667085)}[data-state=loading] .sd-data-state__icon{animation:sd-data-state-spin 1s linear infinite}[data-state=error] .sd-data-state__icon,[data-state=forbidden] .sd-data-state__icon{color:var(--sd-error, #d92d20)}.sd-data-state__title{font-size:18px;font-weight:600;line-height:24px}.sd-data-state__message{max-width:520px;color:var(--sd-text-secondary, #667085);font-size:14px;line-height:20px}.sd-data-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}.sd-data-state__actions button{min-height:36px;padding:8px 14px;border:1px solid var(--sd-border, #d0d5dd);border-radius:6px;background:#fff;color:var(--sd-text, #2f3136);font:inherit;cursor:pointer}.sd-data-state__actions button:focus-visible{outline:2px solid var(--sd-info, #1677ff);outline-offset:2px}@keyframes sd-data-state-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-state=loading] .sd-data-state__icon{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
56
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdDataState, isStandalone: true, selector: "sd-data-state", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, fontSet: { classPropertyName: "fontSet", publicName: "fontSet", isSignal: true, isRequired: false, transformFunction: null }, retryable: { classPropertyName: "retryable", publicName: "retryable", isSignal: true, isRequired: false, transformFunction: null }, retryLabel: { classPropertyName: "retryLabel", publicName: "retryLabel", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, fullPage: { classPropertyName: "fullPage", publicName: "fullPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdRetry: "sdRetry", sdAction: "sdAction" }, queries: [{ propertyName: "customTemplate", first: true, predicate: SdDataStateTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n @if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n } @else {\n <ng-content></ng-content>\n }\n} @else if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n <section\n class=\"sd-data-state\"\n [class.sd-data-state--compact]=\"compact()\"\n [class.sd-data-state--full-page]=\"fullPage()\"\n [attr.data-state]=\"currentState\"\n [attr.role]=\"role()\"\n [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n @if (effectiveIcon(); as currentIcon) {\n <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n }\n\n <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | sdTranslate) }}</div>\n <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | sdTranslate) }}</div>\n\n @if (retryable() || actionLabel()) {\n <div class=\"sd-data-state__actions\">\n @if (retryable()) {\n <button type=\"button\" data-state-retry (click)=\"retry()\">\n {{ retryLabel() || ('core.component.data-state.retry' | sdTranslate) }}\n </button>\n }\n @if (actionLabel(); as label) {\n <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n }\n </div>\n }\n </section>\n}\n", styles: [":host{display:contents}.sd-data-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:240px;padding:32px;text-align:center;color:var(--sd-text, #2f3136)}.sd-data-state--compact{min-height:120px;padding:16px}.sd-data-state--full-page{min-height:100dvh}.sd-data-state__icon{width:48px;height:48px;color:var(--sd-text-secondary, #667085)}[data-state=loading] .sd-data-state__icon{animation:sd-data-state-spin 1s linear infinite}[data-state=error] .sd-data-state__icon,[data-state=forbidden] .sd-data-state__icon{color:var(--sd-error, #d92d20)}.sd-data-state__title{font-size:18px;font-weight:600;line-height:24px}.sd-data-state__message{max-width:520px;color:var(--sd-text-secondary, #667085);font-size:14px;line-height:20px}.sd-data-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}.sd-data-state__actions button{min-height:36px;padding:8px 14px;border:1px solid var(--sd-border, #d0d5dd);border-radius:6px;background:#fff;color:var(--sd-text, #2f3136);font:inherit;cursor:pointer}.sd-data-state__actions button:focus-visible{outline:2px solid var(--sd-info, #1677ff);outline-offset:2px}@keyframes sd-data-state-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-state=loading] .sd-data-state__icon{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SdTranslatePipe, name: "sdTranslate" }, { kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
57
57
  }
58
58
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdDataState, decorators: [{
59
59
  type: Component,
60
- args: [{ selector: 'sd-data-state', standalone: true, imports: [NgTemplateOutlet, TranslatePipe, SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n @if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n } @else {\n <ng-content></ng-content>\n }\n} @else if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n <section\n class=\"sd-data-state\"\n [class.sd-data-state--compact]=\"compact()\"\n [class.sd-data-state--full-page]=\"fullPage()\"\n [attr.data-state]=\"currentState\"\n [attr.role]=\"role()\"\n [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n @if (effectiveIcon(); as currentIcon) {\n <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n }\n\n <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | translate) }}</div>\n <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | translate) }}</div>\n\n @if (retryable() || actionLabel()) {\n <div class=\"sd-data-state__actions\">\n @if (retryable()) {\n <button type=\"button\" data-state-retry (click)=\"retry()\">\n {{ retryLabel() || ('core.component.data-state.retry' | translate) }}\n </button>\n }\n @if (actionLabel(); as label) {\n <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n }\n </div>\n }\n </section>\n}\n", styles: [":host{display:contents}.sd-data-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:240px;padding:32px;text-align:center;color:var(--sd-text, #2f3136)}.sd-data-state--compact{min-height:120px;padding:16px}.sd-data-state--full-page{min-height:100dvh}.sd-data-state__icon{width:48px;height:48px;color:var(--sd-text-secondary, #667085)}[data-state=loading] .sd-data-state__icon{animation:sd-data-state-spin 1s linear infinite}[data-state=error] .sd-data-state__icon,[data-state=forbidden] .sd-data-state__icon{color:var(--sd-error, #d92d20)}.sd-data-state__title{font-size:18px;font-weight:600;line-height:24px}.sd-data-state__message{max-width:520px;color:var(--sd-text-secondary, #667085);font-size:14px;line-height:20px}.sd-data-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}.sd-data-state__actions button{min-height:36px;padding:8px 14px;border:1px solid var(--sd-border, #d0d5dd);border-radius:6px;background:#fff;color:var(--sd-text, #2f3136);font:inherit;cursor:pointer}.sd-data-state__actions button:focus-visible{outline:2px solid var(--sd-info, #1677ff);outline-offset:2px}@keyframes sd-data-state-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-state=loading] .sd-data-state__icon{animation:none}}\n"] }]
60
+ args: [{ selector: 'sd-data-state', standalone: true, imports: [NgTemplateOutlet, SdTranslatePipe, SdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n @if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n } @else {\n <ng-content></ng-content>\n }\n} @else if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n <section\n class=\"sd-data-state\"\n [class.sd-data-state--compact]=\"compact()\"\n [class.sd-data-state--full-page]=\"fullPage()\"\n [attr.data-state]=\"currentState\"\n [attr.role]=\"role()\"\n [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n @if (effectiveIcon(); as currentIcon) {\n <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n }\n\n <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | sdTranslate) }}</div>\n <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | sdTranslate) }}</div>\n\n @if (retryable() || actionLabel()) {\n <div class=\"sd-data-state__actions\">\n @if (retryable()) {\n <button type=\"button\" data-state-retry (click)=\"retry()\">\n {{ retryLabel() || ('core.component.data-state.retry' | sdTranslate) }}\n </button>\n }\n @if (actionLabel(); as label) {\n <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n }\n </div>\n }\n </section>\n}\n", styles: [":host{display:contents}.sd-data-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:240px;padding:32px;text-align:center;color:var(--sd-text, #2f3136)}.sd-data-state--compact{min-height:120px;padding:16px}.sd-data-state--full-page{min-height:100dvh}.sd-data-state__icon{width:48px;height:48px;color:var(--sd-text-secondary, #667085)}[data-state=loading] .sd-data-state__icon{animation:sd-data-state-spin 1s linear infinite}[data-state=error] .sd-data-state__icon,[data-state=forbidden] .sd-data-state__icon{color:var(--sd-error, #d92d20)}.sd-data-state__title{font-size:18px;font-weight:600;line-height:24px}.sd-data-state__message{max-width:520px;color:var(--sd-text-secondary, #667085);font-size:14px;line-height:20px}.sd-data-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}.sd-data-state__actions button{min-height:36px;padding:8px 14px;border:1px solid var(--sd-border, #d0d5dd);border-radius:6px;background:#fff;color:var(--sd-text, #2f3136);font:inherit;cursor:pointer}.sd-data-state__actions button:focus-visible{outline:2px solid var(--sd-info, #1677ff);outline-offset:2px}@keyframes sd-data-state-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){[data-state=loading] .sd-data-state__icon{animation:none}}\n"] }]
61
61
  }] });
62
62
 
63
63
  /**
package/fesm2022/sdcorejs-angular-components-data-state.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sdcorejs-angular-components-data-state.mjs","sources":["../../../projects/sdcorejs-angular/components/data-state/src/data-state.component.ts","../../../projects/sdcorejs-angular/components/data-state/src/data-state.component.html","../../../projects/sdcorejs-angular/components/data-state/sdcorejs-angular-components-data-state.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n Directive,\n TemplateRef,\n booleanAttribute,\n computed,\n contentChild,\n inject,\n input,\n output,\n} from '@angular/core';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdIcon, SdIconSet } from '@sdcorejs/angular/modules/icon';\n\nexport type SdDataStateKind = 'loading' | 'empty' | 'error' | 'forbidden' | 'success';\n\nexport interface SdDataStateTemplateContext {\n readonly $implicit: SdDataStateKind;\n readonly state: SdDataStateKind;\n readonly retry: () => void;\n readonly action: () => void;\n}\n\n@Directive({\n selector: 'ng-template[sdDataStateTemplate]',\n standalone: true,\n})\nexport class SdDataStateTemplateDirective {\n readonly template = inject<TemplateRef<SdDataStateTemplateContext>>(TemplateRef);\n\n static ngTemplateContextGuard(_directive: SdDataStateTemplateDirective, _context: unknown): _context is SdDataStateTemplateContext {\n return true;\n }\n}\n\nconst DEFAULT_ICON: Readonly<Record<SdDataStateKind, string | null>> = {\n loading: 'progress_activity',\n empty: 'inbox',\n error: 'error_outline',\n forbidden: 'lock',\n success: null,\n};\n\n@Component({\n selector: 'sd-data-state',\n standalone: true,\n imports: [NgTemplateOutlet, TranslatePipe, SdIcon],\n templateUrl: './data-state.component.html',\n styleUrl: './data-state.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdDataState {\n readonly state = input<SdDataStateKind>('success');\n readonly title = input<string | null | undefined>();\n readonly message = input<string | null | undefined>();\n readonly icon = input<string | null | undefined>();\n readonly fontSet = input<SdIconSet | undefined>();\n readonly retryable = input(false, { transform: booleanAttribute });\n readonly retryLabel = input<string | null | undefined>();\n readonly actionLabel = input<string | null | undefined>();\n readonly compact = input(false, { transform: booleanAttribute });\n readonly fullPage = input(false, { transform: booleanAttribute });\n readonly sdRetry = output<void>();\n readonly sdAction = output<void>();\n\n protected readonly customTemplate = contentChild(SdDataStateTemplateDirective);\n protected readonly effectiveIcon = computed(() => this.icon() ?? DEFAULT_ICON[this.state()]);\n protected readonly titleKey = computed(() => `core.component.data-state.${this.state()}.title`);\n protected readonly messageKey = computed(() => `core.component.data-state.${this.state()}.message`);\n protected readonly role = computed<'alert' | 'status'>(() =>\n this.state() === 'error' || this.state() === 'forbidden' ? 'alert' : 'status'\n );\n\n protected readonly retry = (): void => this.sdRetry.emit();\n protected readonly action = (): void => this.sdAction.emit();\n protected readonly templateContext = computed<SdDataStateTemplateContext>(() => ({\n $implicit: this.state(),\n state: this.state(),\n retry: this.retry,\n action: this.action,\n }));\n}\n","@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n @if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n } @else {\n <ng-content></ng-content>\n }\n} @else if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n <section\n class=\"sd-data-state\"\n [class.sd-data-state--compact]=\"compact()\"\n [class.sd-data-state--full-page]=\"fullPage()\"\n [attr.data-state]=\"currentState\"\n [attr.role]=\"role()\"\n [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n @if (effectiveIcon(); as currentIcon) {\n <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n }\n\n <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | translate) }}</div>\n <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | translate) }}</div>\n\n @if (retryable() || actionLabel()) {\n <div class=\"sd-data-state__actions\">\n @if (retryable()) {\n <button type=\"button\" data-state-retry (click)=\"retry()\">\n {{ retryLabel() || ('core.component.data-state.retry' | translate) }}\n </button>\n }\n @if (actionLabel(); as label) {\n <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n }\n </div>\n }\n </section>\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":"sdcorejs-angular-components-data-state.mjs","sources":["../../../projects/sdcorejs-angular/components/data-state/src/data-state.component.ts","../../../projects/sdcorejs-angular/components/data-state/src/data-state.component.html","../../../projects/sdcorejs-angular/components/data-state/sdcorejs-angular-components-data-state.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n Directive,\n TemplateRef,\n booleanAttribute,\n computed,\n contentChild,\n inject,\n input,\n output,\n} from '@angular/core';\nimport { SdTranslatePipe } from '@sdcorejs/angular/i18n';\nimport { SdIcon, SdIconSet } from '@sdcorejs/angular/modules/icon';\n\nexport type SdDataStateKind = 'loading' | 'empty' | 'error' | 'forbidden' | 'success';\n\nexport interface SdDataStateTemplateContext {\n readonly $implicit: SdDataStateKind;\n readonly state: SdDataStateKind;\n readonly retry: () => void;\n readonly action: () => void;\n}\n\n@Directive({\n selector: 'ng-template[sdDataStateTemplate]',\n standalone: true,\n})\nexport class SdDataStateTemplateDirective {\n readonly template = inject<TemplateRef<SdDataStateTemplateContext>>(TemplateRef);\n\n static ngTemplateContextGuard(_directive: SdDataStateTemplateDirective, _context: unknown): _context is SdDataStateTemplateContext {\n return true;\n }\n}\n\nconst DEFAULT_ICON: Readonly<Record<SdDataStateKind, string | null>> = {\n loading: 'progress_activity',\n empty: 'inbox',\n error: 'error_outline',\n forbidden: 'lock',\n success: null,\n};\n\n@Component({\n selector: 'sd-data-state',\n standalone: true,\n imports: [NgTemplateOutlet, SdTranslatePipe, SdIcon],\n templateUrl: './data-state.component.html',\n styleUrl: './data-state.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdDataState {\n readonly state = input<SdDataStateKind>('success');\n readonly title = input<string | null | undefined>();\n readonly message = input<string | null | undefined>();\n readonly icon = input<string | null | undefined>();\n readonly fontSet = input<SdIconSet | undefined>();\n readonly retryable = input(false, { transform: booleanAttribute });\n readonly retryLabel = input<string | null | undefined>();\n readonly actionLabel = input<string | null | undefined>();\n readonly compact = input(false, { transform: booleanAttribute });\n readonly fullPage = input(false, { transform: booleanAttribute });\n readonly sdRetry = output<void>();\n readonly sdAction = output<void>();\n\n protected readonly customTemplate = contentChild(SdDataStateTemplateDirective);\n protected readonly effectiveIcon = computed(() => this.icon() ?? DEFAULT_ICON[this.state()]);\n protected readonly titleKey = computed(() => `core.component.data-state.${this.state()}.title`);\n protected readonly messageKey = computed(() => `core.component.data-state.${this.state()}.message`);\n protected readonly role = computed<'alert' | 'status'>(() =>\n this.state() === 'error' || this.state() === 'forbidden' ? 'alert' : 'status'\n );\n\n protected readonly retry = (): void => this.sdRetry.emit();\n protected readonly action = (): void => this.sdAction.emit();\n protected readonly templateContext = computed<SdDataStateTemplateContext>(() => ({\n $implicit: this.state(),\n state: this.state(),\n retry: this.retry,\n action: this.action,\n }));\n}\n","@let currentState = state();\n@let template = customTemplate();\n\n@if (currentState === 'success') {\n @if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n } @else {\n <ng-content></ng-content>\n }\n} @else if (template) {\n <ng-container [ngTemplateOutlet]=\"template.template\" [ngTemplateOutletContext]=\"templateContext()\"></ng-container>\n} @else {\n <section\n class=\"sd-data-state\"\n [class.sd-data-state--compact]=\"compact()\"\n [class.sd-data-state--full-page]=\"fullPage()\"\n [attr.data-state]=\"currentState\"\n [attr.role]=\"role()\"\n [attr.aria-busy]=\"currentState === 'loading' ? 'true' : null\"\n [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\">\n @if (effectiveIcon(); as currentIcon) {\n <sd-icon class=\"sd-data-state__icon\" aria-hidden=\"true\" [name]=\"currentIcon\" [fontSet]=\"fontSet()\"></sd-icon>\n }\n\n <div class=\"sd-data-state__title\">{{ title() ?? (titleKey() | sdTranslate) }}</div>\n <div class=\"sd-data-state__message\">{{ message() ?? (messageKey() | sdTranslate) }}</div>\n\n @if (retryable() || actionLabel()) {\n <div class=\"sd-data-state__actions\">\n @if (retryable()) {\n <button type=\"button\" data-state-retry (click)=\"retry()\">\n {{ retryLabel() || ('core.component.data-state.retry' | sdTranslate) }}\n </button>\n }\n @if (actionLabel(); as label) {\n <button type=\"button\" data-state-action (click)=\"action()\">{{ label }}</button>\n }\n </div>\n }\n </section>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/sdcorejs-angular-components-editor.mjs CHANGED
@@ -1070,11 +1070,11 @@ class SdEditor {
1070
1070
  return this.option()?.imageConfig?.uploadFn ?? this.#getSelectedConfig()?.upload;
1071
1071
  };
1072
1072
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
1073
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdEditor, isStandalone: true, selector: "sd-editor", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdBlur: "sdBlur", sdFocus: "sdFocus" }, ngImport: i0, template: "<sd-ckeditor-styles />\n@let _label = label();\n@let _helperText = helperText();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage;\n@let _required = required();\n@let _maxLength = maxlength();\n@let _showCounter = !!_maxLength && !formControl.disabled && !_hideInlineError;\n\n@if (_label) {\n <sd-label [label]=\"_label\" [required]=\"_required\" [helperText]=\"_helperText\"></sd-label>\n}\n\n<div\n class=\"sd-editor\"\n [class.sd-editor--readonly]=\"readonly()\"\n [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\n [class.has-counter]=\"_showCounter\"\n [style.--sd-editor-content-min-height]=\"height()\"\n [style.--sd-editor-content-max-height]=\"maxHeight()\"\n [attr.data-autoId]=\"autoId()\"\n [attr.data-disabled]=\"dataDisabled()\"\n [attr.data-empty]=\"dataEmpty()\">\n <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\n\n @if (_showCounter) {\n <div class=\"sd-editor-counter-row\">\n <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ _maxLength }} </span>\n </div>\n }\n\n @if (_hideInlineError && _errorMessage && formControl.touched) {\n <sd-icon class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n }\n</div>\n\n<div class=\"sd-editor-footer\">\n @if (!_hideInlineError && _errorMessage && formControl.touched) {\n <mat-error>{{ _errorMessage }}</mat-error>\n }\n</div>\n", styles: [".sd-editor{display:flex;flex-direction:column;width:100%;position:relative}.sd-editor-counter-row{display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;border:1px solid var(--ck-color-base-border);border-top:none}.sd-editor-footer{min-height:20px;margin-top:4px}.sd-editor-footer mat-error{font-size:12px;color:var(--mdc-theme-error, #f44336)}.sd-error-icon{position:absolute;right:8px;bottom:8px;z-index:2;color:var(--mdc-theme-error, #f44336);height:20px;width:20px;font-size:20px;cursor:default}.sd-editor--readonly :host ::ng-deep .ck-editor__editable{background:#0000000a;cursor:default}.sd-editor-counter{font-size:12px;color:#0009}.sd-editor-counter--over{color:var(--mdc-theme-error, #f44336)}::ng-deep .ck-powered-by,::ng-deep .ck-powered-by-balloon{display:none!important}:host ::ng-deep ckeditor,:host ::ng-deep .ck-editor{display:flex;flex-direction:column}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__main{overflow:visible}:host ::ng-deep .ck-editor__editable{min-height:var(--sd-editor-content-min-height, 200px)!important;max-height:var(--sd-editor-content-max-height, none)!important;padding:24px!important;overflow-y:auto!important;border:1px solid var(--ck-color-base-border)!important}:host ::ng-deep .ck-editor__editable.ck-focused{box-shadow:none!important}:host ::ng-deep .sd-editor.has-counter .ck-editor__editable{border-bottom:none!important}:host ::ng-deep .sd-editor--error .ck-editor__editable,:host ::ng-deep .sd-editor--error .ck-toolbar{border-color:var(--mdc-theme-error, #f44336)!important}:host ::ng-deep .sd-editor--error.has-counter .sd-editor-counter-row{border-color:var(--mdc-theme-error, #f44336)}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{margin-left:0!important;padding-left:20px!important}\n", ":host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content figure.image{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:visible}:host ::ng-deep .ck-content figure.image:hover{z-index:99999!important}:host ::ng-deep .ck-content figure.image.image-style-align-left{float:left;margin:0 1em 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-left[style*=\"width:100\"]{float:none;margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-right{float:right;margin:0 0 0 1em}:host ::ng-deep .ck-content figure.image.image-style-align-right[style*=\"width:100\"]{float:none;margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image.image-style-block-align-left{margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-block-align-right{margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image .ck-progress-bar{position:absolute;bottom:0;left:0;width:30%!important;height:3px;background:var(--sd-primary, #005cbb);border-radius:2px;z-index:10;pointer-events:none;animation:sd-progress-indeterminate 1.4s ease-in-out infinite}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar){overflow:hidden}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar) img{filter:blur(1px) brightness(.85);transition:filter .3s ease}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):after{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;background:#ffffff40;border-radius:inherit}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):before{content:\"\";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.5);border-top-color:var(--sd-primary, #005cbb);border-radius:50%;animation:sd-spinner .75s linear infinite;z-index:11;pointer-events:none}@keyframes sd-spinner{to{transform:rotate(360deg)}}@keyframes sd-progress-indeterminate{0%{left:-30%}to{left:100%}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdCKEditorStyles, selector: "sd-ckeditor-styles" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1073
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdEditor, isStandalone: true, selector: "sd-editor", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdBlur: "sdBlur", sdFocus: "sdFocus" }, ngImport: i0, template: "<sd-ckeditor-styles />\r\n@let _label = label();\r\n@let _helperText = helperText();\r\n@let _hideInlineError = hideInlineError();\r\n@let _errorMessage = errorMessage;\r\n@let _required = required();\r\n@let _maxLength = maxlength();\r\n@let _showCounter = !!_maxLength && !formControl.disabled && !_hideInlineError;\r\n\r\n@if (_label) {\r\n <sd-label [label]=\"_label\" [required]=\"_required\" [helperText]=\"_helperText\"></sd-label>\r\n}\r\n\r\n<div\r\n class=\"sd-editor\"\r\n [class.sd-editor--readonly]=\"readonly()\"\r\n [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\r\n [class.has-counter]=\"_showCounter\"\r\n [style.--sd-editor-content-min-height]=\"height()\"\r\n [style.--sd-editor-content-max-height]=\"maxHeight()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n [attr.data-disabled]=\"dataDisabled()\"\r\n [attr.data-empty]=\"dataEmpty()\">\r\n <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\r\n\r\n @if (_showCounter) {\r\n <div class=\"sd-editor-counter-row\">\r\n <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ _maxLength }} </span>\r\n </div>\r\n }\r\n\r\n @if (_hideInlineError && _errorMessage && formControl.touched) {\r\n <sd-icon class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n }\r\n @if (_hideInlineError && _errorMessage && formControl.touched) {\r\n <span class=\"sd-visually-hidden\">{{ _errorMessage }}</span>\r\r\n }\r\n</div>\r\n\r\n<div class=\"sd-editor-footer\">\r\n @if (!_hideInlineError && _errorMessage && formControl.touched) {\r\n <mat-error>{{ _errorMessage }}</mat-error>\r\n }\r\n</div>\r\n", styles: [".sd-editor{display:flex;flex-direction:column;width:100%;position:relative}.sd-editor-counter-row{display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;border:1px solid var(--ck-color-base-border);border-top:none}.sd-editor-footer{min-height:20px;margin-top:4px}.sd-editor-footer mat-error{font-size:12px;color:var(--mdc-theme-error, #f44336)}.sd-error-icon{position:absolute;right:8px;bottom:8px;z-index:2;color:var(--mdc-theme-error, #f44336);height:20px;width:20px;font-size:20px;cursor:default}.sd-editor--readonly :host ::ng-deep .ck-editor__editable{background:#0000000a;cursor:default}.sd-editor-counter{font-size:12px;color:#0009}.sd-editor-counter--over{color:var(--mdc-theme-error, #f44336)}::ng-deep .ck-powered-by,::ng-deep .ck-powered-by-balloon{display:none!important}:host ::ng-deep ckeditor,:host ::ng-deep .ck-editor{display:flex;flex-direction:column}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__main{overflow:visible}:host ::ng-deep .ck-editor__editable{min-height:var(--sd-editor-content-min-height, 200px)!important;max-height:var(--sd-editor-content-max-height, none)!important;padding:24px!important;overflow-y:auto!important;border:1px solid var(--ck-color-base-border)!important}:host ::ng-deep .ck-editor__editable.ck-focused{box-shadow:none!important}:host ::ng-deep .sd-editor.has-counter .ck-editor__editable{border-bottom:none!important}:host ::ng-deep .sd-editor--error .ck-editor__editable,:host ::ng-deep .sd-editor--error .ck-toolbar{border-color:var(--mdc-theme-error, #f44336)!important}:host ::ng-deep .sd-editor--error.has-counter .sd-editor-counter-row{border-color:var(--mdc-theme-error, #f44336)}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{margin-left:0!important;padding-left:20px!important}\n", ":host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content figure.image{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:visible}:host ::ng-deep .ck-content figure.image:hover{z-index:99999!important}:host ::ng-deep .ck-content figure.image.image-style-align-left{float:left;margin:0 1em 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-left[style*=\"width:100\"]{float:none;margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-right{float:right;margin:0 0 0 1em}:host ::ng-deep .ck-content figure.image.image-style-align-right[style*=\"width:100\"]{float:none;margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image.image-style-block-align-left{margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-block-align-right{margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image .ck-progress-bar{position:absolute;bottom:0;left:0;width:30%!important;height:3px;background:var(--sd-primary, #005cbb);border-radius:2px;z-index:10;pointer-events:none;animation:sd-progress-indeterminate 1.4s ease-in-out infinite}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar){overflow:hidden}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar) img{filter:blur(1px) brightness(.85);transition:filter .3s ease}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):after{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;background:#ffffff40;border-radius:inherit}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):before{content:\"\";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.5);border-top-color:var(--sd-primary, #005cbb);border-radius:50%;animation:sd-spinner .75s linear infinite;z-index:11;pointer-events:none}@keyframes sd-spinner{to{transform:rotate(360deg)}}@keyframes sd-progress-indeterminate{0%{left:-30%}to{left:100%}}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableWatchdog", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdCKEditorStyles, selector: "sd-ckeditor-styles" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1074
1074
  }
1075
1075
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdEditor, decorators: [{
1076
1076
  type: Component,
1077
- args: [{ selector: 'sd-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdIcon, CKEditorModule, SdLabel, SdCKEditorStyles, MatFormFieldModule, MatTooltipModule], template: "<sd-ckeditor-styles />\n@let _label = label();\n@let _helperText = helperText();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage;\n@let _required = required();\n@let _maxLength = maxlength();\n@let _showCounter = !!_maxLength && !formControl.disabled && !_hideInlineError;\n\n@if (_label) {\n <sd-label [label]=\"_label\" [required]=\"_required\" [helperText]=\"_helperText\"></sd-label>\n}\n\n<div\n class=\"sd-editor\"\n [class.sd-editor--readonly]=\"readonly()\"\n [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\n [class.has-counter]=\"_showCounter\"\n [style.--sd-editor-content-min-height]=\"height()\"\n [style.--sd-editor-content-max-height]=\"maxHeight()\"\n [attr.data-autoId]=\"autoId()\"\n [attr.data-disabled]=\"dataDisabled()\"\n [attr.data-empty]=\"dataEmpty()\">\n <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\n\n @if (_showCounter) {\n <div class=\"sd-editor-counter-row\">\n <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ _maxLength }} </span>\n </div>\n }\n\n @if (_hideInlineError && _errorMessage && formControl.touched) {\n <sd-icon class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n }\n</div>\n\n<div class=\"sd-editor-footer\">\n @if (!_hideInlineError && _errorMessage && formControl.touched) {\n <mat-error>{{ _errorMessage }}</mat-error>\n }\n</div>\n", styles: [".sd-editor{display:flex;flex-direction:column;width:100%;position:relative}.sd-editor-counter-row{display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;border:1px solid var(--ck-color-base-border);border-top:none}.sd-editor-footer{min-height:20px;margin-top:4px}.sd-editor-footer mat-error{font-size:12px;color:var(--mdc-theme-error, #f44336)}.sd-error-icon{position:absolute;right:8px;bottom:8px;z-index:2;color:var(--mdc-theme-error, #f44336);height:20px;width:20px;font-size:20px;cursor:default}.sd-editor--readonly :host ::ng-deep .ck-editor__editable{background:#0000000a;cursor:default}.sd-editor-counter{font-size:12px;color:#0009}.sd-editor-counter--over{color:var(--mdc-theme-error, #f44336)}::ng-deep .ck-powered-by,::ng-deep .ck-powered-by-balloon{display:none!important}:host ::ng-deep ckeditor,:host ::ng-deep .ck-editor{display:flex;flex-direction:column}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__main{overflow:visible}:host ::ng-deep .ck-editor__editable{min-height:var(--sd-editor-content-min-height, 200px)!important;max-height:var(--sd-editor-content-max-height, none)!important;padding:24px!important;overflow-y:auto!important;border:1px solid var(--ck-color-base-border)!important}:host ::ng-deep .ck-editor__editable.ck-focused{box-shadow:none!important}:host ::ng-deep .sd-editor.has-counter .ck-editor__editable{border-bottom:none!important}:host ::ng-deep .sd-editor--error .ck-editor__editable,:host ::ng-deep .sd-editor--error .ck-toolbar{border-color:var(--mdc-theme-error, #f44336)!important}:host ::ng-deep .sd-editor--error.has-counter .sd-editor-counter-row{border-color:var(--mdc-theme-error, #f44336)}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{margin-left:0!important;padding-left:20px!important}\n", ":host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content figure.image{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:visible}:host ::ng-deep .ck-content figure.image:hover{z-index:99999!important}:host ::ng-deep .ck-content figure.image.image-style-align-left{float:left;margin:0 1em 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-left[style*=\"width:100\"]{float:none;margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-right{float:right;margin:0 0 0 1em}:host ::ng-deep .ck-content figure.image.image-style-align-right[style*=\"width:100\"]{float:none;margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image.image-style-block-align-left{margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-block-align-right{margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image .ck-progress-bar{position:absolute;bottom:0;left:0;width:30%!important;height:3px;background:var(--sd-primary, #005cbb);border-radius:2px;z-index:10;pointer-events:none;animation:sd-progress-indeterminate 1.4s ease-in-out infinite}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar){overflow:hidden}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar) img{filter:blur(1px) brightness(.85);transition:filter .3s ease}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):after{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;background:#ffffff40;border-radius:inherit}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):before{content:\"\";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.5);border-top-color:var(--sd-primary, #005cbb);border-radius:50%;animation:sd-spinner .75s linear infinite;z-index:11;pointer-events:none}@keyframes sd-spinner{to{transform:rotate(360deg)}}@keyframes sd-progress-indeterminate{0%{left:-30%}to{left:100%}}\n"] }]
1077
+ args: [{ selector: 'sd-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SdIcon, CKEditorModule, SdLabel, SdCKEditorStyles, MatFormFieldModule, MatTooltipModule], template: "<sd-ckeditor-styles />\r\n@let _label = label();\r\n@let _helperText = helperText();\r\n@let _hideInlineError = hideInlineError();\r\n@let _errorMessage = errorMessage;\r\n@let _required = required();\r\n@let _maxLength = maxlength();\r\n@let _showCounter = !!_maxLength && !formControl.disabled && !_hideInlineError;\r\n\r\n@if (_label) {\r\n <sd-label [label]=\"_label\" [required]=\"_required\" [helperText]=\"_helperText\"></sd-label>\r\n}\r\n\r\n<div\r\n class=\"sd-editor\"\r\n [class.sd-editor--readonly]=\"readonly()\"\r\n [class.sd-editor--error]=\"formControl.invalid && formControl.touched\"\r\n [class.has-counter]=\"_showCounter\"\r\n [style.--sd-editor-content-min-height]=\"height()\"\r\n [style.--sd-editor-content-max-height]=\"maxHeight()\"\r\n [attr.data-autoId]=\"autoId()\"\r\n [attr.data-disabled]=\"dataDisabled()\"\r\n [attr.data-empty]=\"dataEmpty()\">\r\n <ckeditor [editor]=\"Editor\" [config]=\"editorConfig()\" [disabled]=\"formControl.disabled\" (ready)=\"onReady($event)\"></ckeditor>\r\n\r\n @if (_showCounter) {\r\n <div class=\"sd-editor-counter-row\">\r\n <span class=\"sd-editor-counter\" [class.sd-editor-counter--over]=\"isOverLimit()\"> {{ _textLength() }}/{{ _maxLength }} </span>\r\n </div>\r\n }\r\n\r\n @if (_hideInlineError && _errorMessage && formControl.touched) {\r\n <sd-icon class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n }\r\n @if (_hideInlineError && _errorMessage && formControl.touched) {\r\n <span class=\"sd-visually-hidden\">{{ _errorMessage }}</span>\r\r\n }\r\n</div>\r\n\r\n<div class=\"sd-editor-footer\">\r\n @if (!_hideInlineError && _errorMessage && formControl.touched) {\r\n <mat-error>{{ _errorMessage }}</mat-error>\r\n }\r\n</div>\r\n", styles: [".sd-editor{display:flex;flex-direction:column;width:100%;position:relative}.sd-editor-counter-row{display:flex;justify-content:flex-end;align-items:center;padding:4px 12px;border:1px solid var(--ck-color-base-border);border-top:none}.sd-editor-footer{min-height:20px;margin-top:4px}.sd-editor-footer mat-error{font-size:12px;color:var(--mdc-theme-error, #f44336)}.sd-error-icon{position:absolute;right:8px;bottom:8px;z-index:2;color:var(--mdc-theme-error, #f44336);height:20px;width:20px;font-size:20px;cursor:default}.sd-editor--readonly :host ::ng-deep .ck-editor__editable{background:#0000000a;cursor:default}.sd-editor-counter{font-size:12px;color:#0009}.sd-editor-counter--over{color:var(--mdc-theme-error, #f44336)}::ng-deep .ck-powered-by,::ng-deep .ck-powered-by-balloon{display:none!important}:host ::ng-deep ckeditor,:host ::ng-deep .ck-editor{display:flex;flex-direction:column}:host ::ng-deep .ck-editor{--ck-content-font-size: 14px;--ck-content-line-height: 1.5}:host ::ng-deep .ck-editor__main{overflow:visible}:host ::ng-deep .ck-editor__editable{min-height:var(--sd-editor-content-min-height, 200px)!important;max-height:var(--sd-editor-content-max-height, none)!important;padding:24px!important;overflow-y:auto!important;border:1px solid var(--ck-color-base-border)!important}:host ::ng-deep .ck-editor__editable.ck-focused{box-shadow:none!important}:host ::ng-deep .sd-editor.has-counter .ck-editor__editable{border-bottom:none!important}:host ::ng-deep .sd-editor--error .ck-editor__editable,:host ::ng-deep .sd-editor--error .ck-toolbar{border-color:var(--mdc-theme-error, #f44336)!important}:host ::ng-deep .sd-editor--error.has-counter .sd-editor-counter-row{border-color:var(--mdc-theme-error, #f44336)}:host ::ng-deep .ck-content p{margin-bottom:var(--ck-spacing-large);text-indent:0}:host ::ng-deep .ck-content ul,:host ::ng-deep .ck-content ol{margin-left:0!important;padding-left:20px!important}\n", ":host ::ng-deep .ck-content img{max-width:100%!important;height:auto!important;object-fit:contain}:host ::ng-deep .ck-content figure.image{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;overflow:visible}:host ::ng-deep .ck-content figure.image:hover{z-index:99999!important}:host ::ng-deep .ck-content figure.image.image-style-align-left{float:left;margin:0 1em 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-left[style*=\"width:100\"]{float:none;margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-align-right{float:right;margin:0 0 0 1em}:host ::ng-deep .ck-content figure.image.image-style-align-right[style*=\"width:100\"]{float:none;margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image.image-style-block-align-left{margin:0 auto 0 0}:host ::ng-deep .ck-content figure.image.image-style-block-align-right{margin:0 0 0 auto}:host ::ng-deep .ck-content figure.image .ck-progress-bar{position:absolute;bottom:0;left:0;width:30%!important;height:3px;background:var(--sd-primary, #005cbb);border-radius:2px;z-index:10;pointer-events:none;animation:sd-progress-indeterminate 1.4s ease-in-out infinite}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar){overflow:hidden}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar) img{filter:blur(1px) brightness(.85);transition:filter .3s ease}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):after{content:\"\";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;background:#ffffff40;border-radius:inherit}:host ::ng-deep .ck-content figure.image:has(.ck-progress-bar):before{content:\"\";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.5);border-top-color:var(--sd-primary, #005cbb);border-radius:50%;animation:sd-spinner .75s linear infinite;z-index:11;pointer-events:none}@keyframes sd-spinner{to{transform:rotate(360deg)}}@keyframes sd-progress-indeterminate{0%{left:-30%}to{left:100%}}\n"] }]
1078
1078
  }], ctorParameters: () => [] });
1079
1079
 
1080
1080
  /**