ecodev / fab-speed-dial Goto Github PK

I would be nice to have support for text labels as shown on https://material.io/design/assets/1fohUHLBjjut8g3UsgGGHHBV6PBboy8EK/fab-transitions-speeddial-do-labels.png

Hello, Angular 9 is now released, and:

@ecodev/fab-speed-dial" has an incompatible peer dependency to "@angular/material" (requires "^8.1.2", would install "9.0.0").

Haven't tested yet if anything breaks, but upgrading from Angular 8.2 to 9 throws this warning.

Thanks :)

Repro:

• hover over the trigger button to expand the actions buttons
• move mouse into the space between action buttons
• menu collapses

Menu should remain open unless move outside of an actions container

How can i put two fab buttons side by side like, if i put two fab i get the following:

i get a space with the length of the actions buttons.
souldn't the actions container be in an overlay?

I upgraded to Angular 15 recently and the speed dial seemed to have stopped working. At least the animations are not playing as expected.

I think the intention is to only have the icon spin for that setting, allowing the button to remain stationary and preventing it's drop shadow from rotating.

Please add spin 90

.spin90 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

And please provide a method to specify the icon when it's closed and when its open.

Example:
So when it's closed it shows a 'check' and when you click on it and open it the icon changes to 'close'

Currently if you use mat-mini-fab as speed-dial-trigger no button will show up. Would be great if you could support mini-fab button as well there.
If I have time in the next weeks I can also have a look at the code and maybe make a PR

Angular 7 was released, so it would be nice to to have support for it.

The update should be simple, because only few breaking changes were introduced.

For easy upgrade have a look at: https://update.angular.io/

Not sure, but it it seems that there is an issue with the latest build. I can import the module, but the components don't seem to be available anywhere.The html gets not parsed to the component and the linting in webstorm also hows me that eco-fab-speed-dial etc are unknown html tags.

Hi!
I try to use the ecodev but i get this error when add the lib :
typescript ERROR Error: Uncaught (in promise): ReferenceError: Document is not defined ReferenceError: Document is not defined

It seems that there is no doc on how to open speed dial on hover, nor on how to open it programatically.
We can find examples here https://github.com/Ecodev/fab-speed-dial/blob/master/src/app/app.component.html by it would be nice to have them on readme page.

Currently Angular 14 is not supported.

Hello!

I'm trying to use this in my Angular10 project, but I keep getting an error:

ERROR in node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class.
    
    This likely means that the library (@ecodev/fab-speed-dial) which declares EcoFabSpeedDialModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the 
library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Is this library Ivy-compatible?

Thanks in advance.

Hello,

The plugin looks great, thanks a lot.
Do you have any plan to implement Extended Fab ?

Thanks

Please take a look at the stackblitz:
https://stackblitz.com/edit/angular-pzpveo

When the buttons are rendered via content projection, the speed dial fab stays open and does not work properly.
Kindly appreciate any help if there is a bug on my side.

[open]="false" still shows the menu without the labels. This is with Angular 7.

Hi there, this error is occurring on my project when I run it:

ERROR in ../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:44:9 - error TS1086: An accessor cannot be declared in an ambient context.
get fixed(): boolean;
~~~~~
../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:45:9 - error TS1086: An accessor cannot be declared in an ambient context.
set fixed(fixed: boolean);
~~~~~
../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:49:9 - error TS1086: An accessor cannot be declared in an ambient context.
get open(): boolean;
~~~~
../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:50:9 - error TS1086: An accessor cannot be declared in an ambient context.
set open(open: boolean);
~~~~
../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:54:9 - error TS1086: An accessor cannot be declared in an ambient context.
get direction(): Direction;
~~~~~~~~~
../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:55:9 - error TS1086: An accessor cannot be declared in an ambient context.
set direction(direction: Direction);
~~~~~~~~~
../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:59:9 - error TS1086: An accessor cannot be declared in an ambient context.
get animationMode(): AnimationMode;
~~~~~~~~~~~~~
../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:60:9 - error TS1086: An accessor cannot be declared in an ambient context.
set animationMode(animationMode: AnimationMode);
~~~~~~~~~~~~~
../node_modules/@ecodev/fab-speed-dial/lib/fab-speed-dial.d.ts:82:9 - error TS1086: An accessor cannot be declared in an ambient context.
get sp(): boolean;

