@useinsider/guido 1.0.0-beta.738e9f2 → 1.0.0-beta.7c7bcef

package/dist/static/styles/components/tabs.css.js

@@ -0,0 +1,97 @@
+const n = `
+
+ue-tabs-header .tabs-header {
+    padding: 0;
+    column-gap: 0;
+    background-color: transparent;
+}
+
+.control-panel-tabs .tabs-header {
+    margin: 16px 16px 0;
+}
+
+ue-tabs-header .tabs-header button {
+    background-color: var(--guido-color-gray-0);
+    outline: none;
+    padding: 8px 16px;
+    border: 1px solid var(--guido-color-gray-300);
+    height: 40px;
+    font-size: 15px;
+}
+
+ue-tabs-header .tabs-header button:hover:not(:disabled,.disabled,.checked) {
+    background-color: var(--guido-color-gray-1);
+}
+
+ue-tabs-header .tabs-header button ue-icon-component.icon-button {
+    color: var(--guido-color-gray-800);
+}
+
+ue-tabs-header .tabs-header button:before {
+    content: none;
+}
+
+ue-tabs-header .tabs-header button:not(:last-child),
+ue-tabs-header .tabs-header button:not(:first-child) {
+    border-radius: 0;
+}
+
+ue-tabs-header .tabs-header button:first-child {
+    border-radius: 4px 0 0 4px;
+}
+
+ue-tabs-header .tabs-header button:last-child {
+    border-radius: 0 4px 4px 0;
+}
+
+ue-tabs-header .tabs-header button:first-child:last-child {
+    border-radius: 4px;
+}
+
+ue-tabs-header .tabs-header button.checked {
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
+}
+
+ue-tabs-header .tabs-header button.checked ue-icon-component.icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+.ue-radio-tabs .button-group {
+    padding: 0;
+    column-gap: 0;
+    background-color: transparent;
+}
+
+.ue-radio-tabs .button-group .button {
+    background-color: var(--guido-color-gray-0);
+    outline: none;
+    padding: 8px 16px;
+    border: 1px solid var(--guido-color-gray-300);
+    height: 40px;
+    font-size: 15px;
+}
+
+.ue-radio-tabs .button-group input:checked + label {
+    box-shadow: none;
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+    border-color: var(--guido-color-primary-500);
+}
+
+.ue-radio-tabs .button-group > div:first-of-type .button {
+    border-radius: 4px 0 0 4px !important;
+}
+
+.ue-radio-tabs .button-group > div:last-of-type .button {
+    border-radius: 0 4px 4px 0 !important;
+}
+
+.ue-radio-tabs .button-group > div:first-of-type:last-of-type .button {
+    border-radius: 4px !important;
+}
+`;
+export {
+  n as default
+};

package/dist/static/styles/components/tools.css.js

@@ -0,0 +1,23 @@
+const o = `ue-emoji .emoji-tabs .active-smile-tab {
+    border-color: var(--guido-color-primary-500);
+}
+
+ue-insert-table .hovered-template-cell {
+    background: var(--guido-color-primary-100);
+}
+
+ue-insert-table .template-row,
+ue-insert-table .template-row:last-child,
+ue-insert-table .template-cell {
+    border-color: var(--guido-color-primary-500);
+}
+
+.ue-popover.light {
+    border-radius: 4px;
+    border: 1px solid var(--guido-color-gray-300);
+    box-shadow: var(--guido-box-shadow);
+}
+`;
+export {
+  o as default
+};

package/dist/static/styles/components/version-history.css.js

@@ -0,0 +1,30 @@
+const o = `.patch-session-container {
+    row-gap: 16px;
+}
+
+ue-vh-group {
+    box-shadow: none;
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+}
+
+ue-vh-group:has(ue-vh-patch.selected) {
+    border-color: var(--guido-color-primary-500);
+}
+
+ue-vh-patch.selected .patch-wrapper {
+    box-shadow: none;
+}
+
+ue-vh-patch:hover .patch-wrapper {
+    background: var(--guido-color-neutral-100);
+}
+
+ue-vh-patch.selected .patch-wrapper {
+    background-color: var(--guido-color-primary-100);
+    box-shadow: 0 0 0 1px var(--guido-color-primary-500);
+}
+`;
+export {
+  o as default
+};

package/dist/static/styles/components/wide-panel.css.js

