builder-settings-types 0.0.57 → 0.0.59

package/dist/index.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{flex-direction:column;gap:8px;max-height:fit-content;display:flex;transition:max-height .3s ease-in-out,display .2s ease-in-out}.setting-group-content.collapsed{max-height:0;display:none}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.upload-preview{width:91px;height:71px;object-fit:cover;border-radius:4px}.upload-button{display:inline-flex;align-items:center;gap:4px;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}:root{--color-border: #d0d5dd;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Inter,serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
+@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{flex-direction:column;gap:8px;max-height:fit-content;display:flex;transition:max-height .3s ease-in-out,display .2s ease-in-out}.setting-group-content.collapsed{max-height:0;display:none}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.upload-preview{width:91px;height:71px;object-fit:cover;border-radius:4px}.upload-button{display:inline-flex;align-items:center;gap:4px;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085}:root{--color-border: #d0d5dd;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Inter,serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}

package/dist/index.d.ts

@@ -10,6 +10,53 @@ export declare interface AlignSettingProps extends SettingProps<AlignValue> {
 
 export declare type AlignValue = 'left' | 'center' | 'right';
 
+export declare class BackgroundSettingSet extends SettingGroup<{
+    backgroundImage: UploadSetting;
+    opacity: OpacitySetting;
+    backgroundColor: ColorSetting;
+    opacityBG: OpacitySetting;
+}> {
+    /**
+     * Constructs a new BackgroundSettingSet.
+     *
+     * @param props An object that may include default values for each setting and additional
+     *              properties for the UploadSetting via `uploadProps`.
+     *
+     * Example:
+     * {
+     *    backgroundImage: 'https://example.com/myimage.png',
+     *    opacity: 80,
+     *    backgroundColor: '#00141E',
+     *    opacityBG: 90,
+     *    uploadProps: {
+     *      uploadUrl: 'https://st-admapi.onaim.io/api/File/UploadImage',
+     *      requestMethod: 'POST',
+     *      requestHeaders: {
+     *        accept: 'text/plain',
+     *        Authorization: 'bearer <your-token-here>',
+     *      },
+     *      formFieldName: 'File',
+     *      parseResponse: (data) => data.data.url,
+     *    }
+     * }
+     */
+    constructor(props?: {
+        backgroundImage?: string;
+        opacity?: number;
+        backgroundColor?: string;
+        opacityBG?: number;
+        uploadProps?: UploadSettingProps;
+    });
+    /**
+     * Override draw() to reorder the child settings and insert an "OR" label between the two sections.
+     */
+    draw(): HTMLElement;
+    /**
+     * Helper method to generate CSS based on the current settings.
+     */
+    getCssCode(): string;
+}
+
 /**
  * A SettingGroup for configuring "Border" settings.
  * It includes child settings for color, opacity, radius, and size.
@@ -17,7 +64,7 @@ export declare type AlignValue = 'left' | 'center' | 'right';
  */
 export declare class BorderSettingSet extends SettingGroup<{
     color: ColorSetting;
-    opacity: NumberSetting;
+    opacity: OpacitySetting;
     radius: NumberSetting;
     size: NumberSetting;
 }> {
@@ -113,6 +160,33 @@ export declare interface DimensionValue {
     height: number;
 }
 
+declare interface HeaderTypographySettings {
+    colorDefault?: string;
+    colorOpacityDefault?: number;
+    fontFamilyDefault?: string;
+    fontFamilyOptions?: SelectOption[];
+    fontFamilyGetOptions?: () => SelectOption[];
+    fontFamilyGetOptionsAsync?: () => Promise<SelectOption[]>;
+    fontWeightDefault?: string;
+    fontWeightOptions?: SelectOption[];
+    fontWeightGetOptions?: () => SelectOption[];
+    fontWeightGetOptionsAsync?: () => Promise<SelectOption[]>;
+    fontSizeDefault?: number;
+    alignDefault?: AlignValue;
+}
+
+export declare class HeaderTypographySettingSet extends SettingGroup<{
+    color: ColorSetting;
+    opacity: OpacitySetting;
+    fontFamily: SelectSetting<string>;
+    fontWeight: SelectSetting<string>;
+    fontSize: NumberSetting;
+    align: AlignSetting_2;
+}> {
+    constructor(props?: HeaderTypographySettings);
+    getCssCode(): string;
+}
+
 export declare interface IChangable<T> {
     setOnChange(onChange: (value: T) => void): void;
 }
@@ -277,10 +351,39 @@ export declare interface StringSettingsProps extends SettingProps<string> {
     wrapperClassName?: string;
 }
 
+export declare class TabsContainerGroup extends SettingGroup<Record<string, TabSettingGroup>> {
+    private tabs;
+    private _el;
+    constructor();
+    /** Adds a new tab. */
+    addTab(): void;
+    /** Removes a specific tab. */
+    removeTab(tab: TabSettingGroup): void;
+    /** Relabels tabs sequentially after removal. */
+    private relabelTabs;
+    /**
+     * Override draw() so we can store the created DOM element
+     * and add the "Add Tab" button in a container positioned at the bottom-right.
+     */
+    draw(): HTMLElement;
+    /**
+     * Re-renders the inner settings content based on the current tabs.
+     */
+    rerender(): void;
+}
+
+declare class TabSettingGroup extends SettingGroup<{
+    name: StringSetting;
+    content: StringSetting;
+}> {
+    private onDeleteCallback?;
+    constructor(index: number, onDelete: () => void);
+    draw(): HTMLElement;
+}
+
 /**
- * A Setting subclass that displays an image preview (if any)
- * and an "Upload" button with an icon. The user can select a file,
- * which updates this.value with a data URL of the image.
+ * A Setting subclass that uploads the selected image file to a remote endpoint,
+ * using fully configurable request properties (URL, headers, etc.).
  */
 export declare class UploadSetting extends Setting<string, UploadSettingProps> {
     inputType: InputTypes;
@@ -289,8 +392,13 @@ export declare class UploadSetting extends Setting<string, UploadSettingProps> {
 }
 
 export declare interface UploadSettingProps extends SettingProps<string> {
-    /** Optional placeholder image or default URL */
+    /** Placeholder or initial URL to display in preview if no file is uploaded yet. */
     defaultUrl?: string;
+    uploadUrl?: string;
+    requestMethod?: string;
+    requestHeaders?: Record<string, string>;
+    formFieldName?: string;
+    parseResponse?: (responseData: any) => string;
 }
 
 export { }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "builder-settings-types",
 	"description": "builder settings",
-	"version": "0.0.57",
+	"version": "0.0.59",
 	"type": "module",
 	"main": "dist/builder-settings-types.cjs.js",
 	"module": "dist/builder-settings-types.es.js",