@agorapulse/ui-theme 20.1.18 → 20.1.19

package/assets/style/_table.scss

@@ -30,8 +30,8 @@ $cell-height-small: 40px;
         border-radius: var(--ref-border-radius-md);
     }
 
-    // When table has footer, adjust tbody height
-    &:has(tfoot > .cdk-footer-row) tbody {
+    // When table has visible footer, adjust tbody height
+    &:has(tfoot > .cdk-footer-row:not([hidden])) tbody {
         height: calc(100% - 2 * $cell-height);
         max-height: calc(100% - 2 * $cell-height);
     }
@@ -50,8 +50,8 @@ $cell-height-small: 40px;
         }
     }
 
-    // Apply border radius to last row only when table has no footer
-    &:not(:has(tfoot > .cdk-footer-row)) tr[cdk-row]:last-child {
+    // Apply border radius to last row only when table has no visible footer
+    &:not(:has(tfoot > .cdk-footer-row:not([hidden]))) tr[cdk-row]:last-child {
         td[cdk-cell]:first-child {
             border-bottom-left-radius: var(--ref-border-radius-md);
         }
@@ -110,7 +110,7 @@ $cell-height-small: 40px;
             max-height: calc(100% - $cell-height-small);
         }
 
-        &:has(tfoot > .cdk-footer-row) tbody {
+        &:has(tfoot > .cdk-footer-row:not([hidden])) tbody {
             height: calc(100% - 2 * $cell-height-small);
             max-height: calc(100% - 2 * $cell-height-small);
         }

package/assets/style/css-ui/action-dropdown.css

@@ -0,0 +1,172 @@
+/* Agorapulse Action Dropdown Styles */
+
+.ap-action-dropdown {
+    background-color: var(--comp-action-dropdown-background-color, var(--ref-color-white));
+    border-radius: var(--comp-action-dropdown-border-radius, var(--ref-border-radius-md));
+    box-shadow: var(--comp-action-dropdown-box-shadow, 0 4px 25px -2px rgba(52, 69, 99, 0.15), 0 4px 6px -2px rgba(52, 69, 99, 0.15));
+    padding: var(--comp-action-dropdown-padding, var(--ref-spacing-xxs));
+    outline: none;
+    overflow: hidden;
+    z-index: 1000;
+    width: 250px;
+}
+
+.ap-action-dropdown.large {
+    width: 340px;
+}
+
+.ap-action-dropdown:focus {
+    outline: 2px solid var(--comp-action-dropdown-item-background-color-focused, var(--ref-color-electric-blue-10));
+    outline-offset: 2px;
+}
+
+/* Dropdown item */
+.ap-action-dropdown-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    padding: var(--comp-action-dropdown-item-padding, var(--ref-spacing-xxs) var(--ref-spacing-xs));
+    border: none;
+    background: transparent;
+    color: var(--comp-action-dropdown-item-text-color, var(--ref-color-grey-100));
+    cursor: pointer;
+    font-family: var(--ref-font-family);
+    font-size: var(--comp-action-dropdown-item-text-size, var(--ref-font-size-sm));
+    line-height: var(--comp-action-dropdown-item-text-line-height, var(--ref-line-height-sm));
+    text-align: left;
+    box-sizing: border-box;
+    border-radius: var(--ref-border-radius-sm);
+}
+
+.ap-action-dropdown-item:hover {
+    background-color: var(--comp-action-dropdown-item-background-color-hover, var(--ref-color-grey-05));
+}
+
+.ap-action-dropdown-item:focus {
+    outline: none;
+    background-color: var(--comp-action-dropdown-item-background-color-focused, var(--ref-color-electric-blue-10));
+}
+
+.ap-action-dropdown-item:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
+.ap-action-dropdown-item:disabled:hover {
+    background-color: transparent;
+}
+
+/* Item with description */
+.ap-action-dropdown-item.has-description {
+    height: auto;
+    min-height: 50px;
+    align-items: flex-start;
+    padding: var(--ref-spacing-xs);
+}
+
+/* Focused state (keyboard navigation) */
+.ap-action-dropdown-item.focused {
+    background-color: var(--comp-action-dropdown-item-background-color-focused, var(--ref-color-electric-blue-10));
+}
+
+/* Red mode (destructive action) */
+.ap-action-dropdown-item.red-mode {
+    color: var(--comp-action-dropdown-item-text-color-red-mode, var(--ref-color-red-100));
+}
+
+.ap-action-dropdown-item.red-mode:hover {
+    background-color: var(--comp-action-dropdown-item-background-color-red-mode-hover, var(--ref-color-red-10));
+}
+
+.ap-action-dropdown-item.red-mode:focus,
+.ap-action-dropdown-item.red-mode.focused {
+    background-color: var(--comp-action-dropdown-item-background-color-red-mode-focused, var(--ref-color-red-10));
+}
+
+/* Feature lock */
+.ap-action-dropdown-item.feature-lock:hover {
+    background-color: var(--comp-action-dropdown-item-background-color-feature-lock-hover, var(--ref-color-purple-10));
+}
+
+.ap-action-dropdown-item.feature-lock:focus,
+.ap-action-dropdown-item.feature-lock.focused {
+    background-color: var(--comp-action-dropdown-item-background-color-feature-lock-focused, var(--ref-color-purple-10));
+}
+
+/* Start icon */
+.ap-action-dropdown-item-start-icon {
+    margin-right: var(--comp-action-dropdown-item-icon-spacing, var(--ref-spacing-xs));
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--ref-color-grey-60);
+}
+
+.ap-action-dropdown-item.red-mode .ap-action-dropdown-item-start-icon {
+    color: var(--ref-color-red-100);
+}
+
+/* End icon */
+.ap-action-dropdown-item-end-icon {
+    margin-left: var(--comp-action-dropdown-item-icon-spacing, var(--ref-spacing-xs));
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--ref-color-grey-60);
+}
+
+/* Feature lock icon */
+.ap-action-dropdown-item-lock-icon {
+    margin-left: var(--comp-action-dropdown-item-icon-spacing, var(--ref-spacing-xs));
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--ref-color-purple-100);
+}
+
+/* Text container */
+.ap-action-dropdown-item-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    gap: var(--ref-spacing-xxxs);
+}
+
+/* Label container */
+.ap-action-dropdown-item-label-container {
+    display: flex;
+    align-items: center;
+    gap: var(--comp-action-dropdown-item-label-spacing, var(--ref-spacing-xs));
+}
+
+/* Label */
+.ap-action-dropdown-item-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ap-action-dropdown-item-label.bold {
+    font-weight: var(--ref-font-weight-bold);
+}
+
+/* Description */
+.ap-action-dropdown-item-description {
+    color: var(--comp-action-dropdown-item-description-color, var(--ref-color-grey-60));
+    font-size: var(--comp-action-dropdown-item-description-size, var(--ref-font-size-xs));
+    line-height: var(--comp-action-dropdown-item-description-line-height, var(--ref-line-height-xs));
+}
+
+/* Divider */
+.ap-action-dropdown-divider {
+    height: 1px;
+    background-color: var(--comp-action-dropdown-divider-color, var(--ref-color-grey-10));
+    margin: var(--comp-action-dropdown-divider-margin, var(--ref-spacing-xxs) 0);
+}
+
+/* Badge within dropdown item */
+.ap-action-dropdown-item .ap-badge {
+    flex-shrink: 0;
+}

