@simplysm/angular 14.1.17 → 14.1.18
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.js +2 -2
- package/dist/controls/button/sd-button.js +2 -2
- package/dist/controls/button/sd-modal-select-button.js +2 -2
- package/dist/controls/checkbox/sd-checkbox.js +2 -2
- package/dist/controls/checkbox/sd-switch.js +2 -2
- package/dist/controls/dropdown/sd-dropdown-popup.js +2 -2
- package/dist/controls/gap/sd-gap.js +2 -2
- package/dist/controls/input/sd-date-range-picker.js +2 -2
- package/dist/controls/input/sd-range.js +2 -2
- package/dist/controls/input/sd-textarea.js +2 -2
- package/dist/controls/input/sd-textfield.js +2 -2
- package/dist/controls/select/sd-select-item.js +2 -2
- package/dist/core/busy/sd-busy-container.js +2 -2
- package/dist/core/modal/sd-modal.js +2 -2
- package/dist/core/provideSdAngular.d.ts.map +1 -1
- package/dist/core/provideSdAngular.js +0 -12
- package/dist/core/toast/sd-toast-container.js +2 -2
- package/dist/core/toast/sd-toast.js +2 -2
- package/dist/data/kanban/sd-kanban-board.js +2 -2
- package/dist/data/sheet/sd-sheet.js +2 -2
- package/dist/features/theme/sd-theme-provider.d.ts +0 -1
- package/dist/features/theme/sd-theme-provider.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-provider.js +1 -6
- package/dist/features/theme/sd-theme-selector.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-selector.js +4 -16
- package/dist/features/visual/sd-calendar.js +2 -2
- package/dist/features/visual/sd-label.js +2 -2
- package/dist/features/visual/sd-note.js +2 -2
- package/dist/features/visual/sd-progress.js +2 -2
- package/dist/layout/sidebar/sd-sidebar-container.js +2 -2
- package/dist/layout/sidebar/sd-sidebar.js +2 -2
- package/package.json +5 -5
- package/scss/commons/_colors.scss +247 -326
- package/scss/commons/_theme-variables.scss +2 -12
- package/scss/commons/_variables.scss +83 -56
- package/scss/themes/_variables-blueprint.scss +99 -95
- package/src/core/provideSdAngular.ts +0 -14
- package/src/features/theme/sd-theme-provider.ts +1 -7
- package/src/features/theme/sd-theme-selector.ts +0 -4
- package/styles.css +368 -485
- package/scss/themes/_variables-dark.scss +0 -53
|
@@ -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: ["
|
|
21
|
+
} }, styles: ["sd-additional-button {\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-additional-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-additional-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-additional-button > ._button.gap-xs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-additional-button > ._button.gap-sm {\n gap: 0;\n }\n sd-additional-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-additional-button > ._button.gap-default {\n gap: 0;\n }\n sd-additional-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-additional-button > ._button.gap-lg {\n gap: 0;\n }\n sd-additional-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-additional-button > ._button.gap-xl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-additional-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-additional-button > ._button.gap-0 {\n gap: 0;\n }\n sd-additional-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-additional-button > ._button.gap-auto {\n gap: 0;\n }\n sd-additional-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-additional-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-additional-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"], encapsulation: 2 });
|
|
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: ["
|
|
37
|
+
}, styles: ["sd-additional-button {\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-additional-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-additional-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-additional-button > ._button.gap-xs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-additional-button > ._button.gap-sm {\n gap: 0;\n }\n sd-additional-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-additional-button > ._button.gap-default {\n gap: 0;\n }\n sd-additional-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-additional-button > ._button.gap-lg {\n gap: 0;\n }\n sd-additional-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-additional-button > ._button.gap-xl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-additional-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-additional-button > ._button.gap-0 {\n gap: 0;\n }\n sd-additional-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-additional-button > ._button.gap-auto {\n gap: 0;\n }\n sd-additional-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-additional-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-additional-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"] }]
|
|
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 }); })();
|
|
@@ -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: ["
|
|
14
|
+
} }, styles: ["sd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--theme-gray-default);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--theme-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--theme-blue-gray-default);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--theme-blue-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--theme-primary-default);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--theme-primary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=secondary] {\n color: var(--theme-secondary-default);\n}\nsd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=secondary]:active {\n color: var(--theme-secondary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--theme-info-default);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--theme-info-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--theme-success-default);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--theme-success-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--theme-warning-default);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--theme-warning-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--theme-danger-default);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--theme-danger-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
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: ["
|
|
24
|
+
}, styles: ["sd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--theme-gray-default);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--theme-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--theme-blue-gray-default);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--theme-blue-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--theme-primary-default);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--theme-primary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=secondary] {\n color: var(--theme-secondary-default);\n}\nsd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=secondary]:active {\n color: var(--theme-secondary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--theme-info-default);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--theme-info-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--theme-success-default);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--theme-success-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--theme-warning-default);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--theme-warning-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--theme-danger-default);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--theme-danger-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"] }]
|
|
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
26
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdAnchor, { className: "SdAnchor", filePath: "packages/angular/src/controls/button/sd-anchor.ts", lineNumber: 62 }); })();
|
|
@@ -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: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--theme-primary-default);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-dark);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-dark);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-dark);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-dark);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-dark);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-dark);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-dark);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
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 });
|
|
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: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--theme-primary-default);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-dark);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-dark);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-dark);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-dark);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-dark);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-dark);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-dark);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"] }]
|
|
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}"] }]
|
|
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
54
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber: 185 }); })();
|
|
@@ -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: ["
|
|
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(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal-select-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-modal-select-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-modal-select-button > ._button.gap-xs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-modal-select-button > ._button.gap-sm {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-modal-select-button > ._button.gap-default {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-modal-select-button > ._button.gap-lg {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-modal-select-button > ._button.gap-xl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-modal-select-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-modal-select-button > ._button.gap-0 {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-modal-select-button > ._button.gap-auto {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-modal-select-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-modal-select-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"], encapsulation: 2 });
|
|
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: ["
|
|
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(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal-select-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-modal-select-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-modal-select-button > ._button.gap-xs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-modal-select-button > ._button.gap-sm {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-modal-select-button > ._button.gap-default {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-modal-select-button > ._button.gap-lg {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-modal-select-button > ._button.gap-xl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-modal-select-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-modal-select-button > ._button.gap-0 {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-modal-select-button > ._button.gap-auto {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-modal-select-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-modal-select-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"] }]
|
|
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 }); })();
|
|
@@ -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: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--gap-sm);\n }\n}\nsd-checkbox > ._indicator_rect {\n display: inline-block;\n vertical-align: -0.125em;\n user-select: none;\n width: calc(var(--font-size-default) + 2px);\n height: calc(var(--font-size-default) + 2px);\n border: 1px solid var(--border-color-light);\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n vertical-align: top;\n stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n display: inline-block;\n vertical-align: top;\n padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-gray-default);\n background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-info-default);\n background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-success-default);\n background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-warning-default);\n background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-danger-default);\n background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n padding: var(--gap-xs) var(--gap-sm);\n gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
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(--text-trans-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--gap-sm);\n }\n}\nsd-checkbox > ._indicator_rect {\n display: inline-block;\n vertical-align: -0.125em;\n user-select: none;\n width: calc(var(--font-size-default) + 2px);\n height: calc(var(--font-size-default) + 2px);\n border: 1px solid var(--border-color-light);\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n vertical-align: top;\n stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n display: inline-block;\n vertical-align: top;\n padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-gray-default);\n background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-info-default);\n background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-success-default);\n background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-warning-default);\n background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-danger-default);\n background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n padding: var(--gap-xs) var(--gap-sm);\n gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
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: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--gap-sm);\n }\n}\nsd-checkbox > ._indicator_rect {\n display: inline-block;\n vertical-align: -0.125em;\n user-select: none;\n width: calc(var(--font-size-default) + 2px);\n height: calc(var(--font-size-default) + 2px);\n border: 1px solid var(--border-color-light);\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n vertical-align: top;\n stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n display: inline-block;\n vertical-align: top;\n padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-gray-default);\n background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-info-default);\n background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-success-default);\n background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-warning-default);\n background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-danger-default);\n background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n padding: var(--gap-xs) var(--gap-sm);\n gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"] }]
|
|
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(--text-trans-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--gap-sm);\n }\n}\nsd-checkbox > ._indicator_rect {\n display: inline-block;\n vertical-align: -0.125em;\n user-select: none;\n width: calc(var(--font-size-default) + 2px);\n height: calc(var(--font-size-default) + 2px);\n border: 1px solid var(--border-color-light);\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n vertical-align: top;\n stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n display: inline-block;\n vertical-align: top;\n padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-gray-default);\n background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-info-default);\n background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-success-default);\n background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-warning-default);\n background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-danger-default);\n background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n padding: var(--gap-xs) var(--gap-sm);\n gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"] }]
|
|
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
112
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCheckbox, { className: "SdCheckbox", filePath: "packages/angular/src/controls/checkbox/sd-checkbox.ts", lineNumber: 258 }); })();
|
|
@@ -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: ["
|
|
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(--theme-gray-lighter);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--line-height) - var(--gap-xs));\n height: calc(var(--line-height) - var(--gap-xs));\n border-radius: 100%;\n background: var(--control-color);\n transition: transform var(--animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-on=true] > div > div {\n transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n display: inline-block;\n padding: 0;\n border: none;\n}\nsd-switch[data-sd-inset=true] {\n border: none;\n}\nsd-switch[data-sd-size=sm] {\n padding: var(--gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background: var(--theme-gray-default);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background: var(--theme-blue-gray-default);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background: var(--theme-primary-default);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n background: var(--theme-secondary-default);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background: var(--theme-info-default);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background: var(--theme-warning-default);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background: var(--theme-danger-default);\n}\nsd-switch[data-sd-disabled=true] > div {\n opacity: 0.5;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background: var(--theme-gray-default);\n}"], encapsulation: 2 });
|
|
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: ["
|
|
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(--theme-gray-lighter);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--line-height) - var(--gap-xs));\n height: calc(var(--line-height) - var(--gap-xs));\n border-radius: 100%;\n background: var(--control-color);\n transition: transform var(--animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-on=true] > div > div {\n transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n display: inline-block;\n padding: 0;\n border: none;\n}\nsd-switch[data-sd-inset=true] {\n border: none;\n}\nsd-switch[data-sd-size=sm] {\n padding: var(--gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background: var(--theme-gray-default);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background: var(--theme-blue-gray-default);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background: var(--theme-primary-default);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n background: var(--theme-secondary-default);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background: var(--theme-info-default);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background: var(--theme-warning-default);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background: var(--theme-danger-default);\n}\nsd-switch[data-sd-disabled=true] > div {\n opacity: 0.5;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background: var(--theme-gray-default);\n}"] }]
|
|
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
64
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSwitch, { className: "SdSwitch", filePath: "packages/angular/src/controls/checkbox/sd-switch.ts", lineNumber: 118 }); })();
|
|
@@ -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: ["
|
|
36
|
+
} }, dependencies: [SdResizeDirective], styles: ["sd-dropdown-popup {\n position: fixed;\n z-index: var(--z-index-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background: var(--control-color);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n overflow: hidden;\n border-radius: var(--border-radius-default);\n border: 1px solid var(--border-color-light);\n}\nsd-dropdown-popup > div {\n width: 100%;\n height: 100%;\n overflow: auto;\n white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n outline: 1px solid var(--theme-primary-default);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--border-color-default);\n }\n}\nsd-dropdown-popup[data-sd-mobile] {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n max-height: 80vh;\n border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--elevation-size)) calc(8 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n}\n\n@keyframes sd-dropdown-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}"], encapsulation: 2 });
|
|
37
37
|
}
|
|
38
38
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDropdownPopup, [{
|
|
39
39
|
type: Component,
|
|
@@ -43,6 +43,6 @@ export class SdDropdownPopup {
|
|
|
43
43
|
<div (sdResize)="onResize()">
|
|
44
44
|
<ng-content></ng-content>
|
|
45
45
|
</div>
|
|
46
|
-
`, styles: ["
|
|
46
|
+
`, styles: ["sd-dropdown-popup {\n position: fixed;\n z-index: var(--z-index-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background: var(--control-color);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n overflow: hidden;\n border-radius: var(--border-radius-default);\n border: 1px solid var(--border-color-light);\n}\nsd-dropdown-popup > div {\n width: 100%;\n height: 100%;\n overflow: auto;\n white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n outline: 1px solid var(--theme-primary-default);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--border-color-default);\n }\n}\nsd-dropdown-popup[data-sd-mobile] {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n max-height: 80vh;\n border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--elevation-size)) calc(8 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n}\n\n@keyframes sd-dropdown-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}"] }]
|
|
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 }); })();
|
|
@@ -32,7 +32,7 @@ export class SdGap {
|
|
|
32
32
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdGap, selectors: [["sd-gap"]], hostVars: 10, hostBindings: function SdGap_HostBindings(rf, ctx) { if (rf & 2) {
|
|
33
33
|
i0.ɵɵattribute("data-sd-height", ctx.height())("data-sd-width", ctx.width());
|
|
34
34
|
i0.ɵɵstyleProp("height", ctx.heightPx(), "px")("width", ctx.widthPx(), "px")("width", ctx.widthEm(), "em")("display", ctx._displayStyle());
|
|
35
|
-
} }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["
|
|
35
|
+
} }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["sd-gap[data-sd-height=xxs] {\n height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n width: var(--gap-auto);\n}"], encapsulation: 2 });
|
|
36
36
|
}
|
|
37
37
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdGap, [{
|
|
38
38
|
type: Component,
|
|
@@ -43,6 +43,6 @@ export class SdGap {
|
|
|
43
43
|
"[style.width.px]": "widthPx()",
|
|
44
44
|
"[style.width.em]": "widthEm()",
|
|
45
45
|
"[style.display]": "_displayStyle()",
|
|
46
|
-
}, styles: ["
|
|
46
|
+
}, styles: ["sd-gap[data-sd-height=xxs] {\n height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n width: var(--gap-auto);\n}"] }]
|
|
47
47
|
}], null, { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], widthEm: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthEm", required: false }] }] }); })();
|
|
48
48
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdGap, { className: "SdGap", filePath: "packages/angular/src/controls/gap/sd-gap.ts", lineNumber: 37 }); })();
|
|
@@ -95,7 +95,7 @@ export class SdDateRangePicker {
|
|
|
95
95
|
i0.ɵɵproperty("value", "\uBC94\uC704");
|
|
96
96
|
i0.ɵɵadvance(2);
|
|
97
97
|
i0.ɵɵconditional(ctx.periodType() === "\uBC94\uC704" ? 7 : 8);
|
|
98
|
-
} }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], styles: ["
|
|
98
|
+
} }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], styles: ["sd-date-range-picker {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-date-range-picker {\n gap: 0;\n }\n sd-date-range-picker > * + * {\n margin-left: var(--gap-sm);\n }\n sd-date-range-picker.gap-xxs {\n gap: 0;\n }\n sd-date-range-picker.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-date-range-picker.gap-xs {\n gap: 0;\n }\n sd-date-range-picker.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-date-range-picker.gap-sm {\n gap: 0;\n }\n sd-date-range-picker.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-date-range-picker.gap-default {\n gap: 0;\n }\n sd-date-range-picker.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-date-range-picker.gap-lg {\n gap: 0;\n }\n sd-date-range-picker.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-date-range-picker.gap-xl {\n gap: 0;\n }\n sd-date-range-picker.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-date-range-picker.gap-xxl {\n gap: 0;\n }\n sd-date-range-picker.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-date-range-picker.gap-0 {\n gap: 0;\n }\n sd-date-range-picker.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-date-range-picker.gap-auto {\n gap: 0;\n }\n sd-date-range-picker.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"], encapsulation: 2 });
|
|
99
99
|
}
|
|
100
100
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDateRangePicker, [{
|
|
101
101
|
type: Component,
|
|
@@ -126,6 +126,6 @@ export class SdDateRangePicker {
|
|
|
126
126
|
(valueChange)="handleFromDateChanged()"
|
|
127
127
|
/>
|
|
128
128
|
}
|
|
129
|
-
`, styles: ["
|
|
129
|
+
`, styles: ["sd-date-range-picker {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-date-range-picker {\n gap: 0;\n }\n sd-date-range-picker > * + * {\n margin-left: var(--gap-sm);\n }\n sd-date-range-picker.gap-xxs {\n gap: 0;\n }\n sd-date-range-picker.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-date-range-picker.gap-xs {\n gap: 0;\n }\n sd-date-range-picker.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-date-range-picker.gap-sm {\n gap: 0;\n }\n sd-date-range-picker.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-date-range-picker.gap-default {\n gap: 0;\n }\n sd-date-range-picker.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-date-range-picker.gap-lg {\n gap: 0;\n }\n sd-date-range-picker.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-date-range-picker.gap-xl {\n gap: 0;\n }\n sd-date-range-picker.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-date-range-picker.gap-xxl {\n gap: 0;\n }\n sd-date-range-picker.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-date-range-picker.gap-0 {\n gap: 0;\n }\n sd-date-range-picker.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-date-range-picker.gap-auto {\n gap: 0;\n }\n sd-date-range-picker.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"] }]
|
|
130
130
|
}], null, { periodType: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodType", required: false }] }, { type: i0.Output, args: ["periodTypeChange"] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }, { type: i0.Output, args: ["fromChange"] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }, { type: i0.Output, args: ["toChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] }); })();
|
|
131
131
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDateRangePicker, { className: "SdDateRangePicker", filePath: "packages/angular/src/controls/input/sd-date-range-picker.ts", lineNumber: 62 }); })();
|
|
@@ -31,7 +31,7 @@ export class SdRange {
|
|
|
31
31
|
i0.ɵɵproperty("type", ctx.type());
|
|
32
32
|
i0.ɵɵtwoWayProperty("value", ctx.to);
|
|
33
33
|
i0.ɵɵproperty("min", ctx.from())("required", ctx.required())("disabled", ctx.disabled())("inputStyle", ctx.inputStyle());
|
|
34
|
-
} }, dependencies: [SdTextfield], styles: ["
|
|
34
|
+
} }, dependencies: [SdTextfield], styles: ["sd-range {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-range {\n gap: 0;\n }\n sd-range > * + * {\n margin-left: var(--gap-sm);\n }\n sd-range.gap-xxs {\n gap: 0;\n }\n sd-range.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-range.gap-xs {\n gap: 0;\n }\n sd-range.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-range.gap-sm {\n gap: 0;\n }\n sd-range.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-range.gap-default {\n gap: 0;\n }\n sd-range.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-range.gap-lg {\n gap: 0;\n }\n sd-range.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-range.gap-xl {\n gap: 0;\n }\n sd-range.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-range.gap-xxl {\n gap: 0;\n }\n sd-range.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-range.gap-0 {\n gap: 0;\n }\n sd-range.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-range.gap-auto {\n gap: 0;\n }\n sd-range.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"], encapsulation: 2 });
|
|
35
35
|
}
|
|
36
36
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdRange, [{
|
|
37
37
|
type: Component,
|
|
@@ -52,6 +52,6 @@ export class SdRange {
|
|
|
52
52
|
[disabled]="disabled()"
|
|
53
53
|
[inputStyle]="inputStyle()"
|
|
54
54
|
/>
|
|
55
|
-
`, styles: ["
|
|
55
|
+
`, styles: ["sd-range {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-range {\n gap: 0;\n }\n sd-range > * + * {\n margin-left: var(--gap-sm);\n }\n sd-range.gap-xxs {\n gap: 0;\n }\n sd-range.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-range.gap-xs {\n gap: 0;\n }\n sd-range.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-range.gap-sm {\n gap: 0;\n }\n sd-range.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-range.gap-default {\n gap: 0;\n }\n sd-range.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-range.gap-lg {\n gap: 0;\n }\n sd-range.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-range.gap-xl {\n gap: 0;\n }\n sd-range.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-range.gap-xxl {\n gap: 0;\n }\n sd-range.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-range.gap-0 {\n gap: 0;\n }\n sd-range.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-range.gap-auto {\n gap: 0;\n }\n sd-range.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"] }]
|
|
56
56
|
}], null, { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }, { type: i0.Output, args: ["fromChange"] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }, { type: i0.Output, args: ["toChange"] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] }); })();
|
|
57
57
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdRange, { className: "SdRange", filePath: "packages/angular/src/controls/input/sd-range.ts", lineNumber: 49 }); })();
|