release - v5.0.0

Author: Rayn93

CHANGELOG.md

@@ -1,13 +1,13 @@
 # Changelog
-## Unreleased
+## [v5.0.0] - 2024.07.08
 ### BREAKING
+- Upgrade FACT-Finder Web-Components to version 5.0.0-pre.1
+- Drop support for FACT-Finder Web-Components v4
 - Add support for PHP v8.2 and v8.3
 - Upgrade magento libraries
 - Upgrade composer dependencies
 - Fix deprecations for magento/framework
-- Upgrade FACT-Finder Web-Components to version 5.x
 - New SSR implementation for NG WebComponents
-- Upgrade bundle.js for new NG WebComponents
 - Upgrade SDK to support Magento v2.4.7
 
 ### Remove
@@ -614,6 +614,7 @@
 ### Added
 - Feed Export: Export feed file is now available via separate link
 
+[v5.0.0]:       https://github.com/FACT-Finder-Web-Components/magento2-module/releases/tag/v5.0.0
 [v4.3.0]:       https://github.com/FACT-Finder-Web-Components/magento2-module/releases/tag/v4.3.0
 [v4.2.2]:       https://github.com/FACT-Finder-Web-Components/magento2-module/releases/tag/v4.2.2
 [v4.2.1]:       https://github.com/FACT-Finder-Web-Components/magento2-module/releases/tag/v4.2.1

README.md