package/assets/style/css-ui/avatar.css

@@ -0,0 +1,199 @@
+/* Agorapulse Avatar Styles */
+
+.ap-avatar {
+    --ap-avatar-size: 40px;
+    --ap-avatar-border-radius: 100%;
+    --ap-avatar-initials-size: 14px;
+    --ap-avatar-symbol-size: 20px;
+    --ap-avatar-network-size: 12px;
+    --ap-avatar-online-icon-size: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: var(--ap-avatar-size);
+    min-height: var(--ap-avatar-size);
+    max-height: var(--ap-avatar-size);
+    width: var(--ap-avatar-size);
+    min-width: var(--ap-avatar-size);
+    max-width: var(--ap-avatar-size);
+    box-sizing: border-box;
+    position: relative;
+    border-radius: var(--ap-avatar-border-radius);
+    background: var(--comp-avatar-background-color);
+    box-shadow: var(--comp-avatar-background-shadow);
+    overflow: hidden;
+}
+
+/* Size variants */
+.ap-avatar.size-16 {
+    --ap-avatar-size: 16px;
+    --ap-avatar-initials-size: 8px;
+    --ap-avatar-symbol-size: 8px;
+    --ap-avatar-network-size: 8px;
+    --ap-avatar-online-icon-size: 6px;
+}
+
+.ap-avatar.size-24 {
+    --ap-avatar-size: 24px;
+    --ap-avatar-initials-size: 10px;
+    --ap-avatar-symbol-size: 12px;
+    --ap-avatar-network-size: 8px;
+    --ap-avatar-online-icon-size: 8px;
+}
+
+.ap-avatar.size-32 {
+    --ap-avatar-size: 32px;
+    --ap-avatar-initials-size: 12px;
+    --ap-avatar-symbol-size: 16px;
+    --ap-avatar-network-size: 10px;
+    --ap-avatar-online-icon-size: 8px;
+}
+
+.ap-avatar.size-36 {
+    --ap-avatar-size: 36px;
+    --ap-avatar-initials-size: 12px;
+    --ap-avatar-symbol-size: 18px;
+    --ap-avatar-network-size: 12px;
+    --ap-avatar-online-icon-size: 10px;
+}
+
+.ap-avatar.size-40 {
+    --ap-avatar-size: 40px;
+    --ap-avatar-initials-size: 14px;
+    --ap-avatar-symbol-size: 20px;
+    --ap-avatar-network-size: 12px;
+    --ap-avatar-online-icon-size: 10px;
+}
+
+.ap-avatar.size-48 {
+    --ap-avatar-size: 48px;
+    --ap-avatar-initials-size: 16px;
+    --ap-avatar-symbol-size: 24px;
+    --ap-avatar-network-size: 14px;
+    --ap-avatar-online-icon-size: 12px;
+}
+
+.ap-avatar.size-56 {
+    --ap-avatar-size: 56px;
+    --ap-avatar-initials-size: 18px;
+    --ap-avatar-symbol-size: 28px;
+    --ap-avatar-network-size: 16px;
+    --ap-avatar-online-icon-size: 16px;
+}
+
+/* Square variant */
+.ap-avatar.square {
+    --ap-avatar-border-radius: var(--sys-border-radius-sm);
+}
+
+/* No background variant (when image is present) */
+.ap-avatar.no-background {
+    background: transparent;
+    box-shadow: none;
+}
+
+/* Avatar image */
+.ap-avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: var(--ap-avatar-border-radius);
+}
+
+/* Avatar initials */
+.ap-avatar-initials {
+    font-weight: var(--comp-avatar-initials-weight);
+    font-size: var(--ap-avatar-initials-size);
+    font-family: 'Averta', sans-serif;
+    color: var(--comp-avatar-initials-color);
+    text-transform: uppercase;
+    user-select: none;
+}
+
+/* Avatar symbol/icon */
+.ap-avatar-symbol {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--comp-avatar-symbol-color);
+    width: var(--ap-avatar-symbol-size);
+    height: var(--ap-avatar-symbol-size);
+}
+
+.ap-avatar-symbol svg {
+    width: 100%;
+    height: 100%;
+}
+
+/* Network overlay badge */
+.ap-avatar-network {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: var(--ap-avatar-network-size);
+    width: var(--ap-avatar-network-size);
+    min-height: var(--ap-avatar-network-size);
+    min-width: var(--ap-avatar-network-size);
+    max-height: var(--ap-avatar-network-size);
+    max-width: var(--ap-avatar-network-size);
+    overflow: hidden;
+    box-sizing: border-box;
+    box-shadow: var(--comp-avatar-background-shadow);
+}
+
+.ap-avatar-network.round {
+    border-radius: 100%;
+}
+
+.ap-avatar-network.instagram {
+    border-radius: 28%;
+}
+
+.ap-avatar-network.linkedin {
+    border-radius: 6%;
+}
+
+.ap-avatar-network.google,
+.ap-avatar-network.meta {
+    box-shadow: none;
+    border-radius: 0;
+}
+
+.ap-avatar-network img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* Online indicator */
+.ap-avatar-online {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: var(--ap-avatar-online-icon-size);
+    width: var(--ap-avatar-online-icon-size);
+    min-height: var(--ap-avatar-online-icon-size);
+    min-width: var(--ap-avatar-online-icon-size);
+    max-height: var(--ap-avatar-online-icon-size);
+    max-width: var(--ap-avatar-online-icon-size);
+    border-radius: 100%;
+    border: 1px solid var(--comp-avatar-online-border-color);
+    background: var(--comp-avatar-online-background);
+    box-sizing: border-box;
+}
+
+/* Avatar group container */
+.ap-avatar-group {
+    display: flex;
+    align-items: center;
+}
+
+.ap-avatar-group .ap-avatar {
+    margin-left: -8px;
+    border: 2px solid var(--ref-color-white);
+}
+
+.ap-avatar-group .ap-avatar:first-child {
+    margin-left: 0;
+}