@@ -0,0 +1,135 @@
+const n = `ue-wide-panel {
+    width: 425px;
+}
+
+ue-main-tabs-panel-component .fixed-panel-header {
+    display: none;
+}
+
+.label {
+    font-size: 13px;
+    color: var(--guido-color-gray-800);
+}
+
+.stacked-panel-title {
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--guido-color-gray-800);
+    text-align: left;
+}
+
+.stacked-panel-item {
+    border-radius: 4px;
+    border: 1px solid var(--guido-color-gray-300);
+    box-shadow: var(--guido-box-shadow);
+}
+
+.container {
+    padding: 16px;
+    grid-column-gap: 8px;
+}
+
+.container.widest-spacing {
+    grid-column-gap: 16px;
+    grid-row-gap: 16px;
+}
+
+.container.parent-container > .container {
+    padding: 0 16px;
+}
+
+.container .container.has-container-separator {
+    padding-top: 16px;
+}
+
+ue-control-panel,
+.common-wrapper {
+    border: 1px solid var(--guido-color-gray-300);
+    box-shadow: var(--guido-box-shadow);
+}
+
+.control-panel-header {
+    grid-template-columns: repeat(12, 1fr);
+    padding: 0;
+}
+
+.control-panel-header > * {
+    display: flex;
+    align-items: center;
+}
+
+.header-control-panel-left {
+    grid-area: 1 / 1 / 2 / 2;
+}
+
+.header-control-panel-label {
+    grid-area: 1 / 2 / 2 / 12;
+    text-align: left;
+    padding: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.header-control-panel-right {
+    grid-area: 1 / 12 / 2 / 13;
+}
+
+.control-panel-header button {
+    padding: 16px !important;
+    border: 0;
+    min-height: auto;
+}
+
+.container.droppable-header-container ue-button:last-child {
+    margin-right: 0;
+}
+
+.secondary-control-group {
+    gap: 16px;
+}
+
+.droppable-container {
+    padding-top: 6px;
+}
+
+.control-plus-rounded-wrapper {
+    border-radius: 4px;
+    border: 1px solid var(--guido-color-gray-300);
+}
+
+.structure-item-container {
+    padding: 8px 16px 8px 10px;
+}
+
+ue-label {
+    align-items: center;
+}
+
+ue-label.accent-dot:before {
+    content: none;
+}
+
+ue-label.accent-dot:after {
+    content: "New";
+    width: auto;
+    height: auto;
+    border-radius: 4px;
+    background: var(--guido-color-primary-500);
+    z-index: 2;
+    color: var(--guido-color-white);
+    padding: 4px 8px;
+    right: 1px;
+    font-size: 13px;
+}
+
+.e2e-size,
+.e2e-timer-size {
+    grid-auto-flow: row;
+    grid-template-columns: 1fr !important;
+}
+`;
+export {
+  n as default
+};

package/dist/static/styles/variables.css.js