@@ -4,14 +4,18 @@
 [![Build status](https://github.com/FACT-Finder-Web-Components/magento2-module/workflows/build/badge.svg)](https://github.com/FACT-Finder-Web-Components/magento2-module/actions)
 [![GitHub contributors](https://img.shields.io/github/contributors/FACT-Finder-Web-Components/magento2-module)](https://github.com/FACT-Finder-Web-Components/magento2-module/graphs/contributors)
 
-This is a new version of SDK (not released yet). Support for new WebComponents v5 NG
+This is a new version of SDK which support new WebComponents v5 NG. WebComponents v5 is in pre-released phrase.
+For official released WebComponents please SDK v4 available [here](https://github.com/FACT-Finder-Web-Components/magento2-module)
 
 This document helps you integrate the FACT-Finder Web Components SDK into your Magento 2 Shop. In addition, it gives a
 concise overview of its primary functions. The first chapter *Installation* walks you through the suggested installation
 processes. The second chapter “Backend Configuration” explains the customisation options in the Magento 2 backend. The
 final chapter *Web Component Integration* describes how the web components interface with the shop system and how to
 customise them. 
 
+Our Magento 2 module offers a basic working integration for default Magento2 Luma theme. Most projects may require
+modifications in order to fit their needs. For more advanced features please check our official [WebComponnents documentation](https://web-components.fact-finder.de/documentation/4.x/install-dist).
+
 ## Table of contents
 - [Requirements](#requirements)
 - [Installation](#installation)

src/view/frontend/web/ff-web-components/bundle.js

@@ -27,24 +27,35 @@ ff-products-per-page-dropdown {
     outline: none;
 }
 
-ff-products-per-page-dropdown .ffw-ppp-dropdown-closed {
-    display: none;
-}
-
 ff-products-per-page-dropdown .ffw-ppp-dropdown-container {
     position: absolute;
+    display: flex;
+    flex-direction: column;
     background-color: white;
     outline: none;
     z-index: 1001;
+    margin-top: 1px;
+    margin-left: -1px;
 
     -webkit-transition: height .4s;
     -moz-transition: height .4s;
     -ms-transition: height .4s;
     -o-transition: height .4s;
     transition: height .4s;
+    height: 0;
+    overflow: hidden;
     box-sizing: border-box;
 }
 
+ff-products-per-page-dropdown .ffw-ppp-dropdown-closed {
+    visibility: hidden;
+    -webkit-transition: height .4s, visibility 0s .4s;
+    -moz-transition: height .4s, visibility 0s .4s;
+    -ms-transition: height .4s, visibility 0s .4s;
+    -o-transition: height .4s, visibility 0s .4s;
+    transition: height .4s, visibility 0s .4s;
+}
+
 ff-products-per-page-item {
     display: block;
     cursor: pointer;
@@ -232,17 +243,26 @@ ff-paging-dropdown .ffw-paging-dropdown-container {
     background-color: white;
     outline: none;
     z-index: 1001;
+    margin-top: 1px;
+    margin-left: -1px;
 
     -webkit-transition: height .4s;
     -moz-transition: height .4s;
     -ms-transition: height .4s;
     -o-transition: height .4s;
     transition: height .4s;
+    height: 0;
+    overflow: hidden;
     box-sizing: border-box;
 }
 
 ff-paging-dropdown .ffw-paging-dropdown-closed {
-    display: none;
+    visibility: hidden;
+    -webkit-transition: height .4s, visibility 0s .4s;
+    -moz-transition: height .4s, visibility 0s .4s;
+    -ms-transition: height .4s, visibility 0s .4s;
+    -o-transition: height .4s, visibility 0s .4s;
+    transition: height .4s, visibility 0s .4s;
 }
 
 
@@ -600,102 +620,145 @@ ff-slider-control {
     padding: 10px 0 10px 0;
 }
 
+
+ff-slider-control .ffw-slider-control-default .ffw-slider-control-inputs {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+ff-slider-control .ffw-slider-control-default .ffw-input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    border: 1px solid;
+}
+ff-slider-control .ffw-slider-control-default input {
+    width: 60px;
+    border: 0;
+    padding: 4px 1em 4px .5em;
+    text-align: center;
+}
+ff-slider-control .ffw-slider-control-default [data-unit] {
+    position: absolute;
+    right: 4px;
+}
+ff-slider-control .ffw-slider-control-default .ffw-slider-control-line {
+    display: inline-block;
+    width: 20px;
+    height: 2px;
+    background-color: black;
+}
+
 ff-slider-control .ffw-sliderSection {
     margin-top: 10px;
 }
 
 ff-slider {
-    height: 5px;
-    background-color: #336;
-    margin: 5px auto;
     display: block;
-    opacity: 0;
-    transition: opacity 800ms;
+    z-index: -1001;
+    pointer-events: none;
 }
 
-ff-slider .ffw-sliderWrapper {
-    min-width: 1px;
+ff-slider .ffw-slider-container {
+    top: 0;
+    position: relative;
+    pointer-events: none;
 }
 
-ff-slider [slot^="slider"] {
-    height: 10px;
-    width: 10px;
-    border: 1px solid black;
+ff-slider .ffw-triangle {
+    pointer-events: auto;
+    user-select: none;
+    position: absolute;
+    z-index: 1000;
+    opacity: .5;
     cursor: pointer;
+    touch-action: none;
+    border-style: solid;
+    border-color: transparent transparent #89bdff transparent;
+    top: 50%;
+    transition:
+        top .2s ease-out,
+        left .2s ease-out,
+        transform .2s ease-out;
+    transform: translate(-50%, -50%) scale(0.25);
 }
 
-ff-compare {
-    display: block;
+ff-slider .ffw-triangle.ffw-active {
+    transition:
+        top .2s ease-in,
+        left .2s ease-in,
+        transform .2s ease-in;
+    transform: translateX(-100%) scale(1);
 }
 
-ff-asn-remove-all-filter {
-    display: inline-block;
-}
-
-ff-breadcrumb-trail {
-    display: inline;
+ff-slider .ffw-triangle.ffw-no-transition {
+    transition: none;
 }
 
-ff-breadcrumb-trail-item {
-    transition: opacity 800ms;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+ff-slider .ffw-line {
+    pointer-events: auto;
+    z-index: 999;
+    top: 50%;
+    position: absolute;
+    height: 1px;
+    transform: translateY(-50%);
+    background-color: black;
+    background-clip: padding-box;
+    border-top: 25px solid transparent;
+    border-bottom: 25px solid transparent;
 }
 
-/* ---- ff-search-feedback ---- */
-
-ff-search-feedback  {
+ff-slider .ffw-selected-range {
+    z-index: 1000;
+    top: 50%;
     position: absolute;
-    top: 20px;
+    height: 2px;
+    transform: translateY(-50%);
+    background-color: #003ccb;
 }
 
-ff-search-feedback[align="left"] {
-    left: 0;
+ff-slider .ffw-slider-button {
+    width: 5px;
+    height: 5px;
+    border: 1px solid black;
+    position: absolute;
+    top: 50%;
+    z-index: 1003;
+    pointer-events: auto;
+    cursor: pointer;
+    touch-action: none;
 }
-
-ff-search-feedback[align="right"] {
-    right: 0;
+ff-slider .ffw-slider-button-left {
+    transform: translate(0, -50%);
 }
-
-ff-search-feedback[align="left"] .ffw-content {
-    transform: translate(0);
+ff-slider .ffw-slider-button-right {
+    transform: translate(0, -50%);
 }
 
-ff-search-feedback[align="left"] .ffw-caption {
-    transform: translate(100%);
+ff-asn-remove-all-filters {
+    display: inline-block;
 }
 
-ff-search-feedback .ffw-noTransition {
-    transition: 0s !important;
-}
 
-ff-search-feedback .ffw-caption {
-    position: absolute;
-    right: 0;
-    transition: transform 0.3s;
-    cursor: pointer;
-}
+/* ---- others ---- */
 
-ff-search-feedback .ffw-content {
-    position: absolute;
-    transition: transform 0.3s;
-    transform: translate(100%);
-    right: 0;
-    text-align: left;
+ff-compare {
+    display: block;
 }
 
-ff-search-feedback .ffw-transformZero {
-    transform: translate(0) !important;
+ff-breadcrumb-trail {
+    display: inline;
 }
 
-ff-search-feedback .ffw-transformX {
-    transform: translate(100%) !important;
+ff-breadcrumb-trail-item {
+    transition: opacity 800ms;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
-
 /* ---- generic ---- */
 
 /* ffw-hidden is applied by FACTFinderLitElement to all elements deriving from it so it cannot be prefixed with an element selector */