@interopio/groups-ui-react 2.0.4 → 2.0.6

package/dist/esm/types/api.d.ts

@@ -68,6 +68,7 @@ export interface FlatCaptionBarProps {
     moveAreaId: string;
     caption: string;
     feedback?: ButtonProps;
+    clone?: ButtonProps;
     sticky?: ToggleButtonProps;
     extract?: ButtonProps;
     lock?: ButtonProps;
@@ -99,6 +100,7 @@ export interface AfterTabsProps {
 }
 export interface TabHeaderButtonsProps {
     feedback?: ButtonProps;
+    clone?: ButtonProps;
     sticky?: ToggleButtonProps;
     extract?: ButtonProps;
     lock?: ButtonProps;

package/dist/esm/types/defaultComponents.d.ts

@@ -22,6 +22,8 @@ export interface StickyButtonProps extends ToggleButtonProps {
 }
 export interface FeedbackButtonProps extends ButtonProps {
 }
+export interface CloneButtonProps extends ButtonProps {
+}
 export interface ExtractButtonProps extends ButtonProps {
 }
 export interface LockButtonProps extends ButtonProps {
@@ -75,6 +77,7 @@ export interface FlatMoveAreaProps {
 }
 export interface FlatButtonsProps {
     feedback?: ButtonProps;
+    clone?: ButtonProps;
     sticky?: ToggleButtonProps;
     extract?: ButtonProps;
     lock?: ButtonProps;

package/dist/esm/types/internal.d.ts

@@ -132,6 +132,10 @@ export interface CreateButtonsOptions extends CreateFrameElementRequestOptions {
         tooltip: string;
         visible: boolean;
     };
+    clone: {
+        tooltip: string;
+        visible: boolean;
+    };
     sticky: {
         tooltip: string;
         visible: boolean;
@@ -194,6 +198,7 @@ export declare enum TargetType {
 }
 export declare enum StandardButtons {
     Feedback = "feedback",
+    Clone = "clone",
     Sticky = "sticky",
     Extract = "extract",
     Lock = "lock",

package/dist/esm/webGroupsManager.d.ts

@@ -20,6 +20,7 @@ declare class WebGroupsManagerDecorator {
     onLockButtonClick(targetType: TargetType, targetId: string): void;
     onUnlockButtonClick(targetType: TargetType, targetId: string): void;
     onFeedbackButtonClick(targetType: TargetType, targetId: string): void;
+    onCloneButtonClick(targetType: TargetType, targetId: string): void;
     onStickyButtonClick(targetType: TargetType, targetId: string): void;
     onExtractButtonClick(targetType: TargetType, targetId: string): void;
     closeTab(targetId: string): void;

package/dist/styles/groups.css

@@ -74,14 +74,14 @@ input {
     white-space: nowrap;
     text-align: left;
     user-select: none;
-    font-size: var(--g42-font-size);
+    font-size: var(--io-font-size);
 }
 
 .t42-caption-editor {
     display: inline-block;
     color: var(--t42-caption-editor-color);
     margin: var(--t42-caption-editor-margin);
-    border: var(--spacing-1) solid hsl(var(--g42-interactive-primary));
+    border: var(--spacing-1) solid hsl(var(--io-interactive-primary));
     border-radius: var(--border-radius-4);
     outline: none;
     min-width: 150px;
@@ -117,13 +117,17 @@ input {
     position: absolute;
     right: var(--spacing-4);
     top: var(--spacing-4);
-    background-color: Hsl(var(--g42-bg-01));
+    background-color: var(--t42-html-buttons-bar-background);
 }
 
 .t42-html-buttons-container ul:first-of-type {
     padding-left: var(--spacing-4);
 }
 
+.t42-html-buttons-bar-element {
+    background-color: var(--t42-html-buttons-bar-background); 
+}
+
 .t42-buttons {
     display: flex;
     flex-shrink: 0;
@@ -151,13 +155,6 @@ input {
     position: relative;
 }
 
-.t42-custom-button {
-    height: var(--t42-custom-button-size);
-    width: var(--t42-custom-button-size);
-    background-size: cover;
-    position: relative;
-}
-
 .t42-standard-button::before,
 .t42-tab-channel-selector-content::before,
 .t42-frame-channel-selector-content::before,
@@ -174,7 +171,6 @@ input {
     fill: var(--t42-standard-button-color);
 }
 
-
 .t42-caption-bar-button-lock,
 .t42-caption-bar-button-unlock,
 .t42-caption-bar-button-feedback,
@@ -235,6 +231,10 @@ input {
     content: "\e91c";
 }
 
+.t42-standard-button-clone::before {
+    content: "\e91f";
+}
+
 .t42-standard-button-sticky::before {
     content: var(--sticky-icon-off);
     display: block;
@@ -243,7 +243,6 @@ input {
     line-height: var(--spacing-14);
 }
 
-
 .t42-caption-bar-button:hover .t42-standard-button-sticky::before {
     content: var(--sticky-icon-off-hover);
 }
@@ -320,6 +319,7 @@ input {
 
 .t42-frame-channel-selector {
     align-self: center;
+    border-radius: var(--t42-frame-channel-selector-border-radius);
     width: var(--t42-frame-channel-selector-size);
     height: var(--t42-frame-channel-selector-size);
     margin: var(--t42-frame-channel-selector-margin);
@@ -327,8 +327,8 @@ input {
 }
 
 .t42-frame-channel-selector-content {
-    width: var(--t42-standard-button-size);
-    height: var(--t42-standard-button-size);
+    width: var(--t42-frame-channel-selector-size);
+    height: var(--t42-frame-channel-selector-size);
 }
 
 .t42-frame-channel-selector-content .t42-standard-button-image {
@@ -396,10 +396,6 @@ input {
     background-color: var(--t42-tab-bar-background);
 }
 
-.t42-html-buttons-bar-element {
-    background-color: var(--t42-html-buttons-bar-background); 
-}
-
 .t42-tab-bar-button {
     width: var(--t42-tab-bar-button-size);
     height: var(--t42-tab-bar-button-size);
@@ -423,6 +419,7 @@ input {
 .t42-caption-bar-button-maximize,
 .t42-caption-bar-button-minimize,
 .t42-caption-bar-button-restore,
+.t42-caption-bar-button-clone,
 .t42-caption-bar-button-close {
     width: var(--t42-caption-bar-button-width);
     height: var(--t42-tab-bar-height);
@@ -509,7 +506,7 @@ input {
 .t42-tab-caption {
     flex-grow: 1;
     color: var(--t42-tab-bar-tab-text);
-    -webkit-mask-image: linear-gradient(90deg, Hsl(var(--g42-bg-00)) 75%, transparent);
+    -webkit-mask-image: linear-gradient(90deg, Hsl(var(--io-bg-00)) 75%, transparent);
 }
 
 .t42-tab-caption-editor {
@@ -545,7 +542,7 @@ input {
 
 .t42-tab-close-button-content:hover {
     background-color: var(--t42-tab-bar-tab-close-button-bg-hover);
-    color: Hsl(var(--g42-label-primary));
+    color: Hsl(var(--io-label-primary));
 
 }
 
@@ -584,12 +581,12 @@ input {
 }
 
 .t42-channel-selector-content-light::before {
-    color: hsl(var(--g42-white));
+    color: hsl(var(--io-white));
     transition-property: color;
 }
 
 .t42-channel-selector-content-dark::before {
-    color: hsl(var(--g42-black));
+    color: hsl(var(--io-black));
     transition-property: color;
 }
 
@@ -627,13 +624,57 @@ input {
     -moz-user-focus: ignore;
 }
 
-.loader.active {
-    animation: s3 1.5s infinite linear;
+
+@keyframes clipMe {
+
+    0%,
+    100% {
+        clip: rect(0, 25vh, 2px, 0);
+    }
+
+    25% {
+        clip: rect(0, 2px, 25vh, 0);
+    }
+
+    50% {
+        clip: rect(calc(25vh - 2px), 25vh, 25vh, 0);
+    }
+
+    75% {
+        clip: rect(0, 25vh, 25vh, calc(25vh - 2px));
+    }
 }
 
 .loader-wrapper {
-    background-color: var(--t42-background);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
     flex-grow: 1;
+    gap: 1rem;
+    background: var(--t42-background);
+
+}
+
+.loader-wrapper .loader {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: radial-gradient(farthest-side, #999d9e 94%, rgba(0, 0, 0, 0)) center top / 4px 4px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 15%, #999d9e);
+    -webkit-mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0px);
+}
+
+.loader-wrapper .loader-text {
+    margin: 0 auto;
+    padding: 0 0.833rem;
+    overflow: hidden;
+    color: var(--io-secondary-primary);
+    text-align: center;
+    text-overflow: ellipsis;
+}
+
+.loader.active {
+    animation: s3 1.5s infinite linear;
 }
 
 @keyframes s3 {
@@ -685,4 +726,4 @@ input {
         flex-grow: 0;
         width: 0;
     }
-}
+}