nath-angular-ui 0.5.6 → 0.6.0

package/fesm2022/nath-angular-ui.mjs

@@ -5009,6 +5009,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, styles: ["nath-tabs,.nath-tabs-theme{--nath-tabs-text-main: var(--color-zinc-700, oklch(44.2% .017 285.786));--nath-tabs-text-active: var(--color-blue-600, oklch(51.9% .21 259.429));--nath-tabs-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-tabs-active-border: var(--color-blue-600, oklch(51.9% .21 259.429));--nath-tabs-hover-bg: var(--color-zinc-100, oklch(96.7% .003 286.375));--nath-tabs-panel-bg: transparent;--nath-tabs-panel-text: var(--color-zinc-700, oklch(44.2% .017 285.786));--nath-tabs-radius: .5rem}.dark nath-tabs,.dark .nath-tabs-theme{--nath-tabs-text-main: var(--color-zinc-400, oklch(70.7% .009 285.918));--nath-tabs-text-active: var(--color-blue-400, oklch(70.7% .165 254.624));--nath-tabs-border: var(--color-zinc-700, oklch(37.1% .008 285.539));--nath-tabs-active-border: var(--color-blue-400, oklch(70.7% .165 254.624));--nath-tabs-hover-bg: var(--color-zinc-800, oklch(27.8% .006 285.923));--nath-tabs-panel-text: var(--color-zinc-300, oklch(83.1% .007 285.938))}nath-tabs{display:block;width:100%}.nath-tabs-container{display:flex;width:100%;overflow:hidden}.nath-tabs-container.horizontal{flex-direction:column}.nath-tabs-container.vertical{flex-direction:row}.nath-tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative}.nath-tabs-container.horizontal .nath-tabs-list{flex-direction:row;border-bottom:1px solid var(--nath-tabs-border)}.nath-tabs-container.vertical .nath-tabs-list{flex-direction:column;border-right:1px solid var(--nath-tabs-border)}.nath-tabs-tab{flex-grow:1;outline:none;padding:.75rem 1rem;text-align:center;color:var(--nath-tabs-text-main);cursor:pointer;position:relative;transition:all .2s ease-in-out}.nath-tabs-tab:disabled,.nath-tabs-tab[aria-disabled=true]{cursor:not-allowed;opacity:.5}.nath-tabs-tab:hover:not(:disabled):not([aria-selected=true]){background-color:var(--nath-tabs-hover-bg);color:var(--nath-tabs-text-active)}.nath-tabs-tab[aria-selected=true]{font-weight:600;color:var(--nath-tabs-text-active)}.nath-tabs-container.horizontal .nath-tabs-tab[aria-selected=true]{border-bottom:2px solid var(--nath-tabs-active-border)}.nath-tabs-container.vertical .nath-tabs-tab[aria-selected=true]{border-right:2px solid var(--nath-tabs-active-border)}.nath-tabs-tab:focus-visible{outline:2px solid var(--nath-tabs-active-border);outline-offset:-4px;border-radius:var(--nath-tabs-radius)}.nath-tabs-sliding-window{display:flex;overflow:hidden;width:calc(var(--total-tabs, 1) * 100%);transform:translate(calc(-100% / var(--total-tabs, 1) * var(--active-index, 0)));transition:transform .3s cubic-bezier(.4,0,.2,1)}.nath-tabs-panel{display:block;padding:1rem;width:calc(100% / var(--total-tabs, 1));box-sizing:border-box;background-color:var(--nath-tabs-panel-bg);color:var(--nath-tabs-panel-text)}.nath-tabs-panel:focus-visible{outline:2px solid var(--nath-tabs-active-border);outline-offset:-4px}\n"] }]
         }], propDecorators: { activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], tabClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabClass", required: false }] }], tabPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabPanelClass", required: false }] }], slidingWindowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "slidingWindowClass", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabDirective), { isSignal: true }] }], tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabPanelDirective), { isSignal: true }] }] } });
 