@@ -0,0 +1,23 @@
+const o = `:host {
+    --guido-color-white: #FFFFFF;
+    --guido-color-primary-500: #0A2ECC;
+    --guido-color-primary-200: #B5C1F1;
+    --guido-color-primary-100: #DAE1FB;
+    --guido-color-gray-800: #292929;
+    --guido-color-gray-700: #989898;
+    --guido-color-gray-600: #666666;
+    --guido-color-gray-300: #E1E1E1;
+    --guido-color-gray-1: #F0F0F0;
+    --guido-color-gray-0: #F9F9F9;
+    --guido-color-neutral-800: #222938;
+    --guido-color-neutral-200: #DCDFE6;
+    --guido-color-neutral-100: #EFF2F4;
+    --guido-color-danger-500: #DC2A2A; 
+    --guido-box-shadow: 0 4px 12px 0 rgba(44,53,70,0.15);
+    --guido-color-background-onpage-message-info: #D3EEF8;
+    --guido-color-border-onpage-message-info: #258DDE;
+}
+`;
+export {
+  o as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.0-beta.738e9f2",
+  "version": "1.0.0-beta.7c7bcef",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",

package/dist/@types/http.d.ts

@@ -1,19 +0,0 @@
-export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-export interface HttpOptions extends Omit<RequestInit, 'method' | 'body'> {
-    baseURL?: string;
-    timeout?: number;
-    retry?: number;
-    retryDelay?: number;
-}
-export interface HttpResponse<T = unknown> {
-    data: T;
-    status: number;
-    statusText: string;
-    headers: Headers;
-}
-export interface HttpError {
-    message: string;
-    status?: number;
-    statusText?: string;
-    response?: Response;
-}

package/dist/static/editor.css.js

@@ -1,232 +0,0 @@
-const n = `:host {
-    --guido-color-white: #FFFFFF;
-    --guido-color-primary-500: #0A2ECC;
-    --guido-color-primary-100: #DAE1FB;
-    --guido-color-gray-800: #292929;
-    --guido-color-gray-300: #E1E1E1;
-}
-
-.label {
-    font-size: 13px;
-    color: var(--guido-color-gray-800);
-}
-
-.stacked-panel-title {
-    padding: 16px;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--guido-color-gray-800);
-    text-align: left;
-}
-
-.stacked-panel-item {
-    border-radius: 4px;
-    border: 1px solid #dcdfe6;
-    box-shadow: 0 0 0 0 var(--guido-color-gray-300),0 15px 35px -5px rgba(0, 0, 0, .1),0 8px 10px -6px rgba(0, 0, 0, .1);
-}
-
-.container {
-    padding: 16px;
-}
-
-.container.parent-container>.container {
-    padding: 0 16px;
-}
-
-/** SEGMENT BUTTON */
-ue-switcher input {
-    border-radius: 26px;
-} 
-
-ue-switcher input:before {
-    border-radius: 22px;
-}
-
-.tabs-header {
-    padding: 0;
-    column-gap: 0;
-    background-color: transparent;
-}
-
-.tabs-header button {
-    background-color: #f7f9fa;
-    outline: none;
-    padding: 8px 16px;
-    border: 1px solid #dcdee6;
-    height: 42px;
-}
-
-.tabs-header button ue-icon-component.icon-button {
-    color: var(--guido-color-gray-800);
-}
-
-.tabs-header button:not(:last-child),
-.tabs-header button:not(:first-child) {
-    border-radius: 0;
-}
-
-.tabs-header button:first-child {
-    border-radius: 4px 0 0 4px;
-}
-
-.tabs-header button:last-child {
-    border-radius: 0 4px 4px 0;
-}
-
-.tabs-header button.checked {
-    background-color: var(--guido-color-primary-100);
-    color: var(--guido-color-primary-500);
-    border-color: var(--guido-color-primary-500);
-}
-
-.tabs-header button.checked ue-icon-component.icon-button {
-    color: var(--guido-color-primary-500);
-}
-/** SEGMENT BUTTON */
-
-/** BUTTON */
-.button:not(:disabled,.disabled):active {
-    transform: none !important;
-}
-/** BUTTON */
-
-/** BUTTON GROUP */
-.button-group {
-    padding: 0;
-    column-gap: 0;
-    border-radius: 0;
-    background-color: transparent;
-}
-
-.button-group .button {
-    background-color: #f7f9fa;
-    outline: none;
-    padding: 8px 12px;
-    border: 1px solid #dcdee6;
-    box-shadow: none;
-    height: 42px;
-}
-
-.button-group .button ue-icon-component.icon-button {
-    color: var(--guido-color-gray-800);
-}
-
-.button-group > div:first-of-type .button {
-    border-radius: 4px 0 0 4px;
-}
-
-.button-group > *:last-child .button {
-    border-radius: 0 4px 4px 0;
-}
-
-ue-check-buttons input:checked + .button,
-ue-radio-buttons input:checked + .button {
-    background-color: var(--guido-color-primary-100);
-    color: var(--guido-color-primary-500);
-    border-color: var(--guido-color-primary-500);
-}
-
-ue-check-buttons input:checked + .button ue-icon-component.icon-button,
-ue-radio-buttons input:checked + .button ue-icon-component.icon-button {
-    color: var(--guido-color-primary-500);
-}
-/** BUTTON GROUP */
-
-/** COMBOBOX */
-.control-shadow-wrapper:has(.button[role="combobox"]) {
-    border-radius: 0;
-    padding: 0;
-    background: transparent;
-}
-
-.button[role="combobox"] {
-    background-color: #f9f9f9;
-    border: 1px solid var(--guido-color-gray-300);
-    border-radius: 4px;
-    box-shadow: none;
-    min-height: 42px;
-    padding: 8px;
-    color: var(--guido-color-gray-800);
-    text-align: left;
-    outline: none;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.button[role="combobox"].on {
-    background-color: #f9f9f9;
-    border-color: var(--guido-color-primary-500);
-    box-shadow: 0 0 0 3px #b5c1f1 !important;
-}
-/** COMBOBOX */
-
-/** BASE INPUT */
-.base-input {
-    border: 1px solid var(--guido-color-gray-300);
-    border-radius: 4px;
-    background-color: #f9f9f9;
-    align-items: center;
-    height: 40px;
-    max-height: 40px;
-    box-sizing: content-box;
-    outline: none;
-    resize: vertical;
-    padding: 8px;
-    transition: none !important;
-    color: var(--guido-color-gray-800);
-    box-shadow: none !important;
-    box-sizing: border-box !important;
-}
-
-.base-input:hover:not(:disabled) {
-    background-color: #f9f9f9;
-    border-color: #7a92f2;
-}
-
-.base-input:focus:not(:disabled) {
-    background-color: #f9f9f9;
-    border-color: #0a2ecc;
-    box-shadow: 0 0 0 3px #b5c1f1 !important;
-}
-/** BASE INPUT */
-
-/** COUNTER */
-ue-counter {
-    padding: 0 !important;
-    background-color: var(--guido-color-white) !important;
-    border: 1px solid var(--guido-color-gray-300);
-}
-
-ue-counter .button {
-    width: 40px;
-    height: 40px;
-    box-shadow: none;
-}
-
-ue-counter .button .icon-button {
-    color: var(--guido-color-primary-500);
-}
-
-ue-counter ue-button:first-child .button {
-    border-right: 1px solid var(--guido-color-gray-300);
-}
-
-ue-counter ue-button:last-child .button {
-    border-left: 1px solid var(--guido-color-gray-300);
-}
-/** COUNTER */
-
-/** COLOR */
-ue-color {
-    width: 80px;
-}
-
-ue-color .base-input {
-    width: 100%;
-}
-/** COLOR */
-`;
-export {
-  n as default
-};