cax-design-system 2.8.4 → 3.0.0

package/resources/components/accordion/accordion.scss

@@ -1,46 +0,0 @@
-@layer cax {
-    .cax-accordion-header-link {
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        user-select: none;
-        position: relative;
-        text-decoration: none;
-    }
-
-    .cax-accordion-icon {
-        margin-right: 8px; /* Adjust spacing between icon and text */
-        display: flex;
-        align-items: center;
-        width: 18px;
-        height: 18px;
-    }
-
-    .cax-accordion-header-link:focus {
-        z-index: 1;
-    }
-
-    .cax-accordion-header-text {
-        // line-height: 1;
-        flex: 1;
-    }
-
-    .cax-accordion .cax-toggleable-content {
-        overflow: hidden;
-    }
-
-    .cax-accordion .cax-accordion-tab-active > .cax-toggleable-content:not(.ng-animating) {
-        overflow: inherit;
-    }
-
-    .cax-accordion-toggle-icon-end {
-        order: 1;
-        margin-left: auto;
-    }
-
-    .cax-accordion-toggle-icon {
-        order: 0;
-        width: 16px;
-        height: 16px;
-    }
-}

package/resources/components/autocomplete/autocomplete.scss

@@ -1,184 +1,249 @@
-@layer cax {
-    .cax-autocomplete {
-        display: flex;
-        position: relative;
-        height: 40px;
-    }
-
-    .cax-autocomplete-loader {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        right: 7px;
-    }
-
-    .cax-autocomplete-dd .cax-autocomplete-input {
-        flex: 1 1 auto;
-        width: 1%;
-        padding-left: 3rem;
-    }
-
-    .cax-autocomplete-dd .cax-autocomplete-input,
-    .cax-autocomplete-dd .cax-autocomplete-multiple-container {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .cax-autocomplete-dd .cax-autocomplete-dropdown {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0px;
-    }
-
-    .cax-autocomplete-panel {
-        overflow: auto;
-    }
-
-    .cax-autocomplete-items {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-    }
-
-    .cax-autocomplete-item {
-        cursor: pointer;
-        white-space: nowrap;
-        position: relative;
-        overflow: hidden;
-    }
-
-    .cax-autocomplete-multiple-container {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        cursor: text;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-
-    .cax-autocomplete-token {
-        width: fit-content;
-        cursor: default;
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 auto;
-    }
-
-    .cax-autocomplete-token-icon {
-        display: flex;
-        cursor: pointer;
-    }
-
-    .cax-autocomplete-input-token {
-        flex: 1 1 auto;
-        display: inline-flex;
-    }
-
-    .cax-autocomplete-input-token input {
-        border: 0 none;
-        outline: 0 none;
-        background-color: transparent;
-        margin: 0;
-        padding: 0;
-        box-shadow: none;
-        border-radius: 0;
-        width: 100%;
-    }
-
-    .cax-fluid .cax-autocomplete {
-        display: flex;
-    }
-
-    .cax-fluid .cax-autocomplete-dd .cax-autocomplete-input {
-        width: 1%;
-    }
-
-    .cax-autocomplete-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        cursor: pointer;
-        right: 10px;
-    }
-    .cax-autocomplete-search-icon{
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        cursor: pointer;
-        left: 9px;
-        
-    }  
-    .cax-autocomplete-sm {
-        height: 32px !important;
-        .cax-inputtext{
-            font-size: 12px !important;
-        }
-        .cax-autocomplete-clear-icon {
-            width: 12px !important;
-            height: 12px !important;
-            margin-top: -0.3rem;
-        }
-        .cax-autocomplete-search-icon{
-            width: 12px !important;
-            height: 12px !important;
-            margin-top: -0.3rem;
-        }
-
-       
-      }
-      
-      .cax-autocomplete-md {
-        height: 40px !important;
-        .cax-inputtext{
-            font-size: 16px !important;
-        }
-        .cax-autocomplete-clear-icon {
-            width: 16px !important;
-            height: 16px !important;
-
-        }
-        .cax-autocomplete-search-icon{
-            width: 16px !important;
-            height: 16px !important;
-        }
-        .cax-inputtext {
-            padding-left: 2rem !important;
-            padding-right: 2rem !important;
-          }
-          .cax-autocomplete-loader{
-            width: 16px !important;
-            height: 16px !important;
-          }
-
-      }
-      
-      .cax-autocomplete-lg {
-        height: 48px !important;
-        .cax-inputtext{
-            font-size: 18px !important;
-        }
-        .cax-autocomplete-clear-icon {
-            width: 18px !important;
-            height: 18px !important;
-            margin-top: -0.6rem;
-        }
-        .cax-autocomplete-search-icon{
-            width: 18px !important;
-            height: 18px !important;
-            margin-top: -0.6rem;
-        }
-        .cax-autocomplete-loader{
-            width: 18px !important;
-            height: 18px !important;
-            margin-top: -0.6rem;
-          }
-        
-       .cax-inputtext {
-          padding-left: 2.4rem !important;
-          padding-right: 2.4rem !important;
-        }
-
-        
-      }
-}
+@layer cax {
+    .cax-autocomplete {
+        display: flex;
+        position: relative;
+        height: 40px;
+    }
+
+    .cax-autocomplete-loader {
+        display: block;
+    }
+
+    .cax-autocomplete-dd .cax-autocomplete-input {
+        flex: 1 1 auto;
+        width: 1%;
+        padding-left: 3rem;
+    }
+
+    .cax-autocomplete-dd .cax-autocomplete-input,
+    .cax-autocomplete-dd .cax-autocomplete-multiple-container {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .cax-autocomplete-dd .cax-autocomplete-dropdown {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0px;
+    }
+
+    .cax-autocomplete-panel {
+        overflow: auto;
+    }
+
+    .cax-autocomplete-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .cax-autocomplete-item {
+        cursor: pointer;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+
+        &.cax-autocomplete-skeleton-item {
+            cursor: default;
+
+            &:hover {
+                background: transparent !important;
+            }
+        }
+    }
+
+    .cax-autocomplete-multiple-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: text;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .cax-autocomplete-token {
+        width: fit-content;
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .cax-autocomplete-token-icon {
+        display: flex;
+        cursor: pointer;
+    }
+
+    .cax-autocomplete-input-token {
+        flex: 1 1 auto;
+        display: inline-flex;
+    }
+
+    .cax-autocomplete-input-token input {
+        border: 0 none;
+        outline: 0 none;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+        width: 100%;
+    }
+
+    .cax-fluid .cax-autocomplete {
+        display: flex;
+    }
+
+    .cax-fluid .cax-autocomplete-dd .cax-autocomplete-input {
+        width: 1%;
+    }
+
+    .cax-autocomplete-clear-icon {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .cax-autocomplete-trailing {
+        position: absolute;
+        right: 8px;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        z-index: 1;
+    }
+
+    .cax-autocomplete-action {
+        display: flex;
+        align-items: center;
+    }
+
+    .cax-autocomplete-action-divider {
+        width: 1px;
+        height: 20px;
+        background-color: var(--neutral-300);
+        margin: 0 4px;
+    }
+
+    .cax-autocomplete-search-icon {
+        position: absolute;
+        left: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        font-size: 16px;
+        pointer-events: none;
+    }
+
+    .cax-autocomplete {
+        .cax-autocomplete-input,
+        .cax-autocomplete-multiple-container {
+            transition:
+                border-radius 0.2s,
+                border-bottom-color 0.2s,
+                border-color 0.2s,
+                box-shadow 0.2s;
+        }
+
+        &.cax-overlay-open {
+            .cax-autocomplete-input,
+            .cax-autocomplete-multiple-container {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+                border-bottom-color: transparent;
+
+                &:hover,
+                &:focus {
+                    border-color: var(--neutral-300) !important;
+                    border-bottom-color: transparent !important;
+                    box-shadow: none !important;
+                    outline: 0 none !important;
+                }
+            }
+        }
+    }
+
+    .cax-autocomplete-overlay {
+        margin-top: 0 !important;
+
+        .cax-autocomplete-panel {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            transition: border-radius 0.2s;
+        }
+    }
+
+    .cax-autocomplete-sm {
+        height: 32px !important;
+        .cax-autocomplete-dd .cax-autocomplete-dropdown {
+            height: 32px !important;
+        }
+        .cax-inputtext {
+            font-size: 12px !important;
+            padding: 0 28px;
+        }
+        &.cax-autocomplete-with-actions.cax-overlay-open {
+            .cax-inputtext {
+                padding-right: 120px;
+            }
+        }
+        .cax-autocomplete-item,
+        .cax-autocomplete-empty-message {
+            font-size: 12px !important;
+        }
+        .cax-autocomplete-search-icon,
+        .cax-autocomplete-clear-icon {
+            font-size: 16px;
+        }
+    }
+
+    .cax-autocomplete-md {
+        height: 40px !important;
+        .cax-autocomplete-dd .cax-autocomplete-dropdown {
+            height: 40px !important;
+        }
+        .cax-inputtext {
+            font-size: 14px !important;
+            padding: 0 32px;
+        }
+        &.cax-autocomplete-with-actions.cax-overlay-open {
+            .cax-inputtext {
+                padding-right: 140px;
+            }
+        }
+        .cax-autocomplete-item,
+        .cax-autocomplete-empty-message {
+            font-size: 14px !important;
+        }
+        .cax-autocomplete-search-icon,
+        .cax-autocomplete-clear-icon {
+            font-size: 20px;
+        }
+    }
+
+    .cax-autocomplete-lg {
+        height: 48px !important;
+        .cax-autocomplete-dd .cax-autocomplete-dropdown {
+            height: 48px !important;
+        }
+        .cax-inputtext {
+            font-size: 16px !important;
+            padding: 0 36px;
+        }
+        &.cax-autocomplete-with-actions.cax-overlay-open {
+            .cax-inputtext {
+                padding-right: 160px;
+            }
+        }
+        .cax-autocomplete-item,
+        .cax-autocomplete-empty-message {
+            font-size: 16px !important;
+        }
+        .cax-autocomplete-search-icon,
+        .cax-autocomplete-clear-icon {
+            font-size: 24px;
+        }
+    }
+}

package/resources/components/avatar/avatar.scss

@@ -1,34 +1,30 @@
-@layer cax {
-    .cax-avatar {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 36px;
-        height: 36px;
-        font-size: 14px;
-        line-height: 20px;
-        font-weight: 700;
-    }
-
-    .cax-avatar.cax-avatar-image {
-        background-color: transparent;
-    }
-
-    .cax-avatar.cax-avatar-circle {
-        border-radius: 50% !important;
-    }
-
-    .cax-avatar .cax-avatar-icon {
-        font-size: 14px;
-    }
-
-    .cax-avatar img {
-        width: 100%;
-        height: 100%;
-        border-radius: 8px;
-    }
-
-    .cax-avatar.cax-avatar-circle img {
-        border-radius: 50% !important;
-    }
-}
+@layer cax {
+    .cax-avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+    }
+
+    .cax-avatar.cax-avatar-image {
+        background-color: transparent;
+    }
+
+    .cax-avatar.cax-avatar-circle {
+        border-radius: 50% !important;
+    }
+
+    .cax-avatar .cax-avatar-icon {
+        font-size: 14px;
+    }
+
+    .cax-avatar img {
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+    }
+
+    .cax-avatar.cax-avatar-circle img {
+        border-radius: 50% !important;
+    }
+}

package/resources/components/avatargroup/avatargroup.scss

@@ -1,10 +1,10 @@
-@layer cax {
-    .cax-avatar-group cax-avatar + cax-avatar {
-        margin-left: -1rem;
-    }
-
-    .cax-avatar-group {
-        display: flex;
-        align-items: center;
-    }
-}
+@layer cax {
+    .cax-avatar-group cax-avatar + cax-avatar {
+        margin-left: -1rem;
+    }
+
+    .cax-avatar-group {
+        display: flex;
+        align-items: center;
+    }
+}