@simplysm/angular 14.1.2 → 14.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/dist/controls/button/sd-additional-button.js +3 -2
  2. package/dist/controls/button/sd-anchor.js +3 -2
  3. package/dist/controls/button/sd-button.js +11 -6
  4. package/dist/controls/button/sd-modal-select-button.js +15 -8
  5. package/dist/controls/checkbox/sd-checkbox-group-item.js +7 -4
  6. package/dist/controls/checkbox/sd-checkbox-group.js +3 -2
  7. package/dist/controls/checkbox/sd-checkbox.js +13 -7
  8. package/dist/controls/checkbox/sd-switch.js +9 -5
  9. package/dist/controls/collapse/sd-collapse-icon.js +7 -4
  10. package/dist/controls/collapse/sd-collapse.js +9 -5
  11. package/dist/controls/dropdown/sd-dropdown-popup.js +1 -1
  12. package/dist/controls/dropdown/sd-dropdown.js +5 -3
  13. package/dist/controls/form/sd-form.js +1 -1
  14. package/dist/controls/gap/sd-gap.js +13 -7
  15. package/dist/controls/input/sd-date-range-picker.js +7 -4
  16. package/dist/controls/input/sd-numpad.js +7 -4
  17. package/dist/controls/input/sd-range.js +9 -5
  18. package/dist/controls/input/sd-textarea.js +21 -11
  19. package/dist/controls/input/sd-textfield-type-handlers.d.ts.map +1 -1
  20. package/dist/controls/input/sd-textfield-type-handlers.js +5 -8
  21. package/dist/controls/input/sd-textfield.d.ts.map +1 -1
  22. package/dist/controls/input/sd-textfield.js +54 -26
  23. package/dist/controls/list/sd-list-item.js +19 -10
  24. package/dist/controls/list/sd-list.js +1 -1
  25. package/dist/controls/pagination/sd-pagination.js +11 -6
  26. package/dist/controls/select/sd-select-button.js +1 -1
  27. package/dist/controls/select/sd-select-item.js +7 -4
  28. package/dist/controls/select/sd-select.js +35 -18
  29. package/dist/controls/tab/sd-tab-item.d.ts +4 -4
  30. package/dist/controls/tab/sd-tab-item.d.ts.map +1 -1
  31. package/dist/controls/tab/sd-tab-item.js +6 -4
  32. package/dist/controls/tab/sd-tab.d.ts +4 -4
  33. package/dist/controls/tab/sd-tab.d.ts.map +1 -1
  34. package/dist/controls/tab/sd-tab.js +3 -2
  35. package/dist/core/app-structure/sd-app-structure.provider.js +10 -5
  36. package/dist/core/busy/sd-busy-container.js +9 -5
  37. package/dist/core/busy/sd-busy.provider.js +4 -2
  38. package/dist/core/config/injectSdSystemConfigResource.js +1 -1
  39. package/dist/core/config/sd-system-config.provider.d.ts +1 -1
  40. package/dist/core/config/sd-system-config.provider.d.ts.map +1 -1
  41. package/dist/core/config/sd-system-config.provider.js +1 -1
  42. package/dist/core/mark.d.ts +1 -1
  43. package/dist/core/mark.d.ts.map +1 -1
  44. package/dist/core/modal/sd-activated-modal.provider.js +4 -2
  45. package/dist/core/modal/sd-confirm-modal.js +5 -3
  46. package/dist/core/modal/sd-modal.js +37 -19
  47. package/dist/core/modal/sd-modal.provider.js +2 -1
  48. package/dist/core/modal/sd-prompt-modal.js +7 -4
  49. package/dist/core/selection/useExpandingManager.js +14 -7
  50. package/dist/core/selection/useSelectionManager.js +8 -4
  51. package/dist/core/selection/useSortingManager.js +2 -1
  52. package/dist/core/setupModelHook.d.ts +1 -1
  53. package/dist/core/setupModelHook.d.ts.map +1 -1
  54. package/dist/core/shared-data/sd-shared-data.provider.js +6 -3
  55. package/dist/core/show-effect/sd-show-effect.js +2 -1
  56. package/dist/core/show-effect/setupRevealOnShow.js +2 -1
  57. package/dist/core/template/sd-item-of-template.js +2 -1
  58. package/dist/core/template/sd-typed-template.js +2 -1
  59. package/dist/core/toast/sd-toast-container.js +1 -1
  60. package/dist/core/toast/sd-toast.js +13 -7
  61. package/dist/core/toast/sd-toast.provider.js +4 -2
  62. package/dist/data/crud/sd-base-container.js +19 -10
  63. package/dist/data/crud/sd-crud-detail.js +22 -12
  64. package/dist/data/crud/sd-crud-list.d.ts +1 -1
  65. package/dist/data/crud/sd-crud-list.d.ts.map +1 -1
  66. package/dist/data/crud/sd-crud-list.js +66 -34
  67. package/dist/data/kanban/sd-kanban-board.js +5 -3
  68. package/dist/data/kanban/sd-kanban-lane.js +14 -9
  69. package/dist/data/kanban/sd-kanban.js +18 -11
  70. package/dist/data/permission-table/sd-permission-table.js +15 -8
  71. package/dist/data/shared-data/sd-shared-data-select-button.d.ts +2 -2
  72. package/dist/data/shared-data/sd-shared-data-select-button.d.ts.map +1 -1
  73. package/dist/data/shared-data/sd-shared-data-select-button.js +13 -7
  74. package/dist/data/shared-data/sd-shared-data-select-list.js +27 -14
  75. package/dist/data/shared-data/sd-shared-data-select.js +45 -23
  76. package/dist/data/sheet/injectSheetColumnResizing.js +6 -3
  77. package/dist/data/sheet/sd-sheet-column-cell-template.js +2 -1
  78. package/dist/data/sheet/sd-sheet-column.d.ts +4 -4
  79. package/dist/data/sheet/sd-sheet-column.d.ts.map +1 -1
  80. package/dist/data/sheet/sd-sheet-column.js +16 -8
  81. package/dist/data/sheet/sd-sheet-config.modal.d.ts +1 -1
  82. package/dist/data/sheet/sd-sheet-config.modal.d.ts.map +1 -1
  83. package/dist/data/sheet/sd-sheet-config.modal.js +11 -6
  84. package/dist/data/sheet/sd-sheet.d.ts +2 -2
  85. package/dist/data/sheet/sd-sheet.d.ts.map +1 -1
  86. package/dist/data/sheet/sd-sheet.js +57 -32
  87. package/dist/data/sheet/useSheetCellAgent.js +2 -1
  88. package/dist/data/sheet/useSheetCellStyling.js +2 -1
  89. package/dist/data/sheet/useSheetColumnFixing.js +2 -1
  90. package/dist/data/sheet/useSheetDisplayPipeline.js +8 -4
  91. package/dist/data/sheet/useSheetLayoutEngine.js +10 -5
  92. package/dist/data/state-preset/sd-state-preset.js +9 -5
  93. package/dist/features/address/sd-address-search.modal.js +5 -3
  94. package/dist/features/editor/sd-markdown-editor.d.ts +2 -1
  95. package/dist/features/editor/sd-markdown-editor.d.ts.map +1 -1
  96. package/dist/features/editor/sd-markdown-editor.js +11 -6
  97. package/dist/features/editor/sd-tiptap-editor.d.ts +1 -1
  98. package/dist/features/editor/sd-tiptap-editor.d.ts.map +1 -1
  99. package/dist/features/editor/sd-tiptap-editor.js +13 -7
  100. package/dist/features/editor/useTiptapToolbar.d.ts +2 -1
  101. package/dist/features/editor/useTiptapToolbar.d.ts.map +1 -1
  102. package/dist/features/editor/useTiptapToolbar.js +8 -4
  103. package/dist/features/theme/sd-theme-provider.js +6 -3
  104. package/dist/features/theme/sd-theme-selector.js +5 -3
  105. package/dist/features/visual/sd-barcode.js +7 -4
  106. package/dist/features/visual/sd-calendar.js +13 -7
  107. package/dist/features/visual/sd-echarts.js +9 -5
  108. package/dist/features/visual/sd-label.js +5 -3
  109. package/dist/features/visual/sd-note.js +5 -3
  110. package/dist/features/visual/sd-progress.js +9 -5
  111. package/dist/layout/sidebar/sd-sidebar-container.js +3 -2
  112. package/dist/layout/sidebar/sd-sidebar-menu.js +11 -6
  113. package/dist/layout/sidebar/sd-sidebar-user.js +5 -3
  114. package/dist/layout/sidebar/sd-sidebar.js +3 -2
  115. package/dist/layout/topbar/sd-topbar-container.js +1 -1
  116. package/dist/layout/topbar/sd-topbar-menu.js +7 -4
  117. package/dist/layout/topbar/sd-topbar-user.js +5 -3
  118. package/dist/layout/topbar/sd-topbar.js +5 -3
  119. package/package.json +11 -13
  120. package/src/controls/input/sd-textfield-type-handlers.ts +5 -7
  121. package/src/controls/input/sd-textfield.ts +5 -1
  122. package/src/controls/tab/sd-tab-item.ts +3 -3
  123. package/src/controls/tab/sd-tab.ts +2 -2
  124. package/src/core/config/injectSdSystemConfigResource.ts +1 -1
  125. package/src/core/config/sd-system-config.provider.ts +2 -2
  126. package/src/core/mark.ts +2 -2
  127. package/src/core/setupModelHook.ts +2 -2
  128. package/src/data/shared-data/sd-shared-data-select-button.ts +2 -2
  129. package/src/data/sheet/sd-sheet-column.ts +2 -2
  130. package/src/features/editor/sd-markdown-editor.ts +2 -2
  131. package/src/features/editor/useTiptapToolbar.ts +21 -2
