https://account.canapii.com/chunk-QBZO5AYR.js

1import{a as _,b as ee}from"./chunk-OOO2STOU.js";import{c as $}from"./chunk-UZGYBFOB.js";import{d as N,e as W}from"./chunk-BCE55JYA.js";import"./chunk-MYI3YS2M.js";import{Q as U,R as X,X as Y,j as R,l as j,n as G,pa as Z,u as J,y as Q}from"./chunk-TU3JUKDL.js";import"./chunk-6JETGMQG.js";import"./chunk-VRQFSSVW.js";import{e as q,f as z}from"./chunk-RGZN3DMZ.js";import"./chunk-RT33Z4W3.js";import"./chunk-CTTXKPH2.js";import"./chunk-B5NVKW3K.js";import"./chunk-MRC2PHN7.js";import{Bc as C,Bd as K,Cb as M,Cc as b,Dc as x,Ec as l,Fc as e,Gc as t,Hc as d,Id as T,Jb as a,Jd as k,Qc as A,Sa as m,Ta as c,Wb as V,Xc as h,Zc as D,ab as y,bc as v,gc as I,hd as F,ld as i,md as S,nd as E,sd as B,td as L,ud as H,vc as w,xc as O,zc as P}from"./chunk-77LCFR2D.js";import"./chunk-6G35VSEK.js";function ne(n,u){if(n&1&&(e(0,"cnp-button",7),i(1),t()),n&2){let o=u.$implicit;l("variant",o),a(),S(o)}}function re(n,u){if(n&1&&(e(0,"cnp-status-pill",13),i(1),t()),n&2){let o=u.$implicit;l("tone",o),a(),S(o)}}function oe(n,u){if(n&1&&(e(0,"cnp-status-pill",13),i(1),t()),n&2){let o=u.value,s=D();l("tone",s.toneFor(o)),a(),S(o)}}function ae(n,u){if(n&1&&(e(0,"span"),i(1),t()),n&2){let o=D();a(),E("Selected: ",o.lastAction())}}var te=(()=>{class n{constructor(o){this.consoleTheme=o,this.buttonVariants=["primary","secondary","danger","ghost","link"],this.tones=["success","info","neutral","danger"],this.columns=[{key:"name",header:"Name",sortable:!0},{key:"status",header:"Status"},{key:"id",header:"Reference",align:"end"}],this.rows=[{id:"A-1001",name:"Ada Lovelace",status:"Confirmed"},{id:"A-1002",name:"Grace Hopper",status:"Pending"},{id:"A-1003",name:"Katherine Johnson",status:"Declined"}],this.rowActions=[{id:"edit",label:"Edit",icon:"edit"},{id:"copy",label:"Duplicate",icon:"copy"},{separator:!0},{id:"delete",label:"Delete",icon:"delete",danger:!0}],this.lastAction=y(null),this.modalOpen=y(!1),this.theme=y("light"),this.byId=s=>s.id,this.theme.set(this.consoleTheme.theme)}toneFor(o){return o==="Confirmed"?"success":o==="Declined"?"danger":"neutral"}toggleTheme(){this.theme.set(this.consoleTheme.toggle())}static{this.\u0275fac=function(s){return new(s||n)(V($))}}static{this.\u0275cmp=v({type:n,selectors:[["app-design-system-strip"]],decls:69,vars:13,consts:[["field",""],[1,"ds-strip"],[1,"ds-strip-header"],["variant","secondary",3,"click"],[3,"name"],[1,"ds-strip-row"],[1,"ds-strip-items"],[3,"variant"],["name","attendees"],["name","calendar"],["name","settings"],["name","analytics"],["name","check"],[3,"tone"],[1,"ds-strip-field"],["label","Email","controlId","ds-strip-email",3,"required"],["cnpInput","","id","ds-strip-email","type","email"],["ariaLabel","Design system strip",3,"columns","rows","rowKey"],["cnpCell","status"],["ariaLabel","Row actions",3,"select","items"],["name","row-actions"],[3,"click"],["heading","Create attendee","description","The attendee receives a welcome email once created.",3,"openChange","open"],["cnpModalFooter",""]],template:function(s,r){if(s&1){let p=A();e(0,"section",1)(1,"header",2)(2,"h2"),i(3,"Design system strip"),t(),e(4,"p"),i(5," One component from each layer of "),e(6,"code"),i(7,"@canapii/design-system"),t(),i(8,". Compare against the showcase at the same viewport, in both themes \u2014 they should be indistinguishable. "),t(),e(9,"cnp-button",3),h("click",function(){return m(p),c(r.toggleTheme())}),d(10,"cnp-icon",4),i(11),t()(),e(12,"div",5)(13,"h3"),i(14,"Button \u2014 all five variants"),t(),e(15,"div",6),b(16,ne,2,2,"cnp-button",7,C),t()(),e(18,"div",5)(19,"h3"),i(20,"Icon"),t(),e(21,"div",6),d(22,"cnp-icon",8)(23,"cnp-icon",9)(24,"cnp-icon",10)(25,"cnp-icon",11)(26,"cnp-icon",12),t()(),e(27,"div",5)(28,"h3"),i(29,"Status pill"),t(),e(30,"div",6),b(31,re,2,2,"cnp-status-pill",13,C),t()(),e(33,"div",5)(34,"h3"),i(35,"Field with cnpInput"),t(),e(36,"div",14)(37,"cnp-field",15,0),d(39,"input",16),t()()(),e(40,"div",5)(41,"h3"),i(42,"Table \u2014 three rows"),t(),e(43,"cnp-table",17),I(44,oe,2,2,"ng-template",18),t()(),e(45,"div",5)(46,"h3"),i(47,"Dropdown \u2014 portals into the CDK overlay"),t(),e(48,"div",6)(49,"cnp-dropdown",19),h("select",function(g){return m(p),c(r.lastAction.set(g))}),d(50,"cnp-icon",20),t(),O(51,ae,2,1,"span"),t()(),e(52,"div",5)(53,"h3"),i(54,"Modal"),t(),e(55,"div",6)(56,"cnp-button",21),h("click",function(){return m(p),c(r.modalOpen.set(!0))}),i(57,"Open modal"),t()(),e(58,"cnp-modal",22),H("openChange",function(g){return m(p),L(r.modalOpen,g)||(r.modalOpen=g),c(g)}),e(59,"p"),i(60," This modal renders in place behind a focus trap. The dropdown above is the one that portals into the CDK overlay container, which is why the app loads "),e(61,"code"),i(62,"overlay-prebuilt.css"),t(),i(63,". "),t(),e(64,"div",23)(65,"cnp-button",3),h("click",function(){return m(p),c(r.modalOpen.set(!1))}),i(66,"Cancel"),t(),e(67,"cnp-button",21),h("click",function(){return m(p),c(r.modalOpen.set(!1))}),i(68,"Create attendee"),t()()()()()}if(s&2){let p=F(38);w("data-strip-theme",r.theme()),a(10),l("name",r.theme()==="dark"?"sun":"moon"),a(),E(" Switch to ",r.theme()==="dark"?"light":"dark"," theme "),a(5),x(r.buttonVariants),a(15),x(r.tone

1s),a(6),l("required",!0),a(2),w("aria-describedby",p.controlAttrs().describedBy)("aria-invalid",p.controlAttrs().invalid)("aria-required",p.controlAttrs().required),a(4),l("columns",r.columns)("rows",r.rows)("rowKey",r.byId),a(6),l("items",r.rowActions),a(2),P(r.lastAction()?51:-1),a(7),B("open",r.modalOpen)}},dependencies:[j,R,G,Z,J,X,U,Y,Q],styles:[".ds-strip[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:var(--cnp-space-6);padding:var(--cnp-space-6);background:var(--cnp-color-bg-body);color:var(--cnp-color-text-body)}.ds-strip-header[_ngcontent-%COMP%]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--cnp-space-3)}.ds-strip-row[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:var(--cnp-space-3)}.ds-strip-items[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cnp-space-3)}.ds-strip-field[_ngcontent-%COMP%]{max-width:20rem}"]})}}return n})();var Se=(()=>{class n{constructor(){this.text="# Hello, World!!!!",this.file="https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf"}ngOnInit(){}static{this.\u0275fac=function(s){return new(s||n)}}static{this.\u0275cmp=v({type:n,selectors:[["app-dev-playground"]],features:[K([_])],decls:7,vars:8,consts:[[1,"my-4",3,"innerHTML"],[2,"width","70%","height","800px",3,"src","render-text","original-size"]],template:function(s,r){s&1&&(d(0,"app-design-system-strip"),e(1,"p"),i(2,"dev-playground works!"),t(),d(3,"div",0),T(4,"markdown"),T(5,"translate"),d(6,"pdf-viewer",1)),s&2&&(a(3),l("innerHTML",k(5,6,k(4,4,r.text)),M),a(3),l("src",r.file)("render-text",!0)("original-size",!0))},dependencies:[z,W,ee,_,te,q,N],encapsulation:2})}}return n})();export{Se as DevPlaygroundComponent};