@simplysm/angular 14.0.100 → 14.0.101
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/controls/button/sd-additional-button.js +2 -2
- package/dist/controls/button/sd-anchor.js +2 -2
- package/dist/controls/button/sd-button.js +2 -2
- package/dist/controls/button/sd-modal-select-button.js +2 -2
- package/dist/controls/checkbox/sd-checkbox.d.ts.map +1 -1
- package/dist/controls/checkbox/sd-checkbox.js +3 -3
- package/dist/controls/checkbox/sd-switch.js +2 -2
- package/dist/controls/collapse/sd-collapse-icon.d.ts +1 -1
- package/dist/controls/collapse/sd-collapse-icon.d.ts.map +1 -1
- package/dist/controls/collapse/sd-collapse-icon.js +3 -1
- package/dist/controls/collapse/sd-collapse.d.ts +1 -1
- package/dist/controls/collapse/sd-collapse.d.ts.map +1 -1
- package/dist/controls/collapse/sd-collapse.js +3 -1
- package/dist/controls/dropdown/sd-dropdown-popup.js +2 -2
- package/dist/controls/gap/sd-gap.js +2 -2
- package/dist/controls/input/sd-date-range-picker.js +2 -2
- package/dist/controls/input/sd-range.js +2 -2
- package/dist/controls/input/sd-textarea.d.ts.map +1 -1
- package/dist/controls/input/sd-textarea.js +3 -3
- package/dist/controls/input/sd-textfield.d.ts +2 -0
- package/dist/controls/input/sd-textfield.d.ts.map +1 -1
- package/dist/controls/input/sd-textfield.js +44 -16
- package/dist/controls/list/sd-list-item.js +2 -2
- package/dist/controls/select/sd-select-button.js +2 -2
- package/dist/controls/select/sd-select-item.d.ts.map +1 -1
- package/dist/controls/select/sd-select-item.js +3 -3
- package/dist/controls/select/sd-select.d.ts.map +1 -1
- package/dist/controls/select/sd-select.js +3 -3
- package/dist/core/busy/sd-busy-container.js +2 -2
- package/dist/core/directive-input-signals.d.ts +0 -9
- package/dist/core/directive-input-signals.d.ts.map +1 -1
- package/dist/core/modal/sd-modal.js +2 -2
- package/dist/core/provideSdAngular.d.ts.map +1 -1
- package/dist/core/provideSdAngular.js +12 -0
- package/dist/core/ripple/setupRipple.js +1 -1
- package/dist/core/toast/sd-toast-container.js +2 -2
- package/dist/core/toast/sd-toast.js +2 -2
- package/dist/data/crud/sd-base-container.js +4 -4
- package/dist/data/kanban/sd-kanban-board.js +2 -2
- package/dist/data/kanban/sd-kanban-lane.js +2 -2
- package/dist/data/kanban/sd-kanban.js +2 -2
- package/dist/data/sheet/sd-sheet.d.ts.map +1 -1
- package/dist/data/sheet/sd-sheet.js +3 -3
- package/dist/features/editor/sd-tiptap-editor.d.ts.map +1 -1
- package/dist/features/editor/sd-tiptap-editor.js +3 -3
- package/dist/features/theme/sd-theme-provider.d.ts +1 -0
- package/dist/features/theme/sd-theme-provider.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-provider.js +5 -0
- package/dist/features/theme/sd-theme-selector.d.ts.map +1 -1
- package/dist/features/theme/sd-theme-selector.js +14 -2
- package/dist/features/visual/sd-calendar.js +2 -2
- package/dist/features/visual/sd-label.js +2 -2
- package/dist/features/visual/sd-note.js +2 -2
- package/dist/features/visual/sd-progress.js +2 -2
- package/dist/layout/sidebar/sd-sidebar-container.js +2 -2
- package/dist/layout/sidebar/sd-sidebar.js +2 -2
- package/dist/layout/topbar/sd-topbar.js +2 -2
- package/package.json +5 -5
- package/scss/commons/_colors.scss +326 -0
- package/scss/commons/_mixins.scss +129 -129
- package/scss/commons/_theme-variables.scss +8 -1
- package/scss/commons/_variables.scss +37 -33
- package/scss/controls/_card.scss +1 -1
- package/scss/styles.scss +3 -0
- package/scss/themes/_blueprint-surfaces.scss +81 -0
- package/scss/themes/_variables-blueprint.scss +95 -0
- package/scss/themes/_variables-dark.scss +9 -22
- package/src/controls/button/sd-button.ts +2 -2
- package/src/controls/checkbox/sd-checkbox.ts +13 -11
- package/src/controls/collapse/sd-collapse-icon.ts +3 -1
- package/src/controls/collapse/sd-collapse.ts +3 -1
- package/src/controls/dropdown/sd-dropdown-popup.ts +2 -2
- package/src/controls/input/sd-textarea.ts +5 -0
- package/src/controls/input/sd-textfield.ts +40 -4
- package/src/controls/list/sd-list-item.ts +5 -5
- package/src/controls/select/sd-select-button.ts +1 -1
- package/src/controls/select/sd-select-item.ts +4 -3
- package/src/controls/select/sd-select.ts +2 -1
- package/src/core/busy/sd-busy-container.ts +3 -3
- package/src/core/directive-input-signals.ts +0 -9
- package/src/core/provideSdAngular.ts +14 -0
- package/src/core/ripple/setupRipple.ts +1 -1
- package/src/data/crud/sd-base-container.ts +3 -3
- package/src/data/kanban/sd-kanban-lane.ts +1 -1
- package/src/data/kanban/sd-kanban.ts +1 -1
- package/src/data/sheet/sd-sheet.ts +4 -3
- package/src/features/editor/sd-tiptap-editor.ts +1 -0
- package/src/features/theme/sd-theme-provider.ts +7 -0
- package/src/features/theme/sd-theme-selector.ts +4 -0
- package/src/layout/sidebar/sd-sidebar-container.ts +3 -3
- package/src/layout/sidebar/sd-sidebar.ts +5 -5
- package/src/layout/topbar/sd-topbar.ts +1 -1
- package/styles.css +481 -103
|
@@ -92,7 +92,7 @@ export class SdDateRangePicker {
|
|
|
92
92
|
i0.ɵɵproperty("value", "\uBC94\uC704");
|
|
93
93
|
i0.ɵɵadvance(2);
|
|
94
94
|
i0.ɵɵconditional(ctx.periodType() === "\uBC94\uC704" ? 7 : 8);
|
|
95
|
-
} }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], styles: ["
|
|
95
|
+
} }, dependencies: [SdSelect, SdSelectItem, SdRange, SdTextfield], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-date-range-picker {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-date-range-picker {\n gap: 0;\n }\n sd-date-range-picker > * + * {\n margin-left: var(--gap-sm);\n }\n sd-date-range-picker.gap-xxs {\n gap: 0;\n }\n sd-date-range-picker.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-date-range-picker.gap-xs {\n gap: 0;\n }\n sd-date-range-picker.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-date-range-picker.gap-sm {\n gap: 0;\n }\n sd-date-range-picker.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-date-range-picker.gap-default {\n gap: 0;\n }\n sd-date-range-picker.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-date-range-picker.gap-lg {\n gap: 0;\n }\n sd-date-range-picker.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-date-range-picker.gap-xl {\n gap: 0;\n }\n sd-date-range-picker.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-date-range-picker.gap-xxl {\n gap: 0;\n }\n sd-date-range-picker.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-date-range-picker.gap-0 {\n gap: 0;\n }\n sd-date-range-picker.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-date-range-picker.gap-auto {\n gap: 0;\n }\n sd-date-range-picker.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"], encapsulation: 2, changeDetection: 0 });
|
|
96
96
|
}
|
|
97
97
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdDateRangePicker, [{
|
|
98
98
|
type: Component,
|
|
@@ -123,6 +123,6 @@ export class SdDateRangePicker {
|
|
|
123
123
|
(valueChange)="handleFromDateChanged()"
|
|
124
124
|
/>
|
|
125
125
|
}
|
|
126
|
-
`, styles: ["
|
|
126
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-date-range-picker {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-date-range-picker {\n gap: 0;\n }\n sd-date-range-picker > * + * {\n margin-left: var(--gap-sm);\n }\n sd-date-range-picker.gap-xxs {\n gap: 0;\n }\n sd-date-range-picker.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-date-range-picker.gap-xs {\n gap: 0;\n }\n sd-date-range-picker.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-date-range-picker.gap-sm {\n gap: 0;\n }\n sd-date-range-picker.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-date-range-picker.gap-default {\n gap: 0;\n }\n sd-date-range-picker.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-date-range-picker.gap-lg {\n gap: 0;\n }\n sd-date-range-picker.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-date-range-picker.gap-xl {\n gap: 0;\n }\n sd-date-range-picker.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-date-range-picker.gap-xxl {\n gap: 0;\n }\n sd-date-range-picker.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-date-range-picker.gap-0 {\n gap: 0;\n }\n sd-date-range-picker.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-date-range-picker.gap-auto {\n gap: 0;\n }\n sd-date-range-picker.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"] }]
|
|
127
127
|
}], null, { periodType: [{ type: i0.Input, args: [{ isSignal: true, alias: "periodType", required: false }] }, { type: i0.Output, args: ["periodTypeChange"] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }, { type: i0.Output, args: ["fromChange"] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }, { type: i0.Output, args: ["toChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] }); })();
|
|
128
128
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdDateRangePicker, { className: "SdDateRangePicker", filePath: "packages/angular/src/controls/input/sd-date-range-picker.ts", lineNumber: 62 }); })();
|
|
@@ -27,7 +27,7 @@ export class SdRange {
|
|
|
27
27
|
i0.ɵɵproperty("type", ctx.type());
|
|
28
28
|
i0.ɵɵtwoWayProperty("value", ctx.to);
|
|
29
29
|
i0.ɵɵproperty("min", ctx.from())("required", ctx.required())("disabled", ctx.disabled())("inputStyle", ctx.inputStyle());
|
|
30
|
-
} }, dependencies: [SdTextfield], styles: ["
|
|
30
|
+
} }, dependencies: [SdTextfield], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-range {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-range {\n gap: 0;\n }\n sd-range > * + * {\n margin-left: var(--gap-sm);\n }\n sd-range.gap-xxs {\n gap: 0;\n }\n sd-range.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-range.gap-xs {\n gap: 0;\n }\n sd-range.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-range.gap-sm {\n gap: 0;\n }\n sd-range.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-range.gap-default {\n gap: 0;\n }\n sd-range.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-range.gap-lg {\n gap: 0;\n }\n sd-range.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-range.gap-xl {\n gap: 0;\n }\n sd-range.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-range.gap-xxl {\n gap: 0;\n }\n sd-range.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-range.gap-0 {\n gap: 0;\n }\n sd-range.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-range.gap-auto {\n gap: 0;\n }\n sd-range.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"], encapsulation: 2, changeDetection: 0 });
|
|
31
31
|
}
|
|
32
32
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdRange, [{
|
|
33
33
|
type: Component,
|
|
@@ -48,6 +48,6 @@ export class SdRange {
|
|
|
48
48
|
[disabled]="disabled()"
|
|
49
49
|
[inputStyle]="inputStyle()"
|
|
50
50
|
/>
|
|
51
|
-
`, styles: ["
|
|
51
|
+
`, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-range {\n display: flex;\n align-items: center;\n flex-direction: row;\n gap: var(--gap-sm);\n}\n@supports not (appearance: auto) {\n sd-range {\n gap: 0;\n }\n sd-range > * + * {\n margin-left: var(--gap-sm);\n }\n sd-range.gap-xxs {\n gap: 0;\n }\n sd-range.gap-xxs > * + * {\n margin-left: var(--gap-xxs);\n }\n sd-range.gap-xs {\n gap: 0;\n }\n sd-range.gap-xs > * + * {\n margin-left: var(--gap-xs);\n }\n sd-range.gap-sm {\n gap: 0;\n }\n sd-range.gap-sm > * + * {\n margin-left: var(--gap-sm);\n }\n sd-range.gap-default {\n gap: 0;\n }\n sd-range.gap-default > * + * {\n margin-left: var(--gap-default);\n }\n sd-range.gap-lg {\n gap: 0;\n }\n sd-range.gap-lg > * + * {\n margin-left: var(--gap-lg);\n }\n sd-range.gap-xl {\n gap: 0;\n }\n sd-range.gap-xl > * + * {\n margin-left: var(--gap-xl);\n }\n sd-range.gap-xxl {\n gap: 0;\n }\n sd-range.gap-xxl > * + * {\n margin-left: var(--gap-xxl);\n }\n sd-range.gap-0 {\n gap: 0;\n }\n sd-range.gap-0 > * + * {\n margin-left: var(--gap-0);\n }\n sd-range.gap-auto {\n gap: 0;\n }\n sd-range.gap-auto > * + * {\n margin-left: var(--gap-auto);\n }\n}"] }]
|
|
52
52
|
}], null, { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }], from: [{ type: i0.Input, args: [{ isSignal: true, alias: "from", required: false }] }, { type: i0.Output, args: ["fromChange"] }], to: [{ type: i0.Input, args: [{ isSignal: true, alias: "to", required: false }] }, { type: i0.Output, args: ["toChange"] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] }); })();
|
|
53
53
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdRange, { className: "SdRange", filePath: "packages/angular/src/controls/input/sd-range.ts", lineNumber: 49 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-textarea.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textarea.ts"],"names":[],"mappings":";AAWA,
|
|
1
|
+
{"version":3,"file":"sd-textarea.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textarea.ts"],"names":[],"mappings":";AAWA,qBAwKa,UAAU;IACrB,KAAK,0DAAmB;IAExB,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IACxB,OAAO,8CAAoB;IAC3B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,WAAW,+CAAiB,MAAM,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACzE,KAAK,8IAED;IACJ,UAAU,0DAAmB;IAC7B,UAAU,0DAAmB;IAE7B,QAAQ,yCAAmF;;IAsB3F,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;yCAzChB,UAAU;2CAAV,UAAU;CA8CtB"}
|
|
@@ -90,7 +90,7 @@ export class SdTextarea {
|
|
|
90
90
|
i0.ɵɵconditional(ctx.value() ? 1 : ctx.placeholder() ? 2 : 3);
|
|
91
91
|
i0.ɵɵadvance(3);
|
|
92
92
|
i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 4 : -1);
|
|
93
|
-
} }, styles: ["
|
|
93
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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, changeDetection: 0 });
|
|
94
94
|
}
|
|
95
95
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextarea, [{
|
|
96
96
|
type: Component,
|
|
@@ -127,6 +127,6 @@ export class SdTextarea {
|
|
|
127
127
|
"[attr.data-sd-inset]": "inset()",
|
|
128
128
|
"[attr.data-sd-size]": "size()",
|
|
129
129
|
"[attr.data-sd-theme]": "theme()",
|
|
130
|
-
}, styles: ["
|
|
130
|
+
}, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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}"] }]
|
|
131
131
|
}], () => [], { 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 }] }] }); })();
|
|
132
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextarea, { className: "SdTextarea", filePath: "packages/angular/src/controls/input/sd-textarea.ts", lineNumber:
|
|
132
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextarea, { className: "SdTextarea", filePath: "packages/angular/src/controls/input/sd-textarea.ts", lineNumber: 180 }); })();
|
|
@@ -25,6 +25,7 @@ export declare class SdTextfield<K extends keyof SdTextfieldTypes> {
|
|
|
25
25
|
inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
26
26
|
size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
|
|
27
27
|
theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
|
|
28
|
+
private readonly _inputElRef;
|
|
28
29
|
private readonly _handler;
|
|
29
30
|
controlType: import("@angular/core").Signal<string>;
|
|
30
31
|
controlStep: import("@angular/core").Signal<string | number>;
|
|
@@ -32,6 +33,7 @@ export declare class SdTextfield<K extends keyof SdTextfieldTypes> {
|
|
|
32
33
|
controlValueText: import("@angular/core").Signal<string | undefined>;
|
|
33
34
|
constructor();
|
|
34
35
|
onInput(event: Event): void;
|
|
36
|
+
onBlur(event: FocusEvent): void;
|
|
35
37
|
onInputPaste(event: ClipboardEvent): void;
|
|
36
38
|
static ɵfac: i0.ɵɵFactoryDeclaration<SdTextfield<any>, never>;
|
|
37
39
|
static ɵcmp: i0.ɵɵComponentDeclaration<SdTextfield<any>, "sd-textfield", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "inputStyle": { "alias": "inputStyle"; "required": false; "isSignal": true; }; "inputClass": { "alias": "inputClass"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "minlength": { "alias": "minlength"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "validatorFn": { "alias": "validatorFn"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "useNumberComma": { "alias": "useNumberComma"; "required": false; "isSignal": true; }; "minDigits": { "alias": "minDigits"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-textfield.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sd-textfield.d.ts","sourceRoot":"","sources":["../../../src/controls/input/sd-textfield.ts"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,8BAA8B,CAAC;;AAEtC,qBAoRa,WAAW,CAAC,CAAC,SAAS,MAAM,gBAAgB;IACvD,KAAK,uEAAgC;IAErC,IAAI,yCAAuB;IAC3B,WAAW,0DAAmB;IAC9B,KAAK,0DAAmB;IACxB,UAAU,0DAAmB;IAC7B,UAAU,0DAAmB;IAE7B,QAAQ,qEAAiD;IACzD,QAAQ,qEAAiD;IAEzD,QAAQ,qEAAiD;IACzD,GAAG,uEAAgC;IACnC,GAAG,uEAAgC;IACnC,SAAS,0DAAmB;IAC5B,SAAS,0DAAmB;IAC5B,OAAO,0DAAmB;IAC1B,WAAW,+CAAiB,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,KAAK,MAAM,GAAG,SAAS,eAAI;IACtF,MAAM,0DAAmB;IAEzB,IAAI,0DAAmB;IACvB,YAAY,0DAAmB;IAC/B,cAAc,qEAAgD;IAC9D,SAAS,0DAAmB;IAE5B,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,KAAK,8IAED;IAEJ,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsD;IAElF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAsD;IAE/E,WAAW,yCAA+C;IAE1D,WAAW,kDAA+D;IAE1E,YAAY,yCAOT;IAEH,gBAAgB,qDAMb;;IA2CH,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAc3B,MAAM,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO/B,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;yCAxH9B,WAAW;2CAAX,WAAW;CAuIvB"}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { isPlatformBrowser } from "@angular/common";
|
|
2
|
+
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, model, PLATFORM_ID, viewChild, ViewEncapsulation, } from "@angular/core";
|
|
2
3
|
import { setupInvalid } from "../../core/validation/setupInvalid";
|
|
3
4
|
import { textfieldTypeHandlers, } from "./sd-textfield-type-handlers";
|
|
4
5
|
import * as i0 from "@angular/core";
|
|
6
|
+
const _c0 = ["inputEl"];
|
|
5
7
|
function SdTextfield_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
6
|
-
i0.ɵɵdomElementStart(0, "span",
|
|
8
|
+
i0.ɵɵdomElementStart(0, "span", 1);
|
|
7
9
|
i0.ɵɵtext(1, "****");
|
|
8
10
|
i0.ɵɵdomElementEnd();
|
|
9
11
|
} }
|
|
@@ -17,7 +19,7 @@ function SdTextfield_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1)
|
|
|
17
19
|
i0.ɵɵtextInterpolate(ctx_r0.controlValueText() ? ctx_r0.controlValueText() : " ");
|
|
18
20
|
} }
|
|
19
21
|
function SdTextfield_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
20
|
-
i0.ɵɵdomElementStart(0, "span",
|
|
22
|
+
i0.ɵɵdomElementStart(0, "span", 3);
|
|
21
23
|
i0.ɵɵtext(1);
|
|
22
24
|
i0.ɵɵdomElementEnd();
|
|
23
25
|
} if (rf & 2) {
|
|
@@ -31,21 +33,21 @@ function SdTextfield_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1)
|
|
|
31
33
|
i0.ɵɵdomElementEnd();
|
|
32
34
|
} }
|
|
33
35
|
function SdTextfield_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
34
|
-
i0.ɵɵconditionalCreate(0, SdTextfield_Conditional_2_Conditional_0_Template, 2, 1, "pre")(1, SdTextfield_Conditional_2_Conditional_1_Template, 2, 1, "span",
|
|
36
|
+
i0.ɵɵconditionalCreate(0, SdTextfield_Conditional_2_Conditional_0_Template, 2, 1, "pre")(1, SdTextfield_Conditional_2_Conditional_1_Template, 2, 1, "span", 3)(2, SdTextfield_Conditional_2_Conditional_2_Template, 2, 0, "span");
|
|
35
37
|
} if (rf & 2) {
|
|
36
38
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
37
39
|
i0.ɵɵconditional(ctx_r0.controlValue() ? 0 : ctx_r0.placeholder() ? 1 : 2);
|
|
38
40
|
} }
|
|
39
41
|
function SdTextfield_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
40
42
|
const _r2 = i0.ɵɵgetCurrentView();
|
|
41
|
-
i0.ɵɵdomElementStart(0, "input",
|
|
42
|
-
i0.ɵɵdomListener("input", function SdTextfield_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInput($event)); })("paste", function SdTextfield_Conditional_3_Template_input_paste_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInputPaste($event)); });
|
|
43
|
+
i0.ɵɵdomElementStart(0, "input", 4, 0);
|
|
44
|
+
i0.ɵɵdomListener("input", function SdTextfield_Conditional_3_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInput($event)); })("paste", function SdTextfield_Conditional_3_Template_input_paste_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onInputPaste($event)); })("blur", function SdTextfield_Conditional_3_Template_input_blur_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onBlur($event)); });
|
|
43
45
|
i0.ɵɵdomElementEnd();
|
|
44
46
|
} if (rf & 2) {
|
|
45
47
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
46
48
|
i0.ɵɵstyleMap(ctx_r0.inputStyle());
|
|
47
49
|
i0.ɵɵclassMap(ctx_r0.inputClass());
|
|
48
|
-
i0.ɵɵdomProperty("type", ctx_r0.controlType())
|
|
50
|
+
i0.ɵɵdomProperty("type", ctx_r0.controlType());
|
|
49
51
|
i0.ɵɵattribute("title", ctx_r0.title() ?? ctx_r0.placeholder())("placeholder", ctx_r0.placeholder())("min", ctx_r0.min())("max", ctx_r0.max())("inputmode", ctx_r0.type() === "number" ? "numeric" : undefined)("autocomplete", ctx_r0.autocomplete())("step", ctx_r0.controlStep());
|
|
50
52
|
} }
|
|
51
53
|
export class SdTextfield {
|
|
@@ -73,6 +75,7 @@ export class SdTextfield {
|
|
|
73
75
|
inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
74
76
|
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
|
|
75
77
|
theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : /* istanbul ignore next */ []));
|
|
78
|
+
_inputElRef = viewChild("inputEl", ...(ngDevMode ? [{ debugName: "_inputElRef" }] : /* istanbul ignore next */ []));
|
|
76
79
|
_handler = computed(() => textfieldTypeHandlers[this.type()], ...(ngDevMode ? [{ debugName: "_handler" }] : /* istanbul ignore next */ []));
|
|
77
80
|
controlType = computed(() => this._handler().controlType, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
|
|
78
81
|
controlStep = computed(() => this._handler().getControlStep(this.step()), ...(ngDevMode ? [{ debugName: "controlStep" }] : /* istanbul ignore next */ []));
|
|
@@ -94,6 +97,20 @@ export class SdTextfield {
|
|
|
94
97
|
}) ?? this.controlValue();
|
|
95
98
|
}, ...(ngDevMode ? [{ debugName: "controlValueText" }] : /* istanbul ignore next */ []));
|
|
96
99
|
constructor() {
|
|
100
|
+
if (isPlatformBrowser(inject(PLATFORM_ID))) {
|
|
101
|
+
effect(() => {
|
|
102
|
+
const controlValue = this.controlValue();
|
|
103
|
+
const inputEl = this._inputElRef()?.nativeElement;
|
|
104
|
+
if (inputEl == null)
|
|
105
|
+
return;
|
|
106
|
+
// 편집(포커스) 중에는 DOM 을 되쓰면 사용자 입력(세그먼트·캐럿·IME 조합)이 깨지므로 생략
|
|
107
|
+
if (document.activeElement === inputEl)
|
|
108
|
+
return;
|
|
109
|
+
if (inputEl.value !== controlValue) {
|
|
110
|
+
inputEl.value = controlValue;
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
}
|
|
97
114
|
setupInvalid(() => {
|
|
98
115
|
const value = this.value();
|
|
99
116
|
const handlerErrors = this._handler().validate(value, {
|
|
@@ -128,6 +145,12 @@ export class SdTextfield {
|
|
|
128
145
|
}
|
|
129
146
|
this.value.set(parsed);
|
|
130
147
|
}
|
|
148
|
+
onBlur(event) {
|
|
149
|
+
// 편집 종료 시 모델 기준값으로 동기화 (number 콤마 포맷 반영, date 미완성 입력 정리)
|
|
150
|
+
// date 미완성 입력은 input.value 가 "" 라 비교 없이 무조건 되써야 남은 세그먼트가 정리됨
|
|
151
|
+
const inputEl = event.target;
|
|
152
|
+
inputEl.value = this.controlValue();
|
|
153
|
+
}
|
|
131
154
|
onInputPaste(event) {
|
|
132
155
|
event.preventDefault();
|
|
133
156
|
const text = event.clipboardData?.getData("text/plain").trim();
|
|
@@ -144,13 +167,17 @@ export class SdTextfield {
|
|
|
144
167
|
this.value.set(parsed);
|
|
145
168
|
}
|
|
146
169
|
static ɵfac = function SdTextfield_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdTextfield)(); };
|
|
147
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTextfield, selectors: [["sd-textfield"]],
|
|
170
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdTextfield, selectors: [["sd-textfield"]], viewQuery: function SdTextfield_Query(rf, ctx) { if (rf & 1) {
|
|
171
|
+
i0.ɵɵviewQuerySignal(ctx._inputElRef, _c0, 5);
|
|
172
|
+
} if (rf & 2) {
|
|
173
|
+
i0.ɵɵqueryAdvance();
|
|
174
|
+
} }, hostVars: 7, hostBindings: function SdTextfield_HostBindings(rf, ctx) { if (rf & 2) {
|
|
148
175
|
i0.ɵɵattribute("data-sd-type", ctx.type())("data-sd-disabled", ctx.disabled())("data-sd-readonly", ctx.readonly())("data-sd-inline", ctx.inline())("data-sd-inset", ctx.inset())("data-sd-size", ctx.size())("data-sd-theme", ctx.theme());
|
|
149
|
-
} }, inputs: { value: [1, "value"], type: [1, "type"], placeholder: [1, "placeholder"], title: [1, "title"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], min: [1, "min"], max: [1, "max"], minlength: [1, "minlength"], maxlength: [1, "maxlength"], pattern: [1, "pattern"], validatorFn: [1, "validatorFn"], format: [1, "format"], step: [1, "step"], autocomplete: [1, "autocomplete"], useNumberComma: [1, "useNumberComma"], minDigits: [1, "minDigits"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"] }, outputs: { value: "valueChange" }, decls: 4, vars: 9, consts: [[1, "tx-trans-light"], [3, "style", "class", "type"
|
|
176
|
+
} }, inputs: { value: [1, "value"], type: [1, "type"], placeholder: [1, "placeholder"], title: [1, "title"], inputStyle: [1, "inputStyle"], inputClass: [1, "inputClass"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], min: [1, "min"], max: [1, "max"], minlength: [1, "minlength"], maxlength: [1, "maxlength"], pattern: [1, "pattern"], validatorFn: [1, "validatorFn"], format: [1, "format"], step: [1, "step"], autocomplete: [1, "autocomplete"], useNumberComma: [1, "useNumberComma"], minDigits: [1, "minDigits"], inline: [1, "inline"], inset: [1, "inset"], size: [1, "size"], theme: [1, "theme"] }, outputs: { value: "valueChange" }, decls: 4, vars: 9, consts: [["inputEl", ""], [1, "tx-trans-light"], [3, "style", "class", "type"], [1, "tx-trans-lighter"], [3, "input", "paste", "blur", "type"]], template: function SdTextfield_Template(rf, ctx) { if (rf & 1) {
|
|
150
177
|
i0.ɵɵdomElementStart(0, "div");
|
|
151
|
-
i0.ɵɵconditionalCreate(1, SdTextfield_Conditional_1_Template, 2, 0, "span",
|
|
178
|
+
i0.ɵɵconditionalCreate(1, SdTextfield_Conditional_1_Template, 2, 0, "span", 1)(2, SdTextfield_Conditional_2_Template, 3, 1);
|
|
152
179
|
i0.ɵɵdomElementEnd();
|
|
153
|
-
i0.ɵɵconditionalCreate(3, SdTextfield_Conditional_3_Template,
|
|
180
|
+
i0.ɵɵconditionalCreate(3, SdTextfield_Conditional_3_Template, 2, 12, "input", 2);
|
|
154
181
|
} if (rf & 2) {
|
|
155
182
|
i0.ɵɵstyleMap(ctx.inputStyle());
|
|
156
183
|
i0.ɵɵclassMap(ctx.inputClass() ? "_contents " + ctx.inputClass() : "_contents");
|
|
@@ -160,7 +187,7 @@ export class SdTextfield {
|
|
|
160
187
|
i0.ɵɵconditional(ctx.controlType() === "password" ? 1 : 2);
|
|
161
188
|
i0.ɵɵadvance(2);
|
|
162
189
|
i0.ɵɵconditional(!ctx.readonly() && !ctx.disabled() ? 3 : -1);
|
|
163
|
-
} }, styles: ["
|
|
190
|
+
} }, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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, changeDetection: 0 });
|
|
164
191
|
}
|
|
165
192
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTextfield, [{
|
|
166
193
|
type: Component,
|
|
@@ -185,6 +212,7 @@ export class SdTextfield {
|
|
|
185
212
|
</div>
|
|
186
213
|
@if (!readonly() && !disabled()) {
|
|
187
214
|
<input
|
|
215
|
+
#inputEl
|
|
188
216
|
[style]="inputStyle()"
|
|
189
217
|
[class]="inputClass()"
|
|
190
218
|
[attr.title]="title() ?? placeholder()"
|
|
@@ -193,11 +221,11 @@ export class SdTextfield {
|
|
|
193
221
|
[attr.max]="max()"
|
|
194
222
|
[type]="controlType()"
|
|
195
223
|
[attr.inputmode]="type() === 'number' ? 'numeric' : undefined"
|
|
196
|
-
[value]="controlValue()"
|
|
197
224
|
[attr.autocomplete]="autocomplete()"
|
|
198
225
|
[attr.step]="controlStep()"
|
|
199
226
|
(input)="onInput($event)"
|
|
200
227
|
(paste)="onInputPaste($event)"
|
|
228
|
+
(blur)="onBlur($event)"
|
|
201
229
|
/>
|
|
202
230
|
}
|
|
203
231
|
`, host: {
|
|
@@ -208,6 +236,6 @@ export class SdTextfield {
|
|
|
208
236
|
"[attr.data-sd-inset]": "inset()",
|
|
209
237
|
"[attr.data-sd-size]": "size()",
|
|
210
238
|
"[attr.data-sd-theme]": "theme()",
|
|
211
|
-
}, styles: ["
|
|
212
|
-
}], () => [], { 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 }] }] }); })();
|
|
213
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextfield, { className: "SdTextfield", filePath: "packages/angular/src/controls/input/sd-textfield.ts", lineNumber:
|
|
239
|
+
}, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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}"] }]
|
|
240
|
+
}], () => [], { 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 }] }] }); })();
|
|
241
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTextfield, { className: "SdTextfield", filePath: "packages/angular/src/controls/input/sd-textfield.ts", lineNumber: 298 }); })();
|
|
@@ -98,7 +98,7 @@ export class SdListItem {
|
|
|
98
98
|
i0.ɵɵconditional(ctx.layout() === "accordion" && ctx.hasChildren() ? 5 : -1);
|
|
99
99
|
i0.ɵɵadvance();
|
|
100
100
|
i0.ɵɵconditional(ctx.hasChildren() ? 6 : -1);
|
|
101
|
-
} }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n gap: var(--gap-xs);\n border-radius: var(--border-radius-default);\n transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-
|
|
101
|
+
} }, dependencies: [SdCollapse, SdCollapseIcon, NgTemplateOutlet, NgIcon, SdRipple], styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n gap: var(--gap-xs);\n border-radius: var(--border-radius-default);\n transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-light);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background: var(--trans-light);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background: var(--trans-light);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 1em;\n width: 0;\n border-left: 1px solid var(--trans-light);\n pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-light);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n display: block;\n background: transparent;\n cursor: default;\n font-size: var(--font-size-sm);\n opacity: 0.7;\n margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n background: transparent;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
102
102
|
}
|
|
103
103
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdListItem, [{
|
|
104
104
|
type: Component,
|
|
@@ -148,6 +148,6 @@ export class SdListItem {
|
|
|
148
148
|
"[attr.data-sd-readonly]": "readonly()",
|
|
149
149
|
"[attr.data-sd-has-children]": "hasChildren()",
|
|
150
150
|
"[attr.data-sd-has-selected-icon]": "selectedIcon() != null",
|
|
151
|
-
}, styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n gap: var(--gap-xs);\n border-radius: var(--border-radius-default);\n transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-
|
|
151
|
+
}, styles: ["sd-list-item {\n display: block;\n}\nsd-list-item > ._content {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n gap: var(--gap-xs);\n border-radius: var(--border-radius-default);\n transition: background var(--animation-duration) ease-in;\n}\nsd-list-item > ._content > ._label {\n flex: 1 1 auto;\n overflow: auto;\n}\nsd-list-item > ._content:focus-visible {\n outline: none;\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-light);\n}\nsd-list-item[data-sd-selected=true] > ._content {\n background: var(--trans-light);\n font-weight: bold;\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content {\n color: var(--text-trans-default);\n}\nsd-list-item[data-sd-has-selected-icon=true][data-sd-selected=true] > ._content:hover {\n background: var(--trans-light);\n}\nsd-list-item[data-sd-readonly=true] > ._content {\n cursor: default;\n}\nsd-list-item > sd-collapse > ._content > ._children {\n position: relative;\n}\nsd-list-item > sd-collapse > ._content > ._children > ._indent-guide {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 1em;\n width: 0;\n border-left: 1px solid var(--trans-light);\n pointer-events: none;\n}\nsd-list-item[data-sd-layout=accordion]:not([data-sd-readonly=true]) > ._content:hover {\n transition: background var(--animation-duration) ease-out;\n background: var(--trans-light);\n}\nsd-list-item[data-sd-layout=accordion] > sd-collapse > ._content > ._children > sd-list > sd-list-item > ._content {\n padding-left: 1.5em;\n}\nsd-list-item[data-sd-layout=flat][data-sd-has-children=true] > ._content {\n display: block;\n background: transparent;\n cursor: default;\n font-size: var(--font-size-sm);\n opacity: 0.7;\n margin: 0;\n}\n\n.sd-theme-mobile > sd-list-item > ._content:hover {\n background: transparent;\n}"] }]
|
|
152
152
|
}], null, { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIcon", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], contentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentClass", required: false }] }], toolTpl: [{ type: i0.ContentChild, args: ["toolTpl", { isSignal: true }] }], _childLists: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdList), { isSignal: true }] }] }); })();
|
|
153
153
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdListItem, { className: "SdListItem", filePath: "packages/angular/src/controls/list/sd-list-item.ts", lineNumber: 170 }); })();
|
|
@@ -10,12 +10,12 @@ 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: var(--control-color);\n font-weight: bold;\n cursor: pointer;\n color: var(--theme-primary-default);\n transition: background
|
|
13
|
+
} }, styles: ["sd-select-button {\n display: block;\n background: var(--control-color);\n font-weight: bold;\n cursor: pointer;\n color: var(--theme-primary-default);\n transition: background var(--animation-duration) linear;\n}\nsd-select-button:hover {\n color: var(--theme-primary-darker);\n background: var(--theme-gray-lightest);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
14
14
|
}
|
|
15
15
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectButton, [{
|
|
16
16
|
type: Component,
|
|
17
17
|
args: [{ selector: "sd-select-button", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], template: `
|
|
18
18
|
<ng-content />
|
|
19
|
-
`, host: {}, styles: ["sd-select-button {\n display: block;\n background: var(--control-color);\n font-weight: bold;\n cursor: pointer;\n color: var(--theme-primary-default);\n transition: background
|
|
19
|
+
`, host: {}, styles: ["sd-select-button {\n display: block;\n background: var(--control-color);\n font-weight: bold;\n cursor: pointer;\n color: var(--theme-primary-default);\n transition: background var(--animation-duration) linear;\n}\nsd-select-button:hover {\n color: var(--theme-primary-darker);\n background: var(--theme-gray-lightest);\n}"] }]
|
|
20
20
|
}], () => [], null); })();
|
|
21
21
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectButton, { className: "SdSelectButton", filePath: "packages/angular/src/controls/select/sd-select-button.ts", lineNumber: 36 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-select-item.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-item.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;;AAIvC,
|
|
1
|
+
{"version":3,"file":"sd-select-item.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select-item.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;;AAIvC,qBAoEa,YAAY,CAAC,CAAC;IACzB,SAAS,CAAC,QAAQ,CAAC,cAAc,mBAE/B;IACF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAsB;IAElD,KAAK,qDAAmC;IACxC,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IAEvD,WAAW,iDAAc;IAEzB,UAAU,0CAQP;;IAkBH,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAOhC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;yCA9C1B,YAAY;2CAAZ,YAAY;CAiExB"}
|
|
@@ -84,7 +84,7 @@ export class SdSelectItem {
|
|
|
84
84
|
i0.ɵɵelementEnd();
|
|
85
85
|
} if (rf & 2) {
|
|
86
86
|
i0.ɵɵconditional(ctx._parentControl.selectMode() === "multi" ? 0 : -1);
|
|
87
|
-
} }, dependencies: [SdCheckbox, SdGap], styles: ["
|
|
87
|
+
} }, dependencies: [SdCheckbox, SdGap], styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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, changeDetection: 0 });
|
|
88
88
|
}
|
|
89
89
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelectItem, [{
|
|
90
90
|
type: Component,
|
|
@@ -105,6 +105,6 @@ export class SdSelectItem {
|
|
|
105
105
|
"[attr.data-sd-hidden]": "hidden()",
|
|
106
106
|
"(click)": "onClick($event)",
|
|
107
107
|
"(keydown)": "onKeydown($event)",
|
|
108
|
-
}, styles: ["
|
|
108
|
+
}, styles: ["/*@function to-rgb($oklch-color) {\n @return color.to-space($oklch-color, rgb);\n}*/\n/*$colors: (\n red: to-rgb(oklch(0.704 0.191 22.216)),\n orange: to-rgb(oklch(0.75 0.183 55.934)),\n amber: to-rgb(oklch(0.828 0.189 84.429)),\n yellow: to-rgb(oklch(0.852 0.199 91.936)),\n lime: to-rgb(oklch(0.841 0.238 128.85)),\n green: to-rgb(oklch(0.792 0.209 151.711)),\n emerald: to-rgb(oklch(0.765 0.177 163.223)),\n teal: to-rgb(oklch(0.777 0.152 181.912)),\n cyan: to-rgb(oklch(0.789 0.154 211.53)),\n sky: to-rgb(oklch(0.746 0.16 232.661)),\n blue: to-rgb(oklch(0.707 0.165 254.624)),\n indigo: to-rgb(oklch(0.673 0.182 276.935)),\n violet: to-rgb(oklch(0.702 0.183 293.541)),\n purple: to-rgb(oklch(0.714 0.203 305.504)),\n fuchsia: to-rgb(oklch(0.74 0.238 322.16)),\n pink: to-rgb(oklch(0.718 0.202 349.761)),\n rose: to-rgb(oklch(0.712 0.194 13.428)),\n slate: to-rgb(oklch(0.704 0.04 256.788)),\n gray: to-rgb(oklch(0.707 0.022 261.325)),\n zinc: to-rgb(oklch(0.705 0.015 286.067)),\n neutral: to-rgb(oklch(0.708 0 0)),\n stone: to-rgb(oklch(0.709 0.01 56.259)),\n);*/\nsd-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}"] }]
|
|
109
109
|
}], () => [], { 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 }] }] }); })();
|
|
110
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectItem, { className: "SdSelectItem", filePath: "packages/angular/src/controls/select/sd-select-item.ts", lineNumber:
|
|
110
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelectItem, { className: "SdSelectItem", filePath: "packages/angular/src/controls/select/sd-select-item.ts", lineNumber: 87 }); })();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;AAUhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,
|
|
1
|
+
{"version":3,"file":"sd-select.d.ts","sourceRoot":"","sources":["../../../src/controls/select/sd-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAYL,WAAW,EAGZ,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI1D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;;AAUhD,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF,qBA6Na,QAAQ,CAAC,CAAC,SAAS,QAAQ,GAAG,OAAO,EAAE,CAAC;IACnD,UAAU,yCAAwB;IAClC,KAAK,2EAAoC;IACzC,WAAW,0DAAmB;IAC9B,QAAQ,qEAAiD;IACzD,MAAM,qEAAiD;IACvD,KAAK,qEAAiD;IACtD,IAAI,+DAAwB;IAC5B,QAAQ,qEAAiD;IAEzD,aAAa,qEAAiD;IAC9D,8BAA8B,8DAAuB;IAErD,KAAK,uDAAgB;IACrB,SAAS,6CAAgB,CAAC,SAAS,MAAM,KAAK,OAAO,EAAkB;IACvE,aAAa,8CAAgB,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,eAAI;IAEtD,YAAY,0DAAmB;IAC/B,YAAY,0DAAmB;IAE/B,YAAY,+CAAgB;IAE5B,SAAS,CAAC,QAAQ,CAAC,eAAe,iUAAmB;IAErD,aAAa,+DAAiC;IAC9C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAkC;IACnE,OAAO,CAAC,QAAQ,CAAC,cAAc,CAG7B;IAEF,UAAU,gEAAgD;IAC1D,UAAU,gEAAgD;IAC1D,UAAU,+DAAyD;IAEnE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAwB;IAEnD,wBAAwB,uDAwBrB;IAEH,UAAU;cAIY,CAAC;eAAS,MAAM;eAAS,MAAM;SAelD;;IAmDH,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAO1C,UAAU,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS,GAAG,IAAI;IAI1C,OAAO,CAAC,YAAY;IAepB,WAAW,IAAI,IAAI;IAQnB,aAAa,IAAI,IAAI;IAIrB,aAAa,IAAI,IAAI;IAIrB,YAAY,IAAI,IAAI;yCA/KT,QAAQ;2CAAR,QAAQ;CAmLpB"}
|
|
@@ -318,7 +318,7 @@ export class SdSelect {
|
|
|
318
318
|
SdGap,
|
|
319
319
|
NgTemplateOutlet,
|
|
320
320
|
SdRipple,
|
|
321
|
-
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(--
|
|
321
|
+
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(--border-color-light);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n border-color: var(--theme-primary-default);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n display: flex;\n position: relative;\n gap: var(--gap-default);\n flex-grow: 1;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n font-family: var(--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(--gap-sm);\n border-left: 1px solid var(--theme-gray-lightest);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n border-top-right-radius: var(--border-radius-default);\n border-bottom-right-radius: var(--border-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n background: var(--theme-gray-lightest);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--text-trans-light);\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(--gap-xs) var(--gap-sm);\n gap: var(--gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n padding: var(--gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n padding: var(--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(--theme-primary-default);\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(--theme-primary-default);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n background: var(--control-color);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--text-trans-default);\n}\n\n._sd-select-all-bar {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n border-bottom: 1px solid var(--border-color-light);\n}"], encapsulation: 2, changeDetection: 0 });
|
|
322
322
|
}
|
|
323
323
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSelect, [{
|
|
324
324
|
type: Component,
|
|
@@ -387,6 +387,6 @@ export class SdSelect {
|
|
|
387
387
|
"[attr.data-sd-inline]": "inline()",
|
|
388
388
|
"[attr.data-sd-inset]": "inset()",
|
|
389
389
|
"[attr.data-sd-disabled]": "disabled()",
|
|
390
|
-
}, 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(--
|
|
390
|
+
}, 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(--border-color-light);\n border-radius: var(--border-radius-default);\n background: var(--theme-secondary-lightest);\n}\nsd-select > sd-dropdown:focus, sd-select > sd-dropdown:focus-within {\n border-color: var(--theme-primary-default);\n}\nsd-select > sd-dropdown > ._sd-select-control {\n display: flex;\n position: relative;\n gap: var(--gap-default);\n flex-grow: 1;\n padding: var(--gap-sm) var(--gap-default);\n cursor: pointer;\n font-family: var(--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(--gap-sm);\n border-left: 1px solid var(--theme-gray-lightest);\n}\nsd-select > sd-dropdown > sd-select-button:last-of-type {\n border-top-right-radius: var(--border-radius-default);\n border-bottom-right-radius: var(--border-radius-default);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown {\n background: var(--theme-gray-lightest);\n}\nsd-select[data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--text-trans-light);\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(--gap-xs) var(--gap-sm);\n gap: var(--gap-sm);\n}\nsd-select[data-sd-size=sm] > sd-dropdown > sd-select-button {\n padding: var(--gap-xs);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > ._sd-select-control {\n padding: var(--gap-default) var(--gap-lg);\n gap: var(--gap-lg);\n}\nsd-select[data-sd-size=lg] > sd-dropdown > sd-select-button {\n padding: var(--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(--theme-primary-default);\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(--theme-primary-default);\n outline-offset: -1px;\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown {\n background: var(--control-color);\n}\nsd-select[data-sd-inset=true][data-sd-disabled=true] > sd-dropdown > ._sd-select-control {\n color: var(--text-trans-default);\n}\n\n._sd-select-all-bar {\n display: flex;\n padding: var(--gap-sm) var(--gap-default);\n border-bottom: 1px solid var(--border-color-light);\n}"] }]
|
|
391
391
|
}], () => [], { 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 }] }] }); })();
|
|
392
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber:
|
|
392
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSelect, { className: "SdSelect", filePath: "packages/angular/src/controls/select/sd-select.ts", lineNumber: 258 }); })();
|