@basestack/flags-wc 0.0.2 → 0.0.3

package/dist/components/feature-flag-feedback-modal.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as s,Host as r,transformTag as i}from"@stencil/core/internal/client";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.feedbackSent=a(this,"feedbackSent",7),this.closed=a(this,"closed",7),this.theme="light",this.apiEndpoint="https://flags-api.basestack.co/v1/flags/feedback",this.open=!1,this.heading="Feedback",this.moodPrompt="How are you feeling after using this feature?",this.ratingPrompt="How satisfied are you with this feature?",this.feedbackLabel="Share your feedback",this.feedbackPlaceholder="Anything else you’d like to add?",this.submitLabel="Submit feedback",this.privacyPolicyUrl="https://basestack.co/legal/privacy",this.privacyPolicyLabel="To keep your data safe, avoid sharing personal or sensitive details.",this.privacyPolicyLinkLabel="Learn more",this.closeLabel="Close",this.mood="HAPPY",this.rating=4,this.description="",this.isSubmitting=!1,this.closeModal=()=>{this.isSubmitting||(this.open=!1,this.closed.emit())}}handleKeydown(e){"Escape"===e.key&&this.open&&this.closeModal()}setMood(e){this.mood=e}setRating(e){this.rating=e}async submitFeedback(e){if(e.preventDefault(),!this.flagKey)return void(this.error="Missing flag key for feedback submission.");if(!this.projectKey&&!this.environmentKey)return void(this.error="Provide either project-key or environment-key.");this.isSubmitting=!0,this.error=void 0;const t={flagKey:this.flagKey,mood:this.mood,rating:this.rating,description:this.description.trim()},a=""+this.apiEndpoint.replace(/\/$/,"");try{const e=await fetch(a,{method:"POST",headers:{"Content-Type":"application/json",...this.projectKey?{"x-project-key":this.projectKey}:{},...this.environmentKey?{"x-environment-key":this.environmentKey}:{}},body:JSON.stringify(t)});if(!e.ok)throw Error(`Failed to send feedback (${e.status})`);this.feedbackSent.emit(t),this.description="",this.rating=4,this.mood="HAPPY",this.open=!1}catch(e){this.error=e instanceof Error?e.message:"Unable to send feedback"}finally{this.isSubmitting=!1}}renderMoodSelector(){return s("div",{class:"section"},s("p",{class:"section-title"},this.moodPrompt),s("div",{class:"options-container"},[{value:"VERY_SAD",label:"Dissatisfied",icon:"😭"},{value:"SAD",label:"Sad",icon:"😟"},{value:"NEUTRAL",label:"Neutral",icon:"😐"},{value:"HAPPY",label:"Happy",icon:"😊"},{value:"VERY_HAPPY",label:"Satisfied",icon:"🤩"}].map((e=>s("button",{type:"button",class:{"option option-mood":!0,"option-active":this.mood===e.value},onClick:()=>this.setMood(e.value),"aria-pressed":this.mood===e.value},s("span",{class:"option-icon","aria-hidden":"true"},e.icon),s("span",{class:"sr-only"},e.label))))))}renderRatingSelector(){return s("div",{class:"section"},s("p",{class:"section-title"},this.ratingPrompt),s("div",{class:"options-container"},[1,2,3,4,5].map((e=>s("button",{type:"button",class:{"option option-rating":!0,"option-active":this.rating===e},onClick:()=>this.setRating(e),"aria-pressed":this.rating===e},e)))))}render(){return s(r,{key:"0addc17f1548dc629774d177a7128843509064d0"},s("div",{key:"4070fd246c13f2cd01fc04f5cdc9d969edf44fe4",class:{modal:!0,open:this.open},role:"dialog","aria-modal":"true","aria-hidden":!this.open,"aria-label":this.heading,onClick:e=>e.stopPropagation()},s("header",{key:"45e101d37c79ddfb8b9c8dc1cb195bcd1abe6c40",class:"modal-header"},s("p",{key:"af55ddd65641fa2218b7a56c2d544493f5746457",class:"modal-header-label"},this.featureName??this.flagKey),s("h2",{key:"d32d5fa88bbd667327ab2403aa9d6d23f27bdc3b",class:"modal-header-title"},this.heading),s("button",{key:"4a36b5a79d4eeb4d6338244b2aa95d7510a4faa3",class:"modal-close-button",type:"button",onClick:this.closeModal,"aria-label":this.closeLabel},s("svg",{key:"41fbd4f1b83b8694b416e21c1b9365bcf09d64fe",xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"inherit","aria-hidden":"true"},s("path",{key:"0410a21ba1a56f361bf6fdb47ade920693aa3ca5",d:"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"})))),s("form",{key:"a0423604bc363d5dbd1b422e9de7b38f4547fdf3",class:"content-container",onSubmit:e=>this.submitFeedback(e)},s("div",{key:"dad03557b724e36189e22b51a3bdf963c58ad012",class:"content-wrapper"},this.renderMoodSelector(),this.renderRatingSelector(),s("div",{key:"620b7b1874f0f76102881a349453945455f6cff6",class:"section"},s("label",{key:"5f54d1005bff27d7dc1c54d39ecac62df1e2dab6",class:"section-title",htmlFor:"feedback-text"},this.feedbackLabel),s("textarea",{key:"c14e06ef8000654ffa6ef31f12fc954362d41af3",class:"feedback-input",id:"feedback-text",name:"feedback",value:this.description,placeholder:this.feedbackPlaceholder,onInput:e=>{this.description=e.target.value}}),this.error?s("p",{class:"label-text text-danger"},this.error):null,s("p",{key:"9fe7b463d2787f8c2a64da101aa9ee2fea3daa14",class:"label-text"},this.privacyPolicyLabel," ",s("a",{key:"db22738b7a803be32b46501f9f98746319264ec7",href:this.privacyPolicyUrl,class:"text-link"},this.privacyPolicyLinkLabel),"."))),s("div",{key:"06e18662386f40c0a094a345533da3326adb915a",class:"content-footer"},s("button",{key:"6ea1e0a2972d0d4d603908fb70b4baea2004faea",class:"submit-button",type:"submit",disabled:this.isSubmitting},this.isSubmitting?"Sending…":this.submitLabel)))),s("button",{key:"582935da1e6d52e5bd9c209c135494bc873b8bc0",type:"button",class:{overlay:!0,open:this.open},"aria-label":this.closeLabel,onClick:this.closeModal,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.closeModal())}}))}static get style(){return'*{box-sizing:border-box;margin:0}:host{--bs-font-family:"Roboto", system-ui, sans-serif;--bs-font-xxLarge:24px;--bs-font-xLarge:20px;--bs-font-large:18px;--bs-font-medium:16px;--bs-font-small:14px;--bs-font-xSmall:12px;--bs-spacing-s1:0.25rem;--bs-spacing-s2:0.5rem;--bs-spacing-s3:0.75rem;--bs-spacing-s4:1rem;--bs-spacing-s5:1.25rem;--bs-spacing-s6:1.875rem;--bs-spacing-s7:2.5rem;--bs-spacing-s8:3.125rem;--bs-white:#ffffff;--bs-black:#000000;--bs-gray-50:#f6f6f6;--bs-gray-100:#eeeeee;--bs-gray-200:#e2e2e2;--bs-gray-300:#cbcbcb;--bs-gray-400:#afafaf;--bs-gray-500:#757575;--bs-gray-600:#545454;--bs-gray-700:#333333;--bs-gray-800:#1f1f1f;--bs-gray-900:#141414;--bs-blue-50:#eff3fe;--bs-blue-100:#d4e2fc;--bs-blue-300:#5b91f5;--bs-blue-400:#276ef1;--bs-blue-500:#1e54b7;--bs-green-50:#e6f2ed;--bs-green-100:#addec9;--bs-green-500:#03703c;--bs-green-600:#03582f;--bs-red-300:#e85c4a;--bs-red-400:#e11900;--bs-primary:var(--bs-blue-400);--bs-danger:var(--bs-red-400);--bs-bg-primary:var(--bs-white);--bs-bg-secondary:var(--bs-gray-50);--bs-text-primary:var(--bs-black);--bs-text-secondary:var(--bs-gray-500);--bs-text-white:var(--bs-white);--bs-primary-button-bg:var(--bs-primary);--bs-primary-button-text:var(--bs-white);--bs-outline-button-text:var(--bs-text-primary);--bs-outline-button-border:var(--bs-gray-200);--bs-neutral-button-bg:"transparent";--bs-neutral-button-text:var(--bs-black);--bs-neutral-button-bg-hover:var(--bs-gray-100);--bs-neutral-button-bg-active:var(--bs-gray-50);--bs-default-tag-bg:var(--bs-gray-200);--bs-default-tag-text:var(--bs-text-primary);--bs-success-tag-bg:var(--bs-green-50);--bs-success-tag-text:var(--bs-green-500);--bs-option-bg-selected:var(--bs-blue-50);--bs-input-border-focus:var(--bs-black);--bs-border-light:var(--bs-gray-50);--bs-border-dark:var(--bs-gray-100);--bs-shadow-sm:rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;--bs-shadow-md:rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;font-family:var(--bs-font-family), serif;font-size:var(--bs-font-small);color:var(--bs-text-primary);line-height:1.4}:host([theme="dark"]){--bs-primary:var(--bs-blue-300);--bs-danger:var(--bs-red-300);--bs-bg-primary:var(--bs-gray-800);--bs-bg-secondary:var(--bs-gray-700);--bs-text-primary:var(--bs-gray-200);--bs-text-secondary:var(--bs-gray-400);--bs-text-white:var(--bs-white);--bs-primary-button-bg:var(--bs-blue-400);--bs-primary-button-text:var(--bs-white);--bs-outline-button-text:var(--bs-gray-300);--bs-outline-button-border:var(--bs-gray-600);--bs-neutral-button-bg:"transparent";--bs-neutral-button-text:var(--bs-gray-300);--bs-neutral-button-bg-hover:var(--bs-gray-600);--bs-neutral-button-bg-active:var(--bs-gray-700);--bs-default-tag-bg:var(--bs-gray-600);--bs-default-tag-text:var(--bs-text-primary);--bs-success-tag-bg:var(--bs-green-100);--bs-success-tag-text:var(--bs-green-600);--bs-option-bg-selected:rgba(91, 145, 245, 0.2);--bs-input-border-focus:var(--bs-gray-500);--bs-border-light:var(--bs-gray-600);--bs-border-dark:var(--bs-gray-700)}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.35);opacity:0;pointer-events:none;transition:opacity 0.2s ease;border:none;padding:0;z-index:999}.overlay.open{opacity:1;pointer-events:auto}.modal{z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%, -48%) scale(0.98);opacity:0;pointer-events:none;border-radius:8px;box-shadow:0 30px 70px rgba(0, 0, 0, 0.25);width:min(420px, 94vw);transition:opacity 0.2s ease,     transform 0.22s ease;overflow:hidden;background-color:var(--bs-bg-primary)}.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%, -50%) scale(1)}.modal-large{width:min(980px, 92vw)}.modal-header{position:relative;display:flex;flex-direction:column;padding:var(--bs-spacing-s5);border-bottom:1px solid var(--bs-border-dark);gap:var(--bs-spacing-s2)}.modal-header-label{margin:0;color:var(--bs-text-secondary);font-size:var(--bs-font-small);line-height:1.2}.modal-header-title{margin:0;font-weight:700;font-size:var(--bs-font-large);color:var(--bs-text-primary);line-height:1.2}.modal-close-button{position:absolute;height:32px;width:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;top:var(--bs-spacing-s3);right:var(--bs-spacing-s3);border:none;background-color:var(--bs-neutral-button-bg);fill:var(--bs-neutral-button-text);cursor:pointer;border-radius:50%}.modal-close-button:not(:active):hover{background-color:var(--bs-neutral-button-bg-hover)}.modal-close-button:active{background-color:var(--bs-neutral-button-bg-active)}.content-container{display:flex;flex-direction:column;max-height:calc(90vh - 100px);overflow:auto}.content-wrapper{padding:var(--bs-spacing-s5) var(--bs-spacing-s5) 0 var(--bs-spacing-s5);display:flex;flex-direction:column;gap:var(--bs-spacing-s5)}.content-footer{position:sticky;bottom:0;left:0;z-index:10;background-color:var(--bs-bg-primary);padding:var(--bs-spacing-s5);display:flex;flex-direction:column;gap:var(--bs-spacing-s5)}.section{display:flex;flex-direction:column;gap:var(--bs-spacing-s2)}.section-title{margin:0;font-weight:500;font-size:var(--bs-font-small);color:var(--bs-text-primary)}.options-container{display:flex;gap:var(--bs-spacing-s3);flex-wrap:wrap}.option{position:relative;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:48px;width:48px;border-radius:8px;font-family:var(--bs-font-family), serif;background-color:var(--bs-bg-secondary);border:2px solid var(--bs-bg-secondary);font-weight:400;padding:0;margin:0}.option-icon{display:inline-flex}.option-mood{font-size:var(--bs-font-xLarge)}.option-rating{color:var(--bs-text-primary);font-size:var(--bs-font-small)}.option-active{background-color:var(--bs-option-bg-selected);border-color:var(--bs-primary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.feedback-input{box-sizing:border-box;min-height:140px;line-height:1.4;resize:vertical;border-radius:8px;border:none;padding:var(--bs-spacing-s3);font-family:var(--bs-font-family), serif;font-size:var(--bs-font-small);font-weight:400;color:var(--bs-text-primary);background:var(--bs-bg-secondary);outline:none}.feedback-input::placeholder{color:var(--bs-text-secondary)}.feedback-input:focus{outline:2px solid var(--bs-input-border-focus);outline-offset:-2px}.submit-button{display:flex;align-items:center;justify-content:center;height:42px;flex-shrink:0;width:100%;border:none;font-family:var(--bs-font-family), serif;background-color:var(--bs-primary-button-bg);color:var(--bs-primary-button-text);border-radius:8px;padding:0 var(--bs-spacing-s4);font-weight:500;cursor:pointer;font-size:var(--bs-font-small)}.submit-button:disabled{opacity:0.6;cursor:not-allowed}.submit-button:active{opacity:0.9}.label-text{margin:0;color:var(--bs-text-secondary);font-size:var(--bs-font-xSmall);font-family:var(--bs-font-family), serif;font-weight:400}.text-danger{color:var(--bs-danger)}.text-link{color:var(--bs-primary);text-decoration:none;cursor:pointer}'}},[1,"feature-flag-feedback-modal",{theme:[513],flagKey:[1,"flag-key"],featureName:[1,"feature-name"],projectKey:[1,"project-key"],environmentKey:[1,"environment-key"],apiEndpoint:[1,"api-endpoint"],open:[1540],heading:[1],moodPrompt:[1,"mood-prompt"],ratingPrompt:[1,"rating-prompt"],feedbackLabel:[1,"feedback-label"],feedbackPlaceholder:[1,"feedback-placeholder"],submitLabel:[1,"submit-label"],privacyPolicyUrl:[1,"privacy-policy-url"],privacyPolicyLabel:[1,"privacy-policy-label"],privacyPolicyLinkLabel:[1,"privacy-policy-link-label"],closeLabel:[1,"close-label"],mood:[32],rating:[32],description:[32],isSubmitting:[32],error:[32]},[[8,"keydown","handleKeydown"]]]),n=o,b=function(){"undefined"!=typeof customElements&&["feature-flag-feedback-modal"].forEach((e=>{"feature-flag-feedback-modal"===e&&(customElements.get(i(e))||customElements.define(i(e),o))}))};export{n as FeatureFlagFeedbackModal,b as defineCustomElement}
+import{p as e,t,H as a,c as s,h as r,a as i}from"./index.js";const o=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.feedbackSent=s(this,"feedbackSent"),this.closed=s(this,"closed"),this.theme="light",this.apiEndpoint="https://flags-api.basestack.co/v1/flags/feedback",this.open=!1,this.heading="Feedback",this.moodPrompt="How are you feeling after using this feature?",this.ratingPrompt="How satisfied are you with this feature?",this.feedbackLabel="Share your feedback",this.feedbackPlaceholder="Anything else you’d like to add?",this.submitLabel="Submit feedback",this.privacyPolicyUrl="https://basestack.co/legal/privacy",this.privacyPolicyLabel="To keep your data safe, avoid sharing personal or sensitive details.",this.privacyPolicyLinkLabel="Learn more",this.closeLabel="Close",this.mood="HAPPY",this.rating=4,this.description="",this.isSubmitting=!1,this.closeModal=()=>{this.isSubmitting||(this.open=!1,this.closed.emit())}}handleKeydown(e){"Escape"===e.key&&this.open&&this.closeModal()}setMood(e){this.mood=e}setRating(e){this.rating=e}async submitFeedback(e){if(e.preventDefault(),!this.flagKey)return void(this.error="Missing flag key for feedback submission.");if(!this.projectKey&&!this.environmentKey)return void(this.error="Provide either project-key or environment-key.");this.isSubmitting=!0,this.error=void 0;const t={flagKey:this.flagKey,mood:this.mood,rating:this.rating,description:this.description.trim()},a=""+this.apiEndpoint.replace(/\/$/,"");try{const e=await fetch(a,{method:"POST",headers:{"Content-Type":"application/json",...this.projectKey?{"x-project-key":this.projectKey}:{},...this.environmentKey?{"x-environment-key":this.environmentKey}:{}},body:JSON.stringify(t)});if(!e.ok)throw Error(`Failed to send feedback (${e.status})`);this.feedbackSent.emit(t),this.description="",this.rating=4,this.mood="HAPPY",this.open=!1}catch(e){this.error=e instanceof Error?e.message:"Unable to send feedback"}finally{this.isSubmitting=!1}}renderMoodSelector(){return r("div",{class:"section"},r("p",{class:"section-title"},this.moodPrompt),r("div",{class:"options-container"},[{value:"VERY_SAD",label:"Dissatisfied",icon:"😭"},{value:"SAD",label:"Sad",icon:"😟"},{value:"NEUTRAL",label:"Neutral",icon:"😐"},{value:"HAPPY",label:"Happy",icon:"😊"},{value:"VERY_HAPPY",label:"Satisfied",icon:"🤩"}].map((e=>r("button",{type:"button",class:{"option option-mood":!0,"option-active":this.mood===e.value},onClick:()=>this.setMood(e.value),"aria-pressed":this.mood===e.value},r("span",{class:"option-icon","aria-hidden":"true"},e.icon),r("span",{class:"sr-only"},e.label))))))}renderRatingSelector(){return r("div",{class:"section"},r("p",{class:"section-title"},this.ratingPrompt),r("div",{class:"options-container"},[1,2,3,4,5].map((e=>r("button",{type:"button",class:{"option option-rating":!0,"option-active":this.rating===e},onClick:()=>this.setRating(e),"aria-pressed":this.rating===e},e)))))}render(){return r(i,{key:"0addc17f1548dc629774d177a7128843509064d0"},r("div",{key:"4070fd246c13f2cd01fc04f5cdc9d969edf44fe4",class:{modal:!0,open:this.open},role:"dialog","aria-modal":"true","aria-hidden":!this.open,"aria-label":this.heading,onClick:e=>e.stopPropagation()},r("header",{key:"45e101d37c79ddfb8b9c8dc1cb195bcd1abe6c40",class:"modal-header"},r("p",{key:"af55ddd65641fa2218b7a56c2d544493f5746457",class:"modal-header-label"},this.featureName??this.flagKey),r("h2",{key:"d32d5fa88bbd667327ab2403aa9d6d23f27bdc3b",class:"modal-header-title"},this.heading),r("button",{key:"4a36b5a79d4eeb4d6338244b2aa95d7510a4faa3",class:"modal-close-button",type:"button",onClick:this.closeModal,"aria-label":this.closeLabel},r("svg",{key:"41fbd4f1b83b8694b416e21c1b9365bcf09d64fe",xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"inherit","aria-hidden":"true"},r("path",{key:"0410a21ba1a56f361bf6fdb47ade920693aa3ca5",d:"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"})))),r("form",{key:"a0423604bc363d5dbd1b422e9de7b38f4547fdf3",class:"content-container",onSubmit:e=>this.submitFeedback(e)},r("div",{key:"dad03557b724e36189e22b51a3bdf963c58ad012",class:"content-wrapper"},this.renderMoodSelector(),this.renderRatingSelector(),r("div",{key:"620b7b1874f0f76102881a349453945455f6cff6",class:"section"},r("label",{key:"5f54d1005bff27d7dc1c54d39ecac62df1e2dab6",class:"section-title",htmlFor:"feedback-text"},this.feedbackLabel),r("textarea",{key:"c14e06ef8000654ffa6ef31f12fc954362d41af3",class:"feedback-input",id:"feedback-text",name:"feedback",value:this.description,placeholder:this.feedbackPlaceholder,onInput:e=>{this.description=e.target.value}}),this.error?r("p",{class:"label-text text-danger"},this.error):null,r("p",{key:"9fe7b463d2787f8c2a64da101aa9ee2fea3daa14",class:"label-text"},this.privacyPolicyLabel," ",r("a",{key:"db22738b7a803be32b46501f9f98746319264ec7",href:this.privacyPolicyUrl,class:"text-link"},this.privacyPolicyLinkLabel),"."))),r("div",{key:"06e18662386f40c0a094a345533da3326adb915a",class:"content-footer"},r("button",{key:"6ea1e0a2972d0d4d603908fb70b4baea2004faea",class:"submit-button",type:"submit",disabled:this.isSubmitting},this.isSubmitting?"Sending…":this.submitLabel)))),r("button",{key:"582935da1e6d52e5bd9c209c135494bc873b8bc0",type:"button",class:{overlay:!0,open:this.open},"aria-label":this.closeLabel,onClick:this.closeModal,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.closeModal())}}))}static get style(){return'*{box-sizing:border-box;margin:0}:host{--bs-font-family:"Roboto", system-ui, sans-serif;--bs-font-xxLarge:24px;--bs-font-xLarge:20px;--bs-font-large:18px;--bs-font-medium:16px;--bs-font-small:14px;--bs-font-xSmall:12px;--bs-spacing-s1:0.25rem;--bs-spacing-s2:0.5rem;--bs-spacing-s3:0.75rem;--bs-spacing-s4:1rem;--bs-spacing-s5:1.25rem;--bs-spacing-s6:1.875rem;--bs-spacing-s7:2.5rem;--bs-spacing-s8:3.125rem;--bs-white:#ffffff;--bs-black:#000000;--bs-gray-50:#f6f6f6;--bs-gray-100:#eeeeee;--bs-gray-200:#e2e2e2;--bs-gray-300:#cbcbcb;--bs-gray-400:#afafaf;--bs-gray-500:#757575;--bs-gray-600:#545454;--bs-gray-700:#333333;--bs-gray-800:#1f1f1f;--bs-gray-900:#141414;--bs-blue-50:#eff3fe;--bs-blue-100:#d4e2fc;--bs-blue-300:#5b91f5;--bs-blue-400:#276ef1;--bs-blue-500:#1e54b7;--bs-green-50:#e6f2ed;--bs-green-100:#addec9;--bs-green-500:#03703c;--bs-green-600:#03582f;--bs-red-300:#e85c4a;--bs-red-400:#e11900;--bs-primary:var(--bs-blue-400);--bs-danger:var(--bs-red-400);--bs-bg-primary:var(--bs-white);--bs-bg-secondary:var(--bs-gray-50);--bs-text-primary:var(--bs-black);--bs-text-secondary:var(--bs-gray-500);--bs-text-white:var(--bs-white);--bs-primary-button-bg:var(--bs-primary);--bs-primary-button-text:var(--bs-white);--bs-outline-button-text:var(--bs-text-primary);--bs-outline-button-border:var(--bs-gray-200);--bs-neutral-button-bg:"transparent";--bs-neutral-button-text:var(--bs-black);--bs-neutral-button-bg-hover:var(--bs-gray-100);--bs-neutral-button-bg-active:var(--bs-gray-50);--bs-default-tag-bg:var(--bs-gray-200);--bs-default-tag-text:var(--bs-text-primary);--bs-success-tag-bg:var(--bs-green-50);--bs-success-tag-text:var(--bs-green-500);--bs-option-bg-selected:var(--bs-blue-50);--bs-input-border-focus:var(--bs-black);--bs-border-light:var(--bs-gray-50);--bs-border-dark:var(--bs-gray-100);--bs-shadow-sm:rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;--bs-shadow-md:rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;font-family:var(--bs-font-family), serif;font-size:var(--bs-font-small);color:var(--bs-text-primary);line-height:1.4}:host([theme="dark"]){--bs-primary:var(--bs-blue-300);--bs-danger:var(--bs-red-300);--bs-bg-primary:var(--bs-gray-800);--bs-bg-secondary:var(--bs-gray-700);--bs-text-primary:var(--bs-gray-200);--bs-text-secondary:var(--bs-gray-400);--bs-text-white:var(--bs-white);--bs-primary-button-bg:var(--bs-blue-400);--bs-primary-button-text:var(--bs-white);--bs-outline-button-text:var(--bs-gray-300);--bs-outline-button-border:var(--bs-gray-600);--bs-neutral-button-bg:"transparent";--bs-neutral-button-text:var(--bs-gray-300);--bs-neutral-button-bg-hover:var(--bs-gray-600);--bs-neutral-button-bg-active:var(--bs-gray-700);--bs-default-tag-bg:var(--bs-gray-600);--bs-default-tag-text:var(--bs-text-primary);--bs-success-tag-bg:var(--bs-green-100);--bs-success-tag-text:var(--bs-green-600);--bs-option-bg-selected:rgba(91, 145, 245, 0.2);--bs-input-border-focus:var(--bs-gray-500);--bs-border-light:var(--bs-gray-600);--bs-border-dark:var(--bs-gray-700)}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.35);opacity:0;pointer-events:none;transition:opacity 0.2s ease;border:none;padding:0;z-index:999}.overlay.open{opacity:1;pointer-events:auto}.modal{z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%, -48%) scale(0.98);opacity:0;pointer-events:none;border-radius:8px;box-shadow:0 30px 70px rgba(0, 0, 0, 0.25);width:min(420px, 94vw);transition:opacity 0.2s ease,     transform 0.22s ease;overflow:hidden;background-color:var(--bs-bg-primary)}.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%, -50%) scale(1)}.modal-large{width:min(980px, 92vw)}.modal-header{position:relative;display:flex;flex-direction:column;padding:var(--bs-spacing-s5);border-bottom:1px solid var(--bs-border-dark);gap:var(--bs-spacing-s2)}.modal-header-label{margin:0;color:var(--bs-text-secondary);font-size:var(--bs-font-small);line-height:1.2}.modal-header-title{margin:0;font-weight:700;font-size:var(--bs-font-large);color:var(--bs-text-primary);line-height:1.2}.modal-close-button{position:absolute;height:32px;width:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;top:var(--bs-spacing-s3);right:var(--bs-spacing-s3);border:none;background-color:var(--bs-neutral-button-bg);fill:var(--bs-neutral-button-text);cursor:pointer;border-radius:50%}.modal-close-button:not(:active):hover{background-color:var(--bs-neutral-button-bg-hover)}.modal-close-button:active{background-color:var(--bs-neutral-button-bg-active)}.content-container{display:flex;flex-direction:column;max-height:calc(90vh - 100px);overflow:auto}.content-wrapper{padding:var(--bs-spacing-s5) var(--bs-spacing-s5) 0 var(--bs-spacing-s5);display:flex;flex-direction:column;gap:var(--bs-spacing-s5)}.content-footer{position:sticky;bottom:0;left:0;z-index:10;background-color:var(--bs-bg-primary);padding:var(--bs-spacing-s5);display:flex;flex-direction:column;gap:var(--bs-spacing-s5)}.section{display:flex;flex-direction:column;gap:var(--bs-spacing-s2)}.section-title{margin:0;font-weight:500;font-size:var(--bs-font-small);color:var(--bs-text-primary)}.options-container{display:flex;gap:var(--bs-spacing-s3);flex-wrap:wrap}.option{position:relative;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:48px;width:48px;border-radius:8px;font-family:var(--bs-font-family), serif;background-color:var(--bs-bg-secondary);border:2px solid var(--bs-bg-secondary);font-weight:400;padding:0;margin:0}.option-icon{display:inline-flex}.option-mood{font-size:var(--bs-font-xLarge)}.option-rating{color:var(--bs-text-primary);font-size:var(--bs-font-small)}.option-active{background-color:var(--bs-option-bg-selected);border-color:var(--bs-primary)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.feedback-input{box-sizing:border-box;min-height:140px;line-height:1.4;resize:vertical;border-radius:8px;border:none;padding:var(--bs-spacing-s3);font-family:var(--bs-font-family), serif;font-size:var(--bs-font-small);font-weight:400;color:var(--bs-text-primary);background:var(--bs-bg-secondary);outline:none}.feedback-input::placeholder{color:var(--bs-text-secondary)}.feedback-input:focus{outline:2px solid var(--bs-input-border-focus);outline-offset:-2px}.submit-button{display:flex;align-items:center;justify-content:center;height:42px;flex-shrink:0;width:100%;border:none;font-family:var(--bs-font-family), serif;background-color:var(--bs-primary-button-bg);color:var(--bs-primary-button-text);border-radius:8px;padding:0 var(--bs-spacing-s4);font-weight:500;cursor:pointer;font-size:var(--bs-font-small)}.submit-button:disabled{opacity:0.6;cursor:not-allowed}.submit-button:active{opacity:0.9}.label-text{margin:0;color:var(--bs-text-secondary);font-size:var(--bs-font-xSmall);font-family:var(--bs-font-family), serif;font-weight:400}.text-danger{color:var(--bs-danger)}.text-link{color:var(--bs-primary);text-decoration:none;cursor:pointer}'}},[1,"feature-flag-feedback-modal",{theme:[513],flagKey:[1,"flag-key"],featureName:[1,"feature-name"],projectKey:[1,"project-key"],environmentKey:[1,"environment-key"],apiEndpoint:[1,"api-endpoint"],open:[1540],heading:[1],moodPrompt:[1,"mood-prompt"],ratingPrompt:[1,"rating-prompt"],feedbackLabel:[1,"feedback-label"],feedbackPlaceholder:[1,"feedback-placeholder"],submitLabel:[1,"submit-label"],privacyPolicyUrl:[1,"privacy-policy-url"],privacyPolicyLabel:[1,"privacy-policy-label"],privacyPolicyLinkLabel:[1,"privacy-policy-link-label"],closeLabel:[1,"close-label"],mood:[32],rating:[32],description:[32],isSubmitting:[32],error:[32]},[[8,"keydown","handleKeydown"]]]),n=o,b=function(){"undefined"!=typeof customElements&&["feature-flag-feedback-modal"].forEach((e=>{"feature-flag-feedback-modal"===e&&(customElements.get(t(e))||customElements.define(t(e),o))}))};export{n as FeatureFlagFeedbackModal,b as defineCustomElement}

