@simplysm/angular 14.2.2 → 14.2.3
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-anchor.d.ts +1 -1
- package/dist/controls/button/sd-anchor.d.ts.map +1 -1
- package/dist/controls/button/sd-anchor.js +2 -2
- package/dist/controls/button/sd-button.d.ts +1 -1
- package/dist/controls/button/sd-button.d.ts.map +1 -1
- package/dist/controls/button/sd-button.js +2 -2
- package/dist/controls/checkbox/sd-checkbox.d.ts +1 -1
- package/dist/controls/checkbox/sd-checkbox.d.ts.map +1 -1
- package/dist/controls/checkbox/sd-checkbox.js +2 -2
- package/dist/controls/checkbox/sd-switch.d.ts +1 -1
- package/dist/controls/checkbox/sd-switch.d.ts.map +1 -1
- package/dist/controls/checkbox/sd-switch.js +2 -2
- package/dist/controls/dropdown/sd-dropdown.d.ts +3 -0
- package/dist/controls/dropdown/sd-dropdown.d.ts.map +1 -1
- package/dist/controls/dropdown/sd-dropdown.js +29 -9
- package/dist/controls/input/sd-textarea.d.ts +1 -1
- package/dist/controls/input/sd-textarea.d.ts.map +1 -1
- package/dist/controls/input/sd-textarea.js +2 -2
- package/dist/controls/input/sd-textfield-type-handlers.js +1 -1
- package/dist/controls/input/sd-textfield.d.ts +1 -1
- package/dist/controls/input/sd-textfield.d.ts.map +1 -1
- package/dist/controls/input/sd-textfield.js +9 -10
- package/dist/controls/list/sd-list.d.ts.map +1 -1
- package/dist/controls/list/sd-list.js +4 -6
- package/dist/controls/select/sd-select-button.d.ts.map +1 -1
- package/dist/controls/select/sd-select-button.js +3 -5
- package/dist/controls/select/sd-select.js +2 -2
- package/dist/core/error-handler/sd-global-error-handler.plugin.js +1 -1
- package/dist/core/modal/sd-modal.provider.js +1 -1
- package/dist/core/provideSdAngular.d.ts.map +1 -1
- package/dist/core/provideSdAngular.js +1 -13
- package/dist/core/setupBgTheme.d.ts +1 -1
- package/dist/core/setupBgTheme.d.ts.map +1 -1
- package/dist/core/toast/sd-toast.js +2 -2
- package/dist/core/toast/sd-toast.provider.d.ts +1 -1
- package/dist/core/toast/sd-toast.provider.d.ts.map +1 -1
- package/dist/core/toast/sd-toast.provider.js +1 -1
- package/dist/data/crud/sd-base-container.js +2 -2
- package/dist/data/sheet/injectSheetDomAccessor.d.ts +1 -0
- package/dist/data/sheet/injectSheetDomAccessor.d.ts.map +1 -1
- package/dist/data/sheet/injectSheetDomAccessor.js +7 -0
- package/dist/data/sheet/injectSheetDragSelection.d.ts +18 -0
- package/dist/data/sheet/injectSheetDragSelection.d.ts.map +1 -0
- package/dist/data/sheet/injectSheetDragSelection.js +193 -0
- package/dist/data/sheet/sd-sheet.d.ts +3 -0
- package/dist/data/sheet/sd-sheet.d.ts.map +1 -1
- package/dist/data/sheet/sd-sheet.js +17 -6
- package/dist/features/editor/sd-tiptap-editor.js +2 -2
- package/dist/features/theme/sd-theme-provider.d.ts +0 -2
- package/dist/features/theme/sd-theme-provider.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-provider.js +0 -5
- package/dist/features/theme/sd-theme-selector.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-selector.js +5 -22
- package/dist/features/visual/sd-label.d.ts +1 -1
- package/dist/features/visual/sd-label.d.ts.map +1 -1
- package/dist/features/visual/sd-label.js +2 -2
- package/dist/features/visual/sd-note.d.ts +1 -1
- package/dist/features/visual/sd-note.d.ts.map +1 -1
- package/dist/features/visual/sd-note.js +2 -2
- package/dist/features/visual/sd-progress.d.ts +1 -1
- package/dist/features/visual/sd-progress.d.ts.map +1 -1
- package/dist/features/visual/sd-progress.js +2 -2
- package/dist/layout/sidebar/sd-sidebar.d.ts.map +1 -1
- package/dist/layout/sidebar/sd-sidebar.js +3 -5
- package/dist/layout/topbar/sd-topbar.d.ts.map +1 -1
- package/dist/layout/topbar/sd-topbar.js +3 -3
- package/package.json +5 -5
- package/scss/commons/_mixins.scss +1 -1
- package/scss/commons/_theme-variables.scss +0 -8
- package/scss/commons/_variables.scss +114 -121
- package/scss/themes/_variables-blueprint.scss +65 -63
- package/scss/themes/_variables-ide-dark.scss +166 -144
- package/src/controls/button/sd-anchor.ts +3 -3
- package/src/controls/button/sd-button.ts +1 -3
- package/src/controls/checkbox/sd-checkbox.ts +2 -10
- package/src/controls/checkbox/sd-switch.ts +2 -4
- package/src/controls/dropdown/sd-dropdown.ts +33 -9
- package/src/controls/input/sd-textarea.ts +2 -4
- package/src/controls/input/sd-textfield-type-handlers.ts +1 -1
- package/src/controls/input/sd-textfield.ts +9 -12
- package/src/controls/list/sd-list.ts +3 -5
- package/src/controls/select/sd-select-button.ts +2 -4
- package/src/controls/select/sd-select.ts +1 -1
- package/src/core/error-handler/sd-global-error-handler.plugin.ts +1 -1
- package/src/core/modal/sd-modal.provider.ts +1 -1
- package/src/core/provideSdAngular.ts +1 -15
- package/src/core/setupBgTheme.ts +1 -2
- package/src/core/toast/sd-toast.provider.ts +5 -3
- package/src/data/crud/sd-base-container.ts +1 -1
- package/src/data/sheet/injectSheetDomAccessor.ts +7 -0
- package/src/data/sheet/injectSheetDragSelection.ts +226 -0
- package/src/data/sheet/sd-sheet.ts +16 -3
- package/src/features/editor/sd-tiptap-editor.ts +1 -1
- package/src/features/theme/sd-theme-provider.ts +0 -9
- package/src/features/theme/sd-theme-selector.ts +1 -10
- package/src/features/visual/sd-label.ts +1 -3
- package/src/features/visual/sd-note.ts +1 -3
- package/src/features/visual/sd-progress.ts +2 -2
- package/src/layout/sidebar/sd-sidebar.ts +2 -3
- package/src/layout/topbar/sd-topbar.ts +1 -0
- package/styles.css +278 -567
- package/scss/commons/_colors.scss +0 -301
- package/scss/commons/_density.scss +0 -23
- package/scss/sd-tokens.md +0 -132
|
@@ -95,7 +95,7 @@ export class SdTextfield {
|
|
|
95
95
|
...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
96
96
|
_inputElRef = viewChild("inputEl", /* @ts-ignore */
|
|
97
97
|
...(ngDevMode ? [{ debugName: "_inputElRef" }] : /* istanbul ignore next */ []));
|
|
98
|
-
// 실제 input 의 브라우저 native 제약 위반(이메일
|
|
98
|
+
// 실제 input 의 브라우저 native 제약 위반(이메일 형식, 날짜 미완성 등) 메시지. onInput/onBlur 에서 갱신.
|
|
99
99
|
_nativeInvalidMessage = signal("", /* @ts-ignore */
|
|
100
100
|
...(ngDevMode ? [{ debugName: "_nativeInvalidMessage" }] : /* istanbul ignore next */ []));
|
|
101
101
|
// IME 조합(한글 등) 중 여부. 조합 중에는 미완성 자모가 model 로 흐르지 않도록 갱신을 보류.
|
|
@@ -137,11 +137,11 @@ export class SdTextfield {
|
|
|
137
137
|
if (this._composing)
|
|
138
138
|
return;
|
|
139
139
|
// 편집(포커스) 중이라도 변경 origin 을 구분한다.
|
|
140
|
-
// 사용자 입력이 만든 DOM(정규화
|
|
141
|
-
// 모델만 외부에서 바뀐 경우(프로그래밍적
|
|
140
|
+
// 사용자 입력이 만든 DOM(정규화 차이, 진행 중 입력 포함)은 보호하고,
|
|
141
|
+
// 모델만 외부에서 바뀐 경우(프로그래밍적 리셋, prefill, 표시옵션 변경)는 되써서 반영한다.
|
|
142
142
|
if (document.activeElement === inputEl) {
|
|
143
143
|
const domParsed = this._handler().parse(inputEl.value, { format: this.format() });
|
|
144
|
-
// DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아
|
|
144
|
+
// DOM raw 가 현재 모델의 유효한 표현이면(사용자 입력 유래) 되쓰지 않아 캐럿, IME 보호
|
|
145
145
|
const domReflectsModel = domParsed != null &&
|
|
146
146
|
this._handler().toControlValue(domParsed, {
|
|
147
147
|
useNumberComma: this.useNumberComma(),
|
|
@@ -158,9 +158,8 @@ export class SdTextfield {
|
|
|
158
158
|
});
|
|
159
159
|
}
|
|
160
160
|
setupInvalid(() => {
|
|
161
|
-
//
|
|
162
|
-
|
|
163
|
-
return "";
|
|
161
|
+
// 검증은 편집 가능 여부와 무관하다. disabled, readonly 여도 값이 제약을 어기면 invalid 다.
|
|
162
|
+
// 값이 무의미한 맥락이면 소비자가 제약(required 등)을 함께 내려야 한다.
|
|
164
163
|
const value = this.value();
|
|
165
164
|
const handlerErrors = this._handler().validate(value, {
|
|
166
165
|
required: this.required(),
|
|
@@ -178,7 +177,7 @@ export class SdTextfield {
|
|
|
178
177
|
errorMessages.push(message);
|
|
179
178
|
}
|
|
180
179
|
}
|
|
181
|
-
// 브라우저 native 제약 위반(이메일
|
|
180
|
+
// 브라우저 native 제약 위반(이메일 형식, 날짜 미완성 등)을 우리 검증(빨간점)에 합류
|
|
182
181
|
const nativeMessage = this._nativeInvalidMessage();
|
|
183
182
|
if (nativeMessage !== "") {
|
|
184
183
|
errorMessages.push(nativeMessage);
|
|
@@ -252,7 +251,7 @@ export class SdTextfield {
|
|
|
252
251
|
i0.ɵɵconditional(ctx.controlType() === "password" ? 1 : 2);
|
|
253
252
|
i0.ɵɵadvance(2);
|
|
254
253
|
i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 3 : -1);
|
|
255
|
-
} }, styles: ["sd-textfield {\n display: block;\n position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n font-family: var(--sd-font-family-field);\n overflow: auto;\n width: 100%;\n border: 1px solid var(--sd-bd-field);\n border-radius: var(--sd-radius-default);\n background-color: var(--sd-bg-field);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n outline: none;\n border-color: var(--sd-focus-ring-color);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n padding-top: calc(var(--sd-gap-sm) - 1px);\n padding-bottom: calc(var(--sd-gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n color: var(--sd-tx-faint);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n cursor: pointer;\n margin: auto;\n}\nsd-textfield > ._contents {\n display: none;\n}\nsd-textfield > ._contents > pre {\n font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-textfield[data-sd-theme=
|
|
254
|
+
} }, styles: ["sd-textfield {\n display: block;\n position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n font-family: var(--sd-font-family-field);\n overflow: auto;\n width: 100%;\n border: 1px solid var(--sd-bd-field);\n border-radius: var(--sd-radius-default);\n background-color: var(--sd-bg-field);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n outline: none;\n border-color: var(--sd-focus-ring-color);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n padding-top: calc(var(--sd-gap-sm) - 1px);\n padding-bottom: calc(var(--sd-gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n color: var(--sd-tx-faint);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n cursor: pointer;\n margin: auto;\n}\nsd-textfield > ._contents {\n display: none;\n}\nsd-textfield > ._contents > pre {\n font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n background-color: var(--sd-bg-info-subtle);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n background-color: var(--sd-bg-success-subtle);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n background-color: var(--sd-bg-warning-subtle);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n background-color: var(--sd-bg-danger-subtle);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n padding-top: calc(var(--sd-gap-xs) - 1px);\n padding-bottom: calc(var(--sd-gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n padding-top: calc(var(--sd-gap-default) - 1px);\n padding-bottom: calc(var(--sd-gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n width: auto;\n vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n position: absolute;\n top: 0;\n left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n width: 100%;\n border: none;\n border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n display: block;\n background-color: var(--sd-bg-disabled);\n color: var(--sd-tx-disabled);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n background-color: var(--sd-bg-content);\n color: var(--sd-tx-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n display: block;\n}"], encapsulation: 2 });
|
|
256
255
|
}
|
|
257
256
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextfield, [{
|
|
258
257
|
type: Component,
|
|
@@ -302,6 +301,6 @@ export class SdTextfield {
|
|
|
302
301
|
"[attr.data-sd-inset]": "inset()",
|
|
303
302
|
"[attr.data-sd-size]": "size()",
|
|
304
303
|
"[attr.data-sd-theme]": "theme()",
|
|
305
|
-
}, styles: ["sd-textfield {\n display: block;\n position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n font-family: var(--sd-font-family-field);\n overflow: auto;\n width: 100%;\n border: 1px solid var(--sd-bd-field);\n border-radius: var(--sd-radius-default);\n background-color: var(--sd-bg-field);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n outline: none;\n border-color: var(--sd-focus-ring-color);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n padding-top: calc(var(--sd-gap-sm) - 1px);\n padding-bottom: calc(var(--sd-gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n color: var(--sd-tx-faint);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n cursor: pointer;\n margin: auto;\n}\nsd-textfield > ._contents {\n display: none;\n}\nsd-textfield > ._contents > pre {\n font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-textfield[data-sd-theme=
|
|
304
|
+
}, styles: ["sd-textfield {\n display: block;\n position: relative;\n}\nsd-textfield > input,\nsd-textfield > ._contents {\n display: block;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border: 1px solid transparent;\n font-size: var(--sd-font-size-default);\n font-family: var(--sd-font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--sd-line-height);\n color: var(--sd-tx-default);\n font-family: var(--sd-font-family-field);\n overflow: auto;\n width: 100%;\n border: 1px solid var(--sd-bd-field);\n border-radius: var(--sd-radius-default);\n background-color: var(--sd-bg-field);\n}\nsd-textfield > input:focus,\nsd-textfield > ._contents:focus {\n outline: none;\n border-color: var(--sd-focus-ring-color);\n}\nsd-textfield > input[type=date], sd-textfield > input[type=month], sd-textfield > input[type=datetime-local],\nsd-textfield > ._contents[type=date],\nsd-textfield > ._contents[type=month],\nsd-textfield > ._contents[type=datetime-local] {\n padding-top: calc(var(--sd-gap-sm) - 1px);\n padding-bottom: calc(var(--sd-gap-sm) - 1px);\n}\nsd-textfield > input::-webkit-scrollbar,\nsd-textfield > ._contents::-webkit-scrollbar {\n display: none;\n}\nsd-textfield > input::-webkit-input-placeholder,\nsd-textfield > ._contents::-webkit-input-placeholder {\n color: var(--sd-tx-faint);\n}\nsd-textfield > input::-webkit-outer-spin-button, sd-textfield > input::-webkit-inner-spin-button,\nsd-textfield > ._contents::-webkit-outer-spin-button,\nsd-textfield > ._contents::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\nsd-textfield > input::-webkit-calendar-picker-indicator,\nsd-textfield > ._contents::-webkit-calendar-picker-indicator {\n cursor: pointer;\n margin: auto;\n}\nsd-textfield > ._contents {\n display: none;\n}\nsd-textfield > ._contents > pre {\n font-family: inherit;\n}\nsd-textfield[data-sd-type=number] > input,\nsd-textfield[data-sd-type=number] > ._contents {\n text-align: right;\n}\nsd-textfield[data-sd-theme=gray] > input,\nsd-textfield[data-sd-theme=gray] > ._contents {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-textfield[data-sd-theme=blue-gray] > input,\nsd-textfield[data-sd-theme=blue-gray] > ._contents {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-textfield[data-sd-theme=primary] > input,\nsd-textfield[data-sd-theme=primary] > ._contents {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-textfield[data-sd-theme=info] > input,\nsd-textfield[data-sd-theme=info] > ._contents {\n background-color: var(--sd-bg-info-subtle);\n}\nsd-textfield[data-sd-theme=success] > input,\nsd-textfield[data-sd-theme=success] > ._contents {\n background-color: var(--sd-bg-success-subtle);\n}\nsd-textfield[data-sd-theme=warning] > input,\nsd-textfield[data-sd-theme=warning] > ._contents {\n background-color: var(--sd-bg-warning-subtle);\n}\nsd-textfield[data-sd-theme=danger] > input,\nsd-textfield[data-sd-theme=danger] > ._contents {\n background-color: var(--sd-bg-danger-subtle);\n}\nsd-textfield[data-sd-size=sm] > input,\nsd-textfield[data-sd-size=sm] > ._contents {\n padding: var(--sd-gap-xs) var(--sd-gap-sm);\n}\nsd-textfield[data-sd-size=sm] > input[type=date], sd-textfield[data-sd-size=sm] > input[type=month], sd-textfield[data-sd-size=sm] > input[type=datetime-local], sd-textfield[data-sd-size=sm] > input[type=color],\nsd-textfield[data-sd-size=sm] > ._contents[type=date],\nsd-textfield[data-sd-size=sm] > ._contents[type=month],\nsd-textfield[data-sd-size=sm] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=sm] > ._contents[type=color] {\n padding-top: calc(var(--sd-gap-xs) - 1px);\n padding-bottom: calc(var(--sd-gap-xs) - 1px);\n}\nsd-textfield[data-sd-size=lg] > input,\nsd-textfield[data-sd-size=lg] > ._contents {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-textfield[data-sd-size=lg] > input[type=date], sd-textfield[data-sd-size=lg] > input[type=month], sd-textfield[data-sd-size=lg] > input[type=datetime-local], sd-textfield[data-sd-size=lg] > input[type=color],\nsd-textfield[data-sd-size=lg] > ._contents[type=date],\nsd-textfield[data-sd-size=lg] > ._contents[type=month],\nsd-textfield[data-sd-size=lg] > ._contents[type=datetime-local],\nsd-textfield[data-sd-size=lg] > ._contents[type=color] {\n padding-top: calc(var(--sd-gap-default) - 1px);\n padding-bottom: calc(var(--sd-gap-default) - 1px);\n}\nsd-textfield[data-sd-inline=true] {\n display: inline-block;\n vertical-align: top;\n}\nsd-textfield[data-sd-inline=true] > input,\nsd-textfield[data-sd-inline=true] > ._contents {\n width: auto;\n vertical-align: top;\n}\nsd-textfield[data-sd-inset=true] > ._contents {\n display: block;\n}\nsd-textfield[data-sd-inset=true] > input {\n position: absolute;\n top: 0;\n left: 0;\n}\nsd-textfield[data-sd-inset=true] > input,\nsd-textfield[data-sd-inset=true] > ._contents {\n width: 100%;\n border: none;\n border-radius: 0;\n}\nsd-textfield[data-sd-inset=true] > input:focus {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=month] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=month] > ._contents {\n min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=date] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=date] > ._contents {\n min-width: 8.25em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=datetime-local] > ._contents {\n min-width: 14em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=year] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=year] > ._contents {\n min-width: 4em;\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color] > ._contents {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-sm) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=sm] > ._contents {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-xs) * 2);\n}\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > input,\nsd-textfield[data-sd-inset=true][data-sd-type=color][data-sd-size=lg] > ._contents {\n height: calc(var(--sd-font-size-default) * var(--sd-line-height-strip-unit) + var(--sd-gap-default) * 2);\n}\nsd-textfield[data-sd-disabled=true] > ._contents {\n display: block;\n background-color: var(--sd-bg-disabled);\n color: var(--sd-tx-disabled);\n}\nsd-textfield[data-sd-disabled=true][data-sd-inset=true] > ._contents {\n background-color: var(--sd-bg-content);\n color: var(--sd-tx-default);\n}\nsd-textfield[data-sd-readonly=true] > ._contents {\n display: block;\n}"] }]
|
|
306
305
|
}], () => [], { 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
306
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextfield, { className: "SdTextfield", filePath: "packages/angular/src/controls/input/sd-textfield.ts", lineNumber: 300 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-list.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list.ts"],"names":[],"mappings":";AAQA,
|
|
1
|
+
{"version":3,"file":"sd-list.d.ts","sourceRoot":"","sources":["../../../src/controls/list/sd-list.ts"],"names":[],"mappings":";AAQA,qBA0Ca,MAAM;IACjB,KAAK,qEAAiD;yCAD3C,MAAM;2CAAN,MAAM;CAElB"}
|
|
@@ -9,14 +9,12 @@ export class SdList {
|
|
|
9
9
|
} }, inputs: { inset: [1, "inset"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdList_Template(rf, ctx) { if (rf & 1) {
|
|
10
10
|
i0.ɵɵprojectionDef();
|
|
11
11
|
i0.ɵɵprojection(0);
|
|
12
|
-
} }, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background-color: var(--sd-bg-
|
|
12
|
+
} }, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background-color: var(--sd-bg-content);\n border: 1px solid var(--sd-bd-strong);\n border-radius: var(--sd-radius-default);\n padding: var(--sd-gap-sm);\n gap: var(--sd-gap-xs);\n}\nsd-list[data-sd-inset=true] {\n background-color: transparent;\n border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n background-color: transparent;\n}\nsd-list sd-list-item sd-list {\n border-color: transparent;\n border-radius: 0;\n padding: 0;\n background-color: transparent;\n}"], encapsulation: 2 });
|
|
13
13
|
}
|
|
14
14
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdList, [{
|
|
15
15
|
type: Component,
|
|
16
|
-
args: [{ selector: "sd-list", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
|
|
17
|
-
<ng-content />
|
|
18
|
-
`, host: {
|
|
16
|
+
args: [{ selector: "sd-list", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: ` <ng-content /> `, host: {
|
|
19
17
|
"[attr.data-sd-inset]": "inset()",
|
|
20
|
-
}, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background-color: var(--sd-bg-
|
|
18
|
+
}, styles: ["sd-list {\n display: flex;\n flex-direction: column;\n user-select: none;\n background-color: var(--sd-bg-content);\n border: 1px solid var(--sd-bd-strong);\n border-radius: var(--sd-radius-default);\n padding: var(--sd-gap-sm);\n gap: var(--sd-gap-xs);\n}\nsd-list[data-sd-inset=true] {\n background-color: transparent;\n border: none;\n}\nsd-list[data-sd-inset=true] sd-list {\n background-color: transparent;\n}\nsd-list sd-list-item sd-list {\n border-color: transparent;\n border-radius: 0;\n padding: 0;\n background-color: transparent;\n}"] }]
|
|
21
19
|
}], null, { inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }] }); })();
|
|
22
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdList, { className: "SdList", filePath: "packages/angular/src/controls/list/sd-list.ts", lineNumber:
|
|
20
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdList, { className: "SdList", filePath: "packages/angular/src/controls/list/sd-list.ts", lineNumber: 51 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-button.ts"],"names":[],"mappings":";AAGA,
|
|
1
|
+
{"version":3,"file":"sd-select-button.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-button.ts"],"names":[],"mappings":";AAGA,qBA0Ba,cAAc;;yCAAd,cAAc;2CAAd,cAAc;CAI1B"}
|
|
@@ -10,12 +10,10 @@ export class SdSelectButton {
|
|
|
10
10
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSelectButton, selectors: [["sd-select-button"]], ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdSelectButton_Template(rf, ctx) { if (rf & 1) {
|
|
11
11
|
i0.ɵɵprojectionDef();
|
|
12
12
|
i0.ɵɵprojection(0);
|
|
13
|
-
} }, styles: ["sd-select-button {\n display: block;\n background-color: var(--sd-bg-
|
|
13
|
+
} }, styles: ["sd-select-button {\n display: block;\n background-color: var(--sd-bg-content);\n font-weight: bold;\n cursor: pointer;\n color: var(--sd-tx-primary);\n transition: background var(--sd-animation-duration) linear;\n}\nsd-select-button:hover {\n color: var(--sd-tx-primary-hover);\n background-color: var(--sd-bg-state-hover);\n}"], encapsulation: 2 });
|
|
14
14
|
}
|
|
15
15
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectButton, [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: "sd-select-button", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
|
|
18
|
-
<ng-content />
|
|
19
|
-
`, host: {}, styles: ["sd-select-button {\n display: block;\n background-color: var(--sd-bg-control);\n font-weight: bold;\n cursor: pointer;\n color: var(--sd-tx-primary);\n transition: background var(--sd-animation-duration) linear;\n}\nsd-select-button:hover {\n color: var(--sd-tx-primary-hover);\n background-color: var(--sd-bg-state-hover);\n}"] }]
|
|
17
|
+
args: [{ selector: "sd-select-button", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: ` <ng-content /> `, host: {}, styles: ["sd-select-button {\n display: block;\n background-color: var(--sd-bg-content);\n font-weight: bold;\n cursor: pointer;\n color: var(--sd-tx-primary);\n transition: background var(--sd-animation-duration) linear;\n}\nsd-select-button:hover {\n color: var(--sd-tx-primary-hover);\n background-color: var(--sd-bg-state-hover);\n}"] }]
|
|
20
18
|
}], () => [], null); })();
|
|
21
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectButton, { className: "SdSelectButton", filePath: "packages/angular/src/controls/select/sd-select-button.ts", lineNumber:
|
|
19
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectButton, { className: "SdSelectButton", filePath: "packages/angular/src/controls/select/sd-select-button.ts", lineNumber: 30 }); })();
|
|
@@ -330,7 +330,7 @@ export class SdSelect {
|
|
|
330
330
|
i0.ɵɵconditional(ctx._beforeTpl() ? 12 : -1);
|
|
331
331
|
i0.ɵɵadvance();
|
|
332
332
|
i0.ɵɵconditional((tmp_12_0 = ctx._itemOfTpl()) ? 13 : 14, tmp_12_0);
|
|
333
|
-
} }, dependencies: [SdDropdown, SdDropdownPopup, SdAnchor, SdGap, NgTemplateOutlet, SdRipple, NgIcon], styles: ["sd-select {\n display: block;\n position: relative;\n width: 100%;\n min-width: 10em;\n}\nsd-select > sd-dropdown {\n display: flex;\n overflow: hidden;\n border: 1px solid var(--sd-bd-field);\n border-radius: var(--sd-radius-default);\n background-color: var(--sd-bg-field);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n border-color: var(--sd-focus-ring-color);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n display: flex;\n position: relative;\n gap: var(--sd-gap-default);\n flex-grow: 1;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n cursor: pointer;\n font-family: var(--sd-font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-sm);\n border-left: 1px solid var(--sd-bd-hairline);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n border-top-right-radius: var(--sd-radius-default);\n border-bottom-right-radius: var(--sd-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n background-color: var(--sd-bg-disabled);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n display: none;\n}\nsd-select[data-sd-inline=true] {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n padding: var(--sd-gap-xs) var(--sd-gap-sm);\n gap: var(--sd-gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n gap: var(--sd-gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-default);\n}\nsd-select[data-sd-inset=true] {\n min-width: auto;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n border: none;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n background-color: var(--sd-bg-
|
|
333
|
+
} }, dependencies: [SdDropdown, SdDropdownPopup, SdAnchor, SdGap, NgTemplateOutlet, SdRipple, NgIcon], styles: ["sd-select {\n display: block;\n position: relative;\n width: 100%;\n min-width: 10em;\n}\nsd-select > sd-dropdown {\n display: flex;\n overflow: hidden;\n border: 1px solid var(--sd-bd-field);\n border-radius: var(--sd-radius-default);\n background-color: var(--sd-bg-field);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n border-color: var(--sd-focus-ring-color);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n display: flex;\n position: relative;\n gap: var(--sd-gap-default);\n flex-grow: 1;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n cursor: pointer;\n font-family: var(--sd-font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-sm);\n border-left: 1px solid var(--sd-bd-hairline);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n border-top-right-radius: var(--sd-radius-default);\n border-bottom-right-radius: var(--sd-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n background-color: var(--sd-bg-disabled);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n display: none;\n}\nsd-select[data-sd-inline=true] {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n padding: var(--sd-gap-xs) var(--sd-gap-sm);\n gap: var(--sd-gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n gap: var(--sd-gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-default);\n}\nsd-select[data-sd-inset=true] {\n min-width: auto;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n border: none;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n background-color: var(--sd-bg-content);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--sd-tx-default);\n}\n\n._sd-select-all-bar {\n display: flex;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border-bottom: 1px solid var(--sd-bd-default);\n}"], encapsulation: 2 });
|
|
334
334
|
}
|
|
335
335
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelect, [{
|
|
336
336
|
type: Component,
|
|
@@ -396,6 +396,6 @@ export class SdSelect {
|
|
|
396
396
|
"[attr.data-sd-inline]": "inline()",
|
|
397
397
|
"[attr.data-sd-inset]": "inset()",
|
|
398
398
|
"[attr.data-sd-disabled]": "disabled()",
|
|
399
|
-
}, styles: ["sd-select {\n display: block;\n position: relative;\n width: 100%;\n min-width: 10em;\n}\nsd-select > sd-dropdown {\n display: flex;\n overflow: hidden;\n border: 1px solid var(--sd-bd-field);\n border-radius: var(--sd-radius-default);\n background-color: var(--sd-bg-field);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n border-color: var(--sd-focus-ring-color);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n display: flex;\n position: relative;\n gap: var(--sd-gap-default);\n flex-grow: 1;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n cursor: pointer;\n font-family: var(--sd-font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-sm);\n border-left: 1px solid var(--sd-bd-hairline);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n border-top-right-radius: var(--sd-radius-default);\n border-bottom-right-radius: var(--sd-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n background-color: var(--sd-bg-disabled);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n display: none;\n}\nsd-select[data-sd-inline=true] {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n padding: var(--sd-gap-xs) var(--sd-gap-sm);\n gap: var(--sd-gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n gap: var(--sd-gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-default);\n}\nsd-select[data-sd-inset=true] {\n min-width: auto;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n border: none;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n background-color: var(--sd-bg-
|
|
399
|
+
}, styles: ["sd-select {\n display: block;\n position: relative;\n width: 100%;\n min-width: 10em;\n}\nsd-select > sd-dropdown {\n display: flex;\n overflow: hidden;\n border: 1px solid var(--sd-bd-field);\n border-radius: var(--sd-radius-default);\n background-color: var(--sd-bg-field);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n border-color: var(--sd-focus-ring-color);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n display: flex;\n position: relative;\n gap: var(--sd-gap-default);\n flex-grow: 1;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n cursor: pointer;\n font-family: var(--sd-font-family-field);\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-content {\n flex: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\nsd-select > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n opacity: 0.3;\n}\nsd-select > sd-dropdown > ._sd-select-control:hover > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:focus > ._sd-select-control-icon, sd-select > sd-dropdown > ._sd-select-control:active > ._sd-select-control-icon {\n opacity: 1;\n}\nsd-select > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-sm);\n border-left: 1px solid var(--sd-bd-hairline);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n border-top-right-radius: var(--sd-radius-default);\n border-bottom-right-radius: var(--sd-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n background-color: var(--sd-bg-disabled);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--sd-tx-disabled);\n cursor: default;\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control > ._sd-select-control-icon {\n display: none;\n}\nsd-select[data-sd-inline=true] {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-select[data-sd-size=sm] > sd-dropdown > ._sd-select-control {\n padding: var(--sd-gap-xs) var(--sd-gap-sm);\n gap: var(--sd-gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n gap: var(--sd-gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n padding: var(--sd-gap-default);\n}\nsd-select[data-sd-inset=true] {\n min-width: auto;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown {\n border: none;\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown > sd-select-button {\n border-radius: 0;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus, sd-select[data-sd-inset=true] > sd-dropdown:focus-within {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true] > sd-dropdown:focus > sd-select-button, sd-select[data-sd-inset=true] > sd-dropdown:focus-within > sd-select-button {\n outline: 1px solid var(--sd-focus-ring-color);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n background-color: var(--sd-bg-content);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--sd-tx-default);\n}\n\n._sd-select-all-bar {\n display: flex;\n padding: var(--sd-gap-sm) var(--sd-gap-default);\n border-bottom: 1px solid var(--sd-bd-default);\n}"] }]
|
|
400
400
|
}], () => [], { selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hideSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectAll", required: false }] }], multiSelectionDisplayDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectionDisplayDirection", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], dropdownOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOpen", required: false }] }, { type: i0.Output, args: ["dropdownOpenChange"] }], _itemControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSelectItem), { isSignal: true }] }], _dropdownControl: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { isSignal: true }] }], _dropdownElRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdDropdown), { ...{ read: ElementRef }, isSignal: true }] }], _headerTpl: [{ type: i0.ContentChild, args: ["headerTpl", { isSignal: true }] }], _beforeTpl: [{ type: i0.ContentChild, args: ["beforeTpl", { isSignal: true }] }], _itemOfTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdItemOfTemplate), { ...{ read: TemplateRef }, isSignal: true }] }] }); })();
|
|
401
401
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 257 }); })();
|
|
@@ -10,7 +10,7 @@ export class SdGlobalErrorHandlerPlugin {
|
|
|
10
10
|
_isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
|
|
11
11
|
_hasDisplayedError = false;
|
|
12
12
|
handleError(event) {
|
|
13
|
-
// SSR(프리렌더) 가드: 서버에는 화면
|
|
13
|
+
// SSR(프리렌더) 가드: 서버에는 화면 오버레이, 브라우저 전역 이벤트 타입이 없음 — 로그만 남김
|
|
14
14
|
if (!this._isBrowser) {
|
|
15
15
|
logger.error(event);
|
|
16
16
|
return false;
|
|
@@ -136,7 +136,7 @@ export class SdModalProvider {
|
|
|
136
136
|
// transition duration 확인 후 대기 또는 즉시 destroy
|
|
137
137
|
const duration = parseFloat(getComputedStyle(modalEl).transitionDuration || "0");
|
|
138
138
|
if (duration > 0) {
|
|
139
|
-
// transitionend 가 정상 경로. 단 백그라운드
|
|
139
|
+
// transitionend 가 정상 경로. 단 백그라운드 탭, transition 인터럽트 시 미발화하므로
|
|
140
140
|
// duration(초→ms) + 여유 100ms 후 발화하는 setTimeout 폴백을 함께 걸어 destroy 누락을 방지.
|
|
141
141
|
modalEl.addEventListener("transitionend", doDestroy, { once: true });
|
|
142
142
|
setTimeout(doDestroy, duration * 1000 + 100);
|
|
@@ -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;AAoC1D,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;AAoC1D,wBAAgB,gBAAgB,CAAC,GAAG,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB,CA8JlF"}
|
|
@@ -29,7 +29,7 @@ export function provideSdAngular(opt) {
|
|
|
29
29
|
strokeWidth: 1.5,
|
|
30
30
|
}),
|
|
31
31
|
provideEnvironmentInitializer(() => {
|
|
32
|
-
// SSR(프리렌더) 가드: 테마
|
|
32
|
+
// SSR(프리렌더) 가드: 테마 저장, 복원은 브라우저 전용
|
|
33
33
|
if (!isPlatformBrowser(inject(PLATFORM_ID)))
|
|
34
34
|
return;
|
|
35
35
|
const sdTheme = inject(SdThemeProvider);
|
|
@@ -53,18 +53,6 @@ export function provideSdAngular(opt) {
|
|
|
53
53
|
prevTheme = theme;
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
|
-
const savedDensity = sdLocalStorage.get("sd-theme-density");
|
|
57
|
-
if (savedDensity === "compact" || savedDensity === "normal") {
|
|
58
|
-
sdTheme.density.set(savedDensity);
|
|
59
|
-
}
|
|
60
|
-
let prevDensity = sdTheme.density();
|
|
61
|
-
effect(() => {
|
|
62
|
-
const density = sdTheme.density();
|
|
63
|
-
if (density !== prevDensity) {
|
|
64
|
-
sdLocalStorage.set("sd-theme-density", density);
|
|
65
|
-
prevDensity = density;
|
|
66
|
-
}
|
|
67
|
-
});
|
|
68
56
|
const savedFontSize = sdLocalStorage.get("sd-theme-font-size");
|
|
69
57
|
if (savedFontSize != null) {
|
|
70
58
|
sdTheme.fontSize.set(savedFontSize);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export declare function setupBgTheme(options?: {
|
|
2
|
-
theme?: "primary" | "
|
|
2
|
+
theme?: "primary" | "info" | "success" | "warning" | "danger" | "gray" | "blue-gray";
|
|
3
3
|
}): void;
|
|
4
4
|
//# sourceMappingURL=setupBgTheme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"setupBgTheme.d.ts","sourceRoot":"","sources":["../../src/core/setupBgTheme.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE;IACrC,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"setupBgTheme.d.ts","sourceRoot":"","sources":["../../src/core/setupBgTheme.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE;IACrC,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAC;CACtF,GAAG,IAAI,CAeP"}
|
|
@@ -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: ["sd-toast {\n display: block;\n margin-bottom: var(--sd-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 transform: translateY(-100%);\n border-radius: var(--sd-radius-lg);\n opacity: 0;\n box-shadow: 0 calc(12 * var(--sd-shadow-size)) calc(12 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n word-break: break-all;\n white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n height: 4px;\n border-radius: var(--sd-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(--sd-radius-xl);\n height: 4px;\n transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n background-color: var(--sd-bg-gray-solid);\n color: var(--sd-tx-gray-solid);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n background-color: var(--sd-bg-blue-gray-solid);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n background-color: var(--sd-bg-primary-solid);\n color: var(--sd-tx-primary-solid);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-toast[data-sd-theme=
|
|
67
|
+
} }, styles: ["sd-toast {\n display: block;\n margin-bottom: var(--sd-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 transform: translateY(-100%);\n border-radius: var(--sd-radius-lg);\n opacity: 0;\n box-shadow: 0 calc(12 * var(--sd-shadow-size)) calc(12 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n word-break: break-all;\n white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n height: 4px;\n border-radius: var(--sd-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(--sd-radius-xl);\n height: 4px;\n transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n background-color: var(--sd-bg-gray-solid);\n color: var(--sd-tx-gray-solid);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n background-color: var(--sd-bg-blue-gray-solid);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n background-color: var(--sd-bg-primary-solid);\n color: var(--sd-tx-primary-solid);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n background-color: var(--sd-bg-info-solid);\n color: var(--sd-tx-info-solid);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-info-subtle);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n background-color: var(--sd-bg-success-solid);\n color: var(--sd-tx-success-solid);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-success-subtle);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n background-color: var(--sd-bg-warning-solid);\n color: var(--sd-tx-warning-solid);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-warning-subtle);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n background-color: var(--sd-bg-danger-solid);\n color: var(--sd-tx-danger-solid);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-danger-subtle);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n transform: none;\n transition: var(--sd-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(--sd-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(--sd-line-height) / 2);\n transform: translateY(100%);\n }\n sd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--sd-gap-xs) var(--sd-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: ["sd-toast {\n display: block;\n margin-bottom: var(--sd-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 transform: translateY(-100%);\n border-radius: var(--sd-radius-lg);\n opacity: 0;\n box-shadow: 0 calc(12 * var(--sd-shadow-size)) calc(12 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n word-break: break-all;\n white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n height: 4px;\n border-radius: var(--sd-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(--sd-radius-xl);\n height: 4px;\n transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n background-color: var(--sd-bg-gray-solid);\n color: var(--sd-tx-gray-solid);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n background-color: var(--sd-bg-blue-gray-solid);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n background-color: var(--sd-bg-primary-solid);\n color: var(--sd-tx-primary-solid);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-toast[data-sd-theme=
|
|
91
|
+
`, styles: ["sd-toast {\n display: block;\n margin-bottom: var(--sd-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 transform: translateY(-100%);\n border-radius: var(--sd-radius-lg);\n opacity: 0;\n box-shadow: 0 calc(12 * var(--sd-shadow-size)) calc(12 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--sd-gap-default) var(--sd-gap-lg);\n word-break: break-all;\n white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n height: 4px;\n border-radius: var(--sd-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(--sd-radius-xl);\n height: 4px;\n transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n background-color: var(--sd-bg-gray-solid);\n color: var(--sd-tx-gray-solid);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-gray-subtle);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n background-color: var(--sd-bg-blue-gray-solid);\n color: var(--sd-tx-blue-gray-solid);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n background-color: var(--sd-bg-primary-solid);\n color: var(--sd-tx-primary-solid);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-primary-subtle);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n background-color: var(--sd-bg-info-solid);\n color: var(--sd-tx-info-solid);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-info-subtle);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n background-color: var(--sd-bg-success-solid);\n color: var(--sd-tx-success-solid);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-success-subtle);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n background-color: var(--sd-bg-warning-solid);\n color: var(--sd-tx-warning-solid);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-warning-subtle);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n background-color: var(--sd-bg-danger-solid);\n color: var(--sd-tx-danger-solid);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n background-color: var(--sd-bg-danger-subtle);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n transform: none;\n transition: var(--sd-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(--sd-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(--sd-line-height) / 2);\n transform: translateY(100%);\n }\n sd-toast > ._sd-toast-block > ._sd-toast-message {\n padding: var(--sd-gap-xs) var(--sd-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: 138 }); })();
|
|
@@ -3,7 +3,7 @@ import type { DirectiveInputSignals } from "../directive-input-signals";
|
|
|
3
3
|
import "@simplysm/core-browser";
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export type SdToastSeverity = "info" | "success" | "warning" | "danger";
|
|
6
|
-
export type SdToastTheme = "primary" |
|
|
6
|
+
export type SdToastTheme = "primary" | SdToastSeverity | "gray" | "blue-gray";
|
|
7
7
|
export interface SdToastContentDef<O> {
|
|
8
8
|
close: OutputEmitterRef<O | undefined>;
|
|
9
9
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-toast.provider.d.ts","sourceRoot":"","sources":["../../../src/core/toast/sd-toast.provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,gBAAgB,EACrB,KAAK,IAAI,EACT,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,OAAO,wBAAwB,CAAC;;AAEhC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,
|
|
1
|
+
{"version":3,"file":"sd-toast.provider.d.ts","sourceRoot":"","sources":["../../../src/core/toast/sd-toast.provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAUL,KAAK,gBAAgB,EACrB,KAAK,IAAI,EACT,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAIxE,OAAO,wBAAwB,CAAC;;AAEhC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACxE,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,eAAe,GAAG,MAAM,GAAG,WAAW,CAAC;AAE9E,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,KAAK,EAAE,gBAAgB,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,iBAAiB,CAAC,GAAG,CAAC;IAC5D,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,MAAM,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CACjD;AAED,qBACa,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0B;IAClD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA+B;IAC5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAC9C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA+B;IAE5D,WAAW,oCAAiC;IAC5C,OAAO,0BAAiB;IACxB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAEhD,OAAO,CAAC,aAAa,CAA6C;IAClE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAA+B;IAC1D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAuD;IACpF,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAgD;;IAUrF,OAAO,CAAC,gBAAgB;IAYxB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC;IACjE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI;IAKhD,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC;IACpE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI;IAKnD,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC;IACpE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI;IAKnD,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC;IACnE,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,GAAG,IAAI;IAKlD,MAAM,CAAC,CAAC,SAAS,iBAAiB,CAAC,GAAG,CAAC,EACrC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GACrB,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAuDnD,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,GAAG,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IAC9F,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC,GAAG,SAAS;IAmBtE,OAAO,CAAC,KAAK;IA+Db,OAAO,CAAC,iBAAiB;IA6DzB,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,gBAAgB;yCAlTb,eAAe;6CAAf,eAAe;CAuT3B"}
|
|
@@ -162,7 +162,7 @@ export class SdToastProvider {
|
|
|
162
162
|
let isHovering = false;
|
|
163
163
|
let dismissPending = false;
|
|
164
164
|
let dismissed = false;
|
|
165
|
-
//
|
|
165
|
+
// 타이머, 리스너 정리. 외부 파괴 경로(_dismissToast/_destroyToast)에서도 호출되어
|
|
166
166
|
// 죽은 toastRef 에 대해 타이머가 깨어나는 race 와 리스너 누수를 막는다.
|
|
167
167
|
const cleanup = () => {
|
|
168
168
|
dismissed = true;
|
|
@@ -149,7 +149,7 @@ export class SdBaseContainer {
|
|
|
149
149
|
i0.ɵɵcontentQuerySignal(dirIndex, ctx.topbarTplRef, _c0, 5)(dirIndex, ctx.commandTplRef, _c1, 5)(dirIndex, ctx.contentTplRef, _c2, 5)(dirIndex, ctx.bottomCommandTplRef, _c3, 5);
|
|
150
150
|
} if (rf & 2) {
|
|
151
151
|
i0.ɵɵqueryAdvance(4);
|
|
152
|
-
} }, inputs: { ready: [1, "ready"], initialized: [1, "initialized"], busyCount: [1, "busyCount"], restricted: [1, "restricted"], viewType: [1, "viewType"] }, outputs: { ready: "readyChange", busyCount: "busyCountChange" }, decls: 4, vars: 2, consts: [["content", ""], [3, "busy"], [1, "fill", "tx-faint", "p-xxl", "tx-center"], [3, "ngTemplateOutlet"], [3, "svg", "size"], [1, "tx-muted"], [1, "flex-column", "fill", "bg-
|
|
152
|
+
} }, inputs: { ready: [1, "ready"], initialized: [1, "initialized"], busyCount: [1, "busyCount"], restricted: [1, "restricted"], viewType: [1, "viewType"] }, outputs: { ready: "readyChange", busyCount: "busyCountChange" }, decls: 4, vars: 2, consts: [["content", ""], [3, "busy"], [1, "fill", "tx-faint", "p-xxl", "tx-center"], [3, "ngTemplateOutlet"], [3, "svg", "size"], [1, "tx-muted"], [1, "flex-column", "fill", "bg-content"], [1, "p-sm-default", "flex-row", "gap-default", "bdb", "bdb-soft"], [1, "flex-fill"], [1, "p-sm-default", "flex-row", "main-align-end", "gap-sm", "bdt", "bdt-hairline"]], template: function SdBaseContainer_Template(rf, ctx) { if (rf & 1) {
|
|
153
153
|
i0.ɵɵelementStart(0, "sd-busy-container", 1);
|
|
154
154
|
i0.ɵɵconditionalCreate(1, SdBaseContainer_Conditional_1_Template, 3, 1);
|
|
155
155
|
i0.ɵɵelementEnd();
|
|
@@ -196,7 +196,7 @@ export class SdBaseContainer {
|
|
|
196
196
|
</sd-busy-container>
|
|
197
197
|
|
|
198
198
|
<ng-template #content>
|
|
199
|
-
<div class="flex-column fill bg-
|
|
199
|
+
<div class="flex-column fill bg-content">
|
|
200
200
|
@if (commandTplRef()) {
|
|
201
201
|
<div class="p-sm-default flex-row gap-default bdb bdb-soft">
|
|
202
202
|
<ng-template [ngTemplateOutlet]="commandTplRef()" />
|
|
@@ -10,6 +10,7 @@ export declare function injectSheetDomAccessor(): {
|
|
|
10
10
|
getSelectRowIndicators: () => HTMLElement[];
|
|
11
11
|
getColumnResizeIndicator: () => HTMLElement;
|
|
12
12
|
getRow: (r: number) => HTMLTableRowElement | null;
|
|
13
|
+
getRows: () => HTMLTableRowElement[];
|
|
13
14
|
getCell: (r: number, c: number) => HTMLTableCellElement | null;
|
|
14
15
|
};
|
|
15
16
|
//# sourceMappingURL=injectSheetDomAccessor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"injectSheetDomAccessor.d.ts","sourceRoot":"","sources":["../../../src/data/sheet/injectSheetDomAccessor.ts"],"names":[],"mappings":"AAEA,wBAAgB,sBAAsB;qBAGd,WAAW;wBAIR,WAAW;oBAIf,gBAAgB;oBAIhB,uBAAuB;oCAIP,WAAW,EAAE;gCAIjB,WAAW;iCAIV,WAAW;0CAIF,WAAW;kCAInB,WAAW,EAAE;oCAMX,WAAW;gBAI7B,MAAM,KAAG,mBAAmB,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"injectSheetDomAccessor.d.ts","sourceRoot":"","sources":["../../../src/data/sheet/injectSheetDomAccessor.ts"],"names":[],"mappings":"AAEA,wBAAgB,sBAAsB;qBAGd,WAAW;wBAIR,WAAW;oBAIf,gBAAgB;oBAIhB,uBAAuB;oCAIP,WAAW,EAAE;gCAIjB,WAAW;iCAIV,WAAW;0CAIF,WAAW;kCAInB,WAAW,EAAE;oCAMX,WAAW;gBAI7B,MAAM,KAAG,mBAAmB,GAAG,IAAI;mBAMlC,mBAAmB,EAAE;iBAMrB,MAAM,KAAK,MAAM,KAAG,oBAAoB,GAAG,IAAI;EAqBpE"}
|
|
@@ -37,6 +37,12 @@ export function injectSheetDomAccessor() {
|
|
|
37
37
|
return null;
|
|
38
38
|
return tbody.querySelector(`tr[data-r='${r}']`);
|
|
39
39
|
}
|
|
40
|
+
function getRows() {
|
|
41
|
+
const tbody = getTable().querySelector("tbody");
|
|
42
|
+
if (tbody == null)
|
|
43
|
+
return [];
|
|
44
|
+
return Array.from(tbody.querySelectorAll("tr[data-r]"));
|
|
45
|
+
}
|
|
40
46
|
function getCell(r, c) {
|
|
41
47
|
const row = getRow(r);
|
|
42
48
|
if (row == null)
|
|
@@ -55,6 +61,7 @@ export function injectSheetDomAccessor() {
|
|
|
55
61
|
getSelectRowIndicators,
|
|
56
62
|
getColumnResizeIndicator,
|
|
57
63
|
getRow,
|
|
64
|
+
getRows,
|
|
58
65
|
getCell,
|
|
59
66
|
};
|
|
60
67
|
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type Signal } from "@angular/core";
|
|
2
|
+
export declare function injectSheetDragSelection<TItem>(options: {
|
|
3
|
+
domAccessor: {
|
|
4
|
+
getRows(): HTMLTableRowElement[];
|
|
5
|
+
getContainer(): HTMLElement;
|
|
6
|
+
getTHead(): HTMLTableSectionElement;
|
|
7
|
+
};
|
|
8
|
+
displayItems: Signal<TItem[]>;
|
|
9
|
+
selection: {
|
|
10
|
+
isSelected(item: TItem): boolean;
|
|
11
|
+
getSelectable(item: TItem): true | string | undefined;
|
|
12
|
+
select(item: TItem): void;
|
|
13
|
+
deselect(item: TItem): void;
|
|
14
|
+
};
|
|
15
|
+
}): {
|
|
16
|
+
onSelectorPointerDown: (event: PointerEvent, r: number) => void;
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=injectSheetDragSelection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"injectSheetDragSelection.d.ts","sourceRoot":"","sources":["../../../src/data/sheet/injectSheetDragSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAEhE,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,OAAO,EAAE;IACvD,WAAW,EAAE;QACX,OAAO,IAAI,mBAAmB,EAAE,CAAC;QACjC,YAAY,IAAI,WAAW,CAAC;QAC5B,QAAQ,IAAI,uBAAuB,CAAC;KACrC,CAAC;IACF,YAAY,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC9B,SAAS,EAAE;QACT,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,CAAC;QACjC,aAAa,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;QACtD,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;QAC1B,QAAQ,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;KAC7B,CAAC;CACH;mCA+DuC,YAAY,KAAK,MAAM,KAAG,IAAI;EAmJrE"}
|