feat!: vaadin 24 compatible version

Author: paodb

demo/demo-icons.js

@@ -1,20 +1,20 @@
 /* eslint-disable max-len */
 import { html } from '@polymer/polymer/polymer-element.js';
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
-import '@polymer/iron-iconset-svg';
+import '@vaadin/vaadin-lumo-styles/vaadin-iconset.js'
 
 registerStyles(
   'vaadin-button',
   css`
-    [part] ::slotted(iron-icon[icon^='vcf-demo:']) {
+    [part] ::slotted(vaadin-icon[icon^='vcf-demo:']) {
       padding: 0.25em;
       box-sizing: border-box !important;
     }
   `
 );
 
 const template = html`
-  <iron-iconset-svg name="vcf-demo" size="16">
+  <vaadin-iconset name="vcf-demo" size="16">
     <svg>
       <defs>
         <g id="copy">
@@ -27,7 +27,7 @@ const template = html`
         </g>
       </defs>
     </svg>
-  </iron-iconset-svg>
+  </vaadin-iconset>
 `;
 
 document.head.appendChild(template.content);

demo/demo.js

@@ -18,7 +18,7 @@ window.addEventListener('WebComponentsReady', () => {
     if (window.innerWidth > 768) {
       const codeContainerStyles = document.createElement('style');
       const copyVaadinButton = document.createElement('vaadin-button');
-      const copyIcon = document.createElement('iron-icon');
+      const copyIcon = document.createElement('vaadin-icon');
       // Custom <demo-snippet> styles
       element.shadowRoot.appendChild(codeContainerStyles);
       codeContainerStyles.innerHTML = mainCodeContainerStyles.innerHTML;
@@ -30,7 +30,7 @@ window.addEventListener('WebComponentsReady', () => {
       copyVaadinButton.addEventListener('click', () => {
         document
           .querySelectorAll('demo-snippet')
-          .forEach(element => element.shadowRoot.querySelector('iron-icon').setAttribute('icon', 'vcf-demo:copy'));
+          .forEach(element => element.shadowRoot.querySelector('vaadin-icon').setAttribute('icon', 'vcf-demo:copy'));
         copyButton.click();
         copyIcon.setAttribute('icon', 'lumo:checkmark');
       });

demo/index.html

@@ -162,7 +162,7 @@
       <p>Go to <a href="./foo.html">foo</a></p>
       <a id="api" slot="header" href="/api/#/elements/Vaadin.VcfAnchorNav">
         <vaadin-button theme="tertiary" class="nav-btn">
-          <iron-icon icon="lumo:angle-right" slot="suffix"></iron-icon>
+          <vaadin-icon icon="lumo:angle-right" slot="suffix"></vaadin-icon>
           API
         </vaadin-button>
       </a>
@@ -321,14 +321,14 @@ <h2 slot="header" class="main">Custom Tabs</h2>
                 <!-- Create custom <vaadin-tab> with "id" equal to "tab-id" of the linked section. -->
                 <vaadin-tab id="custom-tab-3">
                   <div class="vertical-tab">
-                    <iron-icon icon="lumo:chevron-up"></iron-icon>
+                    <vaadin-icon icon="lumo:chevron-up"></vaadin-icon>
                     Custom Tab 3
                   </div>
                 </vaadin-tab>
                 <vaadin-tab id="custom-tab-4">
                   <div class="vertical-tab">
                     Custom Tab 4
-                    <iron-icon icon="lumo:chevron-down"></iron-icon>
+                    <vaadin-icon icon="lumo:chevron-down"></vaadin-icon>
                   </div>
                 </vaadin-tab>
               </vaadin-tabs>
@@ -337,13 +337,13 @@ <h2 slot="header" class="main">Custom Tabs</h2>
                 <!-- Create custom tabs using the "tab" slot of the section. -->
                 <vaadin-tab slot="tab">
                   Custom Tab 1
-                  <iron-icon icon="lumo:chevron-right"></iron-icon>
+                  <vaadin-icon icon="lumo:chevron-right"></vaadin-icon>
                 </vaadin-tab>
                 Section 1 content.
               </vcf-anchor-nav-section>
               <vcf-anchor-nav-section>
                 <vaadin-tab slot="tab">
-                  <iron-icon icon="lumo:chevron-left"></iron-icon>
+                  <vaadin-icon icon="lumo:chevron-left"></vaadin-icon>
                   Custom Tab 2
                 </vaadin-tab>
                 Section 2 content.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin-component-factory/vcf-anchor-nav",
-  "version": "23.4.0",
+  "version": "3.0.0",
   "description": "Component with tabs used as anchor navigation and content sections. Automates the linking of tabs and sections.",
   "main": "vcf-anchor-nav.js",
   "author": "Vaadin Ltd",
@@ -45,10 +45,10 @@
   "dependencies": {
     "@juggle/resize-observer": "^3.1.3",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.3.1",
-    "@vaadin/tabs": "^23.3.1",
-    "@vaadin/vaadin-lumo-styles": "^23.3.1",
-    "@vaadin/vaadin-themable-mixin": "^23.3.1",
+    "@vaadin/component-base": "^24.1.1",
+    "@vaadin/tabs": "^24.1.1",
+    "@vaadin/vaadin-lumo-styles": "^24.1.1",
+    "@vaadin/vaadin-themable-mixin": "^24.1.1",
     "intersection-observer": "^0.10.0",
     "smoothscroll-polyfill": "^0.4.4",
     "stickyfilljs": "^2.1.0"
@@ -59,13 +59,12 @@
     "@babel/preset-env": "^7.5.5",
     "@polymer/iron-component-page": "^4.0.1",
     "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
-    "@polymer/iron-iconset-svg": "^3.0.1",
     "@polymer/test-fixture": "^4.0.2",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@vaadin-component-factory/vcf-element-util": "^0.2.8",
-    "@vaadin/button": "^23.3.1",
-    "@vaadin/text-field": "^23.3.1",
+    "@vaadin/button": "^24.1.1",
+    "@vaadin/text-field": "^24.1.1",
     "@webcomponents/webcomponentsjs": "^2.0.0",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",

src/vcf-anchor-nav.js

@@ -148,7 +148,7 @@ export class AnchorNavElement extends ElementMixin(ThemableMixin(PolymerElement)
   }
 
   static get version() {
-    return '23.4.0';
+    return '3.0.0';
   }
 
   static get properties() {