package/dist/components/feature-flag-preview-modal.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as a,h as s,Host as i,transformTag as r}from"@stencil/core/internal/client";const n="bs-flags-preview-state",o="https://flags.basestack.co/api/v1/flags/preview",l=[{slug:"header",description:"Controls the header visibility and styling",enabled:!1},{slug:"dashboard",description:"Modernized dashboard with improved workflows and a focused overview.",enabled:!1},{slug:"command-palette",description:"Quickly jump to actions and navigation without leaving your keyboard.",enabled:!1}],b="undefined"!=typeof window,d=(e=n)=>{if(!b)return{};try{const t=window.localStorage.getItem(e);if(!t)return{};const a=JSON.parse(t);return a&&"object"==typeof a?Object.entries(a).reduce(((e,[t,a])=>(e[t]=!!a,e)),{}):{}}catch(e){return console.warn("Failed to read feature flag state from storage",e),{}}},c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.flagChange=a(this,"flagChange",7),this.closed=a(this,"closed",7),this.theme="light",this.apiEndpoint=o,this.storageKey=n,this.open=!1,this.heading="Feature preview",this.subtitle="Get early access to new features and let us know what you think.",this.closeLabel="Close",this.showCloseButton=!0,this.loadingLabel="Loading features…",this.emptyLabel="No feature flags available at the moment.",this.selectionPrompt="Choose a feature to view",this.selectionPlaceholder="Select a feature on the left to see its details.",this.enableLabel="Enable",this.enabledLabel="Disable",this.previewBadgeLabel="Preview",this.expiresSoonLabel="Expires soon",this.learnMoreLabel="Learn more",this.flags=[],this.loading=!1,this.selectionState=d(this.storageKey),this.closeModal=()=>{this.open=!1,this.closed.emit()},this.selectFlag=e=>{this.selectedFlagId=e},this.toggleSelectedFlag=()=>{if(!this.selectedFlagId)return;const e=!this.selectionState[this.selectedFlagId];this.selectionState=((e,t,a=n)=>{const s={...d(a),[e]:t};return((e,t=n)=>{if(b)try{window.localStorage.setItem(t,JSON.stringify(e))}catch(e){console.warn("Failed to persist feature flag state to storage",e)}})(s,a),s})(this.selectedFlagId,e,this.storageKey);const t=this.flags.find((e=>e.slug===this.selectedFlagId));this.flagChange?.emit({slug:this.selectedFlagId,enabled:e,flag:t})}}async componentWillLoad(){await this.loadFlags()}handleEndpointChange(e,t){e!==t&&this.loadFlags()}handleKeydown(e){"Escape"===e.key&&this.open&&this.closeModal()}async loadFlags(){this.loading=!0,this.error=void 0;try{const e=await async function(e={}){const{endpoint:t=o,projectKey:a,environmentKey:s,init:i}=e,r=t===o;if(!a&&!s&&!i?.headers&&r)return l;const n={Accept:"application/json"};a&&(n["x-project-key"]=a),s&&(n["x-environment-key"]=s);const b=await fetch(t,{...i,headers:{...n,...i?.headers}});if(!b.ok)throw Error(`Failed to fetch feature flags (${b.status})`);const d=await b.json(),c=Array.isArray(d)?d:Array.isArray(d?.flags)?d.flags:null;if(!Array.isArray(c))throw Error("Unexpected feature flag payload received from API");const g=c.map((e=>(e=>e?.slug&&e?.description?{slug:e.slug+"",description:e.description,enabled:e.enabled,expiredAt:e.expiredAt,name:e.name??e.slug,previewImage:e.previewImage,documentationLink:e.documentationLink,previewName:e.previewName,previewContent:e.previewContent}:null)(e))).filter((e=>!!e));if(0===g.length)throw Error("Feature flag payload did not include any usable flags");return g}({endpoint:this.apiEndpoint,projectKey:this.projectKey,environmentKey:this.environmentKey});this.flags=e,!this.selectedFlagId&&e.length>0&&(this.selectedFlagId=e[0].slug)}catch(e){this.error=e instanceof Error?e.message:"Unable to load feature flags"}finally{this.loading=!1}}selectFlagByKey(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.selectFlag(t))}get selectedFlag(){return this.flags.find((e=>e.slug===this.selectedFlagId))}renderFlagBadge(e){const t=!!this.selectionState[e.slug],a=e.previewName??e.name??e.slug;return s("button",{class:{"flag-item":!0,active:e.slug===this.selectedFlagId},type:"button",onClick:()=>this.selectFlag(e.slug),onKeyDown:t=>this.selectFlagByKey(t,e.slug)},s("div",{class:"flag-item-icon","aria-hidden":"true"},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"inherit","aria-hidden":"true"},s("path",t?{d:"M280-240q-100 0-170-70T40-480q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm0-80h400q66 0 113-47t47-113q0-66-47-113t-113-47H280q-66 0-113 47t-47 113q0 66 47 113t113 47Zm400-40q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM480-480Z"}:{d:"M280-240q-100 0-170-70T40-480q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm0-80h400q66 0 113-47t47-113q0-66-47-113t-113-47H280q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-40q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm200-120Z"}))),s("div",{class:"flag-item-text-wrapper"},s("div",{class:"flag-name"},a),s("div",{class:"tag tag-default"},s("span",null,e.expiredAt?this.expiresSoonLabel:this.previewBadgeLabel))),t?s("span",{class:"tag tag-enabled"},this.enabledLabel):null)}renderList(){return this.loading?s("div",{class:"empty-state"},s("p",{class:"label-text"},this.loadingLabel)):this.error?s("div",{class:"empty-state"},s("p",{class:"label-text text-danger"},this.error)):0===this.flags.length?s("div",{class:"empty-state"},s("p",{class:"label-text"},this.emptyLabel)):s("div",{class:"flag-list"},this.flags.map((e=>this.renderFlagBadge(e))))}renderDetails(){const e=this.selectedFlag,t=!!e&&!!this.selectionState[e.slug],a=e?.previewName??e?.name??e?.slug??this.selectionPrompt;return s("section",{class:"details"},s("header",{class:"details-header"},s("div",{class:"details-header-content"},s("p",{class:"label-text"},this.heading),s("h2",{class:"details-header-title"},a)),s("button",{class:"enable-button",type:"button",onClick:this.toggleSelectedFlag,disabled:!e,"aria-pressed":t},t?this.enabledLabel:this.enableLabel)),s("div",{class:"details-body"},e?s("div",{class:"details-content"},e.previewImage&&s("div",{class:"details-image-wrapper"},s("img",{src:e.previewImage,alt:e.name+" preview"})),e.previewContent?s("div",{class:"details-description",innerHTML:e.previewContent}):s("p",{class:"details-description"},e.description),e.documentationLink?s("a",{class:"details-link",href:e.documentationLink,target:"_blank",rel:"noreferrer"},this.learnMoreLabel):null):s("div",{class:"details-placeholder"},s("p",{class:"label-text"},this.selectionPlaceholder))))}render(){return s(i,{key:"6e019be658f154bd34c11218dd26b300e35c9219"},s("div",{key:"37582dbcd9de86bbdbd7188322c8d6728320648c",class:{"modal modal-large":!0,open:this.open},role:"dialog","aria-modal":"true","aria-hidden":!this.open,"aria-label":this.heading,onClick:e=>e.stopPropagation()},s("header",{key:"953f01dc7c481c8055e08336c147da88b75d7b9a",class:"modal-header"},s("h2",{key:"ed82ae0447773c75ccd5676fd6b8fac2c1e459a8",class:"modal-header-title"},this.heading),s("p",{key:"9f1259ceb1edce1a6f2015c4f2be268c7c066d57",class:"modal-header-label"},this.subtitle),this.showCloseButton?s("button",{class:"modal-close-button",type:"button",onClick:this.closeModal,"aria-label":this.closeLabel},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"inherit","aria-hidden":"true"},s("path",{d:"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"}))):null),s("main",{key:"076abb011a394862a2bb33bd73c962eea3a28b62",class:"content-container"},s("aside",{key:"78ceb7167672d6f874275a7fe3f95bb0b81b10eb",class:"sidebar"},this.renderList()),this.renderDetails())),s("button",{key:"1ec64ac5132964042ec02af9118ba6abac28adc2",type:"button",class:{overlay:!0,open:this.open},tabIndex:0,"aria-label":this.closeLabel,onClick:this.closeModal,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.closeModal())}}))}static get watchers(){return{apiEndpoint:[{handleEndpointChange:0}]}}static get style(){return'*{box-sizing:border-box;margin:0}:host{--bs-font-family:"Roboto", system-ui, sans-serif;--bs-font-xxLarge:24px;--bs-font-xLarge:20px;--bs-font-large:18px;--bs-font-medium:16px;--bs-font-small:14px;--bs-font-xSmall:12px;--bs-spacing-s1:0.25rem;--bs-spacing-s2:0.5rem;--bs-spacing-s3:0.75rem;--bs-spacing-s4:1rem;--bs-spacing-s5:1.25rem;--bs-spacing-s6:1.875rem;--bs-spacing-s7:2.5rem;--bs-spacing-s8:3.125rem;--bs-white:#ffffff;--bs-black:#000000;--bs-gray-50:#f6f6f6;--bs-gray-100:#eeeeee;--bs-gray-200:#e2e2e2;--bs-gray-300:#cbcbcb;--bs-gray-400:#afafaf;--bs-gray-500:#757575;--bs-gray-600:#545454;--bs-gray-700:#333333;--bs-gray-800:#1f1f1f;--bs-gray-900:#141414;--bs-blue-50:#eff3fe;--bs-blue-100:#d4e2fc;--bs-blue-300:#5b91f5;--bs-blue-400:#276ef1;--bs-blue-500:#1e54b7;--bs-green-50:#e6f2ed;--bs-green-100:#addec9;--bs-green-500:#03703c;--bs-green-600:#03582f;--bs-red-300:#e85c4a;--bs-red-400:#e11900;--bs-primary:var(--bs-blue-400);--bs-danger:var(--bs-red-400);--bs-bg-primary:var(--bs-white);--bs-bg-secondary:var(--bs-gray-50);--bs-text-primary:var(--bs-black);--bs-text-secondary:var(--bs-gray-500);--bs-text-white:var(--bs-white);--bs-primary-button-bg:var(--bs-primary);--bs-primary-button-text:var(--bs-white);--bs-outline-button-text:var(--bs-text-primary);--bs-outline-button-border:var(--bs-gray-200);--bs-neutral-button-bg:"transparent";--bs-neutral-button-text:var(--bs-black);--bs-neutral-button-bg-hover:var(--bs-gray-100);--bs-neutral-button-bg-active:var(--bs-gray-50);--bs-default-tag-bg:var(--bs-gray-200);--bs-default-tag-text:var(--bs-text-primary);--bs-success-tag-bg:var(--bs-green-50);--bs-success-tag-text:var(--bs-green-500);--bs-option-bg-selected:var(--bs-blue-50);--bs-input-border-focus:var(--bs-black);--bs-border-light:var(--bs-gray-50);--bs-border-dark:var(--bs-gray-100);--bs-shadow-sm:rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;--bs-shadow-md:rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;font-family:var(--bs-font-family), serif;font-size:var(--bs-font-small);color:var(--bs-text-primary);line-height:1.4}:host([theme="dark"]){--bs-primary:var(--bs-blue-300);--bs-danger:var(--bs-red-300);--bs-bg-primary:var(--bs-gray-800);--bs-bg-secondary:var(--bs-gray-700);--bs-text-primary:var(--bs-gray-200);--bs-text-secondary:var(--bs-gray-400);--bs-text-white:var(--bs-white);--bs-primary-button-bg:var(--bs-blue-400);--bs-primary-button-text:var(--bs-white);--bs-outline-button-text:var(--bs-gray-300);--bs-outline-button-border:var(--bs-gray-600);--bs-neutral-button-bg:"transparent";--bs-neutral-button-text:var(--bs-gray-300);--bs-neutral-button-bg-hover:var(--bs-gray-600);--bs-neutral-button-bg-active:var(--bs-gray-700);--bs-default-tag-bg:var(--bs-gray-600);--bs-default-tag-text:var(--bs-text-primary);--bs-success-tag-bg:var(--bs-green-100);--bs-success-tag-text:var(--bs-green-600);--bs-option-bg-selected:rgba(91, 145, 245, 0.2);--bs-input-border-focus:var(--bs-gray-500);--bs-border-light:var(--bs-gray-600);--bs-border-dark:var(--bs-gray-700)}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.35);opacity:0;pointer-events:none;transition:opacity 0.2s ease;border:none;padding:0;z-index:999}.overlay.open{opacity:1;pointer-events:auto}.modal{z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%, -48%) scale(0.98);opacity:0;pointer-events:none;border-radius:8px;box-shadow:0 30px 70px rgba(0, 0, 0, 0.25);width:min(420px, 94vw);transition:opacity 0.2s ease,     transform 0.22s ease;overflow:hidden;background-color:var(--bs-bg-primary)}.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%, -50%) scale(1)}.modal-large{width:min(980px, 92vw)}.modal-header{position:relative;display:flex;flex-direction:column;padding:var(--bs-spacing-s5);border-bottom:1px solid var(--bs-border-dark);gap:var(--bs-spacing-s2)}.modal-header-label{margin:0;color:var(--bs-text-secondary);font-size:var(--bs-font-small);line-height:1.2}.modal-header-title{margin:0;font-weight:700;font-size:var(--bs-font-large);color:var(--bs-text-primary);line-height:1.2}.modal-close-button{position:absolute;height:32px;width:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;top:var(--bs-spacing-s3);right:var(--bs-spacing-s3);border:none;background-color:var(--bs-neutral-button-bg);fill:var(--bs-neutral-button-text);cursor:pointer;border-radius:50%}.modal-close-button:not(:active):hover{background-color:var(--bs-neutral-button-bg-hover)}.modal-close-button:active{background-color:var(--bs-neutral-button-bg-active)}.content-container{display:grid;grid-template-columns:minmax(240px, 34%) 1fr;min-height:480px}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--bs-border-dark)}.flag-list{display:flex;flex-direction:column;max-height:calc(90vh - 110px);overflow:auto}.flag-item{width:100%;display:flex;align-items:center;gap:var(--bs-spacing-s3);padding:var(--bs-spacing-s4) var(--bs-spacing-s5);cursor:pointer;background-color:transparent;border:none;border-bottom:1px solid var(--bs-border-dark);color:var(--bs-text-primary)}.flag-item.active{background-color:var(--bs-primary-button-bg);color:var(--bs-text-white)}.flag-item svg{fill:var(--bs-text-secondary)}.flag-item.active svg{fill:var(--bs-text-white)}.flag-item-icon{display:inline-flex}.flag-item-text-wrapper{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1;gap:var(--bs-spacing-s2)}.flag-name{font-weight:500;line-height:1.3;font-size:var(--bs-font-small);font-family:var(--bs-font-family), serif}.tag{padding:var(--bs-spacing-s1) var(--bs-spacing-s2);font-weight:400;font-size:var(--bs-font-xSmall);font-family:var(--bs-font-family), serif;border-radius:4px}.tag-default{background:var(--bs-default-tag-bg);color:var(--bs-default-tag-text)}.tag-enabled{background:var(--bs-success-tag-bg);color:var(--bs-success-tag-text)}.details{display:flex;flex-direction:column;max-height:calc(90vh - 110px);overflow:auto}.details-header{background-color:var(--bs-bg-primary);position:sticky;z-index:10;top:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:var(--bs-spacing-s4) var(--bs-spacing-s5) var(--bs-spacing-s5) var(--bs-spacing-s5);gap:var(--bs-spacing-s3)}.details-header-content{display:flex;flex-direction:column;gap:var(--bs-spacing-s2)}.details-header-title{margin:0;font-size:var(--bs-font-xLarge);font-family:var(--bs-font-family), serif;font-weight:700;line-height:1.2}.enable-button{border:1px solid var(--bs-outline-button-border);display:flex;flex-shrink:0;align-items:center;font-family:var(--bs-font-family), serif;background-color:transparent;color:var(--bs-outline-button-text);border-radius:8px;height:38px;padding:0 var(--bs-spacing-s4);font-weight:500;cursor:pointer;font-size:var(--bs-font-small)}.enable-button:disabled{opacity:0.6;cursor:not-allowed}.enable-button:active{opacity:0.7}.details-body{flex-grow:1;padding:0 var(--bs-spacing-s5) var(--bs-spacing-s5) var(--bs-spacing-s5)}.details-content{display:flex;flex-direction:column;gap:var(--bs-spacing-s5)}.details-image-wrapper{display:flex;flex-direction:column;position:relative;border-radius:8px;overflow:hidden;background:var(--bs-bg-secondary)}.details-image-wrapper img{width:100%;height:auto}.details-description{color:var(--bs-text-primary);font-size:var(--bs-font-small);font-family:var(--bs-font-family), serif;font-weight:400;line-height:1.4}.details-description h1,.details-description h2,.details-description h3,.details-description h4,.details-description h5,.details-description h6{margin:0.5em 0;line-height:1.3}.details-description h1{font-size:1.8em}.details-description h2{font-size:1.5em}.details-description h3{font-size:1.3em}.details-description p{margin:0.5em 0}.details-description ul,.details-description ol{margin:0.5em 0;padding-left:1.5em}.details-description li{margin:0.25em 0}.details-description a{color:var(--bs-primary);text-decoration:none}.details-description a:hover{text-decoration:underline}.details-description code{background-color:rgba(0, 0, 0, 0.1);padding:2px 4px;border-radius:3px;font-family:monospace;font-size:0.9em}.details-description blockquote{border-left:3px solid var(--bs-border-dark);padding-left:16px;margin:8px 0;color:var(--bs-text-secondary)}.details-description strong{font-weight:600}.details-description em{font-style:italic}.details-link{font-size:var(--bs-font-small);font-weight:400;color:var(--bs-primary);text-decoration:none;cursor:pointer}.details-link:hover{text-decoration:underline}.details-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;background-color:var(--bs-bg-secondary);border-radius:8px;padding:var(--bs-spacing-s5)}.empty-state{padding:var(--bs-spacing-s4) var(--bs-spacing-s5)}.label-text{color:var(--bs-text-secondary);font-size:var(--bs-font-small);font-family:var(--bs-font-family), serif;font-weight:400;line-height:1.3}.text-danger{color:var(--bs-danger)}@media (max-width: 720px){.modal{width:96vw}.content-container{grid-template-columns:1fr;min-height:0}.sidebar{border-right:none;border-bottom:1px solid var(--bs-border-dark)}.flag-list{max-height:300px}.details{max-height:calc(90vh - 410px);min-height:180px}}'}},[1,"feature-flag-preview-modal",{theme:[513],apiEndpoint:[1,"api-endpoint"],projectKey:[1,"project-key"],environmentKey:[1,"environment-key"],storageKey:[1,"storage-key"],open:[1540],heading:[1],subtitle:[1],closeLabel:[1,"close-label"],showCloseButton:[4,"show-close-button"],loadingLabel:[1,"loading-label"],emptyLabel:[1,"empty-label"],selectionPrompt:[1,"selection-prompt"],selectionPlaceholder:[1,"selection-placeholder"],enableLabel:[1,"enable-label"],enabledLabel:[1,"enabled-label"],previewBadgeLabel:[1,"preview-badge-label"],expiresSoonLabel:[1,"expires-soon-label"],learnMoreLabel:[1,"learn-more-label"],flags:[32],loading:[32],error:[32],selectedFlagId:[32],selectionState:[32]},[[8,"keydown","handleKeydown"]],{apiEndpoint:[{handleEndpointChange:0}]}]),g=c,p=function(){"undefined"!=typeof customElements&&["feature-flag-preview-modal"].forEach((e=>{"feature-flag-preview-modal"===e&&(customElements.get(r(e))||customElements.define(r(e),c))}))};export{g as FeatureFlagPreviewModal,p as defineCustomElement}
+import{p as e,H as t,c as a,h as s,a as i,t as r}from"./index.js";const n="bs-flags-preview-state",o="https://flags.basestack.co/api/v1/flags/preview",l=[{slug:"header",description:"Controls the header visibility and styling",enabled:!1},{slug:"dashboard",description:"Modernized dashboard with improved workflows and a focused overview.",enabled:!1},{slug:"command-palette",description:"Quickly jump to actions and navigation without leaving your keyboard.",enabled:!1}],b="undefined"!=typeof window,d=(e=n)=>{if(!b)return{};try{const t=window.localStorage.getItem(e);if(!t)return{};const a=JSON.parse(t);return a&&"object"==typeof a?Object.entries(a).reduce(((e,[t,a])=>(e[t]=!!a,e)),{}):{}}catch(e){return console.warn("Failed to read feature flag state from storage",e),{}}},c=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.flagChange=a(this,"flagChange"),this.closed=a(this,"closed"),this.theme="light",this.apiEndpoint=o,this.storageKey=n,this.open=!1,this.heading="Feature preview",this.subtitle="Get early access to new features and let us know what you think.",this.closeLabel="Close",this.showCloseButton=!0,this.loadingLabel="Loading features…",this.emptyLabel="No feature flags available at the moment.",this.selectionPrompt="Choose a feature to view",this.selectionPlaceholder="Select a feature on the left to see its details.",this.enableLabel="Enable",this.enabledLabel="Disable",this.previewBadgeLabel="Preview",this.expiresSoonLabel="Expires soon",this.learnMoreLabel="Learn more",this.flags=[],this.loading=!1,this.selectionState=d(this.storageKey),this.closeModal=()=>{this.open=!1,this.closed.emit()},this.selectFlag=e=>{this.selectedFlagId=e},this.toggleSelectedFlag=()=>{if(!this.selectedFlagId)return;const e=!this.selectionState[this.selectedFlagId];this.selectionState=((e,t,a=n)=>{const s={...d(a),[e]:t};return((e,t=n)=>{if(b)try{window.localStorage.setItem(t,JSON.stringify(e))}catch(e){console.warn("Failed to persist feature flag state to storage",e)}})(s,a),s})(this.selectedFlagId,e,this.storageKey);const t=this.flags.find((e=>e.slug===this.selectedFlagId));this.flagChange?.emit({slug:this.selectedFlagId,enabled:e,flag:t})}}async componentWillLoad(){await this.loadFlags()}handleEndpointChange(e,t){e!==t&&this.loadFlags()}handleKeydown(e){"Escape"===e.key&&this.open&&this.closeModal()}async loadFlags(){this.loading=!0,this.error=void 0;try{const e=await async function(e={}){const{endpoint:t=o,projectKey:a,environmentKey:s,init:i}=e,r=t===o;if(!a&&!s&&!i?.headers&&r)return l;const n={Accept:"application/json"};a&&(n["x-project-key"]=a),s&&(n["x-environment-key"]=s);const b=await fetch(t,{...i,headers:{...n,...i?.headers}});if(!b.ok)throw Error(`Failed to fetch feature flags (${b.status})`);const d=await b.json(),c=Array.isArray(d)?d:Array.isArray(d?.flags)?d.flags:null;if(!Array.isArray(c))throw Error("Unexpected feature flag payload received from API");const g=c.map((e=>(e=>e?.slug&&e?.description?{slug:e.slug+"",description:e.description,enabled:e.enabled,expiredAt:e.expiredAt,name:e.name??e.slug,previewImage:e.previewImage,documentationLink:e.documentationLink,previewName:e.previewName,previewContent:e.previewContent}:null)(e))).filter((e=>!!e));if(0===g.length)throw Error("Feature flag payload did not include any usable flags");return g}({endpoint:this.apiEndpoint,projectKey:this.projectKey,environmentKey:this.environmentKey});this.flags=e,!this.selectedFlagId&&e.length>0&&(this.selectedFlagId=e[0].slug)}catch(e){this.error=e instanceof Error?e.message:"Unable to load feature flags"}finally{this.loading=!1}}selectFlagByKey(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.selectFlag(t))}get selectedFlag(){return this.flags.find((e=>e.slug===this.selectedFlagId))}renderFlagBadge(e){const t=!!this.selectionState[e.slug],a=e.previewName??e.name??e.slug;return s("button",{class:{"flag-item":!0,active:e.slug===this.selectedFlagId},type:"button",onClick:()=>this.selectFlag(e.slug),onKeyDown:t=>this.selectFlagByKey(t,e.slug)},s("div",{class:"flag-item-icon","aria-hidden":"true"},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"inherit","aria-hidden":"true"},s("path",t?{d:"M280-240q-100 0-170-70T40-480q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm0-80h400q66 0 113-47t47-113q0-66-47-113t-113-47H280q-66 0-113 47t-47 113q0 66 47 113t113 47Zm400-40q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35ZM480-480Z"}:{d:"M280-240q-100 0-170-70T40-480q0-100 70-170t170-70h400q100 0 170 70t70 170q0 100-70 170t-170 70H280Zm0-80h400q66 0 113-47t47-113q0-66-47-113t-113-47H280q-66 0-113 47t-47 113q0 66 47 113t113 47Zm0-40q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm200-120Z"}))),s("div",{class:"flag-item-text-wrapper"},s("div",{class:"flag-name"},a),s("div",{class:"tag tag-default"},s("span",null,e.expiredAt?this.expiresSoonLabel:this.previewBadgeLabel))),t?s("span",{class:"tag tag-enabled"},this.enabledLabel):null)}renderList(){return this.loading?s("div",{class:"empty-state"},s("p",{class:"label-text"},this.loadingLabel)):this.error?s("div",{class:"empty-state"},s("p",{class:"label-text text-danger"},this.error)):0===this.flags.length?s("div",{class:"empty-state"},s("p",{class:"label-text"},this.emptyLabel)):s("div",{class:"flag-list"},this.flags.map((e=>this.renderFlagBadge(e))))}renderDetails(){const e=this.selectedFlag,t=!!e&&!!this.selectionState[e.slug],a=e?.previewName??e?.name??e?.slug??this.selectionPrompt;return s("section",{class:"details"},s("header",{class:"details-header"},s("div",{class:"details-header-content"},s("p",{class:"label-text"},this.heading),s("h2",{class:"details-header-title"},a)),s("button",{class:"enable-button",type:"button",onClick:this.toggleSelectedFlag,disabled:!e,"aria-pressed":t},t?this.enabledLabel:this.enableLabel)),s("div",{class:"details-body"},e?s("div",{class:"details-content"},e.previewImage&&s("div",{class:"details-image-wrapper"},s("img",{src:e.previewImage,alt:e.name+" preview"})),e.previewContent?s("div",{class:"details-description",innerHTML:e.previewContent}):s("p",{class:"details-description"},e.description),e.documentationLink?s("a",{class:"details-link",href:e.documentationLink,target:"_blank",rel:"noreferrer"},this.learnMoreLabel):null):s("div",{class:"details-placeholder"},s("p",{class:"label-text"},this.selectionPlaceholder))))}render(){return s(i,{key:"6e019be658f154bd34c11218dd26b300e35c9219"},s("div",{key:"37582dbcd9de86bbdbd7188322c8d6728320648c",class:{"modal modal-large":!0,open:this.open},role:"dialog","aria-modal":"true","aria-hidden":!this.open,"aria-label":this.heading,onClick:e=>e.stopPropagation()},s("header",{key:"953f01dc7c481c8055e08336c147da88b75d7b9a",class:"modal-header"},s("h2",{key:"ed82ae0447773c75ccd5676fd6b8fac2c1e459a8",class:"modal-header-title"},this.heading),s("p",{key:"9f1259ceb1edce1a6f2015c4f2be268c7c066d57",class:"modal-header-label"},this.subtitle),this.showCloseButton?s("button",{class:"modal-close-button",type:"button",onClick:this.closeModal,"aria-label":this.closeLabel},s("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"inherit","aria-hidden":"true"},s("path",{d:"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"}))):null),s("main",{key:"076abb011a394862a2bb33bd73c962eea3a28b62",class:"content-container"},s("aside",{key:"78ceb7167672d6f874275a7fe3f95bb0b81b10eb",class:"sidebar"},this.renderList()),this.renderDetails())),s("button",{key:"1ec64ac5132964042ec02af9118ba6abac28adc2",type:"button",class:{overlay:!0,open:this.open},tabIndex:0,"aria-label":this.closeLabel,onClick:this.closeModal,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.closeModal())}}))}static get watchers(){return{apiEndpoint:[{handleEndpointChange:0}]}}static get style(){return'*{box-sizing:border-box;margin:0}:host{--bs-font-family:"Roboto", system-ui, sans-serif;--bs-font-xxLarge:24px;--bs-font-xLarge:20px;--bs-font-large:18px;--bs-font-medium:16px;--bs-font-small:14px;--bs-font-xSmall:12px;--bs-spacing-s1:0.25rem;--bs-spacing-s2:0.5rem;--bs-spacing-s3:0.75rem;--bs-spacing-s4:1rem;--bs-spacing-s5:1.25rem;--bs-spacing-s6:1.875rem;--bs-spacing-s7:2.5rem;--bs-spacing-s8:3.125rem;--bs-white:#ffffff;--bs-black:#000000;--bs-gray-50:#f6f6f6;--bs-gray-100:#eeeeee;--bs-gray-200:#e2e2e2;--bs-gray-300:#cbcbcb;--bs-gray-400:#afafaf;--bs-gray-500:#757575;--bs-gray-600:#545454;--bs-gray-700:#333333;--bs-gray-800:#1f1f1f;--bs-gray-900:#141414;--bs-blue-50:#eff3fe;--bs-blue-100:#d4e2fc;--bs-blue-300:#5b91f5;--bs-blue-400:#276ef1;--bs-blue-500:#1e54b7;--bs-green-50:#e6f2ed;--bs-green-100:#addec9;--bs-green-500:#03703c;--bs-green-600:#03582f;--bs-red-300:#e85c4a;--bs-red-400:#e11900;--bs-primary:var(--bs-blue-400);--bs-danger:var(--bs-red-400);--bs-bg-primary:var(--bs-white);--bs-bg-secondary:var(--bs-gray-50);--bs-text-primary:var(--bs-black);--bs-text-secondary:var(--bs-gray-500);--bs-text-white:var(--bs-white);--bs-primary-button-bg:var(--bs-primary);--bs-primary-button-text:var(--bs-white);--bs-outline-button-text:var(--bs-text-primary);--bs-outline-button-border:var(--bs-gray-200);--bs-neutral-button-bg:"transparent";--bs-neutral-button-text:var(--bs-black);--bs-neutral-button-bg-hover:var(--bs-gray-100);--bs-neutral-button-bg-active:var(--bs-gray-50);--bs-default-tag-bg:var(--bs-gray-200);--bs-default-tag-text:var(--bs-text-primary);--bs-success-tag-bg:var(--bs-green-50);--bs-success-tag-text:var(--bs-green-500);--bs-option-bg-selected:var(--bs-blue-50);--bs-input-border-focus:var(--bs-black);--bs-border-light:var(--bs-gray-50);--bs-border-dark:var(--bs-gray-100);--bs-shadow-sm:rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;--bs-shadow-md:rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;font-family:var(--bs-font-family), serif;font-size:var(--bs-font-small);color:var(--bs-text-primary);line-height:1.4}:host([theme="dark"]){--bs-primary:var(--bs-blue-300);--bs-danger:var(--bs-red-300);--bs-bg-primary:var(--bs-gray-800);--bs-bg-secondary:var(--bs-gray-700);--bs-text-primary:var(--bs-gray-200);--bs-text-secondary:var(--bs-gray-400);--bs-text-white:var(--bs-white);--bs-primary-button-bg:var(--bs-blue-400);--bs-primary-button-text:var(--bs-white);--bs-outline-button-text:var(--bs-gray-300);--bs-outline-button-border:var(--bs-gray-600);--bs-neutral-button-bg:"transparent";--bs-neutral-button-text:var(--bs-gray-300);--bs-neutral-button-bg-hover:var(--bs-gray-600);--bs-neutral-button-bg-active:var(--bs-gray-700);--bs-default-tag-bg:var(--bs-gray-600);--bs-default-tag-text:var(--bs-text-primary);--bs-success-tag-bg:var(--bs-green-100);--bs-success-tag-text:var(--bs-green-600);--bs-option-bg-selected:rgba(91, 145, 245, 0.2);--bs-input-border-focus:var(--bs-gray-500);--bs-border-light:var(--bs-gray-600);--bs-border-dark:var(--bs-gray-700)}.overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.35);opacity:0;pointer-events:none;transition:opacity 0.2s ease;border:none;padding:0;z-index:999}.overlay.open{opacity:1;pointer-events:auto}.modal{z-index:1000;position:fixed;top:50%;left:50%;transform:translate(-50%, -48%) scale(0.98);opacity:0;pointer-events:none;border-radius:8px;box-shadow:0 30px 70px rgba(0, 0, 0, 0.25);width:min(420px, 94vw);transition:opacity 0.2s ease,     transform 0.22s ease;overflow:hidden;background-color:var(--bs-bg-primary)}.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%, -50%) scale(1)}.modal-large{width:min(980px, 92vw)}.modal-header{position:relative;display:flex;flex-direction:column;padding:var(--bs-spacing-s5);border-bottom:1px solid var(--bs-border-dark);gap:var(--bs-spacing-s2)}.modal-header-label{margin:0;color:var(--bs-text-secondary);font-size:var(--bs-font-small);line-height:1.2}.modal-header-title{margin:0;font-weight:700;font-size:var(--bs-font-large);color:var(--bs-text-primary);line-height:1.2}.modal-close-button{position:absolute;height:32px;width:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;top:var(--bs-spacing-s3);right:var(--bs-spacing-s3);border:none;background-color:var(--bs-neutral-button-bg);fill:var(--bs-neutral-button-text);cursor:pointer;border-radius:50%}.modal-close-button:not(:active):hover{background-color:var(--bs-neutral-button-bg-hover)}.modal-close-button:active{background-color:var(--bs-neutral-button-bg-active)}.content-container{display:grid;grid-template-columns:minmax(240px, 34%) 1fr;min-height:480px}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--bs-border-dark)}.flag-list{display:flex;flex-direction:column;max-height:calc(90vh - 110px);overflow:auto}.flag-item{width:100%;display:flex;align-items:center;gap:var(--bs-spacing-s3);padding:var(--bs-spacing-s4) var(--bs-spacing-s5);cursor:pointer;background-color:transparent;border:none;border-bottom:1px solid var(--bs-border-dark);color:var(--bs-text-primary)}.flag-item.active{background-color:var(--bs-primary-button-bg);color:var(--bs-text-white)}.flag-item svg{fill:var(--bs-text-secondary)}.flag-item.active svg{fill:var(--bs-text-white)}.flag-item-icon{display:inline-flex}.flag-item-text-wrapper{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1;gap:var(--bs-spacing-s2)}.flag-name{font-weight:500;line-height:1.3;font-size:var(--bs-font-small);font-family:var(--bs-font-family), serif}.tag{padding:var(--bs-spacing-s1) var(--bs-spacing-s2);font-weight:400;font-size:var(--bs-font-xSmall);font-family:var(--bs-font-family), serif;border-radius:4px}.tag-default{background:var(--bs-default-tag-bg);color:var(--bs-default-tag-text)}.tag-enabled{background:var(--bs-success-tag-bg);color:var(--bs-success-tag-text)}.details{display:flex;flex-direction:column;max-height:calc(90vh - 110px);overflow:auto}.details-header{background-color:var(--bs-bg-primary);position:sticky;z-index:10;top:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:var(--bs-spacing-s4) var(--bs-spacing-s5) var(--bs-spacing-s5) var(--bs-spacing-s5);gap:var(--bs-spacing-s3)}.details-header-content{display:flex;flex-direction:column;gap:var(--bs-spacing-s2)}.details-header-title{margin:0;font-size:var(--bs-font-xLarge);font-family:var(--bs-font-family), serif;font-weight:700;line-height:1.2}.enable-button{border:1px solid var(--bs-outline-button-border);display:flex;flex-shrink:0;align-items:center;font-family:var(--bs-font-family), serif;background-color:transparent;color:var(--bs-outline-button-text);border-radius:8px;height:38px;padding:0 var(--bs-spacing-s4);font-weight:500;cursor:pointer;font-size:var(--bs-font-small)}.enable-button:disabled{opacity:0.6;cursor:not-allowed}.enable-button:active{opacity:0.7}.details-body{flex-grow:1;padding:0 var(--bs-spacing-s5) var(--bs-spacing-s5) var(--bs-spacing-s5)}.details-content{display:flex;flex-direction:column;gap:var(--bs-spacing-s5)}.details-image-wrapper{display:flex;flex-direction:column;position:relative;border-radius:8px;overflow:hidden;background:var(--bs-bg-secondary)}.details-image-wrapper img{width:100%;height:auto}.details-description{color:var(--bs-text-primary);font-size:var(--bs-font-small);font-family:var(--bs-font-family), serif;font-weight:400;line-height:1.4}.details-description h1,.details-description h2,.details-description h3,.details-description h4,.details-description h5,.details-description h6{margin:0.5em 0;line-height:1.3}.details-description h1{font-size:1.8em}.details-description h2{font-size:1.5em}.details-description h3{font-size:1.3em}.details-description p{margin:0.5em 0}.details-description ul,.details-description ol{margin:0.5em 0;padding-left:1.5em}.details-description li{margin:0.25em 0}.details-description a{color:var(--bs-primary);text-decoration:none}.details-description a:hover{text-decoration:underline}.details-description code{background-color:rgba(0, 0, 0, 0.1);padding:2px 4px;border-radius:3px;font-family:monospace;font-size:0.9em}.details-description blockquote{border-left:3px solid var(--bs-border-dark);padding-left:16px;margin:8px 0;color:var(--bs-text-secondary)}.details-description strong{font-weight:600}.details-description em{font-style:italic}.details-link{font-size:var(--bs-font-small);font-weight:400;color:var(--bs-primary);text-decoration:none;cursor:pointer}.details-link:hover{text-decoration:underline}.details-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;background-color:var(--bs-bg-secondary);border-radius:8px;padding:var(--bs-spacing-s5)}.empty-state{padding:var(--bs-spacing-s4) var(--bs-spacing-s5)}.label-text{color:var(--bs-text-secondary);font-size:var(--bs-font-small);font-family:var(--bs-font-family), serif;font-weight:400;line-height:1.3}.text-danger{color:var(--bs-danger)}@media (max-width: 720px){.modal{width:96vw}.content-container{grid-template-columns:1fr;min-height:0}.sidebar{border-right:none;border-bottom:1px solid var(--bs-border-dark)}.flag-list{max-height:300px}.details{max-height:calc(90vh - 410px);min-height:180px}}'}},[1,"feature-flag-preview-modal",{theme:[513],apiEndpoint:[1,"api-endpoint"],projectKey:[1,"project-key"],environmentKey:[1,"environment-key"],storageKey:[1,"storage-key"],open:[1540],heading:[1],subtitle:[1],closeLabel:[1,"close-label"],showCloseButton:[4,"show-close-button"],loadingLabel:[1,"loading-label"],emptyLabel:[1,"empty-label"],selectionPrompt:[1,"selection-prompt"],selectionPlaceholder:[1,"selection-placeholder"],enableLabel:[1,"enable-label"],enabledLabel:[1,"enabled-label"],previewBadgeLabel:[1,"preview-badge-label"],expiresSoonLabel:[1,"expires-soon-label"],learnMoreLabel:[1,"learn-more-label"],flags:[32],loading:[32],error:[32],selectedFlagId:[32],selectionState:[32]},[[8,"keydown","handleKeydown"]],{apiEndpoint:[{handleEndpointChange:0}]}]),g=c,p=function(){"undefined"!=typeof customElements&&["feature-flag-preview-modal"].forEach((e=>{"feature-flag-preview-modal"===e&&(customElements.get(r(e))||customElements.define(r(e),c))}))};export{g as FeatureFlagPreviewModal,p as defineCustomElement}

package/dist/components/index.js

@@ -1 +1 @@
-export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";
+var t,e=(t,e)=>{var n;Object.entries(null!=(n=e.l.t)?n:{}).map((([n,[l]])=>{if(31&l||32&l){const l=t[n],o=function(t,e){for(;t;){const n=Object.getOwnPropertyDescriptor(t,e);if(null==n?void 0:n.get)return n;t=Object.getPrototypeOf(t)}}(Object.getPrototypeOf(t),n)||Object.getOwnPropertyDescriptor(t,n);o&&Object.defineProperty(t,n,{get(){return o.get.call(this)},set(t){o.set.call(this,t)},configurable:!0,enumerable:!0}),t[n]=e.o.has(n)?e.o.get(n):l}}))},n=t=>{if(t.__stencil__getHostRef)return t.__stencil__getHostRef()},l=(t,e)=>e in t,o=(t,e)=>(0,console.error)(t,e),s=new Map,i="undefined"!=typeof window?window:{},r=i.HTMLElement||class{},c={i:0,u:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,l)=>t.addEventListener(e,n,l),rel:(t,e,n,l)=>t.removeEventListener(e,n,l),ce:(t,e)=>new CustomEvent(t,e)},u=(()=>{try{return!!i.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(t){}return!1})(),f=!!u&&(()=>!!i.document&&Object.getOwnPropertyDescriptor(i.document.adoptedStyleSheets,"length").writable)(),a=!1,h=[],d=[],p=(t,e)=>n=>{t.push(n),a||(a=!0,e&&4&c.i?v(b):c.raf(b))},m=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){o(t)}t.length=0},b=()=>{m(h),m(d),(a=h.length>0)&&c.raf(b)},v=t=>Promise.resolve(void 0).then(t),$=p(d,!0),y=t=>{const e=new URL(t,c.u);return e.origin!==i.location.origin?e.href:e.pathname},w=t=>c.u=t;function g(){const e=this.attachShadow({mode:"open"});void 0===t&&(t=null),t&&(f?e.adoptedStyleSheets.push(t):e.adoptedStyleSheets=[...e.adoptedStyleSheets,t])}var j,O=new WeakMap,S=t=>"sc-"+t.h,k=t=>"object"==(t=typeof t)||"function"===t,M=(t,e,...n)=>{let l=null,o=null,s=!1,i=!1;const r=[],c=e=>{for(let n=0;n<e.length;n++)l=e[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof t&&!k(l))&&(l+=""),s&&i?r[r.length-1].p+=l:r.push(s?E(null,l):l),i=s)};if(c(n),e){e.key&&(o=e.key);{const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}}const u=E(t,null);return u.m=e,r.length>0&&(u.v=r),u.$=o,u},E=(t,e)=>({i:0,j:t,p:null!=e?e:null,O:null,v:null,m:null,$:null}),C={},x=(t,e)=>null==t||k(t)?t:4&e?"false"!==t&&(""===t||!!t):1&e?t+"":t,A=(t,e)=>{const n=t;return{emit:t=>_(n,e,{bubbles:!0,composed:!0,cancelable:!0,detail:t})}},_=(t,e,n)=>{const l=c.ce(e,n);return t.dispatchEvent(l),l},D=(t,e,o,s,r,u)=>{if(o===s)return;let f=l(t,e),a=e.toLowerCase();if("class"===e){const e=t.classList,n=R(o);let l=R(s);e.remove(...n.filter((t=>t&&!l.includes(t)))),e.add(...l.filter((t=>t&&!n.includes(t))))}else if("key"===e);else if(t.__lookupSetter__(e)||"o"!==e[0]||"n"!==e[1]){if("a"===e[0]&&e.startsWith("attr:")){const l=e.slice(5);let o;{const e=n(t);if(e&&e.l&&e.l.t){const t=e.l.t[l];t&&t[1]&&(o=t[1])}}return o||(o=l.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(null==s||!1===s?!1===s&&""!==t.getAttribute(o)||t.removeAttribute(o):t.setAttribute(o,!0===s?"":s))}if("p"===e[0]&&e.startsWith("prop:")){const n=e.slice(5);try{t[n]=s}catch(t){}return}{const n=k(s);if((f||n&&null!==s)&&!r)try{if(t.tagName.includes("-"))t[e]!==s&&(t[e]=s);else{const n=null==s?"":s;"list"===e?f=!1:null!=o&&t[e]===n||("function"==typeof t.__lookupSetter__(e)?t[e]=n:t.setAttribute(e,n))}}catch(t){}null==s||!1===s?!1===s&&""!==t.getAttribute(e)||t.removeAttribute(e):(!f||4&u||r)&&!n&&1===t.nodeType&&t.setAttribute(e,s=!0===s?"":s)}}else if(e="-"===e[2]?e.slice(3):l(i,a)?a.slice(2):a[2]+e.slice(3),o||s){const n=e.endsWith(U);e=e.replace(L,""),o&&c.rel(t,e,o,n),s&&c.ael(t,e,s,n)}},P=/\s/,R=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(P):[]),U="Capture",L=RegExp(U+"$"),N=(t,e,n)=>{const l=11===e.O.nodeType&&e.O.host?e.O.host:e.O,o=t&&t.m||{},s=e.m||{};for(const t of W(Object.keys(o)))t in s||D(l,t,o[t],void 0,n,e.i);for(const t of W(Object.keys(s)))D(l,t,o[t],s[t],n,e.i)};function W(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var H=!1,V=(t,e,n)=>{const l=e.v[n];let o,s,r=0;if(null!=l.p)o=l.O=i.document.createTextNode(l.p);else{if(H||(H="svg"===l.j),!i.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(o=l.O=i.document.createElementNS(H?"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",l.j),H&&"foreignObject"===l.j&&(H=!1),N(null,l,H),l.v){const e="template"===l.j?o.content:o;for(r=0;r<l.v.length;++r)s=V(t,l,r),s&&e.appendChild(s)}"svg"===l.j?H=!1:"foreignObject"===o.tagName&&(H=!0)}return o["s-hn"]=j,o},q=(t,e,n,l,o,s)=>{let i,r=t;for(r.shadowRoot&&r.tagName===j&&(r=r.shadowRoot),"template"===n.j&&(r=r.content);o<=s;++o)l[o]&&(i=V(null,n,o),i&&(l[o].O=i,Z(r,i,e)))},z=(t,e,n)=>{for(let l=e;l<=n;++l){const e=t[l];if(e){const t=e.O;t&&t.remove()}}},F=(t,e,n=!1)=>t.j===e.j&&(n?(n&&!t.$&&e.$&&(t.$=e.$),!0):t.$===e.$),Y=(t,e,n=!1)=>{const l=e.O=t.O,o=t.v,s=e.v,i=e.j,r=e.p;null==r?(N(t,e,H="svg"===i||"foreignObject"!==i&&H),null!==o&&null!==s?((t,e,n,l,o=!1)=>{let s,i,r=0,c=0,u=0,f=0,a=e.length-1,h=e[0],d=e[a],p=l.length-1,m=l[0],b=l[p];const v="template"===n.j?t.content:t;for(;r<=a&&c<=p;)if(null==h)h=e[++r];else if(null==d)d=e[--a];else if(null==m)m=l[++c];else if(null==b)b=l[--p];else if(F(h,m,o))Y(h,m,o),h=e[++r],m=l[++c];else if(F(d,b,o))Y(d,b,o),d=e[--a],b=l[--p];else if(F(h,b,o))Y(h,b,o),Z(v,h.O,d.O.nextSibling),h=e[++r],b=l[--p];else if(F(d,m,o))Y(d,m,o),Z(v,d.O,h.O),d=e[--a],m=l[++c];else{for(u=-1,f=r;f<=a;++f)if(e[f]&&null!==e[f].$&&e[f].$===m.$){u=f;break}u>=0?(i=e[u],i.j!==m.j?s=V(e&&e[c],n,u):(Y(i,m,o),e[u]=void 0,s=i.O),m=l[++c]):(s=V(e&&e[c],n,c),m=l[++c]),s&&Z(h.O.parentNode,s,h.O)}r>a?q(t,null==l[p+1]?null:l[p+1].O,n,l,c,p):c>p&&z(e,r,a)})(l,o,e,s,n):null!==s?(null!==t.p&&(l.textContent=""),q(l,null,e,s,0,s.length-1)):!n&&null!==o&&z(o,0,o.length-1),H&&"svg"===i&&(H=!1)):t.p!==r&&(l.data=r)},Z=(t,e,n)=>t.__insertBefore?t.__insertBefore(e,n):null==t?void 0:t.insertBefore(e,n),B=(t,e,n=!1)=>{const l=t.$hostElement$,o=t.l,s=t.S||E(null,null),i=(t=>t&&t.j===C)(e)?e:M(null,null,e);if(j=l.tagName,o.k&&(i.m=i.m||{},o.k.forEach((([t,e])=>{i.m[e]=l[t]}))),n&&i.m)for(const t of Object.keys(i.m))l.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(i.m[t]=l[t]);i.j=null,i.i|=4,t.S=i,i.O=s.O=l.shadowRoot||l,Y(s,i,n)},G=(t,e)=>{if(e&&!t.M&&e["s-p"]){const n=e["s-p"].push(new Promise((l=>t.M=()=>{e["s-p"].splice(n-1,1),l()})))}},I=(t,e)=>{if(t.i|=16,4&t.i)return void(t.i|=512);G(t,t.C);const n=()=>J(t,e);if(!e)return $(n);queueMicrotask((()=>{n()}))},J=(t,e)=>{const n=t.$hostElement$,l=n;if(!l)throw Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let o;return o=nt(l,e?"componentWillLoad":"componentWillUpdate",void 0,n),o=K(o,(()=>nt(l,"componentWillRender",void 0,n))),K(o,(()=>T(t,l,e)))},K=(t,e)=>Q(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),Q=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,T=async(t,e,n)=>{var l;const o=t.$hostElement$,r=o["s-rc"];n&&(t=>{const e=t.l,n=t.$hostElement$,l=e.i,o=((t,e)=>{var n,l,o;const r=S(e),a=s.get(r);if(!i.document)return r;if(t=11===t.nodeType?t:i.document,a)if("string"==typeof a){let o,s=O.get(t=t.head||t);if(s||O.set(t,s=new Set),!s.has(r)){o=i.document.createElement("style"),o.textContent=a;const h=null!=(n=c.A)?n:function(){var t,e,n;return null!=(n=null==(e=null==(t=i.document.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:e.getAttribute("content"))?n:void 0}();if(null!=h&&o.setAttribute("nonce",h),!(1&e.i))if("HEAD"===t.nodeName){const e=t.querySelectorAll("link[rel=preconnect]"),n=e.length>0?e[e.length-1].nextSibling:t.querySelector("style");t.insertBefore(o,(null==n?void 0:n.parentNode)===t?n:null)}else if("host"in t)if(u){const e=new(null!=(l=t.defaultView)?l:t.ownerDocument.defaultView).CSSStyleSheet;e.replaceSync(a),f?t.adoptedStyleSheets.unshift(e):t.adoptedStyleSheets=[e,...t.adoptedStyleSheets]}else{const e=t.querySelector("style");e?e.textContent=a+e.textContent:t.prepend(o)}else t.append(o);1&e.i&&t.insertBefore(o,null),4&e.i&&(o.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),s&&s.add(r)}}else{let e=O.get(t);if(e||O.set(t,e=new Set),!e.has(r)){const n=null!=(o=t.defaultView)?o:t.ownerDocument.defaultView;let l;if(a.constructor===n.CSSStyleSheet)l=a;else{l=new n.CSSStyleSheet;for(let t=0;t<a.cssRules.length;t++)l.insertRule(a.cssRules[t].cssText,t)}f?t.adoptedStyleSheets.push(l):t.adoptedStyleSheets=[...t.adoptedStyleSheets,l],e.add(r)}}return r})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);10&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(t);X(t,e,o,n),r&&(r.map((t=>t())),o["s-rc"]=void 0);{const e=null!=(l=o["s-p"])?l:[],n=()=>tt(t);0===e.length?n():(Promise.all(e).then(n).catch(n),t.i|=4,e.length=0)}},X=(t,e,n,l)=>{try{e=e.render(),t.i&=-17,t.i|=2,B(t,e,l)}catch(e){o(e,t.$hostElement$)}return null},tt=t=>{const e=t.$hostElement$,n=e,l=t.C;nt(n,"componentDidRender",void 0,e),64&t.i?nt(n,"componentDidUpdate",void 0,e):(t.i|=64,lt(e),nt(n,"componentDidLoad",void 0,e),t._(e),l||et()),t.M&&(t.M(),t.M=void 0),512&t.i&&v((()=>I(t,!1))),t.i&=-517},et=()=>{v((()=>_(i,"appload",{detail:{namespace:"featureflags"}})))},nt=(t,e,n,l)=>{if(t&&t[e])try{return t[e](n)}catch(t){o(t,l)}},lt=t=>t.classList.add("hydrated"),ot=(t,e,l,s)=>{const i=n(t);if(!i)return;const r=t,c=i.o.get(e),u=i.i,f=r;if(!((l=x(l,s.t[e][0]))===c||Number.isNaN(c)&&Number.isNaN(l))){if(i.o.set(e,l),s.D){const t=s.D[e];t&&t.map((t=>{try{const[[n,o]]=Object.entries(t);(128&u||1&o)&&(f?f[n](l,c,e):i.P.push((()=>{i.R[n](l,c,e)})))}catch(t){o(t,r)}}))}if(2&u){if(f.componentShouldUpdate&&!1===f.componentShouldUpdate(l,c,e)&&!(16&u))return;16&u||I(i,!1)}}},st=(t,e)=>{var l,o;const s=t.prototype;{t.watchers&&!e.D&&(e.D=t.watchers),t.deserializers&&!e.U&&(e.U=t.deserializers),t.serializers&&!e.L&&(e.L=t.serializers);const i=Object.entries(null!=(l=e.t)?l:{});i.map((([t,[l]])=>{if(31&l||32&l){const{get:o,set:i}=Object.getOwnPropertyDescriptor(s,t)||{};o&&(e.t[t][0]|=2048),i&&(e.t[t][0]|=4096),Object.defineProperty(s,t,{get(){return o?o.apply(this):((t,e)=>n(this).o.get(e))(0,t)},configurable:!0,enumerable:!0}),Object.defineProperty(s,t,{set(o){const s=n(this);if(s){if(i)return void 0===(32&l?this[t]:s.$hostElement$[t])&&s.o.get(t)&&(o=s.o.get(t)),i.call(this,x(o,l)),void ot(this,t,o=32&l?this[t]:s.$hostElement$[t],e);ot(this,t,o,e)}}})}}));{const l=new Map;s.attributeChangedCallback=function(t,o,r){c.jmp((()=>{var c;const u=l.get(t),f=n(this);if(this.hasOwnProperty(u),s.hasOwnProperty(u)&&"number"==typeof this[u]&&this[u]==r)return;if(null==u){const n=null==f?void 0:f.i;if(f&&n&&!(8&n)&&r!==o){const l=this,s=null==(c=e.D)?void 0:c[t];null==s||s.forEach((e=>{const[[s,i]]=Object.entries(e);null!=l[s]&&(128&n||1&i)&&l[s].call(l,r,o,t)}))}return}const a=i.find((([t])=>t===u));a&&4&a[1][0]&&(r=null!==r&&"false"!==r);const h=Object.getOwnPropertyDescriptor(s,u);r==this[u]||h.get&&!h.set||(this[u]=r)}))},t.observedAttributes=Array.from(new Set([...Object.keys(null!=(o=e.D)?o:{}),...i.filter((([t,e])=>31&e[0])).map((([t,n])=>{var o;const s=n[1]||t;return l.set(s,t),512&n[0]&&(null==(o=e.k)||o.push([t,s])),s}))]))}}return t},it=(t,l)=>{const i={i:l[0],h:l[1]};try{i.t=l[2],i.N=l[3],i.D=t.D,i.U=t.U,i.L=t.L,i.k=[];const r=t.prototype.connectedCallback,f=t.prototype.disconnectedCallback;return Object.assign(t.prototype,{__hasHostListenerAttached:!1,__registerHost(){((t,n)=>{const l={i:0,$hostElement$:t,l:n,o:new Map,W:new Map};l.H=new Promise((t=>l._=t)),t["s-p"]=[],t["s-rc"]=[];const o=l;t.__stencil__getHostRef=()=>o,512&n.i&&e(t,l)})(this,i)},connectedCallback(){if(!this.__hasHostListenerAttached){const t=n(this);if(!t)return;rt(this,t,i.N),this.__hasHostListenerAttached=!0}(t=>{if(!(1&c.i)){const e=n(t);if(!e)return;const l=e.l,i=()=>{};if(1&e.i)rt(t,e,l.N),(null==e?void 0:e.R)||(null==e?void 0:e.H)&&e.H.then((()=>{}));else{e.i|=1;{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){G(e,e.C=n);break}}l.t&&Object.entries(l.t).map((([e,[n]])=>{if(31&n&&e in t&&t[e]!==Object.prototype[e]){const n=t[e];delete t[e],t[e]=n}})),(async(t,e,n)=>{let l;try{if(!(32&e.i)&&(e.i|=32,l=t.constructor,customElements.whenDefined(t.localName).then((()=>e.i|=128)),l&&l.style)){let t;"string"==typeof l.style&&(t=l.style);const e=S(n);if(!s.has(e)){const l=()=>{};((t,e,n)=>{let l=s.get(t);u&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=e:l.replaceSync(e)):l=e,s.set(t,l)})(e,t,!!(1&n.i)),l()}}const o=e.C,i=()=>I(e,!0);o&&o["s-rc"]?o["s-rc"].push(i):i()}catch(n){o(n,t),e.M&&(e.M(),e.M=void 0),e._&&e._(t)}})(t,e,l)}i()}})(this),r&&r.call(this)},disconnectedCallback(){(async t=>{if(!(1&c.i)){const e=n(t);(null==e?void 0:e.V)&&(e.V.map((t=>t())),e.V=void 0)}O.has(t)&&O.delete(t),t.shadowRoot&&O.has(t.shadowRoot)&&O.delete(t.shadowRoot)})(this),f&&f.call(this)},__attachShadow(){if(this.shadowRoot){if("open"!==this.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${i.h}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else g.call(this,i)}}),Object.defineProperty(t,"is",{value:i.h,configurable:!0}),st(t,i)}catch(e){return o(e),t}},rt=(t,e,n)=>{n&&i.document&&n.map((([n,l,o])=>{const s=ut(i.document,t,n),r=ct(e,o),u=ft(n);c.ael(s,l,r,u),(e.V=e.V||[]).push((()=>c.rel(s,l,r,u)))}))},ct=(t,e)=>n=>{try{t.$hostElement$[e](n)}catch(e){o(e,t.$hostElement$)}},ut=(t,e,n)=>8&n?i:e,ft=t=>({passive:!!(1&t),capture:!!(2&t)}),at=t=>c.A=t,ht=t=>Object.assign(c,t);function dt(t,e){B({l:{i:0,h:e.tagName},$hostElement$:e},t)}function pt(t){return t}export{r as H,C as a,A as c,y as getAssetPath,M as h,it as p,dt as render,w as setAssetPath,at as setNonce,ht as setPlatformOptions,pt as t}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basestack/flags-wc",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./dist/sdk/index.js",
   "module": "./dist/sdk/index.js",
   "dependencies": {