package/assets/style/css-ui/badge.css

@@ -0,0 +1,30 @@
+/* Agorapulse Badge Styles */
+
+.ap-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--comp-badge-padding-right) 0 var(--comp-badge-padding-left);
+    font-weight: var(--comp-badge-text-style-font-weight);
+    font-family: var(--comp-badge-text-style-font-family);
+    line-height: var(--comp-badge-text-style-line-height);
+    font-size: var(--comp-badge-text-style-size);
+    height: var(--comp-badge-height);
+    max-height: var(--comp-badge-height);
+    border-radius: 2px;
+    white-space: nowrap;
+    box-sizing: border-box;
+}
+
+/* Blue variant (default) */
+.ap-badge.blue {
+    background-color: var(--comp-badge-blue-background-color);
+    color: var(--comp-badge-blue-color);
+}
+
+/* Orange variant */
+.ap-badge.orange {
+    text-transform: uppercase;
+    background-color: var(--comp-badge-orange-background-color);
+    color: var(--comp-badge-orange-color);
+}

package/assets/style/css-ui/checkbox.css

@@ -0,0 +1,170 @@
+/* Agorapulse Checkbox Styles */
+
+.ap-checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxs);
+    cursor: pointer;
+}
+
+.ap-checkbox-container:has(input:disabled) {
+    cursor: default;
+}
+
+/* Label positioning */
+.ap-checkbox-container.label-left {
+    flex-direction: row-reverse;
+}
+
+.ap-checkbox-container.full-width {
+    justify-content: space-between;
+    width: 100%;
+}
+
+/* Native checkbox input (visually hidden but accessible) */
+.ap-checkbox-input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+}
+
+/* Focus state */
+@media (hover: hover) {
+    .ap-checkbox-input:focus:not(:disabled) ~ .ap-checkbox-box {
+        outline: 3px solid var(--ref-color-electric-blue-100);
+        outline-offset: 1px;
+    }
+}
+
+/* Custom checkbox visual */
+.ap-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    min-height: 16px;
+    max-width: 16px;
+    max-height: 16px;
+    border-radius: var(--sys-border-radius-sm);
+    border: 1px solid var(--ref-color-grey-60);
+    background: var(--ref-color-white);
+    box-sizing: border-box;
+    flex-shrink: 0;
+    transition: background-color 0.15s, border-color 0.15s;
+}
+
+/* Hover state */
+.ap-checkbox-container:hover:not(:has(input:disabled)) .ap-checkbox-box {
+    border-color: var(--ref-color-grey-80);
+}
+
+/* Active state */
+.ap-checkbox-container:active:not(:has(input:disabled)) .ap-checkbox-box {
+    border-color: var(--ref-color-grey-100);
+}
+
+/* Checked state */
+.ap-checkbox-input:checked ~ .ap-checkbox-box {
+    background: var(--ref-color-electric-blue-100);
+    border-color: var(--ref-color-electric-blue-100);
+}
+
+/* Checked hover state */
+.ap-checkbox-container:hover:not(:has(input:disabled)) .ap-checkbox-input:checked ~ .ap-checkbox-box {
+    background: var(--ref-color-electric-blue-80);
+    border-color: var(--ref-color-electric-blue-100);
+}
+
+/* Checked active state */
+.ap-checkbox-container:active:not(:has(input:disabled)) .ap-checkbox-input:checked ~ .ap-checkbox-box {
+    background: var(--ref-color-electric-blue-60);
+    border-color: var(--ref-color-electric-blue-100);
+}
+
+/* Indeterminate state */
+.ap-checkbox-box.indeterminate {
+    background: var(--ref-color-electric-blue-100);
+    border-color: var(--ref-color-electric-blue-100);
+}
+
+.ap-checkbox-container:hover:not(:has(input:disabled)) .ap-checkbox-box.indeterminate {
+    background: var(--ref-color-electric-blue-80);
+    border-color: var(--ref-color-electric-blue-100);
+}
+
+/* Disabled state */
+.ap-checkbox-input:disabled ~ .ap-checkbox-box {
+    background: var(--ref-color-grey-10);
+    border-color: var(--ref-color-grey-20);
+    pointer-events: none;
+}
+
+.ap-checkbox-input:disabled:checked ~ .ap-checkbox-box,
+.ap-checkbox-box.indeterminate.disabled {
+    background: var(--ref-color-grey-20);
+    border-color: var(--ref-color-grey-20);
+}
+
+/* Error state (for form validation) */
+.ap-checkbox-container.error .ap-checkbox-box {
+    border-color: var(--ref-color-red-100);
+}
+
+/* Checkmark icon */
+.ap-checkbox-icon {
+    width: 10px;
+    height: 10px;
+    color: var(--ref-color-white);
+    display: none;
+}
+
+.ap-checkbox-input:checked ~ .ap-checkbox-box .ap-checkbox-icon-check {
+    display: block;
+}
+
+.ap-checkbox-box.indeterminate .ap-checkbox-icon-indeterminate {
+    display: block;
+}
+
+/* Indeterminate line */
+.ap-checkbox-indeterminate-line {
+    width: 8px;
+    height: 1.5px;
+    background: var(--ref-color-white);
+    display: none;
+}
+
+.ap-checkbox-box.indeterminate .ap-checkbox-indeterminate-line {
+    display: block;
+}
+
+/* Label styling */
+.ap-checkbox-label {
+    display: flex;
+    align-items: center;
+    font-family: var(--comp-forms-label-font-family);
+    font-size: var(--comp-forms-label-size);
+    font-weight: var(--comp-forms-label-font-weight);
+    line-height: var(--comp-forms-label-line-height);
+    color: var(--comp-forms-label-text-color);
+    user-select: none;
+}
+
+.ap-checkbox-label:empty {
+    display: none;
+}
+
+.ap-checkbox-label.disabled {
+    color: var(--ref-color-grey-60);
+}
+
+.ap-checkbox-label.bold {
+    font-weight: var(--ref-font-weight-bold);
+}

