IgniteUI · georgianastasov · May 31, 2024 · May 31, 2024 · Jun 6, 2024
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/.prettierrc b/samples/inputs/action-strip/action-strip-paragraph-menu/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/ReadMe.md b/samples/inputs/action-strip/action-strip-paragraph-menu/ReadMe.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Outlined feature using [Button](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/inputs/button/outlined" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/inputs/button/outlined?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/inputs/button/outlined
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/index.html b/samples/inputs/action-strip/action-strip-paragraph-menu/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Action Strip Paragraph Menu</title>
+        <meta charset="UTF-8" />
+
+        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+    </head>
+
+    <body>
+        <div id="root">
+            <div class="sample center">
+                <div class="parent">
+                    <p class="paragraph">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non nibh eu libero commodo posuere at id augue. Morbi nec justo enim. Sed placerat fringilla quam in pharetra. Pellentesque imperdiet lorem quis sem bibendum
+                        molestie. Aliquam fringilla tellus nec convallis sodales. Suspendisse a eros accumsan, mattis mauris id, malesuada nibh. Maecenas eget augue faucibus, euismod arcu sit amet, tempus nisi. Sed tellus nisl, luctus vitae
+                        vestibulum ac, vehicula non ex. Donec condimentum rhoncus enim, et efficitur tortor faucibus sed. Integer at mauris facilisis mauris condimentum bibendum. Maecenas eget lacus dolor. Etiam pulvinar, sapien vitae fermentum
+                        interdum, nunc justo facilisis est, eu ullamcorper dolor lectus sit amet nisl. Quisque aliquam urna ut leo mollis luctus. Morbi lacinia orci augue, sed blandit est ornare placerat. Cras a ante nec mauris euismod aliquam vel
+                        pulvinar urna. Morbi tincidunt fringilla tortor, at ultricies neque rhoncus ac.
+                    </p>
+                    <igc-button variant="fab" class="more" name="more" collection="material"
+                        ><span slot="prefix"><igc-icon name="more" collection="material"></igc-icon></span
+                    ></igc-button>
+                    <igc-action-strip hidden="true">
+                        <igc-button class="menu-button left" slot="button"
+                            ><igc-icon name="left" collection="material"></igc-icon>
+                            <span>Left</span>
+                            <igc-ripple></igc-ripple
+                        ></igc-button>
+                        <igc-button id="center" class="menu-button" slot="button"
+                            ><igc-icon name="center" collection="material"></igc-icon>
+                            <span>Center</span>
+                            <igc-ripple></igc-ripple
+                        ></igc-button>
+                        <igc-button class="menu-button right" slot="button"
+                            ><igc-icon name="right" collection="material"></igc-icon>
+                            <span>Right</span>
+                            <igc-ripple></igc-ripple
+                        ></igc-button>
+                    </igc-action-strip>
+                </div>
+            </div>
+        </div>
+        <!-- This script is needed only for parcel and it will be excluded for webpack -->
+        <% if (false) { %>
+        <script src="src/index.ts"></script>
+        <% } %>
+    </body>
+</html>
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/package.json b/samples/inputs/action-strip/action-strip-paragraph-menu/package.json
@@ -0,0 +1,60 @@
+{
+    "name": "wc-action-strip-paragraph-menu",
+    "version": "1.0.0",
+    "description": "This project provides example of paragraph with action strip menu using IgniteUI for Web Components",
+    "main": "src/index.ts",
+    "scripts": {
+        "build": "npm run build:prod",
+        "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+        "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+        "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+        "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+        "start": "npm run serve:dev",
+        "build:legacy": "npm run build:prod:legacy",
+        "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+        "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+        "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+        "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+        "start:legacy": "npm run serve:dev:legacy"
+    },
+    "author": "Infragistics",
+    "dependencies": {
+        "@webcomponents/custom-elements": "^1.4.1",
+        "@webcomponents/template": "^1.4.2",
+        "babel-runtime": "^6.26.0",
+        "core-js": "^3.6.5",
+        "igniteui-webcomponents": "4.8.0",
+        "igniteui-webcomponents-grids": "4.8.1-alpha.0",
+        "lit": "^2.0.2",
+        "lit-html": "^2.2.0",
+        "tslib": "^2.0.0"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.8.3",
+        "@babel/core": "^7.8.3",
+        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.10.0",
+        "@babel/preset-env": "^7.8.3",
+        "@babel/preset-typescript": "^7.8.3",
+        "@types/source-map": "^0.5.7",
+        "babel-loader": "^8.1.0",
+        "babel-plugin-transform-custom-element-classes": "^0.1.0",
+        "css-loader": "^1.0.0",
+        "csv-loader": "^3.0.2",
+        "file-loader": "^4.2.0",
+        "fork-ts-checker-webpack-plugin": "^4.1.5",
+        "html-webpack-plugin": "^4.3.0",
+        "parcel-bundler": "^1.6.1",
+        "source-map": "^0.7.3",
+        "style-loader": "^0.22.1",
+        "tsconfig-paths-webpack-plugin": "^4.0.0",
+        "typescript": "^4.4.4",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "webpack-dev-server": "^4.11.1",
+        "worker-loader": "^3.0.8",
+        "xml-loader": "^1.2.1"
+    },
+    "license": "",
+    "homepage": "."
+}
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/sandbox.config.json b/samples/inputs/action-strip/action-strip-paragraph-menu/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/src/ActionStripParagraphMenu.css b/samples/inputs/action-strip/action-strip-paragraph-menu/src/ActionStripParagraphMenu.css
@@ -0,0 +1,65 @@
+igc-action-strip {
+    display: block;
+    position: absolute;
+    top: 4rem;
+    z-index: 2;
+    background-color: transparent;
+    border-radius: 0.5rem;
+}
+
+igc-action-strip igc-button {
+    display: block;
+    margin-bottom: 0.2rem;
+}
+
+igc-action-strip igc-button::part(base) {
+    padding: 20px;
+    width: 100%;
+}
+
+.more {
+    visibility: hidden;
+    cursor: pointer;
+    padding: 1rem 0;
+    position: absolute;
+    top: 0.1rem;
+    z-index: 2;
+}
+
+.parent {
+    padding: 4rem 1rem 1rem 1rem;
+    margin: auto;
+    min-width: 700px;
+    max-width: 1000px;
+    height: 250px;
+    position: relative;
+}
+
+.parent::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(236, 236, 236, 0.404);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 1;
+}
+
+.parent:hover::before {
+    opacity: 1;
+}
+
+.text-align-left {
+    text-align: left;
+}
+
+.text-align-center {
+    text-align: center;
+}
+
+.text-align-right {
+    text-align: right;
+}
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.css b/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.ts b/samples/inputs/action-strip/action-strip-paragraph-menu/src/index.ts
@@ -0,0 +1,104 @@
+import { defineComponents, IgcIconComponent, IgcRippleComponent, IgcButtonComponent, registerIconFromText } from "igniteui-webcomponents";
+import { IgcActionStripComponent } from "igniteui-webcomponents-grids/grids";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "igniteui-webcomponents-grids/grids/combined";
+import "./ActionStripParagraphMenu.css";
+
+defineComponents(IgcIconComponent);
+defineComponents(IgcRippleComponent);
+defineComponents(IgcButtonComponent);
+
+const icons = [
+    {
+        name: "more",
+        iconText:
+            '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>'
+    },
+    {
+        name: "left",
+        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"/></svg>'
+    },
+    {
+        name: "center",
+        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg>'
+    },
+    {
+        name: "right",
+        iconText: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z"/></svg>'
+    }
+];
+
+export class ActionStripParagraphMenu {
+    private actionStrip: IgcActionStripComponent;
+
+    private more: HTMLElement;
+
+    private left: HTMLElement;
+    private center: HTMLElement;
+    private right: HTMLElement;
+
+    private parent: HTMLElement;
+
+    private isActionStripShown = false;
+
+    constructor() {
+        icons.forEach((icon) => {
+            registerIconFromText(icon.name, icon.iconText, "material");
+        });
+
+        this.actionStrip = document.querySelector("igc-action-strip") as IgcActionStripComponent;
+
+        this.more = document.querySelector(".more") as IgcButtonComponent;
+
+        this.left = document.querySelector(".left") as IgcButtonComponent;
+        this.center = document.getElementById("center") as IgcButtonComponent;
+        this.right = document.querySelector(".right") as IgcButtonComponent;
+
+        this.parent = document.querySelector(".parent") as HTMLElement;
+
+        this.parent.addEventListener("mouseenter", () => this.show());
+        this.parent.addEventListener("mouseleave", () => this.hide());
+
+        let paragraph = document.querySelector(".paragraph") as HTMLElement;
+
+        this.more.addEventListener("click", (e) => {
+            if (!this.isActionStripShown) {
+                this.actionStrip.show();
+                this.isActionStripShown = true;
+            } else {
+                this.actionStrip.hide();
+                this.isActionStripShown = false;
+            }
+        });
+
+        this.left.addEventListener("click", (e) => {
+            paragraph.classList.add("text-align-left");
+            paragraph.classList.remove("text-align-center");
+            paragraph.classList.remove("text-align-right");
+        });
+
+        this.center.addEventListener("click", (e) => {
+            paragraph.classList.remove("text-align-left");
+            paragraph.classList.add("text-align-center");
+            paragraph.classList.remove("text-align-right");
+        });
+
+        this.right.addEventListener("click", (e) => {
+            paragraph.classList.remove("text-align-left");
+            paragraph.classList.remove("text-align-center");
+            paragraph.classList.add("text-align-right");
+        });
+    }
+
+    private show() {
+        this.more.style.visibility = "visible"
+    }
+
+    private hide() {
+        this.more.style.visibility = "hidden"
+        this.actionStrip.hide();
+        this.isActionStripShown = false;
+    }
+}
+
+new ActionStripParagraphMenu();
diff --git a/samples/inputs/action-strip/action-strip-paragraph-menu/tsconfig.json b/samples/inputs/action-strip/action-strip-paragraph-menu/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/* shared styles are loaded from: */
		/* https://static.infragistics.com/xplatform/css/samples */