iss-ctrl 0.0.2 → 0.0.3

package/projects/playground/public/flags/zw.svg

@@ -0,0 +1,130 @@
+<svg id="svg30" viewBox="0 0 1260 630" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="clip-path">
+      <path d="M0 0h1260v630H0z" fill="none"/>
+    </clipPath>
+    <style>.cls-8 {
+      fill: #ffd200
+    }
+
+    .cls-4 {
+      fill: #d40000
+    }
+
+    .cls-8 {
+      fill-rule: evenodd
+    }</style>
+  </defs>
+  <path d="M0 0h1260v630H0z" fill="#006400" id="path7"/>
+  <path d="M0 90h1260v450H0z" fill="#ffd200" id="path9"/>
+  <path class="cls-4" d="M0 180h1260v270H0z" id="path11"/>
+  <path d="M0 270h1260v90H0z" id="path13"/>
+  <g clip-path="url(#clip-path)">
+    <path d="M0 0v630l420-315z" id="path15" stroke="#000" stroke-width="30"/>
+  </g>
+  <path d="M0 0v630l420-315z" fill="#fff" id="path17"/>
+  <path class="cls-4" d="M159.78 156.62l83.19 256-217.79-158.2h269.2L76.59 412.65z" id="path19"/>
+  <path
+    class="cls-8"
+    d="M152.88 218.67a14.16 14.16 0 00-22.58 1.66 39.57 39.57 0 00-7.61.56 7.86 7.86 0 00-5.93 10.74l8.59-.51a11.53 11.53 0 015.86 9.7l1 34.13a24.54 24.54 0 00-2.45 11 101.46 101.46 0 001.09 13.7 14.74 14.74 0 01-4 12.45 86 86 0 00-12.93 17 13.09 13.09 0 001.14 14.9l9.78 37.86h73.45l4.08-32.12a45.72 45.72 0 0121.18-33.05l2.89.82a4.22 4.22 0 003.75-7.38l-69.48-54.34-1.83-22.86a24.69 24.69 0 00-6-14.26"
+    id="path636"
+  />
+  <path
+    d="M152.17 219.29l-.06-.07 1.41-1.24.06.07zm-.06-.07a15.48 15.48 0 00-1.22-1.21l1.23-1.42a15.3 15.3 0 011.4 1.39zm0-2.63l-.62.71zm-1.22 1.41a13.25 13.25 0 00-1.36-1l1-1.57a15.27 15.27 0 011.56 1.19zm-1.36-1a13.22 13.22 0 00-8.29-2.16l-.13-1.89a15.12 15.12 0 019.46 2.48zm-8.29-2.16h-.09l-.13-1.88h.09zm-.23-1.88l.07.94zm.15 1.88a12.78 12.78 0 00-1.71.25l-.39-1.85a15.26 15.26 0 011.95-.28zm-1.71.25a12.82 12.82 0 00-1.64.46l-.63-1.77a15 15 0 011.88-.54zm-1.64.46a13.22 13.22 0 00-6.71 5.32l-1.59-1a15.05 15.05 0 017.67-6.08zm-6.71 5.32l-.82.44v-.95zm-.82.44H130v-1.88h.28l-.05 1.89zm-.25 0zm0 0h-1v-1.89h1.08zm-1 0h-1l-.07-1.88h1.08zm-1 0a37.82 37.82 0 00-5.11.53l-.31-1.86a40.43 40.43 0 015.35-.55zm-5.11.53l-.42-1.84.31 1.86zm-.36-1.85l.16.93-.17-.93zm.33 1.86a7 7 0 00-.85.2l-.55-1.8a8.33 8.33 0 011.07-.26zm-.85.2a6.72 6.72 0 00-.81.31l-.77-1.72a9.58 9.58 0 011-.39zm-1.59-1.41l.38.86zm.79 1.72a6.91 6.91 0 00-3.19 2.95l-1.65-.91a8.83 8.83 0 014-3.76zm-4.85 2l.82.45zm1.66.89v.1l-1.66-.9v-.09zm-1.71-.79l.83.45-.83-.44zm1.66.88a8.2 8.2 0 00-.36.79l-1.76-.67a8.75 8.75 0 01.46-1zm-2.12.13l.88.34-.88-.33zm1.76.66a8 8 0 00-.26.83l-1.82-.45a7.79 7.79 0 01.32-1zm-2.08.38l.91.22zm1.82.44a7 7 0 00.33 4.29l-1.74.71a8.77 8.77 0 01-.41-5.44zm-.49 5.59l-.92-.59.87-.36zm-.11-1.89l8.59-.51.11 1.89-8.59.51zm8.59-.51l.51.12-.45.83zm.51.12l.22.13-1 1.62-.17-.1.91-1.65zm.22.13a12.54 12.54 0 011.48 1l-1.18 1.47a9.38 9.38 0 00-1.26-.87zm1.48 1a13.68 13.68 0 011.3 1.22l-1.37 1.28a9.88 9.88 0 00-1.11-1zm1.3 1.22a12.42 12.42 0 013.34 8.14h-1.88a10.63 10.63 0 00-2.83-6.91zm3.34 8.14l1 34.13-1.88.05-1-34.13zm1 34.13l-.09.43-.85-.41h.94zm-.09.43c-.06.12-.14.28-.21.45l-1.71-.79c.06-.14.13-.28.22-.47zm-1.92-.34l.85.39-.85-.39zm1.71.78c-.21.46-.41.93-.59 1.4l-1.75-.67c.19-.5.4-1 .63-1.51zm-2.35.73l.88.33zm1.76.67c-.18.47-.34.95-.49 1.43l-1.8-.56c.16-.52.34-1 .53-1.54zm-.49 1.43a23.51 23.51 0 00-1.07 7.32h-1.88a25.15 25.15 0 011.15-7.9l1.8.56zm-1.17 7.42v.49h-1.89V286h1.88zm0 .49v1.89l-1.88.07c0-.63 0-1.27-.06-1.93h1.89zm0 1.89q0 .9.09 1.89l-1.89.1c0-.61-.06-1.26-.08-1.92zm.09 1.89q.26 4.69.93 9.3l-1.86.27c-.47-3.15-.79-6.32-1-9.47zm.93 9.3v.05l-1.86.27zm0 .05l-.93.13zm0 0a15.56 15.56 0 01.16 2h-1.88a15.24 15.24 0 00-.14-1.79l1.86-.26zm.16 2a15 15 0 01-.1 2l-1.75-.22a17.39 17.39 0 00.09-1.78h1.88zm-.1 2a15.69 15.69 0 01-4.38 9.16l-1.34-1.32a13.82 13.82 0 003.97-8.06zm-4.38 9.16l-.67-.67zm0 0s.16-.21.11-.13l-1.57-1a.72.72 0 01.13-.15zm.11-.13l-.11.13-.67-.66zm-.11.13q-1 1-2 2.16l-1.37-1.28c.64-.7 1.33-1.43 2.09-2.2zm-3.43.88l.7.64zm1.39 1.27c-.68.75-1.33 1.49-2 2.22l-1.33-1.22c.67-.78 1.34-1.54 2-2.27zm-3.39 1l.72.61-.72-.61zm1.44 1.22a85.09 85.09 0 00-8.79 12.4l-1.63-.94a87.7 87.7 0 019-12.68zM113 328.61l.82.47-.82-.47zm1.63.94v.06l-1.64-.94v-.06zm0 .06a12.15 12.15 0 00-.89 1.91l-1.77-.64a14.31 14.31 0 011-2.21zm-.89 1.91a11.73 11.73 0 00-.54 2l-1.85-.33a14.21 14.21 0 01.62-2.3zm-.54 2a12.15 12.15 0 002.59 9.89l-1.45 1.2a14 14 0 01-3-11.42zm2.59 9.89l.18.36-.91.24zm.18.36l9.79 37.87-1.82.47-9.79-37.86zm8.88 39.05l-.91-.71.91-.24zm0-1.89h73.45v1.89h-73.45zm74.38 1.07l-.93.83v-.95zm-1.86-.23l4.07-32.13 1.87.23-4.08 32.13zm5.94-31.9l-.93-.11zm-1.87-.23v-.05l1.87.24c0 .25 0-.11 0 0l-1.87-.23zm1.87.19l-.93-.12.93.11zm-1.86-.24a46.57 46.57 0 011.1-5.74l1.83.46a45.19 45.19 0 00-1.07 5.52zm1.1-5.74a48.56 48.56 0 011.79-5.51l1.76.69a44.57 44.57 0 00-1.72 5.28zm1.79-5.51a46.64 46.64 0 0118.71-22.42l1 1.59a44.74 44.74 0 00-18 21.52zm18.71-22.42l.76-.11-.26.9zm.76-.11l2.89.82-.51 1.81-2.89-.82zm2.89.82l-.26.91zm0 0l-.51 1.81zm-.49 1.82l.25-.91zm.51-1.82a3 3 0 00.63.11l-.14 1.89a6.62 6.62 0 01-1-.18zm.63.11a4.32 4.32 0 00.63 0l.22 1.87a5.49 5.49 0 01-1 0zm.63 0a3.3 3.3 0 002.54-1.77l1.68.85a5.17 5.17 0 01-4 2.79zm4.22-.93l-.84-.43zm-1.69-.84l1.68.84zm0 0a3 3 0 00.23-.6l1.81.5a5.36 5.36 0 01-.36.94zm2.05-.11l-.9-.25zm-1.82-.49a3.21 3.21 0 00.1-.62l1.89.14a5 5 0 01-.17 1zm2-.49l-.94-.07zm-1.89-.13a3.28 3.28 0 00-1.24-2.83l1.15-1.48a5.15 5.15 0 012 4.44zm-1.24-2.83l-69.49-54.33 1.16-1.49 69.48 54.34zm-69.49-54.33l-.36-.67.94-.08zm-.36-.67L157.94 233l1.89-.15 1.83 22.87zM157.94 233v-.08l1.89-.15v.08zm1.88-.23l-.94.08zm-1.88.15c-.06-.74-.15-1.44-.27-2.11l1.86-.31c.13.78.23 1.54.29 2.27zm-.27-2.11a21.08 21.08 0 00-.46-2.06l1.82-.49c.2.73.37 1.48.5 2.24zm-.46-2.06a23.71 23.71 0 00-5-9.46l1.42-1.24a25.59 25.59 0 015.37 10.21"
+    id="path638"
+  />
+  <path
+    d="M152.69 280.72l-1.81-.55v-.11l1.78.62zm0 0l-.9-.29zm0 0a13 13 0 00-.41 1.5l-1.84-.38a13.42 13.42 0 01.46-1.71zm-.41 1.5a12.05 12.05 0 00-.23 1.53l-1.87-.17a14.31 14.31 0 01.26-1.74zm-.23 1.53a13.55 13.55 0 001.51 7.63l-1.67.88a15.56 15.56 0 01-1.71-8.68zm1.51 7.63l-1.67.88 1.67-.88zm0 0a11.36 11.36 0 00.81 1.34l-1.56 1.06a16.59 16.59 0 01-.92-1.52zm.81 1.34a14.26 14.26 0 00.94 1.23l-1.42 1.22a14.37 14.37 0 01-1.08-1.39zm.94 1.23a13.65 13.65 0 006.6 4.19l-.51 1.82a15.45 15.45 0 01-7.51-4.79"
+    id="path870"
+  />
+  <path d="M161.24 256.57l-28.52 19.49-1.07-1.55L160.18 255" id="path872"/>
+  <path class="cls-8" d="M145.54 225.66a3.74 3.74 0 10-3.74 3.74 3.74 3.74 0 003.74-3.74" id="path874"/>
+  <path
+    d="M144.6 225.66zm0 0a2.75 2.75 0 00-.82-2l1.33-1.34a4.67 4.67 0 011.38 3.31zm-.82-2a2.75 2.75 0 00-2-.82V221a4.66 4.66 0 013.29 1.37l-1.32 1.34zm-2-2.71zm0 1.89V221zm0 0V221zm0 0a2.75 2.75 0 00-2 .82l-1.33-1.33a4.65 4.65 0 013.3-1.38zm-2 .82a2.83 2.83 0 00-.82 2h-1.88a4.6 4.6 0 011.37-3.29l1.33 1.32zm-2.7 2zm1.88 0h-1.88zm0 0zm0 0a2.81 2.81 0 00.82 2l-1.29 1.34a4.71 4.71 0 01-1.37-3.31zm.82 2a2.83 2.83 0 002 .82v1.88a4.66 4.66 0 01-3.29-1.37l1.33-1.33zm2 2.7zm0-1.88v1.88zm0 0v1.88zm0 0a2.83 2.83 0 002-.82l1.34 1.32a4.67 4.67 0 01-3.31 1.38zm2-.82a2.81 2.81 0 00.82-2h1.89a4.72 4.72 0 01-1.37 3.29l-1.34-1.33zm2.71-2zm-1.89 0h1.89"
+    id="path876"
+  />
+  <path
+    d="M138 315h.07l.84 1.69h-.06L138 315zm.91 1.65l-.42-.84zM138 315a14.86 14.86 0 002.17-1.34l1.12 1.51a16.43 16.43 0 01-2.45 1.51zm2.17-1.34a15 15 0 001.93-1.66l1.35 1.31a16.51 16.51 0 01-2.12 1.86zm1.93-1.66a15.08 15.08 0 004.14-11.74l1.89-.16a17 17 0 01-4.68 13.21"
+    id="path878"
+  />
+  <path
+    d="M150.92 295.09h-.07l-.84-1.69h.07l.84 1.69zm-.92-1.65l.42.85zm.86 1.68a4.31 4.31 0 00-.73.45l-1.13-1.51a6.6 6.6 0 011-.62zm-.73.45a4.84 4.84 0 00-.63.56l-1.36-1.3a8 8 0 01.86-.77zm-.63.56a5.07 5.07 0 00-1.37 3.94l-1.89.16a6.92 6.92 0 011.9-5.4"
+    id="path880"
+  />
+  <path
+    d="M161.51 322.76l-.7-1.74zm0 0l-3 1.24-.72-1.74 3-1.24zm-3 1.24c-1 .41-2 .84-3 1.26l-.74-1.73c1-.43 2-.86 3-1.27zm-3 1.26q-7.69 3.28-15.23 7l-.83-1.69q7.56-3.71 15.32-7"
+    id="path882"
+  />
+  <path
+    d="M160.82 321l.68 1.76zm.73 1.74l-.34-.87zm-.71-1.75a22.26 22.26 0 003.06-1.5l.95 1.63a25.85 25.85 0 01-3.3 1.62zm3.06-1.5a23.08 23.08 0 002.78-1.89l1.18 1.48a26.9 26.9 0 01-3 2zm2.78-1.89a24 24 0 008.72-14.48l1.85.34a25.79 25.79 0 01-9.39 15.62"
+    id="path884"
+  />
+  <path d="M151.54 325h61.3v1.89h-61.3" id="path886"/>
+  <path class="cls-8" d="M165.67 337.44a7.11 7.11 0 10-7.11 7.11 7.11 7.11 0 007.11-7.11" id="path888"/>
+  <path
+    d="M164.73 337.44zm0 0a6.16 6.16 0 00-1.81-4.35l1.33-1.34a8 8 0 012.36 5.69zm-.48-5.69l-.67.67.67-.67zm-1.33 1.34a6.13 6.13 0 00-4.34-1.8v-1.89a8 8 0 015.67 2.35zm-4.34-1.8v-1.89zm0 0v-1.89zm0 0a6.14 6.14 0 00-4.36 1.8l-1.33-1.33a8 8 0 015.69-2.36zm-4.36 1.8a6.13 6.13 0 00-1.8 4.34h-1.89a8.07 8.07 0 012.36-5.67zm-1.8 4.34h-1.89zm0 0zm0 0a6.14 6.14 0 001.8 4.35l-1.32 1.34a8.09 8.09 0 01-2.37-5.69zm1.8 4.35a6.15 6.15 0 004.35 1.8v1.89a8 8 0 01-5.67-2.35zm4.35 1.8v1.89zm0 0v1.89zm0 0a6.14 6.14 0 004.35-1.8l1.34 1.33a8.06 8.06 0 01-5.69 2.36zm5.69-.47l-.67-.67.67.66zm-1.34-1.33a6.18 6.18 0 001.81-4.34h1.88a8 8 0 01-2.35 5.67zm1.81-4.34h1.88"
+    id="path890"
+  />
+  <path class="cls-8" d="M194 337.44a7.11 7.11 0 10-7.11 7.11 7.12 7.12 0 007.11-7.11" id="path892"/>
+  <path
+    d="M193 337.44zm0 0a6.12 6.12 0 00-1.81-4.35l1.34-1.34a8.06 8.06 0 012.36 5.69zm-.47-5.69l-.67.67.66-.67zm-1.33 1.34a6.13 6.13 0 00-4.34-1.8v-1.89a8 8 0 015.67 2.35zm-4.34-1.8v-1.89zm0 0v-1.89zm0 0a6.14 6.14 0 00-4.35 1.8l-1.34-1.33a8.06 8.06 0 015.69-2.36zm-4.35 1.8a6.13 6.13 0 00-1.8 4.34h-1.89a8 8 0 012.35-5.67zm-1.8 4.34h-1.89zm0 0zm0 0a6.14 6.14 0 001.8 4.35l-1.33 1.34a8 8 0 01-2.36-5.69zm1.8 4.35a6.13 6.13 0 004.34 1.8v1.89a8 8 0 01-5.67-2.35zm4.34 1.8v1.89zm0 0v1.89zm0 0a6.15 6.15 0 004.35-1.8l1.33 1.33a8 8 0 01-5.68 2.36zm5.68-.47l-.66-.67.66.66zm-1.33-1.33a6.13 6.13 0 001.8-4.34h1.89a8 8 0 01-2.36 5.67zm1.8-4.34h1.89"
+    id="path894"
+  />
+  <path
+    d="M172.41 312.32l1 .28-.48 1.82-1-.29zm1 .28c.53.14 1 .27 1.51.38l-.41 1.83c-.55-.12-1.08-.25-1.58-.39zm1.51.38c.51.11 1 .22 1.52.31l-.34 1.85q-.81-.15-1.59-.33zm1.52.31a38.51 38.51 0 007.21.63v1.89a40.87 40.87 0 01-7.56-.67"
+    id="path896"
+  />
+  <path
+    d="M183.64 313.92c.33 0 .65 0 1-.05l.19 1.88c-.39 0-.77.06-1.13.06v-1.89zm1-.05l.09.94-.1-.94zm0 0a10.67 10.67 0 001.58-.28l.48 1.82a13 13 0 01-1.88.34zm1.58-.28a10.17 10.17 0 001.49-.53l.76 1.73a12 12 0 01-1.77.62zm1.49-.53a10.11 10.11 0 005.2-5.2l1.72.75a12 12 0 01-6.16 6.18"
+    id="path898"
+  />
+  <path d="M223.29 317.6l-61.9-17.6.51-1.82 61.9 17.57" id="path900"/>
+  <path d="M116.3 347.88h86.2v1.88h-86.2" id="path902"/>
+  <path d="M136.2 366.61h63.91v1.88H136.2" id="path904"/>
+  <path d="M166.08 360.2l-7 6.88-1.32-1.34 7-6.88" id="path906"/>
+  <path d="M152.79 359.53l7 6.88-1.32 1.34-7-6.88" id="path908"/>
+  <path d="M153.45 360.2l-7 6.88-1.32-1.34 7-6.88" id="path910"/>
+  <path d="M140.16 359.53l7 6.88-1.32 1.34-7-6.88" id="path912"/>
+  <path d="M178.71 360.2l-7 6.88-1.32-1.34 7-6.88" id="path914"/>
+  <path d="M165.42 359.53l7 6.21-1.32 1.34-7-6.21" id="path916"/>
+  <path d="M191.34 360.2l-7 6.88-1.34-1.34 7-6.88" id="path918"/>
+  <path d="M178.05 359.53l7 6.21-1.31 1.34-7-6.21" id="path920"/>
+  <path d="M201.47 362.68l-4.48 4.4-1.31-1.34 4.47-4.4" id="path922"/>
+  <path d="M190.68 359.53l7 6.88-1.31 1.34-7-6.88" id="path924"/>
+  <path d="M166.08 350.63l-7 6.88-1.32-1.34 7-6.88" id="path926"/>
+  <path d="M152.79 350l7 6.88-1.32 1.34-7-6.88" id="path928"/>
+  <path d="M153.45 350.63l-7 6.88-1.32-1.34 7-6.88" id="path930"/>
+  <path d="M140.16 350l7 6.88-1.32 1.34-7-6.88" id="path932"/>
+  <path d="M178.71 350.63l-7 6.88-1.32-1.34 7-6.88" id="path934"/>
+  <path d="M165.42 350l7 6.88-1.32 1.34-7-6.88" id="path936"/>
+  <path d="M191.34 350.63l-7 6.88-1.34-1.34 7-6.88" id="path938"/>
+  <path d="M178.05 350l7 6.88-1.31 1.34-7-6.88" id="path940"/>
+  <path d="M202.86 351.75l-5.86 5.76-1.31-1.34 5.86-5.76" id="path942"/>
+  <path d="M190.68 350l7 6.88-1.31 1.34-7-6.88" id="path944"/>
+  <path d="M133.66 231.57l-8.25.49-.11-1.89 8.25-.49" id="path946"/>
+  <path
+    d="M138.8 316.69L138 315l.81 1.7zM138 315l.41.85zm.84 1.69a27.78 27.78 0 00-4.47 2.79l-1.15-1.5a30.67 30.67 0 014.78-3zm-4.47 2.79a27.4 27.4 0 00-3.79 3.5l-1.4-1.26a30 30 0 014-3.74zm-3.79 3.5a27.88 27.88 0 00-6.58 24.63l-1.84.4a29.75 29.75 0 016.93-26.28"
+    id="path948"
+  />
+  <path
+    d="M140.25 332.24l-.12.06-.82-1.7.11-.05zm-.95-1.63l.41.85zm.84 1.69a16.68 16.68 0 00-2.27 1.37l-1.11-1.52a17.71 17.71 0 012.54-1.54zm-2.27 1.37a16.25 16.25 0 00-2 1.7l-1.34-1.32a17.43 17.43 0 012.21-1.9zm-2 1.7a16.52 16.52 0 00-4.62 12.3l-1.86.06a18.29 18.29 0 015.14-13.68"
+    id="path950"
+  />
+  <path
+    d="M118.12 338.77l-1.77-.12 1.77.12zm-1.79.57l1.8-.56-1.78-.13zm1.8-.56c.13.46.29.91.46 1.36l-1.75.68c-.19-.49-.36-1-.51-1.48zm.46 1.36c.17.44.37.88.57 1.3l-1.68.83a15.57 15.57 0 01-.64-1.45zm.57 1.3a16.55 16.55 0 004.55 5.63l-1.17 1.48a18.33 18.33 0 01-5.06-6.28"
+    id="path952"
+  />
+  <path d="M118.08 339.4l-2.16 5-1.73-.75 2.16-5" id="path954"/>
+  <path
+    d="M122.2 348l.09-.64 1.68.84zm1.77.2l-1.67-.85zm-1.67-.85c.23-.45.45-.88.66-1.31l1.69.83-.68 1.35zm.66-1.31l.63-1.31 1.7.78c-.24.52-.45 1-.64 1.36zm.63-1.31a56.72 56.72 0 002.67-7l1.79.55a56.93 56.93 0 01-2.76 7.23"
+    id="path956"
+  />
+  <path
+    d="M129.41 347.73l1.83-.42zm1.83-.45l-.92.21.92-.21zm-1.84.43c-.11-.49-.23-.95-.33-1.34l1.82-.47c.13.5.25 1 .35 1.38zm-.33-1.34c-.1-.38-.22-.82-.37-1.33l1.82-.52c.11.39.23.85.37 1.38zm1.44-1.85l-.91.26.9-.26zm-1.8.52a53.83 53.83 0 00-2.41-6.64v-.66l1.76-.1a54.18 54.18 0 012.49 6.88"
+    id="path958"
+  />
+  <path d="M138 381.66l-2.73-14.05 1.85-.36 2.73 14.05" id="path960"/>
+  <path d="M135.31 367.85l-6.41-18.73 1.78-.6 6.41 18.73" id="path962"/>
+  <path d="M140.82 360.2l-5 4.95-1.32-1.34 5-4.95" id="path964"/>
+  <path d="M140.82 350.63l-7.46 7.37-1.36-1.35 7.46-7.36" id="path966"/>
+</svg>