package/dist/controls/button/sd-additional-button.js CHANGED
@@ -3,7 +3,8 @@ import * as i0 from "@angular/core";
3
3
  const _c0 = ["*", [["sd-anchor"]], [["sd-button"]]];
4
4
  const _c1 = ["*", "sd-anchor", "sd-button"];
5
5
  export class SdAdditionalButton {
6
- size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
6
+ size = input(/* @ts-ignore */
7
+ ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
7
8
  inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
8
9
  static ɵfac = function SdAdditionalButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdAdditionalButton)(); };
9
10
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdAdditionalButton, selectors: [["sd-additional-button"]], hostAttrs: [1, "flex-row", "gap-sm"], hostVars: 2, hostBindings: function SdAdditionalButton_HostBindings(rf, ctx) { if (rf & 2) {
@@ -17,7 +18,7 @@ export class SdAdditionalButton {
17
18
  i0.ɵɵprojection(3, 1);
18
19
  i0.ɵɵprojection(4, 2);
19
20
  i0.ɵɵdomElementEnd();
20
- } }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-additional-button {\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-additional-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-additional-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-additional-button > ._button.gap-xs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-additional-button > ._button.gap-sm {\n gap: 0;\n }\n sd-additional-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-additional-button > ._button.gap-default {\n gap: 0;\n }\n sd-additional-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-additional-button > ._button.gap-lg {\n gap: 0;\n }\n sd-additional-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-additional-button > ._button.gap-xl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-additional-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-additional-button > ._button.gap-0 {\n gap: 0;\n }\n sd-additional-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-additional-button > ._button.gap-auto {\n gap: 0;\n }\n sd-additional-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-additional-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-additional-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"], encapsulation: 2, changeDetection: 0 });
21
+ } }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-additional-button {\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-additional-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-additional-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-additional-button > ._button.gap-xs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-additional-button > ._button.gap-sm {\n gap: 0;\n }\n sd-additional-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-additional-button > ._button.gap-default {\n gap: 0;\n }\n sd-additional-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-additional-button > ._button.gap-lg {\n gap: 0;\n }\n sd-additional-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-additional-button > ._button.gap-xl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-additional-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-additional-button > ._button.gap-0 {\n gap: 0;\n }\n sd-additional-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-additional-button > ._button.gap-auto {\n gap: 0;\n }\n sd-additional-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-additional-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-additional-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"], encapsulation: 2 });
21
22
  }
