Popconfirm - component (#1825)

* Popconfirm - component

* Fix ripple issues in popconfirm

* Corrections

---------

Co-authored-by: Bartosz Cylwik <bartosz.cylwik94@gmail.com>

index.html

@@ -424,6 +424,11 @@ <h3 class="mb-5">Your sites:</h3>
             class="mb-1 mr-1 rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
             >Datatables</a
           >
+          <a
+            href="./demo/sites/components/popconfirm.html"
+            class="mb-1 mr-1 rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
+            >Popconfirm</a
+          >
           <a
             href="./demo/sites/components/lightbox.html"
             class="mb-1 mr-1 rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"

site/content/docs/standard/components/popconfirm/a-ss.html

@@ -0,0 +1,21 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#api-section-import">Import</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-usage">Usage</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-options">Options</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-classes">Classes</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-methods">Methods</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#api-section-events">Events</a>
+</li>

site/content/docs/standard/components/popconfirm/index-js.html

@@ -0,0 +1,13 @@
+---
+---
+
+<!-- Custom scripts -->
+<script type="module">
+  const iconExample = document.getElementById("icon-example");
+  new te.Popconfirm(iconExample, {
+    popconfirmIconTemplate: `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
+        </svg>
+        `,
+  });
+</script>

site/content/docs/standard/components/popconfirm/index-ss.html

@@ -0,0 +1,16 @@
+---
+---
+
+<li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#basic">Basic example </a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#display-mode">Display mode</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]"><a href="#icon">Icon example</a></li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#inline-positions">Inline positions</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-related-resources">Related resources</a>
+</li>

site/static/search.json

@@ -478,6 +478,12 @@
       "paragraph": 1
     }
   },
+  {
+    "href": "/docs/standard/components/popconfirm/",
+    "name": "Popconfirm",
+    "keywords": ["popconfirm", "alert"],
+    "category": "Components"
+  },
   {
     "href": "/docs/standard/components/popover/",
     "name": "Popover",

src/js/autoinit/index.js

@@ -104,6 +104,10 @@ const defaultInitSelectors = {
     name: "Datatable",
     selector: "[data-te-datatable-init]",
   },
+  popconfirm: {
+    name: "Popconfirm",
+    selector: "[data-te-toggle='popconfirm']",
+  },
 
   // advancedInits
   chart: {