package/projects/playground/src/app/app.component.ts

@@ -0,0 +1,119 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit} from "@angular/core";
+import {FormControl, ReactiveFormsModule} from "@angular/forms";
+import {MatButton} from "@angular/material/button";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {MatToolbar} from "@angular/material/toolbar";
+import {RouterLink, RouterOutlet} from "@angular/router";
+import {JSEncrypt} from "jsencrypt";
+import {switchMap, tap} from "rxjs";
+import {InputControl} from "../../../iss/src/components/controls/input/input.control";
+import {LoginService} from "./login.service";
+
+@Component({
+  selector: "app-root",
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    MatToolbar,
+    MatButton,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger,
+    InputControl,
+    ReactiveFormsModule,
+  ],
+  template: `
+    <ds-icon icon="info" [style.display]="'none'"></ds-icon>
+    <mat-toolbar>
+      <!--      <mat-toolbar-row class="d-flex flex-row align-items-center" style="width: 100%">-->
+      <div>
+        <button mat-button [matMenuTriggerFor]="controlsMenu">Controls</button>
+        <mat-menu #controlsMenu="matMenu">
+          <a mat-menu-item [routerLink]="['select']">Select</a>
+          <a mat-menu-item [routerLink]="['attachment']">Attachment</a>
+          <a mat-menu-item [routerLink]="['date']">Date Picker</a>
+          <a mat-menu-item [routerLink]="['time']">Time Picker</a>
+          <a mat-menu-item [routerLink]="['datetime']">Datetime Picker</a>
+          <a mat-menu-item [routerLink]="['date-range']">Date Range Picker</a>
+          <a mat-menu-item [routerLink]="['mobile']">Mobile</a>
+          <a mat-menu-item [routerLink]="['plate']">Plate</a>
+          <a mat-menu-item [routerLink]="['chips']">Chips</a>
+          <a mat-menu-item [routerLink]="['input']">Input</a>
+          <a mat-menu-item [routerLink]="['textarea']">Textarea</a>
+        </mat-menu>
+        |
+        <button mat-button [matMenuTriggerFor]="WrappersMenu">Wrappers</button>
+        <mat-menu #WrappersMenu="matMenu">
+          <a mat-menu-item [routerLink]="['outlet']">Outlet</a>
+          <a mat-menu-item [routerLink]="['inputWrapper']">inputWrapper</a>
+          <a mat-menu-item [routerLink]="['select-wrapper']">select wrapper</a>
+          <a mat-menu-item [routerLink]="['date-wrapper']">Date Picker</a>
+          <a mat-menu-item [routerLink]="['date-range-wrapper']">Date Range Picker</a>
+          <a mat-menu-item [routerLink]="['checkbox']">Checkbox</a>
+          <a mat-menu-item [routerLink]="['radio']">Radio</a>
+          <a mat-menu-item [routerLink]="['textarea-wrapper']">textarea wrapper</a>
+          <a mat-menu-item [routerLink]="['plate-wrapper']">plate wrapper</a>
+          <a mat-menu-item [routerLink]="['chips-wrapper']">Chips</a>
+          <a mat-menu-item [routerLink]="['note']">Note</a>
+          <a mat-menu-item [routerLink]="['slideToggle']">Slide Toggle</a>
+          <a mat-menu-item [routerLink]="['toggle']">Toggle</a>
+          <a mat-menu-item [routerLink]="['time-wrapper']">Time</a>
+          <a mat-menu-item [routerLink]="['mobile-wrapper']">Mobile</a>
+          <a mat-menu-item [routerLink]="['table']">Ctrl Array</a>
+          <a mat-menu-item [routerLink]="['attachment-wrapper']">Attachment</a>
+          <a mat-menu-item [routerLink]="['user-picker']">User Picker</a>
+          <a mat-menu-item [routerLink]="['datetime-wrapper']">Date Time</a>
+        </mat-menu>
+        |
+        <button mat-button [matMenuTriggerFor]="servicesMenu">Services</button>
+        <mat-menu #servicesMenu="matMenu">
+          <a mat-menu-item [routerLink]="['mhv/create']">mhv</a>
+        </mat-menu>
+      </div>
+      <span style="flex: 1 1 auto;"></span>
+      <iss-ctrl-input [formControl]="ctrl" [suffixIcon]="'send-message-o'" (onSuffixClick)="login()" [min]="5" />
+      <!--      </mat-toolbar-row>-->
+    </mat-toolbar>
+
+    <div style="margin: 3rem; padding: 2rem; background: lightgrey">
+      <router-outlet />
+      <hr />
+    </div>
+  `,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppComponent implements OnInit {
+  srv = inject(LoginService);
+  PASSWORD_ENCRYPTION_KEY = "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAobRR48UXQY0wPCxW/m5/Qu0zAXwhbDUToyWmlULxf51dwSJ+/j2Z8Cc/BpBMIcvzZ3jxxjOaHZGdjzDfUe0VAfWHIZIVA3kCqj9N5NB2wM9F6ZLhxCjGVVWYpfyqa06BZgB4+WM4GbMLYRRDImonYOavms4laGUyevRGRLz2mdQqAylRqV6bNC3h9mYbjWrVkuVHuvG73JyHm+qaoFc5M1HJx7VUteVjA1C++0wcZKVh8nRPGibYXVPjXWLePw+kYgeISFGMq+5k7ksyTlfwEnrhdzmm8k3gVuAIT+fg+vvFElezzXFsRKQDIxFih8NCFGbS99hMYSqo0z06JRn23wIDAQAB";
+  ctrl = new FormControl();
+
+  ngOnInit() {
+    this.ctrl.setValue("ifawzy.c@stc.com.sa");
+  }
+
+  login() {
+    const credentials = {
+      username: this.ctrl.getRawValue(),
+      password: this.encrypt("stc123"),
+    };
+    this.srv.login(credentials).pipe(
+      switchMap((res: any) => {
+        return this.srv.getProfile(res.email).pipe(
+          tap((res: any) => {
+            localStorage.setItem("profile", JSON.stringify(res));
+          })
+        );
+      })
+    ).subscribe();
+  }
+
+  encrypt(str: string) {
+    const encrypt = new JSEncrypt({default_key_size: "2048"});
+    encrypt.setPublicKey(this.PASSWORD_ENCRYPTION_KEY);
+    const encryptedStr = encrypt.encrypt(str);
+    if (typeof encryptedStr === "string") {
+      return encryptedStr;
+    }
+    return "";
+  }
+}

package/projects/playground/src/app/app.config.ts

@@ -0,0 +1,51 @@
+import {provideHttpClient, withInterceptors, withInterceptorsFromDi} from "@angular/common/http";
+import {ApplicationConfig, provideZoneChangeDetection} from "@angular/core";
+import {provideRouter, withComponentInputBinding} from "@angular/router";
+import {API_RESPONSE_MAPPER} from "../../../iss/src/shared/tokens/api-response-mapper.token";
+import {ATTACHMENT_DOWNLOAD_URL, ATTACHMENT_UPLOAD_RESPONSE_MAPPER, ATTACHMENT_UPLOAD_URL} from "../../../iss/src/shared/tokens/attachment.token";
+import {HOST} from "../../../iss/src/shared/tokens/host.token";
+import {UI_LANGUAGE} from "../../../iss/src/shared/tokens/language.token";
+import {USER_SEARCH_URL} from "../../../iss/src/shared/tokens/url.token";
+import {authInterceptor} from "../interceptors/header.interceptor";
+
+import {routes} from "./app.routes";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({eventCoalescing: true}),
+    provideRouter(routes, withComponentInputBinding()),
+    {provide: UI_LANGUAGE, useValue: "en"},
+    {provide: HOST, useValue: "https:ss-webdev.stc.com.sa"},
+    {provide: USER_SEARCH_URL, useValue: "https://ss-webdev.stc.com.sa/v1/private/users/search?_q={username}"},
+    {provide: ATTACHMENT_UPLOAD_URL, useValue: "https://ss-webdev.stc.com.sa/v1/private/attachments/upload"},
+    {provide: ATTACHMENT_UPLOAD_RESPONSE_MAPPER, useFactory: () => attachmentUploadResponseMapper},
+    {provide: API_RESPONSE_MAPPER, useFactory: () => apiResponseMapper},
+    {provide: ATTACHMENT_DOWNLOAD_URL, useValue: "https://ss-webdev.stc.com.sa/v1/private/attachments/download/{fileId}"},
+    provideHttpClient(withInterceptorsFromDi(), withInterceptors([authInterceptor])),
+  ]
+};
+
+export function apiResponseMapper(res: any) {
+  return res.data.map((item: any) => item?.data);
+}
+
+export function attachmentUploadResponseMapper(res: any) {
+  return res.data.map((attachment: any) => ({
+    id: `${attachment.id}`,
+    name: attachment.fileName,
+    type: attachment.contentType,
+    size: attachment.size,
+  }));
+}
+
+export function attachmentDownloadResponseMapper(res: any) {
+  let fileNameHeader = res.headers.get("content-disposition");
+  let fileName = "";
+  if (fileNameHeader) {
+    fileName = decodeURIComponent(fileNameHeader.split(";")[1].split("=")[1].replaceAll("\"", ""));
+  }
+  return {
+    name: fileName,
+    file: res.body,
+  };
+}

