codexly-ui 0.10.86 → 0.10.88

package/fesm2022/codexly-ui.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, DestroyRef, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, NgControl, ReactiveFormsModule, FormGroup, Validators, FormsModule } from '@angular/forms';
@@ -209,24 +210,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }] } });
 
-const BUTTON_BASE_CLASS = 'relative overflow-hidden inline-flex items-center justify-center font-medium select-none transition-[color,background-color,border-color,box-shadow] duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
-const BUTTON_SIZE_MAP = {
-    xxs: 'text-xs px-1.5 py-0.5 gap-0.5',
-    xs: 'text-xs px-2 py-1 gap-1',
-    sm: 'text-xs px-3 py-1.5 gap-1.5',
-    md: 'text-sm px-4 py-2 gap-2',
-    lg: 'text-base px-5 py-2.5 gap-2.5',
-};
-const BUTTON_SHAPE_FIXED = {
-    pill: 'rounded-full',
-    circle: 'rounded-full',
+const SOCIAL_ICON_DEFS = {
+    instagram: {
+        viewBox: '0 0 24 24',
+        markup: `<rect x="2.5" y="2.5" width="19" height="19" rx="5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="12" r="4.3" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" stroke="none"/>`,
+    },
+    facebook: {
+        viewBox: '0 0 24 24',
+        markup: `<path d="M14.5 21v-8h2.7l.4-3.1h-3.1V7.9c0-.9.25-1.5 1.55-1.5h1.65V3.6C17.4 3.5 16.5 3.4 15.5 3.4c-2.4 0-4 1.45-4 4.1v2.4H8.8v3.1h2.7v8h3z" fill="currentColor"/>`,
+    },
+    tiktok: {
+        viewBox: '0 0 24 24',
+        markup: `<path d="M16.6 3c.4 2.2 1.9 3.7 4.1 3.9v2.9c-1.5.1-2.9-.4-4.1-1.2v6.6c0 3.2-2.6 5.6-5.7 5.6C7.7 20.8 5 18.4 5 15.2c0-3.1 2.5-5.6 5.6-5.7.3 0 .6 0 .9.1v3c-.3-.1-.6-.1-.9-.1-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.8-1.1 2.8-2.6V3h3.2z" fill="currentColor"/>`,
+    },
 };
-const BUTTON_ICON_ONLY_SIZE_MAP = {
-    xxs: 'w-5 h-5 p-0 text-xs',
-    xs: 'w-7 h-7 p-0 text-xs',
-    sm: 'w-8 h-8 p-0 text-sm',
-    md: 'w-10 h-10 p-0 text-sm',
-    lg: 'w-11 h-11 p-0 text-sm',
+const SOCIAL_ICON_SIZE_MAP = {
+    xxs: 'w-5 h-5 p-0.5',
+    xs: 'w-7 h-7 p-1',
+    sm: 'w-8 h-8 p-1.5',
+    md: 'w-10 h-10 p-2',
+    lg: 'w-11 h-11 p-2.5',
 };
 
 const CLX_FONT_CATALOG = [
@@ -686,6 +691,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+class ClxSocialIconComponent {
+    _sanitizer = inject(DomSanitizer);
+    _themeSvc = inject(ClxThemeService);
+    platform = input.required(...(ngDevMode ? [{ debugName: "platform" }] : /* istanbul ignore next */ []));
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _size = computed(() => this.size() ?? this._themeSvc.config().defaultSize, ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _markup = computed(() => {
+        const def = SOCIAL_ICON_DEFS[this.platform()];
+        return this._sanitizer.bypassSecurityTrustHtml(`<svg viewBox="${def.viewBox}" class="w-full h-full">${def.markup}</svg>`);
+    }, ...(ngDevMode ? [{ debugName: "_markup" }] : /* istanbul ignore next */ []));
+    _hostClass = computed(() => {
+        const { color, shade } = parseColorInput(this._color());
+        const base = resolveColor(this._color());
+        const variant = this.variant();
+        let cls;
+        if (variant === 'solid')
+            cls = `${base.bg} text-white ${base.hoverBg}`;
+        else if (variant === 'light')
+            cls = `${base.bgSubtle} text-${color}-${shade} hover:${base.bgMuted.replace('/10', '/20')}`;
+        else if (variant === 'outline')
+            cls = `border-2 ${base.border} text-${color}-${shade} ${base.hoverBgBase} hover:text-white`;
+        else if (variant === 'ghost')
+            cls = `bg-black/10 ${base.textSubtle} ${base.hoverBgMuted}`;
+        else
+            cls = `${base.textSubtle} hover:underline`;
+        const sizeClass = SOCIAL_ICON_SIZE_MAP[this._size()];
+        return `inline-flex items-center justify-center rounded-xl transition-colors duration-200 cursor-pointer ${sizeClass} ${cls}`;
+    }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSocialIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: ClxSocialIconComponent, isStandalone: true, selector: "a[clx-social-icon], button[clx-social-icon]", inputs: { platform: { classPropertyName: "platform", publicName: "platform", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-label": "platform()" } }, ngImport: i0, template: `<span class="w-full h-full [&>svg]:w-full [&>svg]:h-full" [innerHTML]="_markup()"></span>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxSocialIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'a[clx-social-icon], button[clx-social-icon]',
+                    standalone: true,
+                    template: `<span class="w-full h-full [&>svg]:w-full [&>svg]:h-full" [innerHTML]="_markup()"></span>`,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': '_hostClass()',
+                        '[attr.aria-label]': 'platform()',
+                    },
+                }]
+        }], propDecorators: { platform: [{ type: i0.Input, args: [{ isSignal: true, alias: "platform", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+const BUTTON_BASE_CLASS = 'relative overflow-hidden inline-flex items-center justify-center font-medium select-none transition-[color,background-color,border-color,box-shadow] duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2';
+const BUTTON_SIZE_MAP = {
+    xxs: 'text-xs px-1.5 py-0.5 gap-0.5',
+    xs: 'text-xs px-2 py-1 gap-1',
+    sm: 'text-xs px-3 py-1.5 gap-1.5',
+    md: 'text-sm px-4 py-2 gap-2',
+    lg: 'text-base px-5 py-2.5 gap-2.5',
+};
+const BUTTON_SHAPE_FIXED = {
+    pill: 'rounded-full',
+    circle: 'rounded-full',
+};
+const BUTTON_ICON_ONLY_SIZE_MAP = {
+    xxs: 'w-5 h-5 p-0 text-xs',
+    xs: 'w-7 h-7 p-0 text-xs',
+    sm: 'w-8 h-8 p-0 text-sm',
+    md: 'w-10 h-10 p-0 text-sm',
+    lg: 'w-11 h-11 p-0 text-sm',
+};
+
 const BADGE_SIZE_MAP = {
     xs: 'text-[10px] px-1.5 py-0.5',
     sm: 'text-xs px-2 py-1',
@@ -16422,5 +16496,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map