This is my package.json
"devDependencies": { "@angular-builders/custom-webpack": "8.4.1", "@angular-devkit/build-angular": "^0.803.23", "@angular/cli": "8.3.21", "@angular/common": "8.2.14", "@angular/compiler": "8.2.14", "@angular/compiler-cli": "8.2.14", "@angular/core": "8.2.14", "@angular/language-service": "8.2.14", "@angular/platform-browser": "8.2.14", "@angular/platform-browser-dynamic": "8.2.14", "@angular/router": "8.2.14", "@ngx-translate/core": "11.0.1", "@ngx-translate/http-loader": "4.0.0", "@types/jasmine": "3.5.0", "@types/jasminewd2": "2.0.8", "@types/mocha": "5.2.7", "@types/node": "12.12.21", "chai": "4.2.0", "codelyzer": "5.2.1", "conventional-changelog-cli": "2.0.31", "core-js": "3.6.0", "electron": "^7.1.8", "electron-builder": "^22.3.2", "electron-reload": "1.5.0", "jasmine-core": "3.5.0", "jasmine-spec-reporter": "4.2.1", "karma": "4.4.1", "karma-chrome-launcher": "3.1.0", "karma-coverage-istanbul-reporter": "2.1.1", "karma-jasmine": "2.0.1", "karma-jasmine-html-reporter": "1.4.2", "mocha": "6.2.2", "npm-run-all": "4.1.5", "rxjs": "^6.5.3", "spectron": "9.0.0", "ts-node": "8.5.4", "tslint": "5.20.1", "typescript": "^3.5.3", "wait-on": "3.3.0", "webdriver-manager": "12.1.7", "zone.js": "0.10.2" }, "engines": { "node": ">=10.9.0" }, "dependencies": { "@angular/animations": "^8.2.14", "@angular/cdk": "~8.2.3", "@angular/fire": "^5.2.3", "@angular/forms": "^8.2.14", "@angular/material": "^8.2.3", "@angular/material-moment-adapter": "^8.2.3", "@aspnet/signalr": "^1.1.4", "@ecodev/fab-speed-dial": "^5.0.2", "@fortawesome/angular-fontawesome": "^0.5.0", "@fortawesome/fontawesome-svg-core": "^1.2.26", "@fortawesome/free-solid-svg-icons": "^5.12.0", "@swimlane/ngx-charts": "^13.0.1", "electron-log": "^4.0.0", "electron-store": "^5.1.0", "electron-updater": "^4.2.0", "electron-util": "^0.13.1", "firebase": "^7.6.1", "jsonwebtoken": "^8.5.1", "material-design-icons": "^3.0.1", "moment": "^2.24.0", "ngx-currency": "^2.2.1", "ngx-file-helpers": "^2.0.0", "ngx-float-button": "^1.0.0", "ngx-mask": "^8.1.7", "ngx-mat-select-search": "^2.1.1", "ngx-spinner": "^8.1.0", "node-machine-id": "^1.1.12", "primeflex": "^1.0.0", "primeicons": "^2.0.0", "primeng": "^9.0.0-rc.2", "request": "^2.88.0", "vanilla-text-mask": "^5.1.1" }

and my tsconfig.json
{ "compileOnSave": false, "compilerOptions": { "allowSyntheticDefaultImports": true, "removeComments": true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "es2016", "es2015", "dom" ] }, "include": [ "main.ts", "src/**/*" ], "exclude": [ "node_modules" ] }

Currently when updating to angular material v11 it fails with:
Package "@ecodev/fab-speed-dial" has an incompatible peer dependency to "@angular/material" (requires "^10.0.0", would install "11.1.0").

Please update dependencies for v11 support

currently i have to execute npm commands due to version v16 in package.json:
npm uninstall --save @ecodev/fab-speed-dial
npm audit fix
npm i --save @ecodev/fab-speed-dial -f

Hi, this is well done job, works pretty fine and seems nice. I just want to ask if you could change the trigger selector from "mat-button" to some other word.

What I want is be able to use the button bot not in fab button. (I know this is the purpose, but could be cool if you allow to use it outside fab buttons"

Thanks

$npm install ecodev/fab-speed-dial

[email protected] install /home/webmaster/Angular/fab-speed-dial/node_modules/puppeteer
node install.js

Downloading Chromium r686378 - 114 Mb [====================] 100% 0.0s
Chromium downloaded to /home/webmaster/Angular/fab-speed-dial/node_modules/puppeteer/.local-chromium/linux-686378

I get this error with angular 9. im on the latest fab-speed-dial version.

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[EcoFabSpeedDialComponent]: 
  StaticInjectorError(Platform: core)[EcoFabSpeedDialComponent]: 
    NullInjectorError: No provider for EcoFabSpeedDialComponent!
NullInjectorError: StaticInjectorError(AppModule)[EcoFabSpeedDialComponent]: 
  StaticInjectorError(Platform: core)[EcoFabSpeedDialComponent]: 
    NullInjectorError: No provider for EcoFabSpeedDialComponent!
    at NullInjector.get (core.js:1050)
    at resolveToken (core.js:17559)
    at tryResolveToken (core.js:17485)
    at StaticInjector.get (core.js:17300)
    at resolveToken (core.js:17559)
    at tryResolveToken (core.js:17485)
    at StaticInjector.get (core.js:17300)
    at resolveNgModuleDep (core.js:31600)
    at NgModuleRef_.get (core.js:32573)
    at Object.resolveDep (core.js:33132)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40877)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
    at invokeTask (zone-evergreen.js:1596)

my imports look like this

imports: [
	  BrowserModule,
	  ***
	  
	  ***
      MatIconModule,
	  ***
	  
	  ***
      EcoFabSpeedDialModule
	  ]

Hello, can you please update the angular version and tag a new version for this package, as currently it cannot be used with Angular 11 projects.

This error is thrown when I try to update an Angular project from v10 to v11:

                  Package "@ecodev/fab-speed-dial" has an incompatible peer dependency to "@angular/material" (requires "^10.0.0", would install "11.0.1").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
  See "/tmp/ng-bTg6b4/angular-errors.log" for further details.

Scenario:
When I press button menu opens, but after second press it doesn't close.

Check in Angular 16.1.0 with this dependencies:
"dependencies": {
"@angular/animations": "^16.1.0",
"@angular/common": "^16.1.0",
"@angular/compiler": "^16.1.0",
"@angular/core": "^16.1.0",
"@angular/forms": "^16.1.0",
"@angular/platform-browser": "^16.1.0",
"@angular/platform-browser-dynamic": "^16.1.0",
"@angular/router": "^16.1.0",
"@ecodev/fab-speed-dial": "15.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.1.6",
"@angular/cli": "~16.1.6",
"@angular/compiler-cli": "^16.1.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.1.3"
}

Hi, it would be nice to have support for a configurable base z-index, for the action items above all. For the items, it's set programmatically, so it overwrites any style given from outside.

When clicking outside the FAB the Action Items are collapse behind the Trigger, but the '' eco-opened '' class remains there.

Hi, It would be great if you could add a CHANGELOG.md file, in which we can see the changes you are making, and in this way, thoroughly update it every time a new version is released.