package/assets/style/css-ui/counter.css

@@ -0,0 +1,73 @@
+/* Agorapulse Counter Styles */
+
+.ap-counter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    border-radius: var(--comp-counter-border-radius);
+    padding: 0 2px;
+    box-sizing: border-box;
+}
+
+/* Normal size (default) */
+.ap-counter.normal {
+    font-weight: var(--comp-counter-text-style-font-weight);
+    font-family: var(--comp-counter-text-style-font-family);
+    line-height: var(--comp-counter-text-style-line-height);
+    font-size: var(--comp-counter-text-style-size);
+    height: var(--comp-counter-height);
+    max-height: var(--comp-counter-height);
+}
+
+/* Big size */
+.ap-counter.big {
+    font-weight: var(--comp-counter-big-text-style-font-weight);
+    font-family: var(--comp-counter-big-text-style-font-family);
+    line-height: var(--comp-counter-big-text-style-line-height);
+    font-size: var(--comp-counter-big-text-style-size);
+    height: var(--comp-counter-big-height);
+    max-height: var(--comp-counter-big-height);
+}
+
+/* Blue color */
+.ap-counter.blue {
+    color: var(--comp-counter-blue-color);
+}
+
+.ap-counter.blue.bg {
+    background-color: var(--comp-counter-blue-with-background-background-color);
+}
+
+/* Orange color */
+.ap-counter.orange {
+    color: var(--comp-counter-orange-color);
+}
+
+.ap-counter.orange.bg {
+    color: var(--comp-counter-orange-with-background-color);
+    background-color: var(--comp-counter-orange-with-background-background-color);
+}
+
+/* Grey color */
+.ap-counter.grey {
+    color: var(--comp-counter-grey-color);
+}
+
+.ap-counter.grey.bg {
+    background-color: var(--comp-counter-grey-with-background-background-color);
+}
+
+/* Notification style */
+.ap-counter.notif {
+    padding: 0 4px;
+    border-radius: var(--comp-counter-notif-border-radius);
+    font-size: var(--comp-counter-text-style-size);
+    font-weight: var(--comp-counter-text-style-font-weight);
+    font-family: var(--comp-counter-text-style-font-family);
+    line-height: var(--comp-counter-text-style-line-height);
+    min-width: var(--comp-counter-notif-min-width);
+    height: var(--comp-counter-notif-min-width);
+    color: var(--comp-counter-notif-color);
+    background-color: var(--comp-counter-notif-background-color);
+}