+class NathTag {
+    variant = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('medium', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    closable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closable" }] : /* istanbul ignore next */ []));
+    closed = output();
+    onClose(event) {
+        event.stopPropagation();
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathTag, isStandalone: true, selector: "nath-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "class.nath-tag--primary": "variant() === \"primary\"", "class.nath-tag--secondary": "variant() === \"secondary\"", "class.nath-tag--success": "variant() === \"success\"", "class.nath-tag--danger": "variant() === \"danger\"", "class.nath-tag--warning": "variant() === \"warning\"", "class.nath-tag--info": "variant() === \"info\"", "class.nath-tag--help": "variant() === \"help\"", "class.nath-tag--small": "size() === \"small\"", "class.nath-tag--medium": "size() === \"medium\"", "class.nath-tag--large": "size() === \"large\"", "class.nath-tag--closable": "closable()" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (closable()) {\n  <button class=\"nath-tag-close\" (click)=\"onClose($event)\" aria-label=\"Close tag\">\n    <svg lucideX class=\"nath-tag-close-icon\" />\n  </button>\n}\n", styles: ["nath-tag,.nath-tag-theme{--nath-tag-radius: .375rem;--nath-tag-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-tag-primary-bg: var(--color-primary-500, #8e9ba5);--nath-tag-primary-text: #ffffff;--nath-tag-primary-hover-bg: var(--color-primary-600, #79848c);--nath-tag-secondary-bg: var(--color-slate-300, #cbd5e1);--nath-tag-secondary-text: var(--color-slate-800, #1e293b);--nath-tag-secondary-hover-bg: var(--color-slate-300, #cbd5e1);--nath-tag-success-bg: var(--color-success-500, oklch(72.3% .219 149.579));--nath-tag-success-text: #ffffff;--nath-tag-success-hover-bg: var(--color-success-600, oklch(62.7% .194 149.214));--nath-tag-danger-bg: var(--color-danger-500, oklch(63.7% .237 25.331));--nath-tag-danger-text: #ffffff;--nath-tag-danger-hover-bg: var(--color-danger-600, oklch(57.7% .245 27.325));--nath-tag-warning-bg: var(--color-warning-500, oklch(70.5% .213 47.604));--nath-tag-warning-text: #ffffff;--nath-tag-warning-hover-bg: var(--color-warning-600, oklch(64.6% .222 41.116));--nath-tag-info-bg: var(--color-info-500, oklch(71.5% .143 215.221));--nath-tag-info-text: #ffffff;--nath-tag-info-hover-bg: var(--color-info-600, oklch(60.9% .126 221.723));--nath-tag-help-bg: var(--color-help-500, oklch(60.6% .25 292.717));--nath-tag-help-text: #ffffff;--nath-tag-help-hover-bg: var(--color-help-600, oklch(54.1% .281 293.009));--nath-tag-close-color: rgba(255, 255, 255, .8);--nath-tag-close-hover-bg: rgba(255, 255, 255, .2)}.dark nath-tag,.dark .nath-tag-theme{--nath-tag-primary-bg: var(--color-primary-400, #a3aeb6);--nath-tag-primary-text: var(--color-zinc-900, #242729);--nath-tag-primary-hover-bg: var(--color-primary-300, #b9c1c7);--nath-tag-secondary-bg: var(--color-slate-800, #1e293b);--nath-tag-secondary-text: var(--color-slate-200, #e2e8f0);--nath-tag-secondary-hover-bg: var(--color-slate-700, #334155);--nath-tag-close-color: rgba(0, 0, 0, .6);--nath-tag-close-hover-bg: rgba(0, 0, 0, .1)}nath-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:var(--nath-tag-radius);box-shadow:var(--nath-tag-shadow);font-weight:500;font-size:.875rem;line-height:1.25rem;transition:background-color .15s}nath-tag.nath-tag--small{padding:.25rem .5rem;font-size:.75rem;line-height:1rem}nath-tag.nath-tag--medium{padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem}nath-tag.nath-tag--large{padding:.5rem 1rem;font-size:1rem;line-height:1.5rem}nath-tag.nath-tag--primary{background-color:var(--nath-tag-primary-bg);color:var(--nath-tag-primary-text)}nath-tag.nath-tag--closable.nath-tag--primary:hover{background-color:var(--nath-tag-primary-hover-bg)}nath-tag.nath-tag--secondary{background-color:var(--nath-tag-secondary-bg);color:var(--nath-tag-secondary-text)}nath-tag.nath-tag--closable.nath-tag--secondary:hover{background-color:var(--nath-tag-secondary-hover-bg)}nath-tag.nath-tag--success{background-color:var(--nath-tag-success-bg);color:var(--nath-tag-success-text)}nath-tag.nath-tag--closable.nath-tag--success:hover{background-color:var(--nath-tag-success-hover-bg)}nath-tag.nath-tag--danger{background-color:var(--nath-tag-danger-bg);color:var(--nath-tag-danger-text)}nath-tag.nath-tag--closable.nath-tag--danger:hover{background-color:var(--nath-tag-danger-hover-bg)}nath-tag.nath-tag--warning{background-color:var(--nath-tag-warning-bg);color:var(--nath-tag-warning-text)}nath-tag.nath-tag--closable.nath-tag--warning:hover{background-color:var(--nath-tag-warning-hover-bg)}nath-tag.nath-tag--info{background-color:var(--nath-tag-info-bg);color:var(--nath-tag-info-text)}nath-tag.nath-tag--closable.nath-tag--info:hover{background-color:var(--nath-tag-info-hover-bg)}nath-tag.nath-tag--help{background-color:var(--nath-tag-help-bg);color:var(--nath-tag-help-text)}nath-tag.nath-tag--closable.nath-tag--help:hover{background-color:var(--nath-tag-help-hover-bg)}.nath-tag-close{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;border:none;border-radius:9999px;background:transparent;color:var(--nath-tag-close-color);cursor:pointer;transition:background-color .15s,color .15s}.nath-tag-close:hover{background-color:var(--nath-tag-close-hover-bg)}.nath-tag-close:focus{outline:2px solid currentColor;outline-offset:2px}.nath-tag-close-icon{width:.75rem;height:.75rem;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathTag, decorators: [{
+            type: Component,
+            args: [{ selector: 'nath-tag', imports: [CommonModule, LucideX], encapsulation: ViewEncapsulation.None, host: {
+                        '[class.nath-tag--primary]': 'variant() === "primary"',
+                        '[class.nath-tag--secondary]': 'variant() === "secondary"',
+                        '[class.nath-tag--success]': 'variant() === "success"',
+                        '[class.nath-tag--danger]': 'variant() === "danger"',
+                        '[class.nath-tag--warning]': 'variant() === "warning"',
+                        '[class.nath-tag--info]': 'variant() === "info"',
+                        '[class.nath-tag--help]': 'variant() === "help"',
+                        '[class.nath-tag--small]': 'size() === "small"',
+                        '[class.nath-tag--medium]': 'size() === "medium"',
+                        '[class.nath-tag--large]': 'size() === "large"',
+                        '[class.nath-tag--closable]': 'closable()',
+                    }, template: "<ng-content></ng-content>\n@if (closable()) {\n  <button class=\"nath-tag-close\" (click)=\"onClose($event)\" aria-label=\"Close tag\">\n    <svg lucideX class=\"nath-tag-close-icon\" />\n  </button>\n}\n", styles: ["nath-tag,.nath-tag-theme{--nath-tag-radius: .375rem;--nath-tag-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);--nath-tag-primary-bg: var(--color-primary-500, #8e9ba5);--nath-tag-primary-text: #ffffff;--nath-tag-primary-hover-bg: var(--color-primary-600, #79848c);--nath-tag-secondary-bg: var(--color-slate-300, #cbd5e1);--nath-tag-secondary-text: var(--color-slate-800, #1e293b);--nath-tag-secondary-hover-bg: var(--color-slate-300, #cbd5e1);--nath-tag-success-bg: var(--color-success-500, oklch(72.3% .219 149.579));--nath-tag-success-text: #ffffff;--nath-tag-success-hover-bg: var(--color-success-600, oklch(62.7% .194 149.214));--nath-tag-danger-bg: var(--color-danger-500, oklch(63.7% .237 25.331));--nath-tag-danger-text: #ffffff;--nath-tag-danger-hover-bg: var(--color-danger-600, oklch(57.7% .245 27.325));--nath-tag-warning-bg: var(--color-warning-500, oklch(70.5% .213 47.604));--nath-tag-warning-text: #ffffff;--nath-tag-warning-hover-bg: var(--color-warning-600, oklch(64.6% .222 41.116));--nath-tag-info-bg: var(--color-info-500, oklch(71.5% .143 215.221));--nath-tag-info-text: #ffffff;--nath-tag-info-hover-bg: var(--color-info-600, oklch(60.9% .126 221.723));--nath-tag-help-bg: var(--color-help-500, oklch(60.6% .25 292.717));--nath-tag-help-text: #ffffff;--nath-tag-help-hover-bg: var(--color-help-600, oklch(54.1% .281 293.009));--nath-tag-close-color: rgba(255, 255, 255, .8);--nath-tag-close-hover-bg: rgba(255, 255, 255, .2)}.dark nath-tag,.dark .nath-tag-theme{--nath-tag-primary-bg: var(--color-primary-400, #a3aeb6);--nath-tag-primary-text: var(--color-zinc-900, #242729);--nath-tag-primary-hover-bg: var(--color-primary-300, #b9c1c7);--nath-tag-secondary-bg: var(--color-slate-800, #1e293b);--nath-tag-secondary-text: var(--color-slate-200, #e2e8f0);--nath-tag-secondary-hover-bg: var(--color-slate-700, #334155);--nath-tag-close-color: rgba(0, 0, 0, .6);--nath-tag-close-hover-bg: rgba(0, 0, 0, .1)}nath-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:var(--nath-tag-radius);box-shadow:var(--nath-tag-shadow);font-weight:500;font-size:.875rem;line-height:1.25rem;transition:background-color .15s}nath-tag.nath-tag--small{padding:.25rem .5rem;font-size:.75rem;line-height:1rem}nath-tag.nath-tag--medium{padding:.375rem .75rem;font-size:.875rem;line-height:1.25rem}nath-tag.nath-tag--large{padding:.5rem 1rem;font-size:1rem;line-height:1.5rem}nath-tag.nath-tag--primary{background-color:var(--nath-tag-primary-bg);color:var(--nath-tag-primary-text)}nath-tag.nath-tag--closable.nath-tag--primary:hover{background-color:var(--nath-tag-primary-hover-bg)}nath-tag.nath-tag--secondary{background-color:var(--nath-tag-secondary-bg);color:var(--nath-tag-secondary-text)}nath-tag.nath-tag--closable.nath-tag--secondary:hover{background-color:var(--nath-tag-secondary-hover-bg)}nath-tag.nath-tag--success{background-color:var(--nath-tag-success-bg);color:var(--nath-tag-success-text)}nath-tag.nath-tag--closable.nath-tag--success:hover{background-color:var(--nath-tag-success-hover-bg)}nath-tag.nath-tag--danger{background-color:var(--nath-tag-danger-bg);color:var(--nath-tag-danger-text)}nath-tag.nath-tag--closable.nath-tag--danger:hover{background-color:var(--nath-tag-danger-hover-bg)}nath-tag.nath-tag--warning{background-color:var(--nath-tag-warning-bg);color:var(--nath-tag-warning-text)}nath-tag.nath-tag--closable.nath-tag--warning:hover{background-color:var(--nath-tag-warning-hover-bg)}nath-tag.nath-tag--info{background-color:var(--nath-tag-info-bg);color:var(--nath-tag-info-text)}nath-tag.nath-tag--closable.nath-tag--info:hover{background-color:var(--nath-tag-info-hover-bg)}nath-tag.nath-tag--help{background-color:var(--nath-tag-help-bg);color:var(--nath-tag-help-text)}nath-tag.nath-tag--closable.nath-tag--help:hover{background-color:var(--nath-tag-help-hover-bg)}.nath-tag-close{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;border:none;border-radius:9999px;background:transparent;color:var(--nath-tag-close-color);cursor:pointer;transition:background-color .15s,color .15s}.nath-tag-close:hover{background-color:var(--nath-tag-close-hover-bg)}.nath-tag-close:focus{outline:2px solid currentColor;outline-offset:2px}.nath-tag-close-icon{width:.75rem;height:.75rem;display:block}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
 const DARK_THEME_CLASS = 'dark';
 const THEME_CONFIG = new InjectionToken('THEME_CONFIG');
 function provideThemeConfig(config) {
@@ -5600,5 +5632,5 @@ function isSortOrderValid(order) {
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbService, DARK_THEME_CLASS, DIALOG_DATA, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathConfirmationService, NathDatepicker, NathDialogContainer, NathDialogRef, NathDialogService, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathShowErrors, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
+export { BreadcrumbService, DARK_THEME_CLASS, DIALOG_DATA, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathConfirmationService, NathDatepicker, NathDialogContainer, NathDialogRef, NathDialogService, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathShowErrors, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathTag, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
 //# sourceMappingURL=nath-angular-ui.mjs.map