@qaecy/cue-ui 0.0.51 → 0.0.53

package/906.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkcue_ui=self.webpackChunkcue_ui||[]).push([[906],{5448(M,f,i){i.d(f,{L:()=>g});var a=i(7705),o=i(2245),l=i(5547);const m=["*"];let g=(()=>{class s{fontSize=(0,a.hFB)("m");italic=(0,a.hFB)(!1);noWrap=(0,a.hFB)(!0);static \u0275fac=function(c){return new(c||s)};static \u0275cmp=l.VBU({type:s,selectors:[["cue-button-label"]],inputs:{fontSize:[1,"fontSize"],italic:[1,"italic"],noWrap:[1,"noWrap"]},ngContentSelectors:m,decls:3,vars:3,consts:[[3,"size","italic","noWrap"]],template:function(c,d){1&c&&(l.NAR(),l.j41(0,"div")(1,"cue-typography",0),l.SdG(2),l.k0s()()),2&c&&(l.R7$(),l.Y8G("size",d.fontSize())("italic",d.italic())("noWrap",d.noWrap()))},dependencies:[o.Typography],styles:["div[_ngcontent-%COMP%]{transform:translateY(.05em)}"]})}return s})()},2014(M,f,i){i.d(f,{z:()=>g});var a=i(7705),o=i(2271),l=i(5547);const m=["*"];let g=(()=>{class s{justify=(0,a.hFB)("start");size=(0,a.hFB)("l");widthStyle=(0,o.EW)(()=>`var(--cue-button-label-padding-${this.size()}-x)`);static \u0275fac=function(c){return new(c||s)};static \u0275cmp=l.VBU({type:s,selectors:[["cue-button-padder"]],inputs:{justify:[1,"justify"],size:[1,"size"]},ngContentSelectors:m,decls:2,vars:4,template:function(c,d){1&c&&(l.NAR(),l.rj2(0,"div"),l.SdG(1),l.eux()),2&c&&l.xc7("justify-content",d.justify())("min-width",d.widthStyle())},styles:["div[_ngcontent-%COMP%]{display:flex;align-items:center;min-height:1px}"]})}return s})()},5971(M,f,i){i.d(f,{$:()=>c});var a=i(9769),o=i(7705),l=i(2271),m=i(7089),g=i(2403),s=i(5547);const v=["buttonElement"],e=["*"];let c=(()=>{class d{variant=(0,o.hFB)("primary");size=(0,o.hFB)("m");tooltip=(0,o.hFB)("");disabled=(0,o.hFB)(!1);selected=(0,o.geq)(!1);toggleButton=(0,o.hFB)(!1);loading=(0,o.hFB)(!1);fitParentWidth=(0,o.hFB)(!1);noWrap=(0,o.hFB)(!0);buttonElement=o.ebz.required("buttonElement");getStyles=(0,l.EW)(()=>[`\n      padding: 0 var(--cue-button-${this.size()}-padding-x);\n\n      --focus-color: var(--cue-button-${this.variant()}-focus-color);\n      --cue-button-border-color: var(--cue-button-${this.variant()}-border-color);\n      color: var(--cue-button-${this.variant()}-foreground);\n      --background-color: var(--cue-button-${this.variant()}-background);\n\n      --cue-icon-width: var(--cue-button-${this.size()}-icon-width);\n      --button-height: var(--cue-button-${this.size()}-height);\n      --cue-button-border-radius: var(--cue-button-border-radius, 9999px);\n      --button-label-padding-x: var(--cue-button-${this.size()}-label-padding-x);\n    `,this.disabled()?`\n      color: var(--cue-button-${this.variant()}-disabled-foreground);\n      --cue-button-border-color: var(--cue-button-${this.variant()}-disabled-border-color);\n      --background-color: var(--cue-button-${this.variant()}-disabled-background);\n    `:""].join(""));handleClick(b){b.detail>0&&this.buttonElement().nativeElement.blur(),this.toggleButton()&&(b.stopPropagation(),this.selected.set(!this.selected()))}static \u0275fac=function(h){return new(h||d)};static \u0275cmp=s.VBU({type:d,selectors:[["cue-button"]],viewQuery:function(h,p){1&h&&s.wEZ(p.buttonElement,v,5),2&h&&s.NyB()},inputs:{variant:[1,"variant"],size:[1,"size"],tooltip:[1,"tooltip"],disabled:[1,"disabled"],selected:[1,"selected"],toggleButton:[1,"toggleButton"],loading:[1,"loading"],fitParentWidth:[1,"fitParentWidth"],noWrap:[1,"noWrap"]},outputs:{selected:"selectedChange"},ngContentSelectors:e,decls:3,vars:18,consts:[["buttonElement",""],["tooltipSize","small",3,"click","disabled","cueTooltip","tooltipPlacement","cuePulse"]],template:function(h,p){1&h&&(s.NAR(),s.j41(0,"button",1,0),s.bIt("click",function(E){return p.handleClick(E)}),s.SdG(2),s.k0s()),2&h&&(s.Aen(p.getStyles()),s.xc7("white-space",p.noWrap()?"nowrap":"normal")("flex-basis",p.noWrap()?null:"auto")("min-width",p.noWrap()?null:"fit-content"),s.AVh("selected",p.selected())("ghost","ghost"===p.variant())("fit-parent-width",p.fitParentWidth()),s.Y8G("disabled",p.disabled())("cueTooltip",p.tooltip())("tooltipPlacement","top")("cuePulse",p.loading()))},dependencies:[a.MD,m.d,g.V],styles:['[_nghost-%COMP%]:has(.fit-parent-width){display:contents}@keyframes _ngcontent-%COMP%_pulse-border{0%{box-shadow:0 0 0 0 var(--focus-color)}50%{box-shadow:0 0 0 8px transparent}to{box-shadow:0 0 0 0 transparent}}button[_ngcontent-%COMP%]{min-width:0;pulse-border-radius:var(--cue-button-border-radius);appearance:none;padding:0;font:inherit;border:var(--cue-button-border-width) var(--cue-button-border-style) var(--cue-button-border-color);display:flex;justify-content:space-between;align-items:center;gap:var(--cue-button-gap);min-height:var(--button-height);height:auto;background-color:var(--background-color);border-radius:var(--cue-button-border-radius, 9999px);margin:3px;position:relative}button[style*="white-space: normal"][_ngcontent-%COMP%]{border-radius:30px!important;padding:10px!important}button.fit-parent-width[_ngcontent-%COMP%]{width:100%;min-width:0;margin-inline:0}button[_ngcontent-%COMP%]:not(.fit-parent-width){min-width:fit-content;width:auto}button[_ngcontent-%COMP%]:focus{outline:none}button[_ngcontent-%COMP%]:hover:not(:disabled), button[_ngcontent-%COMP%]:focus-within:not(:disabled){outline:1px solid var(--focus-color);outline-offset:2px;cursor:pointer}button.selected[_ngcontent-%COMP%]{outline:1px solid currentColor!important;outline-offset:2px;margin:3px}button.ghost[_ngcontent-%COMP%]:not(.selected){border:none}']})}return d})()},804(M,f,i){i.d(f,{ChipInput:()=>E});var a=i(7705),o=i(5802),l=i(9417),m=i(2245),g=i(5381),s=i(29),v=i(2339),e=i(5547);const c=["inputField"];function d(u,C){1&u&&e.EFF(0," * ")}function P(u,C){if(1&u&&(e.j41(0,"cue-typography",2),e.EFF(1),e.nVh(2,d,1,0),e.k0s()),2&u){const t=e.XpG();e.Y8G("size",t.size()),e.R7$(),e.SpI(" ",t.label()," "),e.R7$(),e.vxM(t.required()?2:-1)}}function b(u,C){if(1&u){const t=e.RV6();e.j41(0,"button",11),e.bIt("click",function(n){o.eBV(t);const _=e.XpG().$index;return e.XpG().removeChip(_),o.Njj(n.stopPropagation())}),e.nrm(1,"cue-svg-icon",12),e.k0s()}if(2&u){const t=e.XpG(2);e.Y8G("disabled",t.disabled)}}function h(u,C){if(1&u){const t=e.RV6();e.j41(0,"div",8),e.bIt("mouseenter",function(){const n=o.eBV(t).$index,_=e.XpG();return o.Njj(_.hoveredChip.set(n))})("mouseleave",function(){o.eBV(t);const n=e.XpG();return o.Njj(n.hoveredChip.set(null))}),e.j41(1,"cue-chip",9),e.bIt("click",function(){const n=o.eBV(t).$implicit,_=e.XpG();return o.Njj(_.clickedChip.emit(n))}),e.EFF(2),e.k0s(),e.nVh(3,b,2,1,"button",10),e.k0s()}if(2&u){const t=C.$implicit,r=C.$index,n=e.XpG();e.R7$(),e.Y8G("selected",!0)("disabled",n.disabled)("passive",!0)("variant",n.variant()),e.R7$(),e.SpI(" ",n.labelMap()[t]||t," "),e.R7$(),e.vxM(n.allowDelete()&&n.hoveredChip()===r?3:-1)}}function p(u,C){if(1&u){const t=e.RV6();e.j41(0,"input",13,0),e.bIt("keydown",function(n){o.eBV(t);const _=e.XpG();return o.Njj(_.onKeyDown(n))})("focus",function(){o.eBV(t);const n=e.XpG();return o.Njj(n.isFocused=!0)})("blur",function(){o.eBV(t);const n=e.XpG();return o.Njj(n.onBlur())})("input",function(){o.eBV(t);const n=e.XpG();return o.Njj(n.validationError.set(void 0))}),e.mxI("ngModelChange",function(n){o.eBV(t);const _=e.XpG();return e.DH7(_.inputValue,n)||(_.inputValue=n),o.Njj(n)}),e.k0s()}if(2&u){const t=e.XpG();e.Y8G("placeholder",t.placeholder()),e.R50("ngModel",t.inputValue)}}function y(u,C){if(1&u&&(e.j41(0,"cue-typography",7),e.EFF(1),e.k0s()),2&u){const t=e.XpG();e.R7$(),e.JRh(t.validationError()??t.error())}}let E=(()=>{class u{values=(0,a.geq)([]);labelMap=(0,a.hFB)({});label=(0,a.hFB)("");placeholder=(0,a.hFB)("Add item...");error=(0,a.hFB)(void 0);required=(0,a.hFB)(!1);size=(0,a.hFB)("m");variant=(0,a.hFB)("secondary");allowAdd=(0,a.hFB)(!0);allowDelete=(0,a.hFB)(!0);allowInternalAdd=(0,a.hFB)(!0);validator=(0,a.hFB)(void 0);validationErrorMessage=(0,a.hFB)(void 0);clickedChip=(0,a.CGW)();chipRemoved=(0,a.CGW)();chipAdded=(0,a.CGW)();isFocused=!1;disabled=!1;inputValue=(0,o.vPA)("");hoveredChip=(0,o.vPA)(null);validationError=(0,o.vPA)(void 0);inputField;onChange=t=>{};onTouched=()=>{};writeValue(t){this.values.set(t||[])}registerOnChange(t){this.onChange=t}registerOnTouched(t){this.onTouched=t}setDisabledState(t){this.disabled=t}focusInput(){this.allowAdd()&&!this.disabled&&this.inputField?.nativeElement&&this.inputField.nativeElement.focus()}onKeyDown(t){const n=t.target.value.trim();"Enter"===t.key&&n?(this.addChip(n),t.preventDefault()):"Backspace"===t.key&&!n&&this.values().length>0&&(this.removeChip(this.values().length-1),t.preventDefault())}addChip(t){if(!t)return;const r=this.validator();if(!r||r.test(t)){if(this.validationError.set(void 0),this.chipAdded.emit(t),this.allowInternalAdd()&&!this.values().includes(t)){const n=[...this.values(),t];this.values.set(n),this.onChange(n)}this.inputValue.set("")}else this.validationError.set(this.validationErrorMessage()??`Invalid value: ${t}`)}removeChip(t){if(this.allowDelete()&&!this.disabled){const r=this.values()[t],n=this.values().filter((_,D)=>D!==t);this.values.set(n),this.onChange(n),void 0!==r&&this.chipRemoved.emit(r)}}onBlur(){this.isFocused=!1,this.onTouched();const t=this.inputValue().trim();t&&this.allowAdd()&&this.addChip(t)}static \u0275fac=function(r){return new(r||u)};static \u0275cmp=e.VBU({type:u,selectors:[["cue-chip-input"]],viewQuery:function(r,n){if(1&r&&e.GBs(c,5),2&r){let _;e.mGM(_=e.lsd())&&(n.inputField=_.first)}},inputs:{values:[1,"values"],labelMap:[1,"labelMap"],label:[1,"label"],placeholder:[1,"placeholder"],error:[1,"error"],required:[1,"required"],size:[1,"size"],variant:[1,"variant"],allowAdd:[1,"allowAdd"],allowDelete:[1,"allowDelete"],allowInternalAdd:[1,"allowInternalAdd"],validator:[1,"validator"],validationErrorMessage:[1,"validationErrorMessage"]},outputs:{values:"valuesChange",clickedChip:"clickedChip",chipRemoved:"chipRemoved",chipAdded:"chipAdded"},features:[e.Jv_([{provide:l.kq,useExisting:(0,o.Rfq)(()=>u),multi:!0}])],decls:8,vars:9,consts:[["inputField",""],[1,"form-field",3,"click"],[1,"label",3,"size"],[1,"chip-container"],["align","center","gap","s","wrap","wrap"],[1,"chip-wrapper"],["type","text",1,"input",3,"placeholder","ngModel"],["size","s",1,"error-text"],[1,"chip-wrapper",3,"mouseenter","mouseleave"],["size","s",3,"click","selected","disabled","passive","variant"],["type","button",1,"delete-button",3,"disabled"],["type","button",1,"delete-button",3,"click","disabled"],["name","close","size","xs"],["type","text",1,"input",3,"keydown","focus","blur","input","ngModelChange","placeholder","ngModel"]],template:function(r,n){1&r&&(e.j41(0,"div",1),e.bIt("click",function(){return n.focusInput()}),e.nVh(1,P,3,3,"cue-typography",2),e.j41(2,"div",3)(3,"cue-flexcontainer",4),e.Z7z(4,h,4,6,"div",5,e.fX1),e.nVh(6,p,2,2,"input",6),e.k0s()(),e.nVh(7,y,2,1,"cue-typography",7),e.k0s()),2&r&&(e.HbH("size-"+n.size()),e.AVh("focused",!0),e.R7$(),e.vxM(n.label()?1:-1),e.R7$(),e.xc7("padding-top",n.label()?n.allowDelete()?"18px":"22px":"0"),e.R7$(2),e.Dyx(n.values()),e.R7$(2),e.vxM(n.allowAdd()&&!n.disabled?6:-1),e.R7$(),e.vxM(n.validationError()??n.error()?7:-1))},dependencies:[m.Typography,g.n,s.A,v.v,l.YN,l.me,l.BC,l.vS],styles:[".form-field[_ngcontent-%COMP%]{position:relative;min-height:40px}.chip-container[_ngcontent-%COMP%]{width:100%;border-bottom:1px solid var(--cue-input-border-bottom-color);padding-bottom:4px}.chip-wrapper[_ngcontent-%COMP%]{display:flex;align-items:center;position:relative;padding:2px}.delete-button[_ngcontent-%COMP%]{position:absolute;top:-4px;right:-4px;background:var(--cue-chip-delete-background-color);border:none;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cue-chip-delete-icon-color);font-size:10px;z-index:1}.delete-button[_ngcontent-%COMP%]:hover{background:var(--cue-chip-delete-hover-background-color);transform:scale(1.1)}.delete-button[_ngcontent-%COMP%]:disabled{opacity:.5;cursor:not-allowed;transform:none}.input[_ngcontent-%COMP%]{color:var(--cue-input-value-color);border:none;background:none;outline:none;font-family:var(--cue-font-family);min-width:120px;flex:1}.size-xs[_ngcontent-%COMP%]   .input[_ngcontent-%COMP%]{padding:var(--cue-input-xs-padding);font-size:var(--cue-input-xs-font-size)}.size-s[_ngcontent-%COMP%]   .input[_ngcontent-%COMP%]{padding:var(--cue-input-s-padding);font-size:var(--cue-input-s-font-size)}.size-m[_ngcontent-%COMP%]   .input[_ngcontent-%COMP%]{padding:var(--cue-input-m-padding);font-size:var(--cue-input-m-font-size)}.size-l[_ngcontent-%COMP%]   .input[_ngcontent-%COMP%]{padding:var(--cue-input-l-padding);font-size:var(--cue-input-l-font-size)}.input[_ngcontent-%COMP%]::placeholder{color:var(--cue-input-placeholder-color);font-family:var(--cue-font-family)}.input[_ngcontent-%COMP%]:-webkit-autofill, .input[_ngcontent-%COMP%]:-webkit-autofill:hover, .input[_ngcontent-%COMP%]:-webkit-autofill:focus{-webkit-box-shadow:0 0 0px 1000px transparent inset;-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:var(--cue-input-value-color)}.label[_ngcontent-%COMP%]{position:absolute;left:0;pointer-events:none;z-index:1;text-align:left;width:100%;color:var(--cue-input-value-color)}.size-xs[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{top:var(--cue-input-xs-label-focused-top);font-size:var(--cue-input-xs-label-focused-font-size)}.size-s[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{top:var(--cue-input-s-label-focused-top);font-size:var(--cue-input-s-label-focused-font-size)}.size-m[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{top:var(--cue-input-m-label-focused-top);font-size:var(--cue-input-m-label-focused-font-size)}.size-l[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%]{top:var(--cue-input-l-label-focused-top);font-size:var(--cue-input-l-label-focused-font-size)}.error-text[_ngcontent-%COMP%]{color:var(--cue-error);margin-top:4px;min-height:18px}.form-field[_ngcontent-%COMP%]:focus-within   .chip-container[_ngcontent-%COMP%]{border-bottom-color:var(--cue-primary, #007bff)}"],changeDetection:0})}return u})()},2403(M,f,i){i.d(f,{V:()=>m});var a=i(7705),o=i(5547),l=i(5802);let m=(()=>{class g{el=(0,l.WQX)(o.aKT);renderer=(0,l.WQX)(o.sFG);cuePulse=(0,a.hFB)(!1);cuePulseColor=(0,a.hFB)("");cuePulseMode=(0,a.hFB)("border");activeClass="";constructor(){this.ensureGlobalStyles()}onPulseChanged=(0,l.QZP)(()=>{const v=this.cuePulse(),e=this.cuePulseColor(),c=this.cuePulseMode(),d=this.el.nativeElement;if(this.activeClass&&(this.renderer.removeClass(d,this.activeClass),this.activeClass=""),this.renderer.removeStyle(d,"--cue-pulse-color"),this.renderer.removeStyle(d,"border-radius"),v){const P="text"===c?"cue-pulse-text":"cue-pulse-border";this.renderer.addClass(d,P),this.activeClass=P,e&&this.renderer.setStyle(d,"--cue-pulse-color",e),"border"===c&&setTimeout(()=>{const b=d.firstElementChild;if(b){const h=getComputedStyle(b).borderRadius;h&&"0px"!==h&&this.renderer.setStyle(d,"border-radius",h)}})}});ngOnDestroy(){const v=this.el.nativeElement;this.activeClass&&this.renderer.removeClass(v,this.activeClass),this.renderer.removeStyle(v,"border-radius")}ensureGlobalStyles(){const v="cue-pulse-global-styles";if(document.getElementById(v))return;const e=document.createElement("style");e.id=v,e.textContent="\n      @keyframes cue-pulse-border-anim {\n        0% {\n          box-shadow: 0 0 0 0 var(--cue-pulse-color, currentColor);\n        }\n        70% {\n          box-shadow: 0 0 0 8px transparent;\n        }\n        100% {\n          box-shadow: 0 0 0 0 transparent;\n        }\n      }\n\n      @keyframes cue-pulse-text-anim {\n        0%, 100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.4;\n        }\n      }\n\n      .cue-pulse-border {\n        animation: cue-pulse-border-anim 1.5s infinite ease-in-out;\n      }\n\n      .cue-pulse-text {\n        animation: cue-pulse-text-anim 1.5s infinite ease-in-out;\n      }\n    ",document.head.appendChild(e)}static \u0275fac=function(e){return new(e||g)};static \u0275dir=o.FsC({type:g,selectors:[["","cuePulse",""]],inputs:{cuePulse:[1,"cuePulse"],cuePulseColor:[1,"cuePulseColor"],cuePulseMode:[1,"cuePulseMode"]}})}return g})()}}]);