package/projects/playground/src/app/app.routes.ts

@@ -0,0 +1,41 @@
+import {Routes} from "@angular/router";
+
+export const routes: Routes = [
+  {path: "select", loadComponent: (): Promise<any> => import("../components/select-container.component")},
+  {path: "select-wrapper", loadComponent: (): Promise<any> => import("../components/select-wrapper.component")},
+  {path: "attachment", loadComponent: (): Promise<any> => import("../components/attachment.component")},
+  {path: "date", loadComponent: (): Promise<any> => import("../components/date-picker-container.component")},
+  {path: "date-wrapper", loadComponent: (): Promise<any> => import("../components/date-picker-wrapper.component")},
+  {path: "time", loadComponent: (): Promise<any> => import("../components/time-picker-container.component")},
+  {path: "datetime", loadComponent: (): Promise<any> => import("../components/datetime-container.component")},
+  {path: "date-range", loadComponent: (): Promise<any> => import("../components/date-range-picker-container.component")},
+  {path: "date-range-wrapper", loadComponent: (): Promise<any> => import("../components/date-range-picker-wrapper.component")},
+  {path: "mobile", loadComponent: (): Promise<any> => import("../components/mobile-container.component")},
+  {path: "plate", loadComponent: (): Promise<any> => import("../components/plate-container.component")},
+  {path: "chips", loadComponent: (): Promise<any> => import("../components/ships-container.component")},
+  {path: "input", loadComponent: (): Promise<any> => import("../components/input-container.component")},
+  {path: "textarea", loadComponent: (): Promise<any> => import("../components/textarea-container.component")},
+  {path: "outlet", loadComponent: (): Promise<any> => import("../components/outlet-container.component")},
+  {path: "inputWrapper", loadComponent: (): Promise<any> => import("../components/input-wrapper.component")},
+  {path: "checkbox", loadComponent: (): Promise<any> => import("../components/checkbox-wrapper.component")},
+  {path: "radio", loadComponent: (): Promise<any> => import("../components/radio-wrapper.component")},
+
+  {path: "textarea-wrapper", loadComponent: (): Promise<any> => import("../components/textarea-wrapper.component")},
+  {path: "plate-wrapper", loadComponent: (): Promise<any> => import("../components/plate-wrapper.component")},
+  {path: "chips-wrapper", loadComponent: (): Promise<any> => import("../components/chips-wrapper.component")},
+  {path: "note", loadComponent: (): Promise<any> => import("../components/note-wrapper.component")},
+  {path: "slideToggle", loadComponent: (): Promise<any> => import("../components/slide-toggle-wrapper.component")},
+  {path: "toggle", loadComponent: (): Promise<any> => import("../components/toggle-button-wrapper.component")},
+  {path: "time-wrapper", loadComponent: (): Promise<any> => import("../components/time-picker-wrapper.component")},
+  {path: "table", loadComponent: (): Promise<any> => import("../components/ctrl-array-wrapper.component")},
+  {path: "mobile-wrapper", loadComponent: (): Promise<any> => import("../components/mobile-wrapper.component")},
+  {path: "attachment-wrapper", loadComponent: (): Promise<any> => import("../components/attachment-wrapper.component")},
+  {path: "user-picker", loadComponent: (): Promise<any> => import("../components/user-picker-wrapper.component")},
+  {path: "datetime-wrapper", loadComponent: (): Promise<any> => import("../components/datetime-picker-wrapper.component")},
+
+  {path: ":code", loadComponent: (): Promise<any> => import("../eServices/e-service.component")},
+  {path: ":code/create", loadComponent: (): Promise<any> => import("../eServices/create-request.component")},
+  {path: ":requestId/view", loadComponent: (): Promise<any> => import("../eServices/view-request.component")},
+
+  {path: "", redirectTo: "select", pathMatch: "full"},
+];

