@simplysm/angular 14.1.17 → 14.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/controls/button/sd-additional-button.js +2 -2
- package/dist/controls/button/sd-anchor.js +2 -2
- package/dist/controls/button/sd-button.js +2 -2
- package/dist/controls/button/sd-modal-select-button.js +2 -2
- package/dist/controls/checkbox/sd-checkbox.js +2 -2
- package/dist/controls/checkbox/sd-switch.js +2 -2
- package/dist/controls/dropdown/sd-dropdown-popup.js +2 -2
- package/dist/controls/gap/sd-gap.js +2 -2
- package/dist/controls/input/sd-date-range-picker.js +2 -2
- package/dist/controls/input/sd-range.js +2 -2
- package/dist/controls/input/sd-textarea.js +2 -2
- package/dist/controls/input/sd-textfield.js +2 -2
- package/dist/controls/select/sd-select-item.js +2 -2
- package/dist/core/busy/sd-busy-container.js +2 -2
- package/dist/core/modal/sd-modal.js +2 -2
- package/dist/core/provideSdAngular.d.ts.map +1 -1
- package/dist/core/provideSdAngular.js +0 -12
- package/dist/core/toast/sd-toast-container.js +2 -2
- package/dist/core/toast/sd-toast.js +2 -2
- package/dist/data/kanban/sd-kanban-board.js +2 -2
- package/dist/data/sheet/sd-sheet.js +2 -2
- package/dist/features/theme/sd-theme-provider.d.ts +0 -1
- package/dist/features/theme/sd-theme-provider.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-provider.js +1 -6
- package/dist/features/theme/sd-theme-selector.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-selector.js +4 -16
- package/dist/features/visual/sd-calendar.js +2 -2
- package/dist/features/visual/sd-label.js +2 -2
- package/dist/features/visual/sd-note.js +2 -2
- package/dist/features/visual/sd-progress.js +2 -2
- package/dist/layout/sidebar/sd-sidebar-container.js +2 -2
- package/dist/layout/sidebar/sd-sidebar.js +2 -2
- package/package.json +5 -5
- package/scss/commons/_colors.scss +247 -326
- package/scss/commons/_styles.scss +430 -430
- package/scss/commons/_theme-variables.scss +2 -12
- package/scss/commons/_variables.scss +83 -56
- package/scss/themes/_variables-blueprint.scss +99 -95
- package/src/core/provideSdAngular.ts +0 -14
- package/src/features/theme/sd-theme-provider.ts +1 -7
- package/src/features/theme/sd-theme-selector.ts +0 -4
- package/styles.css +368 -485
- package/scss/themes/_variables-dark.scss +0 -53
|
@@ -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: ["
|
|
103
|
+
} }, styles: ["sd-textarea {\n display: block;\n position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\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 font-family: var(--font-family-field);\n resize: none;\n overflow: auto;\n width: 100%;\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n outline: none;\n border-color: var(--theme-primary-default);\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(--text-trans-lighter);\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: var(--theme-gray-lightest);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n background: var(--theme-blue-gray-lightest);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n background: var(--theme-primary-lightest);\n}\nsd-textarea[data-sd-theme=secondary] > textarea,\nsd-textarea[data-sd-theme=secondary] > ._contents {\n background: var(--theme-secondary-lightest);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n background: var(--theme-info-lightest);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n background: var(--theme-success-lightest);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n background: var(--theme-warning-lightest);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n background: var(--theme-danger-lightest);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n padding: var(--gap-default) var(--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(--theme-primary-default);\n outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n display: block;\n background: var(--theme-gray-lightest);\n color: var(--text-trans-light);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n background: var(--control-color);\n color: var(--text-trans-default);\n}"], encapsulation: 2 });
|
|
104
104
|
}
|
|
105
105
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextarea, [{
|
|
106
106
|
type: Component,
|
|
@@ -137,6 +137,6 @@ export class SdTextarea {
|
|
|
137
137
|
"[attr.data-sd-inset]": "inset()",
|
|
138
138
|
"[attr.data-sd-size]": "size()",
|
|
139
139
|
"[attr.data-sd-theme]": "theme()",
|
|
140
|
-
}, styles: ["
|
|
140
|
+
}, styles: ["sd-textarea {\n display: block;\n position: relative;\n}\nsd-textarea > textarea,\nsd-textarea > ._contents {\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 font-family: var(--font-family-field);\n resize: none;\n overflow: auto;\n width: 100%;\n border: 1px solid var(--trans-lighter);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-textarea > textarea:focus,\nsd-textarea > ._contents:focus {\n outline: none;\n border-color: var(--theme-primary-default);\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(--text-trans-lighter);\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: var(--theme-gray-lightest);\n}\nsd-textarea[data-sd-theme=blue-gray] > textarea,\nsd-textarea[data-sd-theme=blue-gray] > ._contents {\n background: var(--theme-blue-gray-lightest);\n}\nsd-textarea[data-sd-theme=primary] > textarea,\nsd-textarea[data-sd-theme=primary] > ._contents {\n background: var(--theme-primary-lightest);\n}\nsd-textarea[data-sd-theme=secondary] > textarea,\nsd-textarea[data-sd-theme=secondary] > ._contents {\n background: var(--theme-secondary-lightest);\n}\nsd-textarea[data-sd-theme=info] > textarea,\nsd-textarea[data-sd-theme=info] > ._contents {\n background: var(--theme-info-lightest);\n}\nsd-textarea[data-sd-theme=success] > textarea,\nsd-textarea[data-sd-theme=success] > ._contents {\n background: var(--theme-success-lightest);\n}\nsd-textarea[data-sd-theme=warning] > textarea,\nsd-textarea[data-sd-theme=warning] > ._contents {\n background: var(--theme-warning-lightest);\n}\nsd-textarea[data-sd-theme=danger] > textarea,\nsd-textarea[data-sd-theme=danger] > ._contents {\n background: var(--theme-danger-lightest);\n}\nsd-textarea[data-sd-size=sm] > textarea,\nsd-textarea[data-sd-size=sm] > ._contents {\n padding: var(--gap-xs) var(--gap-sm);\n}\nsd-textarea[data-sd-size=lg] > textarea,\nsd-textarea[data-sd-size=lg] > ._contents {\n padding: var(--gap-default) var(--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(--theme-primary-default);\n outline-offset: -1px;\n}\nsd-textarea[data-sd-disabled=true] > ._contents {\n display: block;\n background: var(--theme-gray-lightest);\n color: var(--text-trans-light);\n}\nsd-textarea[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n background: var(--control-color);\n color: var(--text-trans-default);\n}"] }]
|
|
141
141
|
}], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", 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 }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }] }); })();
|
|
142
142
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextarea, { className: "SdTextarea", filePath: "packages/angular/src/controls/input/sd-textarea.ts", lineNumber: 180 }); })();
|
|
@@ -252,7 +252,7 @@ export class SdTextfield {
|
|
|
252
252
|
i0.ɵɵconditional(ctx.controlType() === "password" ? 1 : 2);
|
|
253
253
|
i0.ɵɵadvance(2);
|
|
254
254
|
i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 3 : -1);
|
|
255
|
-
} }, styles: ["
|
|
255
|
+
} }, styles: ["sd-textfield {\n display: block;\n position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\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 font-family: var(--font-family-field);\n overflow: auto;\n width: 100%;\n border: 1px solid var(--border-color-light);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n outline: none;\n border-color: var(--theme-primary-default);\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(--gap-sm) - 1px);\n padding-bottom: calc(var(--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(--text-trans-lighter);\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: var(--theme-gray-lightest);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n background: var(--theme-blue-gray-lightest);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n background: var(--theme-primary-lightest);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n background: var(--theme-secondary-lightest);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n background: var(--theme-info-lightest);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n background: var(--theme-success-lightest);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n background: var(--theme-warning-lightest);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n background: var(--theme-danger-lightest);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n padding: var(--gap-xs) var(--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(--gap-xs) - 1px);\n padding-bottom: calc(var(--gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n padding: var(--gap-default) var(--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(--gap-default) - 1px);\n padding-bottom: calc(var(--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(--theme-primary-default);\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(--font-size-default) * var(--line-height-strip-unit) + var(--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(--font-size-default) * var(--line-height-strip-unit) + var(--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(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n display: block;\n background: var(--trans-lightest);\n color: var(--text-trans-light);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n background: var(--control-color);\n color: var(--text-trans-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n display: block;\n}"], encapsulation: 2 });
|
|
256
256
|
}
|
|
257
257
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextfield, [{
|
|
258
258
|
type: Component,
|
|
@@ -302,6 +302,6 @@ export class SdTextfield {
|
|
|
302
302
|
"[attr.data-sd-inset]": "inset()",
|
|
303
303
|
"[attr.data-sd-size]": "size()",
|
|
304
304
|
"[attr.data-sd-theme]": "theme()",
|
|
305
|
-
}, styles: ["
|
|
305
|
+
}, styles: ["sd-textfield {\n display: block;\n position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\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 font-family: var(--font-family-field);\n overflow: auto;\n width: 100%;\n border: 1px solid var(--border-color-light);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n outline: none;\n border-color: var(--theme-primary-default);\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(--gap-sm) - 1px);\n padding-bottom: calc(var(--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(--text-trans-lighter);\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: var(--theme-gray-lightest);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n background: var(--theme-blue-gray-lightest);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n background: var(--theme-primary-lightest);\n}\nsd-textfield[data-sd-theme=secondary] > input,\nsd-textfield[data-sd-theme=secondary] > ._contents {\n background: var(--theme-secondary-lightest);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n background: var(--theme-info-lightest);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n background: var(--theme-success-lightest);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n background: var(--theme-warning-lightest);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n background: var(--theme-danger-lightest);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n padding: var(--gap-xs) var(--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(--gap-xs) - 1px);\n padding-bottom: calc(var(--gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n padding: var(--gap-default) var(--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(--gap-default) - 1px);\n padding-bottom: calc(var(--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(--theme-primary-default);\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(--font-size-default) * var(--line-height-strip-unit) + var(--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(--font-size-default) * var(--line-height-strip-unit) + var(--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(--font-size-default) * var(--line-height-strip-unit) + var(--gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n display: block;\n background: var(--trans-lightest);\n color: var(--text-trans-light);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n background: var(--control-color);\n color: var(--text-trans-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n display: block;\n}"] }]
|
|
306
306
|
}], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minlength", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], useNumberComma: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNumberComma", required: false }] }], minDigits: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDigits", 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 }] }], _inputElRef: [{ type: i0.ViewChild, args: ["inputEl", { isSignal: true }] }] }); })();
|
|
307
307
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextfield, { className: "SdTextfield", filePath: "packages/angular/src/controls/input/sd-textfield.ts", lineNumber: 300 }); })();
|
|
@@ -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: ["
|
|
90
|
+
} }, dependencies: [SdCheckbox, SdGap], styles: ["sd-select-item {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n font-family: var(--font-family-field);\n transition: background var(--animation-duration) ease-in;\n background: var(--control-color);\n}\nsd-select-item:hover {\n transition: background var(--animation-duration) ease-out;\n background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item:focus {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-selected=true] {\n color: var(--theme-primary-default);\n font-weight: bold;\n background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-disabled=true] {\n background: var(--theme-gray-default);\n opacity: 0.3;\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,
|
|
@@ -108,6 +108,6 @@ export class SdSelectItem {
|
|
|
108
108
|
"[attr.data-sd-hidden]": "hidden()",
|
|
109
109
|
"(click)": "onClick($event)",
|
|
110
110
|
"(keydown)": "onKeydown($event)",
|
|
111
|
-
}, styles: ["
|
|
111
|
+
}, styles: ["sd-select-item {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n font-family: var(--font-family-field);\n transition: background var(--animation-duration) ease-in;\n background: var(--control-color);\n}\nsd-select-item:hover {\n transition: background var(--animation-duration) ease-out;\n background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item:focus {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-selected=true] {\n color: var(--theme-primary-default);\n font-weight: bold;\n background: rgba(0, 0, 0, 0.07);\n}\nsd-select-item[data-sd-disabled=true] {\n background: var(--theme-gray-default);\n opacity: 0.3;\n cursor: default;\n pointer-events: none;\n}\nsd-select-item[data-sd-hidden=true] {\n display: none;\n}"] }]
|
|
112
112
|
}], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }] }); })();
|
|
113
113
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectItem, { className: "SdSelectItem", filePath: "packages/angular/src/controls/select/sd-select-item.ts", lineNumber: 87 }); })();
|
|
@@ -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: ["
|
|
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(--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(--background-color);\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(--animation-duration) ease-in;\n transition-property: transform;\n transform-origin: left;\n transform: scaleX(0);\n background-color: var(--theme-primary-default);\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(--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(--background-color);\n border-radius: 100%;\n border-bottom-color: var(--theme-primary-default);\n animation: sd-busy-spin 1s linear infinite;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\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(--background-color);\n font-weight: bold;\n text-align: center;\n text-shadow: 0 0 2px var(--background-rev-color);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n transform: none;\n transition: var(--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(--background-color);\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(--theme-primary-default);\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(--background-color);\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(--trans-light);\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,
|
|
@@ -112,6 +112,6 @@ export class SdBusyContainer {
|
|
|
112
112
|
}
|
|
113
113
|
</div>
|
|
114
114
|
<ng-content></ng-content>
|
|
115
|
-
`, styles: ["
|
|
115
|
+
`, 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(--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(--background-color);\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(--animation-duration) ease-in;\n transition-property: transform;\n transform-origin: left;\n transform: scaleX(0);\n background-color: var(--theme-primary-default);\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(--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(--background-color);\n border-radius: 100%;\n border-bottom-color: var(--theme-primary-default);\n animation: sd-busy-spin 1s linear infinite;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\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(--background-color);\n font-weight: bold;\n text-align: center;\n text-shadow: 0 0 2px var(--background-rev-color);\n}\nsd-busy-container[data-sd-type=spinner][data-sd-busy=true] > ._screen > ._rect {\n transform: none;\n transition: var(--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(--background-color);\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(--theme-primary-default);\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(--background-color);\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(--trans-light);\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}"] }]
|
|
116
116
|
}], null, { busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], progressPercent: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressPercent", required: false }] }] }); })();
|
|
117
117
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdBusyContainer, { className: "SdBusyContainer", filePath: "packages/angular/src/core/busy/sd-busy-container.ts", lineNumber: 332 }); })();
|
|
@@ -326,7 +326,7 @@ export class SdModal {
|
|
|
326
326
|
i0.ɵɵconditional(!ctx.hideHeader() ? 2 : -1);
|
|
327
327
|
i0.ɵɵadvance(3);
|
|
328
328
|
i0.ɵɵconditional(ctx.resizable() ? 5 : -1);
|
|
329
|
-
} }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], styles: ["
|
|
329
|
+
} }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], styles: ["sd-modal {\n display: block;\n position: fixed;\n z-index: var(--z-index-modal);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding-top: calc(var(--topbar-height) + var(--gap-sm));\n opacity: 0;\n transition: opacity var(--animation-duration) ease-in-out;\n pointer-events: none;\n}\nsd-modal > ._backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--trans-default);\n}\nsd-modal > ._dialog {\n position: relative;\n display: flex;\n flex-direction: column;\n margin: 0 auto;\n width: fit-content;\n min-width: 200px;\n background: var(--control-color);\n overflow: hidden;\n box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 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 border-radius: var(--border-radius-default);\n transform: translateY(-25px);\n transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n outline: none;\n}\nsd-modal > ._dialog > ._header {\n display: flex;\n align-items: center;\n user-select: none;\n border-bottom: 1px solid var(--theme-gray-lighter);\n background: var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n flex: 1;\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._content {\n flex: 1;\n overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n top: 0;\n left: 0;\n width: var(--gap-sm);\n height: 100%;\n cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n top: 0;\n right: 0;\n width: var(--gap-sm);\n height: 100%;\n cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n top: 0;\n left: 0;\n width: 100%;\n height: var(--gap-sm);\n cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n right: 0;\n top: 0;\n width: var(--gap-sm);\n height: var(--gap-sm);\n z-index: 1;\n cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n left: 0;\n top: 0;\n width: var(--gap-sm);\n height: var(--gap-sm);\n cursor: nwse-resize;\n z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--gap-sm);\n cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n right: 0;\n bottom: 0;\n width: var(--gap-sm);\n height: var(--gap-sm);\n z-index: 1;\n cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n left: 0;\n bottom: 0;\n width: var(--gap-sm);\n height: var(--gap-sm);\n cursor: nesw-resize;\n z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n opacity: 1;\n pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n transform: none;\n}\nsd-modal[data-sd-float] {\n pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n pointer-events: auto;\n opacity: 0;\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 border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 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}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n pointer-events: auto;\n opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n position: absolute;\n right: calc(var(--gap-xxl) * 2);\n bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n position: absolute;\n right: var(--gap-xxl);\n top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n width: 100%;\n height: 100%;\n border: none;\n border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n background: transparent;\n color: var(--text-trans-lighter);\n}"], encapsulation: 2 });
|
|
330
330
|
}
|
|
331
331
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModal, [{
|
|
332
332
|
type: Component,
|
|
@@ -409,6 +409,6 @@ export class SdModal {
|
|
|
409
409
|
></div>
|
|
410
410
|
}
|
|
411
411
|
</div>
|
|
412
|
-
`, styles: ["
|
|
412
|
+
`, styles: ["sd-modal {\n display: block;\n position: fixed;\n z-index: var(--z-index-modal);\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding-top: calc(var(--topbar-height) + var(--gap-sm));\n opacity: 0;\n transition: opacity var(--animation-duration) ease-in-out;\n pointer-events: none;\n}\nsd-modal > ._backdrop {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--trans-default);\n}\nsd-modal > ._dialog {\n position: relative;\n display: flex;\n flex-direction: column;\n margin: 0 auto;\n width: fit-content;\n min-width: 200px;\n background: var(--control-color);\n overflow: hidden;\n box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 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 border-radius: var(--border-radius-default);\n transform: translateY(-25px);\n transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n outline: none;\n}\nsd-modal > ._dialog > ._header {\n display: flex;\n align-items: center;\n user-select: none;\n border-bottom: 1px solid var(--theme-gray-lighter);\n background: var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n flex: 1;\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._content {\n flex: 1;\n overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n top: 0;\n left: 0;\n width: var(--gap-sm);\n height: 100%;\n cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n top: 0;\n right: 0;\n width: var(--gap-sm);\n height: 100%;\n cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n top: 0;\n left: 0;\n width: 100%;\n height: var(--gap-sm);\n cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n right: 0;\n top: 0;\n width: var(--gap-sm);\n height: var(--gap-sm);\n z-index: 1;\n cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n left: 0;\n top: 0;\n width: var(--gap-sm);\n height: var(--gap-sm);\n cursor: nwse-resize;\n z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n bottom: 0;\n left: 0;\n width: 100%;\n height: var(--gap-sm);\n cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n right: 0;\n bottom: 0;\n width: var(--gap-sm);\n height: var(--gap-sm);\n z-index: 1;\n cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n left: 0;\n bottom: 0;\n width: var(--gap-sm);\n height: var(--gap-sm);\n cursor: nesw-resize;\n z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n opacity: 1;\n pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n transform: none;\n}\nsd-modal[data-sd-float] {\n pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n pointer-events: auto;\n opacity: 0;\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 border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 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}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n pointer-events: auto;\n opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n position: absolute;\n right: calc(var(--gap-xxl) * 2);\n bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n position: absolute;\n right: var(--gap-xxl);\n top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n width: 100%;\n height: 100%;\n border: none;\n border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n background: transparent;\n color: var(--text-trans-lighter);\n}"] }]
|
|
413
413
|
}], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], headerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyle", required: false }] }], useCloseByBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByBackdrop", required: false }] }], useCloseByEscapeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByEscapeKey", required: false }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], movable: [{ type: i0.Input, args: [{ isSignal: true, alias: "movable", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], minHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeightPx", required: false }] }], minWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidthPx", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], actionTplRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTplRef", required: false }] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] }); })();
|
|
414
414
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModal, { className: "SdModal", filePath: "packages/angular/src/core/modal/sd-modal.ts", lineNumber: 325 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"provideSdAngular.d.ts","sourceRoot":"","sources":["../../src/core/provideSdAngular.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAmC1D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB,
|
|
1
|
+
{"version":3,"file":"provideSdAngular.d.ts","sourceRoot":"","sources":["../../src/core/provideSdAngular.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAmC1D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB,CAqJlF"}
|
|
@@ -32,18 +32,6 @@ export function provideSdAngular(opt) {
|
|
|
32
32
|
return;
|
|
33
33
|
const sdTheme = inject(SdThemeProvider);
|
|
34
34
|
const sdLocalStorage = inject(SdLocalStorageProvider);
|
|
35
|
-
const savedDark = sdLocalStorage.get("sd-theme-dark");
|
|
36
|
-
if (savedDark != null) {
|
|
37
|
-
sdTheme.dark.set(savedDark);
|
|
38
|
-
}
|
|
39
|
-
let prevDark = sdTheme.dark();
|
|
40
|
-
effect(() => {
|
|
41
|
-
const dark = sdTheme.dark();
|
|
42
|
-
if (dark !== prevDark) {
|
|
43
|
-
sdLocalStorage.set("sd-theme-dark", dark);
|
|
44
|
-
prevDark = dark;
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
35
|
const savedBlueprint = sdLocalStorage.get("sd-theme-blueprint");
|
|
48
36
|
if (savedBlueprint != null) {
|
|
49
37
|
sdTheme.blueprint.set(savedBlueprint);
|
|
@@ -5,12 +5,12 @@ export class SdToastContainer {
|
|
|
5
5
|
static ɵfac = function SdToastContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdToastContainer)(); };
|
|
6
6
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdToastContainer, selectors: [["sd-toast-container"]], hostVars: 1, hostBindings: function SdToastContainer_HostBindings(rf, ctx) { if (rf & 2) {
|
|
7
7
|
i0.ɵɵattribute("data-sd-overlap", ctx.overlap() || undefined);
|
|
8
|
-
} }, inputs: { overlap: [1, "overlap"] }, decls: 0, vars: 0, template: function SdToastContainer_Template(rf, ctx) { }, styles: ["
|
|
8
|
+
} }, inputs: { overlap: [1, "overlap"] }, decls: 0, vars: 0, template: function SdToastContainer_Template(rf, ctx) { }, styles: ["sd-toast-container {\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n pointer-events: none;\n padding: var(--gap-xxl);\n z-index: 9999;\n flex-direction: column;\n}\n@supports not (appearance: auto) {\n sd-toast-container.gap-xxs {\n gap: 0;\n }\n sd-toast-container.gap-xxs > * + * {\n margin-top: var(--gap-xxs);\n }\n sd-toast-container.gap-xs {\n gap: 0;\n }\n sd-toast-container.gap-xs > * + * {\n margin-top: var(--gap-xs);\n }\n sd-toast-container.gap-sm {\n gap: 0;\n }\n sd-toast-container.gap-sm > * + * {\n margin-top: var(--gap-sm);\n }\n sd-toast-container.gap-default {\n gap: 0;\n }\n sd-toast-container.gap-default > * + * {\n margin-top: var(--gap-default);\n }\n sd-toast-container.gap-lg {\n gap: 0;\n }\n sd-toast-container.gap-lg > * + * {\n margin-top: var(--gap-lg);\n }\n sd-toast-container.gap-xl {\n gap: 0;\n }\n sd-toast-container.gap-xl > * + * {\n margin-top: var(--gap-xl);\n }\n sd-toast-container.gap-xxl {\n gap: 0;\n }\n sd-toast-container.gap-xxl > * + * {\n margin-top: var(--gap-xxl);\n }\n sd-toast-container.gap-0 {\n gap: 0;\n }\n sd-toast-container.gap-0 > * + * {\n margin-top: var(--gap-0);\n }\n sd-toast-container.gap-auto {\n gap: 0;\n }\n sd-toast-container.gap-auto > * + * {\n margin-top: var(--gap-auto);\n }\n}\n@media all and (max-width: 520px) {\n sd-toast-container {\n flex-direction: column-reverse;\n }\n}\nsd-toast-container[data-sd-overlap] {\n display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n position: absolute;\n bottom: var(--gap-xxl);\n left: var(--gap-xxl);\n right: var(--gap-xxl);\n width: auto;\n}"], encapsulation: 2 });
|
|
9
9
|
}
|
|
10
10
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToastContainer, [{
|
|
11
11
|
type: Component,
|
|
12
12
|
args: [{ selector: "sd-toast-container", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, host: {
|
|
13
13
|
"[attr.data-sd-overlap]": "overlap() || undefined",
|
|
14
|
-
}, template: "", styles: ["
|
|
14
|
+
}, template: "", styles: ["sd-toast-container {\n display: flex;\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n pointer-events: none;\n padding: var(--gap-xxl);\n z-index: 9999;\n flex-direction: column;\n}\n@supports not (appearance: auto) {\n sd-toast-container.gap-xxs {\n gap: 0;\n }\n sd-toast-container.gap-xxs > * + * {\n margin-top: var(--gap-xxs);\n }\n sd-toast-container.gap-xs {\n gap: 0;\n }\n sd-toast-container.gap-xs > * + * {\n margin-top: var(--gap-xs);\n }\n sd-toast-container.gap-sm {\n gap: 0;\n }\n sd-toast-container.gap-sm > * + * {\n margin-top: var(--gap-sm);\n }\n sd-toast-container.gap-default {\n gap: 0;\n }\n sd-toast-container.gap-default > * + * {\n margin-top: var(--gap-default);\n }\n sd-toast-container.gap-lg {\n gap: 0;\n }\n sd-toast-container.gap-lg > * + * {\n margin-top: var(--gap-lg);\n }\n sd-toast-container.gap-xl {\n gap: 0;\n }\n sd-toast-container.gap-xl > * + * {\n margin-top: var(--gap-xl);\n }\n sd-toast-container.gap-xxl {\n gap: 0;\n }\n sd-toast-container.gap-xxl > * + * {\n margin-top: var(--gap-xxl);\n }\n sd-toast-container.gap-0 {\n gap: 0;\n }\n sd-toast-container.gap-0 > * + * {\n margin-top: var(--gap-0);\n }\n sd-toast-container.gap-auto {\n gap: 0;\n }\n sd-toast-container.gap-auto > * + * {\n margin-top: var(--gap-auto);\n }\n}\n@media all and (max-width: 520px) {\n sd-toast-container {\n flex-direction: column-reverse;\n }\n}\nsd-toast-container[data-sd-overlap] {\n display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n position: absolute;\n bottom: var(--gap-xxl);\n left: var(--gap-xxl);\n right: var(--gap-xxl);\n width: auto;\n}"] }]
|
|
15
15
|
}], null, { overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }] }); })();
|
|
16
16
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdToastContainer, { className: "SdToastContainer", filePath: "packages/angular/src/core/toast/sd-toast-container.ts", lineNumber: 56 }); })();
|
|
@@ -64,7 +64,7 @@ export class SdToast {
|
|
|
64
64
|
i0.ɵɵconditional(ctx.message() != undefined ? 2 : 3);
|
|
65
65
|
i0.ɵɵadvance(2);
|
|
66
66
|
i0.ɵɵconditional(ctx.useProgress() ? 4 : -1);
|
|
67
|
-
} }, styles: ["
|
|
67
|
+
} }, styles: ["sd-toast {\n display: block;\n margin-bottom: var(--gap-sm);\n text-align: center;\n width: 100%;\n pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n display: inline-block;\n text-align: left;\n color: var(--text-trans-rev-default);\n transform: translateY(-100%);\n border-radius: var(--border-radius-lg);\n opacity: 0;\n box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 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 pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--gap-default) var(--gap-lg);\n word-break: break-all;\n white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-gray-default);\n height: 4px;\n border-radius: var(--border-radius-xl);\n margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n border-radius: var(--border-radius-xl);\n height: 4px;\n transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n transform: none;\n transition: var(--animation-duration) ease-out;\n transition-property: transform, opacity;\n opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n transform: translateY(-100%);\n transition: var(--animation-duration) ease-in;\n transition-property: transform, opacity;\n opacity: 0;\n}\n@media all and (max-width: 520px) {\n sd-toast > ._sd-toast-block {\n border-radius: calc(var(--line-height) / 2);\n transform: translateY(100%);\n }\n sd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--gap-xs) var(--gap-default);\n }\n sd-toast[data-sd-open=false] > ._sd-toast-block {\n transform: translateY(100%);\n }\n}"], encapsulation: 2 });
|
|
68
68
|
}
|
|
69
69
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToast, [{
|
|
70
70
|
type: Component,
|
|
@@ -88,6 +88,6 @@ export class SdToast {
|
|
|
88
88
|
</div>
|
|
89
89
|
}
|
|
90
90
|
</div>
|
|
91
|
-
`, styles: ["
|
|
91
|
+
`, styles: ["sd-toast {\n display: block;\n margin-bottom: var(--gap-sm);\n text-align: center;\n width: 100%;\n pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n display: inline-block;\n text-align: left;\n color: var(--text-trans-rev-default);\n transform: translateY(-100%);\n border-radius: var(--border-radius-lg);\n opacity: 0;\n box-shadow: 0 calc(12 * var(--elevation-size)) calc(12 * 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 pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--gap-default) var(--gap-lg);\n word-break: break-all;\n white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-gray-default);\n height: 4px;\n border-radius: var(--border-radius-xl);\n margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n border-radius: var(--border-radius-xl);\n height: 4px;\n transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n background: var(--theme-gray-default);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-gray-darker);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-gray-lighter);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n background: var(--theme-blue-gray-default);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-blue-gray-darker);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-blue-gray-lighter);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n background: var(--theme-primary-default);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-primary-darker);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-primary-lighter);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block {\n background: var(--theme-secondary-default);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-secondary-darker);\n}\nsd-toast[data-sd-theme=secondary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-secondary-lighter);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n background: var(--theme-info-default);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-info-darker);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-info-lighter);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n background: var(--theme-success-default);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-success-darker);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-success-lighter);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n background: var(--theme-warning-default);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-warning-darker);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-warning-lighter);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n background: var(--theme-danger-default);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n background: var(--theme-danger-darker);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background: var(--theme-danger-lighter);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n transform: none;\n transition: var(--animation-duration) ease-out;\n transition-property: transform, opacity;\n opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n transform: translateY(-100%);\n transition: var(--animation-duration) ease-in;\n transition-property: transform, opacity;\n opacity: 0;\n}\n@media all and (max-width: 520px) {\n sd-toast > ._sd-toast-block {\n border-radius: calc(var(--line-height) / 2);\n transform: translateY(100%);\n }\n sd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--gap-xs) var(--gap-default);\n }\n sd-toast[data-sd-open=false] > ._sd-toast-block {\n transform: translateY(100%);\n }\n}"] }]
|
|
92
92
|
}], null, { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], useProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "useProgress", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }, { type: i0.Output, args: ["progressChange"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }, { type: i0.Output, args: ["messageChange"] }] }); })();
|
|
93
93
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdToast, { className: "SdToast", filePath: "packages/angular/src/core/toast/sd-toast.ts", lineNumber: 139 }); })();
|
|
@@ -26,7 +26,7 @@ export class SdKanbanBoard {
|
|
|
26
26
|
} }, inputs: { selectedValues: [1, "selectedValues"] }, outputs: { selectedValues: "selectedValuesChange", drop: "drop" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdKanbanBoard_Template(rf, ctx) { if (rf & 1) {
|
|
27
27
|
i0.ɵɵprojectionDef();
|
|
28
28
|
i0.ɵɵprojection(0);
|
|
29
|
-
} }, styles: ["
|
|
29
|
+
} }, styles: ["sd-kanban-board {\n display: inline-flex;\n flex-wrap: nowrap;\n white-space: nowrap;\n height: 100%;\n flex-direction: row;\n gap: var(--gap-lg);\n}\n@supports not (appearance: auto) {\n sd-kanban-board {\n gap: 0;\n }\n sd-kanban-board > * + * {\n margin-left: var(--gap-lg);\n }\n sd-kanban-board.gap-xxs {\n gap: 0;\n }\n sd-kanban-board.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-kanban-board.gap-xs {\n gap: 0;\n }\n sd-kanban-board.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-kanban-board.gap-sm {\n gap: 0;\n }\n sd-kanban-board.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-kanban-board.gap-default {\n gap: 0;\n }\n sd-kanban-board.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-kanban-board.gap-lg {\n gap: 0;\n }\n sd-kanban-board.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-kanban-board.gap-xl {\n gap: 0;\n }\n sd-kanban-board.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-kanban-board.gap-xxl {\n gap: 0;\n }\n sd-kanban-board.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-kanban-board.gap-0 {\n gap: 0;\n }\n sd-kanban-board.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-kanban-board.gap-auto {\n gap: 0;\n }\n sd-kanban-board.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"], encapsulation: 2 });
|
|
30
30
|
}
|
|
31
31
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanBoard, [{
|
|
32
32
|
type: Component,
|
|
@@ -34,6 +34,6 @@ export class SdKanbanBoard {
|
|
|
34
34
|
"(document:dragend)": "onDocumentDragEnd()",
|
|
35
35
|
}, template: `
|
|
36
36
|
<ng-content></ng-content>
|
|
37
|
-
`, styles: ["
|
|
37
|
+
`, styles: ["sd-kanban-board {\n display: inline-flex;\n flex-wrap: nowrap;\n white-space: nowrap;\n height: 100%;\n flex-direction: row;\n gap: var(--gap-lg);\n}\n@supports not (appearance: auto) {\n sd-kanban-board {\n gap: 0;\n }\n sd-kanban-board > * + * {\n margin-left: var(--gap-lg);\n }\n sd-kanban-board.gap-xxs {\n gap: 0;\n }\n sd-kanban-board.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-kanban-board.gap-xs {\n gap: 0;\n }\n sd-kanban-board.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-kanban-board.gap-sm {\n gap: 0;\n }\n sd-kanban-board.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-kanban-board.gap-default {\n gap: 0;\n }\n sd-kanban-board.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-kanban-board.gap-lg {\n gap: 0;\n }\n sd-kanban-board.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-kanban-board.gap-xl {\n gap: 0;\n }\n sd-kanban-board.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-kanban-board.gap-xxl {\n gap: 0;\n }\n sd-kanban-board.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-kanban-board.gap-0 {\n gap: 0;\n }\n sd-kanban-board.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-kanban-board.gap-auto {\n gap: 0;\n }\n sd-kanban-board.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"] }]
|
|
38
38
|
}], null, { selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }, { type: i0.Output, args: ["selectedValuesChange"] }], drop: [{ type: i0.Output, args: ["drop"] }] }); })();
|
|
39
39
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdKanbanBoard, { className: "SdKanbanBoard", filePath: "packages/angular/src/data/kanban/sd-kanban-board.ts", lineNumber: 36 }); })();
|
|
@@ -794,7 +794,7 @@ export class SdSheet {
|
|
|
794
794
|
SdPagination,
|
|
795
795
|
SdAnchor,
|
|
796
796
|
SdButton,
|
|
797
|
-
SdResizeDirective], styles: ["
|
|
797
|
+
SdResizeDirective], styles: ["sd-sheet {\n border: 1px solid var(--border-color-lighter);\n border-radius: var(--border-radius-default);\n}\nsd-sheet > ._tool {\n background: var(--control-color);\n border-top-left-radius: var(--border-radius-default);\n border-top-right-radius: var(--border-radius-default);\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container {\n position: relative;\n background: var(--sheet-bg);\n border-bottom-left-radius: var(--border-radius-default);\n border-bottom-right-radius: var(--border-radius-default);\n overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n border-spacing: 0;\n table-layout: fixed;\n margin-right: 2px;\n margin-bottom: 2px;\n border-bottom-right-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n border-right: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n border-bottom-right-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n border-right: 1px solid var(--border-color-lighter);\n border-bottom: 1px solid var(--border-color-lighter);\n white-space: nowrap;\n overflow: hidden;\n padding: 0;\n position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n border-left: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n background: var(--theme-gray-lightest);\n min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);\n padding: var(--sheet-pv) var(--sheet-ph);\n text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n cursor: pointer;\n color: var(--text-trans-lightest);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n position: sticky;\n left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n border-right: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead {\n position: sticky;\n top: 0;\n z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n position: relative;\n background: var(--theme-gray-lightest);\n vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;\n background-color: var(--theme-gray-lightest);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 2px;\n cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n background: var(--theme-warning-lightest);\n text-align: left;\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n font-family: var(--font-family-field);\n background: var(--control-color);\n vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n display: inline-block;\n margin-top: 0.4em;\n width: 0.5em;\n height: 0.5em;\n border-left: 1px solid var(--text-trans-default);\n border-bottom: 1px solid var(--text-trans-default);\n vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n display: none;\n position: absolute;\n pointer-events: none;\n background: rgba(158, 158, 158, 0.1);\n z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n position: absolute;\n border: 2px solid var(--theme-primary-default);\n border-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n display: none;\n position: absolute;\n pointer-events: none;\n top: 0;\n height: 100%;\n border: 1px dotted var(--border-color-light);\n z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n display: none;\n position: absolute;\n pointer-events: none;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n display: block;\n left: 0;\n position: absolute;\n pointer-events: none;\n background: var(--theme-primary-default);\n opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n padding: var(--sheet-pv) var(--sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n border: none;\n border-radius: 0;\n}"], encapsulation: 2 });
|
|
798
798
|
}
|
|
799
799
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSheet, [{
|
|
800
800
|
type: Component,
|
|
@@ -1089,6 +1089,6 @@ export class SdSheet {
|
|
|
1089
1089
|
></div>
|
|
1090
1090
|
<div class="_select-row-indicator-container"></div>
|
|
1091
1091
|
</div>
|
|
1092
|
-
`, styles: ["
|
|
1092
|
+
`, styles: ["sd-sheet {\n border: 1px solid var(--border-color-lighter);\n border-radius: var(--border-radius-default);\n}\nsd-sheet > ._tool {\n background: var(--control-color);\n border-top-left-radius: var(--border-radius-default);\n border-top-right-radius: var(--border-radius-default);\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container {\n position: relative;\n background: var(--sheet-bg);\n border-bottom-left-radius: var(--border-radius-default);\n border-bottom-right-radius: var(--border-radius-default);\n overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n border-spacing: 0;\n table-layout: fixed;\n margin-right: 2px;\n margin-bottom: 2px;\n border-bottom-right-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n border-right: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n border-bottom-right-radius: var(--border-radius-default);\n overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n border-right: 1px solid var(--border-color-lighter);\n border-bottom: 1px solid var(--border-color-lighter);\n white-space: nowrap;\n overflow: hidden;\n padding: 0;\n position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n border-left: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n background: var(--theme-gray-lightest);\n min-width: calc(var(--font-size-default) + 2px + var(--sheet-ph) * 2);\n padding: var(--sheet-pv) var(--sheet-ph);\n text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n cursor: pointer;\n color: var(--text-trans-lightest);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n position: sticky;\n left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n border-right: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead {\n position: sticky;\n top: 0;\n z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n position: relative;\n background: var(--theme-gray-lightest);\n vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n padding: var(--gap-xs) var(--gap-xs) var(--gap-xs) 0;\n background-color: var(--theme-gray-lightest);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 2px;\n cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n background: var(--theme-warning-lightest);\n text-align: left;\n border-bottom: 1px solid var(--border-color-lighter);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n font-family: var(--font-family-field);\n background: var(--control-color);\n vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n display: inline-block;\n margin-top: 0.4em;\n width: 0.5em;\n height: 0.5em;\n border-left: 1px solid var(--text-trans-default);\n border-bottom: 1px solid var(--text-trans-default);\n vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n display: none;\n position: absolute;\n pointer-events: none;\n background: rgba(158, 158, 158, 0.1);\n z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n position: absolute;\n border: 2px solid var(--theme-primary-default);\n border-radius: var(--border-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n display: none;\n position: absolute;\n pointer-events: none;\n top: 0;\n height: 100%;\n border: 1px dotted var(--border-color-light);\n z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n display: none;\n position: absolute;\n pointer-events: none;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n display: block;\n left: 0;\n position: absolute;\n pointer-events: none;\n background: var(--theme-primary-default);\n opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n padding: var(--sheet-pv) var(--sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n border: none;\n border-radius: 0;\n}"] }]
|
|
1093
1093
|
}], null, { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], getItemSelectableFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemSelectableFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], useAutoSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAutoSort", required: false }] }], visiblePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePageCount", required: false }] }], totalPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPageCount", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], getItemCellClassFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellClassFn", required: false }] }], getItemCellStyleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellStyleFn", required: false }] }], hideConfigBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideConfigBar", required: false }] }], itemKeydown: [{ type: i0.Output, args: ["itemKeydown"] }], cellKeydown: [{ type: i0.Output, args: ["cellKeydown"] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }, { type: i0.Output, args: ["selectedKeysChange"] }], expandedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedItems", required: false }] }, { type: i0.Output, args: ["expandedItemsChange"] }], sorts: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorts", required: false }] }, { type: i0.Output, args: ["sortsChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], columnControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSheetColumn), { isSignal: true }] }], columnControlsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnControlsInput", required: false }] }] }); })();
|
|
1094
1094
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheet, { className: "SdSheet", filePath: "packages/angular/src/data/sheet/sd-sheet.ts", lineNumber: 586 }); })();
|