@simplysm/angular 14.0.97 → 14.0.99
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.
|
@@ -23,7 +23,7 @@ export class SdButton {
|
|
|
23
23
|
i0.ɵɵstyleMap(ctx.buttonStyle());
|
|
24
24
|
i0.ɵɵclassMap(ctx.buttonClass());
|
|
25
25
|
i0.ɵɵproperty("type", ctx.type())("disabled", ctx.disabled())("sdRipple", !ctx.disabled());
|
|
26
|
-
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-darker);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-darker);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-darker);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-darker);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-darker);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-darker);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-darker);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
26
|
+
} }, dependencies: [SdRipple], styles: ["sd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-dark);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-dark);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-dark);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-dark);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-dark);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-dark);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-dark);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"], encapsulation: 2, changeDetection: 0 });
|
|
27
27
|
}
|
|
28
28
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdButton, [{
|
|
29
29
|
type: Component,
|
|
@@ -44,6 +44,6 @@ export class SdButton {
|
|
|
44
44
|
"[attr.data-sd-size]": "size()",
|
|
45
45
|
"[attr.data-sd-inset]": "inset()",
|
|
46
46
|
"[attr.data-sd-disabled]": "disabled()",
|
|
47
|
-
}, styles: ["sd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-darker);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-darker);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-darker);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-darker);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-darker);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-darker);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-darker);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-darker);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"] }]
|
|
47
|
+
}, styles: ["sd-button > button {\n display: block;\n padding: var(--gap-sm) var(--gap-default);\n border: 1px solid transparent;\n font-size: var(--font-size-default);\n font-family: var(--font-family);\n font-variant-numeric: tabular-nums;\n line-height: var(--line-height);\n color: var(--text-trans-default);\n user-select: none;\n padding: var(--gap-sm) var(--gap-lg);\n width: 100%;\n background: var(--control-color);\n border-color: var(--border-color-light);\n border-radius: var(--border-radius-default);\n font-weight: bold;\n text-align: center;\n cursor: pointer;\n transition: 0.1s linear;\n transition-property: border, background;\n}\nsd-button > button:hover {\n background: var(--theme-gray-lightest);\n}\nsd-button > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-inset=true] > button {\n border-radius: 0;\n border: none;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-inset=true] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-inset=true] > button:disabled {\n background: var(--control-color);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-default);\n cursor: default;\n}\nsd-button[data-sd-theme=gray] > button {\n background: var(--theme-gray-default);\n border-color: var(--theme-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:hover {\n background: var(--theme-gray-dark);\n border-color: var(--theme-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=blue-gray] > button {\n background: var(--theme-blue-gray-default);\n border-color: var(--theme-blue-gray-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:hover {\n background: var(--theme-blue-gray-dark);\n border-color: var(--theme-blue-gray-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=blue-gray] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=primary] > button {\n background: var(--theme-primary-default);\n border-color: var(--theme-primary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:hover {\n background: var(--theme-primary-dark);\n border-color: var(--theme-primary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=primary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=secondary] > button {\n background: var(--theme-secondary-default);\n border-color: var(--theme-secondary-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:hover {\n background: var(--theme-secondary-dark);\n border-color: var(--theme-secondary-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=secondary] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=info] > button {\n background: var(--theme-info-default);\n border-color: var(--theme-info-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:hover {\n background: var(--theme-info-dark);\n border-color: var(--theme-info-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=info] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=success] > button {\n background: var(--theme-success-default);\n border-color: var(--theme-success-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:hover {\n background: var(--theme-success-dark);\n border-color: var(--theme-success-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=success] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=warning] > button {\n background: var(--theme-warning-default);\n border-color: var(--theme-warning-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:hover {\n background: var(--theme-warning-dark);\n border-color: var(--theme-warning-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=warning] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=danger] > button {\n background: var(--theme-danger-default);\n border-color: var(--theme-danger-default);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:hover {\n background: var(--theme-danger-dark);\n border-color: var(--theme-danger-dark);\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=danger] > button:disabled {\n background: var(--theme-gray-lighter);\n border-color: var(--theme-gray-lighter);\n color: var(--text-trans-lighter);\n cursor: default;\n}\nsd-button[data-sd-theme=link] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link] > button:hover {\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-gray-default);\n}\nsd-button[data-sd-theme=link-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-gray-dark);\n}\nsd-button[data-sd-theme=link-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-blue-gray] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-blue-gray-default);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-blue-gray-dark);\n}\nsd-button[data-sd-theme=link-blue-gray] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-primary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-primary-default);\n}\nsd-button[data-sd-theme=link-primary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-primary-dark);\n}\nsd-button[data-sd-theme=link-primary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-secondary] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-secondary-default);\n}\nsd-button[data-sd-theme=link-secondary] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-secondary-dark);\n}\nsd-button[data-sd-theme=link-secondary] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-info] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-info-default);\n}\nsd-button[data-sd-theme=link-info] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-info-dark);\n}\nsd-button[data-sd-theme=link-info] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-success] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-success-default);\n}\nsd-button[data-sd-theme=link-success] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-success-dark);\n}\nsd-button[data-sd-theme=link-success] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-warning] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-warning-default);\n}\nsd-button[data-sd-theme=link-warning] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-warning-dark);\n}\nsd-button[data-sd-theme=link-warning] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-danger] > button {\n border-color: transparent;\n background: transparent;\n color: var(--theme-danger-default);\n}\nsd-button[data-sd-theme=link-danger] > button:hover {\n background: var(--trans-lighter);\n color: var(--theme-danger-dark);\n}\nsd-button[data-sd-theme=link-danger] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-lighter);\n}\nsd-button[data-sd-theme=link-rev] > button {\n border-color: transparent;\n background: transparent;\n color: var(--text-trans-rev-default);\n}\nsd-button[data-sd-theme=link-rev] > button:hover {\n color: var(--text-trans-rev-dark);\n}\nsd-button[data-sd-theme=link-rev] > button:disabled {\n border-color: transparent;\n color: var(--text-trans-rev-darker);\n}\nsd-button[data-sd-inline=true] > button {\n display: inline-block;\n width: auto;\n vertical-align: top;\n}\nsd-button[data-sd-size=xs] > button {\n padding: var(--gap-xxs) var(--gap-xs);\n}\nsd-button[data-sd-size=sm] > button {\n padding: var(--gap-xs) var(--gap-default);\n}\nsd-button[data-sd-size=lg] > button {\n padding: var(--gap-default) var(--gap-xl);\n}\nsd-button[data-sd-disabled=true]:active {\n pointer-events: none;\n}"] }]
|
|
48
48
|
}], null, { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonStyle", required: false }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }] }); })();
|
|
49
49
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdButton, { className: "SdButton", filePath: "packages/angular/src/controls/button/sd-button.ts", lineNumber: 185 }); })();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplysm/angular",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.99",
|
|
4
4
|
"description": "심플리즘 패키지 - Angular",
|
|
5
5
|
"author": "심플리즘",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
"jspdf": "^4.2.1",
|
|
52
52
|
"rxjs": "^7.8.2",
|
|
53
53
|
"tabbable": "^6.4.0",
|
|
54
|
-
"@simplysm/
|
|
55
|
-
"@simplysm/core-
|
|
56
|
-
"@simplysm/
|
|
57
|
-
"@simplysm/service-
|
|
54
|
+
"@simplysm/service-common": "14.0.99",
|
|
55
|
+
"@simplysm/core-browser": "14.0.99",
|
|
56
|
+
"@simplysm/core-common": "14.0.99",
|
|
57
|
+
"@simplysm/service-client": "14.0.99"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@angular/compiler": "^21.2.17",
|
|
@@ -68,7 +68,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
68
68
|
color: var(--theme-primary-default);
|
|
69
69
|
|
|
70
70
|
&:hover {
|
|
71
|
-
color: var(--theme-primary-
|
|
71
|
+
color: var(--theme-primary-dark);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
&:disabled {
|
|
@@ -106,7 +106,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
106
106
|
color: var(--theme-primary-default);
|
|
107
107
|
|
|
108
108
|
&:hover {
|
|
109
|
-
color: var(--theme-primary-
|
|
109
|
+
color: var(--theme-primary-dark);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
&:disabled {
|
|
@@ -123,7 +123,7 @@ import { SdRipple } from "../../core/ripple/sd-ripple";
|
|
|
123
123
|
|
|
124
124
|
&:hover {
|
|
125
125
|
background: var(--trans-lighter);
|
|
126
|
-
color: var(--theme-#{$key}-
|
|
126
|
+
color: var(--theme-#{$key}-dark);
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
&:disabled {
|