cax-design-system 2.0.0 → 2.2.0

package/resources/components/timeline/timeline.scss

@@ -0,0 +1,134 @@
+@layer cax {
+    .cax-timeline {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+    }
+
+    .cax-timeline-left .cax-timeline-event-opposite {
+        text-align: right;
+    }
+
+    .cax-timeline-left .cax-timeline-event-content {
+        text-align: left;
+    }
+
+    .cax-timeline-right .cax-timeline-event {
+        flex-direction: row-reverse;
+    }
+
+    .cax-timeline-right .cax-timeline-event-opposite {
+        text-align: left;
+    }
+
+    .cax-timeline-right .cax-timeline-event-content {
+        text-align: right;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) {
+        flex-direction: row-reverse !important;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-opposite {
+        text-align: right;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(odd) .cax-timeline-event-content {
+        text-align: left;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) .cax-timeline-event-opposite {
+        text-align: left;
+    }
+
+    .cax-timeline-vertical.cax-timeline-alternate .cax-timeline-event:nth-child(even) .cax-timeline-event-content {
+        text-align: right;
+    }
+
+    .cax-timeline-event {
+        display: flex;
+        position: relative;
+        min-height: 70px;
+    }
+
+    .cax-timeline-event:last-child {
+        min-height: 0;
+    }
+
+    .cax-timeline-event-opposite {
+        flex: 1;
+        padding: 0 1rem;
+        min-width: 100px;
+    }
+
+    .cax-timeline-event-content {
+        flex: 1;
+        padding: 0 1rem;
+        min-width: 100px;
+        border-radius: 8px;
+        //margin-left: 8px;
+    }
+    .cax-timeline-event-separator {
+        flex: 0;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    .cax-timeline-event-marker {
+        display: flex;
+        align-self: baseline;
+    }
+
+    .cax-timeline-event-connector {
+        flex-grow: 1;
+    }
+
+    .cax-timeline-horizontal {
+        flex-direction: row;
+    }
+
+    .cax-timeline-horizontal.cax-timeline-bottom{
+        align-items: end !important;
+    }
+
+   .cax-timeline-horizontal.cax-timeline-top{
+        align-items: start !important;
+    }
+
+    .cax-timeline-horizontal .cax-timeline-event {
+        flex-direction: column;
+        flex: 1;
+    }
+
+    .cax-timeline-horizontal .cax-timeline-event:last-child {
+        flex: 0;
+    }
+
+    .cax-timeline-horizontal .cax-timeline-event-separator {
+        flex-direction: row;
+    }
+
+    .cax-timeline-horizontal .cax-timeline-event-connector {
+        width: 100%;
+    }
+
+    .cax-timeline-bottom .cax-timeline-event {
+        flex-direction: column-reverse;
+
+    }
+
+    .cax-timeline-horizontal.cax-timeline-alternate .cax-timeline-event:nth-child(even) {
+        flex-direction: column-reverse;
+    }
+    .cax-timeline-event-marker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        
+      }
+      
+}

package/resources/components/toggleswitch/toggleswitch.scss

@@ -14,6 +14,12 @@
         display: inline-flex;
         align-items: center;
         position: relative;
+        cursor: pointer;
+        &:hover,
+        &:has(.cax-toggle-thumb:hover),
+        &:has(.cax-toggleswitch-track:hover) {
+            opacity: 0.9;
+        }
     }
 
     .cax-toggleswitchmaindiv-disabled {

package/splitbutton/splitbutton.d.ts

@@ -135,6 +135,7 @@ export declare class SplitButton {
      * When present, it specifies that the component should automatically get focus on load.
      * @group Props
      */
+    isMenuOpen: boolean;
     autofocus: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.

package/splitbutton/splitbutton.module.d.ts

@@ -5,8 +5,9 @@ import * as i3 from "cax-design-system/button";
 import * as i4 from "cax-design-system/tieredmenu";
 import * as i5 from "cax-design-system/autofocus";
 import * as i6 from "cax-design-system/icons/chevrondown";
+import * as i7 from "cax-design-system/icons/chevronup";
 export declare class SplitButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SplitButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SplitButtonModule, [typeof i1.SplitButton], [typeof i2.CommonModule, typeof i3.ButtonModule, typeof i4.TieredMenuModule, typeof i5.AutoFocusModule, typeof i6.ChevronDownIcon], [typeof i1.SplitButton, typeof i3.ButtonModule, typeof i4.TieredMenuModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SplitButtonModule, [typeof i1.SplitButton], [typeof i2.CommonModule, typeof i3.ButtonModule, typeof i4.TieredMenuModule, typeof i5.AutoFocusModule, typeof i6.ChevronDownIcon, typeof i7.ChevronUpIcon], [typeof i1.SplitButton, typeof i3.ButtonModule, typeof i4.TieredMenuModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SplitButtonModule>;
 }

package/steps/public_api.d.ts

@@ -1 +1,2 @@
 export * from './steps';
+export * from './steps.module';

package/steps/steps.d.ts

@@ -4,9 +4,6 @@ import { Nullable } from 'cax-design-system/ts-helpers';
 import { MenuItem } from 'cax-design-system/api';
 import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/router";
-import * as i3 from "cax-design-system/tooltip";
 /**
  * Steps components is an indicator for the steps in a wizard workflow.
  * @group Components
@@ -73,13 +70,8 @@ export declare class Steps implements OnInit, OnDestroy {
     getItemTabIndex(item: MenuItem, index: number): string;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Steps, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Steps, "p-steps", never, { "activeIndex": { "alias": "activeIndex"; "required": false; }; "model": { "alias": "model"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "exact": { "alias": "exact"; "required": false; }; }, { "activeIndexChange": "activeIndexChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Steps, "cax-steps", never, { "activeIndex": { "alias": "activeIndex"; "required": false; }; "model": { "alias": "model"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "exact": { "alias": "exact"; "required": false; }; }, { "activeIndexChange": "activeIndexChange"; }, never, never, false, never>;
     static ngAcceptInputType_activeIndex: unknown;
     static ngAcceptInputType_readonly: unknown;
     static ngAcceptInputType_exact: unknown;
 }
-export declare class StepsModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<StepsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StepsModule, [typeof Steps], [typeof i1.CommonModule, typeof i2.RouterModule, typeof i3.TooltipModule], [typeof Steps, typeof i2.RouterModule, typeof i3.TooltipModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<StepsModule>;
-}

package/steps/steps.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./steps";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/router";
+import * as i4 from "cax-design-system/tooltip";
+export declare class StepsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<StepsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StepsModule, [typeof i1.Steps], [typeof i2.CommonModule, typeof i3.RouterModule, typeof i4.TooltipModule], [typeof i1.Steps, typeof i3.RouterModule, typeof i4.TooltipModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<StepsModule>;
+}

package/timeline/public_api.d.ts

@@ -1,2 +1,3 @@
 export * from './timeline';
 export * from './timeline.interface';
+export * from './timeline.module';

package/timeline/timeline.d.ts

@@ -2,8 +2,6 @@ import { AfterContentInit, ElementRef, QueryList, TemplateRef } from '@angular/c
 import { BlockableUI } from 'cax-design-system/api';
 import { Nullable } from 'cax-design-system/ts-helpers';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "cax-design-system/api";
 /**
  * Timeline visualizes a series of chained events.
  * @group Components
@@ -45,10 +43,5 @@ export declare class Timeline implements AfterContentInit, BlockableUI {
     getBlockableElement(): HTMLElement;
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Timeline, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Timeline, "p-timeline", never, { "value": { "alias": "value"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "align": { "alias": "align"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; }, {}, ["templates"], never, false, never>;
-}
-export declare class TimelineModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<TimelineModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TimelineModule, [typeof Timeline], [typeof i1.CommonModule], [typeof Timeline, typeof i2.SharedModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<TimelineModule>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Timeline, "cax-timeline", never, { "value": { "alias": "value"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "align": { "alias": "align"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; }, {}, ["templates"], never, false, never>;
 }

package/timeline/timeline.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./timeline";
+import * as i2 from "@angular/common";
+import * as i3 from "cax-design-system/api";
+export declare class TimelineModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimelineModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TimelineModule, [typeof i1.Timeline], [typeof i2.CommonModule], [typeof i1.Timeline, typeof i3.SharedModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TimelineModule>;
+}

package/toggleswitch/toggleswitch.d.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class ToggleSwitchComponent {
+    size: 'sm' | 'md' | 'lg';
     checked: boolean;
     disabled: boolean;
     iconClass: string;
@@ -9,5 +10,5 @@ export declare class ToggleSwitchComponent {
     events: {};
     toggleChecked(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleSwitchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleSwitchComponent, "cax-toggleswitch", never, { "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "label": { "alias": "label"; "required": false; }; "events": { "alias": "events"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleSwitchComponent, "cax-toggleswitch", never, { "size": { "alias": "size"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "label": { "alias": "label"; "required": false; }; "events": { "alias": "events"; "required": false; }; }, { "onChange": "onChange"; }, never, never, false, never>;
 }

package/resources/components/editor/editor.css

@@ -1,4 +0,0 @@
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
-    width: auto;
-    height: auto;
-}

package/resources/components/timeline/timeline.css

@@ -1,114 +0,0 @@
-@layer cax {
-    .p-timeline {
-        display: flex;
-        flex-grow: 1;
-        flex-direction: column;
-    }
-
-    .p-timeline-left .p-timeline-event-opposite {
-        text-align: right;
-    }
-
-    .p-timeline-left .p-timeline-event-content {
-        text-align: left;
-    }
-
-    .p-timeline-right .p-timeline-event {
-        flex-direction: row-reverse;
-    }
-
-    .p-timeline-right .p-timeline-event-opposite {
-        text-align: left;
-    }
-
-    .p-timeline-right .p-timeline-event-content {
-        text-align: right;
-    }
-
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
-        flex-direction: row-reverse;
-    }
-
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
-        text-align: right;
-    }
-
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
-        text-align: left;
-    }
-
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
-        text-align: left;
-    }
-
-    .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
-        text-align: right;
-    }
-
-    .p-timeline-event {
-        display: flex;
-        position: relative;
-        min-height: 70px;
-    }
-
-    .p-timeline-event:last-child {
-        min-height: 0;
-    }
-
-    .p-timeline-event-opposite {
-        flex: 1;
-        padding: 0 1rem;
-        min-width: 100px;
-    }
-
-    .p-timeline-event-content {
-        flex: 1;
-        padding: 0 1rem;
-        min-width: 100px;
-    }
-
-    .p-timeline-event-separator {
-        flex: 0;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .p-timeline-event-marker {
-        display: flex;
-        align-self: baseline;
-    }
-
-    .p-timeline-event-connector {
-        flex-grow: 1;
-    }
-
-    .p-timeline-horizontal {
-        flex-direction: row;
-    }
-
-    .p-timeline-horizontal .p-timeline-event {
-        flex-direction: column;
-        flex: 1;
-    }
-
-    .p-timeline-horizontal .p-timeline-event:last-child {
-        flex: 0;
-    }
-
-    .p-timeline-horizontal .p-timeline-event-separator {
-        flex-direction: row;
-    }
-
-    .p-timeline-horizontal .p-timeline-event-connector {
-        width: 100%;
-    }
-
-    .p-timeline-bottom .p-timeline-event {
-        flex-direction: column-reverse;
-    }
-
-    .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
-        flex-direction: column-reverse;
-    }
-}