@simplysm/angular 14.1.20 → 14.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/controls/button/sd-additional-button.js +2 -2
- package/dist/controls/button/sd-anchor.d.ts.map +1 -1
- package/dist/controls/button/sd-anchor.js +3 -3
- package/dist/controls/button/sd-button.d.ts.map +1 -1
- package/dist/controls/button/sd-button.js +3 -3
- package/dist/controls/button/sd-modal-select-button.d.ts.map +1 -1
- package/dist/controls/button/sd-modal-select-button.js +2 -2
- package/dist/controls/checkbox/sd-checkbox.d.ts.map +1 -1
- package/dist/controls/checkbox/sd-checkbox.js +3 -3
- package/dist/controls/checkbox/sd-switch.d.ts.map +1 -1
- package/dist/controls/checkbox/sd-switch.js +3 -3
- package/dist/controls/collapse/sd-collapse-icon.d.ts +1 -1
- package/dist/controls/collapse/sd-collapse-icon.d.ts.map +1 -1
- package/dist/controls/collapse/sd-collapse-icon.js +2 -2
- package/dist/controls/collapse/sd-collapse.d.ts +1 -1
- package/dist/controls/collapse/sd-collapse.d.ts.map +1 -1
- package/dist/controls/collapse/sd-collapse.js +2 -2
- package/dist/controls/dropdown/sd-dropdown-popup.d.ts.map +1 -1
- package/dist/controls/dropdown/sd-dropdown-popup.js +2 -2
- package/dist/controls/dropdown/sd-dropdown.js +1 -1
- package/dist/controls/gap/sd-gap.d.ts.map +1 -1
- package/dist/controls/gap/sd-gap.js +5 -7
- package/dist/controls/input/sd-date-range-picker.js +2 -2
- package/dist/controls/input/sd-numpad.d.ts.map +1 -1
- package/dist/controls/input/sd-numpad.js +7 -15
- package/dist/controls/input/sd-range.js +2 -2
- package/dist/controls/input/sd-textarea.js +4 -4
- package/dist/controls/input/sd-textfield.d.ts.map +1 -1
- package/dist/controls/input/sd-textfield.js +10 -10
- package/dist/controls/list/sd-list-item.js +43 -43
- package/dist/controls/list/sd-list.js +2 -2
- package/dist/controls/pagination/sd-pagination.d.ts.map +1 -1
- package/dist/controls/pagination/sd-pagination.js +7 -5
- package/dist/controls/select/sd-select-button.d.ts.map +1 -1
- package/dist/controls/select/sd-select-button.js +4 -4
- package/dist/controls/select/sd-select-item.d.ts.map +1 -1
- package/dist/controls/select/sd-select-item.js +3 -3
- package/dist/controls/select/sd-select.d.ts.map +1 -1
- package/dist/controls/select/sd-select.js +10 -19
- package/dist/controls/tab/sd-tab-item.js +2 -2
- package/dist/controls/tab/sd-tab.js +2 -2
- package/dist/core/busy/sd-busy-container.d.ts.map +1 -1
- package/dist/core/busy/sd-busy-container.js +3 -3
- package/dist/core/modal/sd-modal.d.ts.map +1 -1
- package/dist/core/modal/sd-modal.js +3 -3
- package/dist/core/provideSdAngular.d.ts.map +1 -1
- package/dist/core/provideSdAngular.js +31 -10
- package/dist/core/ripple/setupRipple.js +2 -2
- package/dist/core/setupBgTheme.d.ts +0 -1
- package/dist/core/setupBgTheme.d.ts.map +1 -1
- package/dist/core/setupBgTheme.js +3 -4
- package/dist/core/show-effect/setupRevealOnShow.js +1 -1
- package/dist/core/toast/sd-toast-container.js +2 -2
- package/dist/core/toast/sd-toast.d.ts.map +1 -1
- package/dist/core/toast/sd-toast.js +3 -3
- package/dist/core/validation/setupInvalid.js +5 -5
- package/dist/data/crud/sd-base-container.d.ts.map +1 -1
- package/dist/data/crud/sd-base-container.js +50 -52
- package/dist/data/kanban/sd-kanban-board.js +2 -2
- package/dist/data/kanban/sd-kanban-lane.d.ts.map +1 -1
- package/dist/data/kanban/sd-kanban-lane.js +4 -4
- package/dist/data/kanban/sd-kanban.d.ts.map +1 -1
- package/dist/data/kanban/sd-kanban.js +4 -4
- package/dist/data/permission-table/sd-permission-table.d.ts.map +1 -1
- package/dist/data/permission-table/sd-permission-table.js +5 -17
- package/dist/data/shared-data/sd-shared-data-select-list.d.ts.map +1 -1
- package/dist/data/shared-data/sd-shared-data-select-list.js +5 -19
- package/dist/data/shared-data/sd-shared-data-select.d.ts.map +1 -1
- package/dist/data/shared-data/sd-shared-data-select.js +8 -15
- package/dist/data/sheet/sd-sheet-config.modal.d.ts.map +1 -1
- package/dist/data/sheet/sd-sheet-config.modal.js +7 -9
- package/dist/data/sheet/sd-sheet.d.ts.map +1 -1
- package/dist/data/sheet/sd-sheet.js +10 -12
- package/dist/data/sheet/useSheetCellStyling.d.ts.map +1 -1
- package/dist/data/sheet/useSheetCellStyling.js +1 -1
- package/dist/data/state-preset/sd-state-preset.js +5 -5
- package/dist/features/editor/sd-markdown-editor.d.ts.map +1 -1
- package/dist/features/editor/sd-markdown-editor.js +85 -34
- package/dist/features/editor/sd-tiptap-editor.d.ts.map +1 -1
- package/dist/features/editor/sd-tiptap-editor.js +192 -61
- package/dist/features/theme/sd-theme-provider.d.ts +18 -1
- package/dist/features/theme/sd-theme-provider.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-provider.js +21 -4
- package/dist/features/theme/sd-theme-selector.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-selector.js +50 -9
- package/dist/features/theme/wcag-contrast.d.ts +9 -0
- package/dist/features/theme/wcag-contrast.d.ts.map +1 -0
- package/dist/features/theme/wcag-contrast.js +83 -0
- package/dist/features/visual/sd-calendar.js +2 -2
- package/dist/features/visual/sd-label.d.ts.map +1 -1
- package/dist/features/visual/sd-label.js +5 -5
- package/dist/features/visual/sd-note.d.ts.map +1 -1
- package/dist/features/visual/sd-note.js +3 -3
- package/dist/features/visual/sd-progress.d.ts.map +1 -1
- package/dist/features/visual/sd-progress.js +3 -3
- package/dist/index.d.ts +12 -11
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +10 -9
- package/dist/layout/sidebar/sd-sidebar-container.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar-container.js +11 -5
- package/dist/layout/sidebar/sd-sidebar-menu.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar-menu.js +5 -17
- package/dist/layout/sidebar/sd-sidebar-user.js +32 -32
- package/dist/layout/sidebar/sd-sidebar.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar.js +3 -3
- package/dist/layout/topbar/sd-topbar-menu.js +5 -5
- package/dist/layout/topbar/sd-topbar.d.ts.map +1 -1
- package/dist/layout/topbar/sd-topbar.js +5 -5
- package/package.json +5 -5
- package/scss/commons/_colors.scss +296 -242
- package/scss/commons/_density.scss +23 -0
- package/scss/commons/_mixins.scss +142 -129
- package/scss/commons/_styles.scss +78 -103
- package/scss/commons/_theme-variables.scss +16 -2
- package/scss/commons/_variables.scss +277 -149
- package/scss/controls/_card.scss +12 -8
- package/scss/controls/_form-box.scss +7 -7
- package/scss/controls/_form-table.scss +7 -7
- package/scss/controls/_table.scss +5 -5
- package/scss/sd-tokens.md +132 -0
- package/scss/styles.scss +3 -4
- package/scss/themes/_variables-blueprint.scss +127 -81
- package/scss/themes/_variables-ide-dark.scss +215 -0
- package/src/controls/button/sd-additional-button.ts +12 -12
- package/src/controls/button/sd-anchor.ts +7 -8
- package/src/controls/button/sd-button.ts +42 -44
- package/src/controls/button/sd-modal-select-button.ts +15 -19
- package/src/controls/checkbox/sd-checkbox.ts +55 -43
- package/src/controls/checkbox/sd-switch.ts +18 -19
- package/src/controls/collapse/sd-collapse-icon.ts +2 -2
- package/src/controls/collapse/sd-collapse.ts +2 -2
- package/src/controls/dropdown/sd-dropdown-popup.ts +10 -12
- package/src/controls/dropdown/sd-dropdown.ts +1 -1
- package/src/controls/gap/sd-gap.ts +11 -9
- package/src/controls/input/sd-date-range-picker.ts +1 -1
- package/src/controls/input/sd-numpad.ts +3 -11
- package/src/controls/input/sd-range.ts +1 -1
- package/src/controls/input/sd-textarea.ts +18 -18
- package/src/controls/input/sd-textfield.ts +39 -37
- package/src/controls/list/sd-list-item.ts +195 -195
- package/src/controls/list/sd-list.ts +8 -8
- package/src/controls/pagination/sd-pagination.ts +4 -2
- package/src/controls/select/sd-select-button.ts +6 -10
- package/src/controls/select/sd-select-item.ts +14 -15
- package/src/controls/select/sd-select.ts +34 -35
- package/src/controls/tab/sd-tab-item.ts +4 -4
- package/src/controls/tab/sd-tab.ts +2 -2
- package/src/core/busy/sd-busy-container.ts +17 -16
- package/src/core/modal/sd-modal.ts +38 -32
- package/src/core/provideSdAngular.ts +34 -10
- package/src/core/ripple/setupRipple.ts +2 -2
- package/src/core/setupBgTheme.ts +5 -14
- package/src/core/show-effect/setupRevealOnShow.ts +1 -1
- package/src/core/toast/sd-toast-container.ts +5 -5
- package/src/core/toast/sd-toast.ts +16 -17
- package/src/core/validation/setupInvalid.ts +5 -5
- package/src/data/crud/sd-base-container.ts +120 -122
- package/src/data/kanban/sd-kanban-board.ts +1 -1
- package/src/data/kanban/sd-kanban-lane.ts +9 -14
- package/src/data/kanban/sd-kanban.ts +9 -19
- package/src/data/permission-table/sd-permission-table.ts +12 -20
- package/src/data/shared-data/sd-shared-data-select-list.ts +5 -19
- package/src/data/shared-data/sd-shared-data-select.ts +11 -28
- package/src/data/sheet/sd-sheet-config.modal.ts +5 -7
- package/src/data/sheet/sd-sheet.ts +29 -28
- package/src/data/sheet/useSheetCellStyling.ts +12 -3
- package/src/data/state-preset/sd-state-preset.ts +16 -16
- package/src/features/editor/sd-markdown-editor.ts +110 -56
- package/src/features/editor/sd-tiptap-editor.ts +214 -81
- package/src/features/theme/sd-theme-provider.ts +28 -3
- package/src/features/theme/sd-theme-selector.ts +21 -2
- package/src/features/theme/wcag-contrast.ts +103 -0
- package/src/features/visual/sd-calendar.ts +8 -8
- package/src/features/visual/sd-label.ts +11 -12
- package/src/features/visual/sd-note.ts +10 -11
- package/src/features/visual/sd-progress.ts +9 -11
- package/src/index.ts +15 -40
- package/src/layout/sidebar/sd-sidebar-container.ts +21 -8
- package/src/layout/sidebar/sd-sidebar-menu.ts +15 -17
- package/src/layout/sidebar/sd-sidebar-user.ts +100 -100
- package/src/layout/sidebar/sd-sidebar.ts +7 -9
- package/src/layout/topbar/sd-topbar-menu.ts +3 -3
- package/src/layout/topbar/sd-topbar.ts +12 -14
- package/styles.css +1641 -2462
- package/scss/themes/_blueprint-surfaces.scss +0 -87
|
@@ -18,7 +18,7 @@ export class SdAdditionalButton {
|
|
|
18
18
|
i0.ɵɵprojection(3, 1);
|
|
19
19
|
i0.ɵɵprojection(4, 2);
|
|
20
20
|
i0.ɵɵdomElementEnd();
|
|
21
|
-
} }, styles: ["sd-additional-button {\n border: 1px solid var(--
|
|
21
|
+
} }, styles: ["sd-additional-button {\n border: 1px solid var(--sd-bd-soft);\n border-radius: var(--sd-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--sd-gap-sm) var(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--sd-gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--sd-bd-hairline) !important;\n padding: var(--sd-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(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--sd-gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--sd-gap-default) !important;\n}"], encapsulation: 2 });
|
|
22
22
|
}
|
|
23
23
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdAdditionalButton, [{
|
|
24
24
|
type: Component,
|
|
@@ -34,6 +34,6 @@ export class SdAdditionalButton {
|
|
|
34
34
|
"class": "flex-row gap-sm",
|
|
35
35
|
"[attr.data-sd-size]": "size()",
|
|
36
36
|
"[attr.data-sd-inset]": "inset()",
|
|
37
|
-
}, styles: ["sd-additional-button {\n border: 1px solid var(--
|
|
37
|
+
}, styles: ["sd-additional-button {\n border: 1px solid var(--sd-bd-soft);\n border-radius: var(--sd-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--sd-gap-sm) var(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--sd-gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--sd-bd-hairline) !important;\n padding: var(--sd-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(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--sd-gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--sd-gap-default) !important;\n}"] }]
|
|
38
38
|
}], null, { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
|
|
39
39
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdAdditionalButton, { className: "SdAdditionalButton", filePath: "packages/angular/src/controls/button/sd-additional-button.ts", lineNumber: 97 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-anchor.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-anchor.ts"],"names":[],"mappings":";AAQA,
|
|
1
|
+
{"version":3,"file":"sd-anchor.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-anchor.ts"],"names":[],"mappings":";AAQA,qBAoDa,QAAQ;IACnB,QAAQ,qEAAiD;IACzD,KAAK,kIAEQ;yCAJF,QAAQ;2CAAR,QAAQ;CAKpB"}
|
|
@@ -11,7 +11,7 @@ export class SdAnchor {
|
|
|
11
11
|
} }, inputs: { disabled: [1, "disabled"], theme: [1, "theme"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdAnchor_Template(rf, ctx) { if (rf & 1) {
|
|
12
12
|
i0.ɵɵprojectionDef();
|
|
13
13
|
i0.ɵɵprojection(0);
|
|
14
|
-
} }, styles: ["sd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--
|
|
14
|
+
} }, styles: ["sd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--sd-tx-gray);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--sd-tx-gray-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--sd-tx-gray);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--sd-tx-gray);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--sd-tx-blue-gray);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--sd-tx-blue-gray-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--sd-tx-blue-gray);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--sd-tx-blue-gray);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--sd-tx-primary);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--sd-tx-primary-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--sd-tx-primary);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--sd-tx-primary);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=secondary] {\n color: var(--sd-tx-secondary);\n}\nsd-anchor[data-sd-theme=secondary]:hover {\n color: var(--sd-tx-secondary-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=secondary]:active {\n color: var(--sd-tx-secondary);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=secondary]:hover {\n color: var(--sd-tx-secondary);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--sd-tx-info);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--sd-tx-info-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--sd-tx-info);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--sd-tx-info);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--sd-tx-success);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--sd-tx-success-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--sd-tx-success);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--sd-tx-success);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--sd-tx-warning);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--sd-tx-warning-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--sd-tx-warning);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--sd-tx-warning);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--sd-tx-danger);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--sd-tx-danger-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--sd-tx-danger);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--sd-tx-danger);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n color: var(--sd-tx-disabled) !important;\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
15
15
|
}
|
|
16
16
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdAnchor, [{
|
|
17
17
|
type: Component,
|
|
@@ -21,6 +21,6 @@ export class SdAnchor {
|
|
|
21
21
|
"[attr.data-sd-theme]": "theme()",
|
|
22
22
|
"[attr.data-sd-disabled]": "disabled()",
|
|
23
23
|
"[attr.tabindex]": "disabled() ? undefined : 0",
|
|
24
|
-
}, styles: ["sd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--
|
|
24
|
+
}, styles: ["sd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--sd-tx-gray);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--sd-tx-gray-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--sd-tx-gray);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--sd-tx-gray);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--sd-tx-blue-gray);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--sd-tx-blue-gray-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--sd-tx-blue-gray);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--sd-tx-blue-gray);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--sd-tx-primary);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--sd-tx-primary-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--sd-tx-primary);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--sd-tx-primary);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=secondary] {\n color: var(--sd-tx-secondary);\n}\nsd-anchor[data-sd-theme=secondary]:hover {\n color: var(--sd-tx-secondary-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=secondary]:active {\n color: var(--sd-tx-secondary);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=secondary]:hover {\n color: var(--sd-tx-secondary);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--sd-tx-info);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--sd-tx-info-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--sd-tx-info);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--sd-tx-info);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--sd-tx-success);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--sd-tx-success-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--sd-tx-success);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--sd-tx-success);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--sd-tx-warning);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--sd-tx-warning-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--sd-tx-warning);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--sd-tx-warning);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--sd-tx-danger);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--sd-tx-danger-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--sd-tx-danger);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--sd-tx-danger);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n color: var(--sd-tx-disabled) !important;\n pointer-events: none;\n}"] }]
|
|
25
25
|
}], null, { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] }); })();
|
|
26
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdAnchor, { className: "SdAnchor", filePath: "packages/angular/src/controls/button/sd-anchor.ts", lineNumber:
|
|
26
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdAnchor, { className: "SdAnchor", filePath: "packages/angular/src/controls/button/sd-anchor.ts", lineNumber: 61 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-button.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-button.ts"],"names":[],"mappings":";AASA,
|
|
1
|
+
{"version":3,"file":"sd-button.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-button.ts"],"names":[],"mappings":";AASA,qBA6Ka,QAAQ;IACnB,IAAI,2DAAwC;IAC5C,KAAK,ySAmBD;IACJ,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,sEAA+B;IACnC,QAAQ,qEAAiD;IACzD,WAAW,0DAAmB;IAC9B,WAAW,0DAAmB;yCA3BnB,QAAQ;2CAAR,QAAQ;CA4BpB"}
|
|
@@ -28,7 +28,7 @@ export class SdButton {
|
|
|
28
28
|
i0.ɵɵstyleMap(ctx.buttonStyle());
|
|
29
29
|
i0.ɵɵclassMap(ctx.buttonClass());
|
|
30
30
|
i0.ɵɵproperty("type", ctx.type())("disabled", ctx.disabled())("sdRipple", !ctx.disabled());
|
|
31
|
-
} }, dependencies: [SdRipple], styles: ["sd-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 });
|
|
31
|
+
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n user-select: none;\n padding: var(--sd-gap-sm) var(--sd-gap-lg);\n width: 100%;\n background-color: var(--sd-bg-control);\n border-color: var(--sd-bd-primary-solid);\n border-radius: var(--sd-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--sd-animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background-color: var(--sd-bg-state-hover);\n}\nsd-button > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background-color: var(--sd-bg-gray-solid);\n border-color: var(--sd-bd-gray-solid);\n color: var(--sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background-color: var(--sd-bg-gray-solid-hover);\n border-color: var(--sd-bd-gray-solid-hover);\n color: var(--sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background-color: var(--sd-bg-blue-gray-solid);\n border-color: var(--sd-bd-blue-gray-solid);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background-color: var(--sd-bg-blue-gray-solid-hover);\n border-color: var(--sd-bd-blue-gray-solid-hover);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background-color: var(--sd-bg-primary-solid);\n border-color: var(--sd-bd-primary-solid);\n color: var(--sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background-color: var(--sd-bg-primary-solid-hover);\n border-color: var(--sd-bd-primary-solid-hover);\n color: var(--sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background-color: var(--sd-bg-secondary-solid);\n border-color: var(--sd-bd-secondary-solid);\n color: var(--sd-tx-secondary-solid);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background-color: var(--sd-bg-secondary-solid-hover);\n border-color: var(--sd-bd-secondary-solid-hover);\n color: var(--sd-tx-secondary-solid);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background-color: var(--sd-bg-info-solid);\n border-color: var(--sd-bd-info-solid);\n color: var(--sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background-color: var(--sd-bg-info-solid-hover);\n border-color: var(--sd-bd-info-solid-hover);\n color: var(--sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background-color: var(--sd-bg-success-solid);\n border-color: var(--sd-bd-success-solid);\n color: var(--sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background-color: var(--sd-bg-success-solid-hover);\n border-color: var(--sd-bd-success-solid-hover);\n color: var(--sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background-color: var(--sd-bg-warning-solid);\n border-color: var(--sd-bd-warning-solid);\n color: var(--sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background-color: var(--sd-bg-warning-solid-hover);\n border-color: var(--sd-bd-warning-solid-hover);\n color: var(--sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background-color: var(--sd-bg-danger-solid);\n border-color: var(--sd-bd-danger-solid);\n color: var(--sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background-color: var(--sd-bg-danger-solid-hover);\n border-color: var(--sd-bd-danger-solid-hover);\n color: var(--sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-gray);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-gray-hover);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-blue-gray);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-blue-gray-hover);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-secondary);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-secondary-hover);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-info);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-info-hover);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-success);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-success-hover);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-warning);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-warning-hover);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-danger);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-danger-hover);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-on-inverse);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--sd-tx-on-inverse-muted);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-on-inverse-disabled);\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(--sd-gap-xxs) var(--sd-gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
32
32
|
}
|
|
33
33
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdButton, [{
|
|
34
34
|
type: Component,
|
|
@@ -49,6 +49,6 @@ export class SdButton {
|
|
|
49
49
|
"[attr.data-sd-size]": "size()",
|
|
50
50
|
"[attr.data-sd-inset]": "inset()",
|
|
51
51
|
"[attr.data-sd-disabled]": "disabled()",
|
|
52
|
-
}, styles: ["sd-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}"] }]
|
|
52
|
+
}, styles: ["sd-button > button {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n user-select: none;\n padding: var(--sd-gap-sm) var(--sd-gap-lg);\n width: 100%;\n background-color: var(--sd-bg-control);\n border-color: var(--sd-bd-primary-solid);\n border-radius: var(--sd-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--sd-animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background-color: var(--sd-bg-state-hover);\n}\nsd-button > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background-color: var(--sd-bg-gray-solid);\n border-color: var(--sd-bd-gray-solid);\n color: var(--sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background-color: var(--sd-bg-gray-solid-hover);\n border-color: var(--sd-bd-gray-solid-hover);\n color: var(--sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background-color: var(--sd-bg-blue-gray-solid);\n border-color: var(--sd-bd-blue-gray-solid);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background-color: var(--sd-bg-blue-gray-solid-hover);\n border-color: var(--sd-bd-blue-gray-solid-hover);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background-color: var(--sd-bg-primary-solid);\n border-color: var(--sd-bd-primary-solid);\n color: var(--sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background-color: var(--sd-bg-primary-solid-hover);\n border-color: var(--sd-bd-primary-solid-hover);\n color: var(--sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background-color: var(--sd-bg-secondary-solid);\n border-color: var(--sd-bd-secondary-solid);\n color: var(--sd-tx-secondary-solid);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background-color: var(--sd-bg-secondary-solid-hover);\n border-color: var(--sd-bd-secondary-solid-hover);\n color: var(--sd-tx-secondary-solid);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background-color: var(--sd-bg-info-solid);\n border-color: var(--sd-bd-info-solid);\n color: var(--sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background-color: var(--sd-bg-info-solid-hover);\n border-color: var(--sd-bd-info-solid-hover);\n color: var(--sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background-color: var(--sd-bg-success-solid);\n border-color: var(--sd-bd-success-solid);\n color: var(--sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background-color: var(--sd-bg-success-solid-hover);\n border-color: var(--sd-bd-success-solid-hover);\n color: var(--sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background-color: var(--sd-bg-warning-solid);\n border-color: var(--sd-bd-warning-solid);\n color: var(--sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background-color: var(--sd-bg-warning-solid-hover);\n border-color: var(--sd-bd-warning-solid-hover);\n color: var(--sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background-color: var(--sd-bg-danger-solid);\n border-color: var(--sd-bd-danger-solid);\n color: var(--sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background-color: var(--sd-bg-danger-solid-hover);\n border-color: var(--sd-bd-danger-solid-hover);\n color: var(--sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background-color: var(--sd-bg-disabled);\n border-color: var(--sd-bd-disabled);\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-gray);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-gray-hover);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-blue-gray);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-blue-gray-hover);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-primary);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-secondary);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-secondary-hover);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-info);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-info-hover);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-success);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-success-hover);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-warning);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-warning-hover);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-danger);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background-color: var(--sd-bg-state-hover);\n color: var(--sd-tx-danger-hover);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--sd-tx-on-inverse);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--sd-tx-on-inverse-muted);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--sd-tx-on-inverse-disabled);\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(--sd-gap-xxs) var(--sd-gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"] }]
|
|
53
53
|
}], null, { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }] }); })();
|
|
54
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber:
|
|
54
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber: 183 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-modal-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-modal-select-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;;AAIrF;;;GAGG;AACH,MAAM,WAAW,aAAa,CAAC,IAAI,CAAE,SAAQ,iBAAiB,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAC3F,UAAU,EAAE,WAAW,CAAC,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,YAAY,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,IAAI,WAAW,CACvE,CAAC,EACD,YAAY,GAAG,cAAc,CAC9B,CAAC;AAEF,qBAyGa,mBAAmB,
|
|
1
|
+
{"version":3,"file":"sd-modal-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/button/sd-modal-select-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI3D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;;AAIrF;;;GAGG;AACH,MAAM,WAAW,aAAa,CAAC,IAAI,CAAE,SAAQ,iBAAiB,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAC3F,UAAU,EAAE,WAAW,CAAC,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,YAAY,EAAE,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;CACnC;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,CAAC,GAAG,CAAC,IAAI,WAAW,CACvE,CAAC,EACD,YAAY,GAAG,cAAc,CAC9B,CAAC;AAEF,qBAyGa,mBAAmB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,eAAe,CAAC,CAAC,CAAC;IAC/F,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA2B;IAEpD,KAAK,mDAAyD;IAE9D,KAAK,yEAAkC;IAEvC,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,KAAK,qEAAiD;IACtD,IAAI,uCAAwB;IAC5B,UAAU,iBAA2B;IACrC,YAAY,0CAA2B;IAEvC,UAAU,sBAAuB;IAEjC,SAAS,CAAC,QAAQ,CAAC,YAAY,obAAgB;IAE/C,SAAS,0CAKN;;IAYH,YAAY,IAAI,IAAI;IAId,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;yCAvC1C,mBAAmB;2CAAnB,mBAAmB;CA6D/B"}
|
|
@@ -109,7 +109,7 @@ export class SdModalSelectButton {
|
|
|
109
109
|
i0.ɵɵconditional(!ctx.disabled() && !ctx.required() && ctx._hasValue() ? 3 : -1);
|
|
110
110
|
i0.ɵɵadvance();
|
|
111
111
|
i0.ɵɵconditional(!ctx.disabled() ? 4 : -1);
|
|
112
|
-
} }, dependencies: [SdAnchor, SdButton, NgIcon], styles: ["sd-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(--
|
|
112
|
+
} }, dependencies: [SdAnchor, SdButton, NgIcon], styles: ["sd-modal-select-button {\n display: flex;\n flex-direction: row;\n gap: var(--sd-gap-sm);\n position: relative;\n width: 100%;\n min-width: 3em;\n border: 1px solid var(--sd-bd-soft);\n border-radius: var(--sd-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--sd-gap-sm) var(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--sd-gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--sd-bd-hairline) !important;\n padding: var(--sd-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(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--sd-gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--sd-gap-default) !important;\n}"], encapsulation: 2 });
|
|
113
113
|
}
|
|
114
114
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModalSelectButton, [{
|
|
115
115
|
type: Component,
|
|
@@ -133,6 +133,6 @@ export class SdModalSelectButton {
|
|
|
133
133
|
"[attr.data-sd-size]": "size()",
|
|
134
134
|
"[attr.data-sd-inset]": "inset()",
|
|
135
135
|
"[attr.data-sd-disabled]": "disabled()",
|
|
136
|
-
}, styles: ["sd-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(--
|
|
136
|
+
}, styles: ["sd-modal-select-button {\n display: flex;\n flex-direction: row;\n gap: var(--sd-gap-sm);\n position: relative;\n width: 100%;\n min-width: 3em;\n border: 1px solid var(--sd-bd-soft);\n border-radius: var(--sd-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--sd-gap-sm) var(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-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(--sd-gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--sd-gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--sd-bd-hairline) !important;\n padding: var(--sd-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(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--sd-gap-xs) var(--sd-gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--sd-gap-default) var(--sd-gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--sd-gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--sd-gap-default) !important;\n}"] }]
|
|
137
137
|
}], () => [], { modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], modalOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalOptions", required: false }] }], searchIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchIcon", required: false }] }] }); })();
|
|
138
138
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModalSelectButton, { className: "SdModalSelectButton", filePath: "packages/angular/src/controls/button/sd-modal-select-button.ts", lineNumber: 148 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-checkbox.d.ts","sourceRoot":"","sources":["../../../src/controls/checkbox/sd-checkbox.ts"],"names":[],"mappings":";AAaA,
|
|
1
|
+
{"version":3,"file":"sd-checkbox.d.ts","sourceRoot":"","sources":["../../../src/controls/checkbox/sd-checkbox.ts"],"names":[],"mappings":";AAaA,qBAgQa,UAAU;IACrB,KAAK,+CAAgB;IACrB,WAAW,6CAAgB,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,EAAc;IAE/E,IAAI,8CAAsB;IAC1B,KAAK,qEAAiD;IACtD,QAAQ,qEAAiD;IAEzD,IAAI,+DAAwB;IAC5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,KAAK,wJAUD;IAEJ,YAAY,0DAAmB;;IAO/B,OAAO,CAAC,KAAK,EAAE,KAAK;IAYpB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA1C1B,UAAU;2CAAV,UAAU;CAsDtB"}
|
|
@@ -79,7 +79,7 @@ export class SdCheckbox {
|
|
|
79
79
|
i0.ɵɵconditional(!ctx.radio() ? 2 : 3);
|
|
80
80
|
i0.ɵɵadvance(2);
|
|
81
81
|
i0.ɵɵstyleMap(ctx.contentStyle());
|
|
82
|
-
} }, dependencies: [NgIcon], styles: ["sd-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(--
|
|
82
|
+
} }, dependencies: [NgIcon], styles: ["sd-checkbox {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-sm) * 2 + 2px);\n gap: var(--sd-gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--sd-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(--sd-font-size-default) + 2px);\n height: calc(var(--sd-font-size-default) + 2px);\n border: 1px solid var(--sd-bd-field);\n background-color: var(--sd-bg-field);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--sd-tx-primary-solid);\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(--sd-gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-primary-solid);\n background-color: var(--sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-gray);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-gray-solid);\n background-color: var(--sd-bg-gray-solid);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-gray-solid);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-blue-gray);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-blue-gray-solid);\n background-color: var(--sd-bg-blue-gray-solid);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-primary);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-primary-solid);\n background-color: var(--sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-primary-solid);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background-color: var(--sd-bg-secondary-subtle);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-secondary);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-secondary-solid);\n background-color: var(--sd-bg-secondary-solid);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-secondary-solid);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background-color: var(--sd-bg-info-subtle);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-info);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-info-solid);\n background-color: var(--sd-bg-info-solid);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-info-solid);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background-color: var(--sd-bg-success-subtle);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-success);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-success-solid);\n background-color: var(--sd-bg-success-solid);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-success-solid);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background-color: var(--sd-bg-warning-subtle);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-warning);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-warning-solid);\n background-color: var(--sd-bg-warning-solid);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-warning-solid);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background-color: var(--sd-bg-danger-subtle);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-danger);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-danger-solid);\n background-color: var(--sd-bg-danger-solid);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-danger-solid);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background-color: var(--sd-bg-control);\n border-color: var(--sd-bd-field);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-primary-solid);\n background-color: var(--sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--sd-gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background-color: var(--sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background-color: var(--sd-bg-field);\n border-color: var(--sd-bd-primary-solid);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2 + 2px);\n padding: var(--sd-gap-xs) var(--sd-gap-sm);\n gap: var(--sd-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(--sd-gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-default) * 2 + 2px);\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n gap: var(--sd-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(--sd-gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-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(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-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(--sd-font-size-default) * var(--sd-line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n color: var(--sd-tx-disabled) !important;\n pointer-events: none;\n}\nsd-checkbox[data-sd-disabled=true] > ._indicator_rect {\n background-color: var(--sd-bg-disabled) !important;\n border-color: var(--sd-bd-disabled) !important;\n}\nsd-checkbox[data-sd-disabled=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-disabled) !important;\n}"], encapsulation: 2 });
|
|
83
83
|
}
|
|
84
84
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCheckbox, [{
|
|
85
85
|
type: Component,
|
|
@@ -107,6 +107,6 @@ export class SdCheckbox {
|
|
|
107
107
|
"[attr.tabindex]": "'0'",
|
|
108
108
|
"(click)": "onClick($event)",
|
|
109
109
|
"(keydown)": "onKeydown($event)",
|
|
110
|
-
}, styles: ["sd-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(--
|
|
110
|
+
}, styles: ["sd-checkbox {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-sm) * 2 + 2px);\n gap: var(--sd-gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--sd-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(--sd-font-size-default) + 2px);\n height: calc(var(--sd-font-size-default) + 2px);\n border: 1px solid var(--sd-bd-field);\n background-color: var(--sd-bg-field);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--sd-tx-primary-solid);\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(--sd-gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-primary-solid);\n background-color: var(--sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-gray);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-gray-solid);\n background-color: var(--sd-bg-gray-solid);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-gray-solid);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-blue-gray);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-blue-gray-solid);\n background-color: var(--sd-bg-blue-gray-solid);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-primary);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-primary-solid);\n background-color: var(--sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-primary-solid);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background-color: var(--sd-bg-secondary-subtle);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-secondary);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-secondary-solid);\n background-color: var(--sd-bg-secondary-solid);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-secondary-solid);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background-color: var(--sd-bg-info-subtle);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-info);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-info-solid);\n background-color: var(--sd-bg-info-solid);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-info-solid);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background-color: var(--sd-bg-success-subtle);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-success);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-success-solid);\n background-color: var(--sd-bg-success-solid);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-success-solid);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background-color: var(--sd-bg-warning-subtle);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-warning);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-warning-solid);\n background-color: var(--sd-bg-warning-solid);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-warning-solid);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background-color: var(--sd-bg-danger-subtle);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-danger);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-danger-solid);\n background-color: var(--sd-bg-danger-solid);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-danger-solid);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background-color: var(--sd-bg-control);\n border-color: var(--sd-bd-field);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--sd-bd-primary-solid);\n background-color: var(--sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--sd-focus-ring-color);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--sd-gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background-color: var(--sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background-color: var(--sd-bg-field);\n border-color: var(--sd-bd-primary-solid);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2 + 2px);\n padding: var(--sd-gap-xs) var(--sd-gap-sm);\n gap: var(--sd-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(--sd-gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-default) * 2 + 2px);\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n gap: var(--sd-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(--sd-gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-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(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-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(--sd-font-size-default) * var(--sd-line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n color: var(--sd-tx-disabled) !important;\n pointer-events: none;\n}\nsd-checkbox[data-sd-disabled=true] > ._indicator_rect {\n background-color: var(--sd-bg-disabled) !important;\n border-color: var(--sd-bd-disabled) !important;\n}\nsd-checkbox[data-sd-disabled=true] > ._indicator_rect > ._indicator {\n color: var(--sd-tx-disabled) !important;\n}"] }]
|
|
111
111
|
}], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], canChangeFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "canChangeFn", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], radio: [{ type: i0.Input, args: [{ isSignal: true, alias: "radio", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }] }); })();
|
|
112
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCheckbox, { className: "SdCheckbox", filePath: "packages/angular/src/controls/checkbox/sd-checkbox.ts", lineNumber:
|
|
112
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCheckbox, { className: "SdCheckbox", filePath: "packages/angular/src/controls/checkbox/sd-checkbox.ts", lineNumber: 270 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-switch.d.ts","sourceRoot":"","sources":["../../../src/controls/checkbox/sd-switch.ts"],"names":[],"mappings":";AAUA,
|
|
1
|
+
{"version":3,"file":"sd-switch.d.ts","sourceRoot":"","sources":["../../../src/controls/checkbox/sd-switch.ts"],"names":[],"mappings":";AAUA,qBA0Ga,QAAQ;IACnB,KAAK,+CAAgB;IACrB,WAAW,6CAAgB,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,EAAc;IAE/E,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IAEtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;;IAMJ,OAAO,CAAC,KAAK,EAAE,KAAK;IAQpB,SAAS,CAAC,KAAK,EAAE,aAAa;yCAzBnB,QAAQ;2CAAR,QAAQ;CAiCpB"}
|
|
@@ -41,7 +41,7 @@ export class SdSwitch {
|
|
|
41
41
|
i0.ɵɵdomElementStart(0, "div");
|
|
42
42
|
i0.ɵɵdomElement(1, "div");
|
|
43
43
|
i0.ɵɵdomElementEnd();
|
|
44
|
-
} }, styles: ["sd-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(--
|
|
44
|
+
} }, styles: ["sd-switch {\n display: block;\n padding: var(--sd-gap-sm) 0;\n border: 1px solid transparent;\n vertical-align: top;\n cursor: pointer;\n}\nsd-switch > div {\n height: var(--sd-line-height);\n width: calc(var(--sd-line-height) * 2 - var(--sd-gap-xs));\n padding: calc(var(--sd-gap-xs) / 2);\n border-radius: calc(var(--sd-line-height) / 2);\n text-align: left;\n background-color: var(--sd-bg-track);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--sd-line-height) - var(--sd-gap-xs));\n height: calc(var(--sd-line-height) - var(--sd-gap-xs));\n border-radius: 100%;\n background-color: var(--sd-bg-control);\n transition: transform var(--sd-animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background-color: var(--sd-bg-success-solid);\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(--sd-gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--sd-gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background-color: var(--sd-bg-gray-solid);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background-color: var(--sd-bg-blue-gray-solid);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background-color: var(--sd-bg-primary-solid);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n background-color: var(--sd-bg-secondary-solid);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background-color: var(--sd-bg-info-solid);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background-color: var(--sd-bg-success-solid);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background-color: var(--sd-bg-warning-solid);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background-color: var(--sd-bg-danger-solid);\n}\nsd-switch[data-sd-disabled=true] > div {\n background-color: var(--sd-bg-disabled) !important;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background-color: var(--sd-bg-gray-solid);\n}"], encapsulation: 2 });
|
|
45
45
|
}
|
|
46
46
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSwitch, [{
|
|
47
47
|
type: Component,
|
|
@@ -59,6 +59,6 @@ export class SdSwitch {
|
|
|
59
59
|
<div>
|
|
60
60
|
<div></div>
|
|
61
61
|
</div>
|
|
62
|
-
`, styles: ["sd-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(--
|
|
62
|
+
`, styles: ["sd-switch {\n display: block;\n padding: var(--sd-gap-sm) 0;\n border: 1px solid transparent;\n vertical-align: top;\n cursor: pointer;\n}\nsd-switch > div {\n height: var(--sd-line-height);\n width: calc(var(--sd-line-height) * 2 - var(--sd-gap-xs));\n padding: calc(var(--sd-gap-xs) / 2);\n border-radius: calc(var(--sd-line-height) / 2);\n text-align: left;\n background-color: var(--sd-bg-track);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--sd-line-height) - var(--sd-gap-xs));\n height: calc(var(--sd-line-height) - var(--sd-gap-xs));\n border-radius: 100%;\n background-color: var(--sd-bg-control);\n transition: transform var(--sd-animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background-color: var(--sd-bg-success-solid);\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(--sd-gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--sd-gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background-color: var(--sd-bg-gray-solid);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background-color: var(--sd-bg-blue-gray-solid);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background-color: var(--sd-bg-primary-solid);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n background-color: var(--sd-bg-secondary-solid);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background-color: var(--sd-bg-info-solid);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background-color: var(--sd-bg-success-solid);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background-color: var(--sd-bg-warning-solid);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background-color: var(--sd-bg-danger-solid);\n}\nsd-switch[data-sd-disabled=true] > div {\n background-color: var(--sd-bg-disabled) !important;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background-color: var(--sd-bg-gray-solid);\n}"] }]
|
|
63
63
|
}], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], canChangeFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "canChangeFn", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] }); })();
|
|
64
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSwitch, { className: "SdSwitch", filePath: "packages/angular/src/controls/checkbox/sd-switch.ts", lineNumber:
|
|
64
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSwitch, { className: "SdSwitch", filePath: "packages/angular/src/controls/checkbox/sd-switch.ts", lineNumber: 117 }); })();
|
|
@@ -4,7 +4,7 @@ export declare class SdCollapseIcon {
|
|
|
4
4
|
open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
5
5
|
openRotate: import("@angular/core").InputSignalWithTransform<number, unknown>;
|
|
6
6
|
transformStyle: import("@angular/core").Signal<string>;
|
|
7
|
-
transitionStyle: import("@angular/core").Signal<"transform var(--animation-duration) ease-out" | "transform var(--animation-duration) ease-in">;
|
|
7
|
+
transitionStyle: import("@angular/core").Signal<"transform var(--sd-animation-duration) ease-out" | "transform var(--sd-animation-duration) ease-in">;
|
|
8
8
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdCollapseIcon, never>;
|
|
9
9
|
static ɵcmp: i0.ɵɵComponentDeclaration<SdCollapseIcon, "sd-collapse-icon", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "openRotate": { "alias": "openRotate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
10
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-collapse-icon.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse-icon.ts"],"names":[],"mappings":";AAYA,qBAyBa,cAAc;IACzB,IAAI,8CAA4B;IAChC,IAAI,qEAAiD;IACrD,UAAU,oEAA6C;IAEvD,cAAc,yCAEX;IAEH,eAAe,
|
|
1
|
+
{"version":3,"file":"sd-collapse-icon.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse-icon.ts"],"names":[],"mappings":";AAYA,qBAyBa,cAAc;IACzB,IAAI,8CAA4B;IAChC,IAAI,qEAAiD;IACrD,UAAU,oEAA6C;IAEvD,cAAc,yCAEX;IAEH,eAAe,uIAIZ;yCAbQ,cAAc;2CAAd,cAAc;CAc1B"}
|
|
@@ -13,8 +13,8 @@ export class SdCollapseIcon {
|
|
|
13
13
|
...(ngDevMode ? [{ debugName: "transformStyle" }] : /* istanbul ignore next */ []));
|
|
14
14
|
transitionStyle = computed(() => {
|
|
15
15
|
return this.open()
|
|
16
|
-
? "transform var(--animation-duration) ease-out"
|
|
17
|
-
: "transform var(--animation-duration) ease-in";
|
|
16
|
+
? "transform var(--sd-animation-duration) ease-out"
|
|
17
|
+
: "transform var(--sd-animation-duration) ease-in";
|
|
18
18
|
}, /* @ts-ignore */
|
|
19
19
|
...(ngDevMode ? [{ debugName: "transitionStyle" }] : /* istanbul ignore next */ []));
|
|
20
20
|
static ɵfac = function SdCollapseIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCollapseIcon)(); };
|
|
@@ -6,7 +6,7 @@ export declare class SdCollapse {
|
|
|
6
6
|
contentHeight: import("@angular/core").WritableSignal<number>;
|
|
7
7
|
private readonly _initialized;
|
|
8
8
|
contentMarginTop: import("@angular/core").Signal<string>;
|
|
9
|
-
contentTransition: import("@angular/core").Signal<"" | "margin-top var(--animation-duration) ease-out" | "margin-top var(--animation-duration) ease-in">;
|
|
9
|
+
contentTransition: import("@angular/core").Signal<"" | "margin-top var(--sd-animation-duration) ease-out" | "margin-top var(--sd-animation-duration) ease-in">;
|
|
10
10
|
constructor();
|
|
11
11
|
onContentResize(event: SdResizeEvent): void;
|
|
12
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdCollapse, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-collapse.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse.ts"],"names":[],"mappings":"AAaA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;;AAEpF,qBA0Ba,UAAU;IACrB,IAAI,qEAAiD;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA4D;IAE1F,aAAa,iDAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiB;IAE9C,gBAAgB,yCAEb;IAEH,iBAAiB,
|
|
1
|
+
{"version":3,"file":"sd-collapse.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse.ts"],"names":[],"mappings":"AAaA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;;AAEpF,qBA0Ba,UAAU;IACrB,IAAI,qEAAiD;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA4D;IAE1F,aAAa,iDAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiB;IAE9C,gBAAgB,yCAEb;IAEH,iBAAiB,8IAKd;;IAiBH,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCAnChC,UAAU;2CAAV,UAAU;CAwCtB"}
|
|
@@ -19,8 +19,8 @@ export class SdCollapse {
|
|
|
19
19
|
if (!this._initialized())
|
|
20
20
|
return "";
|
|
21
21
|
return this.open()
|
|
22
|
-
? "margin-top var(--animation-duration) ease-out"
|
|
23
|
-
: "margin-top var(--animation-duration) ease-in";
|
|
22
|
+
? "margin-top var(--sd-animation-duration) ease-out"
|
|
23
|
+
: "margin-top var(--sd-animation-duration) ease-in";
|
|
24
24
|
}, /* @ts-ignore */
|
|
25
25
|
...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
|
|
26
26
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-dropdown-popup.d.ts","sourceRoot":"","sources":["../../../src/controls/dropdown/sd-dropdown-popup.ts"],"names":[],"mappings":";AAWA,qBA6Ea,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"sd-dropdown-popup.d.ts","sourceRoot":"","sources":["../../../src/controls/dropdown/sd-dropdown-popup.ts"],"names":[],"mappings":";AAWA,qBA6Ea,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAoD;IACnF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,OAAO,CAAS;IAExB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAIrC,QAAQ,IAAI,IAAI;yCATL,eAAe;2CAAf,eAAe;CAqB3B"}
|
|
@@ -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: ["sd-dropdown-popup {\n position: fixed;\n z-index: var(--z-
|
|
36
|
+
} }, dependencies: [SdResizeDirective], styles: ["sd-dropdown-popup {\n position: fixed;\n z-index: var(--sd-z-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--sd-animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background-color: var(--sd-bg-overlay);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--sd-shadow-size)) calc(4 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n overflow: hidden;\n border-radius: var(--sd-radius-default);\n border: 1px solid var(--sd-dropdown-bd);\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(--sd-focus-ring-color);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--sd-bd-strong);\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(--sd-radius-default) var(--sd-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--sd-animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--sd-shadow-size)) calc(8 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\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,
|
|
@@ -43,6 +43,6 @@ export class SdDropdownPopup {
|
|
|
43
43
|
<div (sdResize)="onResize()">
|
|
44
44
|
<ng-content></ng-content>
|
|
45
45
|
</div>
|
|
46
|
-
`, styles: ["sd-dropdown-popup {\n position: fixed;\n z-index: var(--z-
|
|
46
|
+
`, styles: ["sd-dropdown-popup {\n position: fixed;\n z-index: var(--sd-z-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--sd-animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background-color: var(--sd-bg-overlay);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--sd-shadow-size)) calc(4 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n overflow: hidden;\n border-radius: var(--sd-radius-default);\n border: 1px solid var(--sd-dropdown-bd);\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(--sd-focus-ring-color);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--sd-bd-strong);\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(--sd-radius-default) var(--sd-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--sd-animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--sd-shadow-size)) calc(8 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n}\n\n@keyframes sd-dropdown-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}"] }]
|
|
47
47
|
}], null, null); })();
|
|
48
48
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDropdownPopup, { className: "SdDropdownPopup", filePath: "packages/angular/src/controls/dropdown/sd-dropdown-popup.ts", lineNumber: 89 }); })();
|
|
@@ -38,7 +38,7 @@ export class SdDropdown {
|
|
|
38
38
|
const backdrop = document.createElement("div");
|
|
39
39
|
backdrop.setAttribute("data-sd-dropdown-backdrop", "");
|
|
40
40
|
backdrop.style.cssText =
|
|
41
|
-
"position:fixed;inset:0;background:var(--busy-overlay
|
|
41
|
+
"position:fixed;inset:0;background-color:var(--sd-bg-busy-overlay);z-index:var(--sd-z-dropdown)";
|
|
42
42
|
backdrop.addEventListener("click", () => {
|
|
43
43
|
this._closePopup();
|
|
44
44
|
});
|