@masterkeymaterial/ui 0.2.34 → 0.2.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3382,11 +3382,11 @@ class UiButton {
|
|
|
3382
3382
|
});
|
|
3383
3383
|
}
|
|
3384
3384
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3385
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: UiButton, isStandalone: true, selector: "ui-button", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: false, transformFunction: null }, iconeAntes: { classPropertyName: "iconeAntes", publicName: "iconeAntes", isSignal: true, isRequired: false, transformFunction: null }, iconeDepois: { classPropertyName: "iconeDepois", publicName: "iconeDepois", isSignal: true, isRequired: false, transformFunction: null }, iconeCategory: { classPropertyName: "iconeCategory", publicName: "iconeCategory", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, eventPropagation: { classPropertyName: "eventPropagation", publicName: "eventPropagation", isSignal: true, isRequired: false, transformFunction: null }, radiusTabFormat: { classPropertyName: "radiusTabFormat", publicName: "radiusTabFormat", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, tipo: { classPropertyName: "tipo", publicName: "tipo", isSignal: true, isRequired: false, transformFunction: null }, tema: { classPropertyName: "tema", publicName: "tema", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, ativo: { classPropertyName: "ativo", publicName: "ativo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icone: "iconeChange", iconeAntes: "iconeAntesChange", iconeDepois: "iconeDepoisChange", iconeCategory: "iconeCategoryChange", clicked: "clicked", tema: "temaChange" }, viewQueries: [{ propertyName: "botao", first: true, predicate: ["botao"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "rippleEffect", first: true, predicate: ["rippleEffect"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button #botao type=\"button\" [class]=\"buttonClasses()\" [style.--btnr-corFundo]=\"corFundo()\"\n\t[style.--btnr-corFrente]=\"corFrente()\" [disabled]=\"disabled()\" [tabIndex]=\"tabindex()\"\n\t[class.radiusTabFormat]=\"radiusTabFormat()\" [class.disabled]=\"disabled()\" [class.ativo]=\"ativo()\"\n\t(keyup.Enter)=\"onKeyPressed($event)\" [class.category]=\"isCategory()\">\n\t@if(icone() && iconeAntes()){ <div class=\"icone iconeAntes\"><i [class]=\"icone()\"></i></div> }\n\t<ng-content />\n\t@if(icone() && iconeDepois()){ <div class=\"icone iconeDepois\"><i [class]=\"icone()\"></i></div> }\n\t@if(isCategory()){\n\t<div class=\"icone iconeCategory\">\n\t\t@if(iconeCategory()) {\n\t\t<i [class]=\"iconeCategory()\"></i>\n\t\t} @else {\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\n\t\t\tclass=\"carretDown\">\n\t\t\t<path [attr.d]=\"pathCarretDown\" />\n\t\t</svg>\n\t\t}\n\t</div>\n\t}\n\t<span #rippleEffect class=\"expandedClick\" (click)=\"onClickExpanded($event)\">\n\t\t<span #ripple class=\"ripple\"></span>\n\t</span>\n</button>", styles: [":host{display:block;-webkit-user-select:none;user-select:none}button{width:var(--ui-width, 100%);height:var(--ui-height, 40px);min-height:var(--ui-min-height, auto);display:var(--ui-display, flex);flex-direction:var(--ui-flex-direction, row);justify-content:var(--ui-justify-content, center);align-items:var(--ui-align-items, center);background-color:var(--ui-background, var(--sys-background));color:var(--ui-on-background, var(--sys-on-background));border-radius:var(--ui-border-radius, var(--sys-border-radius, 15px));gap:var(--ui-gap, .5rem);text-align:var(--ui-text-align, center);font-size:var(--ui-font-size, 14px);cursor:pointer;text-decoration:none;border:none;position:relative;padding:var(--ui-padding, 0 16px);outline:1px solid var(--ui-outline-color, transparent);outline-offset:var(--ui-outline-offset, -1px);margin:var(--ui-margin, 0);--button-transparency: var(--ui-effect-color, light-dark(#00000025, #ffffff25))}button.radiusTabFormat{border-radius:var(--sys-border-radius, 15px) var(--sys-border-radius, 15px) 0 0}button:hover,button:focus-visible{filter:brightness(1.1) saturate(1.1)}button.icon:hover,button.nofill:hover,button.outlined:hover,button.menu-item:hover,button.menu-item-category:hover,button.sidebar-item:hover,button.sidebar-item-category:hover,button.big:hover,button.big:focus-visible,button.icon:focus-visible,button.nofill:focus-visible{background-color:color-mix(in srgb,var(--btnr-corFundo, hsl(0 0 50)) 10%,transparent 90%)}.expandedClick:hover{cursor:pointer}button.fill{background-color:var(--btnr-corFundo, var(--sys-background));color:var(--btnr-corFrente, var(--sys-on-background));--ui-cor-icone: var(--btnr-corFrente, var(--sys-on-background))}button.nofill{background-color:var(--ui-background, transparent);color:var(--ui-on-background, var(--btnr-corFundo, var(--sys-on-background)))}button.icon{background-color:transparent;--ui-cor-icone: var(--ui-on-background, var(--btnr-corFundo));height:var(--ui-height, 100%);min-width:36px;aspect-ratio:1 / 1;padding:0;display:flex;align-items:center;justify-content:center}button.outlined{outline:1px solid var(--ui-outline-color, var(--sys-outline));color:var(--btnr-corFundo);background-color:transparent}button.menu-item,button.menu-item-category{color:var(--ui-color, var(--sys-on-background));background-color:transparent;border-radius:0;padding:var(--ui-padding, 0 16px);height:var(--ui-height, auto);min-height:var(--ui-min-height, 40px);justify-content:var(--ui-justify-content, flex-start)}button.raised{color:var(--btnr-corFundo);background-color:color-mix(in srgb,var(--sys-background) 40%,transparent 60%);box-shadow:2px 2px 4px var(--button-transparency),inset -1px -1px 1px var(--button-transparency)}button.big{background-color:transparent;color:var(--btnr-corFundo);height:var(--ui-height, 100%);padding:var(--ui-padding, 10px)}button.sidebar-item,button.sidebar-item-category{color:var(--ui-color, var(--sys-on-background));background-color:transparent;border-radius:0;padding:var(--ui-padding, 0 16px);height:var(--ui-height, auto);min-height:var(--ui-min-height, 40px);justify-content:var(--ui-justify-content, flex-start);border-top-right-radius:var(--sys-border-radius);border-bottom-right-radius:var(--sys-border-radius);transition:all .3s;outline:none}.ripple{position:absolute;border-radius:50%;background:var(--button-transparency);transform:scale(0);animation:ripple-animation .7s ease-out;pointer-events:none;z-index:2}@keyframes ripple-animation{to{transform:scale(1.4);opacity:0}}.expandedClick{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden;border-radius:inherit}.icon .expandedClick{transform:scale(1.1)}.disabled,.disabled .expandedClick{pointer-events:none;cursor:default;filter:grayscale(1);opacity:.7}.icone{flex:0;opacity:var(--ui-opacity, 1);font-size:var(--ui-font-size-icone, var(--ui-font-size));color:var(--ui-cor-icone, var(--btnr-corFundo, var(--sys-on-background)))}.iconeCategory{position:absolute;right:10px;transition:transform .3s}.ativo{outline:1px outset var(--sys-high);box-shadow:0 0 1px var(--sys-high),inset 0 0 5px var(--sys-high);border-radius:var(--sys-border-radius)}button.sidebar-item.ativo,button.sidebar-item-category.ativo{outline:none;box-shadow:none;background-color:color-mix(in srgb,var(--btnr-corFundo, hsl(0 0 50)) 10%,transparent 90%)}button.sidebar-item-category.category.ativo .iconeCategory{transform:rotate(
|
|
3385
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: UiButton, isStandalone: true, selector: "ui-button", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: false, transformFunction: null }, iconeAntes: { classPropertyName: "iconeAntes", publicName: "iconeAntes", isSignal: true, isRequired: false, transformFunction: null }, iconeDepois: { classPropertyName: "iconeDepois", publicName: "iconeDepois", isSignal: true, isRequired: false, transformFunction: null }, iconeCategory: { classPropertyName: "iconeCategory", publicName: "iconeCategory", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, eventPropagation: { classPropertyName: "eventPropagation", publicName: "eventPropagation", isSignal: true, isRequired: false, transformFunction: null }, radiusTabFormat: { classPropertyName: "radiusTabFormat", publicName: "radiusTabFormat", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, tipo: { classPropertyName: "tipo", publicName: "tipo", isSignal: true, isRequired: false, transformFunction: null }, tema: { classPropertyName: "tema", publicName: "tema", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, ativo: { classPropertyName: "ativo", publicName: "ativo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { icone: "iconeChange", iconeAntes: "iconeAntesChange", iconeDepois: "iconeDepoisChange", iconeCategory: "iconeCategoryChange", clicked: "clicked", tema: "temaChange" }, viewQueries: [{ propertyName: "botao", first: true, predicate: ["botao"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "rippleEffect", first: true, predicate: ["rippleEffect"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<button #botao type=\"button\" [class]=\"buttonClasses()\" [style.--btnr-corFundo]=\"corFundo()\"\n\t[style.--btnr-corFrente]=\"corFrente()\" [disabled]=\"disabled()\" [tabIndex]=\"tabindex()\"\n\t[class.radiusTabFormat]=\"radiusTabFormat()\" [class.disabled]=\"disabled()\" [class.ativo]=\"ativo()\"\n\t(keyup.Enter)=\"onKeyPressed($event)\" [class.category]=\"isCategory()\">\n\t@if(icone() && iconeAntes()){ <div class=\"icone iconeAntes\"><i [class]=\"icone()\"></i></div> }\n\t<ng-content />\n\t@if(icone() && iconeDepois()){ <div class=\"icone iconeDepois\"><i [class]=\"icone()\"></i></div> }\n\t@if(isCategory()){\n\t<div class=\"icone iconeCategory\">\n\t\t@if(iconeCategory()) {\n\t\t<i [class]=\"iconeCategory()\"></i>\n\t\t} @else {\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\n\t\t\tclass=\"carretDown\">\n\t\t\t<path [attr.d]=\"pathCarretDown\" />\n\t\t</svg>\n\t\t}\n\t</div>\n\t}\n\t<span #rippleEffect class=\"expandedClick\" (click)=\"onClickExpanded($event)\">\n\t\t<span #ripple class=\"ripple\"></span>\n\t</span>\n</button>", styles: [":host{display:block;-webkit-user-select:none;user-select:none}button{width:var(--ui-width, 100%);height:var(--ui-height, 40px);min-height:var(--ui-min-height, auto);display:var(--ui-display, flex);flex-direction:var(--ui-flex-direction, row);justify-content:var(--ui-justify-content, center);align-items:var(--ui-align-items, center);background-color:var(--ui-background, var(--sys-background));color:var(--ui-on-background, var(--sys-on-background));border-radius:var(--ui-border-radius, var(--sys-border-radius, 15px));gap:var(--ui-gap, .5rem);text-align:var(--ui-text-align, center);font-size:var(--ui-font-size, 14px);cursor:pointer;text-decoration:none;border:none;position:relative;padding:var(--ui-padding, 0 16px);outline:1px solid var(--ui-outline-color, transparent);outline-offset:var(--ui-outline-offset, -1px);margin:var(--ui-margin, 0);--button-transparency: var(--ui-effect-color, light-dark(#00000025, #ffffff25))}button.radiusTabFormat{border-radius:var(--sys-border-radius, 15px) var(--sys-border-radius, 15px) 0 0}button:hover,button:focus-visible{filter:brightness(1.1) saturate(1.1)}button.icon:hover,button.nofill:hover,button.outlined:hover,button.menu-item:hover,button.menu-item-category:hover,button.sidebar-item:hover,button.sidebar-item-category:hover,button.big:hover,button.big:focus-visible,button.icon:focus-visible,button.nofill:focus-visible{background-color:color-mix(in srgb,var(--btnr-corFundo, hsl(0 0 50)) 10%,transparent 90%)}.expandedClick:hover{cursor:pointer}button.fill{background-color:var(--btnr-corFundo, var(--sys-background));color:var(--btnr-corFrente, var(--sys-on-background));--ui-cor-icone: var(--btnr-corFrente, var(--sys-on-background))}button.nofill{background-color:var(--ui-background, transparent);color:var(--ui-on-background, var(--btnr-corFundo, var(--sys-on-background)))}button.icon{background-color:transparent;--ui-cor-icone: var(--ui-on-background, var(--btnr-corFundo));height:var(--ui-height, 100%);min-width:36px;aspect-ratio:1 / 1;padding:0;display:flex;align-items:center;justify-content:center}button.outlined{outline:1px solid var(--ui-outline-color, var(--sys-outline));color:var(--btnr-corFundo);background-color:transparent}button.menu-item,button.menu-item-category{color:var(--ui-color, var(--sys-on-background));background-color:transparent;border-radius:0;padding:var(--ui-padding, 0 16px);height:var(--ui-height, auto);min-height:var(--ui-min-height, 40px);justify-content:var(--ui-justify-content, flex-start)}button.raised{color:var(--btnr-corFundo);background-color:color-mix(in srgb,var(--sys-background) 40%,transparent 60%);box-shadow:2px 2px 4px var(--button-transparency),inset -1px -1px 1px var(--button-transparency)}button.big{background-color:transparent;color:var(--btnr-corFundo);height:var(--ui-height, 100%);padding:var(--ui-padding, 10px)}button.sidebar-item,button.sidebar-item-category{color:var(--ui-color, var(--sys-on-background));background-color:transparent;border-radius:0;padding:var(--ui-padding, 0 16px);height:var(--ui-height, auto);min-height:var(--ui-min-height, 40px);justify-content:var(--ui-justify-content, flex-start);border-top-right-radius:var(--sys-border-radius);border-bottom-right-radius:var(--sys-border-radius);transition:all .3s;outline:none}.ripple{position:absolute;border-radius:50%;background:var(--button-transparency);transform:scale(0);animation:ripple-animation .7s ease-out;pointer-events:none;z-index:2}@keyframes ripple-animation{to{transform:scale(1.4);opacity:0}}.expandedClick{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden;border-radius:inherit}.icon .expandedClick{transform:scale(1.1)}.disabled,.disabled .expandedClick{pointer-events:none;cursor:default;filter:grayscale(1);opacity:.7}.icone{flex:0;opacity:var(--ui-opacity, 1);font-size:var(--ui-font-size-icone, var(--ui-font-size));color:var(--ui-cor-icone, var(--btnr-corFundo, var(--sys-on-background)))}.iconeCategory{position:absolute;right:10px;transition:transform .3s}.ativo{outline:1px outset var(--sys-high);box-shadow:0 0 1px var(--sys-high),inset 0 0 5px var(--sys-high);border-radius:var(--sys-border-radius)}button.sidebar-item.ativo,button.sidebar-item-category.ativo{outline:none;box-shadow:none;background-color:color-mix(in srgb,var(--btnr-corFundo, hsl(0 0 50)) 10%,transparent 90%)}button.sidebar-item-category.category.ativo .iconeCategory{transform:rotate(-90deg);transition:transform .3s}.carretDown{transform:rotate(-90deg)}\n"] });
|
|
3386
3386
|
}
|
|
3387
3387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiButton, decorators: [{
|
|
3388
3388
|
type: Component,
|
|
3389
|
-
args: [{ selector: 'ui-button', template: "<button #botao type=\"button\" [class]=\"buttonClasses()\" [style.--btnr-corFundo]=\"corFundo()\"\n\t[style.--btnr-corFrente]=\"corFrente()\" [disabled]=\"disabled()\" [tabIndex]=\"tabindex()\"\n\t[class.radiusTabFormat]=\"radiusTabFormat()\" [class.disabled]=\"disabled()\" [class.ativo]=\"ativo()\"\n\t(keyup.Enter)=\"onKeyPressed($event)\" [class.category]=\"isCategory()\">\n\t@if(icone() && iconeAntes()){ <div class=\"icone iconeAntes\"><i [class]=\"icone()\"></i></div> }\n\t<ng-content />\n\t@if(icone() && iconeDepois()){ <div class=\"icone iconeDepois\"><i [class]=\"icone()\"></i></div> }\n\t@if(isCategory()){\n\t<div class=\"icone iconeCategory\">\n\t\t@if(iconeCategory()) {\n\t\t<i [class]=\"iconeCategory()\"></i>\n\t\t} @else {\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\n\t\t\tclass=\"carretDown\">\n\t\t\t<path [attr.d]=\"pathCarretDown\" />\n\t\t</svg>\n\t\t}\n\t</div>\n\t}\n\t<span #rippleEffect class=\"expandedClick\" (click)=\"onClickExpanded($event)\">\n\t\t<span #ripple class=\"ripple\"></span>\n\t</span>\n</button>", styles: [":host{display:block;-webkit-user-select:none;user-select:none}button{width:var(--ui-width, 100%);height:var(--ui-height, 40px);min-height:var(--ui-min-height, auto);display:var(--ui-display, flex);flex-direction:var(--ui-flex-direction, row);justify-content:var(--ui-justify-content, center);align-items:var(--ui-align-items, center);background-color:var(--ui-background, var(--sys-background));color:var(--ui-on-background, var(--sys-on-background));border-radius:var(--ui-border-radius, var(--sys-border-radius, 15px));gap:var(--ui-gap, .5rem);text-align:var(--ui-text-align, center);font-size:var(--ui-font-size, 14px);cursor:pointer;text-decoration:none;border:none;position:relative;padding:var(--ui-padding, 0 16px);outline:1px solid var(--ui-outline-color, transparent);outline-offset:var(--ui-outline-offset, -1px);margin:var(--ui-margin, 0);--button-transparency: var(--ui-effect-color, light-dark(#00000025, #ffffff25))}button.radiusTabFormat{border-radius:var(--sys-border-radius, 15px) var(--sys-border-radius, 15px) 0 0}button:hover,button:focus-visible{filter:brightness(1.1) saturate(1.1)}button.icon:hover,button.nofill:hover,button.outlined:hover,button.menu-item:hover,button.menu-item-category:hover,button.sidebar-item:hover,button.sidebar-item-category:hover,button.big:hover,button.big:focus-visible,button.icon:focus-visible,button.nofill:focus-visible{background-color:color-mix(in srgb,var(--btnr-corFundo, hsl(0 0 50)) 10%,transparent 90%)}.expandedClick:hover{cursor:pointer}button.fill{background-color:var(--btnr-corFundo, var(--sys-background));color:var(--btnr-corFrente, var(--sys-on-background));--ui-cor-icone: var(--btnr-corFrente, var(--sys-on-background))}button.nofill{background-color:var(--ui-background, transparent);color:var(--ui-on-background, var(--btnr-corFundo, var(--sys-on-background)))}button.icon{background-color:transparent;--ui-cor-icone: var(--ui-on-background, var(--btnr-corFundo));height:var(--ui-height, 100%);min-width:36px;aspect-ratio:1 / 1;padding:0;display:flex;align-items:center;justify-content:center}button.outlined{outline:1px solid var(--ui-outline-color, var(--sys-outline));color:var(--btnr-corFundo);background-color:transparent}button.menu-item,button.menu-item-category{color:var(--ui-color, var(--sys-on-background));background-color:transparent;border-radius:0;padding:var(--ui-padding, 0 16px);height:var(--ui-height, auto);min-height:var(--ui-min-height, 40px);justify-content:var(--ui-justify-content, flex-start)}button.raised{color:var(--btnr-corFundo);background-color:color-mix(in srgb,var(--sys-background) 40%,transparent 60%);box-shadow:2px 2px 4px var(--button-transparency),inset -1px -1px 1px var(--button-transparency)}button.big{background-color:transparent;color:var(--btnr-corFundo);height:var(--ui-height, 100%);padding:var(--ui-padding, 10px)}button.sidebar-item,button.sidebar-item-category{color:var(--ui-color, var(--sys-on-background));background-color:transparent;border-radius:0;padding:var(--ui-padding, 0 16px);height:var(--ui-height, auto);min-height:var(--ui-min-height, 40px);justify-content:var(--ui-justify-content, flex-start);border-top-right-radius:var(--sys-border-radius);border-bottom-right-radius:var(--sys-border-radius);transition:all .3s;outline:none}.ripple{position:absolute;border-radius:50%;background:var(--button-transparency);transform:scale(0);animation:ripple-animation .7s ease-out;pointer-events:none;z-index:2}@keyframes ripple-animation{to{transform:scale(1.4);opacity:0}}.expandedClick{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden;border-radius:inherit}.icon .expandedClick{transform:scale(1.1)}.disabled,.disabled .expandedClick{pointer-events:none;cursor:default;filter:grayscale(1);opacity:.7}.icone{flex:0;opacity:var(--ui-opacity, 1);font-size:var(--ui-font-size-icone, var(--ui-font-size));color:var(--ui-cor-icone, var(--btnr-corFundo, var(--sys-on-background)))}.iconeCategory{position:absolute;right:10px;transition:transform .3s}.ativo{outline:1px outset var(--sys-high);box-shadow:0 0 1px var(--sys-high),inset 0 0 5px var(--sys-high);border-radius:var(--sys-border-radius)}button.sidebar-item.ativo,button.sidebar-item-category.ativo{outline:none;box-shadow:none;background-color:color-mix(in srgb,var(--btnr-corFundo, hsl(0 0 50)) 10%,transparent 90%)}button.sidebar-item-category.category.ativo .iconeCategory{transform:rotate(
|
|
3389
|
+
args: [{ selector: 'ui-button', template: "<button #botao type=\"button\" [class]=\"buttonClasses()\" [style.--btnr-corFundo]=\"corFundo()\"\n\t[style.--btnr-corFrente]=\"corFrente()\" [disabled]=\"disabled()\" [tabIndex]=\"tabindex()\"\n\t[class.radiusTabFormat]=\"radiusTabFormat()\" [class.disabled]=\"disabled()\" [class.ativo]=\"ativo()\"\n\t(keyup.Enter)=\"onKeyPressed($event)\" [class.category]=\"isCategory()\">\n\t@if(icone() && iconeAntes()){ <div class=\"icone iconeAntes\"><i [class]=\"icone()\"></i></div> }\n\t<ng-content />\n\t@if(icone() && iconeDepois()){ <div class=\"icone iconeDepois\"><i [class]=\"icone()\"></i></div> }\n\t@if(isCategory()){\n\t<div class=\"icone iconeCategory\">\n\t\t@if(iconeCategory()) {\n\t\t<i [class]=\"iconeCategory()\"></i>\n\t\t} @else {\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"\n\t\t\tclass=\"carretDown\">\n\t\t\t<path [attr.d]=\"pathCarretDown\" />\n\t\t</svg>\n\t\t}\n\t</div>\n\t}\n\t<span #rippleEffect class=\"expandedClick\" (click)=\"onClickExpanded($event)\">\n\t\t<span #ripple class=\"ripple\"></span>\n\t</span>\n</button>", styles: [":host{display:block;-webkit-user-select:none;user-select:none}button{width:var(--ui-width, 100%);height:var(--ui-height, 40px);min-height:var(--ui-min-height, auto);display:var(--ui-display, flex);flex-direction:var(--ui-flex-direction, row);justify-content:var(--ui-justify-content, center);align-items:var(--ui-align-items, center);background-color:var(--ui-background, var(--sys-background));color:var(--ui-on-background, var(--sys-on-background));border-radius:var(--ui-border-radius, var(--sys-border-radius, 15px));gap:var(--ui-gap, .5rem);text-align:var(--ui-text-align, center);font-size:var(--ui-font-size, 14px);cursor:pointer;text-decoration:none;border:none;position:relative;padding:var(--ui-padding, 0 16px);outline:1px solid var(--ui-outline-color, transparent);outline-offset:var(--ui-outline-offset, -1px);margin:var(--ui-margin, 0);--button-transparency: var(--ui-effect-color, light-dark(#00000025, #ffffff25))}button.radiusTabFormat{border-radius:var(--sys-border-radius, 15px) var(--sys-border-radius, 15px) 0 0}button:hover,button:focus-visible{filter:brightness(1.1) saturate(1.1)}button.icon:hover,button.nofill:hover,button.outlined:hover,button.menu-item:hover,button.menu-item-category:hover,button.sidebar-item:hover,button.sidebar-item-category:hover,button.big:hover,button.big:focus-visible,button.icon:focus-visible,button.nofill:focus-visible{background-color:color-mix(in srgb,var(--btnr-corFundo, hsl(0 0 50)) 10%,transparent 90%)}.expandedClick:hover{cursor:pointer}button.fill{background-color:var(--btnr-corFundo, var(--sys-background));color:var(--btnr-corFrente, var(--sys-on-background));--ui-cor-icone: var(--btnr-corFrente, var(--sys-on-background))}button.nofill{background-color:var(--ui-background, transparent);color:var(--ui-on-background, var(--btnr-corFundo, var(--sys-on-background)))}button.icon{background-color:transparent;--ui-cor-icone: var(--ui-on-background, var(--btnr-corFundo));height:var(--ui-height, 100%);min-width:36px;aspect-ratio:1 / 1;padding:0;display:flex;align-items:center;justify-content:center}button.outlined{outline:1px solid var(--ui-outline-color, var(--sys-outline));color:var(--btnr-corFundo);background-color:transparent}button.menu-item,button.menu-item-category{color:var(--ui-color, var(--sys-on-background));background-color:transparent;border-radius:0;padding:var(--ui-padding, 0 16px);height:var(--ui-height, auto);min-height:var(--ui-min-height, 40px);justify-content:var(--ui-justify-content, flex-start)}button.raised{color:var(--btnr-corFundo);background-color:color-mix(in srgb,var(--sys-background) 40%,transparent 60%);box-shadow:2px 2px 4px var(--button-transparency),inset -1px -1px 1px var(--button-transparency)}button.big{background-color:transparent;color:var(--btnr-corFundo);height:var(--ui-height, 100%);padding:var(--ui-padding, 10px)}button.sidebar-item,button.sidebar-item-category{color:var(--ui-color, var(--sys-on-background));background-color:transparent;border-radius:0;padding:var(--ui-padding, 0 16px);height:var(--ui-height, auto);min-height:var(--ui-min-height, 40px);justify-content:var(--ui-justify-content, flex-start);border-top-right-radius:var(--sys-border-radius);border-bottom-right-radius:var(--sys-border-radius);transition:all .3s;outline:none}.ripple{position:absolute;border-radius:50%;background:var(--button-transparency);transform:scale(0);animation:ripple-animation .7s ease-out;pointer-events:none;z-index:2}@keyframes ripple-animation{to{transform:scale(1.4);opacity:0}}.expandedClick{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden;border-radius:inherit}.icon .expandedClick{transform:scale(1.1)}.disabled,.disabled .expandedClick{pointer-events:none;cursor:default;filter:grayscale(1);opacity:.7}.icone{flex:0;opacity:var(--ui-opacity, 1);font-size:var(--ui-font-size-icone, var(--ui-font-size));color:var(--ui-cor-icone, var(--btnr-corFundo, var(--sys-on-background)))}.iconeCategory{position:absolute;right:10px;transition:transform .3s}.ativo{outline:1px outset var(--sys-high);box-shadow:0 0 1px var(--sys-high),inset 0 0 5px var(--sys-high);border-radius:var(--sys-border-radius)}button.sidebar-item.ativo,button.sidebar-item-category.ativo{outline:none;box-shadow:none;background-color:color-mix(in srgb,var(--btnr-corFundo, hsl(0 0 50)) 10%,transparent 90%)}button.sidebar-item-category.category.ativo .iconeCategory{transform:rotate(-90deg);transition:transform .3s}.carretDown{transform:rotate(-90deg)}\n"] }]
|
|
3390
3390
|
}], ctorParameters: () => [], propDecorators: { botao: [{ type: i0.ViewChild, args: ['botao', { ...{ read: ElementRef }, isSignal: true }] }], rippleEffect: [{ type: i0.ViewChild, args: ['rippleEffect', { ...{ read: ElementRef }, isSignal: true }] }], ripple: [{ type: i0.ViewChild, args: ['ripple', { ...{ read: ElementRef }, isSignal: true }] }], icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: false }] }, { type: i0.Output, args: ["iconeChange"] }], iconeAntes: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeAntes", required: false }] }, { type: i0.Output, args: ["iconeAntesChange"] }], iconeDepois: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeDepois", required: false }] }, { type: i0.Output, args: ["iconeDepoisChange"] }], iconeCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeCategory", required: false }] }, { type: i0.Output, args: ["iconeCategoryChange"] }], clicked: [{ type: i0.Output, args: ["clicked"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], eventPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventPropagation", required: false }] }], radiusTabFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiusTabFormat", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], tipo: [{ type: i0.Input, args: [{ isSignal: true, alias: "tipo", required: false }] }], tema: [{ type: i0.Input, args: [{ isSignal: true, alias: "tema", required: false }] }, { type: i0.Output, args: ["temaChange"] }], classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "classes", required: false }] }], ativo: [{ type: i0.Input, args: [{ isSignal: true, alias: "ativo", required: false }] }] } });
|
|
3391
3391
|
|
|
3392
3392
|
class UiChip {
|
|
@@ -3550,11 +3550,11 @@ class UiDropZone {
|
|
|
3550
3550
|
});
|
|
3551
3551
|
}
|
|
3552
3552
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiDropZone, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3553
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: UiDropZone, isStandalone: true, selector: "ui-drop-zone", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, sobrepor: { classPropertyName: "sobrepor", publicName: "sobrepor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clicked: "clicked", changed: "changed" }, viewQueries: [{ propertyName: "rippleEffect", first: true, predicate: ["rippleEffect"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #dropzonearea class=\"dropzone\" [class.naosobrepor]=\"!sobrepor()\" (dragenter)=\"onDropZone('dragenter',$event)\"\n\t(dragleave)=\"onDropZone('dragleave',$event)\" (drop)=\"onDrop($event)\" (dragover)=\"onDropZone('dragover',$event)\"\n\t(click)=\"onDropZone('click',$event)\" [class.disabled]=\"disabled()\" [class.dragging]=\"isDragging\">\n\t<span #rippleEffect class=\"rippleArea\">\n\t\t<span #ripple class=\"ripple\"></span>\n\t</span>\n
|
|
3553
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: UiDropZone, isStandalone: true, selector: "ui-drop-zone", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, sobrepor: { classPropertyName: "sobrepor", publicName: "sobrepor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clicked: "clicked", changed: "changed" }, viewQueries: [{ propertyName: "rippleEffect", first: true, predicate: ["rippleEffect"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "ripple", first: true, predicate: ["ripple"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #dropzonearea class=\"dropzone\" [class.naosobrepor]=\"!sobrepor()\" (dragenter)=\"onDropZone('dragenter',$event)\"\n\t(dragleave)=\"onDropZone('dragleave',$event)\" (drop)=\"onDrop($event)\" (dragover)=\"onDropZone('dragover',$event)\"\n\t(click)=\"onDropZone('click',$event)\" [class.disabled]=\"disabled()\" [class.dragging]=\"isDragging\">\n\t<span #rippleEffect class=\"rippleArea\">\n\t\t<span #ripple class=\"ripple\"></span>\n\t</span>\n\t<ng-content>\n\t\t<span class=\"dropzone-label\">Arraste e solte aqui</span>\n\t</ng-content>\n</div>", styles: [":host{display:flex;align-items:center;justify-content:center;flex:1;position:relative;overflow:hidden;padding:5px;width:100%;min-height:var(--ui-min-height, 200px);min-width:var(--ui-min-width, 200px)}.dropzone{--minOffset: 1px;padding:2px;display:flex;justify-content:center;align-items:center;border-radius:var(--sys-border-radius, 20px);background-color:var(--sys-primary-15);cursor:pointer;outline:1px dashed var(--sys-primary);outline-offset:var(--minOffset);position:absolute;top:5px;left:5px;width:calc(100% - 10px);height:calc(100% - 10px);overflow:hidden;z-index:1}.dropzone.naosobrepor{z-index:0}.dropzone:not(.naosobrepor):not(.dragging){background-color:transparent;outline:none}.dropzone.disabled{filter:grayscale(1);cursor:auto;pointer-events:none;opacity:.8}.rippleArea{pointer-events:none}.dropzone-label{pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--sys-primary);font-size:.9rem;text-align:center;padding:8px}.dropzone.dragging{outline:3px dashed var(--sys-primary);animation:onDragging .8s infinite ease-in-out}@keyframes onDragging{0%{outline-offset:var(--minOffset)}50%{outline-offset:-8px}to{outline-offset:var(--minOffset)}}.ripple{position:absolute;border-radius:50%;background:rgba(var(--toDark),.2);transform:scale(0);animation:ripple-animation .7s ease-out;pointer-events:none;z-index:2}@keyframes ripple-animation{to{transform:scale(1.4);opacity:0}}.ripple.red{background:#f003}\n"] });
|
|
3554
3554
|
}
|
|
3555
3555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiDropZone, decorators: [{
|
|
3556
3556
|
type: Component,
|
|
3557
|
-
args: [{ selector: 'ui-drop-zone', template: "<div #dropzonearea class=\"dropzone\" [class.naosobrepor]=\"!sobrepor()\" (dragenter)=\"onDropZone('dragenter',$event)\"\n\t(dragleave)=\"onDropZone('dragleave',$event)\" (drop)=\"onDrop($event)\" (dragover)=\"onDropZone('dragover',$event)\"\n\t(click)=\"onDropZone('click',$event)\" [class.disabled]=\"disabled()\" [class.dragging]=\"isDragging\">\n\t<span #rippleEffect class=\"rippleArea\">\n\t\t<span #ripple class=\"ripple\"></span>\n\t</span>\n
|
|
3557
|
+
args: [{ selector: 'ui-drop-zone', template: "<div #dropzonearea class=\"dropzone\" [class.naosobrepor]=\"!sobrepor()\" (dragenter)=\"onDropZone('dragenter',$event)\"\n\t(dragleave)=\"onDropZone('dragleave',$event)\" (drop)=\"onDrop($event)\" (dragover)=\"onDropZone('dragover',$event)\"\n\t(click)=\"onDropZone('click',$event)\" [class.disabled]=\"disabled()\" [class.dragging]=\"isDragging\">\n\t<span #rippleEffect class=\"rippleArea\">\n\t\t<span #ripple class=\"ripple\"></span>\n\t</span>\n\t<ng-content>\n\t\t<span class=\"dropzone-label\">Arraste e solte aqui</span>\n\t</ng-content>\n</div>", styles: [":host{display:flex;align-items:center;justify-content:center;flex:1;position:relative;overflow:hidden;padding:5px;width:100%;min-height:var(--ui-min-height, 200px);min-width:var(--ui-min-width, 200px)}.dropzone{--minOffset: 1px;padding:2px;display:flex;justify-content:center;align-items:center;border-radius:var(--sys-border-radius, 20px);background-color:var(--sys-primary-15);cursor:pointer;outline:1px dashed var(--sys-primary);outline-offset:var(--minOffset);position:absolute;top:5px;left:5px;width:calc(100% - 10px);height:calc(100% - 10px);overflow:hidden;z-index:1}.dropzone.naosobrepor{z-index:0}.dropzone:not(.naosobrepor):not(.dragging){background-color:transparent;outline:none}.dropzone.disabled{filter:grayscale(1);cursor:auto;pointer-events:none;opacity:.8}.rippleArea{pointer-events:none}.dropzone-label{pointer-events:none;-webkit-user-select:none;user-select:none;color:var(--sys-primary);font-size:.9rem;text-align:center;padding:8px}.dropzone.dragging{outline:3px dashed var(--sys-primary);animation:onDragging .8s infinite ease-in-out}@keyframes onDragging{0%{outline-offset:var(--minOffset)}50%{outline-offset:-8px}to{outline-offset:var(--minOffset)}}.ripple{position:absolute;border-radius:50%;background:rgba(var(--toDark),.2);transform:scale(0);animation:ripple-animation .7s ease-out;pointer-events:none;z-index:2}@keyframes ripple-animation{to{transform:scale(1.4);opacity:0}}.ripple.red{background:#f003}\n"] }]
|
|
3558
3558
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], sobrepor: [{ type: i0.Input, args: [{ isSignal: true, alias: "sobrepor", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], changed: [{ type: i0.Output, args: ["changed"] }], rippleEffect: [{ type: i0.ViewChild, args: ['rippleEffect', { ...{ read: ElementRef }, isSignal: true }] }], ripple: [{ type: i0.ViewChild, args: ['ripple', { ...{ read: ElementRef }, isSignal: true }] }] } });
|
|
3559
3559
|
|
|
3560
3560
|
class UiFileList {
|
|
@@ -3576,6 +3576,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
3576
3576
|
args: [{ selector: 'ui-file-list', imports: [UiButton], template: "<div class=\"e-filelist-area\">\n\t@for (file of filesList(); track $index) {\n\t<div class=\"e-filelist-item\">\n\t\t<div class=\"e-filelist-item-icon\">\n\t\t\t<i class=\"bi bi-file-earmark-fill\"></i>\n\t\t\t<div class=\"e-filelist-item-icon-ext\">{{ file.extension?.slice(1) }}</div>\n\t\t</div>\n\t\t<div class=\"e-filelist-item-text\">{{ file.name }}</div>\n\t\t<div class=\"e-filelist-action\">\n\t\t\t@if(!disabled()){\n\t\t\t<ui-button tipo=\"icon\" tema=\"error\" [disabled]=\"disabled()\" (click)=\"onDelete(file)\" icone=\"bi bi-x-lg\">\n\t\t\t</ui-button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\t}\n</div>", styles: [":host{width:100%}.e-filelist-area{display:flex;flex-direction:column;gap:12px;margin:6px 0;width:100%}.e-filelist-item{display:grid;grid-template-columns:1fr auto 1fr;gap:5px}.e-filelist-item-icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;aspect-ratio:1 / 1;border-radius:6px;font-size:1.2rem}.e-filelist-item-icon-ext{display:flex;justify-content:center;align-items:center;font-size:.7rem}.e-filelist-item-text{align-items:center;align-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
3577
3577
|
}], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filesList: [{ type: i0.Input, args: [{ isSignal: true, alias: "filesList", required: false }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
|
|
3578
3578
|
|
|
3579
|
+
class UiFilePreview {
|
|
3580
|
+
arquivo = input.required(/* @ts-ignore */
|
|
3581
|
+
...(ngDevMode ? [{ debugName: "arquivo" }] : /* istanbul ignore next */ []));
|
|
3582
|
+
removivel = input(false, /* @ts-ignore */
|
|
3583
|
+
...(ngDevMode ? [{ debugName: "removivel" }] : /* istanbul ignore next */ []));
|
|
3584
|
+
remover = output();
|
|
3585
|
+
tipoDisplay = computed(() => {
|
|
3586
|
+
const type = (this.arquivo().type ?? '').toLowerCase();
|
|
3587
|
+
const ext = (this.arquivo().extension ?? '').toLowerCase();
|
|
3588
|
+
if (type.includes('image/png') || ext === '.png')
|
|
3589
|
+
return 'png';
|
|
3590
|
+
if (type.includes('image/jpeg') || type.includes('image/jpg') || ext === '.jpg' || ext === '.jpeg')
|
|
3591
|
+
return 'jpg';
|
|
3592
|
+
if (type.includes('image/svg') || ext === '.svg')
|
|
3593
|
+
return 'svg';
|
|
3594
|
+
if (type.includes('application/pdf') || ext === '.pdf')
|
|
3595
|
+
return 'pdf';
|
|
3596
|
+
return 'other';
|
|
3597
|
+
}, /* @ts-ignore */
|
|
3598
|
+
...(ngDevMode ? [{ debugName: "tipoDisplay" }] : /* istanbul ignore next */ []));
|
|
3599
|
+
isImage = computed(() => {
|
|
3600
|
+
const d = this.tipoDisplay();
|
|
3601
|
+
return d === 'png' || d === 'jpg' || d === 'svg';
|
|
3602
|
+
}, /* @ts-ignore */
|
|
3603
|
+
...(ngDevMode ? [{ debugName: "isImage" }] : /* istanbul ignore next */ []));
|
|
3604
|
+
isPdf = computed(() => this.tipoDisplay() === 'pdf', /* @ts-ignore */
|
|
3605
|
+
...(ngDevMode ? [{ debugName: "isPdf" }] : /* istanbul ignore next */ []));
|
|
3606
|
+
onRemover() {
|
|
3607
|
+
this.remover.emit(this.arquivo());
|
|
3608
|
+
}
|
|
3609
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiFilePreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3610
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: UiFilePreview, isStandalone: true, selector: "ui-file-preview", inputs: { arquivo: { classPropertyName: "arquivo", publicName: "arquivo", isSignal: true, isRequired: true, transformFunction: null }, removivel: { classPropertyName: "removivel", publicName: "removivel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remover: "remover" }, ngImport: i0, template: "<div class=\"preview-container\">\n\t@if (isImage()) {\n\t\t<img [src]=\"arquivo().base64\" [alt]=\"arquivo().name\" class=\"preview-img\" />\n\t} @else if (isPdf()) {\n\t\t<embed [src]=\"arquivo().base64\" type=\"application/pdf\" class=\"preview-embed\" />\n\t} @else {\n\t\t<div class=\"preview-other\">\n\t\t\t<i class=\"bi bi-file-earmark\"></i>\n\t\t\t<span class=\"preview-ext\">{{ arquivo().extension.slice(1) }}</span>\n\t\t</div>\n\t}\n\t@if (removivel()) {\n\t\t<button class=\"btn-remover\" (click)=\"onRemover()\" type=\"button\" title=\"Remover\">\n\t\t\t<i class=\"bi bi-x\"></i>\n\t\t</button>\n\t}\n</div>\n", styles: [":host{display:inline-flex;position:relative;height:var(--ui-altura-miniatura, 80px);width:auto;overflow:hidden;border-radius:var(--sys-border-radius, 8px);background-color:var(--sys-primary-15, rgba(0, 0, 0, .06));flex-shrink:0}.preview-container{position:relative;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-img{height:100%;width:auto;object-fit:cover;display:block}.preview-embed{height:100%;width:80px;pointer-events:none}.preview-other{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:4px;min-width:60px}.preview-other i{font-size:1.8rem;color:var(--sys-primary, #666)}.preview-ext{font-size:.65rem;color:var(--sys-primary, #666);font-weight:600;text-transform:uppercase}.btn-remover{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background-color:#0000008c;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:.8rem;opacity:0;transition:opacity .15s ease;z-index:2;line-height:1}.preview-container:hover .btn-remover{opacity:1}@media(hover:none){.btn-remover{opacity:1}}\n"] });
|
|
3611
|
+
}
|
|
3612
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiFilePreview, decorators: [{
|
|
3613
|
+
type: Component,
|
|
3614
|
+
args: [{ selector: 'ui-file-preview', template: "<div class=\"preview-container\">\n\t@if (isImage()) {\n\t\t<img [src]=\"arquivo().base64\" [alt]=\"arquivo().name\" class=\"preview-img\" />\n\t} @else if (isPdf()) {\n\t\t<embed [src]=\"arquivo().base64\" type=\"application/pdf\" class=\"preview-embed\" />\n\t} @else {\n\t\t<div class=\"preview-other\">\n\t\t\t<i class=\"bi bi-file-earmark\"></i>\n\t\t\t<span class=\"preview-ext\">{{ arquivo().extension.slice(1) }}</span>\n\t\t</div>\n\t}\n\t@if (removivel()) {\n\t\t<button class=\"btn-remover\" (click)=\"onRemover()\" type=\"button\" title=\"Remover\">\n\t\t\t<i class=\"bi bi-x\"></i>\n\t\t</button>\n\t}\n</div>\n", styles: [":host{display:inline-flex;position:relative;height:var(--ui-altura-miniatura, 80px);width:auto;overflow:hidden;border-radius:var(--sys-border-radius, 8px);background-color:var(--sys-primary-15, rgba(0, 0, 0, .06));flex-shrink:0}.preview-container{position:relative;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-img{height:100%;width:auto;object-fit:cover;display:block}.preview-embed{height:100%;width:80px;pointer-events:none}.preview-other{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:4px;min-width:60px}.preview-other i{font-size:1.8rem;color:var(--sys-primary, #666)}.preview-ext{font-size:.65rem;color:var(--sys-primary, #666);font-weight:600;text-transform:uppercase}.btn-remover{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background-color:#0000008c;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:.8rem;opacity:0;transition:opacity .15s ease;z-index:2;line-height:1}.preview-container:hover .btn-remover{opacity:1}@media(hover:none){.btn-remover{opacity:1}}\n"] }]
|
|
3615
|
+
}], propDecorators: { arquivo: [{ type: i0.Input, args: [{ isSignal: true, alias: "arquivo", required: true }] }], removivel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removivel", required: false }] }], remover: [{ type: i0.Output, args: ["remover"] }] } });
|
|
3616
|
+
|
|
3617
|
+
class UiMicroGallery {
|
|
3618
|
+
arquivos = input([], /* @ts-ignore */
|
|
3619
|
+
...(ngDevMode ? [{ debugName: "arquivos" }] : /* istanbul ignore next */ []));
|
|
3620
|
+
remover = output();
|
|
3621
|
+
onRemover(arquivo) {
|
|
3622
|
+
this.remover.emit(arquivo);
|
|
3623
|
+
}
|
|
3624
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiMicroGallery, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3625
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: UiMicroGallery, isStandalone: true, selector: "ui-micro-gallery", inputs: { arquivos: { classPropertyName: "arquivos", publicName: "arquivos", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remover: "remover" }, ngImport: i0, template: "<div class=\"gallery\">\n\t@for (arquivo of arquivos(); track arquivo.name) {\n\t\t<ui-file-preview [arquivo]=\"arquivo\" [removivel]=\"true\" (remover)=\"onRemover($event)\">\n\t\t</ui-file-preview>\n\t}\n</div>\n", styles: [":host{display:flex;width:100%;height:100%;overflow-y:auto;--ui-altura-miniatura: 80px}.gallery{display:flex;flex-wrap:wrap;gap:8px;padding:8px;width:100%;align-content:flex-start}\n"], dependencies: [{ kind: "component", type: UiFilePreview, selector: "ui-file-preview", inputs: ["arquivo", "removivel"], outputs: ["remover"] }] });
|
|
3626
|
+
}
|
|
3627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiMicroGallery, decorators: [{
|
|
3628
|
+
type: Component,
|
|
3629
|
+
args: [{ selector: 'ui-micro-gallery', imports: [UiFilePreview], template: "<div class=\"gallery\">\n\t@for (arquivo of arquivos(); track arquivo.name) {\n\t\t<ui-file-preview [arquivo]=\"arquivo\" [removivel]=\"true\" (remover)=\"onRemover($event)\">\n\t\t</ui-file-preview>\n\t}\n</div>\n", styles: [":host{display:flex;width:100%;height:100%;overflow-y:auto;--ui-altura-miniatura: 80px}.gallery{display:flex;flex-wrap:wrap;gap:8px;padding:8px;width:100%;align-content:flex-start}\n"] }]
|
|
3630
|
+
}], propDecorators: { arquivos: [{ type: i0.Input, args: [{ isSignal: true, alias: "arquivos", required: false }] }], remover: [{ type: i0.Output, args: ["remover"] }] } });
|
|
3631
|
+
|
|
3632
|
+
class UiArquivos {
|
|
3633
|
+
arquivos = model([], /* @ts-ignore */
|
|
3634
|
+
...(ngDevMode ? [{ debugName: "arquivos" }] : /* istanbul ignore next */ []));
|
|
3635
|
+
disabled = input(false, /* @ts-ignore */
|
|
3636
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3637
|
+
accept = input('', /* @ts-ignore */
|
|
3638
|
+
...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
|
|
3639
|
+
multiple = input(true, /* @ts-ignore */
|
|
3640
|
+
...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
3641
|
+
changed = output();
|
|
3642
|
+
fileInput = viewChild('fileInput', /* @ts-ignore */
|
|
3643
|
+
...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
|
|
3644
|
+
temArquivos = computed(() => this.arquivos().length > 0, /* @ts-ignore */
|
|
3645
|
+
...(ngDevMode ? [{ debugName: "temArquivos" }] : /* istanbul ignore next */ []));
|
|
3646
|
+
onDropChanged(dropOutput) {
|
|
3647
|
+
if (dropOutput.tipo === 'file' && Array.isArray(dropOutput.data)) {
|
|
3648
|
+
this.arquivos.set(dropOutput.data);
|
|
3649
|
+
this.changed.emit(this.arquivos());
|
|
3650
|
+
}
|
|
3651
|
+
}
|
|
3652
|
+
onDropClicked() {
|
|
3653
|
+
this.fileInput()?.nativeElement.click();
|
|
3654
|
+
}
|
|
3655
|
+
async onFileInputChange(event) {
|
|
3656
|
+
const input = event.target;
|
|
3657
|
+
if (!input.files || input.files.length === 0)
|
|
3658
|
+
return;
|
|
3659
|
+
const newFiles = [];
|
|
3660
|
+
for await (const file of input.files) {
|
|
3661
|
+
const lastIndexOf = file.name.lastIndexOf('.');
|
|
3662
|
+
if (lastIndexOf < 0) {
|
|
3663
|
+
LOG(1, `❌ O arquivo ${file.name} está sem uma extensão.`);
|
|
3664
|
+
continue;
|
|
3665
|
+
}
|
|
3666
|
+
const base64 = await LibUtil.fileReader(file);
|
|
3667
|
+
if (!base64) {
|
|
3668
|
+
LOG(1, `❌ Ocorreu um erro com o arquivo ${file.name}.`);
|
|
3669
|
+
continue;
|
|
3670
|
+
}
|
|
3671
|
+
newFiles.push({
|
|
3672
|
+
base64,
|
|
3673
|
+
name: file.name,
|
|
3674
|
+
size: file.size,
|
|
3675
|
+
extension: file.name.slice(lastIndexOf),
|
|
3676
|
+
type: file.type,
|
|
3677
|
+
lastModifiedIso: new Date(file.lastModified).toISOString(),
|
|
3678
|
+
});
|
|
3679
|
+
}
|
|
3680
|
+
this.arquivos.set(newFiles);
|
|
3681
|
+
this.changed.emit(this.arquivos());
|
|
3682
|
+
input.value = '';
|
|
3683
|
+
}
|
|
3684
|
+
onRemover(arquivo) {
|
|
3685
|
+
this.arquivos.update(list => list.filter(a => a.name !== arquivo.name));
|
|
3686
|
+
this.changed.emit(this.arquivos());
|
|
3687
|
+
}
|
|
3688
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiArquivos, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3689
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: UiArquivos, isStandalone: true, selector: "ui-arquivos", inputs: { arquivos: { classPropertyName: "arquivos", publicName: "arquivos", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { arquivos: "arquivosChange", changed: "changed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input #fileInput type=\"file\" class=\"file-input-hidden\"\n\t[accept]=\"accept()\" [multiple]=\"multiple()\" [disabled]=\"disabled()\"\n\t(change)=\"onFileInputChange($event)\" />\n\n<ui-drop-zone [sobrepor]=\"temArquivos()\" [disabled]=\"disabled()\"\n\t(changed)=\"onDropChanged($event)\" (clicked)=\"onDropClicked()\">\n\t@if (temArquivos()) {\n\t\t<ui-micro-gallery [arquivos]=\"arquivos()\" (remover)=\"onRemover($event)\">\n\t\t</ui-micro-gallery>\n\t}\n</ui-drop-zone>\n", styles: [":host{display:flex;flex:1;min-height:var(--ui-min-height, 200px);min-width:var(--ui-min-width, 200px)}.file-input-hidden{display:none}\n"], dependencies: [{ kind: "component", type: UiDropZone, selector: "ui-drop-zone", inputs: ["value", "disabled", "sobrepor"], outputs: ["valueChange", "clicked", "changed"] }, { kind: "component", type: UiMicroGallery, selector: "ui-micro-gallery", inputs: ["arquivos"], outputs: ["remover"] }] });
|
|
3690
|
+
}
|
|
3691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: UiArquivos, decorators: [{
|
|
3692
|
+
type: Component,
|
|
3693
|
+
args: [{ selector: 'ui-arquivos', imports: [UiDropZone, UiMicroGallery], template: "<input #fileInput type=\"file\" class=\"file-input-hidden\"\n\t[accept]=\"accept()\" [multiple]=\"multiple()\" [disabled]=\"disabled()\"\n\t(change)=\"onFileInputChange($event)\" />\n\n<ui-drop-zone [sobrepor]=\"temArquivos()\" [disabled]=\"disabled()\"\n\t(changed)=\"onDropChanged($event)\" (clicked)=\"onDropClicked()\">\n\t@if (temArquivos()) {\n\t\t<ui-micro-gallery [arquivos]=\"arquivos()\" (remover)=\"onRemover($event)\">\n\t\t</ui-micro-gallery>\n\t}\n</ui-drop-zone>\n", styles: [":host{display:flex;flex:1;min-height:var(--ui-min-height, 200px);min-width:var(--ui-min-width, 200px)}.file-input-hidden{display:none}\n"] }]
|
|
3694
|
+
}], propDecorators: { arquivos: [{ type: i0.Input, args: [{ isSignal: true, alias: "arquivos", required: false }] }, { type: i0.Output, args: ["arquivosChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
3695
|
+
|
|
3579
3696
|
class UiSelect {
|
|
3580
3697
|
elementRef = inject(ElementRef);
|
|
3581
3698
|
value = model(/* @ts-ignore */
|
|
@@ -8538,5 +8655,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
|
|
|
8538
8655
|
* Generated bundle index. Do not edit.
|
|
8539
8656
|
*/
|
|
8540
8657
|
|
|
8541
|
-
export { BaseFieldsForm, BaseFieldsValues, CampoDe, FieldsGeneric, FiltroDe, FormAction, FormFilter, FormNoAction, FormatedValues, Formulario, GRID_CONFIG_DEFAULTS, GRID_PARAMS_TOKEN, GridCell, IField, IGridFilterType, IRegraTipo, LibUtil, MkGrid, PAGINATION_OPTIONS, Regra, ScreenMode, SingleValues, UiAccordion, UiAvatar, UiBadge, UiBreadcrumb, UiButton, UiCard, UiCheckBox, UiChip, UiDivider, UiDrawer, UiDropZone, UiEmptyState, UiFileList, UiListErrors, UiLoading, UiMenu, UiModalOutlet, UiModalService, UiPagination, UiProcurar, UiProgress, UiRating, UiSelect, UiSlide, UiStepper, UiTabs, UiTag, UiTimeline, UiToastContainer, UiToastService, UiTooltip, UiTree };
|
|
8658
|
+
export { BaseFieldsForm, BaseFieldsValues, CampoDe, FieldsGeneric, FiltroDe, FormAction, FormFilter, FormNoAction, FormatedValues, Formulario, GRID_CONFIG_DEFAULTS, GRID_PARAMS_TOKEN, GridCell, IField, IGridFilterType, IRegraTipo, LibUtil, MkGrid, PAGINATION_OPTIONS, Regra, ScreenMode, SingleValues, UiAccordion, UiArquivos, UiAvatar, UiBadge, UiBreadcrumb, UiButton, UiCard, UiCheckBox, UiChip, UiDivider, UiDrawer, UiDropZone, UiEmptyState, UiFileList, UiFilePreview, UiListErrors, UiLoading, UiMenu, UiMicroGallery, UiModalOutlet, UiModalService, UiPagination, UiProcurar, UiProgress, UiRating, UiSelect, UiSlide, UiStepper, UiTabs, UiTag, UiTimeline, UiToastContainer, UiToastService, UiTooltip, UiTree };
|
|
8542
8659
|
//# sourceMappingURL=masterkeymaterial-ui.mjs.map
|