@simplysm/angular 14.0.100 → 14.0.102
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.d.ts.map +1 -1
- package/dist/controls/checkbox/sd-checkbox.js +3 -3
- package/dist/controls/checkbox/sd-switch.js +2 -2
- package/dist/controls/collapse/sd-collapse-icon.d.ts +1 -1
- package/dist/controls/collapse/sd-collapse-icon.d.ts.map +1 -1
- package/dist/controls/collapse/sd-collapse-icon.js +3 -1
- package/dist/controls/collapse/sd-collapse.d.ts +1 -1
- package/dist/controls/collapse/sd-collapse.d.ts.map +1 -1
- package/dist/controls/collapse/sd-collapse.js +3 -1
- 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.d.ts.map +1 -1
- package/dist/controls/input/sd-textarea.js +3 -3
- package/dist/controls/input/sd-textfield.d.ts +2 -0
- package/dist/controls/input/sd-textfield.d.ts.map +1 -1
- package/dist/controls/input/sd-textfield.js +44 -16
- package/dist/controls/list/sd-list-item.js +2 -2
- package/dist/controls/select/sd-select-button.js +2 -2
- package/dist/controls/select/sd-select-item.d.ts.map +1 -1
- package/dist/controls/select/sd-select-item.js +3 -3
- package/dist/controls/select/sd-select.d.ts.map +1 -1
- package/dist/controls/select/sd-select.js +3 -3
- package/dist/core/busy/sd-busy-container.js +2 -2
- package/dist/core/directive-input-signals.d.ts +0 -9
- package/dist/core/directive-input-signals.d.ts.map +1 -1
- package/dist/core/modal/sd-modal.js +2 -2
- package/dist/core/provideSdAngular.d.ts.map +1 -1
- package/dist/core/provideSdAngular.js +12 -0
- package/dist/core/ripple/setupRipple.js +1 -1
- package/dist/core/toast/sd-toast-container.js +2 -2
- package/dist/core/toast/sd-toast.js +2 -2
- package/dist/data/crud/sd-base-container.js +4 -4
- package/dist/data/crud/sd-crud-list.d.ts +4 -2
- package/dist/data/crud/sd-crud-list.d.ts.map +1 -1
- package/dist/data/crud/sd-crud-list.js +60 -58
- package/dist/data/kanban/sd-kanban-board.js +2 -2
- package/dist/data/kanban/sd-kanban-lane.js +2 -2
- package/dist/data/kanban/sd-kanban.js +2 -2
- package/dist/data/sheet/sd-sheet.d.ts.map +1 -1
- package/dist/data/sheet/sd-sheet.js +3 -3
- package/dist/features/editor/sd-tiptap-editor.d.ts.map +1 -1
- package/dist/features/editor/sd-tiptap-editor.js +3 -3
- package/dist/features/theme/sd-theme-provider.d.ts +1 -0
- package/dist/features/theme/sd-theme-provider.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-provider.js +5 -0
- package/dist/features/theme/sd-theme-selector.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-selector.js +14 -2
- 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/dist/layout/topbar/sd-topbar.js +2 -2
- package/package.json +5 -5
- package/scss/commons/_colors.scss +326 -0
- package/scss/commons/_mixins.scss +129 -129
- package/scss/commons/_theme-variables.scss +8 -1
- package/scss/commons/_variables.scss +37 -33
- package/scss/controls/_card.scss +1 -1
- package/scss/styles.scss +3 -0
- package/scss/themes/_blueprint-surfaces.scss +89 -0
- package/scss/themes/_variables-blueprint.scss +95 -0
- package/scss/themes/_variables-dark.scss +9 -22
- package/src/controls/button/sd-button.ts +2 -2
- package/src/controls/checkbox/sd-checkbox.ts +13 -11
- package/src/controls/collapse/sd-collapse-icon.ts +3 -1
- package/src/controls/collapse/sd-collapse.ts +3 -1
- package/src/controls/dropdown/sd-dropdown-popup.ts +2 -2
- package/src/controls/input/sd-textarea.ts +5 -0
- package/src/controls/input/sd-textfield.ts +40 -4
- package/src/controls/list/sd-list-item.ts +5 -5
- package/src/controls/select/sd-select-button.ts +1 -1
- package/src/controls/select/sd-select-item.ts +4 -3
- package/src/controls/select/sd-select.ts +2 -1
- package/src/core/busy/sd-busy-container.ts +3 -3
- package/src/core/directive-input-signals.ts +0 -9
- package/src/core/provideSdAngular.ts +14 -0
- package/src/core/ripple/setupRipple.ts +1 -1
- package/src/data/crud/sd-base-container.ts +3 -3
- package/src/data/crud/sd-crud-list.ts +24 -22
- package/src/data/kanban/sd-kanban-lane.ts +1 -1
- package/src/data/kanban/sd-kanban.ts +1 -1
- package/src/data/sheet/sd-sheet.ts +4 -3
- package/src/features/editor/sd-tiptap-editor.ts +1 -0
- package/src/features/theme/sd-theme-provider.ts +7 -0
- package/src/features/theme/sd-theme-selector.ts +4 -0
- package/src/layout/sidebar/sd-sidebar-container.ts +3 -3
- package/src/layout/sidebar/sd-sidebar.ts +5 -5
- package/src/layout/topbar/sd-topbar.ts +1 -1
- package/styles.css +487 -103
|
@@ -17,7 +17,7 @@ export class SdAdditionalButton {
|
|
|
17
17
|
i0.ɵɵprojection(3, 1);
|
|
18
18
|
i0.ɵɵprojection(4, 2);
|
|
19
19
|
i0.ɵɵdomElementEnd();
|
|
20
|
-
} }, styles: ["
|
|
20
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-additional-button {\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-additional-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-additional-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-additional-button > ._button.gap-xs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-additional-button > ._button.gap-sm {\n gap: 0;\n }\n sd-additional-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-additional-button > ._button.gap-default {\n gap: 0;\n }\n sd-additional-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-additional-button > ._button.gap-lg {\n gap: 0;\n }\n sd-additional-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-additional-button > ._button.gap-xl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-additional-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-additional-button > ._button.gap-0 {\n gap: 0;\n }\n sd-additional-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-additional-button > ._button.gap-auto {\n gap: 0;\n }\n sd-additional-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-additional-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-additional-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
21
21
|
}
|
|
22
22
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdAdditionalButton, [{
|
|
23
23
|
type: Component,
|
|
@@ -33,6 +33,6 @@ export class SdAdditionalButton {
|
|
|
33
33
|
"class": "flex-row gap-sm",
|
|
34
34
|
"[attr.data-sd-size]": "size()",
|
|
35
35
|
"[attr.data-sd-inset]": "inset()",
|
|
36
|
-
}, styles: ["
|
|
36
|
+
}, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-additional-button {\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-additional-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-additional-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-additional-button > ._button.gap-xs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-additional-button > ._button.gap-sm {\n gap: 0;\n }\n sd-additional-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-additional-button > ._button.gap-default {\n gap: 0;\n }\n sd-additional-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-additional-button > ._button.gap-lg {\n gap: 0;\n }\n sd-additional-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-additional-button > ._button.gap-xl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-additional-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-additional-button > ._button.gap-0 {\n gap: 0;\n }\n sd-additional-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-additional-button > ._button.gap-auto {\n gap: 0;\n }\n sd-additional-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-additional-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-additional-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"] }]
|
|
37
37
|
}], null, { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
|
|
38
38
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdAdditionalButton, { className: "SdAdditionalButton", filePath: "packages/angular/src/controls/button/sd-additional-button.ts", lineNumber: 97 }); })();
|
|
@@ -10,7 +10,7 @@ export class SdAnchor {
|
|
|
10
10
|
} }, inputs: { disabled: [1, "disabled"], theme: [1, "theme"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdAnchor_Template(rf, ctx) { if (rf & 1) {
|
|
11
11
|
i0.ɵɵprojectionDef();
|
|
12
12
|
i0.ɵɵprojection(0);
|
|
13
|
-
} }, styles: ["
|
|
13
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--theme-gray-default);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--theme-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--theme-blue-gray-default);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--theme-blue-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--theme-primary-default);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--theme-primary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=secondary] {\n color: var(--theme-secondary-default);\n}\nsd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=secondary]:active {\n color: var(--theme-secondary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--theme-info-default);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--theme-info-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--theme-success-default);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--theme-success-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--theme-warning-default);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--theme-warning-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--theme-danger-default);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--theme-danger-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
14
14
|
}
|
|
15
15
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdAnchor, [{
|
|
16
16
|
type: Component,
|
|
@@ -20,6 +20,6 @@ export class SdAnchor {
|
|
|
20
20
|
"[attr.data-sd-theme]": "theme()",
|
|
21
21
|
"[attr.data-sd-disabled]": "disabled()",
|
|
22
22
|
"[attr.tabindex]": "disabled() ? undefined : 0",
|
|
23
|
-
}, styles: ["
|
|
23
|
+
}, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--theme-gray-default);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--theme-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--theme-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--theme-blue-gray-default);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--theme-blue-gray-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--theme-blue-gray-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--theme-primary-default);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--theme-primary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--theme-primary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=secondary] {\n color: var(--theme-secondary-default);\n}\nsd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=secondary]:active {\n color: var(--theme-secondary-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=secondary]:hover {\n color: var(--theme-secondary-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--theme-info-default);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--theme-info-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--theme-info-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--theme-success-default);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--theme-success-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--theme-success-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--theme-warning-default);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--theme-warning-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--theme-warning-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--theme-danger-default);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-darker);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--theme-danger-default);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--theme-danger-default);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"] }]
|
|
24
24
|
}], null, { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }] }); })();
|
|
25
25
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdAnchor, { className: "SdAnchor", filePath: "packages/angular/src/controls/button/sd-anchor.ts", lineNumber: 62 }); })();
|
|
@@ -23,7 +23,7 @@ export class SdButton {
|
|
|
23
23
|
i0.ɵɵstyleMap(ctx.buttonStyle());
|
|
24
24
|
i0.ɵɵclassMap(ctx.buttonClass());
|
|
25
25
|
i0.ɵɵproperty("type", ctx.type())("disabled", ctx.disabled())("sdRipple", !ctx.disabled());
|
|
26
|
-
} }, 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(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-dark);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-dark);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-dark);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-dark);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-dark);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-dark);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-dark);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
26
|
+
} }, dependencies: [SdRipple], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--theme-primary-default);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-dark);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-dark);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-dark);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-dark);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-dark);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-dark);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-dark);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
27
27
|
}
|
|
28
28
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdButton, [{
|
|
29
29
|
type: Component,
|
|
@@ -44,6 +44,6 @@ export class SdButton {
|
|
|
44
44
|
"[attr.data-sd-size]": "size()",
|
|
45
45
|
"[attr.data-sd-inset]": "inset()",
|
|
46
46
|
"[attr.data-sd-disabled]": "disabled()",
|
|
47
|
-
}, 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(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s 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}"] }]
|
|
47
|
+
}, 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}"] }]
|
|
48
48
|
}], 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 }] }] }); })();
|
|
49
49
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber: 185 }); })();
|
|
@@ -102,7 +102,7 @@ export class SdModalSelectButton {
|
|
|
102
102
|
i0.ɵɵconditional(!ctx.disabled() && !ctx.required() && ctx._hasValue() ? 3 : -1);
|
|
103
103
|
i0.ɵɵadvance();
|
|
104
104
|
i0.ɵɵconditional(!ctx.disabled() ? 4 : -1);
|
|
105
|
-
} }, dependencies: [SdAnchor, SdButton, NgIcon], styles: ["
|
|
105
|
+
} }, dependencies: [SdAnchor, SdButton, NgIcon], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-modal-select-button {\n display: flex;\n flex-direction: row;\n gap: var(--gap-sm);\n position: relative;\n width: 100%;\n min-width: 3em;\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal-select-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-modal-select-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-modal-select-button > ._button.gap-xs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-modal-select-button > ._button.gap-sm {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-modal-select-button > ._button.gap-default {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-modal-select-button > ._button.gap-lg {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-modal-select-button > ._button.gap-xl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-modal-select-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-modal-select-button > ._button.gap-0 {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-modal-select-button > ._button.gap-auto {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-modal-select-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-modal-select-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
106
106
|
}
|
|
107
107
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModalSelectButton, [{
|
|
108
108
|
type: Component,
|
|
@@ -126,6 +126,6 @@ export class SdModalSelectButton {
|
|
|
126
126
|
"[attr.data-sd-size]": "size()",
|
|
127
127
|
"[attr.data-sd-inset]": "inset()",
|
|
128
128
|
"[attr.data-sd-disabled]": "disabled()",
|
|
129
|
-
}, styles: ["
|
|
129
|
+
}, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-modal-select-button {\n display: flex;\n flex-direction: row;\n gap: var(--gap-sm);\n position: relative;\n width: 100%;\n min-width: 3em;\n border: 1px solid var(--trans-light);\n border-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal-select-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-modal-select-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-modal-select-button > ._button.gap-xs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-modal-select-button > ._button.gap-sm {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-modal-select-button > ._button.gap-default {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-modal-select-button > ._button.gap-lg {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-modal-select-button > ._button.gap-xl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-modal-select-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-modal-select-button > ._button.gap-0 {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-modal-select-button > ._button.gap-auto {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--trans-lighter) !important;\n padding: var(--gap-sm) !important;\n height: 100%;\n}\nsd-modal-select-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-modal-select-button[data-sd-size=sm] > ._content {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--gap-xs) var(--gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--gap-default) !important;\n}"] }]
|
|
130
130
|
}], () => [], { 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 }] }] }); })();
|
|
131
131
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModalSelectButton, { className: "SdModalSelectButton", filePath: "packages/angular/src/controls/button/sd-modal-select-button.ts", lineNumber: 148 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-checkbox.d.ts","sourceRoot":"","sources":["../../../src/controls/checkbox/sd-checkbox.ts"],"names":[],"mappings":";AAaA,
|
|
1
|
+
{"version":3,"file":"sd-checkbox.d.ts","sourceRoot":"","sources":["../../../src/controls/checkbox/sd-checkbox.ts"],"names":[],"mappings":";AAaA,qBAmPa,UAAU;IACrB,KAAK,+CAAgB;IACrB,WAAW,6CAAgB,OAAO,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,EAAc;IAE/E,IAAI,8CAAsB;IAC1B,KAAK,qEAAiD;IACtD,QAAQ,qEAAiD;IAEzD,IAAI,+DAAwB;IAC5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,KAAK,wJAUD;IAEJ,YAAY,0DAAmB;;IAO/B,OAAO,CAAC,KAAK,EAAE,KAAK;IAYpB,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA1C1B,UAAU;2CAAV,UAAU;CAsDtB"}
|
|
@@ -73,7 +73,7 @@ export class SdCheckbox {
|
|
|
73
73
|
i0.ɵɵconditional(!ctx.radio() ? 2 : 3);
|
|
74
74
|
i0.ɵɵadvance(2);
|
|
75
75
|
i0.ɵɵstyleMap(ctx.contentStyle());
|
|
76
|
-
} }, 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(--trans-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 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]:focus > ._indicator_rect {\n border-color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\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=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--text-trans-default);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n padding: var(--gap-xs) var(--gap-sm);\n gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
76
|
+
} }, dependencies: [NgIcon], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-checkbox {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2 + 2px);\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--gap-sm);\n }\n}\nsd-checkbox > ._indicator_rect {\n display: inline-block;\n vertical-align: -0.125em;\n user-select: none;\n width: calc(var(--font-size-default) + 2px);\n height: calc(var(--font-size-default) + 2px);\n border: 1px solid var(--border-color-light);\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--text-trans-rev-default);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n vertical-align: top;\n stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n display: inline-block;\n vertical-align: top;\n padding-left: var(--gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background: var(--theme-gray-lightest);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-gray-default);\n background: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--theme-gray-dark);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background: var(--theme-blue-gray-lightest);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n background: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-dark);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background: var(--theme-primary-lightest);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n}\nsd-checkbox[data-sd-theme=secondary] > ._indicator_rect > ._indicator {\n color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n background: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=secondary]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-dark);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background: var(--theme-info-lightest);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-info-default);\n background: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--theme-info-dark);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background: var(--theme-success-lightest);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-success-default);\n background: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--theme-success-dark);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background: var(--theme-warning-lightest);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-warning-default);\n background: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--theme-warning-dark);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background: var(--theme-danger-lightest);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-danger-default);\n background: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--text-trans-rev-default);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--theme-danger-dark);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--theme-primary-default);\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-secondary-lightest);\n border-color: var(--theme-primary-dark);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2 + 2px);\n padding: var(--gap-xs) var(--gap-sm);\n gap: var(--gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2 + 2px);\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--font-size-default) * var(--line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n opacity: 0.3;\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
77
77
|
}
|
|
78
78
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCheckbox, [{
|
|
79
79
|
type: Component,
|
|
@@ -101,6 +101,6 @@ export class SdCheckbox {
|
|
|
101
101
|
"[attr.tabindex]": "'0'",
|
|
102
102
|
"(click)": "onClick($event)",
|
|
103
103
|
"(keydown)": "onKeydown($event)",
|
|
104
|
-
}, 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(--trans-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 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]:focus > ._indicator_rect {\n border-color: var(--theme-gray-default);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-blue-gray-default);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-primary-default);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-secondary-default);\n}\nsd-checkbox[data-sd-theme=secondary][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-info-default);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-success-default);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-warning-default);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\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=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]:focus > ._indicator_rect {\n border-color: var(--theme-danger-default);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\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=white] > ._indicator_rect {\n background: var(--control-color);\n border-color: var(--text-trans-lightest);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--text-trans-default);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n background: var(--theme-primary-default);\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}"] }]
|
|
104
|
+
}, 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 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}"] }]
|
|
105
105
|
}], () => [], { 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 }] }] }); })();
|
|
106
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCheckbox, { className: "SdCheckbox", filePath: "packages/angular/src/controls/checkbox/sd-checkbox.ts", lineNumber:
|
|
106
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdCheckbox, { className: "SdCheckbox", filePath: "packages/angular/src/controls/checkbox/sd-checkbox.ts", lineNumber: 257 }); })();
|
|
@@ -37,7 +37,7 @@ export class SdSwitch {
|
|
|
37
37
|
i0.ɵɵdomElementStart(0, "div");
|
|
38
38
|
i0.ɵɵdomElement(1, "div");
|
|
39
39
|
i0.ɵɵdomElementEnd();
|
|
40
|
-
} }, styles: ["
|
|
40
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-switch {\n display: block;\n padding: var(--gap-sm) 0;\n border: 1px solid transparent;\n vertical-align: top;\n cursor: pointer;\n}\nsd-switch > div {\n height: var(--line-height);\n width: calc(var(--line-height) * 2 - var(--gap-xs));\n padding: calc(var(--gap-xs) / 2);\n border-radius: calc(var(--line-height) / 2);\n text-align: left;\n background: var(--theme-gray-lighter);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--line-height) - var(--gap-xs));\n height: calc(var(--line-height) - var(--gap-xs));\n border-radius: 100%;\n background: var(--control-color);\n transition: transform var(--animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-on=true] > div > div {\n transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n display: inline-block;\n padding: 0;\n border: none;\n}\nsd-switch[data-sd-inset=true] {\n border: none;\n}\nsd-switch[data-sd-size=sm] {\n padding: var(--gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background: var(--theme-gray-default);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background: var(--theme-blue-gray-default);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background: var(--theme-primary-default);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n background: var(--theme-secondary-default);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background: var(--theme-info-default);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background: var(--theme-warning-default);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background: var(--theme-danger-default);\n}\nsd-switch[data-sd-disabled=true] > div {\n opacity: 0.5;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background: var(--theme-gray-default);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
41
41
|
}
|
|
42
42
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSwitch, [{
|
|
43
43
|
type: Component,
|
|
@@ -55,6 +55,6 @@ export class SdSwitch {
|
|
|
55
55
|
<div>
|
|
56
56
|
<div></div>
|
|
57
57
|
</div>
|
|
58
|
-
`, styles: ["
|
|
58
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-switch {\n display: block;\n padding: var(--gap-sm) 0;\n border: 1px solid transparent;\n vertical-align: top;\n cursor: pointer;\n}\nsd-switch > div {\n height: var(--line-height);\n width: calc(var(--line-height) * 2 - var(--gap-xs));\n padding: calc(var(--gap-xs) / 2);\n border-radius: calc(var(--line-height) / 2);\n text-align: left;\n background: var(--theme-gray-lighter);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--line-height) - var(--gap-xs));\n height: calc(var(--line-height) - var(--gap-xs));\n border-radius: 100%;\n background: var(--control-color);\n transition: transform var(--animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-on=true] > div > div {\n transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n display: inline-block;\n padding: 0;\n border: none;\n}\nsd-switch[data-sd-inset=true] {\n border: none;\n}\nsd-switch[data-sd-size=sm] {\n padding: var(--gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background: var(--theme-gray-default);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background: var(--theme-blue-gray-default);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background: var(--theme-primary-default);\n}\nsd-switch[data-sd-theme=secondary][data-sd-on=true] > div {\n background: var(--theme-secondary-default);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background: var(--theme-info-default);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background: var(--theme-success-default);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background: var(--theme-warning-default);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background: var(--theme-danger-default);\n}\nsd-switch[data-sd-disabled=true] > div {\n opacity: 0.5;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background: var(--theme-gray-default);\n}"] }]
|
|
59
59
|
}], () => [], { 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 }] }] }); })();
|
|
60
60
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSwitch, { className: "SdSwitch", filePath: "packages/angular/src/controls/checkbox/sd-switch.ts", lineNumber: 118 }); })();
|
|
@@ -4,7 +4,7 @@ export declare class SdCollapseIcon {
|
|
|
4
4
|
open: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
5
5
|
openRotate: import("@angular/core").InputSignalWithTransform<number, unknown>;
|
|
6
6
|
transformStyle: import("@angular/core").Signal<string>;
|
|
7
|
-
transitionStyle: import("@angular/core").Signal<"transform
|
|
7
|
+
transitionStyle: import("@angular/core").Signal<"transform var(--animation-duration) ease-out" | "transform var(--animation-duration) ease-in">;
|
|
8
8
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdCollapseIcon, never>;
|
|
9
9
|
static ɵcmp: i0.ɵɵComponentDeclaration<SdCollapseIcon, "sd-collapse-icon", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "openRotate": { "alias": "openRotate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
10
10
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-collapse-icon.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse-icon.ts"],"names":[],"mappings":";AAYA,qBAyBa,cAAc;IACzB,IAAI,8CAA4B;IAChC,IAAI,qEAAiD;IACrD,UAAU,oEAA6C;IAEvD,cAAc,yCAEX;IAEH,eAAe,
|
|
1
|
+
{"version":3,"file":"sd-collapse-icon.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse-icon.ts"],"names":[],"mappings":";AAYA,qBAyBa,cAAc;IACzB,IAAI,8CAA4B;IAChC,IAAI,qEAAiD;IACrD,UAAU,oEAA6C;IAEvD,cAAc,yCAEX;IAEH,eAAe,iIAIZ;yCAbQ,cAAc;2CAAd,cAAc;CAc1B"}
|
|
@@ -10,7 +10,9 @@ export class SdCollapseIcon {
|
|
|
10
10
|
return this.open() ? `rotate(${this.openRotate()}deg)` : "";
|
|
11
11
|
}, ...(ngDevMode ? [{ debugName: "transformStyle" }] : /* istanbul ignore next */ []));
|
|
12
12
|
transitionStyle = computed(() => {
|
|
13
|
-
return this.open()
|
|
13
|
+
return this.open()
|
|
14
|
+
? "transform var(--animation-duration) ease-out"
|
|
15
|
+
: "transform var(--animation-duration) ease-in";
|
|
14
16
|
}, ...(ngDevMode ? [{ debugName: "transitionStyle" }] : /* istanbul ignore next */ []));
|
|
15
17
|
static ɵfac = function SdCollapseIcon_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdCollapseIcon)(); };
|
|
16
18
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdCollapseIcon, selectors: [["sd-collapse-icon"]], hostVars: 4, hostBindings: function SdCollapseIcon_HostBindings(rf, ctx) { if (rf & 2) {
|
|
@@ -6,7 +6,7 @@ export declare class SdCollapse {
|
|
|
6
6
|
contentHeight: import("@angular/core").WritableSignal<number>;
|
|
7
7
|
private readonly _initialized;
|
|
8
8
|
contentMarginTop: import("@angular/core").Signal<string>;
|
|
9
|
-
contentTransition: import("@angular/core").Signal<"" | "margin-top
|
|
9
|
+
contentTransition: import("@angular/core").Signal<"" | "margin-top var(--animation-duration) ease-out" | "margin-top var(--animation-duration) ease-in">;
|
|
10
10
|
constructor();
|
|
11
11
|
onContentResize(event: SdResizeEvent): void;
|
|
12
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdCollapse, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-collapse.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse.ts"],"names":[],"mappings":"AAaA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;;AAEpF,qBA0Ba,UAAU;IACrB,IAAI,qEAAiD;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA4D;IAE1F,aAAa,iDAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiB;IAE9C,gBAAgB,yCAEb;IAEH,iBAAiB,
|
|
1
|
+
{"version":3,"file":"sd-collapse.d.ts","sourceRoot":"","sources":["../../../src/controls/collapse/sd-collapse.ts"],"names":[],"mappings":"AAaA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,6BAA6B,CAAC;;AAEpF,qBA0Ba,UAAU;IACrB,IAAI,qEAAiD;IAErD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA4D;IAE1F,aAAa,iDAAa;IAE1B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAiB;IAE9C,gBAAgB,yCAEb;IAEH,iBAAiB,wIAKd;;IAiBH,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCAnChC,UAAU;2CAAV,UAAU;CAwCtB"}
|
|
@@ -14,7 +14,9 @@ export class SdCollapse {
|
|
|
14
14
|
contentTransition = computed(() => {
|
|
15
15
|
if (!this._initialized())
|
|
16
16
|
return "";
|
|
17
|
-
return this.open()
|
|
17
|
+
return this.open()
|
|
18
|
+
? "margin-top var(--animation-duration) ease-out"
|
|
19
|
+
: "margin-top var(--animation-duration) ease-in";
|
|
18
20
|
}, ...(ngDevMode ? [{ debugName: "contentTransition" }] : /* istanbul ignore next */ []));
|
|
19
21
|
constructor() {
|
|
20
22
|
afterNextRender(() => {
|
|
@@ -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: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-dropdown-popup {\n position: fixed;\n z-index: var(--z-index-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background: var(--control-color);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n overflow: hidden;\n border-radius: var(--border-radius-default);\n border: 1px solid var(--border-color-light);\n}\nsd-dropdown-popup > div {\n width: 100%;\n height: 100%;\n overflow: auto;\n white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n outline: 1px solid var(--theme-primary-default);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--border-color-default);\n }\n}\nsd-dropdown-popup[data-sd-mobile] {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n max-height: 80vh;\n border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--elevation-size)) calc(8 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n}\n\n@keyframes sd-dropdown-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}"], encapsulation: 2, changeDetection: 0 });
|
|
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: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-dropdown-popup {\n position: fixed;\n z-index: var(--z-index-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background: var(--control-color);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n overflow: hidden;\n border-radius: var(--border-radius-default);\n border: 1px solid var(--border-color-light);\n}\nsd-dropdown-popup > div {\n width: 100%;\n height: 100%;\n overflow: auto;\n white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n outline: 1px solid var(--theme-primary-default);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--border-color-default);\n }\n}\nsd-dropdown-popup[data-sd-mobile] {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n max-height: 80vh;\n border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--elevation-size)) calc(8 * 4 * var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter), 0 var(--elevation-size) calc(var(--elevation-size) * var(--elevation-blur-mult)) var(--trans-lighter);\n}\n\n@keyframes sd-dropdown-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}"] }]
|
|
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 }); })();
|
|
@@ -26,7 +26,7 @@ export class SdGap {
|
|
|
26
26
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdGap, selectors: [["sd-gap"]], hostVars: 10, hostBindings: function SdGap_HostBindings(rf, ctx) { if (rf & 2) {
|
|
27
27
|
i0.ɵɵattribute("data-sd-height", ctx.height())("data-sd-width", ctx.width());
|
|
28
28
|
i0.ɵɵstyleProp("height", ctx.heightPx(), "px")("width", ctx.widthPx(), "px")("width", ctx.widthEm(), "em")("display", ctx._displayStyle());
|
|
29
|
-
} }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["
|
|
29
|
+
} }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-gap[data-sd-height=xxs] {\n height: var(--gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n width: var(--gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n height: var(--gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n width: var(--gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n height: var(--gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n width: var(--gap-sm);\n}\nsd-gap[data-sd-height=default] {\n height: var(--gap-default);\n}\nsd-gap[data-sd-width=default] {\n width: var(--gap-default);\n}\nsd-gap[data-sd-height=lg] {\n height: var(--gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n width: var(--gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n height: var(--gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n width: var(--gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n height: var(--gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n width: var(--gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n height: var(--gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n width: var(--gap-0);\n}\nsd-gap[data-sd-height=auto] {\n height: var(--gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n width: var(--gap-auto);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
30
30
|
}
|
|
31
31
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdGap, [{
|
|
32
32
|
type: Component,
|
|
@@ -37,6 +37,6 @@ export class SdGap {
|
|
|
37
37
|
"[style.width.px]": "widthPx()",
|
|
38
38
|
"[style.width.em]": "widthEm()",
|
|
39
39
|
"[style.display]": "_displayStyle()",
|
|
40
|
-
}, styles: ["
|
|
40
|
+
}, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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}"] }]
|
|
41
41
|
}], 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 }] }] }); })();
|
|
42
42
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdGap, { className: "SdGap", filePath: "packages/angular/src/controls/gap/sd-gap.ts", lineNumber: 37 }); })();
|