@simplysm/angular 14.2.7 → 14.2.9
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 +1 -1
- package/dist/controls/button/sd-anchor.js +1 -1
- package/dist/controls/button/sd-button.js +1 -1
- package/dist/controls/button/sd-modal-select-button.js +1 -1
- package/dist/controls/checkbox/sd-checkbox.js +1 -1
- package/dist/controls/checkbox/sd-switch.js +1 -1
- package/dist/controls/dropdown/sd-dropdown-popup.js +1 -1
- package/dist/controls/gap/sd-gap.js +1 -1
- package/dist/controls/input/sd-date-range-picker.js +1 -1
- package/dist/controls/input/sd-numpad.js +1 -1
- package/dist/controls/input/sd-range.js +1 -1
- package/dist/controls/input/sd-textarea.js +1 -1
- package/dist/controls/input/sd-textfield.js +1 -1
- package/dist/controls/list/sd-list-item.js +2 -2
- package/dist/controls/list/sd-list.js +1 -1
- package/dist/controls/pagination/sd-pagination.js +1 -1
- package/dist/controls/select/sd-select-button.js +1 -1
- package/dist/controls/select/sd-select-item.js +1 -1
- package/dist/controls/select/sd-select.js +1 -1
- package/dist/controls/tab/sd-tab-item.js +1 -1
- package/dist/controls/tab/sd-tab.js +1 -1
- package/dist/core/busy/sd-busy-container.js +1 -1
- package/dist/core/modal/injectDragResize.d.ts +10 -0
- package/dist/core/modal/injectDragResize.d.ts.map +1 -1
- package/dist/core/modal/injectDragResize.js +61 -16
- package/dist/core/modal/sd-modal.d.ts +6 -0
- package/dist/core/modal/sd-modal.d.ts.map +1 -1
- package/dist/core/modal/sd-modal.js +69 -21
- package/dist/core/modal/sd-modal.provider.d.ts.map +1 -1
- package/dist/core/toast/sd-toast-container.js +1 -1
- package/dist/core/toast/sd-toast.js +1 -1
- package/dist/data/kanban/sd-kanban-board.js +1 -1
- package/dist/data/kanban/sd-kanban-lane.js +1 -1
- package/dist/data/kanban/sd-kanban.js +1 -1
- package/dist/data/permission-table/sd-permission-table.js +1 -1
- package/dist/data/sheet/sd-sheet.js +1 -1
- package/dist/data/state-preset/sd-state-preset.js +1 -1
- package/dist/features/editor/sd-markdown-editor.js +1 -1
- package/dist/features/editor/sd-tiptap-editor.js +1 -1
- package/dist/features/visual/sd-calendar.js +1 -1
- package/dist/features/visual/sd-label.js +1 -1
- package/dist/features/visual/sd-note.js +1 -1
- package/dist/features/visual/sd-progress.js +1 -1
- package/dist/layout/sidebar/sd-sidebar-container.js +1 -1
- package/dist/layout/sidebar/sd-sidebar-user.js +1 -1
- package/dist/layout/sidebar/sd-sidebar.js +1 -1
- package/dist/layout/topbar/sd-topbar-menu.js +1 -1
- package/dist/layout/topbar/sd-topbar.js +1 -1
- package/package.json +24 -24
- package/src/core/modal/injectDragResize.ts +76 -17
- package/src/core/modal/sd-modal.provider.ts +1 -4
- package/src/core/modal/sd-modal.ts +72 -14
|
@@ -18,7 +18,7 @@ export class SdAdditionalButton {
|
|
|
18
18
|
i0.ɵɵprojection(3, 1);
|
|
19
19
|
i0.ɵɵprojection(4, 2);
|
|
20
20
|
i0.ɵɵdomElementEnd();
|
|
21
|
-
} }, styles: ["sd-additional-button {\n border: 1px solid var(
|
|
21
|
+
} }, styles: ["sd-additional-button {\n border: 1px solid var(--%NS%sd-bd-soft);\n border-radius: var(--%NS%sd-radius-default);\n overflow: hidden;\n}\nsd-additional-button > ._content {\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n}\nsd-additional-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-additional-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxs > * + * {\n margin-left: var(--%NS%sd-gap-xxs);\n }\n sd-additional-button > ._button.gap-xs {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xs > * + * {\n margin-left: var(--%NS%sd-gap-xs);\n }\n sd-additional-button > ._button.gap-sm {\n gap: 0;\n }\n sd-additional-button > ._button.gap-sm > * + * {\n margin-left: var(--%NS%sd-gap-sm);\n }\n sd-additional-button > ._button.gap-default {\n gap: 0;\n }\n sd-additional-button > ._button.gap-default > * + * {\n margin-left: var(--%NS%sd-gap-default);\n }\n sd-additional-button > ._button.gap-lg {\n gap: 0;\n }\n sd-additional-button > ._button.gap-lg > * + * {\n margin-left: var(--%NS%sd-gap-lg);\n }\n sd-additional-button > ._button.gap-xl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xl > * + * {\n margin-left: var(--%NS%sd-gap-xl);\n }\n sd-additional-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-additional-button > ._button.gap-xxl > * + * {\n margin-left: var(--%NS%sd-gap-xxl);\n }\n sd-additional-button > ._button.gap-0 {\n gap: 0;\n }\n sd-additional-button > ._button.gap-0 > * + * {\n margin-left: var(--%NS%sd-gap-0);\n }\n sd-additional-button > ._button.gap-auto {\n gap: 0;\n }\n sd-additional-button > ._button.gap-auto > * + * {\n margin-left: var(--%NS%sd-gap-auto);\n }\n}\nsd-additional-button > ._button > sd-anchor {\n padding: var(--%NS%sd-gap-sm) !important;\n}\nsd-additional-button > ._button > sd-button > button {\n border-left: 1px solid var(--%NS%sd-bd-hairline) !important;\n padding: var(--%NS%sd-gap-sm) !important;\n height: 100%;\n}\nsd-additional-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-additional-button[data-sd-size=sm] > ._content {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-default);\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm) !important;\n}\nsd-additional-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._content {\n padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-xl);\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--%NS%sd-gap-default) !important;\n}\nsd-additional-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--%NS%sd-gap-default) !important;\n}"], encapsulation: 2 });
|
|
22
22
|
}
|
|
23
23
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdAdditionalButton, [{
|
|
24
24
|
type: Component,
|
|
@@ -11,7 +11,7 @@ export class SdAnchor {
|
|
|
11
11
|
} }, inputs: { disabled: [1, "disabled"], theme: [1, "theme"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdAnchor_Template(rf, ctx) { if (rf & 1) {
|
|
12
12
|
i0.ɵɵprojectionDef();
|
|
13
13
|
i0.ɵɵprojection(0);
|
|
14
|
-
} }, styles: ["sd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(
|
|
14
|
+
} }, styles: ["sd-anchor {\n display: inline-block;\n cursor: pointer;\n}\nsd-anchor[data-sd-theme=gray] {\n color: var(--%NS%sd-tx-gray);\n}\nsd-anchor[data-sd-theme=gray]:hover {\n color: var(--%NS%sd-tx-gray-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=gray]:active {\n color: var(--%NS%sd-tx-gray);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=gray]:hover {\n color: var(--%NS%sd-tx-gray);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=blue-gray] {\n color: var(--%NS%sd-tx-blue-gray);\n}\nsd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--%NS%sd-tx-blue-gray-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=blue-gray]:active {\n color: var(--%NS%sd-tx-blue-gray);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=blue-gray]:hover {\n color: var(--%NS%sd-tx-blue-gray);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=primary] {\n color: var(--%NS%sd-tx-primary);\n}\nsd-anchor[data-sd-theme=primary]:hover {\n color: var(--%NS%sd-tx-primary-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=primary]:active {\n color: var(--%NS%sd-tx-primary);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=primary]:hover {\n color: var(--%NS%sd-tx-primary);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=info] {\n color: var(--%NS%sd-tx-info);\n}\nsd-anchor[data-sd-theme=info]:hover {\n color: var(--%NS%sd-tx-info-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=info]:active {\n color: var(--%NS%sd-tx-info);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=info]:hover {\n color: var(--%NS%sd-tx-info);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=success] {\n color: var(--%NS%sd-tx-success);\n}\nsd-anchor[data-sd-theme=success]:hover {\n color: var(--%NS%sd-tx-success-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=success]:active {\n color: var(--%NS%sd-tx-success);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=success]:hover {\n color: var(--%NS%sd-tx-success);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=warning] {\n color: var(--%NS%sd-tx-warning);\n}\nsd-anchor[data-sd-theme=warning]:hover {\n color: var(--%NS%sd-tx-warning-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=warning]:active {\n color: var(--%NS%sd-tx-warning);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=warning]:hover {\n color: var(--%NS%sd-tx-warning);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-theme=danger] {\n color: var(--%NS%sd-tx-danger);\n}\nsd-anchor[data-sd-theme=danger]:hover {\n color: var(--%NS%sd-tx-danger-hover);\n text-decoration: underline;\n}\nsd-anchor[data-sd-theme=danger]:active {\n color: var(--%NS%sd-tx-danger);\n}\n@media all and (pointer: coarse) {\n sd-anchor[data-sd-theme=danger]:hover {\n color: var(--%NS%sd-tx-danger);\n text-decoration: none;\n }\n}\nsd-anchor[data-sd-disabled=true] {\n color: var(--%NS%sd-tx-disabled) !important;\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
15
15
|
}
|
|
16
16
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdAnchor, [{
|
|
17
17
|
type: Component,
|
|
@@ -28,7 +28,7 @@ export class SdButton {
|
|
|
28
28
|
i0.ɵɵstyleMap(ctx.buttonStyle());
|
|
29
29
|
i0.ɵɵclassMap(ctx.buttonClass());
|
|
30
30
|
i0.ɵɵproperty("type", ctx.type())("disabled", ctx.disabled())("sdRipple", !ctx.disabled());
|
|
31
|
-
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(
|
|
31
|
+
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--%NS%sd-font-size-default);\n font-family: var(--%NS%sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--%NS%sd-line-height);\n color: var(--%NS%sd-tx-default);\n user-select: none;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-lg);\n width: 100%;\n background-color: var(--%NS%sd-bg-content);\n border-color: var(--%NS%sd-bd-strong);\n border-radius: var(--%NS%sd-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: var(--%NS%sd-animation-duration) linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-button > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--%NS%sd-tx-primary);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--%NS%sd-tx-primary-hover);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background-color: var(--%NS%sd-bg-gray-solid);\n border-color: var(--%NS%sd-bd-gray-solid);\n color: var(--%NS%sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background-color: var(--%NS%sd-bg-gray-solid-hover);\n border-color: var(--%NS%sd-bd-gray-solid-hover);\n color: var(--%NS%sd-tx-gray-solid);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background-color: var(--%NS%sd-bg-blue-gray-solid);\n border-color: var(--%NS%sd-bd-blue-gray-solid);\n color: var(--%NS%sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background-color: var(--%NS%sd-bg-blue-gray-solid-hover);\n border-color: var(--%NS%sd-bd-blue-gray-solid-hover);\n color: var(--%NS%sd-tx-blue-gray-solid);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background-color: var(--%NS%sd-bg-primary-solid);\n border-color: var(--%NS%sd-bd-primary-solid);\n color: var(--%NS%sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background-color: var(--%NS%sd-bg-primary-solid-hover);\n border-color: var(--%NS%sd-bd-primary-solid-hover);\n color: var(--%NS%sd-tx-primary-solid);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background-color: var(--%NS%sd-bg-info-solid);\n border-color: var(--%NS%sd-bd-info-solid);\n color: var(--%NS%sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background-color: var(--%NS%sd-bg-info-solid-hover);\n border-color: var(--%NS%sd-bd-info-solid-hover);\n color: var(--%NS%sd-tx-info-solid);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background-color: var(--%NS%sd-bg-success-solid);\n border-color: var(--%NS%sd-bd-success-solid);\n color: var(--%NS%sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background-color: var(--%NS%sd-bg-success-solid-hover);\n border-color: var(--%NS%sd-bd-success-solid-hover);\n color: var(--%NS%sd-tx-success-solid);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background-color: var(--%NS%sd-bg-warning-solid);\n border-color: var(--%NS%sd-bd-warning-solid);\n color: var(--%NS%sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background-color: var(--%NS%sd-bg-warning-solid-hover);\n border-color: var(--%NS%sd-bd-warning-solid-hover);\n color: var(--%NS%sd-tx-warning-solid);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background-color: var(--%NS%sd-bg-danger-solid);\n border-color: var(--%NS%sd-bd-danger-solid);\n color: var(--%NS%sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background-color: var(--%NS%sd-bg-danger-solid-hover);\n border-color: var(--%NS%sd-bd-danger-solid-hover);\n color: var(--%NS%sd-tx-danger-solid);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background-color: var(--%NS%sd-bg-disabled);\n border-color: var(--%NS%sd-bd-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-primary);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--%NS%sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-gray);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n color: var(--%NS%sd-tx-gray-hover);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-blue-gray);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n color: var(--%NS%sd-tx-blue-gray-hover);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-primary);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n color: var(--%NS%sd-tx-primary-hover);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-info);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n color: var(--%NS%sd-tx-info-hover);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-success);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n color: var(--%NS%sd-tx-success-hover);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-warning);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n color: var(--%NS%sd-tx-warning-hover);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-danger);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n color: var(--%NS%sd-tx-danger-hover);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-disabled);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background-color: transparent;\n color: var(--%NS%sd-tx-on-inverse);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--%NS%sd-tx-on-inverse-muted);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--%NS%sd-tx-on-inverse-disabled);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--%NS%sd-gap-xxs) var(--%NS%sd-gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2 });
|
|
32
32
|
}
|
|
33
33
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdButton, [{
|
|
34
34
|
type: Component,
|
|
@@ -109,7 +109,7 @@ export class SdModalSelectButton {
|
|
|
109
109
|
i0.ɵɵconditional(!ctx.disabled() && !ctx.required() && ctx._hasValue() ? 3 : -1);
|
|
110
110
|
i0.ɵɵadvance();
|
|
111
111
|
i0.ɵɵconditional(!ctx.disabled() ? 4 : -1);
|
|
112
|
-
} }, dependencies: [SdAnchor, SdButton, NgIcon], styles: ["sd-modal-select-button {\n display: flex;\n flex-direction: row;\n gap: var(
|
|
112
|
+
} }, dependencies: [SdAnchor, SdButton, NgIcon], styles: ["sd-modal-select-button {\n display: flex;\n flex-direction: row;\n gap: var(--%NS%sd-gap-sm);\n position: relative;\n width: 100%;\n min-width: 3em;\n border: 1px solid var(--%NS%sd-bd-soft);\n border-radius: var(--%NS%sd-radius-default);\n overflow: hidden;\n}\nsd-modal-select-button > ._content {\n flex: 1;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n}\nsd-modal-select-button > ._button {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n}\n@supports not (appearance: auto) {\n sd-modal-select-button > ._button.gap-xxs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxs > * + * {\n margin-left: var(--%NS%sd-gap-xxs);\n }\n sd-modal-select-button > ._button.gap-xs {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xs > * + * {\n margin-left: var(--%NS%sd-gap-xs);\n }\n sd-modal-select-button > ._button.gap-sm {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-sm > * + * {\n margin-left: var(--%NS%sd-gap-sm);\n }\n sd-modal-select-button > ._button.gap-default {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-default > * + * {\n margin-left: var(--%NS%sd-gap-default);\n }\n sd-modal-select-button > ._button.gap-lg {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-lg > * + * {\n margin-left: var(--%NS%sd-gap-lg);\n }\n sd-modal-select-button > ._button.gap-xl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xl > * + * {\n margin-left: var(--%NS%sd-gap-xl);\n }\n sd-modal-select-button > ._button.gap-xxl {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-xxl > * + * {\n margin-left: var(--%NS%sd-gap-xxl);\n }\n sd-modal-select-button > ._button.gap-0 {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-0 > * + * {\n margin-left: var(--%NS%sd-gap-0);\n }\n sd-modal-select-button > ._button.gap-auto {\n gap: 0;\n }\n sd-modal-select-button > ._button.gap-auto > * + * {\n margin-left: var(--%NS%sd-gap-auto);\n }\n}\nsd-modal-select-button > ._button > sd-anchor {\n padding: var(--%NS%sd-gap-sm) !important;\n}\nsd-modal-select-button > ._button > sd-button > button {\n border-left: 1px solid var(--%NS%sd-bd-hairline) !important;\n padding: var(--%NS%sd-gap-sm) !important;\n height: 100%;\n}\nsd-modal-select-button[data-sd-inset=true] {\n border-radius: 0;\n border: none;\n}\nsd-modal-select-button[data-sd-size=sm] > ._content {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-default);\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-anchor {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=sm] > ._button > sd-button > button {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._content {\n padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-xl);\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-anchor {\n padding: var(--%NS%sd-gap-default) !important;\n}\nsd-modal-select-button[data-sd-size=lg] > ._button > sd-button > button {\n padding: var(--%NS%sd-gap-default) !important;\n}"], encapsulation: 2 });
|
|
113
113
|
}
|
|
114
114
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModalSelectButton, [{
|
|
115
115
|
type: Component,
|
|
@@ -79,7 +79,7 @@ export class SdCheckbox {
|
|
|
79
79
|
i0.ɵɵconditional(!ctx.radio() ? 2 : 3);
|
|
80
80
|
i0.ɵɵadvance(2);
|
|
81
81
|
i0.ɵɵstyleMap(ctx.contentStyle());
|
|
82
|
-
} }, dependencies: [NgIcon], styles: ["sd-checkbox {\n display: block;\n padding: var(
|
|
82
|
+
} }, dependencies: [NgIcon], styles: ["sd-checkbox {\n display: block;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--%NS%sd-font-size-default);\n font-family: var(--%NS%sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--%NS%sd-line-height);\n color: var(--%NS%sd-tx-default);\n color: inherit;\n cursor: pointer;\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-sm) * 2 + 2px);\n gap: var(--%NS%sd-gap-sm);\n}\n@supports not (appearance: auto) {\n sd-checkbox {\n gap: 0;\n }\n sd-checkbox > * + * {\n margin-left: var(--%NS%sd-gap-sm);\n }\n}\nsd-checkbox > ._indicator_rect {\n display: inline-block;\n vertical-align: -0.125em;\n user-select: none;\n width: calc(var(--%NS%sd-font-size-default) + 2px);\n height: calc(var(--%NS%sd-font-size-default) + 2px);\n border: 1px solid var(--%NS%sd-bd-field);\n background-color: var(--%NS%sd-bg-field);\n}\nsd-checkbox > ._indicator_rect > ._indicator {\n margin: -1px -2px;\n text-align: center;\n opacity: 0;\n color: var(--%NS%sd-tx-primary-solid);\n}\nsd-checkbox > ._indicator_rect > ._indicator > ng-icon > svg {\n vertical-align: top;\n stroke-width: 2.5px !important;\n}\nsd-checkbox ._contents {\n display: inline-block;\n vertical-align: top;\n padding-left: var(--%NS%sd-gap-sm);\n}\nsd-checkbox > ._indicator_rect + ._contents:empty {\n display: none;\n}\nsd-checkbox:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-primary-solid);\n background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-checked=true] > ._indicator_rect > ._indicator {\n opacity: 1;\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-gray-subtle);\n}\nsd-checkbox[data-sd-theme=gray] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-gray);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-gray-solid);\n background-color: var(--%NS%sd-bg-gray-solid);\n}\nsd-checkbox[data-sd-theme=gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-gray-solid);\n}\nsd-checkbox[data-sd-theme=gray]:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-blue-gray-subtle);\n}\nsd-checkbox[data-sd-theme=blue-gray] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-blue-gray);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-blue-gray-solid);\n background-color: var(--%NS%sd-bg-blue-gray-solid);\n}\nsd-checkbox[data-sd-theme=blue-gray][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-blue-gray-solid);\n}\nsd-checkbox[data-sd-theme=blue-gray]:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-primary-subtle);\n}\nsd-checkbox[data-sd-theme=primary] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-primary);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-primary-solid);\n background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-theme=primary][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-primary-solid);\n}\nsd-checkbox[data-sd-theme=primary]:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-info-subtle);\n}\nsd-checkbox[data-sd-theme=info] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-info);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-info-solid);\n background-color: var(--%NS%sd-bg-info-solid);\n}\nsd-checkbox[data-sd-theme=info][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-info-solid);\n}\nsd-checkbox[data-sd-theme=info]:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-success-subtle);\n}\nsd-checkbox[data-sd-theme=success] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-success);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-success-solid);\n background-color: var(--%NS%sd-bg-success-solid);\n}\nsd-checkbox[data-sd-theme=success][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-success-solid);\n}\nsd-checkbox[data-sd-theme=success]:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-warning-subtle);\n}\nsd-checkbox[data-sd-theme=warning] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-warning);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-warning-solid);\n background-color: var(--%NS%sd-bg-warning-solid);\n}\nsd-checkbox[data-sd-theme=warning][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-warning-solid);\n}\nsd-checkbox[data-sd-theme=warning]:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-danger-subtle);\n}\nsd-checkbox[data-sd-theme=danger] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-danger);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-danger-solid);\n background-color: var(--%NS%sd-bg-danger-solid);\n}\nsd-checkbox[data-sd-theme=danger][data-sd-checked=true] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-danger-solid);\n}\nsd-checkbox[data-sd-theme=danger]:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-theme=white] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-checkbox);\n border-color: var(--%NS%sd-bd-field);\n}\nsd-checkbox[data-sd-theme=white][data-sd-checked=true] > ._indicator_rect {\n border-color: var(--%NS%sd-bd-primary-solid);\n background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-theme=white]:focus > ._indicator_rect {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect {\n border-radius: 100%;\n padding: var(--%NS%sd-gap-xs);\n}\nsd-checkbox[data-sd-radio=true] > ._indicator_rect > ._indicator {\n border-radius: 100%;\n width: 100%;\n height: 100%;\n background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-checkbox[data-sd-radio=true][data-sd-checked=true] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-field);\n border-color: var(--%NS%sd-bd-primary-solid);\n}\nsd-checkbox[data-sd-size=sm] {\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-xs) * 2 + 2px);\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm);\n gap: var(--%NS%sd-gap-xs);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=sm] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=sm] > * + * {\n margin-left: var(--%NS%sd-gap-xs);\n }\n}\nsd-checkbox[data-sd-size=lg] {\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-default) * 2 + 2px);\n padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-lg);\n gap: var(--%NS%sd-gap-default);\n}\n@supports not (appearance: auto) {\n sd-checkbox[data-sd-size=lg] {\n gap: 0;\n }\n sd-checkbox[data-sd-size=lg] > * + * {\n margin-left: var(--%NS%sd-gap-default);\n }\n}\nsd-checkbox[data-sd-inset=true] {\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-sm) * 2);\n border: none;\n justify-content: center;\n text-align: center;\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=sm] {\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-xs) * 2);\n}\nsd-checkbox[data-sd-inset=true][data-sd-size=lg] {\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-default) * 2);\n}\nsd-checkbox[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n padding: 0;\n border: none;\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit));\n width: auto;\n}\nsd-checkbox[data-sd-disabled=true] {\n color: var(--%NS%sd-tx-disabled) !important;\n pointer-events: none;\n}\nsd-checkbox[data-sd-disabled=true] > ._indicator_rect {\n background-color: var(--%NS%sd-bg-disabled) !important;\n border-color: var(--%NS%sd-bd-disabled) !important;\n}\nsd-checkbox[data-sd-disabled=true] > ._indicator_rect > ._indicator {\n color: var(--%NS%sd-tx-disabled) !important;\n}"], encapsulation: 2 });
|
|
83
83
|
}
|
|
84
84
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdCheckbox, [{
|
|
85
85
|
type: Component,
|
|
@@ -41,7 +41,7 @@ export class SdSwitch {
|
|
|
41
41
|
i0.ɵɵdomElementStart(0, "div");
|
|
42
42
|
i0.ɵɵdomElement(1, "div");
|
|
43
43
|
i0.ɵɵdomElementEnd();
|
|
44
|
-
} }, styles: ["sd-switch {\n display: block;\n padding: var(
|
|
44
|
+
} }, styles: ["sd-switch {\n display: block;\n padding: var(--%NS%sd-gap-sm) 0;\n border: 1px solid transparent;\n vertical-align: top;\n cursor: pointer;\n}\nsd-switch > div {\n height: var(--%NS%sd-line-height);\n width: calc(var(--%NS%sd-line-height) * 2 - var(--%NS%sd-gap-xs));\n padding: calc(var(--%NS%sd-gap-xs) / 2);\n border-radius: calc(var(--%NS%sd-line-height) / 2);\n text-align: left;\n background-color: var(--%NS%sd-bg-track);\n}\nsd-switch > div > div {\n display: inline-block;\n width: calc(var(--%NS%sd-line-height) - var(--%NS%sd-gap-xs));\n height: calc(var(--%NS%sd-line-height) - var(--%NS%sd-gap-xs));\n border-radius: 100%;\n background-color: var(--%NS%sd-bg-knob);\n transition: transform var(--%NS%sd-animation-duration);\n}\nsd-switch[data-sd-on=true] > div {\n background-color: var(--%NS%sd-bg-success-solid);\n}\nsd-switch[data-sd-on=true] > div > div {\n transform: translateX(100%);\n}\nsd-switch[data-sd-inline=true] {\n display: inline-block;\n padding: 0;\n border: none;\n}\nsd-switch[data-sd-inset=true] {\n border: none;\n}\nsd-switch[data-sd-size=sm] {\n padding: var(--%NS%sd-gap-sm) 0;\n}\nsd-switch[data-sd-size=lg] {\n padding: var(--%NS%sd-gap-default) 0;\n}\nsd-switch[data-sd-theme=gray][data-sd-on=true] > div {\n background-color: var(--%NS%sd-bg-gray-solid);\n}\nsd-switch[data-sd-theme=blue-gray][data-sd-on=true] > div {\n background-color: var(--%NS%sd-bg-blue-gray-solid);\n}\nsd-switch[data-sd-theme=primary][data-sd-on=true] > div {\n background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-switch[data-sd-theme=info][data-sd-on=true] > div {\n background-color: var(--%NS%sd-bg-info-solid);\n}\nsd-switch[data-sd-theme=success][data-sd-on=true] > div {\n background-color: var(--%NS%sd-bg-success-solid);\n}\nsd-switch[data-sd-theme=warning][data-sd-on=true] > div {\n background-color: var(--%NS%sd-bg-warning-solid);\n}\nsd-switch[data-sd-theme=danger][data-sd-on=true] > div {\n background-color: var(--%NS%sd-bg-danger-solid);\n}\nsd-switch[data-sd-disabled=true] > div {\n background-color: var(--%NS%sd-bg-disabled) !important;\n}\nsd-switch[data-sd-disabled=true] > div > div {\n background-color: var(--%NS%sd-bg-gray-solid);\n}"], encapsulation: 2 });
|
|
45
45
|
}
|
|
46
46
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSwitch, [{
|
|
47
47
|
type: Component,
|
|
@@ -33,7 +33,7 @@ export class SdDropdownPopup {
|
|
|
33
33
|
i0.ɵɵlistener("sdResize", function SdDropdownPopup_Template_div_sdResize_0_listener() { return ctx.onResize(); });
|
|
34
34
|
i0.ɵɵprojection(1);
|
|
35
35
|
i0.ɵɵelementEnd();
|
|
36
|
-
} }, dependencies: [SdResizeDirective], styles: ["sd-dropdown-popup {\n position: fixed;\n z-index: var(
|
|
36
|
+
} }, dependencies: [SdResizeDirective], styles: ["sd-dropdown-popup {\n position: fixed;\n z-index: var(--%NS%sd-z-dropdown);\n opacity: 0;\n transform: translateY(-0.625rem);\n transition: var(--%NS%sd-animation-duration) linear;\n transition-property: transform, opacity;\n pointer-events: none;\n background-color: var(--%NS%sd-bg-overlay);\n min-width: 7.5rem;\n box-shadow: 0 calc(4 * var(--%NS%sd-shadow-size)) calc(4 * 4 * var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color), 0 var(--%NS%sd-shadow-size) calc(var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color);\n overflow: hidden;\n border-radius: var(--%NS%sd-radius-default);\n border: 1px solid var(--%NS%sd-dropdown-bd);\n}\nsd-dropdown-popup > div {\n width: 100%;\n height: 100%;\n overflow: auto;\n white-space: nowrap;\n}\nsd-dropdown-popup:focus {\n outline: 1px solid var(--%NS%sd-focus-ring-color);\n}\n@media all and (max-width: 520px) {\n sd-dropdown-popup {\n box-shadow: none;\n border: 1px solid var(--%NS%sd-bd-strong);\n }\n}\nsd-dropdown-popup[data-sd-mobile] {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n max-height: 80vh;\n border-radius: var(--%NS%sd-radius-default) var(--%NS%sd-radius-default) 0 0;\n opacity: 1;\n pointer-events: auto;\n transform: none;\n animation: sd-dropdown-slide-up var(--%NS%sd-animation-duration) ease-out;\n box-shadow: 0 calc(8 * var(--%NS%sd-shadow-size)) calc(8 * 4 * var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color), 0 var(--%NS%sd-shadow-size) calc(var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color);\n}\n\n@keyframes sd-dropdown-slide-up {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}"], encapsulation: 2 });
|
|
37
37
|
}
|
|
38
38
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDropdownPopup, [{
|
|
39
39
|
type: Component,
|
|
@@ -30,7 +30,7 @@ export class SdGap {
|
|
|
30
30
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdGap, selectors: [["sd-gap"]], hostVars: 10, hostBindings: function SdGap_HostBindings(rf, ctx) { if (rf & 2) {
|
|
31
31
|
i0.ɵɵattribute("data-sd-height", ctx.height())("data-sd-width", ctx.width());
|
|
32
32
|
i0.ɵɵstyleProp("height", ctx.heightPx(), "px")("width", ctx.widthPx(), "px")("width", ctx.widthEm(), "em")("display", ctx._displayStyle());
|
|
33
|
-
} }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["sd-gap[data-sd-height=xxs] {\n height: var(
|
|
33
|
+
} }, inputs: { height: [1, "height"], heightPx: [1, "heightPx"], width: [1, "width"], widthPx: [1, "widthPx"], widthEm: [1, "widthEm"] }, decls: 0, vars: 0, template: function SdGap_Template(rf, ctx) { }, styles: ["sd-gap[data-sd-height=xxs] {\n height: var(--%NS%sd-gap-xxs);\n}\nsd-gap[data-sd-width=xxs] {\n width: var(--%NS%sd-gap-xxs);\n}\nsd-gap[data-sd-height=xs] {\n height: var(--%NS%sd-gap-xs);\n}\nsd-gap[data-sd-width=xs] {\n width: var(--%NS%sd-gap-xs);\n}\nsd-gap[data-sd-height=sm] {\n height: var(--%NS%sd-gap-sm);\n}\nsd-gap[data-sd-width=sm] {\n width: var(--%NS%sd-gap-sm);\n}\nsd-gap[data-sd-height=default] {\n height: var(--%NS%sd-gap-default);\n}\nsd-gap[data-sd-width=default] {\n width: var(--%NS%sd-gap-default);\n}\nsd-gap[data-sd-height=lg] {\n height: var(--%NS%sd-gap-lg);\n}\nsd-gap[data-sd-width=lg] {\n width: var(--%NS%sd-gap-lg);\n}\nsd-gap[data-sd-height=xl] {\n height: var(--%NS%sd-gap-xl);\n}\nsd-gap[data-sd-width=xl] {\n width: var(--%NS%sd-gap-xl);\n}\nsd-gap[data-sd-height=xxl] {\n height: var(--%NS%sd-gap-xxl);\n}\nsd-gap[data-sd-width=xxl] {\n width: var(--%NS%sd-gap-xxl);\n}\nsd-gap[data-sd-height=\"0\"] {\n height: var(--%NS%sd-gap-0);\n}\nsd-gap[data-sd-width=\"0\"] {\n width: var(--%NS%sd-gap-0);\n}\nsd-gap[data-sd-height=auto] {\n height: var(--%NS%sd-gap-auto);\n}\nsd-gap[data-sd-width=auto] {\n width: var(--%NS%sd-gap-auto);\n}"], encapsulation: 2 });
|
|
34
34
|
}
|
|
35
35
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdGap, [{
|
|
36
36
|
type: Component,
|
|
@@ -95,7 +95,7 @@ export class SdDateRangePicker {
|
|
|
95
95
|
i0.ɵɵproperty("value", "\uBC94\uC704");
|
|
96
96
|
i0.ɵɵadvance(2);
|
|
97
97
|
i0.ɵɵconditional(ctx.periodType() === "\uBC94\uC704" ? 7 : 8);
|
|
98
|
-
} }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], styles: ["sd-date-range-picker {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(
|
|
98
|
+
} }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], styles: ["sd-date-range-picker {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--%NS%sd-gap-sm);\n}\n@supports not (appearance: auto) {\n sd-date-range-picker {\n gap: 0;\n }\n sd-date-range-picker > * + * {\n margin-left: var(--%NS%sd-gap-sm);\n }\n sd-date-range-picker.gap-xxs {\n gap: 0;\n }\n sd-date-range-picker.gap-xxs > * + * {\n margin-left: var(--%NS%sd-gap-xxs);\n }\n sd-date-range-picker.gap-xs {\n gap: 0;\n }\n sd-date-range-picker.gap-xs > * + * {\n margin-left: var(--%NS%sd-gap-xs);\n }\n sd-date-range-picker.gap-sm {\n gap: 0;\n }\n sd-date-range-picker.gap-sm > * + * {\n margin-left: var(--%NS%sd-gap-sm);\n }\n sd-date-range-picker.gap-default {\n gap: 0;\n }\n sd-date-range-picker.gap-default > * + * {\n margin-left: var(--%NS%sd-gap-default);\n }\n sd-date-range-picker.gap-lg {\n gap: 0;\n }\n sd-date-range-picker.gap-lg > * + * {\n margin-left: var(--%NS%sd-gap-lg);\n }\n sd-date-range-picker.gap-xl {\n gap: 0;\n }\n sd-date-range-picker.gap-xl > * + * {\n margin-left: var(--%NS%sd-gap-xl);\n }\n sd-date-range-picker.gap-xxl {\n gap: 0;\n }\n sd-date-range-picker.gap-xxl > * + * {\n margin-left: var(--%NS%sd-gap-xxl);\n }\n sd-date-range-picker.gap-0 {\n gap: 0;\n }\n sd-date-range-picker.gap-0 > * + * {\n margin-left: var(--%NS%sd-gap-0);\n }\n sd-date-range-picker.gap-auto {\n gap: 0;\n }\n sd-date-range-picker.gap-auto > * + * {\n margin-left: var(--%NS%sd-gap-auto);\n }\n}"], encapsulation: 2 });
|
|
99
99
|
}
|
|
100
100
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDateRangePicker, [{
|
|
101
101
|
type: Component,
|
|
@@ -159,7 +159,7 @@ export class SdNumpad {
|
|
|
159
159
|
i0.ɵɵproperty("size", "lg");
|
|
160
160
|
i0.ɵɵadvance(3);
|
|
161
161
|
i0.ɵɵproperty("size", "lg");
|
|
162
|
-
} }, dependencies: [SdTextfield, SdButton, NgIcon], styles: ["sd-numpad table {\n width: 100%;\n border-collapse: collapse;\n}\nsd-numpad table > * > tr > * {\n border: none;\n padding: var(
|
|
162
|
+
} }, dependencies: [SdTextfield, SdButton, NgIcon], styles: ["sd-numpad table {\n width: 100%;\n border-collapse: collapse;\n}\nsd-numpad table > * > tr > * {\n border: none;\n padding: var(--%NS%sd-gap-xxs);\n}\nsd-numpad table > * > tr > * > sd-button {\n border: none;\n}"], encapsulation: 2 });
|
|
163
163
|
}
|
|
164
164
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdNumpad, [{
|
|
165
165
|
type: Component,
|
|
@@ -31,7 +31,7 @@ export class SdRange {
|
|
|
31
31
|
i0.ɵɵproperty("type", ctx.type());
|
|
32
32
|
i0.ɵɵtwoWayProperty("value", ctx.to);
|
|
33
33
|
i0.ɵɵproperty("min", ctx.from())("required", ctx.required())("disabled", ctx.disabled())("inputStyle", ctx.inputStyle());
|
|
34
|
-
} }, dependencies: [SdTextfield], styles: ["sd-range {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(
|
|
34
|
+
} }, dependencies: [SdTextfield], styles: ["sd-range {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--%NS%sd-gap-sm);\n}\n@supports not (appearance: auto) {\n sd-range {\n gap: 0;\n }\n sd-range > * + * {\n margin-left: var(--%NS%sd-gap-sm);\n }\n sd-range.gap-xxs {\n gap: 0;\n }\n sd-range.gap-xxs > * + * {\n margin-left: var(--%NS%sd-gap-xxs);\n }\n sd-range.gap-xs {\n gap: 0;\n }\n sd-range.gap-xs > * + * {\n margin-left: var(--%NS%sd-gap-xs);\n }\n sd-range.gap-sm {\n gap: 0;\n }\n sd-range.gap-sm > * + * {\n margin-left: var(--%NS%sd-gap-sm);\n }\n sd-range.gap-default {\n gap: 0;\n }\n sd-range.gap-default > * + * {\n margin-left: var(--%NS%sd-gap-default);\n }\n sd-range.gap-lg {\n gap: 0;\n }\n sd-range.gap-lg > * + * {\n margin-left: var(--%NS%sd-gap-lg);\n }\n sd-range.gap-xl {\n gap: 0;\n }\n sd-range.gap-xl > * + * {\n margin-left: var(--%NS%sd-gap-xl);\n }\n sd-range.gap-xxl {\n gap: 0;\n }\n sd-range.gap-xxl > * + * {\n margin-left: var(--%NS%sd-gap-xxl);\n }\n sd-range.gap-0 {\n gap: 0;\n }\n sd-range.gap-0 > * + * {\n margin-left: var(--%NS%sd-gap-0);\n }\n sd-range.gap-auto {\n gap: 0;\n }\n sd-range.gap-auto > * + * {\n margin-left: var(--%NS%sd-gap-auto);\n }\n}"], encapsulation: 2 });
|
|
35
35
|
}
|
|
36
36
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdRange, [{
|
|
37
37
|
type: Component,
|
|
@@ -100,7 +100,7 @@ export class SdTextarea {
|
|
|
100
100
|
i0.ɵɵconditional(ctx.value() ? 1 : ctx.placeholder() ? 2 : 3);
|
|
101
101
|
i0.ɵɵadvance(3);
|
|
102
102
|
i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 4 : -1);
|
|
103
|
-
} }, styles: ["sd-textarea {\n display: block;\n position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\n display: block;\n padding: var(
|
|
103
|
+
} }, styles: ["sd-textarea {\n display: block;\n position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\n display: block;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--%NS%sd-font-size-default);\n font-family: var(--%NS%sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--%NS%sd-line-height);\n color: var(--%NS%sd-tx-default);\n font-family: var(--%NS%sd-font-family-field);\n resize: none;\n overflow: auto;\n width: 100%;\n border: 1px solid var(--%NS%sd-bd-field);\n border-radius: var(--%NS%sd-radius-default);\n background-color: var(--%NS%sd-bg-field);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n outline: none;\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-textarea > textarea::-webkit-scrollbar,\nsd-textarea > ._contents::-webkit-scrollbar {\n display: none;\n}\nsd-textarea > textarea::-webkit-input-placeholder,\nsd-textarea > ._contents::-webkit-input-placeholder {\n color: var(--%NS%sd-tx-faint);\n}\nsd-textarea > ._contents > pre {\n font-family: inherit;\n}\nsd-textarea:not([data-sd-inset=true]):not([data-sd-disabled=true]) > ._contents {\n height: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 0;\n}\nsd-textarea[data-sd-theme=gray] > textarea,\nsd-textarea[data-sd-theme=gray] > ._contents {\n background-color: var(--%NS%sd-bg-gray-subtle);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n background-color: var(--%NS%sd-bg-blue-gray-subtle);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n background-color: var(--%NS%sd-bg-primary-subtle);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n background-color: var(--%NS%sd-bg-info-subtle);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n background-color: var(--%NS%sd-bg-success-subtle);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n background-color: var(--%NS%sd-bg-warning-subtle);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n background-color: var(--%NS%sd-bg-danger-subtle);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-lg);\n}\nsd-textarea[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n}\nsd-textarea[data-sd-inline=true] > textarea,\nsd-textarea[data-sd-inline=true] > ._contents {\n width: auto;\n vertical-align: top;\n}\nsd-textarea[data-sd-inset=true] > ._contents {\n display: block;\n}\nsd-textarea[data-sd-inset=true] > textarea {\n position: absolute;\n top: 0;\n left: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea,\nsd-textarea[data-sd-inset=true] > ._contents {\n width: 100%;\n border: none;\n border-radius: 0;\n}\nsd-textarea[data-sd-inset=true] > textarea:focus {\n outline: 1px solid var(--%NS%sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n display: block;\n background-color: var(--%NS%sd-bg-disabled);\n color: var(--%NS%sd-tx-disabled);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n background-color: var(--%NS%sd-bg-content);\n color: var(--%NS%sd-tx-default);\n}"], encapsulation: 2 });
|
|
104
104
|
}
|
|
105
105
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextarea, [{
|
|
106
106
|
type: Component,
|
|
@@ -251,7 +251,7 @@ export class SdTextfield {
|
|
|
251
251
|
i0.ɵɵconditional(ctx.controlType() === "password" ? 1 : 2);
|
|
252
252
|
i0.ɵɵadvance(2);
|
|
253
253
|
i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 3 : -1);
|
|
254
|
-
} }, styles: ["sd-textfield {\n display: block;\n position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n display: block;\n padding: var(
|
|
254
|
+
} }, styles: ["sd-textfield {\n display: block;\n position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n display: block;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--%NS%sd-font-size-default);\n font-family: var(--%NS%sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--%NS%sd-line-height);\n color: var(--%NS%sd-tx-default);\n font-family: var(--%NS%sd-font-family-field);\n overflow: auto;\n width: 100%;\n border: 1px solid var(--%NS%sd-bd-field);\n border-radius: var(--%NS%sd-radius-default);\n background-color: var(--%NS%sd-bg-field);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n outline: none;\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n padding-top: calc(var(--%NS%sd-gap-sm) - 1px);\n padding-bottom: calc(var(--%NS%sd-gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n color: var(--%NS%sd-tx-faint);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n cursor: pointer;\n margin: auto;\n}\nsd-textfield > ._contents {\n display: none;\n}\nsd-textfield > ._contents > pre {\n font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n background-color: var(--%NS%sd-bg-gray-subtle);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n background-color: var(--%NS%sd-bg-blue-gray-subtle);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n background-color: var(--%NS%sd-bg-primary-subtle);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n background-color: var(--%NS%sd-bg-info-subtle);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n background-color: var(--%NS%sd-bg-success-subtle);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n background-color: var(--%NS%sd-bg-warning-subtle);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n background-color: var(--%NS%sd-bg-danger-subtle);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n padding-top: calc(var(--%NS%sd-gap-xs) - 1px);\n padding-bottom: calc(var(--%NS%sd-gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n padding-top: calc(var(--%NS%sd-gap-default) - 1px);\n padding-bottom: calc(var(--%NS%sd-gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n width: auto;\n vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n position: absolute;\n top: 0;\n left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n width: 100%;\n border: none;\n border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n outline: 1px solid var(--%NS%sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n height: calc(var(--%NS%sd-font-size-default) * var(--%NS%sd-line-height-strip-unit) + var(--%NS%sd-gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n display: block;\n background-color: var(--%NS%sd-bg-disabled);\n color: var(--%NS%sd-tx-disabled);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n background-color: var(--%NS%sd-bg-content);\n color: var(--%NS%sd-tx-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n display: block;\n}"], encapsulation: 2 });
|
|
255
255
|
}
|
|
256
256
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextfield, [{
|
|
257
257
|
type: Component,
|
|
@@ -89,7 +89,7 @@ export class SdListItem {
|
|
|
89
89
|
i0.ɵɵqueryAdvance(2);
|
|
90
90
|
} }, hostVars: 8, hostBindings: function SdListItem_HostBindings(rf, ctx) { if (rf & 2) {
|
|
91
91
|
i0.ɵɵattribute("data-sd-layout", ctx.layout())("data-sd-open", ctx.open())("data-sd-selected", ctx.selected())("data-sd-readonly", ctx.readonly())("data-sd-has-children", ctx.hasChildren())("data-sd-has-selected-icon", ctx.selectedIcon() != null);
|
|
92
|
-
i0.ɵɵstyleProp("
|
|
92
|
+
i0.ɵɵstyleProp("--%NS%sd-list-item-depth", ctx.depth());
|
|
93
93
|
} }, inputs: { layout: [1, "layout"], open: [1, "open"], selected: [1, "selected"], selectedIcon: [1, "selectedIcon"], readonly: [1, "readonly"], contentStyle: [1, "contentStyle"], contentClass: [1, "contentClass"] }, outputs: { open: "openChange" }, ngContentSelectors: _c2, decls: 7, vars: 9, consts: [["tabindex", "0", 1, "_content", 3, "click", "keydown.enter", "sdRipple"], [3, "tx-primary", "tx-faint", "svg"], [1, "_label"], [1, "_tool"], [3, "open"], [3, "svg"], [3, "ngTemplateOutlet"], [1, "_children"], [1, "_indent-guide"]], template: function SdListItem_Template(rf, ctx) { if (rf & 1) {
|
|
94
94
|
i0.ɵɵprojectionDef(_c1);
|
|
95
95
|
i0.ɵɵelementStart(0, "div", 0);
|
|
@@ -114,7 +114,7 @@ export class SdListItem {
|
|
|
114
114
|
i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 5 : -1);
|
|
115
115
|
i0.ɵɵadvance();
|
|
116
116
|
i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
|
|
117
|
-
} }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(
|
|
117
|
+
} }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n cursor: pointer;\n gap: var(--%NS%sd-gap-xs);\n border-radius: var(--%NS%sd-radius-default);\n transition: background var(--%NS%sd-animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--%NS%sd-animation-duration) ease-out;\n background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background-color: var(--%NS%sd-bg-state-selected);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--%NS%sd-tx-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n left: calc(0.65em + 1.3em * var(--%NS%sd-list-item-depth, 0));\n width: 0;\n border-left: 1px solid var(--%NS%sd-bd-soft);\n pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n transition: background var(--%NS%sd-animation-duration) ease-out;\n background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n padding-left: calc(1.3em * var(--%NS%sd-list-item-depth, 1));\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n display: block;\n background-color: transparent;\n cursor: default;\n font-size: var(--%NS%sd-font-size-sm);\n opacity: 0.7;\n margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n background-color: transparent;\n}"], encapsulation: 2 });
|
|
118
118
|
}
|
|
119
119
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
|
|
120
120
|
type: Component,
|
|
@@ -9,7 +9,7 @@ export class SdList {
|
|
|
9
9
|
} }, inputs: { inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdList_Template(rf, ctx) { if (rf & 1) {
|
|
10
10
|
i0.ɵɵprojectionDef();
|
|
11
11
|
i0.ɵɵprojection(0);
|
|
12
|
-
} }, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background-color: var(
|
|
12
|
+
} }, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background-color: var(--%NS%sd-bg-content);\n border: 1px solid var(--%NS%sd-bd-strong);\n border-radius: var(--%NS%sd-radius-default);\n padding: var(--%NS%sd-gap-sm);\n gap: var(--%NS%sd-gap-xs);\n}\nsd-list[data-sd-inset=true] {\n background-color: transparent;\n border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n background-color: transparent;\n}\nsd-list sd-list-item sd-list {\n border-color: transparent;\n border-radius: 0;\n padding: 0;\n background-color: transparent;\n}"], encapsulation: 2 });
|
|
13
13
|
}
|
|
14
14
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdList, [{
|
|
15
15
|
type: Component,
|
|
@@ -115,7 +115,7 @@ export class SdPagination {
|
|
|
115
115
|
i0.ɵɵproperty("disabled", !ctx.hasNext());
|
|
116
116
|
i0.ɵɵadvance();
|
|
117
117
|
i0.ɵɵproperty("svg", ctx.icons.tablerChevronsRight);
|
|
118
|
-
} }, dependencies: [SdAnchor, NgIcon], styles: ["sd-pagination > sd-anchor {\n display: inline-block;\n padding: var(
|
|
118
|
+
} }, dependencies: [SdAnchor, NgIcon], styles: ["sd-pagination > sd-anchor {\n display: inline-block;\n padding: var(--%NS%sd-gap-xxs) var(--%NS%sd-gap-xs);\n}"], encapsulation: 2 });
|
|
119
119
|
}
|
|
120
120
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPagination, [{
|
|
121
121
|
type: Component,
|
|
@@ -10,7 +10,7 @@ export class SdSelectButton {
|
|
|
10
10
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSelectButton, selectors: [["sd-select-button"]], ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSelectButton_Template(rf, ctx) { if (rf & 1) {
|
|
11
11
|
i0.ɵɵprojectionDef();
|
|
12
12
|
i0.ɵɵprojection(0);
|
|
13
|
-
} }, styles: ["sd-select-button {\n display: block;\n background-color: var(
|
|
13
|
+
} }, styles: ["sd-select-button {\n display: block;\n background-color: var(--%NS%sd-bg-content);\n font-weight: bold;\n cursor: pointer;\n color: var(--%NS%sd-tx-primary);\n transition: background var(--%NS%sd-animation-duration) linear;\n}\nsd-select-button:hover {\n color: var(--%NS%sd-tx-primary-hover);\n background-color: var(--%NS%sd-bg-state-hover);\n}"], encapsulation: 2 });
|
|
14
14
|
}
|
|
15
15
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectButton, [{
|
|
16
16
|
type: Component,
|
|
@@ -87,7 +87,7 @@ export class SdSelectItem {
|
|
|
87
87
|
i0.ɵɵelementEnd();
|
|
88
88
|
} if (rf & 2) {
|
|
89
89
|
i0.ɵɵconditional(ctx._parentControl.selectMode() === "multi" ? 0 : -1);
|
|
90
|
-
} }, dependencies: [SdCheckbox, SdGap], styles: ["sd-select-item {\n display: block;\n padding: var(
|
|
90
|
+
} }, dependencies: [SdCheckbox, SdGap], styles: ["sd-select-item {\n display: block;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n cursor: pointer;\n font-family: var(--%NS%sd-font-family-field);\n transition: background var(--%NS%sd-animation-duration) ease-in;\n background-color: var(--%NS%sd-bg-overlay);\n}\nsd-select-item:hover {\n transition: background var(--%NS%sd-animation-duration) ease-out;\n background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-select-item:focus {\n outline: none;\n transition: background var(--%NS%sd-animation-duration) ease-out;\n background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-select-item[data-sd-selected=true] {\n color: var(--%NS%sd-tx-primary);\n font-weight: bold;\n background-color: var(--%NS%sd-bg-state-selected);\n}\nsd-select-item[data-sd-disabled=true] {\n background-color: var(--%NS%sd-bg-disabled);\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n pointer-events: none;\n}\nsd-select-item[data-sd-hidden=true] {\n display: none;\n}"], encapsulation: 2 });
|
|
91
91
|
}
|
|
92
92
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectItem, [{
|
|
93
93
|
type: Component,
|
|
@@ -330,7 +330,7 @@ export class SdSelect {
|
|
|
330
330
|
i0.ɵɵconditional(ctx._beforeTpl() ? 12 : -1);
|
|
331
331
|
i0.ɵɵadvance();
|
|
332
332
|
i0.ɵɵconditional((tmp_12_0 = ctx._itemOfTpl()) ? 13 : 14, tmp_12_0);
|
|
333
|
-
} }, dependencies: [SdDropdown, SdDropdownPopup, SdAnchor, SdGap, NgTemplateOutlet, SdRipple, NgIcon], styles: ["sd-select {\n display: block;\n position: relative;\n width: 100%;\n min-width: 10em;\n}\nsd-select > sd-dropdown {\n display: flex;\n overflow: hidden;\n border: 1px solid var(
|
|
333
|
+
} }, dependencies: [SdDropdown, SdDropdownPopup, SdAnchor, SdGap, NgTemplateOutlet, SdRipple, NgIcon], styles: ["sd-select {\n display: block;\n position: relative;\n width: 100%;\n min-width: 10em;\n}\nsd-select > sd-dropdown {\n display: flex;\n overflow: hidden;\n border: 1px solid var(--%NS%sd-bd-field);\n border-radius: var(--%NS%sd-radius-default);\n background-color: var(--%NS%sd-bg-field);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n border-color: var(--%NS%sd-focus-ring-color);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n display: flex;\n position: relative;\n gap: var(--%NS%sd-gap-default);\n flex-grow: 1;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n cursor: pointer;\n font-family: var(--%NS%sd-font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n padding: var(--%NS%sd-gap-sm);\n border-left: 1px solid var(--%NS%sd-bd-hairline);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n border-top-right-radius: var(--%NS%sd-radius-default);\n border-bottom-right-radius: var(--%NS%sd-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n background-color: var(--%NS%sd-bg-disabled);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--%NS%sd-tx-disabled);\n cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n display: none;\n}\nsd-select[data-sd-inline=true] {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm);\n gap: var(--%NS%sd-gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n padding: var(--%NS%sd-gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-lg);\n gap: var(--%NS%sd-gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n padding: var(--%NS%sd-gap-default);\n}\nsd-select[data-sd-inset=true] {\n min-width: auto;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n border: none;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n outline: 1px solid var(--%NS%sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n outline: 1px solid var(--%NS%sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n background-color: var(--%NS%sd-bg-content);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--%NS%sd-tx-default);\n}\n\n._sd-select-all-bar {\n display: flex;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n border-bottom: 1px solid var(--%NS%sd-bd-default);\n}"], encapsulation: 2 });
|
|
334
334
|
}
|
|
335
335
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelect, [{
|
|
336
336
|
type: Component,
|
|
@@ -19,7 +19,7 @@ export class SdTabItem {
|
|
|
19
19
|
} }, inputs: { value: [1, "value"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdTabItem_Template(rf, ctx) { if (rf & 1) {
|
|
20
20
|
i0.ɵɵprojectionDef();
|
|
21
21
|
i0.ɵɵprojection(0);
|
|
22
|
-
} }, styles: ["sd-tab-item {\n display: inline-block;\n padding: var(
|
|
22
|
+
} }, styles: ["sd-tab-item {\n display: inline-block;\n padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n cursor: pointer;\n margin-bottom: -2px;\n border-bottom: 2px solid transparent !important;\n font-weight: bold;\n color: var(--%NS%sd-tx-gray);\n}\nsd-tab-item[data-sd-selected=true] {\n border-bottom: 3px solid var(--%NS%sd-bd-primary-solid) !important;\n color: var(--%NS%sd-tx-primary);\n}"], encapsulation: 2 });
|
|
23
23
|
}
|
|
24
24
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTabItem, [{
|
|
25
25
|
type: Component,
|
|
@@ -8,7 +8,7 @@ export class SdTab {
|
|
|
8
8
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTab, selectors: [["sd-tab"]], inputs: { value: [1, "value"] }, outputs: { value: "valueChange" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdTab_Template(rf, ctx) { if (rf & 1) {
|
|
9
9
|
i0.ɵɵprojectionDef();
|
|
10
10
|
i0.ɵɵprojection(0);
|
|
11
|
-
} }, styles: ["sd-tab {\n display: block;\n border-bottom: 2px solid var(
|
|
11
|
+
} }, styles: ["sd-tab {\n display: block;\n border-bottom: 2px solid var(--%NS%sd-bd-hairline);\n padding: 0 calc(var(--%NS%sd-gap-default) + 1px) 0 calc(var(--%NS%sd-gap-default) - 1px);\n}"], encapsulation: 2 });
|
|
12
12
|
}
|
|
13
13
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTab, [{
|
|
14
14
|
type: Component,
|
|
@@ -69,7 +69,7 @@ export class SdBusyContainer {
|
|
|
69
69
|
i0.ɵɵconditional(ctx.message() != undefined ? 6 : -1);
|
|
70
70
|
i0.ɵɵadvance();
|
|
71
71
|
i0.ɵɵconditional(ctx.progressPercent() != null ? 7 : -1);
|
|
72
|
-
} }, styles: ["sd-busy-container {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n min-width: 70px;\n min-height: 70px;\n overflow: auto;\n}\nsd-busy-container > ._screen {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9998;\n visibility: hidden;\n pointer-events: none;\n opacity: 0;\n transition: opacity var(
|
|
72
|
+
} }, styles: ["sd-busy-container {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n min-width: 70px;\n min-height: 70px;\n overflow: auto;\n}\nsd-busy-container > ._screen {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 9998;\n visibility: hidden;\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--%NS%sd-animation-duration);\n transition-timing-function: linear;\n}\nsd-busy-container > ._screen > ._progress {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n height: 4px;\n width: 100%;\n background-color: var(--%NS%sd-bg-canvas);\n}\nsd-busy-container > ._screen > ._progress > ._progress-bar {\n position: absolute;\n top: 0;\n left: 0;\n display: inline-block;\n content: \"\";\n height: 4px;\n width: 100%;\n transition: var(--%NS%sd-animation-duration) ease-in;\n transition-property: transform;\n transform-origin: left;\n transform: scaleX(0);\n background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-busy-container[data-sd-busy=true] > ._screen {\n visibility: visible;\n pointer-events: auto;\n opacity: 1;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect {\n transform: translateY(-100%);\n transition: var(--%NS%sd-animation-duration) ease-in;\n transition-property: transform;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator {\n top: 0;\n width: 30px;\n height: 30px;\n margin: 20px auto 0 auto;\n border: 6px solid var(--%NS%sd-bg-canvas);\n border-radius: 100%;\n border-bottom-color: var(--%NS%sd-bg-primary-solid);\n animation: sd-busy-spin 1s linear infinite;\n box-shadow: 0 2px 4px var(--%NS%sd-shadow-color);\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._indicator > div {\n display: none;\n}\nsd-busy-container[data-sd-type=spinner] > ._screen > ._rect > ._message {\n position: absolute;\n top: 55px;\n width: 100%;\n color: var(--%NS%sd-bg-canvas);\n font-weight: bold;\n text-align: center;\n text-shadow: 0 0 2px var(--%NS%sd-bg-inverse);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n transform: none;\n transition: var(--%NS%sd-animation-duration) ease-out;\n}\nsd-busy-container[data-sd-type=bar] {\n min-height: 4px;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator {\n position: absolute;\n top: 0;\n left: 0;\n height: 4px;\n width: 100%;\n background-color: var(--%NS%sd-bg-canvas);\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before, sd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n position: absolute;\n top: 0;\n left: 0;\n display: inline-block;\n content: \"\";\n height: 4px;\n width: 100%;\n transform-origin: left;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:before {\n background-color: var(--%NS%sd-bg-primary-solid);\n animation: sd-busy-bar-indicator-before 2s infinite ease-in;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator:after {\n background-color: var(--%NS%sd-bg-canvas);\n animation: sd-busy-bar-indicator-after 2s infinite ease-out;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._indicator > div {\n display: none;\n}\nsd-busy-container[data-sd-type=bar][data-sd-busy=true] > ._screen > ._rect > ._message {\n position: absolute;\n top: 4px;\n right: 0;\n display: inline-block;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator {\n position: absolute;\n top: calc(50% - 20px);\n left: calc(50% - 20px);\n width: 40px;\n height: 40px;\n transform: rotateZ(45deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n float: left;\n width: 50%;\n height: 50%;\n position: relative;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube1:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before,\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--%NS%sd-bg-busy-indicator);\n animation: sd-busy-cube 2.4s infinite linear both;\n transform-origin: 100% 100%;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2 {\n transform: rotateZ(90deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube2:before {\n animation-delay: 0.3s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3 {\n transform: rotateZ(180deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube3:before {\n animation-delay: 0.6s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4 {\n transform: rotateZ(270deg);\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._indicator ._cube4:before {\n animation-delay: 0.9s;\n}\nsd-busy-container[data-sd-type=cube] > ._screen > ._rect > ._message {\n position: absolute;\n top: 4px;\n right: 0;\n display: inline-block;\n}\n\n@keyframes sd-busy-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n@keyframes sd-busy-bar-indicator-before {\n 0% {\n transform: scaleX(0);\n }\n 60%, 100% {\n transform: scaleX(1);\n }\n}\n@keyframes sd-busy-bar-indicator-after {\n 0%, 50% {\n transform: scaleX(0);\n }\n 100% {\n transform: scaleX(1);\n }\n}\n@keyframes sd-busy-cube {\n 0%, 10% {\n transform: perspective(140px) rotateX(-180deg);\n opacity: 0;\n }\n 25%, 75% {\n transform: perspective(140px) rotateX(0deg);\n opacity: 1;\n }\n 90%, 100% {\n transform: perspective(140px) rotateY(180deg);\n opacity: 0;\n }\n}"], encapsulation: 2 });
|
|
73
73
|
}
|
|
74
74
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdBusyContainer, [{
|
|
75
75
|
type: Component,
|
|
@@ -5,6 +5,16 @@ interface DragResizeOptions {
|
|
|
5
5
|
minHeightPx: Signal<number | undefined>;
|
|
6
6
|
onEnd: () => void;
|
|
7
7
|
}
|
|
8
|
+
/**
|
|
9
|
+
* `._dialog` 는 평소 CSS 로 중앙 정렬(`position: relative` + `margin: 0 auto`)되어 있어
|
|
10
|
+
* `left`/`top` 이 "정상 배치 위치 대비 상대 offset" 으로 해석된다.
|
|
11
|
+
* 드래그, 리사이즈는 절대 좌표로 계산하므로 시작 시점에 절대 좌표계로 전환한다.
|
|
12
|
+
* 전환만으로는 위치, 크기가 변하지 않으며, 이미 전환된 요소에 다시 적용해도 결과가 같다.
|
|
13
|
+
*/
|
|
14
|
+
export declare function pinDialogAbsolute(dialogEl: HTMLElement): {
|
|
15
|
+
left: number;
|
|
16
|
+
top: number;
|
|
17
|
+
};
|
|
8
18
|
export declare function injectDragResize(opt: DragResizeOptions): {
|
|
9
19
|
startDrag: (event: MouseEvent) => void;
|
|
10
20
|
startResize: (event: MouseEvent, dir: string) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"injectDragResize.d.ts","sourceRoot":"","sources":["../../../src/core/modal/injectDragResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAsB,MAAM,eAAe,CAAC;AAEhE,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,GAAG;IACxD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,
|
|
1
|
+
{"version":3,"file":"injectDragResize.d.ts","sourceRoot":"","sources":["../../../src/core/modal/injectDragResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAsB,MAAM,eAAe,CAAC;AAEhE,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAuBD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAiCtF;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,GAAG;IACxD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CA8IA"}
|