@educarehq/solaris-ui 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@educarehq/solaris-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/styles/_button.scss

@@ -16,6 +16,8 @@
   --solaris-button-icon-size: var(--solaris-spacing-4);
   --solaris-button-padding-x: var(--solaris-spacing-4);
   --solaris-button-padding-y: var(--solaris-spacing-2);
+  --solaris-button-icon-padding-start: var(--solaris-spacing-2);
+  --solaris-button-icon-padding-end: var(--solaris-spacing-2);
   --solaris-button-custom-active-border-color: initial;
   --solaris-button-custom-hover-color: initial;
   --solaris-button-custom-active-color: initial;
@@ -126,6 +128,14 @@
   display: block;
 }
 
+[solaris-button][data-icon-position='start'] {
+  padding-inline-start: var(--solaris-button-icon-padding-start);
+}
+
+[solaris-button][data-icon-position='end'] {
+  padding-inline-end: var(--solaris-button-icon-padding-end);
+}
+
 [solaris-button][data-appearance='solid'] {
   --solaris-button-border-width: 0;
 }

package/styles/token/density/_compact.scss

@@ -1,16 +1,16 @@
 [data-density='compact'] {
   --solaris-density-scale: 0.75;
-  --solaris-density-padding-xs: 2px;
-  --solaris-density-padding-sm: 4px;
-  --solaris-density-padding-md: 6px;
-  --solaris-density-padding-lg: 8px;
+  --solaris-density-padding-xs: 4px;
+  --solaris-density-padding-sm: 6px;
+  --solaris-density-padding-md: 8px;
+  --solaris-density-padding-lg: 10px;
   --solaris-density-padding-xl: 12px;
-  --solaris-density-gap-xs: 2px;
-  --solaris-density-gap-sm: 4px;
-  --solaris-density-gap-md: 6px;
-  --solaris-density-gap-lg: 8px;
-  --solaris-density-gap-xl: 10px;
-  --solaris-density-min-width: 36px;
-  --solaris-density-min-height: 36px;
-  --solaris-density-font-size: var(--solaris-font-size-xs);
+  --solaris-density-gap-xs: 4px;
+  --solaris-density-gap-sm: 6px;
+  --solaris-density-gap-md: 8px;
+  --solaris-density-gap-lg: 10px;
+  --solaris-density-gap-xl: 12px;
+  --solaris-density-min-width: 40px;
+  --solaris-density-min-height: 40px;
+  --solaris-density-font-size: var(--solaris-font-size-sm);
 }

package/types/educarehq-solaris-ui.d.ts

@@ -123,6 +123,11 @@ declare class SolarisIconComponent {
 interface SvgPathElement {
     type: 'path';
     d: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeLinecap?: string;
+    strokeLinejoin?: string;
 }
 interface SvgLineElement {
     type: 'line';
@@ -130,20 +135,40 @@ interface SvgLineElement {
     y1: number;
     x2: number;
     y2: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeLinecap?: string;
+    strokeLinejoin?: string;
 }
 interface SvgPolylineElement {
     type: 'polyline';
     points: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeLinecap?: string;
+    strokeLinejoin?: string;
 }
 interface SvgPolygonElement {
     type: 'polygon';
     points: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeLinecap?: string;
+    strokeLinejoin?: string;
 }
 interface SvgCircleElement {
     type: 'circle';
     cx: number;
     cy: number;
     r: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeLinecap?: string;
+    strokeLinejoin?: string;
 }
 interface SvgRectElement {
     type: 'rect';
@@ -153,6 +178,11 @@ interface SvgRectElement {
     height: number;
     rx?: number;
     ry?: number;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number;
+    strokeLinecap?: string;
+    strokeLinejoin?: string;
 }
 type SvgElement = SvgPathElement | SvgLineElement | SvgPolylineElement | SvgPolygonElement | SvgCircleElement | SvgRectElement;
 interface SolarisIconDefinition {
@@ -184,7 +214,7 @@ declare const SOLARIS_ICONS_CONFIG: InjectionToken<SolarisIconsConfig>;
 
 declare const SOLARIS_BUILT_IN_ICONS: SolarisIconDefinition[];
 
-type SolarisBuiltInIcon = 'check' | 'x' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-forward' | 'chevron-backward' | 'chevron-first' | 'chevron-last' | 'info' | 'warning' | 'danger' | 'caution' | 'success' | 'shield-check' | 'sun' | 'moon' | 'monitor' | 'globe' | 'ellipsis' | 'slash' | 'dot' | 'home' | 'edit' | 'trash' | 'move' | 'gear' | 'settings' | 'wrench' | 'unlink' | 'unlock' | 'lock';
+type SolarisBuiltInIcon = 'check' | 'x' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-forward' | 'chevron-backward' | 'chevron-first' | 'chevron-last' | 'info' | 'warning' | 'danger' | 'caution' | 'success' | 'shield-check' | 'sun' | 'moon' | 'monitor' | 'globe' | 'ellipsis' | 'slash' | 'dot' | 'home' | 'edit' | 'trash' | 'move' | 'gear' | 'settings' | 'wrench' | 'unlink' | 'unlock' | 'lock' | 'google' | 'microsoft' | 'apple' | 'android' | 'github';
 type SolarisIconName = string & {
     __brand?: never;
 };
@@ -321,6 +351,7 @@ type SolarisButtonColor = 'neutral' | 'primary' | 'success' | 'warning' | 'dange
 type SolarisButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
 type SolarisButtonDensity = 'compact' | 'normal' | 'comfortable';
 type SolarisButtonShape = 'normal' | 'wide';
+type SolarisButtonIconPosition = 'start' | 'end';
 
 declare class SolarisButtonDirective {
     readonly appearance: _angular_core.InputSignal<SolarisButtonAppearance>;
@@ -333,6 +364,9 @@ declare class SolarisButtonDirective {
     readonly fullWidth: _angular_core.InputSignal<boolean>;
     readonly loadingLabelKey: _angular_core.InputSignal<string | undefined>;
     readonly loadingLabel: _angular_core.InputSignal<string | undefined>;
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    readonly iconPosition: _angular_core.InputSignal<SolarisButtonIconPosition>;
+    protected readonly computedIconPosition: _angular_core.Signal<string | null>;
     protected readonly isEffectivelyDisabled: _angular_core.Signal<boolean>;
     protected readonly themeService: SolarisThemeService;
     protected readonly effectiveDensity: _angular_core.Signal<"compact" | "normal" | "comfortable">;
@@ -342,15 +376,19 @@ declare class SolarisButtonDirective {
     private readonly platformId;
     private readonly destroyRef;
     private spinnerRef;
+    private iconRef;
     protected readonly resolvedLoadingLabel: _angular_core.Signal<string | undefined>;
     protected readonly isButton: boolean;
     protected readonly isAnchor: boolean;
     constructor();
     private attachSpinner;
     private detachSpinner;
+    private syncIcon;
+    private placeIcon;
+    private detachIcon;
     onClick(event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SolarisButtonDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SolarisButtonDirective, "[solaris-button]", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loadingLabelKey": { "alias": "loadingLabelKey"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SolarisButtonDirective, "[solaris-button]", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loadingLabelKey": { "alias": "loadingLabelKey"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class SolarisButtonIconDirective {