First fully functional version

Ionic Emoji Keyboard is a simple emoji keyboard for Ionic 6+ apps.
squareetlabs · Apr 7, 2023 · 7e12eab · 7e12eab
commit 7e12eab
Show file tree

Hide file tree

Showing 14 changed files with 8,556 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,114 @@
+# Ionic Emoji Keyboard
+
+Ionic Emoji Keyboard is a simple emoji keyboard for Ionic 6+ apps. 
+
+### Install it
+```npm i --save ionic-emoji-keyboard```
+
+------------------------
+## How to use it
+
+You can use it by importing it into app.module.ts.
+```
+import {IonicEmojiKeyboardModule} from 'ionic-emoji-keyboard';
+
+@NgModule({
+  imports: [
+    IonicEmojiKeyboardModule
+  ]
+})
+export class AppModule { }
+```
+In case you are also using lazy loading pages, check if your pages have a module file, e.g. `chat.module.ts`. If they do, import `IonicEmojiKeyboardModule` into the module of each page where you are going to use it.
+```
+@NgModule({
+    imports: [
+        IonicModule,
+        CommonModule,
+        .....
+        IonicEmojiKeyboardModule,
+    ],
+    declarations: [ChatPage]
+})
+export class ChatPageModule {
+}
+```
+Once imported, it is ready for use. You can use it in your page controller file as follows:
+
+```
+@Component({
+    selector: 'app-chat',
+    templateUrl: './chat.page.html',
+    styleUrls: ['./chat.page.scss'],
+})
+export class ChatPage implements OnInit, OnDestroy {
+    @ViewChild('messageInput', {static: false}) messageInput!: IonInput;
+    showEmojiKeyboard = false;
+    constructor() {
+    }
+    
+    onEmojiSelected: (event: Emoji) => {
+        that.message.setValue(that.message.value + event.emoji);
+    };
+    
+    onShowEmojiKeyboard: () => {
+        that.showEmojiKeyboard = true;
+    };
+}
+```
+And in your page html file as follows:
+```
+<ion-buttons>
+    <ion-button (click)="onShowEmojiKeyboard()">
+        <ng-container *ngIf="showEmojiKeyboard else keyboard">
+            <ion-icon name="happy-outline" slot="icon-only"></ion-icon>
+        </ng-container>
+        <ng-template #keyboard>
+            <ion-icon [src]="'assets/imgs/keyboard.svg'" slot="icon-only"></ion-icon>
+        </ng-template>
+    </ion-button>
+</ion-buttons>
+<ion-input #messageInput [formControl]="message" enterkeyhint="send" placeholder="Type text..."></ion-input>
+<ionic-emoji-keyboard (emojiSelected)="onEvent('onEmojiSelected', $event)" [color]="'light'" [height]="'183px'" [hide]="showEmojiKeyboard" [mode]="'md'"></ionic-emoji-keyboard>
+```
+
+
+## Properties
+| Input         | Type                   | Description                              | Default Value |
+|---------------|------------------------|------------------------------------------|----------------------|
+| color         | string (optional)      | Background color of the component.        | None                |
+| hide          | boolean                | Indicates if the component is hidden.     | false                |
+| mode          | "ios" \| "md"          | Display mode of the component.            | "md"                 |
+| height        | string                 | Height of the component.                  | "184px"              |
+
+
+## Events
+| Output          | Type                  | Description                                                    |
+|-----------------|-----------------------|----------------------------------------------------------------|
+| emojiSelected   | EventEmitter\<Emoji\>  | Emits when an emoji is selected in the component.               |
+
+
+## Publishing
+
+Run `ng build ionic-emoji-keyboard` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ionic-emoji-keyboard`, go to the dist folder `cd dist/ionic-emoji-keyboard` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ionic-emoji-keyboard` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+
+## Credits
+- [Alberto Rial Barreiro](https://github.com/alberto-rial)
+- [Jacobo Cantorna Cigarrán](https://github.com/jcancig)
+- [Desarrollo de apps para moviles](https://squareet.com/desarrollo-de-aplicaciones-para-moviles) SquareetLabs
+- 
+## License
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
diff --git a/ng-package.json b/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ionic-emoji-keyboard",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "ionic-emoji-keyboard",
+  "version": "1.0.0",
+  "description": "Simple angular emoji keyboard for Ionic 6+",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/squareetlabs/ionic-emoji-keyboard.git"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/squareetlabs/ionic-emoji-keyboard",
+  "keywords": [
+    "ionic6 emoji keyboard",
+    "ionic 6 emoji keyboard",
+    "ionic6 emoji picker",
+    "ionic 6 emoji picker",
+    "ionic6 emoji",
+    "ionic7 emoji keyboard",
+    "ionic 7 emoji keyboard",
+    "ionic7 emoji picker",
+    "ionic 7 emoji picker",
+    "ionic7 emoji",
+    "ionic emojipicker",
+    "ionic-emoji-picker",
+    "ionic-emoji-keyboard",
+    "squareetlabs"
+  ],
+  "author": {
+    "name": "Jacobo Cantorna Cigarrán",
+    "email": "jacobo@squareet.com.com",
+    "url": "https://squareet.com"
+  },
+  "contributors": [{
+    "name": "Alberto Rial Barreiro",
+    "email": "alberto@squareet.com",
+    "url": "https://squareet.com"
+  }],
+  "peerDependencies": {
+    "@angular/common": ">=12.2.0",
+    "@angular/core": ">=12.2.0",
+    "@ionic/angular": ">=6.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}
diff --git a/src/lib/ionic-emoji-keyboard.component.html b/src/lib/ionic-emoji-keyboard.component.html
@@ -0,0 +1,123 @@
+<div class="emoji-wrapper-component" [style]="height">
+    <ion-segment [value]="recentOld.length > 0 ? 'recentOld' : 'smileys'" [(ngModel)]="type" [mode]="mode" [scrollable]="true">
+        <ion-segment-button value="recentOld" *ngIf="recentOld.length > 0">
+            <ion-icon name="time-outline"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="smileys">
+            <ion-icon name="happy-outline"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="foods">
+            <ion-icon name="fast-food-outline"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="animals">
+            <ion-icon name="flower-outline"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="activities">
+            <ion-icon name="football-outline"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="travel">
+            <ion-icon name="bicycle-outline"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="symbols">
+            <ion-icon name="fitness-outline"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="flag">
+            <ion-icon name="flag-outline"></ion-icon>
+        </ion-segment-button>
+        <ion-segment-button value="objects">
+            <ion-icon name="flask-outline"></ion-icon>
+        </ion-segment-button>
+    </ion-segment>
+    <div [ngSwitch]="type" class="emoji-wrapper">
+        <ng-container *ngSwitchCase="'recentOld'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of recentOld" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+        <ng-container *ngSwitchCase="'smileys'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of smileys" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+        <ng-container *ngSwitchCase="'foods'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of foods" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+        <ng-container *ngSwitchCase="'animals'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of animals" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+        <ng-container *ngSwitchCase="'activities'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of activities" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+        <ng-container *ngSwitchCase="'travel'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of travel" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+        <ng-container *ngSwitchCase="'symbols'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of symbols" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+        <ng-container *ngSwitchCase="'flag'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of flag" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+        <ng-container *ngSwitchCase="'objects'">
+            <ion-content [color]="color">
+                <ul>
+                    <li *ngFor="let item of objects" class="ion-activatable ripple-parent" (click)="onEvent('onSelectEmoji', item)">
+                        {{item.emoji}}
+                        <ion-ripple-effect></ion-ripple-effect>
+                    </li>
+                </ul>
+            </ion-content>
+        </ng-container>
+    </div>
+</div>
diff --git a/src/lib/ionic-emoji-keyboard.component.scss b/src/lib/ionic-emoji-keyboard.component.scss
@@ -0,0 +1,37 @@
+.emoji-wrapper-component {
+  height: 0;
+  transition: height 50ms;
+}
+
+.emoji-wrapper {
+  overflow: auto;
+  display: contents;
+  ion-content {
+    width: 100%;
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      li {
+        font-size: 30px;
+        text-align: center;
+        width: calc(100% / 9);
+        height: 38px;
+      }
+    }
+  }
+}
+ion-segment-button {
+  border-width: var(--emoji-wrapper-border-with, 0);
+  border-style: var(--emoji-wrapper-border-style, solid);
+  border-color: var(--emoji-wrapper-border-color, transparent);
+}
+// swiper bundle styles
+.ripple-parent {
+  position: relative;
+  overflow: hidden;
+}
diff --git a/src/lib/ionic-emoji-keyboard.component.spec.ts b/src/lib/ionic-emoji-keyboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IonicEmojiKeyboardComponent } from './ionic-emoji-keyboard.component';
+
+describe('IonicEmojiPickerComponent', () => {
+  let component: IonicEmojiKeyboardComponent;
+  let fixture: ComponentFixture<IonicEmojiKeyboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IonicEmojiKeyboardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IonicEmojiKeyboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});