22
23
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdAdditionalButton, [{
23
24
  type: Component,
package/dist/controls/button/sd-anchor.js CHANGED
@@ -3,14 +3,15 @@ import * as i0 from "@angular/core";
3
3
  const _c0 = ["*"];
4
4
  export class SdAnchor {
5
5
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
6
- theme = input("primary", ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
6
+ theme = input("primary", /* @ts-ignore */
7
+ ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
7
8
  static ɵfac = function SdAnchor_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdAnchor)(); };
8
9
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdAnchor, selectors: [["sd-anchor"]], hostVars: 3, hostBindings: function SdAnchor_HostBindings(rf, ctx) { if (rf & 2) {
9
10
  i0.ɵɵattribute("data-sd-theme", ctx.theme())("data-sd-disabled", ctx.disabled())("tabindex", ctx.disabled() ? undefined : 0);
10
11
  } }, inputs: { disabled: [1, "disabled"], theme: [1, "theme"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdAnchor_Template(rf, ctx) { if (rf & 1) {
11
12
  i0.ɵɵprojectionDef();
12
13
  i0.ɵɵprojection(0);
13
- } }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--theme-gray-default);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--theme-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--theme-blue-gray-default);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--theme-blue-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--theme-primary-default);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--theme-primary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=secondary] {\n color: var(--theme-secondary-default);\n}\nsd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=secondary]:active {\n color: var(--theme-secondary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--theme-info-default);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--theme-info-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--theme-success-default);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--theme-success-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--theme-warning-default);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--theme-warning-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--theme-danger-default);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--theme-danger-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
14
+ } }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--theme-gray-default);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--theme-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--theme-blue-gray-default);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--theme-blue-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--theme-primary-default);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--theme-primary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=secondary] {\n color: var(--theme-secondary-default);\n}\nsd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=secondary]:active {\n color: var(--theme-secondary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--theme-info-default);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--theme-info-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--theme-success-default);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--theme-success-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--theme-warning-default);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--theme-warning-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--theme-danger-default);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--theme-danger-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2 });
14
15
  }
15
16
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdAnchor, [{
16
17
  type: Component,
package/dist/controls/button/sd-button.js CHANGED
@@ -3,14 +3,19 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
3
3
  import * as i0 from "@angular/core";
4
4
  const _c0 = ["*"];
5
5
  export class SdButton {
6
- type = input("button", ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
7
- theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
6
+ type = input("button", /* @ts-ignore */
7
+ ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
8
+ theme = input(/* @ts-ignore */
9
+ ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
8
10
  inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
9
11
  inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
10
- size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
12
+ size = input(/* @ts-ignore */
13
+ ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
11
14
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
12
- buttonStyle = input(...(ngDevMode ? [undefined, { debugName: "buttonStyle" }] : /* istanbul ignore next */ []));
13
- buttonClass = input(...(ngDevMode ? [undefined, { debugName: "buttonClass" }] : /* istanbul ignore next */ []));
15
+ buttonStyle = input(/* @ts-ignore */
16
+ ...(ngDevMode ? [undefined, { debugName: "buttonStyle" }] : /* istanbul ignore next */ []));
17
+ buttonClass = input(/* @ts-ignore */
18
+ ...(ngDevMode ? [undefined, { debugName: "buttonClass" }] : /* istanbul ignore next */ []));
14
19
  static ɵfac = function SdButton_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdButton)(); };
15
20
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdButton, selectors: [["sd-button"]], hostVars: 5, hostBindings: function SdButton_HostBindings(rf, ctx) { if (rf & 2) {
16
21
  i0.ɵɵattribute("data-sd-theme", ctx.theme())("data-sd-inline", ctx.inline())("data-sd-size", ctx.size())("data-sd-inset", ctx.inset())("data-sd-disabled", ctx.disabled());
@@ -23,7 +28,7 @@ export class SdButton {
23
28
  i0.ɵɵstyleMap(ctx.buttonStyle());
24
29
  i0.ɵɵclassMap(ctx.buttonClass());
25
30
  i0.ɵɵproperty("type", ctx.type())("disabled", ctx.disabled())("sdRipple", !ctx.disabled());
26
- } }, dependencies: [SdRipple], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--theme-primary-default);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-dark);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-dark);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-dark);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-dark);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-dark);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-dark);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-dark);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
31
+ } }, dependencies: [SdRipple], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--theme-primary-default);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-dark);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-dark);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-dark);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-dark);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-dark);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-dark);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-dark);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2 });
27
32
  }