package/projects/playground/src/app/login.service.ts

@@ -0,0 +1,21 @@
+import {HttpClient} from "@angular/common/http";
+import {inject, Injectable} from "@angular/core";
+import {map, tap} from "rxjs";
+
+@Injectable({providedIn: "root"})
+export class LoginService {
+  #http: HttpClient = inject(HttpClient);
+
+  login(credentials: any) {
+    return this.#http.post(`https://ss-webdev.stc.com.sa/v1/public/auth/signin`, credentials).pipe(
+      tap((response: any) => {
+        localStorage.setItem("token", response["accessToken"]);
+        localStorage.setItem("username", credentials.username);
+      }),
+    );
+  }
+
+  getProfile(email: string) {
+    return this.#http.get(`https://ss-webdev.stc.com.sa/v1/private/users/${email}`).pipe(map((res: any) => res?.data));
+  }
+}

package/projects/playground/src/components/attachment-wrapper.component.ts

@@ -0,0 +1,45 @@
+import {Component} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+@Component({
+  selector: "app-attachment-wrapper",
+  imports: [
+    Outlet,
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field"/>
+    </form>
+  `,
+  styles: ``
+})
+export default class AttachmentWrapperComponent {
+  form = new FormGroup({});
+  field: any = [
+    {
+      "id": 37,
+      "name": "file",
+      "title": "File",
+      "hint": null,
+      "api": "/v1/private/subsidiaries/{key}/districts",
+      "order": 10,
+      "type": "file",
+      "stepName": "REQUESTER",
+      "mode": "view",
+      "value": "41232,41233",
+      "validation": {
+        "required": true,
+        "fileSize": 200000,
+        "fileType": "jpg,jpeg",
+        "minFilesCount": 2,
+        "maxFilesCount": 3,
+      },
+      "config": {
+        multiple: true
+      },
+      "events": []
+    }
+  ];
+}

package/projects/playground/src/components/attachment.component.ts

@@ -0,0 +1,35 @@
+import {Component} from "@angular/core";
+import {FormControl, ReactiveFormsModule} from "@angular/forms";
+import {MatLabel} from "@angular/material/form-field";
+import {FilePickerControl} from "../../../iss/src/components/controls/file-picker/file-picker.control";
+import {Hint} from "../../../iss/src/shared/interfaces/hint.interface";
+
+@Component({
+  selector: "app-attachment",
+  imports: [
+    ReactiveFormsModule,
+    MatLabel,
+    FilePickerControl,
+  ],
+  template: `
+    <mat-label>Attachment 1</mat-label>
+    <iss-ctrl-file-picker [formControl]="ctrl1" [multiple]="true" />
+    <mat-label>File Picker</mat-label>
+    <iss-ctrl-file-picker [formControl]="ctrl2" (onChange)="logObject($event)" [hints]="hints" />
+  `,
+  styles: ``
+})
+export default class AttachmentComponent {
+  ctrl1 = new FormControl("");
+  ctrl2 = new FormControl("");
+  hints: Hint[] = [
+    {
+      key: "size",
+      label: "allowed size is 1 MB",
+      valid: undefined,
+      align: "start",
+    }
+  ];
+
+  logObject($event: any) { }
+}

package/projects/playground/src/components/checkbox-wrapper.component.ts

@@ -0,0 +1,43 @@
+import {Component} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+@Component({
+  selector: "app-checkbox-wrapper",
+  imports: [
+    Outlet,
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field" />
+    </form>
+  `,
+  styles: ``
+})
+export default class CheckboxWrapperComponent {
+  form = new FormGroup({});
+  field: any = [
+    {
+      "id": 37,
+      "name": "district",
+      "title": "District",
+      "hint": null,
+      "api": "/v1/private/subsidiaries/{key}/districts",
+      "order": 10,
+      "type": "checkbox",
+      "stepName": "REQUESTER",
+      "options": [
+        {value: "1", label: "ONE"},
+        {value: "2", label: "TWO"},
+        {value: "3", label: "THREE"},
+      ],
+      "value": "1,2",
+      "jsonValue": [{value: "1", label: "ONE"}, {value: "2", label: "TWO"}],
+      "validation": {
+        "required": true
+      },
+      "events": []
+    }
+  ];
+}

package/projects/playground/src/components/chips-wrapper.component.ts

@@ -0,0 +1,37 @@
+import {Component} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+@Component({
+  selector: "app-chips-wrapper",
+  imports: [
+    Outlet,
+    ReactiveFormsModule
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="field"/>
+    </form>
+  `,
+  styles: ``
+})
+export default class ChipsWrapperComponent {
+  form = new FormGroup({});
+  field: any = [
+    {
+      "id": 37,
+      "name": "district",
+      "title": "District",
+      "hint": null,
+      "api": "/v1/private/subsidiaries/{key}/districts",
+      "order": 10,
+      "type": "chips",
+      "value": "cat,dog",
+      "stepName": "REQUESTER",
+      "validation": {
+        "required": true
+      },
+      "events": []
+    }
+  ];
+}

package/projects/playground/src/components/ctrl-array-wrapper.component.ts

@@ -0,0 +1,76 @@
+import {Component} from "@angular/core";
+import {FormGroup, ReactiveFormsModule} from "@angular/forms";
+import {Outlet} from "../../../iss/src/components/outlet/outlet";
+
+@Component({
+  selector: "app-table-wrapper",
+  imports: [
+    ReactiveFormsModule,
+    Outlet
+  ],
+  template: `
+    <form [formGroup]="form">
+      <iss-form-outlet [fields]="fields"/>
+    </form>
+  `,
+  styles: ``
+})
+export default class CtrlArrayWrapperComponent {
+  form: FormGroup = new FormGroup({});
+  fields: any = [
+    {
+      "id": 37,
+      "name": "district",
+      "title": "District",
+      "hint": null,
+      "api": "/v1/private/subsidiaries/{key}/districts",
+      "order": 10,
+      "type": "table",
+      "stepName": "REQUESTER",
+      "children": [
+        {
+          "id": 37,
+          "name": "district",
+          "title": "District",
+          "hint": null,
+          "api": "/v1/private/subsidiaries/{key}/districts",
+          "order": 10,
+          "type": "select",
+          "stepName": "REQUESTER",
+          "options": [
+            {value: "1", label: "ONE"},
+            {value: "2", label: "TWO"},
+            {value: "3", label: "THREE"},
+          ],
+          "validation": {
+            "required": true
+          },
+          "events": []
+        },
+        {
+          "id": 37,
+          "name": "location",
+          "title": "Location",
+          "hint": null,
+          "api": "/v1/private/subsidiaries/{key}/districts",
+          "order": 10,
+          "type": "select",
+          "stepName": "REQUESTER",
+          "options": [
+            {value: "4", label: "FOUR"},
+            {value: "5", label: "FIVE"},
+            {value: "6", label: "SIX"},
+          ],
+          "validation": {
+            "required": true
+          },
+          "events": []
+        }
+      ],
+      "validation": {
+        "required": true
+      },
+      "events": []
+    },
+  ];
+}

package/projects/playground/src/components/date-picker-container.component.ts

@@ -0,0 +1,22 @@
+import {Component} from "@angular/core";
+import {FormControl, ReactiveFormsModule} from "@angular/forms";
+import {MatLabel} from "@angular/material/form-field";
+import {DatePickerControl} from "../../../iss/src/components/controls/date-picker/date-picker.control";
+
+@Component({
+  selector: "app-date-picker-container",
+  imports: [
+    ReactiveFormsModule,
+    MatLabel,
+    DatePickerControl
+  ],
+  template: `
+    <mat-label>Date</mat-label>
+    <iss-ctrl-date-picker [formControl]="datePicker" [maxDate]="minDate"></iss-ctrl-date-picker>
+  `,
+  styles: ``
+})
+export default class DatePickerContainerComponent {
+  datePicker = new FormControl("");
+  minDate = new Date();
+}