28
33
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdButton, [{
29
34
  type: Component,
package/dist/controls/button/sd-modal-select-button.js CHANGED
@@ -33,15 +33,21 @@ function SdModalSelectButton_Conditional_4_Template(rf, ctx) { if (rf & 1) {
33
33
  } }
34
34
  export class SdModalSelectButton {
35
35
  _sdModal = inject(SdModalProvider);
36
- modal = input.required(...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
37
- value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
36
+ modal = input.required(/* @ts-ignore */
37
+ ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
38
+ value = model(/* @ts-ignore */
39
+ ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
38
40
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
39
41
  required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
40
42
  inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
41
- size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
42
- selectMode = input("single", ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
43
- modalOptions = input(...(ngDevMode ? [undefined, { debugName: "modalOptions" }] : /* istanbul ignore next */ []));
44
- searchIcon = input(tablerSearch, ...(ngDevMode ? [{ debugName: "searchIcon" }] : /* istanbul ignore next */ []));
43
+ size = input(/* @ts-ignore */
44
+ ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
45
+ selectMode = input("single", /* @ts-ignore */
46
+ ...(ngDevMode ? [{ debugName: "selectMode" }] : /* istanbul ignore next */ []));
47
+ modalOptions = input(/* @ts-ignore */
48
+ ...(ngDevMode ? [undefined, { debugName: "modalOptions" }] : /* istanbul ignore next */ []));
49
+ searchIcon = input(tablerSearch, /* @ts-ignore */
50
+ ...(ngDevMode ? [{ debugName: "searchIcon" }] : /* istanbul ignore next */ []));
45
51
  tablerEraser = tablerEraser;
46
52
  _hasValue = computed(() => {
47
53
  const v = this.value();
@@ -50,7 +56,8 @@ export class SdModalSelectButton {
50
56
  if (Array.isArray(v))
51
57
  return v.length > 0;
52
58
  return true;
53
- }, ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
59
+ }, /* @ts-ignore */
60
+ ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
54
61
  constructor() {
55
62
  setupInvalid(() => {
56
63
  if (!this.required())
@@ -102,7 +109,7 @@ export class SdModalSelectButton {
102
109
  i0.ɵɵconditional(!ctx.disabled() && !ctx.required() && ctx._hasValue() ? 3 : -1);
103
110
  i0.ɵɵadvance();
104
111
  i0.ɵɵconditional(!ctx.disabled() ? 4 : -1);
105
- } }, dependencies: [SdAnchor, SdButton, NgIcon], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-modal-select-button {\n display: flex;\n flex-direction: row;\n gap: var(--gap-sm);\n position: relative;\n width: 100%;\n min-width: 3em;\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal-select-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-modal-select-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-modal-select-button > ._button.gap-xs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-modal-select-button > ._button.gap-sm {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-modal-select-button > ._button.gap-default {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-modal-select-button > ._button.gap-lg {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-modal-select-button > ._button.gap-xl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-modal-select-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-modal-select-button > ._button.gap-0 {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-modal-select-button > ._button.gap-auto {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-modal-select-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-modal-select-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"], encapsulation: 2, changeDetection: 0 });
112
+ } }, dependencies: [SdAnchor, SdButton, NgIcon], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-modal-select-button {\n display: flex;\n flex-direction: row;\n gap: var(--gap-sm);\n position: relative;\n width: 100%;\n min-width: 3em;\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal-select-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-modal-select-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-modal-select-button > ._button.gap-xs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-modal-select-button > ._button.gap-sm {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-modal-select-button > ._button.gap-default {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-modal-select-button > ._button.gap-lg {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-modal-select-button > ._button.gap-xl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-modal-select-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-modal-select-button > ._button.gap-0 {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-modal-select-button > ._button.gap-auto {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-modal-select-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-modal-select-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"], encapsulation: 2 });
106
113
  }
107
114
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModalSelectButton, [{
108
115
  type: Component,
package/dist/controls/checkbox/sd-checkbox-group-item.js CHANGED
@@ -5,10 +5,13 @@ import * as i0 from "@angular/core";
5
5
  const _c0 = ["*"];
6
6
  export class SdCheckboxGroupItem {
7
7
  _parentControl = inject(forwardRef(() => SdCheckboxGroup));
8
- value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
8
+ value = input.required(/* @ts-ignore */
9
+ ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
9
10
  inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
10
- isSelected = computed(() => this._parentControl.value().includes(this.value()), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
11
- disabled = computed(() => this._parentControl.disabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
11
+ isSelected = computed(() => this._parentControl.value().includes(this.value()), /* @ts-ignore */
12
+ ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
13
+ disabled = computed(() => this._parentControl.disabled(), /* @ts-ignore */
14
+ ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
12
15
  onSelectedChange(selected) {
13
16
  this._parentControl.value.update((v) => {
14
17
  if (selected) {
@@ -28,7 +31,7 @@ export class SdCheckboxGroupItem {
28
31
  i0.ɵɵelementEnd();
29
32
  } if (rf & 2) {
30
33
  i0.ɵɵproperty("value", ctx.isSelected())("inline", ctx.inline())("disabled", ctx.disabled());
31
- } }, dependencies: [SdCheckbox], encapsulation: 2, changeDetection: 0 });
34
+ } }, dependencies: [SdCheckbox], encapsulation: 2 });
32
35
  }
33
36
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCheckboxGroupItem, [{
34
37
  type: Component,
package/dist/controls/checkbox/sd-checkbox-group.js CHANGED
@@ -2,13 +2,14 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, input, model, Vie
2
2
  import * as i0 from "@angular/core";
3
3
  const _c0 = ["*"];
4
4
  export class SdCheckboxGroup {
5
- value = model([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
5
+ value = model([], /* @ts-ignore */
6
+ ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
6
7
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
7
8
  static ɵfac = function SdCheckboxGroup_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCheckboxGroup)(); };
8
9
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCheckboxGroup, selectors: [["sd-checkbox-group"]], inputs: { value: [1, "value"], disabled: [1, "disabled"] }, outputs: { value: "valueChange" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdCheckboxGroup_Template(rf, ctx) { if (rf & 1) {
9
10
  i0.ɵɵprojectionDef();
10
11
  i0.ɵɵprojection(0);
11
- } }, encapsulation: 2, changeDetection: 0 });
12
+ } }, encapsulation: 2 });
12
13
  }
13
14
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCheckboxGroup, [{
14
15
  type: Component,
package/dist/controls/checkbox/sd-checkbox.js CHANGED
@@ -15,16 +15,22 @@ function SdCheckbox_Conditional_3_Template(rf, ctx) { if (rf & 1) {
15
15
  i0.ɵɵelement(0, "div");
16
16
  } }
17
17
  export class SdCheckbox {
18
- value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
19
- canChangeFn = input(() => true, ...(ngDevMode ? [{ debugName: "canChangeFn" }] : /* istanbul ignore next */ []));
20
- icon = input(tablerCheck, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
18
+ value = model(false, /* @ts-ignore */
19
+ ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
20
+ canChangeFn = input(() => true, /* @ts-ignore */
21
+ ...(ngDevMode ? [{ debugName: "canChangeFn" }] : /* istanbul ignore next */ []));
22
+ icon = input(tablerCheck, /* @ts-ignore */
23
+ ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
21
24
  radio = input(false, { ...(ngDevMode ? { debugName: "radio" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
22
25
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
23
- size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
26
+ size = input(/* @ts-ignore */
27
+ ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
24
28
  inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
25
29
  inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
26
- theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
27
- contentStyle = input(...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
30
+ theme = input(/* @ts-ignore */
31
+ ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
32
+ contentStyle = input(/* @ts-ignore */
33
+ ...(ngDevMode ? [undefined, { debugName: "contentStyle" }] : /* istanbul ignore next */ []));
28
34
  constructor() {
29
35
  setupModelHook(this.value, this.canChangeFn);
30
36
  setupRipple(() => !this.disabled());
@@ -73,7 +79,7 @@ export class SdCheckbox {
73
79
  i0.ɵɵconditional(!ctx.radio() ? 2 : 3);
74
80
  i0.ɵɵadvance(2);
75
81
  i0.ɵɵstyleMap(ctx.contentStyle());
76
- } }, dependencies: [NgIcon], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--gap-sm);\n }\n}\nsd-checkbox > ._indicator_rect {\n display: inline-block;\n vertical-align: -0.125em;\n user-select: none;\n width: calc(var(--font-size-default) + 2px);\n height: calc(var(--font-size-default) + 2px);\n border: 1px solid var(--border-color-light);\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n vertical-align: top;\n stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n display: inline-block;\n vertical-align: top;\n padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-gray-default);\n background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-info-default);\n background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-success-default);\n background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-warning-default);\n background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-danger-default);\n background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n padding: var(--gap-xs) var(--gap-sm);\n gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
82
+ } }, dependencies: [NgIcon], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--gap-sm);\n }\n}\nsd-checkbox > ._indicator_rect {\n display: inline-block;\n vertical-align: -0.125em;\n user-select: none;\n width: calc(var(--font-size-default) + 2px);\n height: calc(var(--font-size-default) + 2px);\n border: 1px solid var(--border-color-light);\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n vertical-align: top;\n stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n display: inline-block;\n vertical-align: top;\n padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-gray-default);\n background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-info-default);\n background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-success-default);\n background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-warning-default);\n background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-danger-default);\n background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n padding: var(--gap-xs) var(--gap-sm);\n gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2 });
77
83
  }
78
84
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCheckbox, [{
79
85
  type: Component,
package/dist/controls/checkbox/sd-switch.js CHANGED
@@ -2,13 +2,17 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, input, model, Vie
2
2
  import { setupModelHook } from "../../core/setupModelHook";
3
3
  import * as i0 from "@angular/core";
4
4
  export class SdSwitch {
5
- value = model(false, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
6
- canChangeFn = input(() => true, ...(ngDevMode ? [{ debugName: "canChangeFn" }] : /* istanbul ignore next */ []));
5
+ value = model(false, /* @ts-ignore */
6
+ ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
7
+ canChangeFn = input(() => true, /* @ts-ignore */
8
+ ...(ngDevMode ? [{ debugName: "canChangeFn" }] : /* istanbul ignore next */ []));
7
9
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
8
10
  inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
9
11
  inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
10
- size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
11
- theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
12
+ size = input(/* @ts-ignore */
13
+ ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
14
+ theme = input(/* @ts-ignore */
15
+ ...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
12
16
  constructor() {
13
17
  setupModelHook(this.value, this.canChangeFn);
14
18
  }
@@ -37,7 +41,7 @@ export class SdSwitch {
37
41
  i0.ɵɵdomElementStart(0, "div");
38
42
  i0.ɵɵdomElement(1, "div");
39
43
  i0.ɵɵdomElementEnd();
40
- } }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-switch {\n display: block;\n padding: var(--gap-sm) 0;\n border: 1px solid transparent;\n vertical-align: top;\n cursor: pointer;\n}\nsd-switch > div {\n height: var(--line-height);\n width: calc(var(--line-height) * 2 - var(--gap-xs));\n padding: calc(var(--gap-xs) / 2);\n border-radius: calc(var(--line-height) / 2);\n text-align: left;\n background: var(--theme-gray-lighter);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--line-height) - var(--gap-xs));\n height: calc(var(--line-height) - var(--gap-xs));\n border-radius: 100%;\n background: var(--control-color);\n transition: transform var(--animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-on=true] > div > div {\n transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n display: inline-block;\n padding: 0;\n border: none;\n}\nsd-switch[data-sd-inset=true] {\n border: none;\n}\nsd-switch[data-sd-size=sm] {\n padding: var(--gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background: var(--theme-gray-default);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background: var(--theme-blue-gray-default);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background: var(--theme-primary-default);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n background: var(--theme-secondary-default);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background: var(--theme-info-default);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background: var(--theme-warning-default);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background: var(--theme-danger-default);\n}\nsd-switch[data-sd-disabled=true] > div {\n opacity: 0.5;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background: var(--theme-gray-default);\n}"], encapsulation: 2, changeDetection: 0 });
44
+ } }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-switch {\n display: block;\n padding: var(--gap-sm) 0;\n border: 1px solid transparent;\n vertical-align: top;\n cursor: pointer;\n}\nsd-switch > div {\n height: var(--line-height);\n width: calc(var(--line-height) * 2 - var(--gap-xs));\n padding: calc(var(--gap-xs) / 2);\n border-radius: calc(var(--line-height) / 2);\n text-align: left;\n background: var(--theme-gray-lighter);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--line-height) - var(--gap-xs));\n height: calc(var(--line-height) - var(--gap-xs));\n border-radius: 100%;\n background: var(--control-color);\n transition: transform var(--animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-on=true] > div > div {\n transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n display: inline-block;\n padding: 0;\n border: none;\n}\nsd-switch[data-sd-inset=true] {\n border: none;\n}\nsd-switch[data-sd-size=sm] {\n padding: var(--gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background: var(--theme-gray-default);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background: var(--theme-blue-gray-default);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background: var(--theme-primary-default);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n background: var(--theme-secondary-default);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background: var(--theme-info-default);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background: var(--theme-warning-default);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background: var(--theme-danger-default);\n}\nsd-switch[data-sd-disabled=true] > div {\n opacity: 0.5;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background: var(--theme-gray-default);\n}"], encapsulation: 2 });
41
45
  }
42
46
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSwitch, [{
43
47
  type: Component,
package/dist/controls/collapse/sd-collapse-icon.js CHANGED
@@ -3,17 +3,20 @@ import { NgIcon } from "@ng-icons/core";
3
3
  import { tablerChevronDown } from "@ng-icons/tabler-icons";
4
4
  import * as i0 from "@angular/core";
5
5
  export class SdCollapseIcon {
6
- icon = input(tablerChevronDown, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
6
+ icon = input(tablerChevronDown, /* @ts-ignore */
7
+ ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
7
8
  open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
8
9
  openRotate = input(90, { ...(ngDevMode ? { debugName: "openRotate" } : /* istanbul ignore next */ {}), transform: numberAttribute });
9
10
  transformStyle = computed(() => {
10
11
  return this.open() ? `rotate(${this.openRotate()}deg)` : "";
11
- }, ...(ngDevMode ? [{ debugName: "transformStyle" }] : /* istanbul ignore next */ []));
12
+ }, /* @ts-ignore */
13
+ ...(ngDevMode ? [{ debugName: "transformStyle" }] : /* istanbul ignore next */ []));
12
14
  transitionStyle = computed(() => {
13
15
  return this.open()
14
16
  ? "transform var(--animation-duration) ease-out"
15
17
  : "transform var(--animation-duration) ease-in";
16
- }, ...(ngDevMode ? [{ debugName: "transitionStyle" }] : /* istanbul ignore next */ []));
18
+ }, /* @ts-ignore */
19
+ ...(ngDevMode ? [{ debugName: "transitionStyle" }] : /* istanbul ignore next */ []));
17
20
  static ɵfac = function SdCollapseIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCollapseIcon)(); };
18
21
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCollapseIcon, selectors: [["sd-collapse-icon"]], hostVars: 4, hostBindings: function SdCollapseIcon_HostBindings(rf, ctx) { if (rf & 2) {
19
22
  i0.ɵɵstyleProp("transform", ctx.transformStyle())("transition", ctx.transitionStyle());
@@ -21,7 +24,7 @@ export class SdCollapseIcon {
21
24
  i0.ɵɵelement(0, "ng-icon", 0);
22
25
  } if (rf & 2) {
23
26
  i0.ɵɵproperty("svg", ctx.icon());
24
- } }, dependencies: [NgIcon], styles: ["sd-collapse-icon {\n display: inline-block;\n}\nsd-collapse-icon > ng-icon {\n display: block;\n}"], encapsulation: 2, changeDetection: 0 });
27
+ } }, dependencies: [NgIcon], styles: ["sd-collapse-icon {\n display: inline-block;\n}\nsd-collapse-icon > ng-icon {\n display: block;\n}"], encapsulation: 2 });
25
28
  }
26
29
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCollapseIcon, [{
27
30
  type: Component,
package/dist/controls/collapse/sd-collapse.js CHANGED
@@ -6,18 +6,22 @@ const _c1 = ["*"];
6
6
  export class SdCollapse {
7
7
  open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
8
8
  _contentElRef = viewChild.required("contentEl");
9
- contentHeight = signal(0, ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
10
- _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
9
+ contentHeight = signal(0, /* @ts-ignore */
10
+ ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
11
+ _initialized = signal(false, /* @ts-ignore */
12
+ ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
11
13
  contentMarginTop = computed(() => {
12
14
  return this.open() ? "" : `-${this.contentHeight()}px`;
13
- }, ...(ngDevMode ? [{ debugName: "contentMarginTop" }] : /* istanbul ignore next */ []));
15
+ }, /* @ts-ignore */
16
+ ...(ngDevMode ? [{ debugName: "contentMarginTop" }] : /* istanbul ignore next */ []));
14
17
  contentTransition = computed(() => {
15
18
  if (!this._initialized())
16
19
  return "";
17
20
  return this.open()
18
21
  ? "margin-top var(--animation-duration) ease-out"
19
22
  : "margin-top var(--animation-duration) ease-in";
20
- }, ...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
23
+ }, /* @ts-ignore */
24
+ ...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
21
25
  constructor() {
22
26
  afterNextRender(() => {
23
27
  this.contentHeight.set(this._contentElRef().nativeElement.offsetHeight);
@@ -49,7 +53,7 @@ export class SdCollapse {
49
53
  i0.ɵɵelementEnd();
50
54
  } if (rf & 2) {
51
55
  i0.ɵɵstyleProp("margin-top", ctx.contentMarginTop())("transition", ctx.contentTransition());
52
- } }, dependencies: [SdResizeDirective], styles: ["sd-collapse {\n display: block;\n overflow: hidden;\n}"], encapsulation: 2, changeDetection: 0 });
56
+ } }, dependencies: [SdResizeDirective], styles: ["sd-collapse {\n display: block;\n overflow: hidden;\n}"], encapsulation: 2 });
53
57
  }
54
58
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCollapse, [{
55
59
  type: Component,
package/dist/controls/dropdown/sd-dropdown-popup.js CHANGED
@@ -33,7 +33,7 @@ export class SdDropdownPopup {
33
33
  i0.ɵɵlistener("sdResize", function SdDropdownPopup_Template_div_sdResize_0_listener() { return ctx.onResize(); });
34
34
  i0.ɵɵprojection(1);
35
35
  i0.ɵɵelementEnd();
36
- } }, dependencies: [SdResizeDirective], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-dropdown-popup {\n position: fixed;\n z-index: var(--z-index-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background: var(--control-color);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n overflow: hidden;\n border-radius: var(--border-radius-default);\n border: 1px solid var(--border-color-light);\n}\nsd-dropdown-popup > div {\n width: 100%;\n height: 100%;\n overflow: auto;\n white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n outline: 1px solid var(--theme-primary-default);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--border-color-default);\n }\n}\nsd-dropdown-popup[data-sd-mobile] {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n max-height: 80vh;\n border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--elevation-size)) calc(8 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n}\n\n@keyframes sd-dropdown-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}"], encapsulation: 2, changeDetection: 0 });
36
+ } }, dependencies: [SdResizeDirective], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-dropdown-popup {\n position: fixed;\n z-index: var(--z-index-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background: var(--control-color);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n overflow: hidden;\n border-radius: var(--border-radius-default);\n border: 1px solid var(--border-color-light);\n}\nsd-dropdown-popup > div {\n width: 100%;\n height: 100%;\n overflow: auto;\n white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n outline: 1px solid var(--theme-primary-default);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--border-color-default);\n }\n}\nsd-dropdown-popup[data-sd-mobile] {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n max-height: 80vh;\n border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--elevation-size)) calc(8 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n}\n\n@keyframes sd-dropdown-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}"], encapsulation: 2 });
37
37
  }
38
38
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDropdownPopup, [{
39
39
  type: Component,
package/dist/controls/dropdown/sd-dropdown.js CHANGED
@@ -6,7 +6,8 @@ const _c0 = ["*", [["sd-dropdown-popup"]]];
6
6
  const _c1 = ["*", "sd-dropdown-popup"];
7
7
  export class SdDropdown {
8
8
  _elRef = inject((ElementRef));
9
- open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
9
+ open = model(false, /* @ts-ignore */
10
+ ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
10
11
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
11
12
  popupElRef = contentChild.required(SdDropdownPopup, {
12
13
  read: ElementRef,
@@ -20,7 +21,8 @@ export class SdDropdown {
20
21
  const destroyRef = inject(DestroyRef);
21
22
  // $breakpoint-mobile (SCSS 변수 참조 불가, 값 동기화 필요)
22
23
  this._mql = window.matchMedia("(max-width: 520px)");
23
- this._isMobile = signal(this._mql.matches, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
24
+ this._isMobile = signal(this._mql.matches, /* @ts-ignore */
25
+ ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
24
26
  const onMqlChange = (e) => {
25
27
  this._isMobile.set(e.matches);
26
28
  };
@@ -250,7 +252,7 @@ export class SdDropdown {
250
252
  i0.ɵɵprojectionDef(_c0);
251
253
  i0.ɵɵprojection(0);
252
254
  i0.ɵɵprojection(1, 1);
253
- } }, encapsulation: 2, changeDetection: 0 });
255
+ } }, encapsulation: 2 });
254
256
  }
255
257
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDropdown, [{
256
258
  type: Component,
package/dist/controls/form/sd-form.js CHANGED
@@ -37,7 +37,7 @@ export class SdForm {
37
37
  i0.ɵɵprojection(2);
38
38
  i0.ɵɵdomElement(3, "button", 2);
39
39
  i0.ɵɵdomElementEnd();
40
- } }, encapsulation: 2, changeDetection: 0 });
40
+ } }, encapsulation: 2 });
41
41
  }
42
42
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdForm, [{
43
43
  type: Component,
package/dist/controls/gap/sd-gap.js CHANGED
@@ -1,11 +1,16 @@
1
1
  import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
2
2
  import * as i0 from "@angular/core";
3
3
  export class SdGap {
4
- height = input(...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
5
- heightPx = input(...(ngDevMode ? [undefined, { debugName: "heightPx" }] : /* istanbul ignore next */ []));
6
- width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
7
- widthPx = input(...(ngDevMode ? [undefined, { debugName: "widthPx" }] : /* istanbul ignore next */ []));
8
- widthEm = input(...(ngDevMode ? [undefined, { debugName: "widthEm" }] : /* istanbul ignore next */ []));
4
+ height = input(/* @ts-ignore */
5
+ ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
6
+ heightPx = input(/* @ts-ignore */
7
+ ...(ngDevMode ? [undefined, { debugName: "heightPx" }] : /* istanbul ignore next */ []));
8
+ width = input(/* @ts-ignore */
9
+ ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
10
+ widthPx = input(/* @ts-ignore */
11
+ ...(ngDevMode ? [undefined, { debugName: "widthPx" }] : /* istanbul ignore next */ []));
12
+ widthEm = input(/* @ts-ignore */
13
+ ...(ngDevMode ? [undefined, { debugName: "widthEm" }] : /* istanbul ignore next */ []));
9
14
  _displayStyle = computed(() => {
10
15
  if (this.widthPx() === 0 || this.heightPx() === 0 || this.widthEm() === 0) {
11
16
  return "none";
@@ -21,12 +26,13 @@ export class SdGap {
21
26
  else {
22
27
  return undefined;
23
28
  }
24
- }, ...(ngDevMode ? [{ debugName: "_displayStyle" }] : /* istanbul ignore next */ []));
29
+ }, /* @ts-ignore */
30
+ ...(ngDevMode ? [{ debugName: "_displayStyle" }] : /* istanbul ignore next */ []));
25
31
  static ɵfac = function SdGap_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdGap)(); };
26
32
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdGap, selectors: [["sd-gap"]], hostVars: 10, hostBindings: function SdGap_HostBindings(rf, ctx) { if (rf & 2) {
27
33
  i0.ɵɵattribute("data-sd-height", ctx.height())("data-sd-width", ctx.width());
28
34
  i0.ɵɵstyleProp("height", ctx.heightPx(), "px")("width", ctx.widthPx(), "px")("width", ctx.widthEm(), "em")("display", ctx._displayStyle());
29
- } }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-gap[data-sd-height=xxs] {\n height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n width: var(--gap-auto);\n}"], encapsulation: 2, changeDetection: 0 });
35
+ } }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-gap[data-sd-height=xxs] {\n height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n width: var(--gap-auto);\n}"], encapsulation: 2 });
30
36
  }
31
37
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdGap, [{
32
38
  type: Component,